Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
Scrollbar doesn't update on CSS color-scheme change
https://bugs.webkit.org/show_bug.cgi?id=244494 Reviewed by Aditya Keerthi. The color-scheme property is now diffed and triggers invalidateScrollbars on scrollable areas. invalidateScrollbars also now calls invalidateScrollCorners. This causes the scrollbar and scroll corner to correctly rerender without hovering or invalidating through other means. When UI Side Compositing is disabled. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-expected.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-ref.html: Added. * LayoutTests/imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4.html: Added. * Source/WebCore/platform/ScrollableArea.cpp: (WebCore::ScrollableArea::invalidateScrollbars): * Source/WebCore/rendering/RenderBox.cpp: (WebCore::RenderBox::styleDidChange): Canonical link: https://commits.webkit.org/266176@main
- Loading branch information
1 parent
b64ff89
commit 044d44c
Showing
14 changed files
with
405 additions
and
0 deletions.
There are no files selected for viewing
34 changes: 34 additions & 0 deletions
34
.../w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-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,34 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: dark; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 200vw; | ||
| height: 200vh; | ||
| } | ||
|
|
||
| .container { | ||
| scrollbar-gutter: stable; | ||
| flex: 0 0; | ||
| overflow: auto; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
|
|
||
| .content { | ||
| height: 300px; | ||
| width: 300px; | ||
| background: red; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container"> | ||
| <div class="content"></div> | ||
| </div> |
34 changes: 34 additions & 0 deletions
34
...orted/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1-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,34 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: dark; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 200vw; | ||
| height: 200vh; | ||
| } | ||
|
|
||
| .container { | ||
| scrollbar-gutter: stable; | ||
| flex: 0 0; | ||
| overflow: auto; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
|
|
||
| .content { | ||
| height: 300px; | ||
| width: 300px; | ||
| background: red; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container"> | ||
| <div class="content"></div> | ||
| </div> |
46 changes: 46 additions & 0 deletions
46
.../imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-1.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,46 @@ | ||
| <!doctype html> | ||
| <html class="reftest-wait"> | ||
| <title>Dynamically set color-scheme and ensure scrollbars update</title> | ||
| <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> | ||
| <link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> | ||
| <link rel="match" href="scrollbar-color-scheme-dynamic-1-ref.html" /> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| :root { | ||
| color-scheme: light; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 200vw; | ||
| height: 200vh; | ||
| } | ||
|
|
||
| .container { | ||
| scrollbar-gutter: stable; | ||
| overflow: auto; | ||
| flex: 0 0; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
|
|
||
| .content { | ||
| height: 300px; | ||
| width: 300px; | ||
| background: red; | ||
| } | ||
| </style> | ||
| <div class="container"> | ||
| <div class="content"></div> | ||
| </div> | ||
| <script> | ||
| requestAnimationFrame(() => requestAnimationFrame(() => { | ||
| document.documentElement.style.colorScheme = 'dark'; | ||
|
|
||
| takeScreenshot(); | ||
| })); | ||
| </script> |
23 changes: 23 additions & 0 deletions
23
.../w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-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,23 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: dark; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| overflow: scroll; | ||
| } | ||
| .container { | ||
| scrollbar-gutter: stable; | ||
| overflow: scroll; | ||
| flex: 0 0; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
| </style> | ||
| <div class="container"></div> |
23 changes: 23 additions & 0 deletions
23
...orted/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2-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,23 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: dark; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| overflow: scroll; | ||
| } | ||
| .container { | ||
| scrollbar-gutter: stable; | ||
| overflow: scroll; | ||
| flex: 0 0; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
| </style> | ||
| <div class="container"></div> |
36 changes: 36 additions & 0 deletions
36
.../imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-2.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,36 @@ | ||
| <!doctype html> | ||
| <html class="reftest-wait"> | ||
| <title>Dynamically set color-scheme and ensure viewport scrollbars update</title> | ||
| <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> | ||
| <link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> | ||
| <link rel="match" href="scrollbar-color-scheme-dynamic-2-ref.html" /> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| :root { | ||
| color-scheme: light; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| overflow: scroll; | ||
| } | ||
| .container { | ||
| scrollbar-gutter: stable; | ||
| overflow: scroll; | ||
| flex: 0 0; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
| </style> | ||
| <div class="container"></div> | ||
| <script> | ||
| requestAnimationFrame(() => requestAnimationFrame(() => { | ||
| document.documentElement.style.colorScheme = 'dark'; | ||
|
|
||
| takeScreenshot(); | ||
| })); | ||
| </script> |
35 changes: 35 additions & 0 deletions
35
.../w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-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,35 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: light; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 200vw; | ||
| height: 200vh; | ||
| } | ||
|
|
||
| .container { | ||
| color-scheme: dark; | ||
| scrollbar-gutter: stable; | ||
| flex: 0 0; | ||
| overflow: auto; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
|
|
||
| .content { | ||
| height: 300px; | ||
| width: 300px; | ||
| background: red; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container"> | ||
| <div class="content"></div> | ||
| </div> |
35 changes: 35 additions & 0 deletions
35
...orted/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3-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,35 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: light; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 200vw; | ||
| height: 200vh; | ||
| } | ||
|
|
||
| .container { | ||
| color-scheme: dark; | ||
| scrollbar-gutter: stable; | ||
| flex: 0 0; | ||
| overflow: auto; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
|
|
||
| .content { | ||
| height: 300px; | ||
| width: 300px; | ||
| background: red; | ||
| } | ||
| </style> | ||
|
|
||
| <div class="container"> | ||
| <div class="content"></div> | ||
| </div> |
46 changes: 46 additions & 0 deletions
46
.../imported/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-3.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,46 @@ | ||
| <!doctype html> | ||
| <html class="reftest-wait"> | ||
| <title>Dynamically set color-scheme and ensure scrollbars update</title> | ||
| <link rel="author" title="Luke Warlow" href="mailto:luke@warlow.dev" /> | ||
| <link rel="help" href="https://drafts.csswg.org/css-scrollbars/#valdef-scrollbar-color-auto" /> | ||
| <link rel="match" href="scrollbar-color-scheme-dynamic-3-ref.html" /> | ||
| <script src="/common/reftest-wait.js"></script> | ||
| <style> | ||
| :root { | ||
| color-scheme: light; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| width: 200vw; | ||
| height: 200vh; | ||
| } | ||
|
|
||
| .container { | ||
| scrollbar-gutter: stable; | ||
| overflow: auto; | ||
| flex: 0 0; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
|
|
||
| .content { | ||
| height: 300px; | ||
| width: 300px; | ||
| background: red; | ||
| } | ||
| </style> | ||
| <div class="container"> | ||
| <div class="content"></div> | ||
| </div> | ||
| <script> | ||
| requestAnimationFrame(() => requestAnimationFrame(() => { | ||
| document.querySelector(".container").style.colorScheme = 'dark'; | ||
|
|
||
| takeScreenshot(); | ||
| })); | ||
| </script> |
24 changes: 24 additions & 0 deletions
24
.../w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-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,24 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: light; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| overflow: scroll; | ||
| } | ||
| .container { | ||
| color-scheme: dark; | ||
| scrollbar-gutter: stable; | ||
| overflow: scroll; | ||
| flex: 0 0; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
| </style> | ||
| <div class="container"></div> |
24 changes: 24 additions & 0 deletions
24
...orted/w3c/web-platform-tests/css/css-scrollbars/scrollbar-color-scheme-dynamic-4-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,24 @@ | ||
| <!doctype html> | ||
| <style> | ||
| :root { | ||
| color-scheme: light; | ||
| } | ||
| body { | ||
| display: flex; | ||
| flex-wrap: wrap; | ||
| overflow: scroll; | ||
| } | ||
| .container { | ||
| color-scheme: dark; | ||
| scrollbar-gutter: stable; | ||
| overflow: scroll; | ||
| flex: 0 0; | ||
| height: 200px; | ||
| min-width: 200px; | ||
| margin: 1px; | ||
| padding: 0px; | ||
| border: none; | ||
| background: deepskyblue; | ||
| } | ||
| </style> | ||
| <div class="container"></div> |
Oops, something went wrong.