[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: 10030555
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}

third_party/blink/web_tests/TestExpectations

@@ -5625,31 +5625,15 @@ crbug.com/1001936 external/wpt/css/css-masking/clip-path/clip-path-inline-001.ht
 # Sheriff 2019-09-10
 crbug.com/1002527 [ Debug ] virtual/text-antialias/large-text-composed-char.html [ Pass Crash ]
 
-# Tests fail because of scrollbar-width property
+# Tests fail because of missing scroll snap for #target and bugs in scrollIntoView
 crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-align-001.html [ Failure ]
 crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-align-002.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-align-003.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-margin-001.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-margin-002.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-margin-003.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-padding-001.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-padding-002.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-padding-003.html [ Failure ]
 crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-snap-001.html [ Failure ]
 crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-snap-002.html [ Failure ]
-crbug.com/1003055 external/wpt/css/css-scroll-snap/scroll-target-snap-003.html [ Failure ]
 crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-align-001.html [ Failure ]
 crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-align-002.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-align-003.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-margin-001.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-margin-002.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-margin-003.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-padding-001.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-padding-002.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-padding-003.html [ Failure ]
 crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-snap-001.html [ Failure ]
 crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-snap-002.html [ Failure ]
-crbug.com/1003055 virtual/threaded/external/wpt/css/css-scroll-snap/scroll-target-snap-003.html [ Failure ]
 
 # Sheriff 2019-09-12
 crbug.com/1011515 [ Win7 ] fast/harness/internals-observe-gc.html [ Failure ]

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>

third_party/blink/web_tests/external/wpt/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>