Bug 1635994 [wpt PR 23445] - [css-flexbox-1][css-overflow-3] Add tests for capturing margin/padding in flex overflow., a=testonly
authorfantasai <fantasai.bugs@inkedblade.net>
Wed, 13 May 2020 09:44:56 +0000
changeset 531115 02bfd75f08d156e72353067504fa700dbab638cc
parent 531114 f39c26c827372b3c990b57a768709affbd8c8174
child 531116 fb8445a47c0f806c50ed6c4ffb67c178ff945858
push id37435
push userapavel@mozilla.com
push dateWed, 20 May 2020 15:28:23 +0000
treeherdermozilla-central@5415da14ec9a [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerstestonly
bugs1635994, 23445
milestone78.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 1635994 [wpt PR 23445] - [css-flexbox-1][css-overflow-3] Add tests for capturing margin/padding in flex overflow., a=testonly Automatic update from web-platform-tests [css-flexbox-1][css-overflow-3] Add tests for capturing margin/padding in flex overflow. -- wpt-commits: 899d979003ae8e678d4a45ec5334451e75e4b367 wpt-pr: 23445
testing/web-platform/tests/css/css-flexbox/overflow-area-001.html
testing/web-platform/tests/css/css-flexbox/overflow-area-002.html
testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html
testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/overflow-area-001.html
@@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: scrollable overflow area (LTR)</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/">
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
+<link rel="match" href="reference/overflow-area-001-ref.html">
+<style>
+
+.set {
+  clear: both;
+  margin: 1em;
+}
+
+.test, .ref {
+  display: flex;
+  overflow: scroll;
+  border: solid blue;
+  background: aqua;
+  margin: 1em 0.5em;
+  float: left;
+}
+div {
+  flex: none;
+}
+
+.test {
+  padding: 10px;
+  width: 60px;
+  height: 60px;
+}
+.test > div {
+  margin: 20px;
+  border: 5px solid transparent;
+  padding: 5px;
+  width: 10px;
+  height: 10px;
+  background: teal;
+}
+
+.ref {
+  width: 80px;
+  height: 80px;
+  border-color: orange;
+}
+.ref > div {
+  border: 30px solid aqua;
+  width: 30px;
+  height: 30px;
+  background: teal;
+}
+</style>
+
+<p>Test passes if all blue boxes in each row are identical to its first orange one,
+including the size and position of the scrollbar.
+
+<div class="set">
+  <div class="ref">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row wrap">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse wrap-reverse">
+    <div></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/overflow-area-002.html
@@ -0,0 +1,120 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: scrollable overflow area (RTL)</title>
+<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/">
+<link rel="help" href="https://www.w3.org/TR/css-overflow-3/#scrollable">
+<link rel="match" href="reference/overflow-area-002-ref.html">
+<style>
+
+.set {
+  clear: both;
+  margin: 1em;
+  direction: rtl;
+}
+
+.test, .ref {
+  display: flex;
+  overflow: scroll;
+  border: solid blue;
+  background: aqua;
+  margin: 1em 0.5em;
+  float: left;
+}
+div {
+  flex: none;
+}
+
+.test {
+  padding: 10px;
+  width: 60px;
+  height: 60px;
+}
+.test > div {
+  margin: 20px;
+  border: 5px solid transparent;
+  padding: 5px;
+  width: 10px;
+  height: 10px;
+  background: teal;
+}
+
+.ref {
+  width: 80px;
+  height: 80px;
+  border-color: orange;
+}
+.ref > div {
+  border: 30px solid aqua;
+  width: 30px;
+  height: 30px;
+  background: teal;
+}
+</style>
+
+<p>Test passes if all blue boxes in each row are identical to its first orange one,
+including the size and position of the scrollbar.
+
+<div class="set">
+  <div class="ref">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row wrap">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="test" style="flex-flow: column-reverse wrap-reverse">
+    <div></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-001-ref.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: scrollable overflow area (LTR)</title>
+<style>
+
+.set {
+  clear: both;
+  margin: 1em;
+}
+
+.ref {
+  display: flex;
+  overflow: scroll;
+  border: solid blue;
+  background: aqua;
+  margin: 1em 0.5em;
+  float: left;
+  width: 80px;
+  height: 80px;
+}
+div {
+  flex: none;
+}
+
+.ref:first-child {
+  border-color: orange;
+}
+.ref > div {
+  border: 30px solid aqua;
+  width: 30px;
+  height: 30px;
+  background: teal;
+}
+</style>
+
+<p>Test passes if all blue boxes in each row are identical to its first orange one,
+including the size and position of the scrollbar.
+
+<div class="set">
+  <div class="ref">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row wrap">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse wrap-reverse">
+    <div></div>
+  </div>
+</div>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/css/css-flexbox/reference/overflow-area-002-ref.html
@@ -0,0 +1,103 @@
+<!DOCTYPE html>
+<title>CSS Flexbox: scrollable overflow area (RTL)</title>
+<style>
+
+.set {
+  clear: both;
+  margin: 1em;
+  direction: rtl;
+}
+
+.ref {
+  display: flex;
+  overflow: scroll;
+  border: solid blue;
+  background: aqua;
+  margin: 1em 0.5em;
+  float: left;
+  width: 80px;
+  height: 80px;
+}
+div {
+  flex: none;
+}
+
+.ref:first-child {
+  border-color: orange;
+}
+.ref > div {
+  border: 30px solid aqua;
+  width: 30px;
+  height: 30px;
+  background: teal;
+}
+</style>
+
+<p>Test passes if all blue boxes in each row are identical to its first orange one,
+including the size and position of the scrollbar.
+
+<div class="set">
+  <div class="ref">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row wrap">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse wrap">
+    <div></div>
+  </div>
+</div>
+
+<div class="set">
+  <div class="ref" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: row-reverse wrap-reverse">
+    <div></div>
+  </div>
+  <div class="ref" style="flex-flow: column-reverse wrap-reverse">
+    <div></div>
+  </div>
+</div>