testing/web-platform/tests/css/css-transitions/detached-container-001.html
author qiuzhong <zhongx.qiu@intel.com>
Thu, 13 Dec 2018 13:54:45 +0000
changeset 450611 ca4f842c1eeac6a02397529f50d74e1ee23f264d
parent 398399 049f8d7499d7cecc60e532dfd8a74db553fa89e3
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>
        <meta charset="utf-8">
        <title>CSS Transitions Test: Not Transitioning within detached element</title>
        <meta name="assert" content="Test checks that transitions are NOT run within detached elements">
        <link rel="help" title="2. Transitions" href="http://www.w3.org/TR/css3-transitions/#transitions">
        <link rel="author" title="Rodney Rehm" href="http://rodneyrehm.de/en/">
        <meta name="flags" content="dom">

        <script src="/resources/testharness.js" type="text/javascript"></script>
        <script src="/resources/testharnessreport.js" type="text/javascript"></script>

        <script src="./support/vendorPrefix.js" type="text/javascript"></script>
        <script src="./support/helper.js" type="text/javascript"></script>
        <script src="./support/runParallelAsyncHarness.js" type="text/javascript"></script>
        <script src="./support/generalParallelTest.js" type="text/javascript"></script>
        <script src="./support/properties.js" type="text/javascript"></script>

        <style type="text/css">
            #offscreen {
                position: absolute;
                top: -100000px;
                left: -100000px;
                width: 100000px;
                height: 100000px;
            }
        </style>
    </head>
    <body>
        <!-- required by testharnessreport.js -->
        <div id="log"></div>
        <!-- elements used for testing -->
        <div id="fixture" class="fixture">
            <div class="container">
                <div class="transition">Text sample</div>
            </div>
        </div>
        <div id="off-screen"></div>

        <!--
            SEE ./support/README.md for an abstract explanation of the test procedure
            http://test.csswg.org/source/contributors/rodneyrehm/submitted/css3-transitions/README.md
        -->

        <script>

            // this test takes its time, give it a minute to run
            var timeout = 60000;
            setup({timeout: timeout});

            var tests = [
                {
                    name: "transition within detached container",
                    property: 'background-color',
                    flags: {},
                    from: {'background-color': 'red'},
                    to: {'background-color': 'green'}
                }
            ];

            // general transition-duration
            var duration = '0.5s';

            runParallelAsyncHarness({
                // array of test data
                tests: tests,
                // the number of tests to run in parallel
                testsPerSlice: 1,
                // milliseconds to wait before calling teardown and ending test
                duration: parseFloat(duration) * 1000,
                // prepare individual test
                setup: function(data, options) {
                    var styles = {
                        '.fixture': {},

                        '.container': data.parentStyle,
                        '.container.to': {},
                        '.container.how': {},

                        '.transition': data.from,
                        '.transition.to' : data.to,
                        '.transition.how' : {transition: 'all ' + duration + ' linear 0s'}
                    };

                    generalParallelTest.setup(data, options);
                    generalParallelTest.addStyles(data, options, styles);
                },
                // cleanup after individual test
                teardown: generalParallelTest.teardown,
                // invoked prior to running a slice of tests
                sliceStart: generalParallelTest.sliceStart,
                // invoked after running a slice of tests
                sliceDone: generalParallelTest.sliceDone,
                // test cases, make them as granular as possible
                cases: {
                    // test property values while transitioning
                    // values.start kicks off a transition
                    'values': {
                        // run actual test, assertions can be used here!
                        start: function(test, data, options) {
                            // identify initial and target values
                            generalParallelTest.getStyle(data);
                            // make sure values differ, if they don't, the property could most likely not be parsed
                            assert_not_equals(data.transition.from, data.transition.to, "initial and target values may not match");
                            // detach transitioning elements
                            data.fixture.parentNode.removeChild(data.fixture);
                            // kick off the transition
                            generalParallelTest.startTransition(data);
                        },
                        done: function(test, data, options) {
                            // make sure there were no intermediate values
                            assert_equals(data.transition.values.length, 2, "no intermediate values");
                        }
                    },
                    // test TransitionEnd events
                    'events': {
                        done: function(test, data, options) {
                            // make sure there were no events on parent
                            test.step(generalParallelTest.assertExpectedEventsFunc(data, 'container', ""));
                            // make sure we got the event for the tested property only
                            test.step(generalParallelTest.assertExpectedEventsFunc(data, 'transition', ""));
                        }
                    }
                },
                // called once all tests are done
                done: generalParallelTest.done
            });
        </script>
    </body>
</html>