3 Any copyright is dedicated to the Public Domain.
4 http://creativecommons.org/publicdomain/zero/1.0/
8 <title>CSS Grid Test: 'grid-row-gap' sideways-rl
</title>
9 <link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1227099">
10 <link rel=
"help" href=
"http://dev.w3.org/csswg/css-grid/#gutters">
11 <link rel=
"match" href=
"grid-row-gap-004-ref.html">
12 <style type=
"text/css">
14 color:black
; background-color:white
; font-size:16px; padding:0; margin:0;
19 grid-auto-flow: column
;
20 grid-auto-rows: minmax
(1px,auto
);
21 grid-template-columns: 0px 7px;
22 border: 2px solid black
;
24 writing-mode: sideways-rl
;
28 .grid :last-child { background:grey
; }
29 .grid :nth-child(2) { background:pink
; }
31 x
{ background: lime
; height:7px; }
38 document
.body
.style
.display
= "none";
41 // FIXME: When https://github.com/w3c/csswg-drafts/issues/1002 is implemented.
44 // "stretch safe end",
45 // "stretch unsafe end",
53 // FIXME: https://github.com/w3c/csswg-drafts/issues/1002
54 // "space-between end",
55 // "space-between start",
56 // "space-between safe end",
58 // FIXME: https://github.com/w3c/csswg-drafts/issues/1002
59 // "space-around center",
60 // "space-around right",
61 // "space-around safe right",
62 // "space-around left",
64 // "space-evenly end",
66 var rows
= [ "0", "1", "2", "3", "8", "9" ];
67 var heights
= [ "auto", "0", "1", "5", "6" ];
68 var gaps
= [ "1", "2" ];
69 for (var j
= 0; j
< align
.length
; ++j
) {
70 // document.body.appendChild(document.createTextNode(align[j])); // for debugging
71 var chunk
= document
.createElement('div');
72 chunk
.setAttribute("style", "border:1px solid; padding:2px 10px; overflow:hidden; float:left;");
73 for (var c
= 0; c
< rows
.length
; ++c
) {
74 for (var w
= 0; w
< heights
.length
; ++w
) {
75 // set this to true if you want to see all tests
76 var run_test
= heights
[w
] == "auto" || heights
[w
] < rows
[c
] || rows
[c
] == 0 || rows
[c
] == 1;
78 for (var g
= 0; g
< gaps
.length
; ++g
) {
79 var grid
= document
.createElement('div');
80 if (heights
[w
] != "auto")
81 grid
.style
.width
= heights
[w
]+"px";
82 grid
.style
.gridRowGap
= gaps
[g
]+"px";
83 grid
.className
= "grid";
84 grid
.style
.alignContent
= align
[j
];
85 var span
= document
.createElement('span');
86 span
.style
.gridRow
= "1 / span " + rows
[c
];
87 grid
.appendChild(span
);
88 for (var x
= 0; x
< rows
[c
]; ++x
) {
89 grid
.appendChild(document
.createElement('x'));
91 chunk
.appendChild(grid
);
96 document
.body
.appendChild(chunk
);
98 document
.body
.style
.display
= "";