Bug 1592071 [wpt PR 19955] - [scroll-snap] Make several wpt tests independent of scrollbar-width, a=testonly
authorMajid Valipour <majidvp@chromium.org>
Mon, 04 Nov 2019 11:45:14 +0000
changeset 502953 16b52f0c81837f09550d1b68f172d2e657b25a6f
parent 502952 c7782a93a740c7d5305fe926a7e0e758ef42a54b
child 502954 d4d00a91ad92dcfe5d595b950f5224514e5b43c4
push id36824
push usercsabou@mozilla.com
push dateWed, 20 Nov 2019 16:17:49 +0000
treeherdermozilla-central@01032a31b2e2 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1592071, 19955, 1003055, 1884816, 711384
milestone72.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1592071 [wpt PR 19955] - [scroll-snap] Make several wpt tests independent of scrollbar-width, a=testonly Automatic update from web-platform-tests [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} -- wpt-commits: dc048c67d786f646ab659ea050183989ff3e8bfb wpt-pr: 19955 Differential Revision: https://phabricator.services.mozilla.com/D53592
testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-002.html
testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-003.html
testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-002.html
testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-003.html
testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-002.html
testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-003.html
testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-002.html
testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-003.html
testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html
testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html
testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html
testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-002.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-002.html
@@ -26,16 +26,19 @@
   .container > div {
     height: 1em;
   }
   .container { scroll-padding: .5em 0 0;  } /* set up a snap position      */
   #target    { scroll-margin:  .5em 0 0;
                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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-003.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-align-003.html
@@ -27,16 +27,19 @@
     display: block;
     outline: none;
   }
   .container { scroll-padding:  .5em 0 0; } /* set up a snap position      */
   #target    { scroll-margin:   .5em 0 0;
                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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-002.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-002.html
@@ -23,16 +23,19 @@
     scrollbar-width: none;
   }
   .container > div {
     height: 1em;
   }
   #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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-003.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-margin-003.html
@@ -25,16 +25,19 @@
   .container > div, a {
     height: 1em;
     display: block;
     outline: none;
   }
   #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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-002.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-002.html
@@ -22,16 +22,19 @@
     scrollbar-width: none;
   }
   .container > div {
     height: 1em;
   }
   .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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-003.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-padding-003.html
@@ -24,16 +24,19 @@
   .container > div, a {
     height: 1em;
     display: block;
     outline: none;
   }
   .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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-002.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-002.html
@@ -28,16 +28,18 @@
   #target    { scroll-margin:    1em 0 0;
                scroll-snap-align: center; } /* set up a snap position      */
   #stripe    { background: green;         } /* color part of the snap area */
   .fail      { color: red;                } /* make failing more obvious   */
 
   /* 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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-003.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/scroll-target-snap-003.html
@@ -30,16 +30,19 @@
   #target    { scroll-margin:    1em 0 0;
                scroll-snap-align: center; } /* set up a snap position      */
   #stripe    { background: green;         } /* color part of the snap area */
   .fail      { color: red;                } /* make failing more obvious   */
 
   /* 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>
 
 <div class="container">
   <div></div>
   <div></div>
   <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-align-001-iframe.html
@@ -14,17 +14,19 @@
   div {
     height: 1em;
   }
   html    { scroll-padding:   .5em 0 0; } /* set up a snap position      */
   #target { scroll-margin:    .5em 0 0;
             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>
 <div></div>
 <div></div>
 <div></div>
 <div class="fail">FAIL</div>
 <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-margin-001-iframe.html
@@ -12,17 +12,19 @@
     scrollbar-width: none;
   }
   div {
     height: 1em;
   }
   #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>
 <div></div>
 <div></div>
 <div></div>
 <div class="fail">FAIL</div>
 <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-padding-001-iframe.html
@@ -12,17 +12,19 @@
     scrollbar-width: none;
   }
   div {
     height: 1em;
   }
   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>
 <div></div>
 <div></div>
 <div></div>
 <div class="fail">FAIL</div>
 <div></div>
--- a/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html
+++ b/testing/web-platform/tests/css/css-scroll-snap/support/scroll-target-snap-001-iframe.html
@@ -20,16 +20,19 @@
   #target { scroll-margin:     1em 0 0;
             scroll-snap-align:  center; } /* set up a snap position      */
   #stripe { background: green;          } /* color part of the snap area */
   .fail   { color: red;                 } /* make failing more obvious   */
 
   /* 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>
 <div></div>
 <div></div>
 <div></div>
 <div class="foilup"></div>
 <div class="fail">FAIL</div>