testing/web-platform/tests/css/css-regions/interactivity/mouse/regions-mouse-events-001.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: onclick events inside region and outside region</title>
        <link rel="author" title="David Alcala" href="mailto:dalcala@adobe.com">
        <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, mouse onclick events inside and outside a named flow should function correctly.">
        <meta name="flags" content="dom interact">
        <link href="support/css/regions-mouse-events.css" rel="stylesheet" type="text/css">
        <script src="/resources/testharness.js"></script>
        <script src="/resources/testharnessreport.js"></script>
        <script src="support/js/regions-mouse-events-test-helper.js"></script>
    </head>
    <body>
        <p id="msg">Left-click the mouse on the black square, then left-click the mouse on the orange square.</p>
        <div id="content">
            <div class="block"></div>
            <div class="block"></div>
            <div id="target-block" class="block"></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</div>
        <div id="log"></div>
    </body>
    <script type="text/javascript">

        if(getLeftPosition("target-block") !== 0) {
            var test1 = async_test("onclick event fired inside region");
            test1.step(function () {
                var testTarget = document.getElementById("target-block");
                testTarget.onclick = test1.step_func(function (evt) {

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

                    test1.done();
                });
                mouseClick("target-block");
            });

            var test2 = async_test("onclick event fired outside region");
            test2.step(function () {
                var testTarget = document.getElementById("outside-region");
                testTarget.onclick = test2.step_func(function (evt) {

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

                    test2.done();
                });
                mouseClick("outside-region");
            });
            completionCallback();
        }
        else {
            test(function () {
                assert_true(false);
            }, "Regions are not enabled");
        }

    </script>
</html>