| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 | 2 |
| 3 <html> | 3 <html> |
| 4 <style type="text/css" media="screen"> | 4 <style type="text/css" media="screen"> |
| 5 .test { | 5 .test { |
| 6 position: relative; | 6 position: relative; |
| 7 top: -10px; /* overlap composited layer */ | 7 top: -10px; /* overlap composited layer */ |
| 8 width: 100px; | 8 width: 100px; |
| 9 height: 100px; | 9 height: 100px; |
| 10 background-color: white; | 10 background-color: white; |
| 11 text-indent: -10000px; | 11 text-indent: -10000px; |
| 12 } | 12 } |
| 13 | 13 |
| 14 .compositing { | 14 .compositing { |
| 15 width: 1px; | 15 width: 1px; |
| 16 height: 1px; | 16 height: 1px; |
| 17 transform: translateZ(0); | 17 transform: translateZ(0); |
| 18 } | 18 } |
| 19 | 19 |
| 20 #fading { | 20 #fading { |
| 21 opacity: 0; | 21 opacity: 0; |
| 22 -webkit-transition: opacity 0.1s; | 22 transition: opacity 0.1s; |
| 23 } | 23 } |
| 24 </style> | 24 </style> |
| 25 <script type="text/javascript" charset="utf-8"> | 25 <script type="text/javascript" charset="utf-8"> |
| 26 if (window.testRunner) { | 26 if (window.testRunner) { |
| 27 testRunner.waitUntilDone(); | 27 testRunner.waitUntilDone(); |
| 28 testRunner.dumpAsText(); | 28 testRunner.dumpAsText(); |
| 29 } | 29 } |
| 30 | 30 |
| 31 function startFade() | 31 function startFade() |
| 32 { | 32 { |
| 33 // At the end of this fade we are interested in the size of .test in the l
ayer dump. | 33 // At the end of this fade we are interested in the size of .test in the l
ayer dump. |
| 34 // It should be constrained to the size of the view, so not tiled. | 34 // It should be constrained to the size of the view, so not tiled. |
| 35 var fader = document.getElementById('fading'); | 35 var fader = document.getElementById('fading'); |
| 36 fader.addEventListener('webkitTransitionEnd', fadeDone, false); | 36 fader.addEventListener('transitionend', fadeDone, false); |
| 37 document.getElementById('fading').style.opacity = 1; | 37 document.getElementById('fading').style.opacity = 1; |
| 38 } | 38 } |
| 39 | 39 |
| 40 function fadeDone() | 40 function fadeDone() |
| 41 { | 41 { |
| 42 if (window.testRunner) { | 42 if (window.testRunner) { |
| 43 document.getElementById('layers').innerText = window.internals.layerTree
AsText(document); | 43 document.getElementById('layers').innerText = window.internals.layerTree
AsText(document); |
| 44 testRunner.notifyDone(); | 44 testRunner.notifyDone(); |
| 45 } | 45 } |
| 46 } | 46 } |
| (...skipping 12 matching lines...) Expand all Loading... |
| 59 <div id="fading"> | 59 <div id="fading"> |
| 60 Fader | 60 Fader |
| 61 </div> | 61 </div> |
| 62 | 62 |
| 63 <pre id="layers">Layer tree goes here in DRT</pre> | 63 <pre id="layers">Layer tree goes here in DRT</pre> |
| 64 <script> | 64 <script> |
| 65 window.onload = startFade; | 65 window.onload = startFade; |
| 66 </script> | 66 </script> |
| 67 </body> | 67 </body> |
| 68 </html> | 68 </html> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2518943002:
CSS Transitions: Reduce usage of webkit prefix in layout tests (Closed)
