The Tor Browser / file comparison
comparison: layout/style/test/test_transitions_computed_value_combinations.html
layout/style/test/test_transitions_computed_value_combinations.html
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:20607c527d41 |
|---|---|
| 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"> | |
| 16 | |
| 17 /** Test for Bug 435441 **/ | |
| 18 | |
| 19 | |
| 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 } | |
| 36 | |
| 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 }; | |
| 77 | |
| 78 var elt = document.getElementById("content"); | |
| 79 var cs = getComputedStyle(elt, ""); | |
| 80 | |
| 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 } | |
| 96 | |
| 97 var child = document.createElement("div"); | |
| 98 elt.appendChild(child); | |
| 99 var child_cs = getComputedStyle(child, ""); | |
| 100 | |
| 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 } | |
| 124 | |
| 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 } | |
| 152 | |
| 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 } | |
| 163 | |
| 164 ok(all_integers, "pseudo-random number generator kept its numbers " + | |
| 165 "as integers throughout run"); | |
| 166 | |
| 167 </script> | |
| 168 </pre> | |
| 169 </body> | |
| 170 </html> |
