mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1228984 - [css-grid] Add more auto-placement tests.
The added tests are based on the original testcases contributed by Manuel Rego Casasnovas <rego@igalia.com> in bug 1228984 and bug 1229009.
This commit is contained in:
Mats Palmgren
parent
148ced7ad0
commit
7f9434d8b0
@ -1,14 +1,27 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: grid item auto placement: column dense</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
height: 60px;
|
||||
border: 1px solid green;
|
||||
position: relative;
|
||||
font-size: 12px;
|
||||
}
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
@ -18,6 +31,10 @@ span {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
x {
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.test1 .a {
|
||||
top: 0;
|
||||
@ -195,5 +212,22 @@ span {
|
||||
<span class="test6e">e</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 1 -->
|
||||
<div class="grid2">
|
||||
<x style="grid-column: 1; grid-row: 1 / 3">1</x>
|
||||
<x style="grid-column: 2; grid-row: 1">2</x>
|
||||
<x style="grid-column: 3; grid-row: span 2">3</x>
|
||||
<x style="grid-column: 2; grid-row: 2">4</x>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 2 with "column dense" -->
|
||||
<div class="grid2">
|
||||
<x style="grid-column: 1; grid-row: 1 / 3">1</x>
|
||||
<x style="grid-column: 2; grid-row: 2 / 4">2</x>
|
||||
<x style="grid-column: 3; grid-row: 1 / 4">3</x>
|
||||
<x style="grid-column: 1; grid-row: 3">4</x>
|
||||
<x style="grid-column: 2; grid-row: 1">5</x>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: grid item auto placement: column dense</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
|
||||
<link rel="match" href="grid-placement-auto-col-dense-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
border: 1px solid green;
|
||||
@ -11,7 +20,13 @@
|
||||
grid-auto-flow: dense column;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
grid-auto-flow: column dense;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
span {
|
||||
@ -133,5 +148,22 @@ span {
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 1 -->
|
||||
<div class="grid2">
|
||||
<span style="grid-column: 1; grid-row: 1 / 3">1</span>
|
||||
<span style="grid-column: 2; grid-row: 1">2</span>
|
||||
<span style="grid-row: span 2">3</span>
|
||||
<span style="grid-row: 2">4</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 2 with "column dense" -->
|
||||
<div class="grid2">
|
||||
<span style="grid-row: 1 / 3">1</span>
|
||||
<span style="grid-row: 2 / 4">2</span>
|
||||
<span style="grid-row: 1 / 4">3</span>
|
||||
<span style="">4</span>
|
||||
<span style="">5</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: grid item auto placement: row dense</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
height: 60px;
|
||||
border: 1px solid green;
|
||||
@ -10,6 +17,14 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
grid-auto-flow: row dense;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
background: lime;
|
||||
@ -19,6 +34,11 @@ span {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
x {
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
.test1 .a {
|
||||
top: 0;
|
||||
left: 20px;
|
||||
@ -193,5 +213,39 @@ span {
|
||||
<span class="test6e">e</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 2 -->
|
||||
<div class="grid2">
|
||||
<x style="grid-row: 1 / 3">1</x>
|
||||
<x style="grid-row: 2 / 4">2</x>
|
||||
<x style="grid-row: 1 / 4">3</x>
|
||||
<x style="">4</x>
|
||||
<x style="">5</x>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 1: with "row dense" -->
|
||||
<div class="grid2">
|
||||
<x style="grid-column: 1; grid-row: 1 / 3">1</x>
|
||||
<x style="grid-column: 2; grid-row: 1">2</x>
|
||||
<x style="grid-row: span 2">3</x>
|
||||
<x style="grid-row: 2">4</x>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 2 -->
|
||||
<div class="grid2">
|
||||
<x style="grid-column: 1 / 3; grid-row: 1;">1</x>
|
||||
<x style="grid-column: 1; grid-row: 2;">2</x>
|
||||
<x style="grid-column: span 2; grid-row: 3;">3</x>
|
||||
<x style="grid-column: 2; grid-row: 2;">4</x>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 3 -->
|
||||
<div class="grid2">
|
||||
<x style="grid-row: 1 / 3">1</x>
|
||||
<x style="grid-row: 2 / 4">2</x>
|
||||
<x style="grid-row: 1 / 4">3</x>
|
||||
<x style="">4</x>
|
||||
<x style="">5</x>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: grid item auto placement: row dense</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
|
||||
<link rel="match" href="grid-placement-auto-row-dense-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
border: 1px solid green;
|
||||
@ -11,7 +20,14 @@
|
||||
grid-auto-flow: dense row;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
grid-auto-flow: row dense;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
span {
|
||||
@ -132,5 +148,40 @@ span {
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 2 -->
|
||||
<div class="grid2">
|
||||
<span style="grid-row: 1 / 3">1</span>
|
||||
<span style="grid-row: 2 / 4">2</span>
|
||||
<span style="grid-row: 1 / 4">3</span>
|
||||
<span style="">4</span>
|
||||
<span style="">5</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 1: with "row dense" -->
|
||||
<div class="grid2">
|
||||
<span style="grid-column: 1; grid-row: 1 / 3">1</span>
|
||||
<span style="grid-column: 2; grid-row: 1">2</span>
|
||||
<span style="grid-row: span 2">3</span>
|
||||
<span style="grid-row: 2">4</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 2 -->
|
||||
<div class="grid2">
|
||||
<span style="grid-column: 1 / 3; grid-row: 1;">1</span>
|
||||
<span style="grid-column: 1; grid-row: 2;">2</span>
|
||||
<span style="grid-column: span 2;">3</span>
|
||||
<span style="grid-column: 2;">4</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1228984 test 3 -->
|
||||
<div class="grid2">
|
||||
<span style="grid-row: 1 / 3">1</span>
|
||||
<span style="grid-row: 2 / 4">2</span>
|
||||
<span style="grid-row: 1 / 4">3</span>
|
||||
<span style="">4</span>
|
||||
<span style="">5</span>
|
||||
</div>
|
||||
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,15 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>Reference: grid item auto placement: row sparse</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
height: 60px;
|
||||
border: 1px solid green;
|
||||
@ -10,6 +17,18 @@
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
x {
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
background: lime;
|
||||
@ -195,5 +214,13 @@ span {
|
||||
<span class="test6e">e</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1229009 -->
|
||||
<div class="grid2">
|
||||
<x style="grid-column: 2; grid-row: 1;">1</x>
|
||||
<x style="grid-column: 1; grid-row: 2;">2</x>
|
||||
<x style="grid-column: 3; grid-row: 1 / 3;">3</x>
|
||||
<x style="grid-column: 2; grid-row: 2;">4</x>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
@ -1,8 +1,17 @@
|
||||
<!DOCTYPE HTML>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html><head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<style type="text/css">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: grid item auto placement: row sparse</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107778">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-grid/#auto-placement-algo">
|
||||
<link rel="match" href="grid-placement-auto-row-sparse-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:12px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
border: 1px solid green;
|
||||
@ -11,7 +20,13 @@
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.grid2 {
|
||||
display: grid;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
border: 1px solid green;
|
||||
}
|
||||
|
||||
span {
|
||||
@ -133,5 +148,13 @@ span {
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<!-- bug 1229009 -->
|
||||
<div class="grid2">
|
||||
<span style="grid-column: 2; grid-row: 1;">1</span>
|
||||
<span style="grid-column: 1; grid-row: 2;">2</span>
|
||||
<span style="grid-row: 1 / 3;">3</span>
|
||||
<span style="grid-row: 2;">4</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user