layout/style/test/test_transitions_computed_value_combinations.html@7e26c7da4463
layout/style/test/test_transitions_computed_value_combinations.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
1 <!DOCTYPE HTML>
2 <html>
3 <!--
4 https://bugzilla.mozilla.org/show_bug.cgi?id=435441
5 -->
6 <head>
7 <title>Test for Bug 435441</title>
8 <script type="application/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
9 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
10 </head>
11 <body>
12 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=435441">Mozilla Bug 435441</a>
13 <div id="content" style="display: none"></div>
14 <pre id="test">
15 <script type="application/javascript">
17 /** Test for Bug 435441 **/
20 /**
21 * I want to test a reasonable number of combinations rather than all of
22 * them, but I also want the test results to be reproducable. So use a
23 * simple random number generator with my own seed. See
24 * http://en.wikipedia.org/wiki/Linear_congruential_generator
25 * (Using the numbers from Numerical Recipes.)
26 */
27 var rand_state = 1938266273; // a randomly (once) generated number in [0,2^32)
28 var all_integers = true;
29 function myrand()
30 {
31 rand_state = ((rand_state * 1664525) + 1013904223) % 0x100000000;
32 all_integers = all_integers &&
33 Math.ceil(rand_state) == Math.floor(rand_state);
34 return rand_state / 0x100000000; // return value in [0,1)
35 }
37 // We want to test a bunch of values for each property.
38 // Each of these values will also have a "computed" property filled in
39 // below, so that we ensure it always computes to the same value.
40 var values = {
41 "transition-duration":
42 [
43 { lone: true, specified: "initial" },
44 { lone: false, specified: "2s" },
45 { lone: false, specified: "0s" },
46 { lone: false, specified: "430ms" },
47 { lone: false, specified: "1s" },
48 ],
49 "transition-property":
50 [
51 { lone: true, specified: "initial" },
52 { lone: true, specified: "none" },
53 { lone: true, specified: "all" },
54 { lone: false, specified: "color" },
55 { lone: false, specified: "border-spacing" },
56 // Make sure to test the "unknown property" case.
57 { lone: false, specified: "unsupported-property" },
58 { lone: false, specified: "-other-unsupported-property" },
59 ],
60 "transition-timing-function":
61 [
62 { lone: true, specified: "initial" },
63 { lone: false, specified: "linear" },
64 { lone: false, specified: "ease" },
65 { lone: false, specified: "ease-in-out" },
66 { lone: false, specified: "cubic-bezier(0, 0, 0.63, 1.00)" },
67 ],
68 "transition-delay":
69 [
70 { lone: true, specified: "initial" },
71 { lone: false, specified: "2s" },
72 { lone: false, specified: "0s" },
73 { lone: false, specified: "430ms" },
74 { lone: false, specified: "-1s" },
75 ],
76 };
78 var elt = document.getElementById("content");
79 var cs = getComputedStyle(elt, "");
81 // Add the "computed" property to all of the above values.
82 for (var prop in values) {
83 var valueset = values[prop];
84 for (var index in valueset) {
85 var item = valueset[index];
86 elt.style.setProperty(prop, item.specified, "");
87 item.computed = cs.getPropertyValue(prop);
88 elt.style.removeProperty(prop);
89 isnot(item.computed, "", "computed value must not be empty");
90 if (index != 0) {
91 isnot(item.computed, valueset[index-1].computed,
92 "computed value must not be the same as the last one");
93 }
94 }
95 }
97 var child = document.createElement("div");
98 elt.appendChild(child);
99 var child_cs = getComputedStyle(child, "");
101 // Now test a hundred random combinations of values on the parent and
102 // child.
103 for (var iteration = 0; iteration < 100; ++iteration) {
104 // Figure out values on the parent.
105 var parent_vals = {};
106 for (var prop in values) {
107 var valueset = values[prop];
108 var list_length = Math.ceil(Math.pow(myrand(), 2) * 6);
109 // 41% chance of length 1
110 var specified = [];
111 var computed = [];
112 for (var i = 0; i < list_length; ++i) {
113 var index;
114 do {
115 index = Math.floor(myrand() * valueset.length);
116 } while (list_length != 1 && valueset[index].lone);
117 specified.push(valueset[index].specified);
118 computed.push(valueset[index].computed);
119 }
120 parent_vals[prop] = { specified: specified.join(", "),
121 computed: computed.join(", ") };
122 elt.style.setProperty(prop, parent_vals[prop].specified, "");
123 }
125 // Figure out values on the child.
126 var child_vals = {};
127 for (var prop in values) {
128 var valueset = values[prop];
129 // Use 0 as a magic value for "inherit".
130 var list_length = Math.floor(Math.pow(myrand(), 1.5) * 7);
131 // 27% chance of inherit
132 // 16% chance of length 1
133 if (list_length == 0) {
134 child_vals[prop] = { specified: "inherit",
135 computed: parent_vals[prop].computed };
136 } else {
137 var specified = [];
138 var computed = [];
139 for (var i = 0; i < list_length; ++i) {
140 var index;
141 do {
142 index = Math.floor(myrand() * valueset.length);
143 } while (list_length != 1 && valueset[index].lone);
144 specified.push(valueset[index].specified);
145 computed.push(valueset[index].computed);
146 }
147 child_vals[prop] = { specified: specified.join(", "),
148 computed: computed.join(", ") };
149 }
150 child.style.setProperty(prop, child_vals[prop].specified, "");
151 }
153 // Test computed values
154 for (var prop in values) {
155 is(cs.getPropertyValue(prop), parent_vals[prop].computed,
156 "computed value of " + prop + ": " + parent_vals[prop].specified +
157 " on parent.");
158 is(child_cs.getPropertyValue(prop), child_vals[prop].computed,
159 "computed value of " + prop + ": " + child_vals[prop].specified +
160 " on child.");
161 }
162 }
164 ok(all_integers, "pseudo-random number generator kept its numbers " +
165 "as integers throughout run");
167 </script>
168 </pre>
169 </body>
170 </html>
