Bug 1221524 Part 4: Add align-items:last baseline to flexbox baseline tests. r?dholbert
MozReview-Commit-ID: 2GqXJUzV0oM
--- 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>