Skip to content

Commit 09b9ffe

Browse files
vmpstrchromium-wpt-export-bot
vmpstr
authored and
chromium-wpt-export-bot
committed
ScopedVT: Add scroll and clip tests
This adds scroll and clip tests. A couple of them fail with the current implementation. R=skobes@chromium.org, kevers@chromium.org Bug: 460753333 Change-Id: Ia83559c51c136f65b4a0b7a6081365a29749904d Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/7187363 Reviewed-by: Kevin Ellis <kevers@chromium.org> Commit-Queue: Vladimir Levin <vmpstr@chromium.org> Cr-Commit-Position: refs/heads/main@{#1549728}
1 parent 12f1615 commit 09b9ffe

6 files changed

Lines changed: 232 additions & 0 deletions

‎css/css-view-transitions/scoped/clip-on-target-in-callback-ref.html‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<!DOCTYPE html>
2+
<title>View Transitions: Clip on target in callback does not clip root (Ref)</title>
3+
<meta name="viewport" content="width=device-width, initial-scale=1">
4+
5+
<style>
6+
#container {
7+
width: 200px;
8+
height: 200px;
9+
background: blue;
10+
border: 5px solid black;
11+
}
12+
#target {
13+
margin-top: 150px;
14+
width: 100px;
15+
height: 100px;
16+
background: green;
17+
}
18+
</style>
19+
20+
<div id="container">
21+
<div id="target"></div>
22+
</div>

‎css/css-view-transitions/scoped/clip-on-target-in-callback.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View Transitions: Clip on target in callback does not clip root</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="clip-on-target-in-callback-ref.html">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<script src="/common/reftest-wait.js"></script>
8+
<script src="/web-animations/testcommon.js"></script>
9+
<style>
10+
#container {
11+
width: 200px;
12+
height: 200px;
13+
background: blue;
14+
border: 5px solid black;
15+
}
16+
#container.after {
17+
overflow: clip;
18+
}
19+
20+
#target {
21+
margin-top: 150px;
22+
width: 100px;
23+
height: 100px;
24+
background: green;
25+
view-transition-name: target;
26+
}
27+
28+
html::view-transition-group(*) { animation-play-state: paused; }
29+
html::view-transition-old(*) { animation: none; opacity: 0; }
30+
html::view-transition-new(*) { animation: none; opacity: 1; }
31+
</style>
32+
33+
<div id="container">
34+
<div id="target"></div>
35+
</div>
36+
37+
<script>
38+
function runTest() {
39+
container.startViewTransition(() => {
40+
container.classList.add("after");
41+
}).ready.then(takeScreenshot);
42+
}
43+
44+
waitForCompositorReady().then(runTest);
45+
</script>
46+
</body>
47+
</html>

‎css/css-view-transitions/scoped/scrolled-target-position-ref.html‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<title>View Transitions: Scrolled target capture position (ref)</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<script src="/common/reftest-wait.js"></script>
6+
7+
<style>
8+
#target {
9+
width: 100px;
10+
height: 100px;
11+
overflow: scroll;
12+
background: lightblue;
13+
}
14+
#child {
15+
width: 50px;
16+
height: 75px;
17+
background: green;
18+
}
19+
#content {
20+
width: 100px;
21+
height: 400px;
22+
background: yellow;
23+
}
24+
</style>
25+
26+
<div id="target">
27+
<div id="content"><div id=child></div></div>
28+
</div>
29+
30+
<script>
31+
onload = () => {
32+
target.scrollTop = 25;
33+
takeScreenshot();
34+
}
35+
</script>
36+
37+
</html>

‎css/css-view-transitions/scoped/scrolled-target-position.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html class=reftest-wait>
3+
<title>View Transitions: Scrolled target capture position</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="scrolled-target-position-ref.html">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<script src="/common/reftest-wait.js"></script>
8+
<script src="/web-animations/testcommon.js"></script>
9+
10+
<style>
11+
#target {
12+
width: 100px;
13+
height: 100px;
14+
overflow: scroll;
15+
background: lightblue;
16+
}
17+
#child {
18+
width: 50px;
19+
height: 75px;
20+
background: green;
21+
}
22+
#content {
23+
width: 100px;
24+
height: 400px;
25+
background: yellow;
26+
}
27+
28+
html::view-transition-group(*) { animation-play-state: paused; }
29+
html::view-transition-old(*) { animation: none; opacity: 1; }
30+
html::view-transition-new(*) { animation: none; opacity: 0; }
31+
</style>
32+
33+
<div id="target">
34+
<div id="content"><div id=child></div></div>
35+
</div>
36+
37+
<script>
38+
function runTest() {
39+
target.scrollTop = 25;
40+
target.startViewTransition().ready.then(takeScreenshot);
41+
}
42+
43+
waitForCompositorReady().then(runTest);
44+
</script>
45+
</html>

‎css/css-view-transitions/scoped/target-in-scrolled-container-ref.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<title>View Transitions: Target in scrolled container capture position (ref)</title>
4+
<meta name="viewport" content="width=device-width, initial-scale=1">
5+
<script src="/common/reftest-wait.js"></script>
6+
<style>
7+
#scroller {
8+
width: 200px;
9+
height: 200px;
10+
overflow: scroll;
11+
background: lightgray;
12+
}
13+
#target {
14+
width: 50px;
15+
height: 50px;
16+
background: green;
17+
margin-top: 100px;
18+
view-transition-name: target;
19+
}
20+
#spacer {
21+
height: 200px;
22+
}
23+
</style>
24+
25+
<div id="scroller">
26+
<div id="target"></div>
27+
<div id="spacer"></div>
28+
</div>
29+
30+
<script>
31+
onload = () => {
32+
scroller.scrollTop = 50;
33+
takeScreenshot();
34+
};
35+
</script>
36+
</html>

‎css/css-view-transitions/scoped/target-in-scrolled-container.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html class="reftest-wait">
3+
<title>View Transitions: Target in scrolled container capture position</title>
4+
<link rel="help" href="https://drafts.csswg.org/css-view-transitions-2/">
5+
<link rel="match" href="target-in-scrolled-container-ref.html">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<script src="/common/reftest-wait.js"></script>
8+
<script src="/web-animations/testcommon.js"></script>
9+
<style>
10+
#scroller {
11+
width: 200px;
12+
height: 200px;
13+
overflow: scroll;
14+
background: lightgray;
15+
}
16+
#target {
17+
width: 50px;
18+
height: 50px;
19+
background: green;
20+
margin-top: 100px;
21+
view-transition-name: target;
22+
}
23+
#spacer {
24+
height: 200px;
25+
}
26+
27+
html::view-transition-group(*) { animation-play-state: paused; }
28+
html::view-transition-old(*) { animation: none; opacity: 1; }
29+
html::view-transition-new(*) { animation: none; opacity: 0; }
30+
</style>
31+
32+
<div id="scroller">
33+
<div id="target"></div>
34+
<div id="spacer"></div>
35+
</div>
36+
37+
<script>
38+
function runTest() {
39+
scroller.scrollTop = 50;
40+
target.startViewTransition().ready.then(takeScreenshot);
41+
}
42+
43+
waitForCompositorReady().then(runTest);
44+
</script>
45+
</html>

0 commit comments

Comments
 (0)