<!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>
Codebase Browser
chromium