| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <script src="../../resources/js-test.js"></script> | 3 <script src="../../resources/js-test.js"></script> |
| 4 | 4 |
| 5 <style> | 5 <style> |
| 6 @-webkit-keyframes example { | 6 @-webkit-keyframes example { |
| 7 from { | 7 from { width: 50px; height: 50px; } |
| 8 width: 50px; | 8 to { width: 10px; height: 10px; } |
| 9 height: 50px; | |
| 10 } | |
| 11 to { | |
| 12 width: 10px; | |
| 13 height: 10px; | |
| 14 } | |
| 15 } | 9 } |
| 16 | 10 |
| 17 @keyframes example { | 11 @keyframes example { |
| 18 from { | 12 from { width: 50px; height: 50px; } |
| 19 width: 50px; | 13 to { width: 10px; height: 10px; } |
| 20 height: 50px; | |
| 21 } | |
| 22 to { | |
| 23 width: 10px; | |
| 24 height: 10px; | |
| 25 } | |
| 26 } | 14 } |
| 27 | 15 |
| 28 #after:after, | 16 .after:after, |
| 29 #before:before { | 17 .before:before { |
| 30 content: ""; | 18 content: ""; |
| 31 display: block; | 19 display: block; |
| 32 position: relative; | 20 position: relative; |
| 33 background: green; | 21 background: green; |
| 34 width: 10px; | 22 width: 10px; |
| 35 height: 10px; | 23 height: 10px; |
| 36 -webkit-animation: example 2s; | 24 -webkit-animation: example 2s; |
| 37 -moz-animation: example 2s; | 25 -moz-animation: example 2s; |
| 38 animation: example 2s; | 26 animation: example 2s; |
| 39 } | 27 } |
| 40 | 28 |
| 41 #before, | 29 .before, |
| 42 #after { | 30 .after { |
| 43 display: inline-block; | 31 display: inline-block; |
| 44 border: 1px solid black; | 32 border: 1px solid black; |
| 45 background: red; | 33 background: red; |
| 46 } | 34 } |
| 47 | 35 |
| 48 </style> | 36 </style> |
| 49 | 37 |
| 50 <div id="before"></div> | 38 <div class="before"></div> |
| 51 <div id="after"></div> | 39 <div class="before" id="before"></div> |
| 40 <div class="before"></div> |
| 41 <div class="after"></div> |
| 42 <div class="after" id="after"></div> |
| 43 <div class="after"></div> |
| 52 | 44 |
| 53 <script> | 45 <script> |
| 54 description('Animations on :before and :after pseudo elements should run when ap
plied before onload.'); | 46 description('Animations on :before and :after pseudo elements should run when ap
plied before onload.'); |
| 55 | 47 |
| 56 if (window.testRunner) | 48 if (window.testRunner) |
| 57 testRunner.dumpAsText(); | 49 testRunner.dumpAsText(); |
| 58 | 50 |
| 59 // FIXME: This test should be modified so subpixel doesn't cause off by one | 51 // FIXME: This test should be modified so subpixel doesn't cause off by one |
| 60 // below and it no longer needs shouldBeCloseTo. | 52 // below and it no longer needs shouldBeCloseTo. |
| 61 | 53 |
| (...skipping 33 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 95 var div = document.getElementById('after'); | 87 var div = document.getElementById('after'); |
| 96 window.div = div; | 88 window.div = div; |
| 97 shouldBeCloseTo('div.offsetWidth', 12, 1); | 89 shouldBeCloseTo('div.offsetWidth', 12, 1); |
| 98 }, 2000); | 90 }, 2000); |
| 99 } | 91 } |
| 100 } | 92 } |
| 101 | 93 |
| 102 onload = testAnimations; | 94 onload = testAnimations; |
| 103 | 95 |
| 104 </script> | 96 </script> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 196143004:
Fix usage of pseudo style cache (Closed)
Base URL: https://chromium.googlesource.com/chromium/blink.git@master