Bug 1507663 part 4: Add dedicated reftests to verify that "contain:layout" suppresses baseline alignment. r=TYLin
authorDaniel Holbert <dholbert@cs.stanford.edu>
Mon, 26 Nov 2018 22:00:46 +0000
changeset 504583 c99b6f6c3bcfdaeef2300f80b8a7aa223fc534c6
parent 504582 c20d49e40432e03bbac1ee098c7b0f3cb3ebc2b0
child 504584 a3755a4ba5aa6abd1282278b9483e2ae3b9423c3
push id10290
push userffxbld-merge
push dateMon, 03 Dec 2018 16:23:23 +0000
treeherdermozilla-beta@700bed2445e6 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersTYLin
bugs1507663
milestone65.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 1507663 part 4: Add dedicated reftests to verify that "contain:layout" suppresses baseline alignment. r=TYLin Note that we don't get this correct for form controls yet, so the -002 test is annotated as "fails" for now. Differential Revision: https://phabricator.services.mozilla.com/D12617
layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-001-ref.html
layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-001.html
layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-002-ref.html
layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-002.html
layout/reftests/w3c-css/submitted/contain/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-001-ref.html
@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+  .flexBaselineCheck {
+    display: flex;
+    border: 1px solid black;
+    height: 100px;
+  }
+  .flexBaselineCheck > * {
+    border: 2px solid teal;
+
+    /* In the testcase, the (baseline-aligned) items should all have their
+       bottom borders aligned with the 80px-tall canvas.  In other words, their
+       bottom borders should all be 20px away from the bottom of their flex
+       container.  Here in the reference case, we just use "flex-end" alignment
+       plus a hardcoded 20px margin-bottom to produce a precise reference
+       for what that should look like. */
+    align-self: flex-end;
+    margin-bottom: 20px;
+  }
+  canvas {
+    background: purple;
+    width: 20px;
+    height: 80px;
+    box-sizing: border-box;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .multicol {
+    column-count: 2;
+  }
+  </style>
+</head>
+<body>
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <div>block</div>
+    <fieldset><legend>leg</legend>fieldset</fieldset>
+    <div class="flex">flex</div>
+    <div class="grid">grid</div>
+    <div class="multicol">multi<br>col</div>
+    <details open><summary>summary</summary>details</details>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-001.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
+  <link rel="match" href="contain-layout-suppress-baseline-001-ref.html">
+  <style>
+  .flexBaselineCheck {
+    display: flex;
+    border: 1px solid black;
+    height: 100px;
+  }
+  .flexBaselineCheck > * {
+    contain: layout;
+    border: 2px solid teal;
+    align-self: baseline;
+  }
+  canvas {
+    background: purple;
+    width: 20px;
+    height: 80px;
+    box-sizing: border-box;
+  }
+  .flex {
+    display: flex;
+  }
+  .grid {
+    display: grid;
+  }
+  .multicol {
+    column-count: 2;
+  }
+  </style>
+</head>
+<body>
+  <div class="flexBaselineCheck">
+    <!-- This canvas just exists to establish a precise, far-down baseline
+         alignment position: -->
+    <canvas></canvas>
+    <!-- "contain:layout" should force all the elements below to behave as if
+         they have no baseline. That means they all should *synthesize* a
+         baseline from their border-box edge, in order to participate in flex
+         item baseline alignment (to honor the outer flex container's
+         "align-items:baseline"). So, the expectation here is that all of these
+         elements' border-bottom edges should be aligned. -->
+    <div>block</div>
+    <fieldset><legend>leg</legend>fieldset</fieldset>
+    <div class="flex">flex</div>
+    <div class="grid">grid</div>
+    <div class="multicol">multi<br>col</div>
+    <details open><summary>summary</summary>details</details>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-002-ref.html
@@ -0,0 +1,65 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Reftest Reference</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <style>
+  .flexBaselineCheck {
+    display: flex;
+    border: 1px solid black;
+    height: 70px;
+  }
+  .flexBaselineCheck > * {
+    border: 2px solid teal;
+
+    /* In the testcase, the (baseline-aligned) items should all have their
+       bottom borders aligned with the 50px-tall canvas.  In other words, their
+       bottom borders should all be 20px away from the bottom of their flex
+       container.  Here in the reference case, we just use "flex-end" alignment
+       plus a hardcoded 20px margin-bottom to produce a precise reference
+       for what that should look like. */
+    align-self: flex-end;
+    margin-bottom: 20px;
+  }
+  canvas {
+    background: purple;
+    width: 20px;
+    height: 50px;
+    box-sizing: border-box;
+  }
+  </style>
+</head>
+<body>
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <button>btn</button>
+    <input type="button" value="i-btn">
+    <input type="submit" value="i-sub">
+  </div>
+
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <input type="text" value="text">
+    <input type="number" value="0">
+  </div>
+
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <input type="date">
+    <input type="time">
+  </div>
+
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <input type="file">
+    <textarea>textarea</textarea>
+  </div>
+
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <select><option>dropdown</option></select>
+    <select multiple style="max-height:40px"><option>multi</option></select>
+  </div>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/contain/contain-layout-suppress-baseline-002.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="utf-8">
+  <title>CSS Test: 'contain: layout' should make elements behave as if they have no baseline</title>
+  <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
+  <link rel="help" href="https://drafts.csswg.org/css-contain/#containment-layout">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#valdef-align-items-baseline">
+  <link rel="match" href="contain-layout-suppress-baseline-001-ref.html">
+  <style>
+  .flexBaselineCheck {
+    display: flex;
+    border: 1px solid black;
+    height: 70px;
+  }
+  .flexBaselineCheck > * {
+    contain: layout;
+    border: 2px solid teal;
+    align-self: baseline;
+  }
+  canvas {
+    background: purple;
+    width: 20px;
+    height: 50px;
+    box-sizing: border-box;
+  }
+  </style>
+</head>
+<body>
+  <div class="flexBaselineCheck">
+    <!-- This canvas just exists to establish a precise, far-down baseline
+         alignment position: -->
+    <canvas></canvas>
+    <!-- "contain:layout" should force all the elements below to behave as if
+         they have no baseline. That means they all should *synthesize* a
+         baseline from their border-box edge, in order to participate in flex
+         item baseline alignment (to honor the outer flex container's
+         "align-items:baseline"). So, the expectation here is that all of these
+         elements' border-bottom edges should be aligned. -->
+    <button>btn</button>
+    <input type="button" value="i-btn">
+    <input type="submit" value="i-sub">
+  </div>
+
+  <!-- Same as above, but with different form controls:
+       (split into multiple flex containers so as not to be too wide): -->
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <input type="text" value="text">
+    <input type="number" value="0">
+  </div>
+
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <input type="date">
+    <input type="time">
+  </div>
+
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <input type="file">
+    <textarea>textarea</textarea>
+  </div>
+
+  <div class="flexBaselineCheck">
+    <canvas></canvas>
+    <select><option>dropdown</option></select>
+    <select multiple style="max-height:40px"><option>multi</option></select>
+  </div>
+</body>
+</html>
--- a/layout/reftests/w3c-css/submitted/contain/reftest.list
+++ b/layout/reftests/w3c-css/submitted/contain/reftest.list
@@ -36,8 +36,10 @@ fuzzy-if(webrender&&winWidget,0-24,0-2) 
 == contain-layout-formatting-context-float-001.html contain-paint-formatting-context-float-001-ref.html
 == contain-layout-formatting-context-margin-001.html contain-layout-formatting-context-margin-001-ref.html
 == contain-layout-containing-block-fixed-001.html contain-paint-containing-block-fixed-001-ref.html
 == contain-layout-containing-block-absolute-001.html contain-paint-containing-block-absolute-001-ref.html
 == contain-layout-ignored-cases-ib-split-001.html contain-layout-ignored-cases-ib-split-001-ref.html
 == contain-layout-ignored-cases-no-principal-box-001.html contain-paint-ignored-cases-no-principal-box-001-ref.html
 == contain-layout-ignored-cases-no-principal-box-002.html contain-layout-ignored-cases-no-principal-box-002-ref.html
 == contain-layout-ignored-cases-no-principal-box-003.html contain-layout-ignored-cases-no-principal-box-003-ref.html
+== contain-layout-suppress-baseline-001.html contain-layout-suppress-baseline-001-ref.html
+fails == contain-layout-suppress-baseline-002.html contain-layout-suppress-baseline-002-ref.html # bug 1508441