Bug 1221524 Part 4: Add align-items:last baseline to flexbox baseline tests. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Mon, 07 Nov 2016 09:46:50 -0800
changeset 321596 428ede5e855bb39377d4e3b80215a82fd4c5a159
parent 321595 9e51cd6950834a8809de0e5441cb348a2fd69804
child 321597 951f657c539915a28a3c61216bb65bf445d0ce43
push id83647
push userkwierso@gmail.com
push dateTue, 08 Nov 2016 22:08:41 +0000
treeherdermozilla-inbound@1d0b02250149 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1221524
milestone52.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 1221524 Part 4: Add align-items:last baseline to flexbox baseline tests. r=dholbert MozReview-Commit-ID: 2GqXJUzV0oM
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml
layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001-ref.xhtml
@@ -56,10 +56,18 @@
       ><div class="orange"><span class="super">super</span></div
       ><div class="pink"><span class="sub">sub</span></div
       ><table cellspacing="0" cellpadding="0"
               class="aqua big">big<br/>text<br/>3lines</table
       ><table class="tan" cellspacing="0" cellpadding="0">
         <i>ital<br/>ic</i>
       </table>
     </div>
+    <div class="flexbox">
+      <div class="lime">blk_1line</div
+      ><div class="yellow">blk<br/>2lines</div
+      ><div class="orange"><span class="super">super</span></div
+      ><div class="pink"><span class="sub">sub</span></div
+      ><div class="aqua big">big<br/>text<br/>3lines</div
+      ><div class="tan"><i>ital<br/>ic</i></div>
+    </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001a.xhtml
@@ -12,20 +12,25 @@
   <head>
     <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self'</title>
     <link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
     <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/>
     <style>
       .flexbox {
         display: flex;
-        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }
+      .base {
+        align-items: baseline;
+      }
+      .lastbase {
+        align-items: last baseline;
+      }
 
       .big {
         height: 100px;
         font: 24px sans-serif;
         margin-top: 20px;
       }
       .super {
         vertical-align: super;
@@ -40,17 +45,25 @@
       .yellow { background: yellow; }
       .orange { background: orange; }
       .pink   { background: pink;   }
       .aqua   { background: aqua;   }
       .tan    { background: tan;    }
    </style>
   </head>
   <body>
-    <div class="flexbox">
+    <div class="flexbox base">
+      <div class="lime">blk_1line</div>
+      <div class="yellow">blk<br/>2lines</div>
+      <div class="orange"><span class="super">super</span></div>
+      <div class="pink"><span class="sub">sub</span></div>
+      <div class="aqua big">big<br/>text<br/>3lines</div>
+      <i class="tan">ital<br/>ic</i>
+    </div>
+    <div class="flexbox lastbase">
       <div class="lime">blk_1line</div>
       <div class="yellow">blk<br/>2lines</div>
       <div class="orange"><span class="super">super</span></div>
       <div class="pink"><span class="sub">sub</span></div>
       <div class="aqua big">big<br/>text<br/>3lines</div>
       <i class="tan">ital<br/>ic</i>
     </div>
   </body>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-001b.xhtml
@@ -14,21 +14,26 @@
   <head>
     <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' in a wrap-reverse 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/#baseline-participation"/>
     <link rel="match" href="flexbox-align-self-baseline-horiz-001-ref.xhtml"/>
     <style>
       .flexbox {
         display: flex;
-        align-items: baseline;
         flex-wrap: wrap-reverse;
         border: 1px dashed blue;
         font: 14px sans-serif;
       }
+      .base {
+        align-items: baseline;
+      }
+      .lastbase {
+        align-items: last baseline;
+      }
 
       .big {
         height: 100px;
         font: 24px sans-serif;
         margin-top: 20px;
       }
       .super {
         vertical-align: super;
@@ -43,17 +48,25 @@
       .yellow { background: yellow; }
       .orange { background: orange; }
       .pink   { background: pink;   }
       .aqua   { background: aqua;   }
       .tan    { background: tan;    }
    </style>
   </head>
   <body>
-    <div class="flexbox">
+    <div class="flexbox base">
+      <div class="lime">blk_1line</div>
+      <div class="yellow">blk<br/>2lines</div>
+      <div class="orange"><span class="super">super</span></div>
+      <div class="pink"><span class="sub">sub</span></div>
+      <div class="aqua big">big<br/>text<br/>3lines</div>
+      <i class="tan">ital<br/>ic</i>
+    </div>
+    <div class="flexbox lastbase">
       <div class="lime">blk_1line</div>
       <div class="yellow">blk<br/>2lines</div>
       <div class="orange"><span class="super">super</span></div>
       <div class="pink"><span class="sub">sub</span></div>
       <div class="aqua big">big<br/>text<br/>3lines</div>
       <i class="tan">ital<br/>ic</i>
     </div>
   </body>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml
@@ -1,51 +1,51 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <!--
      Any copyright is dedicated to the Public Domain.
      http://creativecommons.org/publicdomain/zero/1.0/
 -->
 <!-- Reference case for behavior of the 'baseline' value for align-items and
      align-self when tested against content with an orthogonal writing-mode.
-
-     NOTE: For multi-line 'display: block' elements in the testcase (and inline
-     content that gets wrapped in an anonymous block), we add an inline-table
-     wrapper here in the reference case, so that we get first-line baseline
-     alignment instead of the last-line baseline-alignment that an inline-block
-     would give us.
 -->
 <html xmlns="http://www.w3.org/1999/xhtml">
   <head>
     <title>CSS Reftest Reference</title>
     <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
     <style>
       .container {
-        display: block;
+        display: flex;
         border: 1px dashed blue;
         font: 14px sans-serif;
         height: 50px;
       }
 
-      div   { display: inline-block; }
-      table { display: inline-table; }
-
       .ortho  { writing-mode: vertical-rl;
                 width: 17px;
+                height: 40px;
                 float: left; }
-      .offset { margin-top: 10px; }
+      .offset { margin-top: 10px;
+                margin-bottom: 3px; }
 
+      .start  { align-self: flex-start; }
+      .end    { align-self: flex-end; }
 
       .lime   { background: lime;   }
       .yellow { background: yellow; }
       .orange { background: orange; }
       .pink   { background: pink;   }
    </style>
   </head>
   <body>
     <div class="container">
-      <div class="lime ortho">ortho</div
-      ><div class="yellow">one line</div
-      ><table cellspacing="0" cellpadding="0"
-              class="orange">two<br/>lines</table
-      ><div class="pink offset">offset</div>
+      <div class="lime ortho start">ortho</div
+      ><div class="yellow offset start">one line</div
+      ><div class="orange offset start">two<br/>lines</div
+      ><div class="pink offset start">offset</div>
+    </div>
+    <div class="container">
+      <div class="lime ortho end">ortho</div
+      ><div class="yellow offset end">one line</div
+      ><div class="orange offset end">two<br/>lines</div
+      ><div class="pink offset end">offset</div>
     </div>
   </body>
 </html>
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml
@@ -12,37 +12,43 @@
   <head>
     <title>CSS Test: Baseline alignment of block flex items with 'baseline' value for 'align-items' / 'align-self' against non-parallel writing-modes.</title>
     <link rel="author" title="Brad Werth" href="mailto:bwerth@mozilla.com"/>
     <link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#baseline-participation"/>
     <link rel="match" href="flexbox-align-self-baseline-horiz-006-ref.xhtml"/>
     <style>
       .container {
         display: flex;
-        align-items: baseline;
         border: 1px dashed blue;
         font: 14px sans-serif;
         height: 50px;
       }
 
-      div   { display: inline-block; }
-      table { display: inline-table; }
+      .base     { align-items: baseline; }
+      .lastbase { align-items: last baseline; }
 
       .ortho  { writing-mode: vertical-rl;
-                width: 17px; }
-      .offset { margin-top: 10px; }
-
+                width: 17px;
+                height: 40px; }
+      .offset { margin-top: 10px;
+                margin-bottom: 3px; }
 
       .lime   { background: lime;   }
       .yellow { background: yellow; }
       .orange { background: orange; }
       .pink   { background: pink;   }
     </style>
   </head>
   <body>
-    <div class="container">
+    <div class="container base">
+      <div class="lime ortho">ortho</div>
+      <div class="yellow">one line</div>
+      <div class="orange">two<br/>lines</div>
+      <div class="pink offset">offset</div>
+    </div>
+    <div class="container lastbase">
       <div class="lime ortho">ortho</div>
       <div class="yellow">one line</div>
       <div class="orange">two<br/>lines</div>
       <div class="pink offset">offset</div>
     </div>
   </body>
 </html>