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