11 z-index: 0; /* create stacking context */
12 border: 1px solid black;
20 background-color: blue;
24 -webkit-animation: spin 2s infinite linear;
27 @-webkit-keyframes spin {
28 from { transform: rotate(90deg); }
29 to { transform: rotate(360deg); }
33 if (window.testRunner) {
34 testRunner.dumpAsText();
35 testRunner.waitUntilDone();
40 var box = document.getElementById('to-animate');
41 box.addEventListener('webkitAnimationStart', animationStarted, false);
42 box.className = 'animating box';
45 function animationStarted()
47 if (window.testRunner) {
48 var layerText = window.internals.layerTreeAsText(document);
49 // The animation can progress before the start event is handled, so remove the
50 // effects as they can vary.
51 layerText = layerText.replace(/\[.*,.*,.*,.*\]/g, '[...]');
52 document.getElementById('layers').innerText = layerText;
53 testRunner.notifyDone();
56 window.addEventListener('load', runTest, false);
60 <div class="container">
61 <div id="to-animate" class="box"></div>
62 <!-- This div will get a layer -->
63 <div class="box"></div>
65 <!-- This div should not get a layer -->
66 <div class="box"></div>
67 <pre id="layers">Layer tree goes here in DRT</pre>