Bug 1221524 Part 2: Added a new reftest to check align-items:baseline against orthogonal writing modes. r=dholbert
authorBrad Werth <bwerth@mozilla.com>
Tue, 01 Nov 2016 16:22:44 -0700
changeset 348178 c43961ed788123e7965f3379f500a46b0626a0c2
parent 348177 40c184b44a5a29c11f605c847b66c35f341f0f5f
child 348179 9e51cd6950834a8809de0e5441cb348a2fd69804
push id10298
push userraliiev@mozilla.com
push dateMon, 14 Nov 2016 12:33:03 +0000
treeherdermozilla-aurora@7e29173b1641 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1221524
milestone52.0a1
Bug 1221524 Part 2: Added a new reftest to check align-items:baseline against orthogonal writing modes. r=dholbert MozReview-Commit-ID: ETZXe57ta8C
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
layout/reftests/w3c-css/submitted/flexbox/reftest.list
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006-ref.xhtml
@@ -0,0 +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.
+
+     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;
+        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;
+                float: left; }
+      .offset { margin-top: 10px; }
+
+
+      .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>
+  </body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-align-self-baseline-horiz-006.xhtml
@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!--
+     Any copyright is dedicated to the Public Domain.
+     http://creativecommons.org/publicdomain/zero/1.0/
+-->
+<!-- Testcase for behavior of the 'baseline' value for align-items (and
+     align-self, implicitly). This test baseline-aligns various types of
+     content, and the flexbox's vertical size depends on the aggregate
+     post-alignment height of its children.
+-->
+<html xmlns="http://www.w3.org/1999/xhtml">
+  <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; }
+
+      .ortho  { writing-mode: vertical-rl;
+                width: 17px; }
+      .offset { margin-top: 10px; }
+
+
+      .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>
+      <div class="orange">two<br/>lines</div>
+      <div class="pink offset">offset</div>
+    </div>
+  </body>
+</html>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -13,16 +13,17 @@
 
 # Tests for cross-axis alignment (align-self / align-items properties)
 == flexbox-align-self-baseline-horiz-001a.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
 == flexbox-align-self-baseline-horiz-001b.xhtml flexbox-align-self-baseline-horiz-001-ref.xhtml
 == flexbox-align-self-baseline-horiz-002.xhtml flexbox-align-self-baseline-horiz-002-ref.xhtml
 == flexbox-align-self-baseline-horiz-003.xhtml flexbox-align-self-baseline-horiz-003-ref.xhtml
 == flexbox-align-self-baseline-horiz-004.xhtml flexbox-align-self-baseline-horiz-004-ref.xhtml
 == flexbox-align-self-baseline-horiz-005.xhtml flexbox-align-self-baseline-horiz-005-ref.xhtml
+== flexbox-align-self-baseline-horiz-006.xhtml flexbox-align-self-baseline-horiz-006-ref.xhtml
 
 == flexbox-align-self-stretch-vert-001.html flexbox-align-self-stretch-vert-001-ref.html
 == flexbox-align-self-stretch-vert-002.html flexbox-align-self-stretch-vert-002-ref.html
 
 == flexbox-align-self-horiz-001-block.xhtml  flexbox-align-self-horiz-001-ref.xhtml
 == flexbox-align-self-horiz-001-table.xhtml  flexbox-align-self-horiz-001-ref.xhtml
 == flexbox-align-self-horiz-002.xhtml  flexbox-align-self-horiz-002-ref.xhtml
 == flexbox-align-self-horiz-003.xhtml  flexbox-align-self-horiz-003-ref.xhtml