Bug 1625239 [wpt PR 22476] - [css-flexbox]: Migrate cross-axis-scrollbar.html to WPT, a=testonly
authorAntonio Gomes <tonikitoo@igalia.com>
Sat, 28 Mar 2020 10:36:05 +0000
changeset 521361 1049dc69b76f6e4c7cc4ba83a3845dfcf97a46d4
parent 521360 45351e1d9375c7f089627c7b30c71a00d70de00d
child 521362 1fa84b606ccaa9f3229b16f819d3dd910705e605
push id37269
push useraiakab@mozilla.com
push dateTue, 31 Mar 2020 22:58:23 +0000
treeherdermozilla-central@9af589864188 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1625239, 22476, 70772, 1063749, 2122470, 753713
milestone76.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 1625239 [wpt PR 22476] - [css-flexbox]: Migrate cross-axis-scrollbar.html to WPT, a=testonly Automatic update from web-platform-tests [css-flexbox]: Migrate cross-axis-scrollbar.html to WPT Original patch: https://bugs.webkit.org/show_bug.cgi?id=70772 BUG=1063749 R=dgrogan@chromium.org, robertma@chromium.org Change-Id: I5855f8986f1072cc6486f80139f2970271811f38 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2122470 Commit-Queue: David Grogan <dgrogan@chromium.org> Reviewed-by: David Grogan <dgrogan@chromium.org> Reviewed-by: Robert Ma <robertma@chromium.org> Cr-Commit-Position: refs/heads/master@{#753713} -- wpt-commits: d3efee3987df79b0fb077de491895be7481a2d69 wpt-pr: 22476
testing/web-platform/tests/css/css-flexbox/cross-axis-scrollbar.html
testing/web-platform/tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/cross-axis-scrollbar.html
@@ -0,0 +1,143 @@
+<!DOCTYPE html>
+<html>
+<title>CSS Flexbox: Scrollbars and flex-direction.</title>
+<link href="support/flexbox.css" rel="stylesheet">
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
+<link rel="help" href="https://www.w3.org/TR/css-overflow-4/#classic-scrollbars">
+<link rel="match" href="reference/cross-axis-scrollbar-ref.html">
+<meta name="assert" content="This test ensures that flexbox scrollbars take flex-direction into account."/>
+<style>
+body {
+    margin: 0;
+}
+
+.flexbox {
+    background-color: red;
+}
+
+.vertical-rl {
+    writing-mode: vertical-rl;
+}
+
+.vertical-lr {
+    writing-mode: vertical-lr;
+}
+
+.column > div {
+    flex: none;
+    background-color: green;
+    width: 100px;
+    height: 10px;
+}
+
+.row > div {
+    background-color: green;
+    flex: 1;
+    height: 50px;
+    min-height: 0;
+}
+
+.vertical-lr > .column > div {
+    flex: none;
+    height: 50px;
+    width: 20px;
+}
+
+.vertical-lr > .row > div {
+    flex: 1;
+    width: 100px;
+}
+
+</style>
+<body>
+
+This test passes if no red is showing.
+
+<div style="position: relative;">
+
+<div style="position: absolute; top: 0; left: 0;">
+<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-stretch"></div>
+</div>
+</div>
+
+<div style="position: absolute; top: 0; left: 150px;">
+<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-stretch"></div>
+</div>
+</div>
+
+<div style="position: absolute; top:0; left: 300px" class="vertical-lr">
+<div class="flexbox column" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-flex-start"></div>
+</div>
+</div>
+
+<div style="position: absolute; top:0; left: 450px;" class="vertical-lr">
+<div class="flexbox column" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-flex-start"></div>
+</div>
+</div>
+
+<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 0">
+<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-stretch"></div>
+</div>
+</div>
+
+<div style="height: 20px; width: 100px; position: absolute; top: 100px; left: 150px">
+<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-stretch"></div>
+</div>
+</div>
+
+<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 300px" class="vertical-lr">
+<div class="flexbox row" style="overflow-x: scroll; overflow-y: hidden; border-bottom: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-stretch"></div>
+</div>
+</div>
+
+<div style="height: 50px; width: 50px; position: absolute; top: 100px; left: 450px" class="vertical-lr">
+<div class="flexbox row" style="overflow-y: scroll; overflow-x: hidden; border-right: 10px solid green;">
+    <div class="align-self-flex-start"></div>
+    <div class="align-self-center"></div>
+    <div class="align-self-flex-end"></div>
+    <div class="align-self-baseline"></div>
+    <div class="align-self-stretch"></div>
+</div>
+</div>
+
+</div>
+<!-- FIXME: Add tests for vertical-rl.  Setting the logical
+bottom border on these tests cause additional scrollbars to appear. -->
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/reference/cross-axis-scrollbar-ref.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+<style>
+body {
+    margin: 0;
+}
+
+.testcase {
+    position: absolute;
+}
+
+.testcase div {
+    background-color: green;
+}
+</style>
+</head>
+<body>
+This test passes if no red is showing.
+
+<div style="position: relative; background-color: transparent;">
+
+<div class="testcase" style="top:0; left: 0">
+    <div style="width: 100px; height: 50px"></div>
+    <div style="width: 100px; overflow-x: scroll"></div>
+    <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
+</div>
+
+<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 150px">
+    <div style="width: 100px"></div>
+    <div style="overflow-y: scroll"></div>
+    <div style="width: 10px; position: relative; z-index: -1"></div>
+</div>
+
+<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 0; left: 300px">
+    <div style="width: 100px"></div>
+    <div style="overflow-y: scroll"></div>
+    <div style="width: 10px; position: relative; z-index: -1"></div>
+</div>
+
+<div class="testcase" style="top: 0; left: 450px">
+    <div style="width: 100px; height: 50px"></div>
+    <div style="width: 100px; overflow-x: scroll"></div>
+    <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
+</div>
+
+<div class="testcase" style="top: 100px; left: 0">
+    <div style="width: 100px; height: 50px; "></div>
+    <div style="width: 100px; overflow-x: scroll"></div>
+    <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
+</div>
+
+<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 150px">
+    <div style="width: 90px; overflow-y: scroll"></div>
+    <div style="width: 10px; position: relative; z-index: -1"></div>
+</div>
+
+<div class="testcase" style="top: 100px; left: 300px">
+    <div style="width: 100px; height: 40px; overflow-x: scroll"></div>
+    <div style="width: 100px; height: 10px; position: relative; z-index: -1"></div>
+</div>
+
+<div class="testcase" style="height: 50px; writing-mode: vertical-lr; top: 100px; left: 450px">
+    <div style="width: 100px"></div>
+    <div style="overflow-y: scroll"></div>
+    <div style="width: 10px; position: relative; z-index: -1"></div>
+</div>
+
+
+</body>
+</html>