products/Sources/formale Sprachen/C/Firefox/layout/reftests/css-grid/grid-row-gap-002.html
<!
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 Grid Test:
'grid-row-gap' </
title >
<
link rel=
"author" title =
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1227099 " >
<
link rel=
"help" href=
"http://dev.w3.org/csswg/css-grid/#gutters " >
<
link rel=
"match" href=
"grid-row-gap-002-ref.html" >
<
style type=
"text/css" >
html ,
body {
color:black; background-color:white; font-size:16px; padding:0; margin:0;
}
.grid {
display: grid;
grid-auto-flow: column;
grid-auto-rows: minmax(1px,auto);
grid-template-columns: 0px 7px;
border: 2px solid black;
float: left;
}
.grid :last-child { background:grey; }
.grid :nth-child(2) { background:pink; }
x { background: lime; width:7px; }
</
style >
</
head >
<
body >
<
script >
document.
body .
style .display =
"none" ;
var align = [
"stretch" ,
// FIXME: When
https://github.com/w3c/csswg-drafts/issues/1002 is implemented.
//
"stretch end" ,
//
"stretch center" ,
//
"stretch safe end" ,
//
"stretch unsafe end" ,
"safe start" ,
"safe end" ,
"safe center" ,
"unsafe start" ,
"unsafe end" ,
"unsafe center" ,
"space-between" ,
// FIXME:
https://github.com/w3c/csswg-drafts/issues/1002
//
"space-between end" ,
//
"space-between start" ,
//
"space-between safe end" ,
"space-around" ,
// FIXME:
https://github.com/w3c/csswg-drafts/issues/1002
//
"space-around center" ,
//
"space-around right" ,
//
"space-around safe right" ,
//
"space-around left" ,
"space-evenly" ,
//
"space-evenly end" ,
];
var rows = [
"0" ,
"1" ,
"2" ,
"3" ,
"8" ,
"9" ];
var heights = [
"auto" ,
"0" ,
"1" ,
"5" ,
"6" ];
var gaps = [
"1" ,
"2" ];
for (
var j = 0; j < align.length; ++j) {
// document.
body .appendChild(document.createTextNode(align[j])); // for debugging
var chunk = document.createElement(
'div' );
chunk.setAttribute(
"style" ,
"border:1px solid; padding:2px 10px; overflow:hidden" );
for (var c = 0; c < rows.length; ++c) {
for (var w = 0; w < heights.length; ++w) {
// set this to true if you want to see all tests
var run_test = heights[w] == "auto" || heights[w] < rows[c] || rows[c] == 0 || rows[c] == 1;
if (run_test) {
for (var g = 0; g < gaps.length; ++g) {
var grid = document.createElement('div' );
if (heights[w] != "auto" )
grid.style .height = heights[w]+"px" ;
grid.style .gridRowGap = gaps[g]+"px" ;
grid.className = "grid" ;
grid.style .alignContent = align[j];
var span = document.createElement('span' );
span .style .gridRow = "1 / span " + rows[c];
grid.appendChild(span );
for (var x = 0; x < rows[c]; ++x) {
grid.appendChild(document.createElement('x' ));
}
chunk.appendChild(grid);
}
}
}
}
document.body .appendChild(chunk);
}
document.body .style .display = "" ;
</script >
</body >
</html >
Messung V0.5 C=96 H=99 G=97
¤ Dauer der Verarbeitung: 0.10 Sekunden
(vorverarbeitet)
¤
*© Formatika GbR, Deutschland