mirror of
https://gitlab.winehq.org/wine/wine-gecko.git
synced 2024-09-13 09:24:08 -07:00
Bug 1107786 - part 4, [css-grid] Reftests for the CSS 'order' property on grid items.
This commit is contained in:
Mats Palmgren
parent
2d05817adb
commit
74215cc96c
148
layout/reftests/css-grid/grid-order-abspos-items-001-ref.html
Normal file
148
layout/reftests/css-grid/grid-order-abspos-items-001-ref.html
Normal file
@ -0,0 +1,148 @@
|
||||
<!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 layout and painting of abs.pos. grid items with 'order'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
/*display: grid;*/
|
||||
position: relative;
|
||||
grid-template-columns: 20px 20px 20px 20px;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 23px;
|
||||
grid-auto-rows: 17px;
|
||||
padding: 17px 7px 11px 13px;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.a { z-index:4; left:74px; right:5px; background:lime; }
|
||||
.b { z-index:3; left:54px; right:5px; background:pink; }
|
||||
.c { z-index:2; left:34px; right:5px; background:yellow; }
|
||||
.d { z-index:1; left:14px; right:5px; background:silver; }
|
||||
.e { display:none; }
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top:3px; bottom:1px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: lime;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.z-1 { z-index:-1; }
|
||||
.z1 { z-index:11; }
|
||||
.z1.b { z-index:12; }
|
||||
.z2 { z-index:13; }
|
||||
.z3 { z-index:14; }
|
||||
.z4 { z-index:15; }
|
||||
x { background:black; order:99; float:right; }
|
||||
f { float:left; }
|
||||
.f2 { background:white; }
|
||||
.f2 span { opacity: 0.5; }
|
||||
.f2 span.e { z-index:-1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<f>
|
||||
|
||||
<div class="grid">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs b">b</span>
|
||||
<span class="abs c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; order:2">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs c">c</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid; order:1">
|
||||
<div style="order:2">
|
||||
<span class="abs b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs z1 b">b</span>
|
||||
<span class="abs z2 c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs z1 b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs z1 c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; order:2">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs z2 c">c</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid; order:1">
|
||||
<div style="order:2">
|
||||
<span class="abs z1 b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs z-1 d">FAIL<x>x</x></span>
|
||||
<span class="abs z1 d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</f>
|
||||
|
||||
<script>
|
||||
var f = document.querySelector('f');
|
||||
var f2 = f.cloneNode(true);
|
||||
f2.className = 'f2';
|
||||
document.body.appendChild(f2);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
150
layout/reftests/css-grid/grid-order-abspos-items-001.html
Normal file
150
layout/reftests/css-grid/grid-order-abspos-items-001.html
Normal file
@ -0,0 +1,150 @@
|
||||
<!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 layout and painting of abs.pos. grid items with 'order'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#abspos-items">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
|
||||
<link rel="match" href="grid-order-abspos-items-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-columns: 20px 20px 20px 20px;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 23px;
|
||||
grid-auto-rows: 17px;
|
||||
padding: 17px 7px 11px 13px;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.a { order:4; grid-column-start:4; background:lime; }
|
||||
.b { order:3; grid-column-start:3; background:pink; }
|
||||
.c { order:2; grid-column-start:2; background:yellow; }
|
||||
.d { order:1; grid-column-start:1; background:silver; }
|
||||
.e { order:1; grid-column-start:1; background:red; }
|
||||
|
||||
.abs {
|
||||
position: absolute;
|
||||
top:3px; left:1px; right:5px; bottom:1px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: lime;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.z-1 { z-index:-1; }
|
||||
.z1 { z-index:1; }
|
||||
.z2 { z-index:2; }
|
||||
.z3 { z-index:3; }
|
||||
.z4 { z-index:4; }
|
||||
x { background:black; order:99; float:right; }
|
||||
f { float:left; }
|
||||
.f2 { background:white; }
|
||||
.f2 span { opacity: 0.5; }
|
||||
.f2 span.e { z-index:-1; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<f>
|
||||
|
||||
<div class="grid">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs b">b</span>
|
||||
<span class="abs c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; order:2">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs c">c</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid; order:1">
|
||||
<div style="order:2">
|
||||
<span class="abs b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs z1 b">b</span>
|
||||
<span class="abs z2 c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
<span class="abs z1 b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs z1 c">c</span>
|
||||
<span class="abs e">FAIL<x>x</x></span>
|
||||
<span class="abs d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<div style="display:grid; order:2">
|
||||
<div style="order:2">
|
||||
<span class="abs a">a</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs z2 c">c</span>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:grid; order:1">
|
||||
<div style="order:2">
|
||||
<span class="abs z1 b">b</span>
|
||||
</div>
|
||||
<div style="order:1">
|
||||
<span class="abs z-1 d">FAIL<x>x</x></span>
|
||||
<span class="abs z1 d">d<x>x</x></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</f>
|
||||
|
||||
<script>
|
||||
var f = document.querySelector('f');
|
||||
var f2 = f.cloneNode(true);
|
||||
f2.className = 'f2';
|
||||
document.body.appendChild(f2);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
203
layout/reftests/css-grid/grid-order-placement-auto-001-ref.html
Normal file
203
layout/reftests/css-grid/grid-order-placement-auto-001-ref.html
Normal file
@ -0,0 +1,203 @@
|
||||
<!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 automatic placement of grid items with 'order'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
|
||||
<style type="text/css">
|
||||
.grid {
|
||||
height: 60px;
|
||||
border: 1px solid green;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span {
|
||||
position: absolute;
|
||||
background: lime;
|
||||
border: 1px solid black;
|
||||
box-sizing: border-box;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.test1 .a {
|
||||
top: 0;
|
||||
left: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.test1 .b {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.test1 .c {
|
||||
top: 0;
|
||||
left: 80px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
.test1 .e {
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
.test1 .d2 {
|
||||
top: 0px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.test2 .a {
|
||||
top: 0;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.test2 .b {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
.test2 .c {
|
||||
top: 0;
|
||||
left: 80px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
.test2 .e {
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
.test2 .d2 {
|
||||
top: 20px;
|
||||
left: 40px;
|
||||
}
|
||||
|
||||
.test3 .a {
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
.test3 .b {
|
||||
top: 40px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.test3 .c {
|
||||
top: 60px;
|
||||
left: 0px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
.test3 .d { top: 0px; left:60px; }
|
||||
.test3 .e {
|
||||
top: 20px;
|
||||
left: 60px;
|
||||
}
|
||||
.test3 .d2 {
|
||||
top: 40px;
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
.test4 .c {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 40px;
|
||||
}
|
||||
.test4 .d { top: 0px; }
|
||||
.test4 .e {
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
.test4 .d2 {
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.test5 .c {
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
width: 60px;
|
||||
height: 20px;
|
||||
}
|
||||
.test5 .e {
|
||||
top: 20px;
|
||||
left: 0px;
|
||||
}
|
||||
.test5 .d2 {
|
||||
top: 0px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.test6 { left: 0px; top: 20px;}
|
||||
.test6d2 {
|
||||
top: 20px;
|
||||
left: 140px;
|
||||
}
|
||||
.test6e {
|
||||
top: 20px;
|
||||
left: 160px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid test1">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d2">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test2">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d2">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test3" style="height:100px">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d2">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test4">
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d2">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test5">
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d2">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test1">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="test6">d</span>
|
||||
<span class="test6d2">D</span>
|
||||
<span class="test6e">e</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
155
layout/reftests/css-grid/grid-order-placement-auto-001.html
Normal file
155
layout/reftests/css-grid/grid-order-placement-auto-001.html
Normal file
@ -0,0 +1,155 @@
|
||||
<!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 automatic placement of grid items with 'order'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
|
||||
<link rel="match" href="grid-order-placement-auto-001-ref.html">
|
||||
<style type="text/css">
|
||||
.grid {
|
||||
display: grid;
|
||||
border: 1px solid green;
|
||||
grid-template-columns: 20px 20px 20px 20px;
|
||||
grid-template-rows: 20px 20px 20px;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 20px;
|
||||
grid-auto-rows: 20px;
|
||||
}
|
||||
|
||||
span {
|
||||
background: lime;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.test1 .a {
|
||||
grid-row: 1;
|
||||
grid-column: 2 / span 1;
|
||||
}
|
||||
.test1 .b {
|
||||
grid-row: 2;
|
||||
grid-column: 2 / span 3;
|
||||
order: 3;
|
||||
}
|
||||
.test1 .c, .test2 .c {
|
||||
grid-row: 1 / span 2;
|
||||
grid-column: auto / span 3;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.test2 .a {
|
||||
grid-row: 1;
|
||||
grid-column: 2 / span 3;
|
||||
order: 3;
|
||||
}
|
||||
.test2 .b {
|
||||
grid-row: 2;
|
||||
grid-column: 2 / span 1;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.test3 {
|
||||
grid-template-areas:
|
||||
'a a a . '
|
||||
'a a a . '
|
||||
'. b b . '
|
||||
;
|
||||
}
|
||||
.test3 .a {
|
||||
grid-area: a;
|
||||
order: 5;
|
||||
}
|
||||
.test3 .b {
|
||||
grid-column: 2 / span 3;
|
||||
grid-row: b;
|
||||
order: 4;
|
||||
}
|
||||
.test3 .c {
|
||||
grid-row: auto / span 2;
|
||||
grid-column: auto / span 3;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.test4 .c {
|
||||
grid-row: auto / span 2;
|
||||
grid-column: auto / span 3;
|
||||
order: 3;
|
||||
}
|
||||
|
||||
.test5 .c {
|
||||
grid-row-start: 2;
|
||||
grid-column: auto / span 3;
|
||||
order: 2;
|
||||
}
|
||||
|
||||
.test6 {
|
||||
grid-row-start: 2;
|
||||
grid-column: auto / span X;
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.e {
|
||||
grid-row-start: 2;
|
||||
grid-column: auto / span 1;
|
||||
order: 1;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="grid test1">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test2">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test3">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test4">
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test5">
|
||||
<span class="c">c</span>
|
||||
<span class="d">d</span>
|
||||
<span class="d">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
<div class="grid test1">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="test6">d</span>
|
||||
<span class="test6">D</span>
|
||||
<span class="e">e</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
<!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 of grid items with 'order'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
/*display: grid;*/
|
||||
position: relative;
|
||||
grid-template-columns: 20px 20px 20px 20px;
|
||||
grid-auto-flow: row;
|
||||
grid-auto-columns: 23px;
|
||||
grid-auto-rows: 17px;
|
||||
padding: 17px 7px 11px 11px;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.a { left:73px; right:3px; background:lime; }
|
||||
.b { left:53px; right:3px; background:pink; }
|
||||
.c { left:33px; right:3px; background:yellow; }
|
||||
.d { left:13px; right:3px; background:silver; }
|
||||
|
||||
span {
|
||||
position:absolute;
|
||||
border: 1px solid;
|
||||
height: 18px;
|
||||
}
|
||||
|
||||
x { background:black; order:99; float:right; }
|
||||
.f2 { background:white; }
|
||||
.f2 span { opacity: 0.5; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<f>
|
||||
|
||||
<div class="grid">
|
||||
<span class="d">d</span>
|
||||
<span class="c">c</span>
|
||||
<span class="b">b</span>
|
||||
<span class="a">a</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="d">d</span>
|
||||
<span class="c">c</span>
|
||||
<span class="b">b</span>
|
||||
<span class="a">a</span>
|
||||
</div>
|
||||
|
||||
</f>
|
||||
|
||||
<script>
|
||||
var f = document.querySelector('f');
|
||||
var f2 = f.cloneNode(true);
|
||||
f2.className = 'f2';
|
||||
document.body.appendChild(f2);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,71 @@
|
||||
<!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 of grid items with 'order'</title>
|
||||
<link rel="author" title="Mats Palmgren" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
|
||||
<link rel="help" href="http://dev.w3.org/csswg/css-flexbox-1/#order-property">
|
||||
<link rel="match" href="grid-order-placement-definite-001-ref.html">
|
||||
<style type="text/css">
|
||||
body,html { color:black; background:white; font-size:16px; padding:0; margin:0; }
|
||||
|
||||
.grid {
|
||||
display: grid;
|
||||
position: relative;
|
||||
grid-template-columns: 20px 20px 20px 20px;
|
||||
grid-template-rows: 20px;
|
||||
padding: 17px 7px 11px 13px;
|
||||
width: 100px;
|
||||
height: 25px;
|
||||
}
|
||||
|
||||
.a { order:4; grid-column-start:4; grid-row-start:1; width: 40px; background:lime; }
|
||||
.b { order:3; grid-column-start:3; grid-row-start:1; width: 60px; background:pink; }
|
||||
.c { order:2; grid-column-start:2; grid-row-start:1; width: 80px; background:yellow; }
|
||||
.d { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:silver; }
|
||||
.e { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:red; }
|
||||
|
||||
span {
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.f2 { background:white; }
|
||||
.f2 span { opacity: 0.5; }
|
||||
.f2 span.e { display:none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<f>
|
||||
|
||||
<div class="grid">
|
||||
<span class="a">a</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="e"></span>
|
||||
<span class="d">d</span>
|
||||
</div>
|
||||
|
||||
<div class="grid">
|
||||
<span class="e"></span>
|
||||
<span class="d">d</span>
|
||||
<span class="b">b</span>
|
||||
<span class="c">c</span>
|
||||
<span class="a">a</span>
|
||||
</div>
|
||||
|
||||
</f>
|
||||
|
||||
<script>
|
||||
var f = document.querySelector('f');
|
||||
var f2 = f.cloneNode(true);
|
||||
f2.className = 'f2';
|
||||
document.body.appendChild(f2);
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -12,3 +12,6 @@ fails == grid-whitespace-handling-1b.xhtml grid-whitespace-handling-1-ref.xhtml
|
||||
== grid-track-sizing-001.html grid-track-sizing-001-ref.html
|
||||
== grid-abspos-items-001.html grid-abspos-items-001-ref.html
|
||||
== grid-abspos-items-002.html grid-abspos-items-002-ref.html
|
||||
== 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
|
||||
|
||||
Loading…
Reference in New Issue
Block a user