The Tor Browser / file comparison
comparison: layout/style/test/test_transitions_computed_values.html
layout/style/test/test_transitions_computed_values.html
- branch
- TOR_BUG_3246
- changeset 6
- 8bccb770b82d
equal
deleted
inserted
replaced
| -1:000000000000 | 0:fdea6d61eadd |
|---|---|
| 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 * test that when transition properties are inherited, the length of the | |
| 22 * computed value stays the same | |
| 23 */ | |
| 24 | |
| 25 var p = document.getElementById("content"); | |
| 26 var c = document.createElement("div"); | |
| 27 p.appendChild(c); | |
| 28 var cs = getComputedStyle(c, ""); | |
| 29 | |
| 30 p.style.transitionProperty = "margin-left, margin-right"; | |
| 31 c.style.transitionProperty = "inherit"; | |
| 32 is(cs.transitionProperty, "margin-left, margin-right", | |
| 33 "computed style match with no other properties"); | |
| 34 c.style.transitionDuration = "5s"; | |
| 35 is(cs.transitionProperty, "margin-left, margin-right", | |
| 36 "computed style match with shorter property"); | |
| 37 is(cs.transitionDuration, "5s", | |
| 38 "shorter property not extended"); | |
| 39 c.style.transitionDuration = "5s, 4s, 3s, 2000ms"; | |
| 40 is(cs.transitionProperty, "margin-left, margin-right", | |
| 41 "computed style match with longer property"); | |
| 42 is(cs.transitionDuration, "5s, 4s, 3s, 2s", | |
| 43 "longer property computed correctly"); | |
| 44 p.style.transitionProperty = ""; | |
| 45 c.style.transitionProperty = ""; | |
| 46 c.style.transitionDuration = ""; | |
| 47 | |
| 48 // and repeat the above set of tests with property and duration swapped | |
| 49 p.style.transitionDuration = "5s, 4s"; | |
| 50 c.style.transitionDuration = "inherit"; | |
| 51 is(cs.transitionDuration, "5s, 4s", | |
| 52 "computed style match with no other properties"); | |
| 53 c.style.transitionProperty = "margin-left"; | |
| 54 is(cs.transitionDuration, "5s, 4s", | |
| 55 "computed style match with shorter property"); | |
| 56 is(cs.transitionProperty, "margin-left", | |
| 57 "shorter property not extended"); | |
| 58 c.style.transitionProperty = | |
| 59 "margin-left, margin-right, margin-top, margin-bottom"; | |
| 60 is(cs.transitionDuration, "5s, 4s", | |
| 61 "computed style match with longer property"); | |
| 62 is(cs.transitionProperty, | |
| 63 "margin-left, margin-right, margin-top, margin-bottom", | |
| 64 "longer property computed correctly"); | |
| 65 p.style.transitionDuration = ""; | |
| 66 c.style.transitionDuration = ""; | |
| 67 c.style.transitionProperty = ""; | |
| 68 | |
| 69 // And do the same pair of tests for animations: | |
| 70 | |
| 71 p.style.animationName = "bounce, roll"; | |
| 72 c.style.animationName = "inherit"; | |
| 73 is(cs.animationName, "bounce, roll", | |
| 74 "computed style match with no other properties"); | |
| 75 c.style.animationDuration = "5s"; | |
| 76 is(cs.animationName, "bounce, roll", | |
| 77 "computed style match with shorter property"); | |
| 78 is(cs.animationDuration, "5s", | |
| 79 "shorter property not extended"); | |
| 80 c.style.animationDuration = "5s, 4s, 3s, 2000ms"; | |
| 81 is(cs.animationName, "bounce, roll", | |
| 82 "computed style match with longer property"); | |
| 83 is(cs.animationDuration, "5s, 4s, 3s, 2s", | |
| 84 "longer property computed correctly"); | |
| 85 p.style.animationName = ""; | |
| 86 c.style.animationName = ""; | |
| 87 c.style.animationDuration = ""; | |
| 88 | |
| 89 // and repeat the above set of tests with name and duration swapped | |
| 90 p.style.animationDuration = "5s, 4s"; | |
| 91 c.style.animationDuration = "inherit"; | |
| 92 is(cs.animationDuration, "5s, 4s", | |
| 93 "computed style match with no other properties"); | |
| 94 c.style.animationName = "bounce"; | |
| 95 is(cs.animationDuration, "5s, 4s", | |
| 96 "computed style match with shorter property"); | |
| 97 is(cs.animationName, "bounce", | |
| 98 "shorter property not extended"); | |
| 99 c.style.animationName = | |
| 100 "bounce, roll, wiggle, spin"; | |
| 101 is(cs.animationDuration, "5s, 4s", | |
| 102 "computed style match with longer property"); | |
| 103 is(cs.animationName, | |
| 104 "bounce, roll, wiggle, spin", | |
| 105 "longer property computed correctly"); | |
| 106 p.style.animationDuration = ""; | |
| 107 c.style.animationDuration = ""; | |
| 108 c.style.animationName = ""; | |
| 109 | |
| 110 </script> | |
| 111 </pre> | |
| 112 </body> | |
| 113 </html> |
