[scroll-snap] Make several wpt tests independent of scrollbar-width
Multiple scroll snap wpt tests use `scrollbar-width:none` css property
to hide scrollbars. This property is only supported in Gecko.
This CL adds the legacy webkit prefixed property [1] to enable the same
functionality. This addition allows 8 existing tests to pass in Chrome (and
potentially in Safari).
[1] ::-webkit-scrollar { display: none; }
Fixed: 1003055
Change-Id: Iefe5f5071d23cd40bab71a9d0e360b62e10e9c73
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1884816
Auto-Submit: Majid Valipour <majidvp@chromium.org>
Reviewed-by: Stephen McGruer <smcgruer@chromium.org>
Commit-Queue: Majid Valipour <majidvp@chromium.org>
Cr-Commit-Position: refs/heads/master@{#711384}
diff --git a/css/css-scroll-snap/scroll-target-align-002.html b/css/css-scroll-snap/scroll-target-align-002.html
index 7e82f03..01db026 100644
--- a/css/css-scroll-snap/scroll-target-align-002.html
+++ b/css/css-scroll-snap/scroll-target-align-002.html
@@ -31,6 +31,9 @@
scroll-snap-align: center; }
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/scroll-target-align-003.html b/css/css-scroll-snap/scroll-target-align-003.html
index 1d6fbeb..d13efa0 100644
--- a/css/css-scroll-snap/scroll-target-align-003.html
+++ b/css/css-scroll-snap/scroll-target-align-003.html
@@ -32,6 +32,9 @@
scroll-snap-align: center; }
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/scroll-target-margin-002.html b/css/css-scroll-snap/scroll-target-margin-002.html
index a02cf7d..51cf553 100644
--- a/css/css-scroll-snap/scroll-target-margin-002.html
+++ b/css/css-scroll-snap/scroll-target-margin-002.html
@@ -28,6 +28,9 @@
#target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/scroll-target-margin-003.html b/css/css-scroll-snap/scroll-target-margin-003.html
index d0434db..2ea8eff 100644
--- a/css/css-scroll-snap/scroll-target-margin-003.html
+++ b/css/css-scroll-snap/scroll-target-margin-003.html
@@ -30,6 +30,9 @@
#target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/scroll-target-padding-002.html b/css/css-scroll-snap/scroll-target-padding-002.html
index 3a0ca3b..fbed1e1 100644
--- a/css/css-scroll-snap/scroll-target-padding-002.html
+++ b/css/css-scroll-snap/scroll-target-padding-002.html
@@ -27,6 +27,9 @@
.container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/scroll-target-padding-003.html b/css/css-scroll-snap/scroll-target-padding-003.html
index 1e92e9b..ccbe7b0 100644
--- a/css/css-scroll-snap/scroll-target-padding-003.html
+++ b/css/css-scroll-snap/scroll-target-padding-003.html
@@ -29,6 +29,9 @@
.container { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/scroll-target-snap-002.html b/css/css-scroll-snap/scroll-target-snap-002.html
index 89df44c..28f3c12 100644
--- a/css/css-scroll-snap/scroll-target-snap-002.html
+++ b/css/css-scroll-snap/scroll-target-snap-002.html
@@ -33,6 +33,8 @@
/* Try to foil the UA */
.foilup { margin-bottom: -1em; scroll-snap-align: start; }
.foildn { margin-top: -1em; scroll-snap-align: end; }
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/scroll-target-snap-003.html b/css/css-scroll-snap/scroll-target-snap-003.html
index 3e90347..6fe3901 100644
--- a/css/css-scroll-snap/scroll-target-snap-003.html
+++ b/css/css-scroll-snap/scroll-target-snap-003.html
@@ -35,6 +35,9 @@
/* Try to foil the UA */
.foilup { margin-bottom: -1em; scroll-snap-align: start; }
.foildn { margin-top: -1em; scroll-snap-align: end; }
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div id='instructions'>Test passes if there is a green stripe across the second quarter of the box below and no red.</div>
diff --git a/css/css-scroll-snap/support/scroll-target-align-001-iframe.html b/css/css-scroll-snap/support/scroll-target-align-001-iframe.html
index 20922ea..d86a5e8 100644
--- a/css/css-scroll-snap/support/scroll-target-align-001-iframe.html
+++ b/css/css-scroll-snap/support/scroll-target-align-001-iframe.html
@@ -19,7 +19,9 @@
scroll-snap-align: center; }
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
- }
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div></div>
diff --git a/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html b/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html
index 8eb5b9c..2b2c1d2 100644
--- a/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html
+++ b/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html
@@ -17,7 +17,9 @@
#target { scroll-margin: 2em 0 1em; } /* snap area is exact fit for snapport */
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
- }
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div></div>
diff --git a/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html b/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html
index b9467e4..9260c81 100644
--- a/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html
+++ b/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html
@@ -17,7 +17,9 @@
html { scroll-padding: 2em 0 1em; } /* snap area is exact fit for snapport */
#stripe { background: green; } /* color part of the snap area */
.fail { color: red; } /* make failing more obvious */
- }
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div></div>
diff --git a/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html b/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html
index 1a598fa..3146a3b 100644
--- a/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html
+++ b/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html
@@ -25,6 +25,9 @@
/* Try to foil the UA */
.foilup { margin-bottom: -1em; scroll-snap-align: start; }
.foildn { margin-top: -1em; scroll-snap-align: end; }
+
+ /* emulate `scrollbar-width: none` for browsers that don't support it yet */
+ ::-webkit-scrollbar { display: none; }
</style>
<div></div>
