-
Notifications
You must be signed in to change notification settings - Fork 1.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Scrollbar gutters don't update when scrollbar-width value does
https://bugs.webkit.org/show_bug.cgi?id=258770 Reviewed by Tim Nguyen. Correctly diff scrollbar-width inside of RenderStyle::rareDataChangeRequiresLayout. Scrollbar gutters now correctly repaint. Add a WPT test that tests this. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/scrollbar-gutter-dynamic-003-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/scrollbar-gutter-dynamic-003-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-overflow/scrollbar-gutter-dynamic-003.html: Added. * Source/WebCore/rendering/style/RenderStyle.cpp: (WebCore::rareDataChangeRequiresLayout): Canonical link: https://commits.webkit.org/265726@main
- Loading branch information
1 parent
8521823
commit 8d00d37
Showing
4 changed files
with
238 additions
and
0 deletions.
There are no files selected for viewing
73 changes: 73 additions & 0 deletions
73
...ported/w3c/web-platform-tests/css/css-overflow/scrollbar-gutter-dynamic-003-expected.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<meta charset="utf-8"> | ||
<title>CSS Test Reference</title> | ||
<style> | ||
.line { | ||
display: flex; | ||
} | ||
|
||
.container { | ||
writing-mode: horizontal-tb; | ||
direction: ltr; | ||
block-size: 200px; | ||
inline-size: 200px; | ||
overflow-y: hidden; | ||
margin: 10px; | ||
background: deepskyblue; | ||
} | ||
|
||
.content { | ||
inline-size: 100%; | ||
block-size: 200%; | ||
background: lightsalmon; | ||
} | ||
|
||
.width-auto { | ||
scrollbar-width: auto; | ||
} | ||
|
||
.width-thin { | ||
scrollbar-width: thin; | ||
} | ||
|
||
.width-none { | ||
scrollbar-width: none; | ||
} | ||
|
||
.gutter-stable { | ||
scrollbar-gutter: stable; | ||
} | ||
|
||
.gutter-both { | ||
scrollbar-gutter: stable both-edges; | ||
} | ||
</style> | ||
|
||
<div class="line"> | ||
<div id="stable-auto" class="container gutter-stable width-none"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-auto" class="container gutter-both width-none"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
|
||
<div class="line"> | ||
<div id="stable-thin" class="container gutter-stable width-auto"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-thin" class="container gutter-both width-auto"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
|
||
<div class="line"> | ||
<div id="stable-none" class="container gutter-stable width-thin"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-none" class="container gutter-both width-thin"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
</html> |
73 changes: 73 additions & 0 deletions
73
...ts/imported/w3c/web-platform-tests/css/css-overflow/scrollbar-gutter-dynamic-003-ref.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,73 @@ | ||
<!DOCTYPE html> | ||
<html> | ||
<meta charset="utf-8"> | ||
<title>CSS Test Reference</title> | ||
<style> | ||
.line { | ||
display: flex; | ||
} | ||
|
||
.container { | ||
writing-mode: horizontal-tb; | ||
direction: ltr; | ||
block-size: 200px; | ||
inline-size: 200px; | ||
overflow-y: hidden; | ||
margin: 10px; | ||
background: deepskyblue; | ||
} | ||
|
||
.content { | ||
inline-size: 100%; | ||
block-size: 200%; | ||
background: lightsalmon; | ||
} | ||
|
||
.width-auto { | ||
scrollbar-width: auto; | ||
} | ||
|
||
.width-thin { | ||
scrollbar-width: thin; | ||
} | ||
|
||
.width-none { | ||
scrollbar-width: none; | ||
} | ||
|
||
.gutter-stable { | ||
scrollbar-gutter: stable; | ||
} | ||
|
||
.gutter-both { | ||
scrollbar-gutter: stable both-edges; | ||
} | ||
</style> | ||
|
||
<div class="line"> | ||
<div id="stable-auto" class="container gutter-stable width-none"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-auto" class="container gutter-both width-none"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
|
||
<div class="line"> | ||
<div id="stable-thin" class="container gutter-stable width-auto"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-thin" class="container gutter-both width-auto"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
|
||
<div class="line"> | ||
<div id="stable-none" class="container gutter-stable width-thin"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-none" class="container gutter-both width-thin"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
</html> |
89 changes: 89 additions & 0 deletions
89
...tTests/imported/w3c/web-platform-tests/css/css-overflow/scrollbar-gutter-dynamic-003.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,89 @@ | ||
<!DOCTYPE html> | ||
<html class="reftest-wait"> | ||
<meta charset="utf-8"> | ||
<title>CSS Overflow: test scrollbar-gutter when dynamically update scrollbar-width</title> | ||
<link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev"> | ||
<link rel="help" href="https://drafts.csswg.org/css-overflow-4/#scrollbar-gutter-property"> | ||
<link rel="match" href="scrollbar-gutter-dynamic-003-ref.html"> | ||
<script src="/common/reftest-wait.js"></script> | ||
|
||
<style> | ||
.line { | ||
display: flex; | ||
} | ||
|
||
.container { | ||
writing-mode: horizontal-tb; | ||
direction: ltr; | ||
block-size: 200px; | ||
inline-size: 200px; | ||
overflow: hidden; | ||
margin: 10px; | ||
background: deepskyblue; | ||
} | ||
|
||
.content { | ||
inline-size: 100%; | ||
block-size: 200%; | ||
background: lightsalmon; | ||
} | ||
|
||
.width-auto { | ||
scrollbar-width: auto; | ||
} | ||
|
||
.width-thin { | ||
scrollbar-width: thin; | ||
} | ||
|
||
.width-none { | ||
scrollbar-width: none; | ||
} | ||
|
||
.gutter-stable { | ||
scrollbar-gutter: stable; | ||
} | ||
|
||
.gutter-both { | ||
scrollbar-gutter: stable both-edges; | ||
} | ||
</style> | ||
|
||
<div class="line"> | ||
<div id="stable-auto" class="container gutter-stable width-auto"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-auto" class="container gutter-both width-auto"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
|
||
<div class="line"> | ||
<div id="stable-thin" class="container gutter-stable width-thin"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-thin" class="container gutter-both width-thin"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
|
||
<div class="line"> | ||
<div id="stable-none" class="container gutter-stable width-none"> | ||
<div class="content"></div> | ||
</div> | ||
<div id="both-none" class="container gutter-both width-none"> | ||
<div class="content"></div> | ||
</div> | ||
</div> | ||
<script> | ||
requestAnimationFrame(() => requestAnimationFrame(() => { | ||
document.getElementById('stable-auto').style.scrollbarWidth = 'none'; | ||
document.getElementById('both-auto').style.scrollbarWidth = 'none'; | ||
document.getElementById('stable-thin').style.scrollbarWidth = 'auto'; | ||
document.getElementById('both-thin').style.scrollbarWidth = 'auto'; | ||
document.getElementById('stable-none').style.scrollbarWidth = 'thin'; | ||
document.getElementById('both-none').style.scrollbarWidth = 'thin'; | ||
takeScreenshot(); | ||
})); | ||
</script> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters