testing/web-platform/tests/css/css-regions/interactivity/keyboard/regions-keyboard-events-010.html
author qiuzhong <zhongx.qiu@intel.com>
Thu, 13 Dec 2018 13:54:45 +0000
changeset 450611 ca4f842c1eeac6a02397529f50d74e1ee23f264d
parent 392912 9415bff8166863f344256c7a3dd14aa5e038e82b
permissions -rw-r--r--
Bug 1510617 [wpt PR 14273] - Remove timeout from async_test for argument form., a=testonly Automatic update from web-platform-tests Remove timeout from async_test for argument form. (#14273) There're cases that the timeout is passing to async_test in the tests. They should be removed as well. Related: #11120 -- wpt-commits: 6911a29a5a8b1c27b9ec343935c132a1feb9d566 wpt-pr: 14273

<!DOCTYPE HTML>
<html>
    <head>
        <title>CSS Regions: onkeydown and onkeyup events inside region using Tab key in forms</title>
        <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
        <link rel="reviewer" title="Rebecca Hauck" href="mailto:rhauck@adobe.com"><!-- 07-19-2013 -->
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#flow-from">
        <link rel="help" href="http://www.w3.org/TR/css3-regions/#relation-to-document-events">
        <meta name="assert" content="CSS regions module does not alter the normal processing of events in the document
         tree. Therefore, onkeydown and onkeyup events inside a named flow should be raised when the Tab key is pressed
         and released.">
        <meta name="flags" content="dom interact">
        <link href="support/css/regions-keyboard.css" rel="stylesheet" type="text/css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="support/js/regions-keyboard-events-test-helper.js"></script>
    </head>
    <body>
        <p id="msg">Press the Tab key two times.</p>
        <div id="content">
            <div class="block"></div>
            <div class="block"></div>
            <div id="target-block" class="block">
                <form id="my-form">
                    <input type="text" id="textfield-inside" size="10" autofocus>
                    <textarea id="textarea-inside" rows="3" cols="10"></textarea>
                </form>
            </div>
        </div>
        <div class="region"></div>
        <div class="region"></div>
        <div class="region"></div>
        <br/>
        <div id="outside-region">This div is outside the region
            <form id="form-outside">
                <input type="text" id="textfield-outside" size="10">
                <textarea id="textarea-outside" rows="3" cols="10"></textarea>
            </form>
        </div>
        <div id="log"></div>
    </body>
    <script type="text/javascript">

        if(getLeftPosition("target-block") !== 0) {

            var test1 = async_test("onkeydown event fired in textfield inside region");
            test1.step(function () {
                var testTarget = document.getElementById("textfield-inside");
                testTarget.onkeydown = test1.step_func(function (evt) {

                    /* Verify the target outside the region has the correct ID */
                    test(function () {
                        assert_equals(evt.target.id, "textfield-inside");
                    }, "Textfield inside region has the correct ID");

                    /* Verify the textfield received focus from tab key */
                    test(function () {
                        assert_equals(document.activeElement.id, "textfield-inside");
                    }, "Textfield inside region received focus");

                    test1.done();
                });
            });

            var test2 = async_test("onkeyup event fired in textarea inside region");
            test2.step(function () {
                var testTarget = document.getElementById("textarea-inside");
                testTarget.onkeyup = test2.step_func(function (evt) {

                    /* Verify the textfield received focus from tab key */
                    test(function () {
                        assert_equals(document.activeElement.id, "textarea-inside");
                    }, "textarea inside region received focus");

                    test2.done();
                });
            });

            var test3 = async_test("onkeydown event fired in textarea inside region");
            test3.step( function() {
                var testTarget = document.getElementById("textarea-inside");
                testTarget.onkeydown = test3.step_func(function (evt) {

                    /* Verify the target outside the region has the correct ID */
                    test(function () {
                        assert_equals(evt.target.id, "textarea-inside");
                    }, "textarea inside region has the correct ID");

                    test3.done();
                });
            });

            tabKeyPresses(3);
            completionCallback();

        } //end of getLeftPosition test
        else {
            test(function () {
                assert_true(false);
            }, "Regions are not enabled");
        }
    </script>
</html>