52 lines
1.4 KiB
HTML
52 lines
1.4 KiB
HTML
<!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>
|