LayoutTests/media/modern-media-controls/layout-node/subclassing.html

<script src="../../../resources/js-test-pre.js"></script>
<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/scheduler.js" type="text/javascript"></script>
<script src="../../../../Source/WebCore/Modules/modern-media-controls/controls/layout-node.js" type="text/javascript"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<script type="text/javascript">

description("Subclassing <code>LayoutNode</code> by exposing a new custom property.");

window.jsTestIsAsync = true;

class OpacityNode extends LayoutNode
{

    constructor(stringOrElement)
    {
        super(stringOrElement);

        this._opacity = 1;
    }

    set opacity(opacity)
    {
        this._opacity = opacity;
        this.markDirtyProperty("opacity");
    }

    commitProperty(propertyName)
    {
        debug(`OpacityNode.commitProperty() was called with propertyName = ${propertyName}`);
        if (propertyName === "opacity")
            this.element.style.opacity = this._opacity;
        else
            super.commitProperty(propertyName);    
    }

    layout()
    {
        debug("OpacityNode.layout() was called");
        super.layout();
    }

}

const node = new OpacityNode;

debug("Check the node is not dirty by default");
shouldBeFalse("node.needsLayout");

debug("");
debug("node.opacity = 0.5");
node.opacity = 0.5;
shouldBeTrue("node.needsLayout");

let numberOfFrames = 0;
scheduler.frameDidFire = function()
{
    debug("");
    debug("Layout was performed");

    switch (++numberOfFrames) {
    case 1:
        shouldBeEqualToString("node.element.style.opacity", "0.5");
        debug("");
        debug("node.needsLayout = true");
        node.needsLayout = true;
        break;
    case 2:
        finishMediaControlsTest();
        break;
    }
};

scheduler.frameWillFire = function()
{
    debug("");
    debug("Layout will be performed");
};

</script>
<script src="../../../resources/js-test-post.js"></script>