Bug 1267462 part 4: Add more reftests for flex items with text & orthogonal flows (as modified copies of previous patch's final column-oriented test). r?mats
MozReview-Commit-ID: AQ59jsEcUn3
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
@@ -7,22 +7,21 @@
<head>
<title>CSS Reftest Reference</title>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: block;
- float: left;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
- height: 500px;
- width: 150px;
+ height: 150px;
+ width: 500px;
}
span {
display: block;
background: lightgrey;
border: 2px solid black;
/* If browser supports it, signal the inline direction with border color: */
border-block-start-color: orange;
@@ -43,54 +42,53 @@
.hl { writing-mode: horizontal-tb; direction: ltr; }
.hr { writing-mode: horizontal-tb; direction: rtl; }
.vl { writing-mode: vertical-lr; direction: ltr; }
.vr { writing-mode: vertical-rl; direction: ltr; }
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
- .container > .vl, .container > .vr,
- .container > .vl_rtl, .container > .vr_rtl {
- /* In the testcase, these items are stretched horizontally
+ .container > .hl, .container > .hr {
+ /* In the testcase, these items are stretched vertically
via the default "align-self:stretch" behavior, and because
- they have a width of "auto".
- (The rest of the items have a non-auto width from "inline-size"
- and their horizontal writing-mode, so those ones do not stretch.) */
- width: 126px;
+ they have a height of "auto".
+ (The rest of the items have a non-auto height from "inline-size"
+ and their vertical writing-mode, so those ones do not stretch.) */
+ height: 118px;
}
</style>
</head>
<body>
-<div class="container hl">
+<div class="container vl">
<span class="hl small">a b c</span> <nocollapse></nocollapse>
<span class="hl big">d e</span> <nocollapse></nocollapse>
<span class="hr small">a b c</span> <nocollapse></nocollapse>
<span class="hr big">d e</span> <nocollapse></nocollapse>
<span class="vl small">a b c</span> <nocollapse></nocollapse>
<span class="vl big">d e</span> <nocollapse></nocollapse>
</div>
-<div class="container hl">
+<div class="container vl">
<span class="vr small">a b c</span> <nocollapse></nocollapse>
<span class="vr big">d e</span> <nocollapse></nocollapse>
<span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vl_rtl big">d e</span> <nocollapse></nocollapse>
<span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vr_rtl big">d e</span> <nocollapse></nocollapse>
</div>
-<div class="container hr">
+<div class="container vr">
<span class="hl small">a b c</span> <nocollapse></nocollapse>
<span class="hl big">d e</span> <nocollapse></nocollapse>
<span class="hr small">a b c</span> <nocollapse></nocollapse>
<span class="hr big">d e</span> <nocollapse></nocollapse>
<span class="vl small">a b c</span> <nocollapse></nocollapse>
<span class="vl big">d e</span> <nocollapse></nocollapse>
</div>
-<div class="container hr">
+<div class="container vr">
<span class="vr small">a b c</span> <nocollapse></nocollapse>
<span class="vr big">d e</span> <nocollapse></nocollapse>
<span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vl_rtl big">d e</span> <nocollapse></nocollapse>
<span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vr_rtl big">d e</span> <nocollapse></nocollapse>
</div>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
@@ -2,34 +2,33 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>
CSS Test: Testing a mix of flex items with various values for
- 'writing-mode' / 'direction' in a horizontal column-oriented flex container.
+ 'writing-mode' / 'direction' in a vertical column-oriented flex container.
</title>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
- <link rel="match" href="flexbox-writing-mode-013-ref.html">
+ <link rel="match" href="flexbox-writing-mode-014-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: column;
- float: left;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
- height: 500px;
- width: 150px;
+ height: 150px;
+ width: 500px;
}
span {
display: block;
background: lightgrey;
border: 2px solid black;
/* If browser supports it, signal the inline direction with border color: */
border-block-start-color: orange;
@@ -47,41 +46,41 @@
.vl { writing-mode: vertical-lr; direction: ltr; }
.vr { writing-mode: vertical-rl; direction: ltr; }
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
</style>
</head>
<body>
-<div class="container hl">
+<div class="container vl">
<span class="hl small">a b c</span>
<span class="hl big">d e</span>
<span class="hr small">a b c</span>
<span class="hr big">d e</span>
<span class="vl small">a b c</span>
<span class="vl big">d e</span>
</div>
-<div class="container hl">
+<div class="container vl">
<span class="vr small">a b c</span>
<span class="vr big">d e</span>
<span class="vl_rtl small">a b c</span>
<span class="vl_rtl big">d e</span>
<span class="vr_rtl small">a b c</span>
<span class="vr_rtl big">d e</span>
</div>
-<div class="container hr">
+<div class="container vr">
<span class="hl small">a b c</span>
<span class="hl big">d e</span>
<span class="hr small">a b c</span>
<span class="hr big">d e</span>
<span class="vl small">a b c</span>
<span class="vl big">d e</span>
</div>
-<div class="container hr">
+<div class="container vr">
<span class="vr small">a b c</span>
<span class="vr big">d e</span>
<span class="vl_rtl small">a b c</span>
<span class="vl_rtl big">d e</span>
<span class="vr_rtl small">a b c</span>
<span class="vr_rtl big">d e</span>
</div>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
@@ -7,22 +7,21 @@
<head>
<title>CSS Reftest Reference</title>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: block;
- float: left;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
- height: 500px;
- width: 150px;
+ height: 150px;
+ width: 500px;
}
span {
display: block;
background: lightgrey;
border: 2px solid black;
/* If browser supports it, signal the inline direction with border color: */
border-block-start-color: orange;
@@ -43,54 +42,53 @@
.hl { writing-mode: horizontal-tb; direction: ltr; }
.hr { writing-mode: horizontal-tb; direction: rtl; }
.vl { writing-mode: vertical-lr; direction: ltr; }
.vr { writing-mode: vertical-rl; direction: ltr; }
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
- .container > .vl, .container > .vr,
- .container > .vl_rtl, .container > .vr_rtl {
- /* In the testcase, these items are stretched horizontally
+ .container > .hl, .container > .hr {
+ /* In the testcase, these items are stretched vertically
via the default "align-self:stretch" behavior, and because
- they have a width of "auto".
- (The rest of the items have a non-auto width from "inline-size"
- and their horizontal writing-mode, so those ones do not stretch.) */
- width: 126px;
+ they have a height of "auto".
+ (The rest of the items have a non-auto height from "inline-size"
+ and their vertical writing-mode, so those ones do not stretch.) */
+ height: 118px;
}
</style>
</head>
<body>
-<div class="container hl">
+<div class="container vl_rtl">
<span class="hl small">a b c</span> <nocollapse></nocollapse>
<span class="hl big">d e</span> <nocollapse></nocollapse>
<span class="hr small">a b c</span> <nocollapse></nocollapse>
<span class="hr big">d e</span> <nocollapse></nocollapse>
<span class="vl small">a b c</span> <nocollapse></nocollapse>
<span class="vl big">d e</span> <nocollapse></nocollapse>
</div>
-<div class="container hl">
+<div class="container vl_rtl">
<span class="vr small">a b c</span> <nocollapse></nocollapse>
<span class="vr big">d e</span> <nocollapse></nocollapse>
<span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vl_rtl big">d e</span> <nocollapse></nocollapse>
<span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vr_rtl big">d e</span> <nocollapse></nocollapse>
</div>
-<div class="container hr">
+<div class="container vr_rtl">
<span class="hl small">a b c</span> <nocollapse></nocollapse>
<span class="hl big">d e</span> <nocollapse></nocollapse>
<span class="hr small">a b c</span> <nocollapse></nocollapse>
<span class="hr big">d e</span> <nocollapse></nocollapse>
<span class="vl small">a b c</span> <nocollapse></nocollapse>
<span class="vl big">d e</span> <nocollapse></nocollapse>
</div>
-<div class="container hr">
+<div class="container vr_rtl">
<span class="vr small">a b c</span> <nocollapse></nocollapse>
<span class="vr big">d e</span> <nocollapse></nocollapse>
<span class="vl_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vl_rtl big">d e</span> <nocollapse></nocollapse>
<span class="vr_rtl small">a b c</span><nocollapse></nocollapse>
<span class="vr_rtl big">d e</span> <nocollapse></nocollapse>
</div>
copy from layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
copy to layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
--- a/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
+++ b/layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
@@ -2,34 +2,34 @@
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>
CSS Test: Testing a mix of flex items with various values for
- 'writing-mode' / 'direction' in a horizontal column-oriented flex container.
+ 'writing-mode' / 'direction' in a vertical column-oriented flex container
+ with 'direction' flipped.
</title>
<meta charset="utf-8">
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#flex-direction-property">
<link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode">
- <link rel="match" href="flexbox-writing-mode-013-ref.html">
+ <link rel="match" href="flexbox-writing-mode-015-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: column;
- float: left;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
- height: 500px;
- width: 150px;
+ height: 150px;
+ width: 500px;
}
span {
display: block;
background: lightgrey;
border: 2px solid black;
/* If browser supports it, signal the inline direction with border color: */
border-block-start-color: orange;
@@ -47,41 +47,41 @@
.vl { writing-mode: vertical-lr; direction: ltr; }
.vr { writing-mode: vertical-rl; direction: ltr; }
.vl_rtl { writing-mode: vertical-lr; direction: rtl; }
.vr_rtl { writing-mode: vertical-rl; direction: rtl; }
</style>
</head>
<body>
-<div class="container hl">
+<div class="container vl_rtl">
<span class="hl small">a b c</span>
<span class="hl big">d e</span>
<span class="hr small">a b c</span>
<span class="hr big">d e</span>
<span class="vl small">a b c</span>
<span class="vl big">d e</span>
</div>
-<div class="container hl">
+<div class="container vl_rtl">
<span class="vr small">a b c</span>
<span class="vr big">d e</span>
<span class="vl_rtl small">a b c</span>
<span class="vl_rtl big">d e</span>
<span class="vr_rtl small">a b c</span>
<span class="vr_rtl big">d e</span>
</div>
-<div class="container hr">
+<div class="container vr_rtl">
<span class="hl small">a b c</span>
<span class="hl big">d e</span>
<span class="hr small">a b c</span>
<span class="hr big">d e</span>
<span class="vl small">a b c</span>
<span class="vl big">d e</span>
</div>
-<div class="container hr">
+<div class="container vr_rtl">
<span class="vr small">a b c</span>
<span class="vr big">d e</span>
<span class="vl_rtl small">a b c</span>
<span class="vl_rtl big">d e</span>
<span class="vr_rtl small">a b c</span>
<span class="vr_rtl big">d e</span>
</div>
--- a/layout/reftests/w3c-css/submitted/flexbox/reftest.list
+++ b/layout/reftests/w3c-css/submitted/flexbox/reftest.list
@@ -221,16 +221,18 @@ fails == flexbox-min-height-auto-002b.ht
== flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html
== flexbox-writing-mode-007.html flexbox-writing-mode-007-ref.html
== flexbox-writing-mode-008.html flexbox-writing-mode-008-ref.html
== flexbox-writing-mode-009.html flexbox-writing-mode-009-ref.html
fails == flexbox-writing-mode-010.html flexbox-writing-mode-010-ref.html # bug 1267462
fuzzy(1,16) == flexbox-writing-mode-011.html flexbox-writing-mode-011-ref.html
== flexbox-writing-mode-012.html flexbox-writing-mode-012-ref.html
== flexbox-writing-mode-013.html flexbox-writing-mode-013-ref.html
+fails == flexbox-writing-mode-014.html flexbox-writing-mode-014-ref.html # bug 1267462
+fails == flexbox-writing-mode-015.html flexbox-writing-mode-015-ref.html # bug 1267462
# Single-line size clamping
== flexbox-single-line-clamp-1.html flexbox-single-line-clamp-1-ref.html
== flexbox-single-line-clamp-2.html flexbox-single-line-clamp-2-ref.html
== flexbox-single-line-clamp-3.html flexbox-single-line-clamp-3-ref.html
# Flexbox as an absolute containing block.
== position-absolute-containing-block-001.html position-absolute-containing-block-001-ref.html
