| <!DOCTYPE html> |
| <html class="reftest-wait"> |
| <title>Transition on pseudo-element</title> |
| <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"> |
| <link rel="match" href="pseudo-element-transform-ref.html"> |
| <script src="/common/reftest-wait.js"></script> |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| background: rgb(255, 191, 0); |
| } |
| div::before { |
| content: ""; |
| background: rgb(184, 115, 51); |
| width: 100px; |
| height: 100px; |
| transition-property: transform; |
| transition-duration: 10000s; |
| /* This timing-function has zero-slope at progress = 0.5 preventing drift */ |
| transition-timing-function: cubic-bezier(0, 1, 1, 0); |
| transform: ScaleX(0); |
| /* Make the pseudo element "transformable" as per |
| * https://www.w3.org/TR/css-transforms-1/#transformable-element. |
| */ |
| display: block; |
| } |
| |
| div.animated::before { |
| transform: scaleX(1); |
| } |
| </style> |
| <div></div> |
| <script> |
| // This is a regression test for crbug.com/40475833 |
| // Ported to WPT in an effort to prune browser-specific tests. |
| window.onload = async () => { |
| requestAnimationFrame(() => { |
| const target = document.querySelector('div'); |
| target.classList.add('animated'); |
| const anim = document.getAnimations()[0]; |
| anim.ready.then(() => { |
| const duration = anim.effect.getTiming().duration; |
| anim.currentTime = duration / 2; |
| requestAnimationFrame(() => { |
| requestAnimationFrame(takeScreenshot); |
| }); |
| }); |
| }); |
| }; |
| </script> |
| </html> |
