Bug 1313811 - [css-flexbox] Tweak reftests due to change in baseline alignment of empty flex containers in inline-level alignment context. a=cbook
authorMats Palmgren <mats@mozilla.com>
Thu, 22 Dec 2016 16:08:42 +0100
changeset 353175 99babeef86597888291d0e24cabb836555a2b4e0
parent 353174 2148950fcfa4282a87632ebab92ae680eff58334
child 353176 b4f1387cf20b8817ef2fac7014deb77d16d8ab79
push id6795
push userjlund@mozilla.com
push dateMon, 23 Jan 2017 14:19:46 +0000
treeherdermozilla-esr52@76101b503191 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewerscbook
bugs1313811
milestone52.0a2
Bug 1313811 - [css-flexbox] Tweak reftests due to change in baseline alignment of empty flex containers in inline-level alignment context. a=cbook
layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
layout/reftests/flexbox/reftest.list
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html
layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001-ref.html
@@ -0,0 +1,46 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>Reference: Synthesized flex container baseline.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+  display: inline-block;
+}
+.ig {
+  display: inline-grid;
+}
+.ib, .ig {
+  border-style: solid;
+  border-width: 3px 1px 5px 1px;
+  padding: 7px 10px 3px 8px;
+  margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib"></div>
+Block:<div class="ig"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="ib" style="margin-bottom:0"></div>
+Block:<div class="ig"></div>
+</div>
+
+</body></html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/flexbox/flexbox-empty-container-synthesized-baseline-001.html
@@ -0,0 +1,48 @@
+<!DOCTYPE HTML>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<html><head>
+  <meta charset="utf-8">
+  <title>CSS Flexbox Test: Synthesized flex container baseline.</title>
+  <link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1313811">
+  <link rel="help" href="https://drafts.csswg.org/css-flexbox/#flex-baselines">
+  <link rel="match" href="flexbox-empty-container-synthesized-baseline-001.html">
+  <style type="text/css">
+html,body {
+  color:black; background-color:white; font:16px/1 monospace; padding:0; margin:0;
+}
+.ib {
+  display: inline-block;
+}
+.if {
+  display: inline-flex;
+}
+.ib, .if {
+  border-style: solid;
+  border-width: 3px 1px 5px 1px;
+  padding: 7px 10px 3px 8px;
+  margin: 5px 3px 2px 1px;
+}
+</style>
+
+</head><body>
+
+<pre>Inline-level context:</pre>
+Flexbox:<div class="if"></div>
+Block:<div class="ib"></div>
+
+<pre>Grid-level context:</pre>
+<div style="display:inline-grid; grid-auto-flow:column; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+<pre>Flexbox-level context:</pre>
+<div style="display:inline-flex; align-items:baseline; justify-items:start">
+Flexbox:<div class="if"></div>
+Block:<div class="ib" style="margin-bottom:0"></div>
+</div>
+
+</body></html>
--- a/layout/reftests/flexbox/reftest.list
+++ b/layout/reftests/flexbox/reftest.list
@@ -54,16 +54,17 @@ fuzzy-if(skiaContent,3,10) == flexbox-dy
 == flexbox-dyn-insertAroundText-3.xhtml flexbox-dyn-insertAroundText-3-ref.xhtml
 
 # Variant of one of the above tests, to regression-test an invalidation issue
 == flexbox-dyn-insertEmptySpan-1.xhtml flexbox-dyn-insertEmptySpan-1-ref.xhtml
 
 # Tests for empty flexboxes (with no flex items)
 == flexbox-empty-1a.xhtml  flexbox-empty-1-ref.xhtml
 == flexbox-empty-1b.xhtml  flexbox-empty-1-ref.xhtml
+== flexbox-empty-container-synthesized-baseline-001.html flexbox-empty-container-synthesized-baseline-001-ref.html
 
 # Tests for handling of floated elements inside a flexbox
 == flexbox-float-1a.xhtml  flexbox-float-1-ref.xhtml
 == flexbox-float-1b.xhtml  flexbox-float-1-ref.xhtml
 == flexbox-float-1c.xhtml  flexbox-float-1-ref.xhtml
 == flexbox-float-1d.xhtml  flexbox-float-1-ref.xhtml
 == flexbox-float-2a.xhtml  flexbox-float-2-ref.xhtml
 == flexbox-float-2b.xhtml  flexbox-float-2-ref.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001-ref.html
@@ -1,48 +1,37 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- In this reference case, we have inline-blocks instead of inline
-     flex containers. We stick an Ahem whitespace character in each
-     inline-block, with a customized line-height to make the baseline
-     end up at the bottom of the inline-block's content-box. -->
+     flex containers.  Otherwise it's the same. -->
 <html>
 <head>
   <title>CSS Reftest Reference</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <meta charset="utf-8">
   <link rel="stylesheet" type="text/css" href="support/ahem.css" />
   <style>
     body {
       font: 20px Ahem;
     }
     .flexContainer {
       display: inline-block;
       height: 16px;
       width: 16px;
-      /* Each inline-block's baseline will be the baseline of the single Ahem
-         character that it contains. We want to set up that char such that its
-         baseline is at the bottom of the container's content box (since that's
-         the corresponding flex container's baseline). So, we use a line-height
-         of 20px, which gives us a baseline of 20px * 0.8 = 16px, which is the
-         bottom of the container's content-box -- awesome. */
-      line-height: 20px;
       background: purple;
       border: 0px dotted black;
       /* (Elements that want a border will set their border-width.) */
     }
   </style>
 </head>
 <body>
   A
-  <!-- We have to include a character in the inline-blocks in order for them
-       to baseline-align; otherwise, they align the bottom of their
-       border-boxes. -->
-  <div class="flexContainer">&nbsp;</div>
-  <div class="flexContainer" style="padding-bottom: 20px">&nbsp;</div>
-  <div class="flexContainer" style="padding: 10px">&nbsp;</div>
-  <div class="flexContainer" style="border-width: 3px">&nbsp;</div>
-  <div class="flexContainer" style="border-bottom-width: 4px">&nbsp;</div>
+  <div class="flexContainer"></div>
+  <div class="flexContainer" style="padding-bottom: 20px"></div>
+  <div class="flexContainer" style="padding: 10px"></div>
+  <div class="flexContainer" style="border-width: 3px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001a.html
@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase for how we compute the baseline of a horizontal flex container
      with no flex items. This is the main-axis baseline. The spec says this
      about this case:
+     https://drafts.csswg.org/css-flexbox/#flex-baselines
+     "Otherwise, the flex container has no first/last main-axis baseline set,
+     and one is synthesized if needed according to the rules of its alignment context."
 
-       The flex container's main-axis baseline is synthesized
-       from ... the flex container's content box.
-
-     I'm taking that to mean the baseline is the bottom of the content box.
+     The alignment context in this case is inline-level so the margin-box
+     should be used to synthesize the baseline.
 -->
 <html>
 <head>
   <title>CSS Test: Testing the baseline of an empty horizontal flex container</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
   <link rel="match" href="flexbox-baseline-empty-001-ref.html">
   <meta charset="utf-8">
@@ -36,10 +37,11 @@
 </head>
 <body>
   A
   <div class="flexContainer"></div>
   <div class="flexContainer" style="padding-bottom: 20px"></div>
   <div class="flexContainer" style="padding: 10px"></div>
   <div class="flexContainer" style="border-width: 3px"></div>
   <div class="flexContainer" style="border-bottom-width: 4px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
 </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-baseline-empty-001b.html
@@ -1,21 +1,22 @@
 <!DOCTYPE html>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Testcase for how we compute the baseline of a vertical flex container
      with no flex items. This is the cross-axis baseline. The spec says this
      about this case:
+     https://drafts.csswg.org/css-flexbox/#flex-baselines
+     "Otherwise, the flex container has no first/last main-axis baseline set,
+     and one is synthesized if needed according to the rules of its alignment context."
 
-       ...the flex container's cross-axis baseline is synthesized
-       from ... the flex container's content box.
-
-     I'm taking that to mean the baseline is the bottom of the content box.
+     The alignment context in this case is inline-level so the margin-box
+     should be used to synthesize the baseline.
 -->
 <html>
 <head>
   <title>CSS Test: Testing the baseline of an empty vertical flex container</title>
   <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
   <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-baselines">
   <link rel="match" href="flexbox-baseline-empty-001-ref.html">
   <meta charset="utf-8">
@@ -37,10 +38,11 @@
 </head>
 <body>
   A
   <div class="flexContainer"></div>
   <div class="flexContainer" style="padding-bottom: 20px"></div>
   <div class="flexContainer" style="padding: 10px"></div>
   <div class="flexContainer" style="border-width: 3px"></div>
   <div class="flexContainer" style="border-bottom-width: 4px"></div>
+  <div class="flexContainer" style="border-bottom-width: 4px; margin: 2px"></div>
 </body>
 </html>