summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/css/css-transitions/properties-value-implicit-001.html
blob: 8500436c529707f43349354ee87ef460e2d7d63b (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>CSS Transitions Test: font-size-relative properties transition by implicit value change</title>
        <meta name="timeout" content="long">
        <meta name="assert" content="Test checks that font-size-relative properties (all em-lengths) run a transition when font-size is changed">
        <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="offscreen"></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>
            // see README.md for an explanation of how this test suite works
            // this suite tests properties that haven't been specified at all
            // (like background-image and column-rule-width)

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

            var tests = getFontSizeRelativePropertyTests();
            // for testing, limit to a couple of iterations
            // tests = tests.slice(10, 30);
            // or filter using one of:
            // tests = filterPropertyTests(tests, "background-color color(rgba)");
            // tests = filterPropertyTests(tests, ["background-color color(rgba)", ...]);
            // tests = filterPropertyTests(tests, /^background-color/);

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

            runParallelAsyncHarness({
                // array of test data
                tests: tests,
                // the number of tests to run in parallel
                testsPerSlice: 50,
                // milliseconds to wait before calling teardown and ending test
                duration: parseFloat(duration) * 1000,
                // prepare individual test
                setup: function(data, options) {
                    // as we're dealing with em-based lengths, we need to define a font-size
                    data.from['font-size'] = '20px';
                    data.to['font-size'] = '30px';
                    // remove property from target style so it won't transition on its own
                    delete data.to[data.property];

                    var styles = {
                        '.fixture': {},

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

                        '.transition': data.from,
                        '.transition.to' : data.to,
                        '.transition.how' : {transition: addVendorPrefix(data.property) + ' ' + 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");
                            // kick off the transition
                            generalParallelTest.startTransition(data);

                            // make sure we didn't get the target value immediately.
                            // If we did, there wouldn't be a transition!
                            var current = data.transition.computedStyle(data.property);
                            assert_not_equals(current, data.transition.to, "must not be target value after start");
                        },
                        done: function(test, data, options) {
                            // make sure the property's value were neither initial nor target while transitioning
                            test.step(generalParallelTest.assertIntermediateValuesFunc(data, 'transition'));
                        }
                    },
                    // 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', addVendorPrefix(data.property) + ":" + duration));
                        }
                    }
                },
                // called once all tests are done
                done: generalParallelTest.done
            });
        </script>
    </body>
</html>