Support new style resolving approach for view transition pseudos

danielsakhapov · chromium-wpt-export-bot · commit 42eb416506b3 · 2025-04-04T13:01:34.000-07:00
Instead of an old Originating Element + pseudo id, support PseudoElement + no pseudo id approach. No behaviour changes in regular style resolvance is covered by css/css-view-transitions tests. The animations style resolvance is covered by the newly added test. Change-Id: Ica87c55bcd41c97bca713c19254094608fa0b77c Bug: 373478544 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6419168 Commit-Queue: Daniil Sakhapov <sakhapov@chromium.org> Reviewed-by: Rune Lillesveen <futhark@chromium.org> Cr-Commit-Position: refs/heads/main@{#1442842}
diff --git a/css/css-view-transitions/to-keyframe-values.html b/css/css-view-transitions/to-keyframe-values.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<title>CSS View Transitions: Verify to keyframe values</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+:root { view-transition-name: none }
+#item {
+  view-transition-name: item;
+  width: 10px;
+  height: 10px;
+  position: relative;
+}
+.shifted {
+  left: 20px;
+}
+::view-transition-group(*) {
+  animation-play-state: paused;
+}
+</style>
+<div id=item></div>
+
+<script>
+async_test((t) => {
+  document.startViewTransition(() => item.classList.add("shifted")).ready.then(() => {
+    let anims = document.getAnimations().filter(a => {
+      return a.effect.pseudoElement == '::view-transition-group(item)';
+    });
+
+    t.step(() => {
+      assert_equals(anims.length, 1);
+      assert_equals(anims[0].effect.getKeyframes().length, 2);
+      assert_true(anims[0].effect.getKeyframes()[0].transform.startsWith("matrix"),
+        `keyframe[0] should be matrix, not ${anims[0].effect.getKeyframes()[0].transform}`);
+      assert_true(anims[0].effect.getKeyframes()[1].transform.startsWith("matrix"),
+        `keyframe[1] should be matrix, not ${anims[0].effect.getKeyframes()[1].transform}`);
+    });
+    t.done();
+  });
+});
+</script>
