WebKit export: [view-transitions] Context menu is broken when view tr…

…ansition is running (#46823) https://bugs.webkit.org/show_bug.cgi?id=275556
web-platform-tests · Jun 19, 2024 · 06c5b34 · 06c5b34
1 parent c6a8643
commit 06c5b34
Show file tree

Hide file tree

Showing 2 changed files with 81 additions and 2 deletions.
diff --git a/css/css-view-transitions/hit-test-pseudo-element-element-from-point.html b/css/css-view-transitions/hit-test-pseudo-element-element-from-point.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<title>View transitions: hit testing the pseudo-elements should always return the document element</title>
+<link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/">
+<link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
+
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+
+<style>
+html { view-transition-name: none; }
+
+body { margin: 0; }
+
+#target {
+  width: 100px;
+  height: 100vh;
+  view-transition-name: target;
+}
+
+::view-transition {
+  background-color: green;
+}
+
+::view-transition,
+::view-transition-group(target),
+::view-transition-image-pair(target) {
+  height: 100%;
+  padding-left: 100px;
+}
+
+::view-transition-group(target) {
+  animation-duration: 30s;
+  background-color: lightgreen;
+}
+
+::view-transition-image-pair(target) {
+  height: 100%;
+  background-color: skyblue;
+  animation: none;
+  margin-left: 100px;
+}
+
+::view-transition-old(target) {
+  height: 100%;
+  width: 100px;
+  animation: none;
+  background-color: navy;
+}
+::view-transition-new(target) {
+  height: 100%;
+  width: 100px;
+  margin-left: 100px;
+  animation: none;
+  background-color: purple;
+}
+</style>
+
+<div id=target></div>
+
+<script>
+async_test(t => {
+  assert_implements(document.startViewTransition, "Missing document.startViewTransition");
+  document.startViewTransition(() => {
+    requestAnimationFrame(async () => {
+      // ::view-transition-group
+      t.step(() => assert_equals(document.elementFromPoint(20, 20), document.documentElement));
+      // ::view-transition-image-pair
+      t.step(() => assert_equals(document.elementFromPoint(120, 20), document.documentElement));
+      // ::view-transition-old
+      t.step(() => assert_equals(document.elementFromPoint(220, 20), document.documentElement));
+      // ::view-transition-new
+      t.step(() => assert_equals(document.elementFromPoint(320, 20), document.documentElement));
+      // ::view-transition
+      t.step(() => assert_equals(document.elementFromPoint(420, 20), document.documentElement));
+      t.done();
+    });
+  });
+}, "Hit-testing view transition pseudo-elements should always return the document element");
+</script>
diff --git a/css/css-view-transitions/hit-test-unpainted-element-from-point.html b/css/css-view-transitions/hit-test-unpainted-element-from-point.html
@@ -63,9 +63,9 @@
     target.classList.toggle("before");
     target.classList.toggle("after");
     requestAnimationFrame(async () => {
-      // Check the old location of the element, we should get body.
+      // Check the location of the element, we should get body.
       t.step(() => assert_equals(document.elementFromPoint(20, 20), document.body));
-      // Check the new location of the pseudo element, we should get documentElement,
+      // Check the location of the pseudo element for the old snapshot, we should get documentElement,
       // which is the originating element for the pseudo element.
       t.step(() => assert_equals(document.elementFromPoint(220, 20), document.documentElement));
       // Check the spot that used to be covered by the element but now has