test_transitions_computed_value_combinations.html (5771B)
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 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>