| <!DOCTYPE html> |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| background: orange; |
| } |
| div::before { |
| content: ":)"; |
| transition-property: transform; |
| transition-duration: 1ms; |
| |
| /* Make the pseudo element "transformable" as per |
| * https://www.w3.org/TR/css-transforms-1/#transformable-element. |
| */ |
| display: block; |
| } |
| </style> |
| <div></div> |
| <span id="dummy"></span> |
| <script> |
| // Verify that a composited animation on a pseudoelement completes cleanly. |
| // This is a regression test for crbug.com/626571 |
| |
| if (window.testRunner) |
| testRunner.waitUntilDone(); |
| |
| function waitForCompositor() { |
| return dummy.animate({opacity: ['1', '1']}, 1).ready; |
| } |
| |
| requestAnimationFrame(() => { |
| document.styleSheets[0].addRule('div::before', 'transform: translateX(20px)'); |
| requestAnimationFrame(() => { |
| requestAnimationFrame(() => { |
| waitForCompositor().then(() => { |
| if (window.testRunner) |
| testRunner.notifyDone(); |
| }); |
| }); |
| }); |
| }); |
| </script> |
