Bug 1221524 Part 2: Added a new reftest to check align-items:baseline against orthogonal writing modes. r?dholbert
MozReview-Commit-ID: ETZXe57ta8C
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
