3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Test: Testing definite placement of grid items with 'order'
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1107786">
10 <link rel=
"help" href=
"http://dev.w3.org/csswg/css-grid/#auto-placement-algo">
11 <link rel=
"help" href=
"http://dev.w3.org/csswg/css-flexbox-1/#order-property">
12 <link rel=
"match" href=
"grid-order-placement-definite-001-ref.html">
13 <style type=
"text/css">
14 body
,html
{ color:black
; background:white
; font-size:12px; padding:0; margin:0; }
19 grid-template-columns: 20px 20px 20px 20px;
20 grid-template-rows: 20px;
21 padding: 17px 7px 11px 13px;
26 .a { order:4; grid-column-start:4; grid-row-start:1; width: 40px; background:lime
; }
27 .b { order:3; grid-column-start:3; grid-row-start:1; width: 60px; background:pink
; }
28 .c { order:2; grid-column-start:2; grid-row-start:1; width: 80px; background:yellow
; }
29 .d { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:silver
; }
30 .e { order:1; grid-column-start:1; grid-row-start:1; width: 100px; background:red
; }
36 .f2 { background:white
; }
37 .f2 span { opacity: 0.5; }
38 .f2 span.e { display:none
; }
46 <span class=
"a">a
</span>
47 <span class=
"b">b
</span>
48 <span class=
"c">c
</span>
49 <span class=
"e"></span>
50 <span class=
"d">d
</span>
54 <span class=
"e"></span>
55 <span class=
"d">d
</span>
56 <span class=
"b">b
</span>
57 <span class=
"c">c
</span>
58 <span class=
"a">a
</span>
64 var f
= document
.querySelector('f');
65 var f2
= f
.cloneNode(true);
67 document
.body
.appendChild(f2
);