mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1148294 part 3: Add more reftests for writing-mode & direction properties' influence on flex axes (as modified copies of first test). 

--HG--
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002-ref.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003-ref.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004-ref.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005-ref.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001-ref.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006-ref.html
rename : layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-001.html => layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html
This commit is contained in:
Daniel Holbert 2015-03-27 12:06:03 -07:00
Родитель d0cfc6e31e
Коммит be84a47255
11 изменённых файлов: 775 добавлений и 0 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

76
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002-ref.html Normal file
Просмотреть файл

@ -0,0 +1,76 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<meta charset="utf-8">
<style>
.flexContainer {
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer > * {
width: 15px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
</body>
</html>

78
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-002.html Normal file
Просмотреть файл

@ -0,0 +1,78 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-rl'</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-direction">
<link rel="match" href="flexbox-writing-mode-002-ref.html">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: vertical-rl;
}
.flexContainer > * {
width: 15px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer" style="flex-flow: row wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body>
</html>

76
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003-ref.html Normal file
Просмотреть файл

@ -0,0 +1,76 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<meta charset="utf-8">
<style>
.flexContainer {
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: ltr; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer > * {
width: 15px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
</body>
</html>

78
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-003.html Normal file
Просмотреть файл

@ -0,0 +1,78 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Try various flex-flow values, with 'direction: ltr' and 'writing-mode: vertical-lr'</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-direction">
<link rel="match" href="flexbox-writing-mode-003-ref.html">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: ltr;
writing-mode: vertical-lr;
}
.flexContainer > * {
width: 15px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer" style="flex-flow: row wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body>
</html>

76
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004-ref.html Normal file
Просмотреть файл

@ -0,0 +1,76 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<meta charset="utf-8">
<style>
.flexContainer {
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: horizontal-tb; */
}
.flexContainer > * {
width: 15px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
</body>
</html>

78
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-004.html Normal file
Просмотреть файл

@ -0,0 +1,78 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: horizontal-tb'</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-direction">
<link rel="match" href="flexbox-writing-mode-004-ref.html">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: horizontal-tb;
}
.flexContainer > * {
width: 15px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer" style="flex-flow: row wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body>
</html>

76
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005-ref.html Normal file
Просмотреть файл

@ -0,0 +1,76 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<meta charset="utf-8">
<style>
.flexContainer {
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-rl; */
}
.flexContainer > * {
width: 15px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body>
</html>

78
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-005.html Normal file
Просмотреть файл

@ -0,0 +1,78 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-rl'</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-direction">
<link rel="match" href="flexbox-writing-mode-005-ref.html">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: vertical-rl;
}
.flexContainer > * {
width: 15px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer" style="flex-flow: row wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body>
</html>

76
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006-ref.html Normal file
Просмотреть файл

@ -0,0 +1,76 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<meta charset="utf-8">
<style>
.flexContainer {
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
/* Testcase has direction: rtl; */
/* Testcase has writing-mode: vertical-lr; */
}
.flexContainer > * {
width: 15px;
height: 15px;
float: left;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer"><!-- row wrap -->
<div class="item2"></div><div class="item4"></div>
<div class="item1"></div><div class="item3"></div>
</div>
<div class="flexContainer"><!-- row wrap-reverse -->
<div class="item4"></div><div class="item2"></div>
<div class="item3"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap -->
<div class="item1"></div><div class="item3"></div>
<div class="item2"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- row-reverse wrap-reverse -->
<div class="item3"></div><div class="item1"></div>
<div class="item4"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap -->
<div class="item3"></div><div class="item4"></div>
<div class="item1"></div><div class="item2"></div>
</div>
<div class="flexContainer"><!-- column wrap-reverse -->
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap -->
<div class="item4"></div><div class="item3"></div>
<div class="item2"></div><div class="item1"></div>
</div>
<div class="flexContainer"><!-- column-reverse wrap-reverse -->
<div class="item2"></div><div class="item1"></div>
<div class="item4"></div><div class="item3"></div>
</div>
</body>
</html>

78
layout/reftests/w3c-css/submitted/flexbox/flexbox-writing-mode-006.html Normal file
Просмотреть файл

@ -0,0 +1,78 @@
<!DOCTYPE html>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html>
<head>
<title>CSS Test: Try various flex-flow values, with 'direction: rtl' and 'writing-mode: vertical-lr'</title>
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#propdef-flex-direction">
<link rel="match" href="flexbox-writing-mode-006-ref.html">
<meta charset="utf-8">
<style>
.flexContainer {
display: flex;
height: 30px;
width: 30px;
border: 1px solid gray;
margin-bottom: 5px;
direction: rtl;
writing-mode: vertical-lr;
}
.flexContainer > * {
width: 15px;
height: 15px;
}
.item1 {
/* Note: flex items are ordered as "CMYK": cyan, magenta, yellow, black */
background: cyan;
}
.item2 {
background: magenta;
}
.item3 {
background: yellow;
}
.item4 {
background: black;
}
</style>
</head>
<body>
<div class="flexContainer" style="flex-flow: row wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: row-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
<div class="flexContainer" style="flex-flow: column-reverse wrap-reverse">
<div class="item1"></div><div class="item2"></div>
<div class="item3"></div><div class="item4"></div>
</div>
</body>
</html>

5
layout/reftests/w3c-css/submitted/flexbox/reftest.list
Просмотреть файл

@ -185,3 +185,8 @@ skip-if(Mulet) == flexbox-overflow-vert-001.html flexbox-overflow-vert-001-ref.h
# Tests for combined influence of 'writing-mode' & 'direction' on flex axes
test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-001.html flexbox-writing-mode-001-ref.html
test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-002.html flexbox-writing-mode-002-ref.html
test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-003.html flexbox-writing-mode-003-ref.html
test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-004.html flexbox-writing-mode-004-ref.html
test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-005.html flexbox-writing-mode-005-ref.html
test-pref(layout.css.vertical-text.enabled,true) == flexbox-writing-mode-006.html flexbox-writing-mode-006-ref.html