View transitions: enable pseudo-elements with class and no wildcard

Bug: 331620773 Change-Id: I545dbad408e4eb65793b9a36d123f288910989a7 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/5401765 Reviewed-by: Vladimir Levin <[email protected]> Commit-Queue: Noam Rosenthal <[email protected]> Cr-Commit-Position: refs/heads/main@{#1281411}
web-platform-tests · Apr 2, 2024 · e02118b · e02118b
1 parent 5608c88
commit e02118b
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 3 deletions.
diff --git a/css/css-view-transitions/parsing/pseudo-elements-invalid.html b/css/css-view-transitions/parsing/pseudo-elements-invalid.html
@@ -60,9 +60,7 @@
     test_invalid_selector(`${fn}(foo bar)`);
     test_invalid_selector_combinations(`${fn}(foo bar)`);
 
-    // Test function with selector arguments.
-    test_invalid_selector(`${fn}(.foo)`);
-    test_invalid_selector_combinations(`${fn}(.foo)`);
+  // Test function with selector arguments.
     test_invalid_selector(`${fn}(#bar)`);
     test_invalid_selector_combinations(`${fn}(#bar)`);
 }

diff --git a/css/css-view-transitions/pseudo-with-classes-match-wildcard-no-star.html b/css/css-view-transitions/pseudo-with-classes-match-wildcard-no-star.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html class=reftest-wait>
+<title>View transition classes: selector should match with wildcard</title>
+<link rel="help" href="https://drafts.csswg.org/css-transitions-2/">
+<link rel="author" href="mailto:[email protected]">
+<link rel="match" href="pseudo-with-classes-ref.html">
+<script src="/common/rendering-utils.js"></script>
+<script src="/common/reftest-wait.js"></script>
+
+<style>
+  div {
+    width: 100px;
+    height: 100px;
+    position: absolute;
+  }
+
+  #target {
+    background: green;
+    view-transition-name: target;
+    view-transition-class: cls;
+  }
+
+  ::view-transition-group(*) {
+    animation-duration: 1s;
+  }
+
+  ::view-transition-new(.cls),
+  ::view-transition-old(.cls) {
+    left: 100px;
+  }
+</style>
+<div id=target></div>
+
+<script>
+  failIfNot(document.startViewTransition, "Missing document.startViewTransition");
+
+  window.addEventListener("load", () => {
+    document.startViewTransition().ready.then(takeScreenshot);
+  });
+</script>