Skip to content

Commit 278717f

Browse files
bokandchromium-wpt-export-bot
bokand
authored and
chromium-wpt-export-bot
committed
vt: Input targets documentElement while render-blocked
This is done per the resolution in w3c/csswg-drafts#7797 (comment) This is a direct revert of commit https://crrev.com/f4b3a78fc4 which explicitly dropped input while rendering was blocked for a view transition capture. Reverting the above CL indirectly implements the desired behavior from the CSSWG resolution. The reason is that the UA stylesheet gives the ::view-transition pseudo width/height: 100% which is viewport filling. Pseudo elements already route input events to their owning DOM element, in this case the document :root. Authors cannot change this as their pseudo styles get applied only once the view transition animation starts, see [1]. [1] https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/view_transition/view_transition_style_tracker.cc;l=1116;drc=f599ac6c54b827d30f79a8f15bf1e2661af8925a Bug: 1424821,1368757 Change-Id: I4a0efa5180c69225cb34661c5cea3e8aba95a4d1
1 parent 50a5308 commit 278717f

File tree

2 files changed

+105
-75
lines changed

2 files changed

+105
-75
lines changed

‎css/css-view-transitions/input-blocked-when-rendering-suppressed.html

-75
This file was deleted.

‎css/css-view-transitions/input-targets-root-while-render-blocked.html

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<title>View transitions: ensure input targets document root while rendering is suppressed</title>
4+
<link rel="help" href="https://github.com/WICG/view-transitions">
5+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7797">
6+
<link rel="author" href="mailto:[email protected]">
7+
8+
<script src="/resources/testharness.js"></script>
9+
<script src="/resources/testharnessreport.js"></script>
10+
<script src="/resources/testdriver.js"></script>
11+
<script src="/resources/testdriver-actions.js"></script>
12+
<script src="/resources/testdriver-vendor.js"></script>
13+
14+
<style>
15+
:root {
16+
/* Ensure clicks during the transition fall through the pseudo tree root to
17+
* real DOM */
18+
view-transition-name: none;
19+
}
20+
21+
::view-transition {
22+
/* Ensure clicks during the transition fall through the pseudo tree root to
23+
* real DOM */
24+
pointer-events: none;
25+
width: 0;
26+
height: 0;
27+
}
28+
29+
::view-transition-group(*) {
30+
animation-duration: 30s;
31+
}
32+
33+
#clicktarget {
34+
width: 100px;
35+
height: 100px;
36+
background: red;
37+
}
38+
39+
#transition {
40+
width: 100px;
41+
height: 100px;
42+
background: blue;
43+
contain: paint;
44+
view-transition-name: transitionElement;
45+
}
46+
</style>
47+
48+
<div id="clicktarget"></div>
49+
<div id="transition"></div>
50+
51+
<script>
52+
const target = document.getElementById("clicktarget");
53+
54+
async function sendAndWaitForClick() {
55+
return new Promise(async (resolve) => {
56+
57+
function eventHandler(ev) {
58+
resolve(ev);
59+
}
60+
61+
document.documentElement.addEventListener("click", eventHandler);
62+
63+
await new test_driver.Actions()
64+
.setContext(window)
65+
.addPointer("mousePointer1", "mouse")
66+
.pointerMove(10, 10, {origin: 'viewport', sourceName: "mousePointer1"})
67+
.pointerDown({sourceName: "mousePointer1"})
68+
.pointerUp({sourceName: "mousePointer1"})
69+
.send();
70+
71+
document.documentElement.removeEventListener("click", eventHandler);
72+
});
73+
}
74+
75+
promise_test(async t => {
76+
assert_implements(document.startViewTransition, "Missing document.startViewTransition");
77+
assert_not_equals(target, null, "PRECONDITION: target element is valid");
78+
79+
// Ensure input is initialized before blocking rendering.
80+
await new test_driver.Actions()
81+
.setContext(window)
82+
.addPointer("mousePointer1", "mouse")
83+
.pointerMove(0, 0, {origin: "viewport", sourceName: "mousePointer1"})
84+
.send();
85+
86+
let clickEvent = null;
87+
88+
let transition = document.startViewTransition(async () => {
89+
clickEvent = await sendAndWaitForClick();
90+
});
91+
92+
await transition.ready;
93+
94+
assert_equals(clickEvent.target, document.documentElement,
95+
"Events must target the transition root while render blocked");
96+
clickEvent = null;
97+
98+
clickEvent = await sendAndWaitForClick();
99+
100+
// This just ensures we're not passing the above check by accident.
101+
assert_equals(clickEvent.target, target,
102+
"During transition, event should hit real DOM");
103+
104+
}, "Input when rendering suppressed targets root");
105+
</script>

0 commit comments

Comments
 (0)