<!
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: Testing
track distribution rounding errors</
title>
<
link rel=
"author" title=
"Mats Palmgren" href=
"https://bugzilla.mozilla.org/show_bug.cgi?id=1151214">
<
link rel=
"help" href=
"https://drafts.csswg.org/css-align-3/#propdef-justify-content">
<
link rel=
"match" href=
"grid-justify-content-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-columns: minmax(
1px,auto);
grid-template-rows:
0px
7px;
border:
1px solid blue;
}
.stretch { justify-content: stretch; }
/* I don
't know how to make a reference for these so they are only included to
trigger possible assertions: */
.space-between { justify-content: space-between; visibility:hidden; }
.space-around { justify-content: space-around; visibility:hidden; }
.space-evenly { justify-content: space-evenly; visibility:hidden; }
.grid :last-child, .grid :nth-child(
2) { background:black; }
x { background: lime; height:
7px; }
</
style>
</
head>
<
body>
<
script>
var justify = [
"stretch",
"space-between",
"space-around",
"space-evenly" ];
var cols = [
"151",
"1" ];
var widths = [
"151",
"152",
"153",
"154",
"155",
"156",
"157",
"158",
"159",
"160",
"161",
"301",
"302",
"303",
"304",
"305",
"306",
"307",
"308",
"309",
"310",
"311" ];
for (
var c =
0; c < cols.length; ++c) {
var chunk = document.createElement(
'div');
chunk.setAttribute(
"style",
"float:left; margin:1px");
for (
var j =
0; j < justify.length; ++j) {
for (
var w =
0; w < widths.length; ++w) {
var grid = document.createElement(
'div');
grid.
style.width = widths[w]+
"px";
grid.className =
"grid " + justify[j];
var span = document.createElement(
'span');
span.
style.gridColumn =
"1 / span " + cols[c];
grid.appendChild(
span);
for (
var x =
0; x < cols[c]; ++x) {
grid.appendChild(document.createElement(
'x'));
}
chunk.appendChild(grid);
}
}
document.
body.appendChild(chunk);
}
document.
body.
style.display =
"";
</
script>
</
body>
</
html>
