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

Bug 1146051 part 9 - [css-grid] More grid placement tests and new grid clamping tests.

This commit is contained in:
Mats Palmgren 2015-04-30 18:42:50 +00:00
Родитель 8140bec714
Коммит f247a57b0a
10 изменённых файлов: 1133 добавлений и 1 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

86
layout/reftests/css-grid/grid-placement-abspos-implicit-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,86 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<title>CSS Test: Testing placement of abs.pos. grid items in negative implicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<meta charset="utf-8">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
/*display: grid;*/
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
padding: 17px 7px 11px 13px;
width: 200px;
height: 200px;
}
.a {
position: absolute;
left: 59px; top: 68px;
height: 32px; width: 44px;
}
.abs {
position: absolute;
opacity: 0.7;
width: 21px;
height: 15px;
}
.b {
left: 14px; top: 3px; bottom: 1px;
width: 61px; height: auto;
}
.c {
left: 14px; top: 20px;
width: 38px; height: 11px;
}
.d {
left: 1px; top: 54px;
width: 5px; height: 11px;
}
.e {
right: 5px; bottom: 1px;
width: 199px; height: 205px;
}
.f {
right: 5px; top: 3px;
width: 199px; height: 11px;
}
span {
background: lime;
border: 1px solid;
}
</style>
</head>
<body>
<div class="grid">
<span class="a">a</span>
<span class="b abs">b</span>
<span class="c abs">c</span>
<span class="d abs">d</span>
<span class="e abs">e</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="b abs" style="width:38px">b</span>
<span class="c abs">c</span>
<span class="d abs">d</span>
<span class="e abs">e</span>
<span class="f abs">f</span>
</div>
</body>
</html>

94
layout/reftests/css-grid/grid-placement-abspos-implicit-001.html Normal file
Просмотреть файл

@ -0,0 +1,94 @@
<!DOCTYPE HTML>
<!--
Any copyright is dedicated to the Public Domain.
http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
<title>CSS Test: Testing placement of abs.pos. grid items in negative implicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107783">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
<link rel="match" href="grid-abspos-items-001-ref.html">
<meta charset="utf-8">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
position: relative;
border: 0 dashed blue;
border-width: 7px 11px 13px 17px;
grid-auto-flow: row;
grid-auto-columns: 23px;
grid-auto-rows: 17px;
padding: 17px 7px 11px 13px;
width: 200px;
height: 200px;
}
span.negative {
grid-column: span A 2 / 1;
grid-row: A -1;
background: none;
border: none;
}
.a {
grid-column: 1 / 3;
grid-row: 3 / 5;
}
.abs {
position: absolute;
top:3px; left:1px; right:5px; bottom:1px;
opacity: 0.7;
}
.b {
grid-column: span A 4 / 2;
grid-row: auto / auto;
}
.c {
grid-column: span 5 / 1; /* outside to the left */
grid-row: A -5 / 1; /* outside to the top */
}
.d {
grid-column: auto / A -3;
grid-row: 2 / 1;
}
.e {
grid-column: A -3 / auto;
grid-row: A -3 / auto;
}
.f {
grid-column: A -3 / auto;
grid-row: auto / A -2;
}
span {
background: lime;
border: 1px solid;
}
</style>
</head>
<body>
<div class="grid">
<span class="negative"></span>
<span class="a">a</span>
<span class="b abs">b</span>
<span class="c abs">c</span>
<span class="d abs">d</span>
<span class="e abs">e</span>
<span class="f abs">f</span>
</div>
<div class="grid">
<span class="negative"></span>
<div><span class="b abs">b</span></div>
<x><span class="c abs">c</span></x>
<span class="d abs">d</span>
<div><span class="e abs">e</span></div>
<span class="f abs">f</span>
</div>
</body>
</html>

149
layout/reftests/css-grid/grid-placement-auto-implicit-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,149 @@
<!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 placement of grid items outside the explicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
border: 1px solid blue;
width:300px;
}
.a { background:lime; }
.a2 { height:38px; background:lime; }
.b { display:block; background:pink; }
.c { width:1px; background:yellow; }
.e { background:silver; }
.f { background:cyan; }
.g { background:tan; }
br { display:block; height:0; width:0; }
.f2 .b { display:inline-block; }
span {
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border: 1px solid;
vertical-align:top;
}
</style>
</head>
<body style="overflow:hidden">
<div style="float:left">
<div class="grid">
<span class="c" style="width:18px">c</span><span class="a">a</span><span class="e">e</span><span class="b">b</span>
</div>
<div class="grid">
<span class="g">g</span><span class="a">a</span><span class="b">b</span>
</div>
<div class="grid">
<span class="c">c</span><span class="e">e</span><span class="a">a</span><span class="b" span="2">b</span>
</div>
<div class="grid">
<span class="c">c</span><span class="f">f</span><span class="a">a</span><span class="b" span="2">b</span>
</div>
<div class="grid">
<span class="c">c</span><span class="e" style="width:1px">e</span><span class="a" style="margin-left:23px">a</span><span class="b" span="4">b</span>
</div>
<div class="grid">
<span class="c">c</span><span class="f" style="margin-left:3px; width:21px">f</span><span class="a">a</span><span class="b" span="4">b</span>
</div>
<div class="grid">
<span class="c">c</span><span class="e" style="width:28px">e</span><span class="a" style="margin-left:134px">a</span><span class="b" span="50">b</span>
</div>
<div class="grid">
<span class="c">c</span><span class="f" style="margin-left:144px">f</span><span class="a">a</span><span class="b" span="50">b</span><span class="f" style="margin-left:147px">f</span>
</div>
<div class="grid">
<span class="c">c</span><span class="f" style="width:4px;margin-left:138px">f</span><span class="f">f</span><span class="a">a</span><span class="b" span="50">b</span>
</div>
<div class="grid">
<span class="c">c</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span>
</div>
<div class="grid">
<span class="g" style="width:1px">g</span><span class="g" style="width:1px">g</span><span class="a" style="margin-left:161px">a</span><span class="b" span="50">b</span>
</div>
<div class="grid" style="height:40px; position:relative">
<span style="margin-top:-10000px; height:10060px; width:78px;"></span>
<span style="position:absolute; left:0; width:216px; ">b</span><br>
<span style="margin-top:-42px; height:30px; width:78px; color:cyan"></span>
</div>
<div class="grid" style="height:40px; position:relative">
<span style="margin-top:-10000px; height:10018px; width:78px;"></span>
<span style="position:absolute; left:0; width:216px;">b</span><br>
<span style="position:absolute; left:0; z-index:1; height:30px; width:78px; color:lime"></span>
</div>
<div class="grid" style="height:40px; position:relative;">
<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:cyan;"></span>
<span style="position:absolute; left:82px; width: 30px;">b</span>
</div>
<div class="grid" style="height:40px; position:relative">
<span style="position:relative; z-index:2; margin-top:-10000px; height:10018px; width:78px;"></span>
<span style="position:absolute; left:0; z-index:2; width:216px;">b</span><br>
<span style="position:absolute; left:0; z-index:2; height:30px; width:78px; color:tan"></span>
</div>
<div class="grid" style="height:40px; position:relative;">
<span style="position:absolute; left:20px; width: 30px; height:78px; z-index:2; color:silver;"></span>
<span style="position:absolute; left:143px; width: 120px;">b</span>
</div>
</div><div style="float:left" class="f2">
<div class="grid">
<span class="b">b</span><span class="a2">a</span><br><span class="c" style="width:18px">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="b">b</span><span class="a2">a</span><span class="g">g</span><br><span class="b" style="visibility:hidden">b</span>
</div>
<div class="grid">
<span class="b" span="2">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="b" span="2">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px;">f</span>
</div>
<div class="grid">
<span class="b" span="4">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e" style="width:1px">e</span>
</div>
<div class="grid">
<span class="b" span="4">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; margin-left:3px; width:21px">f</span>
</div>
<div class="grid">
<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="e" style="width:28px">e</span>
</div>
<div class="grid">
<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; margin-left:144px">f</span><span class="f" style="position:relative;left:-20px">f</span>
</div>
<div class="grid">
<span class="b" span="50">b</span><span class="a2">a</span><br><span class="c">c</span><span class="f" style="position:relative;top:-20px; width:4px;margin-left:138px">f</span><span class="f" style="position:relative;top:-20px;">f</span>
</div>
<div class="grid">
<span class="b" span="50">b</span><span class="a2">a</span><span class="g" >g</span><br><span class="c">c</span>
</div>
<div class="grid">
<span class="b" span="50">b</span><span class="a2">a</span><span class="g">g</span><span class="g">g</span><br><span class="g" style="visibility:hidden">g</span>
</div>
</div>
<script>
var elms = document.querySelectorAll("[span].b");
for (i=0; i < elms.length; ++i) {
var e = elms[i];
var span = e.getAttribute("span");
var width = (15 + (3*parseInt((span>10000?10000:span))));
e.style.width = width + "px";
}
</script>
</body>
</html>

151
layout/reftests/css-grid/grid-placement-auto-implicit-001.html Normal file
Просмотреть файл

@ -0,0 +1,151 @@
<!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 placement of grid items outside the explicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids">
<link rel="match" href="grid-placement-auto-implicit-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
grid-template-columns: 20px 20px 20px 20px;
grid-template-rows: 20px;
grid-auto-columns: 3px;
grid-auto-rows: 20px;
border: 1px solid blue;
width: 300px;
}
.a { grid-area: 1 / 2; background:lime; }
.a2 { grid-column:2; grid-row:span 2 / 1; background:lime; }
.b { grid-column: span 1 / 2; grid-row: 2; background:pink; }
.b2 { grid-column: span 1 / 2; background:pink; }
.c { grid-row: 1; background:yellow; }
.e { grid-row: 1; background:silver; }
.f { grid-column: 1; background:cyan; }
.g { background:tan; }
span {
border: 1px solid;
line-height: 18px;
}
</style>
</head>
<body style="overflow:hidden">
<div style="float:left">
<div class="grid">
<span class="a">a</span><span class="b">b</span><span class="c">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b">b</span><span class="g">g</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span><span class="f">f</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span><span class="f" style="grid-column:span 2 / 2">f</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="e" style="grid-column-start: span 10;">e</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="f">f</span><span class="f">f</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="f" style="grid-column: span 2 / 1;">f</span><span class="f">f</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="50">b</span><span class="c">c</span><span class="g">g</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="50">b</span><span class="g">g</span><span class="g">g</span>
</div>
<div class="grid" style="height:40px">
<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:cyan"></span>
<span span="50" style="margin-top:-399960px">b</span>
</div>
<div class="grid" style="height:40px">
<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
<span style="grid-area: 1 / 1 / span 10000 / 5; margin-top:-199980px; height:30px; color:lime"></span>
<span style="grid-column: 1 / span 50; margin-top:-399960px">b</span>
</div>
<div class="grid" style="height:40px">
<span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span>
<span style="grid-area: 1 / 1 / 5 / span 10000; width: 30px; margin-left:-29980px; color:cyan"></span>
<span style="grid-row: 1; grid-column:auto / span 1; width: 30px; margin-left:-59980px">b</span>
</div>
<div class="grid" style="height:40px">
<span style="grid-area: X -10000 / 1 / span 10000 / 5; margin-top:-199980px"></span>
<span style="grid-area: 1 / 1 / span 9998 / 5; margin-top:-199980px; height:30px; color:tan"></span>
<span span="50" style="grid-row:auto / span 5; margin-top:-399960px">b</span>
</div>
<div class="grid" style="height:40px">
<span style="grid-area: 1 / X -10000 / 5 / span 10000; width: 30px; margin-left:-29980px"></span>
<span style="grid-area: 1 / 1 / 5 / span 9995; width: 30px; margin-left:-29980px; color:silver"></span>
<span style="grid-row: 1; grid-column:auto / span 10; margin-left:-59910px; margin-right:59800px">b</span>
</div>
</div><div style="float:left">
<div class="grid">
<span class="a2">a</span><span class="b2">b</span><span class="c">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2">b</span><span class="g">g</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="2">b</span><span class="c">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="2">b</span><span class="c">c</span><span class="f">f</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="4">b</span><span class="c">c</span><span class="e">e</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="4">b</span><span class="c">c</span><span class="f" style="grid-column:span 2 / 2">f</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="e" style="grid-column-start: span 10;">e</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="f">f</span><span class="f">f</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="f" style="grid-column: span 2 / 1;">f</span><span class="f">f</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="50">b</span><span class="c">c</span><span class="g">g</span>
</div>
<div class="grid">
<span class="a2">a</span><span class="b2" span="50">b</span><span class="g">g</span><span class="g">g</span>
</div>
</div>
<script>
var elms = document.querySelectorAll("[span]");
for (i=0; i < elms.length; ++i) {
var e = elms[i];
e.style.gridColumnStart = "span " + e.getAttribute("span");
}
</script>
</body>
</html>

2
layout/reftests/css-grid/grid-placement-definite-002.html
Просмотреть файл

@ -58,7 +58,7 @@ span {
.test5 span { grid-column: a / 8; }
.test6 #span1 { grid-row:1/2; grid-column:1/2; }
.test6 #span2 { grid-row:1/2; grid-column: non-existent / span 1; }
.test6 #span2 { grid-row:1/2; grid-column:1/2; }
.test7 {grid-template-columns: 700px; grid-template-rows: 60px; }
.test7 #span1 { grid-area: 1/1; background: red; border: 4px solid red; color:red; }

93
layout/reftests/css-grid/grid-placement-definite-implicit-001-ref.html Normal file
Просмотреть файл

@ -0,0 +1,93 @@
<!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 placement of grid items outside the explicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
border: 1px solid blue;
}
.a { background:lime; }
.b { background:pink; }
.c { width:1px; display: block; background:yellow; }
.d { margin-left:3px; width:10000px; display: block; background:cyan; }
span {
display: inline-block;
width: 18px;
height: 18px;
line-height: 18px;
border: 1px solid;
vertical-align:top;
}
</style>
</head>
<body style="overflow:hidden">
<div class="grid">
<span class="b">b</span><span class="a">a</span><span class="c" style="width:18px">c</span>
</div>
<div class="grid">
<span class="b" span="2">b</span><span class="a">a</span><span class="c">c</span>
</div>
<div class="grid">
<span class="b" span="3">b</span><span class="a">a</span><span class="c">c</span>
</div>
<div class="grid">
<span class="b" span="4">b</span><span class="a">a</span><span class="c">c</span>
</div>
<div class="grid">
<span class="b" span="100">b</span><span class="a">a</span><span class="c">c</span>
</div>
<div class="grid">
<span class="b" span="9998">b</span>
</div>
<div class="grid">
<span class="b" span="9999">b</span>
</div>
<div class="grid">
<span class="b" span="10000">b</span>
</div>
<div class="grid">
<span class="b" span="12345">b</span>
</div>
<div class="grid" style="height:40px">
<span class="b" span="10000">b</span>
</div>
<div class="grid">
<span class="b" span="2">b</span><span class="a">a</span><span class="d">d</span>
</div>
<div class="grid">
<span class="b" style="margin-left:56px; width:30000px; ">b</span>
</div>
<div class="grid cols" style="margin-left:-30000px;">
<span class="b" style="width:1px; margin-left:30062px">b</span>
<span class="c" style="margin-left:29000px; width:1063px;">c</span>
</div>
<div class="grid rows" style="border:none">
<span class="b" style="margin-top:11px;height:1px;">b</span>
</div>
<script>
var elms = document.querySelectorAll("[span].b");
for (i=0; i < elms.length; ++i) {
var e = elms[i];
var span = e.getAttribute("span");
var width = (15 + 3*parseInt((span>10000?10000:span)));
e.style.width = width + "px";
}
</script>
</body>
</html>

110
layout/reftests/css-grid/grid-placement-definite-implicit-001.html Normal file
Просмотреть файл

@ -0,0 +1,110 @@
<!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 placement of grid items outside the explicit grid</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#overlarge-grids">
<link rel="match" href="grid-placement-definite-implicit-001-ref.html">
<style type="text/css">
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
.grid {
display: grid;
grid-template-columns: 20px 20px 20px 20px;
grid-template-rows: 20px;
grid-auto-columns: 3px;
grid-auto-rows: 20px;
border: 1px solid blue;
}
.a { grid-area: 1 / 2; background:lime; }
.b { grid-column: span 1 / 2; grid-row: 1; background:pink; }
.c { grid-row: 2; background:yellow; }
.d { grid-row: 2; grid-column: 1 / span 20000; background:cyan; }
span {
border: 1px solid;
line-height: 18px;
}
</style>
</head>
<body style="overflow:hidden">
<div class="grid">
<span class="a">a</span><span class="b">b</span><span class="c">c</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="2">b</span><span class="c">c</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="3">b</span><span class="c">c</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="4">b</span><span class="c">c</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="100">b</span><span class="c">c</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="9998">b</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="9999">b</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="10000">b</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="12345">b</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="10000">b</span><span class="d">d</span>
</div>
<div class="grid">
<span class="a">a</span><span class="b" span="2">b</span><span class="d">d</span>
</div>
<div class="grid">
<span class="b" style="grid-column: 9997 / span 1000; margin-left:-30000px; ">b</span>
</div>
<div class="grid cols" style="margin-left:-30000px;">
<span class="b" style="grid-column: span 1 / a;">b</span>
<span class="c" style="grid-column: a;">c</span>
</div>
<div class="grid rows" style="grid-auto-rows:3px; grid-auto-cols:20px; margin-top:-30000px; border:none">
<span class="b" style="grid-row: span 1 / a;">b</span>
</div>
<script>
var elms = document.querySelectorAll("[span]");
for (i=0; i < elms.length; ++i) {
var e = elms[i];
e.style.gridColumnStart = "span " + e.getAttribute("span");
}
var cols = '"';
for (j = 0; j < 10010; ++j) {
cols += "a "
}
cols += '"';
var rows = '';
for (j = 0; j < 10010; ++j) {
rows += '"a" '
}
var style = document.createElement('style');
style.appendChild(document.createTextNode(
".cols { grid-template-areas: " + cols + "; }" +
".rows { grid-template-areas: " + rows + "; }"));
var head = document.querySelector("head");
head.appendChild(style)
</script>
</body>
</html>

216
layout/reftests/css-grid/grid-placement-definite-implicit-002-ref.html Normal file
Просмотреть файл

@ -0,0 +1,216 @@
<!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 definite placement with non-existent line names</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<style type="text/css">
html,body {
font-size: 16px;
font-family: monospace;
padding:0; margin:0;
}
.grid {
height: 40px;
position: relative;
}
span {
position: absolute;
top:0; left:0; width:20px; height:20px;
background: lime;
border: 1px solid black;
box-sizing: border-box;
}
.XeN { left: 100px; }
.XsN { width: 80px; } .XsN ~ span { top:20px; left:60px; }
.NeX { left: 20px; width: 80px; }
.NsX { left: 20px; }
.XeA { left: 100px; }
.XsA { width: 60px; } .XsA ~ span { left: 60px; }
.XsA2 { width: 80px; } .XsA2 ~ span { left: 60px; top: 20px; }
.XsA3 { width: 120px; } .XsA3 ~ span { left: 60px; top: 20px; }
.AsX { } .AsX ~ span { top: 20px; }
.xsN { } .xsN ~ span { left: 20px; }
.x2sN { width: 40px; } .x2sN ~ span { left: 40px; }
.xsN2 { width: 40px; } .xsN2 ~ span { left: 20px; top: 20px; }
.xXs { } .xXs ~ span { left: 60px;}
.aXs { } .aXs ~ span { left: 60px;}
.aXe { left: 20px; width: 60px; }
.xXe { width: 100px; } .xXe ~ span { left: 20px; top: 20px; }
.AXe { width: 80px; } .AXe ~ span { top: 20px; }
.A2Xe { left: 20px; width: 60px; }
.XXe { left: 60px; }
.XX3e { left: 60px; width: 40px; }
.XbXe { width: 100px; } .XbXe ~ span { top: 20px; left: 40px; }
.XX0b { } .XX0b ~ span { left: 60px; }
.XX1b { } .XX1b ~ span { left: 60px; }
.XX2b { width: 40px; } .XX2b ~ span { left: 60px; }
.XbN1 { width: 60px; } .XbN1 ~ span { left: 60px; }
.XbN2 { width: 80px; } .XbN2 ~ span { top: 20px; left: 60px; }
.Xbb { } .Xbb ~ span { left: 60px; }
.Xee { left: 100px; }
.nX2s { width: 40px; } .nX2s ~ span { left: 80px; }
.nXs { width: 40px; } .nXs ~ span { left: 60px; }
.nXe { left: 20px; width: 40px; }
.nX2e { left: 40px; width: 40px; }
.nX3e { left: 60px; width: 40px; }
.n3Xe { width: 60px; } .n3Xe ~ span { top: 20px; }
.n4Xe { width: 80px; } .n4Xe ~ span { top: 20px; left: 20px; }
.Xen3 { left: 60px; width: 60px; }
.Xea { left: 60px; }
.Xea2 { left: 60px; width: 40px; }
.Xea3 { left: 60px; width: 60px; }
.Xsa { } .Xsa ~ span { left: 20px; }
.Xsa2 { width: 40px; } .Xsa2 ~ span { left: 20px; top: 20px; }
.Xsa4 { width: 100px; } .Xsa4 ~ span { left: 20px; top: 20px; }
.Xs2a { width: 40px; } .Xs2a ~ span { left: 40px; }
.Xs2a2 { width: 60px; } .Xs2a2 ~ span { left: 40px; top: 20px;}
.Xs2a4 { width: 120px; } .Xs2a4 ~ span { left: 40px; top: 20px; }
.Xs3a { width: 60px; } .Xs3a ~ span { left: 60px; }
.Xs3a2 { width: 80px; } .Xs3a2 ~ span { left: 60px; top: 20px; }
.Xs3a4 { width: 140px; } .Xs3a4 ~ span { left: 60px; top: 20px; }
.nxe { width: 60px; } .nxe ~ span { top: 20px; }
.nx3e { width: 100px; } .nx3e ~ span { top: 20px; }
.n2x3e { left: 20px; width: 80px; }
.Axe { width: 60px; } .Axe ~ span { top: 20px; }
.A2xe { left: 20px; width: 40px; }
.Ax3e { width: 100px; } .Ax3e ~ span { top: 20px; }
.A2x3e { left: 20px; width: 80px; }
.Aa { } .Aa ~ span { top: 20px; }
.A2a { left: 20px; width: 40px; }
.Aa3 { width: 80px; } .Aa3 ~ span { top: 20px; }
.AXs { } .AXs ~ span { top: 20px; }
.A2Xs { left: 20px; }
._Xs { } ._Xs ~ span { left: 60px; }
._Xe { left: 60px; }
._xe { } ._xe ~ span { top: 20px; }
._x3e { } ._x3e ~ span { top: 20px; }
._xa { } ._xa ~ span { top: 20px; }
._xa3 { } ._xa3 ~ span { top: 20px; }
._xn3 { width: 60px; } ._xn3 ~ span { top: 20px; }
._xn5 { width: 100px; } ._xn5 ~ span { top: 20px; }
.Xs_ { } .Xs_ ~ span { left: 20px; }
.X2s_ { } .X2s_ ~ span { left: 40px; }
.X2e_ { left: 80px; }
.A_ { } .A_ ~ span { top: 20px; }
.A2_ { left: 20px; }
.x3_ { } .x3_ ~ span { top: 20px; }
.a2_ { } .a2_ ~ span { top: 20px; }
.a-2_ { } .a-2_ ~ span { top: 20px; }
._n { } ._n ~ span { left: 20px; }
._n2 { } ._n2 ~ span { top: 20px; }
.A3Xe { left: 60px; }
.c1 { background:grey; }
</style>
</head>
<body>
<div style="float:left; width:140px">
<div class="grid"><span class="XeN" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="NeX" ></span><span class="c1"></span></div>
<div class="grid"><span class="NsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="XeA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA2"></span><span class="c1"></span></div>
<div class="grid"><span class="XsA3"></span><span class="c1"></span></div>
<div class="grid"><span class="AsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="xsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="x2sN"></span><span class="c1"></span></div>
<div class="grid"><span class="xsN2"></span><span class="c1"></span></div>
<div class="grid"><span class="xXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="xXe" ></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="AXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div>
<div class="grid"><span class="XXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="XX3e"></span><span class="c1"></span></div>
<div class="grid"><span class="XbXe"></span><span class="c1"></span></div>
<div class="grid"><span class="XX0b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX1b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX2b"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN1"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xee" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2s"></span><span class="c1"></span></div>
<div class="grid"><span class="nXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="nXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2e"></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="nxe" ></span><span class="c1"></span></div>
<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Axe" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Aa" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Aa3" ></span><span class="c1"></span></div>
<div class="grid"><span class="AXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xs" ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="_xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="_xa" ></span><span class="c1"></span></div>
<div class="grid"><span class="_xa3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn5"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div>
<div class="grid"><span class="X2s_"></span><span class="c1"></span></div>
<div class="grid"><span class="X2e_"></span><span class="c1"></span></div>
<div class="grid"><span class="A_" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="x3_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a-2_"></span><span class="c1"></span></div>
<div class="grid"><span class="_n" ></span><span class="c1"></span></div>
<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
</div>
</body>
</html>

229
layout/reftests/css-grid/grid-placement-definite-implicit-002.html Normal file
Просмотреть файл

@ -0,0 +1,229 @@
<!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 definite placement with non-existent line names</title>
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1146051">
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#grid-placement-slot">
<link rel="match" href="grid-placement-definite-implicit-002-ref.html">
<style type="text/css">
html,body {
font-size: 16px;
font-family: monospace;
padding:0; margin:0;
}
span {
background: lime;
border: 1px solid;
grid-row: 1;
}
.grid {
display: grid;
grid-template-columns: (A) 20px (A) 20px;
grid-template-rows: 20px 20px;
grid-auto-columns: 20px;
}
/* Legend:
X = line name with no match
x = ditto with span
A = existing line name
a = ditto with span
N = line number
n = ditto with span
e = on the end side
s = on the start side
*/
.XeN { grid-column: X 3 / 2; }
.XsN { grid-column: X -3 / 2; }
.NeX { grid-column: 2 / X 3; }
.NsX { grid-column: 2 / X -3; }
.XeA { grid-column: X 3 / A; }
.XsA { grid-column: X -3 / A; }
.XsA2 { grid-column: X -3 / A 2; }
.XsA3 { grid-column: X -3 / A 3; }
.AsX { grid-column: A / X -3; }
.xsN { grid-column: span X / 1; }
.x2sN { grid-column: span X 2 / 1; }
.xsN2 { grid-column: span X / 2; }
.xXs { grid-column: span X / X -2; }
.aXs { grid-column: span A / X -2; }
.aXe { grid-column: span A / X 2; }
.xXe { grid-column: span X / X 2; }
.AXe { grid-column: A / X 2; }
.A2Xe { grid-column: A 2 / X 2; }
.XXe { grid-column: X / X 2; }
.XX3e { grid-column: X / X 3; }
.XbXe { grid-column: X -2 / X; }
.XX0b { grid-column: X -3 / X -3; }
.XX1b { grid-column: X -3 / X -2; }
.XX2b { grid-column: X -3 / X -1; }
.XbN1 { grid-column: X -3 / 1; }
.XbN2 { grid-column: X -3 / 2; }
.Xbb { grid-column: X -3 / X -4; }
.Xee { grid-column: X 3 / X; }
.nX2s { grid-column: span 2 / X -2; }
.nXs { grid-column: span 2 / X -1; }
.nXe { grid-column: span 2 / X; }
.nX2e { grid-column: span 2 / X 2; }
.nX3e { grid-column: span 2 / X 3; }
.n3Xe { grid-column: span 3 / X; }
.n4Xe { grid-column: span 4 / X; }
.Xen3 { grid-column: X / span 3; }
.Xea { grid-column: X / span A; }
.Xea2 { grid-column: X / span A 2; }
.Xea3 { grid-column: X / span A 3; }
.Xsa { grid-column: X -1 / span A; }
.Xsa2 { grid-column: X -1 / span A 2; }
.Xsa4 { grid-column: X -1 / span A 4; }
.Xs2a { grid-column: X -2 / span A; }
.Xs2a2 { grid-column: X -2 / span A 2; }
.Xs2a4 { grid-column: X -2 / span A 4; }
.Xs3a { grid-column: X -3 / span A; }
.Xs3a2 { grid-column: X -3 / span A 2; }
.Xs3a4 { grid-column: X -3 / span A 4; }
.nxe { grid-column: 1 / span X; }
.nx3e { grid-column: 1 / span X 3; }
.n2x3e { grid-column: 2 / span X 3; }
.Axe { grid-column: A / span X; }
.A2xe { grid-column: A 2 / span X; }
.Ax3e { grid-column: A / span X 3; }
.A2x3e { grid-column: A 2 / span X 3; }
.Aa { grid-column: A / span A; }
.A2a { grid-column: A 2 / span A; }
.Aa3 { grid-column: A / span A 3; }
.AXs { grid-column: A / X -2; }
.A2Xs { grid-column: A 2 / X -2; }
._Xs { grid-column: auto / X -2; }
._Xe { grid-column: auto / X 2; }
._xe { grid-column: auto / span X; }
._x3e { grid-column: auto / span X 3; }
._xa { grid-column: auto / span A; }
._xa3 { grid-column: auto / span A 3; }
._xn3 { grid-column: auto / span 3; }
._xn5 { grid-column: auto / span 5; }
.Xs_ { grid-column: X -1 / auto; }
.X2s_ { grid-column: X -2 / auto; }
.X2e_ { grid-column: X 2 / auto; }
.A_ { grid-column: A / auto; }
.A2_ { grid-column: A 2 / auto; }
.x3_ { grid-column: span X 3 / auto; }
.a2_ { grid-column: span A 2 / auto; }
.a-2_ { grid-column: span A -2 / auto; } /*intentionally invalid span*/
._n { grid-column: auto / 1; }
._n2 { grid-column: auto / 2; }
.A3Xe { grid-column: A 3 / X 2; }
.c1 { grid-column:1; grid-row:auto; background:grey; }
</style>
</head>
<body>
<div style="float:left; width:140px">
<div class="grid"><span class="XeN" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="NeX" ></span><span class="c1"></span></div>
<div class="grid"><span class="NsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="XeA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA" ></span><span class="c1"></span></div>
<div class="grid"><span class="XsA2"></span><span class="c1"></span></div>
<div class="grid"><span class="XsA3"></span><span class="c1"></span></div>
<div class="grid"><span class="AsX" ></span><span class="c1"></span></div>
<div class="grid"><span class="xsN" ></span><span class="c1"></span></div>
<div class="grid"><span class="x2sN"></span><span class="c1"></span></div>
<div class="grid"><span class="xsN2"></span><span class="c1"></span></div>
<div class="grid"><span class="xXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="aXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="xXe" ></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="AXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xe"></span><span class="c1"></span></div>
<div class="grid"><span class="XXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="XX3e"></span><span class="c1"></span></div>
<div class="grid"><span class="XbXe"></span><span class="c1"></span></div>
<div class="grid"><span class="XX0b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX1b"></span><span class="c1"></span></div>
<div class="grid"><span class="XX2b"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN1"></span><span class="c1"></span></div>
<div class="grid"><span class="XbN2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xbb" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xee" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2s"></span><span class="c1"></span></div>
<div class="grid"><span class="nXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="nXe" ></span><span class="c1"></span></div>
<div class="grid"><span class="nX2e"></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="nX3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n3Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="n4Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xen3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xea3" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa2" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xsa4" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs2a4"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a2"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs3a4"></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="nxe" ></span><span class="c1"></span></div>
<div class="grid"><span class="nx3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="n2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Axe" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="Ax3e" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2x3e"></span><span class="c1"></span></div>
<div class="grid"><span class="Aa" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2a" ></span><span class="c1"></span></div>
<div class="grid"><span class="Aa3" ></span><span class="c1"></span></div>
<div class="grid"><span class="AXs" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2Xs" ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xs" ></span><span class="c1"></span></div>
<div class="grid"><span class="_Xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="_xe" ></span><span class="c1"></span></div>
<div class="grid"><span class="_x3e" ></span><span class="c1"></span></div>
</div>
<div style="float:left; width:140px">
<div class="grid"><span class="_xa" ></span><span class="c1"></span></div>
<div class="grid"><span class="_xa3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn3"></span><span class="c1"></span></div>
<div class="grid"><span class="_xn5"></span><span class="c1"></span></div>
<div class="grid"><span class="Xs_" ></span><span class="c1"></span></div>
<div class="grid"><span class="X2s_"></span><span class="c1"></span></div>
<div class="grid"><span class="X2e_"></span><span class="c1"></span></div>
<div class="grid"><span class="A_" ></span><span class="c1"></span></div>
<div class="grid"><span class="A2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="x3_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a2_" ></span><span class="c1"></span></div>
<div class="grid"><span class="a-2_"></span><span class="c1"></span></div>
<div class="grid"><span class="_n" ></span><span class="c1"></span></div>
<div class="grid"><span class="_n2" ></span><span class="c1"></span></div>
<div class="grid"><span class="A3Xe"></span><span class="c1"></span></div>
</div>
</body>
</html>

4
layout/reftests/css-grid/reftest.list
Просмотреть файл

@ -15,6 +15,10 @@ fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
== grid-order-abspos-items-001.html grid-order-abspos-items-001-ref.html
== grid-order-placement-auto-001.html grid-order-placement-auto-001-ref.html
== grid-order-placement-definite-001.html grid-order-placement-definite-001-ref.html
skip-if(Android) == grid-placement-definite-implicit-001.html grid-placement-definite-implicit-001-ref.html
== grid-placement-definite-implicit-002.html grid-placement-definite-implicit-002-ref.html
skip-if(Android) == grid-placement-auto-implicit-001.html grid-placement-auto-implicit-001-ref.html
== grid-placement-abspos-implicit-001.html grid-placement-abspos-implicit-001-ref.html
pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-definite-001.html rtl-grid-placement-definite-001-ref.html
pref(layout.css.vertical-text.enabled,true) == rtl-grid-placement-auto-row-sparse-001.html rtl-grid-placement-auto-row-sparse-001-ref.html
pref(layout.css.vertical-text.enabled,true) == vlr-grid-placement-auto-row-sparse-001.html vlr-grid-placement-auto-row-sparse-001-ref.html