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 321515 428ede5e855bb39377d4e3b80215a82fd4c5a159
parent 321514 9e51cd6950834a8809de0e5441cb348a2fd69804
child 321516 951f657c539915a28a3c61216bb65bf445d0ce43
push id21
push usermaklebus@msu.edu
push dateThu, 01 Dec 2016 06:22:08 +0000
reviewersdholbert
bugs1221524
milestone52.0a1
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>