<body>
    <p>This tests that the video element's controls in full screen mode flip the layout of the volume controls in RTL mode.</p>
    <video id="video" width="300"></video>
    <script src="full-screen-test.js"></script>
    <script src="../media/media-controls.js"></script>
    <script>
        var callback;
        var shadowRoot;
        var volumeBox;
        var video = document.getElementById('video');

        waitForEvent(document, 'webkitfullscreenchange', function() {
            if (window.internals) {
                testExpected("shadowRoot = internals.shadowRoot(video)", null, "!=");
                testExpected("volumeBox = mediaControlsElement(shadowRoot.firstChild, '-webkit-media-controls-volume-slider-container')", null, "!=");
                testExpected("volumeBox.classList.contains('uses-ltr-user-interface-layout-direction')", true, "==");
                testExpected("document.defaultView.getComputedStyle(volumeBox)['transform']", 'none', "==");

                window.internals.setUserInterfaceLayoutDirection("RTL");
                testExpected("volumeBox.classList.contains('uses-ltr-user-interface-layout-direction')", false, "==");
                testExpected("document.defaultView.getComputedStyle(volumeBox)['transform']", 'matrix(-1, 0, 0, 1, 23, 0)', "==");

                window.internals.setUserInterfaceLayoutDirection("LTR");
                testExpected("volumeBox.classList.contains('uses-ltr-user-interface-layout-direction')", true, "==");
                testExpected("document.defaultView.getComputedStyle(volumeBox)['transform']", 'none', "==");
            } else
                logResult(false, "window.internals == undefined");

            endTest();
        });

        runWithKeyDown(function() { video.webkitRequestFullScreen() });
    </script>
</body>