Migrate ref test for pseudo-element transition to WPT

Bug: 350934898 Change-Id: I1a8594be13d4ac13980f2c3e02636c791f587f67 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5682923 Commit-Queue: Kevin Ellis <[email protected]> Reviewed-by: David Awogbemila <[email protected]> Cr-Commit-Position: refs/heads/main@{#1324419}
web-platform-tests · Jul 8, 2024 · e256feb · e256feb
1 parent afa39d5
commit e256feb
Show file tree

Hide file tree

Showing 2 changed files with 73 additions and 0 deletions.
diff --git a/css/css-transitions/pseudo-element-transform-ref.html b/css/css-transitions/pseudo-element-transform-ref.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+<title>Reference for transition on pseudo-element</title>
+<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
+<style>
+div {
+  width: 100px;
+  height: 100px;
+  background: rgb(255, 191, 0);
+}
+div::before {
+  content: "";
+  background: rgb(184, 115, 51);
+  width: 100px;
+  height: 100px;
+  transform: ScaleX(0.5);
+  display: block;
+  will-change: transform;
+}
+</style>
+<div></div>
diff --git a/css/css-transitions/pseudo-element-transform.html b/css/css-transitions/pseudo-element-transform.html
@@ -0,0 +1,52 @@
+<!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>