wuggy/Dactyloidae
wuggy/Dactyloidae
1
0
Fork 0
mirror of https://repo.dactyloidae.xyz/Dactyloidae/UXP.git synced 2026-09-20 23:37:33 +09:00
Code Issues Projects Releases Packages Wiki Activity

Revert "Issue #1986 - Add in reftests for new behavior."

Browse source 
This reverts commit cf5dfc5e7d.
This commit is contained in:
roytam1 2022-09-29 15:18:00 +08:00
commit e46011bcc3
24 changed files with 0 additions and 2415 deletions
Download patch file Download diff file Expand all files Collapse all files

73
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-horiz-001v.xhtml
View file

@ -1,73 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase with blocks as flex items in a horizontal flex container, with
various "flex" values and various combinations of the items
and with various writing-modes on the items. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
CSS Test: Testing flexbox layout algorithm property on block flex items in a horizontal flex container
(with various writing-modes on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
<link rel="match" href="flexbox-basic-block-horiz-001-ref.xhtml"/>
<style>
div { height: 100px; }
div.flexbox {
border: 1px dashed blue;
width: 200px;
font-size: 10px;
display: flex;
}
div.a {
flex: 1 0 30px;
background: lightgreen;
writing-mode: vertical-lr;
}
div.b {
flex: 2 0 20px;
background: yellow;
writing-mode: vertical-rl;
}
div.c {
flex: 3 0 40px;
background: orange;
writing-mode: sideways-lr;
}
div.flexNone {
flex: none;
background: pink;
writing-mode: vertical-lr;
}
div.flexBasis {
flex: 0 0 20px;
background: gray;
writing-mode: sideways-rl;
}
div.spacer {
width: 15px;
height: 15px;
background: purple;
}
</style>
</head>
<body>
<div class="flexbox"><div class="a"></div><div class="b"/></div>
<div class="flexbox"><div class="a"/><div class="c"/></div>
<div class="flexbox"><div class="a"/>
<div class="flexNone"><div class="spacer"/></div>
</div>
<div class="flexbox"><div class="b"/><div class="c"/></div>
<div class="flexbox"><div class="b"/>
<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
</div>
<div class="flexbox">
<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
</div>
</body>
</html>

75
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-block-vert-001v.xhtml
View file

@ -1,75 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase with blocks as flex items in a vertical flex container, with
various "flex" values and various combinations of the items. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
CSS Test: Testing flexbox layout algorithm property on block flex items in a vertical flex container
(with various writing-modes on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
<link rel="match" href="flexbox-basic-block-vert-001-ref.xhtml"/>
<style>
div { width: 50px; }
div.flexbox {
float: left;
border: 1px dashed blue;
height: 200px;
font-size: 10px;
display: flex;
flex-direction: column;
}
div.a {
flex: 1 0 30px;
background: lightgreen;
writing-mode: vertical-lr;
}
div.b {
flex: 2 0 20px;
background: yellow;
writing-mode: vertical-rl;
}
div.c {
flex: 3 0 40px;
background: orange;
writing-mode: sideways-lr;
}
div.flexNone {
flex: none;
background: pink;
writing-mode: vertical-lr;
}
div.flexBasis {
flex: 0 0 20px;
background: gray;
writing-mode: sideways-rl;
}
div.spacer {
display: inline-block;
width: 15px;
height: 15px;
background: purple;
}
</style>
</head>
<body>
<div class="flexbox"><div class="a"></div><div class="b"/></div>
<div class="flexbox"><div class="a"/><div class="c"/></div>
<div class="flexbox"><div class="a"/>
<div class="flexNone"><div class="spacer"/></div>
</div>
<div class="flexbox"><div class="b"/><div class="c"/></div>
<div class="flexbox"><div class="b"/>
<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
</div>
<div class="flexbox">
<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
</div>
</body>
</html>

105
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-horiz-001v.xhtml
View file

@ -1,105 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!--
This test checks that canvas elements behave correctly as flex items.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
CSS Test: Testing flexbox layout algorithm property on canvas flex items in a horizontal flex container
(with a vertical writing-mode on the canvas flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
<link rel="match" href="flexbox-basic-canvas-horiz-001-ref.xhtml"/>
<style>
div.flexbox {
width: 200px;
background: lightgreen;
display: flex;
justify-content: space-between;
margin-bottom: 5px;
line-height: 8px;
}
canvas {
min-width: 0;
width: 10px;
height: 20px;
border: 1px dotted green;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<!-- A) One flex item -->
<div class="flexbox">
<canvas/>
</div>
<!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
<div class="flexbox">
some words <canvas/>
</div>
<!-- C) Two canvas elements, getting stretched by different ratios, from 0.
Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
= 196px
1st element gets 5/8 of space: 5/8 * 196px = 122.5px
1st element gets 3/8 of space: 3/8 * 196px = 73.5px
-->
<div class="flexbox">
<canvas style="flex: 5"/>
<canvas style="flex: 3"/>
</div>
<!-- D) Two canvas elements, getting stretched by different ratios, from
different flex bases.
Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<canvas style="width: 33px; flex: 2 auto"/>
<canvas style="width: 13px; flex: 3 auto"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
First element scaled flex ratio = 4 * 150 = 600
Second element scaled flex ratio = 3 * 100 = 300
* So, total flexibility is 600 + 300 = 900
1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<canvas style="width: 150px; flex: 1 4 auto"/>
<canvas style="width: 100px; flex: 1 3 auto"/>
</div>
<!-- F) Making sure we don't grow past max-width -->
<!-- Same as (D), except we've added a max-width on the second element.
-->
<div class="flexbox">
<canvas style="width: 33px; flex: 2 auto"/>
<canvas style="width: 13px; max-width: 90px; flex: 3 auto"/>
</div>
<!-- G) Making sure we grow at least as large as min-width -->
<!-- Same as (C), except we've added a min-width on the second element.
-->
<div class="flexbox">
<canvas style="width: 33px; flex: 2 auto"/>
<canvas style="width: 13px; min-width: 150px; flex: 3 auto"/>
</div>
</body>
</html>

107
layout/reftests/w3c-css/submitted/flexbox/flexbox-basic-canvas-vert-001v.xhtml
View file

@ -1,107 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!--
This test checks that canvas elements behave correctly as flex items.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
CSS Test: Testing flexbox layout algorithm property on canvas flex items in a vertical flex container
(with a vertical writing-mode on the canvas flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
<link rel="match" href="flexbox-basic-canvas-vert-001-ref.xhtml"/>
<style>
div.flexbox {
height: 200px;
background: lightgreen;
display: flex;
justify-content: space-between;
flex-direction: column;
float: left;
margin-right: 10px;
font: 8px monospace;
}
canvas {
width: 20px;
height: 10px;
min-height: 0;
border: 1px dotted green;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<!-- A) One flex item -->
<div class="flexbox">
<canvas/>
</div>
<!-- B) Text and a canvas (ensure they aren't merged into one flex item) -->
<div class="flexbox">
a b <canvas/>
</div>
<!-- C) Two canvas elements, getting stretched by different ratios, from 0.
Space-to-be-distributed = 200px - borders = 200 - (1 + 1) - (1 + 1)
= 196px
1st element gets 5/8 of space: 5/8 * 196px = 122.5px
1st element gets 3/8 of space: 3/8 * 196px = 73.5px
-->
<div class="flexbox">
<canvas style="flex: 5"/>
<canvas style="flex: 3"/>
</div>
<!-- D) Two canvas elements, getting stretched by different ratios, from
different flex bases.
Space-to-be-distributed = 200px - (33 + 1 + 1) - (13 + 1 + 1) = 150px
1st element gets 2/5 of space: 33px + 2/5 * 150px = 93px
1st element gets 3/5 of space: 13px + 3/5 * 150px = 103px
-->
<div class="flexbox">
<canvas style="height: 33px; flex: 2 auto"/>
<canvas style="height: 13px; flex: 3 auto"/>
</div>
<!-- E) Two flex items, getting shrunk by different amounts.
Space-to-be-distributed = 200px - (150 + 1 + 1) - (100 + 1 + 1) = -54px
First element scaled flex ratio = 4 * 150 = 600
Second element scaled flex ratio = 3 * 100 = 300
* So, total flexibility is 600 + 300 = 900
1st element gets 600/900 of space: 150 + 600/900 * -54 = 114px
2nd element gets 300/900 of space: 100 + 300/900 * -54 = 82px
-->
<div class="flexbox">
<canvas style="height: 150px; flex: 1 4 auto"/>
<canvas style="height: 100px; flex: 1 3 auto"/>
</div>
<!-- F) Making sure we don't grow past max-height -->
<!-- Same as (D), except we've added a max-height on the second element.
-->
<div class="flexbox">
<canvas style="height: 33px; flex: 2 auto"/>
<canvas style="height: 13px; max-height: 90px; flex: 3 auto"/>
</div>
<!-- G) Making sure we grow at least as large as min-height -->
<!-- Same as (C), except we've added a min-height on the second element.
-->
<div class="flexbox">
<canvas style="height: 33px; flex: 2 auto"/>
<canvas style="height: 13px; min-height: 150px; flex: 3 auto"/>
</div>
</body>
</html>

128
layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-001v.html
View file

@ -1,128 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<meta charset="utf-8">
<title>
CSS Test: Testing how explicit main-size & cross-size constraints
influence sizing on non-stretched flex item w/ intrinsic ratio
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
<link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
<style>
.flexbox {
display: flex;
flex-direction: row;
border: 1px solid black;
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
width: 40px;
height: 40px;
justify-content: flex-start;
align-items: flex-start;
float: left; /* For testing in "rows" */
}
br { clear: both; }
.flexbox > * {
writing-mode: vertical-lr;
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
later channels of influence. */
min-width: 0;
min-height: 0;
}
</style>
</head>
<body>
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
<!-- Row 1: no special sizing: -->
<div class="flexbox">
<img src="support/solidblue.png">
</div>
<br>
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="flex: 0 0 30px">
</div>
<br>
<!-- Row 3: min main-size OR min cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px;
min-height: 30px">
</div>
<br>
<!-- Row 4: max main-size OR max cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
max-height: 6px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 6px;
max-height: 10px">
</div>
<br>
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
min-height: 30px">
</div>
<br>
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 10px;
min-height: 30px">
</div>
</body>
</html>

128
layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-002v.html
View file

@ -1,128 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<meta charset="utf-8">
<title>
CSS Test: Testing how explicit main-size & cross-size constraints
influence sizing on non-stretched flex item w/ intrinsic ratio
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
<link rel="match" href="flexbox-intrinsic-ratio-001-ref.html">
<style>
.flexbox {
display: flex;
flex-direction: column;
border: 1px solid black;
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
width: 40px;
height: 40px;
justify-content: flex-start;
align-items: flex-start;
float: left; /* For testing in "rows" */
}
br { clear: both; }
.flexbox > * {
writing-mode: vertical-lr;
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
later channels of influence. */
min-width: 0;
min-height: 0;
}
</style>
</head>
<body>
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
<!-- Row 1: no special sizing: -->
<div class="flexbox">
<img src="support/solidblue.png">
</div>
<br>
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="flex: 0 0 30px">
</div>
<br>
<!-- Row 3: min main-size OR min cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px;
min-height: 30px">
</div>
<br>
<!-- Row 4: max main-size OR max cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
max-height: 6px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 6px;
max-height: 10px">
</div>
<br>
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
min-height: 30px">
</div>
<br>
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 10px;
min-height: 30px">
</div>
</body>
</html>

128
layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-003v.html
View file

@ -1,128 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<meta charset="utf-8">
<title>
CSS Test: Testing how explicit main-size & cross-size constraints
influence sizing on stretched flex item w/ intrinsic ratio
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
<link rel="match" href="flexbox-intrinsic-ratio-003-ref.html">
<style>
.flexbox {
display: flex;
flex-direction: row;
border: 1px solid black;
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
width: 40px;
height: 40px;
justify-content: flex-start;
align-items: stretch;
float: left; /* For testing in "rows" */
}
br { clear: both; }
.flexbox > * {
writing-mode: vertical-rl;
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
later channels of influence. */
min-width: 0;
min-height: 0;
}
</style>
</head>
<body>
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
<!-- Row 1: no special sizing: -->
<div class="flexbox">
<img src="support/solidblue.png">
</div>
<br>
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="flex: 0 0 30px">
</div>
<br>
<!-- Row 3: min main-size OR min cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px;
min-height: 30px">
</div>
<br>
<!-- Row 4: max main-size OR max cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
max-height: 6px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 6px;
max-height: 10px">
</div>
<br>
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
min-height: 30px">
</div>
<br>
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 10px;
min-height: 30px">
</div>
</body>
</html>

128
layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-004v.html
View file

@ -1,128 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<meta charset="utf-8">
<title>
CSS Test: Testing how explicit main-size & cross-size constraints
influence sizing on stretched flex item w/ intrinsic ratio
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
<link rel="match" href="flexbox-intrinsic-ratio-004-ref.html">
<style>
.flexbox {
display: flex;
flex-direction: column;
border: 1px solid black;
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
width: 40px;
height: 40px;
justify-content: flex-start;
align-items: stretch;
float: left; /* For testing in "rows" */
}
br { clear: both; }
.flexbox > * {
writing-mode: vertical-rl;
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
later channels of influence. */
min-width: 0;
min-height: 0;
}
</style>
</head>
<body>
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
<!-- Row 1: no special sizing: -->
<div class="flexbox">
<img src="support/solidblue.png">
</div>
<br>
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="flex: 0 0 30px">
</div>
<br>
<!-- Row 3: min main-size OR min cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px;
min-height: 30px">
</div>
<br>
<!-- Row 4: max main-size OR max cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
max-height: 6px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 6px;
max-height: 10px">
</div>
<br>
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
min-height: 30px">
</div>
<br>
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 10px;
min-height: 30px">
</div>
</body>
</html>

129
layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-005v.html
View file

@ -1,129 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<meta charset="utf-8">
<title>
CSS Test: Testing how explicit main-size & cross-size constraints
influence sizing on non-stretched flexible flex item w/ intrinsic ratio
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
<link rel="match" href="flexbox-intrinsic-ratio-005-ref.html">
<style>
.flexbox {
display: flex;
flex-direction: row;
border: 1px solid black;
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
width: 40px;
height: 40px;
justify-content: flex-start;
align-items: flex-start;
float: left; /* For testing in "rows" */
}
br { clear: both; }
.flexbox > * {
flex: 1;
writing-mode: vertical-lr;
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
later channels of influence. */
min-width: 0;
min-height: 0;
}
</style>
</head>
<body>
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
<!-- Row 1: no special sizing: -->
<div class="flexbox">
<img src="support/solidblue.png">
</div>
<br>
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="flex: 1 1 30px">
</div>
<br>
<!-- Row 3: min main-size OR min cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px;
min-height: 30px">
</div>
<br>
<!-- Row 4: max main-size OR max cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
max-height: 6px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 6px;
max-height: 10px">
</div>
<br>
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
min-height: 30px">
</div>
<br>
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 10px;
min-height: 30px">
</div>
</body>
</html>

129
layout/reftests/w3c-css/submitted/flexbox/flexbox-intrinsic-ratio-006v.html
View file

@ -1,129 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<meta charset="utf-8">
<title>
CSS Test: Testing how explicit main-size & cross-size constraints
influence sizing on non-stretched flexible flex item w/ intrinsic ratio
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-main-size">
<link rel="help" href="https://www.w3.org/TR/css-flexbox-1/#hypothetical-cross-size">
<link rel="match" href="flexbox-intrinsic-ratio-006-ref.html">
<style>
.flexbox {
display: flex;
flex-direction: column;
border: 1px solid black;
margin: 0 2px 2px 0; /* (Just for spacing things out, visually) */
width: 40px;
height: 40px;
justify-content: flex-start;
align-items: flex-start;
float: left; /* For testing in "rows" */
}
br { clear: both; }
.flexbox > * {
flex: 1;
writing-mode: vertical-lr;
/* Disable "min-width:auto"/"min-height:auto" to focus purely on
later channels of influence. */
min-width: 0;
min-height: 0;
}
</style>
</head>
<body>
<!-- NOTE: solidblue.png has an intrinsic size of 16px by 16px. -->
<!-- Row 1: no special sizing: -->
<div class="flexbox">
<img src="support/solidblue.png">
</div>
<br>
<!-- Row 2: Specified main-size, cross-size, or flex-basis: -->
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="flex: 1 1 30px">
</div>
<br>
<!-- Row 3: min main-size OR min cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
min-height: 34px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 34px;
min-height: 30px">
</div>
<br>
<!-- Row 4: max main-size OR max cross-size, or both -->
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
max-height: 6px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 6px;
max-height: 10px">
</div>
<br>
<!-- Row 5: min main-size vs. max cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
min-height: 30px">
</div>
<br>
<!-- Row 6: min|max main-size vs. explicit cross-size, & vice versa -->
<div class="flexbox">
<img src="support/solidblue.png" style="min-width: 30px;
height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 30px;
max-height: 10px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="max-width: 10px;
height: 30px">
</div>
<div class="flexbox">
<img src="support/solidblue.png" style="width: 10px;
min-height: 30px">
</div>
</body>
</html>

86
layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-002v.xhtml
View file

@ -1,86 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase with margin/border/padding on flex items
and with various writing-modes on the items. -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
CSS Test: Testing margins, borders, and padding on flex items in a horizontal flex container
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
<link rel="match" href="flexbox-mbp-horiz-002-ref.xhtml"/>
<style>
div { height: 100px; border: 0; }
div.flexbox {
width: 200px;
font-size: 10px;
display: flex;
}
div.a {
flex: 1 0 9px;
background: lightgreen;
margin-left: 1px;
margin-right: 3px;
border-style: dotted;
border-left-width: 2px;
border-right-width: 4px;
padding-left: 5px;
padding-right: 6px;
writing-mode: vertical-lr;
}
div.b {
flex: 2 0 1px;
background: yellow;
margin-left: 2px;
margin-right: 4px;
border-style: dashed;
border-left-width: 7px;
border-right-width: 3px;
padding-left: 1px;
padding-right: 2px;
writing-mode: vertical-rl;
}
div.c {
flex: 3 0 40px;
background: orange;
writing-mode: sideways-lr;
}
div.flexNone {
flex: none;
background: pink;
writing-mode: vertical-lr;
}
div.flexBasis {
flex: 0 0 20px;
background: gray;
writing-mode: sideways-rl;
}
div.spacer {
width: 15px;
height: 15px;
background: purple;
}
</style>
</head>
<body>
<div class="flexbox"><div class="a"></div><div class="b"/></div>
<div class="flexbox"><div class="a"/><div class="c"/></div>
<div class="flexbox"><div class="a"/>
<div class="flexNone"><div class="spacer"/></div>
</div>
<div class="flexbox"><div class="b"/><div class="c"/></div>
<div class="flexbox"><div class="b"/>
<div class="flexNone"><div class="spacer"/><div class="spacer"/></div>
</div>
<div class="flexbox">
<div class="a"/><div class="b"/><div class="flexBasis"/><div class="c"/>
</div>
</body>
</html>

88
layout/reftests/w3c-css/submitted/flexbox/flexbox-mbp-horiz-003v.xhtml
View file

@ -1,88 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<!-- Testcase with border/padding on a flex container and on its children -->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>
CSS Test: Testing borders and padding on a horizontal flex container and its flex items
(with a vertical writing-mode on the flex items).
</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"/>
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#layout-algorithm"/>
<link rel="match" href="flexbox-mbp-horiz-003-ref.xhtml"/>
<style>
div { height: 20px; border: 0; }
div.flexbox {
width: 200px;
display: flex;
margin-bottom: 2px;
}
<!-- customizations for flex container border/padding -->
.borderA {
border-style: dashed;
border-color: purple;
border-top-width: 6px;
border-right-width: 4px;
border-bottom-width: 2px;
border-left-width: 8px;
}
.borderB {
border-style: dashed;
border-color: purple;
border-top-width: 4px;
border-right-width: 5px;
border-bottom-width: 6px;
border-left-width: 7px;
}
.paddingA {
padding: 4px 3px 2px 1px;
}
.paddingB {
padding: 8px 11px 14px 17px;
}
div.child1 {
flex: 1 0 24px;
background: lightgreen;
border-style: dotted;
border-left-width: 2px;
border-right-width: 4px;
writing-mode: vertical-rl;
}
div.child2 {
flex: 2 0 10px;
background: yellow;
border-style: dashed;
border-left-width: 7px;
border-right-width: 3px;
writing-mode: vertical-lr;
}
</style>
</head>
<body>
<div class="flexbox borderA"
><div class="child1"/><div class="child2"/></div>
<div class="flexbox borderA paddingA"
><div class="child1"/><div class="child2"/></div>
<div class="flexbox borderA paddingB"
><div class="child1"/><div class="child2"/></div>
<div class="flexbox borderB"
><div class="child1"/><div class="child2"/></div>
<div class="flexbox borderB paddingA"
><div class="child1"/><div class="child2"/></div>
<div class="flexbox borderB paddingB"
><div class="child1"/><div class="child2"/></div>
<div class="flexbox paddingA"
><div class="child1"/><div class="child2"/></div>
<div class="flexbox paddingB"
><div class="child1"/><div class="child2"/></div>
</body>
</html>

94
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010-ref.html
View file

@ -1,94 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<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;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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 > .hl, .container > .hr {
/* In the testcase, these items are stretched vertically
via the default "align-self:stretch" behavior, and because
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;
}
.container.hl > * { float: left; }
.container.hr > * { float: right; }
</style>
</head>
<body>
<div class="container hl">
<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">
<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">
<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">
<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>
</body>
</html>

88
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-010.html
View file

@ -1,88 +0,0 @@
<!DOCTYPE html>
<!--
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 row-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-010-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: row;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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; }
</style>
</head>
<body>
<div class="container hl">
<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">
<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">
<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">
<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>
</body>
</html>

97
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011-ref.html
View file

@ -1,97 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<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;
}
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
/* This really floats to top ('logical left'), since all the containers
have a vertical writing mode. */
float: left;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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
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;
}
</style>
</head>
<body>
<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 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 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 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>
</body>
</html>

89
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-011.html
View file

@ -1,89 +0,0 @@
<!DOCTYPE html>
<!--
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 vertical row-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-011-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: row;
float: left;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
height: 500px;
width: 150px;
}
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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; }
</style>
</head>
<body>
<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 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 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 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>
</body>
</html>

97
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012-ref.html
View file

@ -1,97 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<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;
}
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
/* This really floats to top ('logical left'), since all the containers
have a vertical writing mode. */
float: right;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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
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;
}
</style>
</head>
<body>
<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 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 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 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>
</body>
</html>

90
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-012.html
View file

@ -1,90 +0,0 @@
<!DOCTYPE html>
<!--
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 vertical row-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-012-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: row;
float: left;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
height: 500px;
width: 150px;
}
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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; }
</style>
</head>
<body>
<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 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 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 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>
</body>
</html>

98
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013-ref.html
View file

@ -1,98 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<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;
}
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
nocollapse {
/* special element to disable margin-collapsing */
display: block;
overflow: hidden;
height: 0;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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
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;
}
</style>
</head>
<body>
<div class="container hl">
<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">
<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">
<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">
<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>
</body>
</html>

89
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-013.html
View file

@ -1,89 +0,0 @@
<!DOCTYPE html>
<!--
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.
</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="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;
}
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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; }
</style>
</head>
<body>
<div class="container hl">
<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">
<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">
<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">
<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>
</body>
</html>

96
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014-ref.html
View file

@ -1,96 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<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;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
nocollapse {
/* special element to disable margin-collapsing */
display: block;
overflow: hidden;
height: 0;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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 > .hl, .container > .hr {
/* In the testcase, these items are stretched vertically
via the default "align-self:stretch" behavior, and because
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 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 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 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 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>
</body>
</html>

88
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-014.html
View file

@ -1,88 +0,0 @@
<!DOCTYPE html>
<!--
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 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-014-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: column;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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; }
</style>
</head>
<body>
<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 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 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 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>
</body>
</html>

96
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015-ref.html
View file

@ -1,96 +0,0 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<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;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
nocollapse {
/* special element to disable margin-collapsing */
display: block;
overflow: hidden;
height: 0;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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 > .hl, .container > .hr {
/* In the testcase, these items are stretched vertically
via the default "align-self:stretch" behavior, and because
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 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 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 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 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>
</body>
</html>

89
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-015.html
View file

@ -1,89 +0,0 @@
<!DOCTYPE html>
<!--
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 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-015-ref.html">
<link rel="stylesheet" type="text/css" href="support/ahem.css">
<style>
.container {
display: flex;
flex-direction: column;
border: 2px solid purple;
padding: 2px;
margin-bottom: 2em;
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;
border-inline-start-color: lime;
margin: 11px 13px 17px 7px;
inline-size: 6px;
}
.small { font: 12px Ahem; }
.big { font: 20px Ahem; }
.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; }
</style>
</head>
<body>
<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 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 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 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>
</body>
</html>