pseudo-element-transform.html (1472B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"> 3 <title>Transition on pseudo-element</title> 4 <link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content"> 5 <link rel="match" href="pseudo-element-transform-ref.html"> 6 <script src="/common/reftest-wait.js"></script> 7 <style> 8 div { 9 width: 100px; 10 height: 100px; 11 background: rgb(255, 191, 0); 12 } 13 div::before { 14 content: ""; 15 background: rgb(184, 115, 51); 16 width: 100px; 17 height: 100px; 18 transition-property: transform; 19 transition-duration: 10000s; 20 /* This timing-function has zero-slope at progress = 0.5 preventing drift */ 21 transition-timing-function: cubic-bezier(0, 1, 1, 0); 22 transform: ScaleX(0); 23 /* Make the pseudo element "transformable" as per 24 * https://www.w3.org/TR/css-transforms-1/#transformable-element. 25 */ 26 display: block; 27 } 28 29 div.animated::before { 30 transform: scaleX(1); 31 } 32 </style> 33 <div></div> 34 <script> 35 // This is a regression test for crbug.com/40475833 36 // Ported to WPT in an effort to prune browser-specific tests. 37 window.onload = async () => { 38 requestAnimationFrame(() => { 39 const target = document.querySelector('div'); 40 target.classList.add('animated'); 41 const anim = document.getAnimations()[0]; 42 anim.ready.then(() => { 43 const duration = anim.effect.getTiming().duration; 44 anim.currentTime = duration / 2; 45 requestAnimationFrame(() => { 46 requestAnimationFrame(takeScreenshot); 47 }); 48 }); 49 }); 50 }; 51 </script> 52 </html>