Skip to content

Commit 0aa081f

Browse files
danielsakhapovchromium-wpt-export-bot
danielsakhapov
authored and
chromium-wpt-export-bot
committed
Reland "[carousel] Add invalidation logic and tests for scroll-marker-contain"
This is a reland of commit 6b8e47152a03bde13cba00dbe76d80bc33c055df The fix is not to traverse the whole tree to update relations when it's known that there are no elements with scroll-marker-contain property. Also, don't retrieve the url of <a> during AttachLayoutTree to check for fragment presence, as it involves parsing it and affects performance. Original change's description: > [carousel] Add invalidation logic and tests for scroll-marker-contain > > Bug: 398065922 > Change-Id: I1e229d9684dadbd020b9184f175c3c527cb12788 > Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6387738 > Auto-Submit: Daniil Sakhapov <[email protected]> > Commit-Queue: Daniil Sakhapov <[email protected]> > Reviewed-by: Rune Lillesveen <[email protected]> > Cr-Commit-Position: refs/heads/main@{#1438454} Bug: 398065922 Change-Id: I90d5e6415315e3a6d2f6d12f056db3f761b38708 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/6425501 Commit-Queue: Daniil Sakhapov <[email protected]> Reviewed-by: Rune Lillesveen <[email protected]> Cr-Commit-Position: refs/heads/main@{#1442726}
1 parent 2518df1 commit 0aa081f

5 files changed

+231
-0
lines changed

‎css/css-overflow/scroll-marker-contain-005.tentative.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow Test: scroll-marker-contain property invalidation - reparenting nested anchors</title>
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10916">
5+
<link rel="match" href="scroll-marker-contain-001-ref.tentative.html">
6+
<style>
7+
.wrapper {
8+
scroll-marker-contain: auto;
9+
}
10+
11+
#scroller {
12+
overflow: auto;
13+
height: 130px;
14+
width: 100px;
15+
}
16+
17+
#scroller div {
18+
width: 100px;
19+
height: 100px;
20+
background-color: blue;
21+
margin: 5px;
22+
}
23+
24+
a {
25+
color: red;
26+
}
27+
28+
a:target-current {
29+
color: green;
30+
}
31+
</style>
32+
<div class="wrapper">
33+
<div id="target" class="wrapper">
34+
<a href="#target1">t1</a>
35+
<a href="#target2">t2</a>
36+
<a href="#target3">t3</a>
37+
<a href="#target4">t4</a>
38+
</div>
39+
</div>
40+
<div id="scroller">
41+
<div id="target1"></div>
42+
<div id="target2"></div>
43+
<div id="target3"></div>
44+
<div id="target4"></div>
45+
</div>
46+
<script>
47+
scroller.scrollTop = 400;
48+
document.documentElement.offsetTop;
49+
target.classList.remove('wrapper');
50+
document.documentElement.offsetTop;
51+
scroller.scrollTop = 0;
52+
</script>

‎css/css-overflow/scroll-marker-contain-006.tentative.html

+52
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow Test: scroll-marker-contain property invalidation - anchor and target removal and addition</title>
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10916">
5+
<link rel="match" href="scroll-marker-contain-001-ref.tentative.html">
6+
<style>
7+
.wrapper {
8+
scroll-marker-contain: auto;
9+
}
10+
11+
#scroller {
12+
overflow: auto;
13+
height: 130px;
14+
width: 100px;
15+
}
16+
17+
#scroller div {
18+
width: 100px;
19+
height: 100px;
20+
background-color: blue;
21+
margin: 5px;
22+
}
23+
24+
a {
25+
color: red;
26+
}
27+
28+
a:target-current {
29+
color: green;
30+
}
31+
</style>
32+
<div id="target" class="wrapper">
33+
<a id="link1" href="#target1">t1</a>
34+
<a href="#target2">t2</a>
35+
<a href="#target3">t3</a>
36+
<a href="#target4">t4</a>
37+
</div>
38+
<div id="scroller">
39+
<div id="target1"></div>
40+
<div id="target2"></div>
41+
<div id="target3"></div>
42+
<div id="target4"></div>
43+
</div>
44+
<script>
45+
const newLink1 = link1.cloneNode(true);
46+
const newTarget1 = target1.cloneNode();
47+
target.removeChild(link1);
48+
scroller.removeChild(target1);
49+
document.documentElement.offsetTop;
50+
target.prepend(newLink1);
51+
scroller.prepend(newTarget1);
52+
</script>

‎css/css-overflow/scroll-marker-contain-007.tentative.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow Test: scroll-marker-contain property invalidation - dynamic creation</title>
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10916">
5+
<link rel="match" href="scroll-marker-contain-001-ref.tentative.html">
6+
<style>
7+
.wrapper {
8+
scroll-marker-contain: auto;
9+
}
10+
11+
#scroller {
12+
overflow: auto;
13+
height: 130px;
14+
width: 100px;
15+
}
16+
17+
#scroller div {
18+
width: 100px;
19+
height: 100px;
20+
background-color: blue;
21+
margin: 5px;
22+
}
23+
24+
a {
25+
color: red;
26+
}
27+
28+
a:target-current {
29+
color: green;
30+
}
31+
</style>
32+
<div id="target">
33+
<a href="#target1">t1</a>
34+
<a href="#target2">t2</a>
35+
<a href="#target3">t3</a>
36+
<a href="#target4">t4</a>
37+
</div>
38+
<div id="scroller">
39+
<div id="target1"></div>
40+
<div id="target2"></div>
41+
<div id="target3"></div>
42+
<div id="target4"></div>
43+
</div>
44+
<script>
45+
document.documentElement.offsetTop;
46+
target.classList.add("wrapper");
47+
</script>

‎css/css-overflow/scroll-marker-contain-008-ref.tentative.html

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow Test Reference: scroll-marker-contain property makes anchor elements scroll markers - </title>
4+
<style>
5+
#scroller {
6+
overflow: auto;
7+
height: 130px;
8+
width: 100px;
9+
}
10+
11+
#scroller div {
12+
width: 100px;
13+
height: 100px;
14+
background-color: blue;
15+
margin: 5px;
16+
}
17+
18+
a {
19+
color: red;
20+
}
21+
</style>
22+
<div>
23+
<a href="#target1">t1</a>
24+
<a href="#target2">t2</a>
25+
<a href="#target3">t3</a>
26+
<a href="#target4">t4</a>
27+
</div>
28+
<div id="scroller">
29+
<div id="target1"></div>
30+
<div id="target2"></div>
31+
<div id="target3"></div>
32+
<div id="target4"></div>
33+
</div>

‎css/css-overflow/scroll-marker-contain-008.tentative.html

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!DOCTYPE html>
2+
<meta charset="utf-8">
3+
<title>CSS Overflow Test: scroll-marker-contain property invalidation - dynamic removal</title>
4+
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/10916">
5+
<link rel="match" href="scroll-marker-contain-008-ref.tentative.html">
6+
<style>
7+
.wrapper {
8+
scroll-marker-contain: auto;
9+
}
10+
11+
#scroller {
12+
overflow: auto;
13+
height: 130px;
14+
width: 100px;
15+
}
16+
17+
#scroller div {
18+
width: 100px;
19+
height: 100px;
20+
background-color: blue;
21+
margin: 5px;
22+
}
23+
24+
a {
25+
color: red;
26+
}
27+
28+
a:target-current {
29+
color: green;
30+
}
31+
</style>
32+
<div id="target" class="wrapper">
33+
<a href="#target1">t1</a>
34+
<a href="#target2">t2</a>
35+
<a href="#target3">t3</a>
36+
<a href="#target4">t4</a>
37+
</div>
38+
<div id="scroller">
39+
<div id="target1"></div>
40+
<div id="target2"></div>
41+
<div id="target3"></div>
42+
<div id="target4"></div>
43+
</div>
44+
<script>
45+
document.documentElement.offsetTop;
46+
target.classList.remove("wrapper");
47+
</script>

0 commit comments

Comments
 (0)