2 <link href=
"resources/grid.css" rel=
"stylesheet">
5 grid:
150px /
100px
100px;
9 #fromStretch { justify-items: stretch; }
10 #toStretch { justify-items: end; }
12 <script src=
"../../resources/check-layout.js"></script>
13 <p>Tests how a justify-items style change requires a relayout of the grid and previously stretched items.
</p>
14 <p>The grid bellow had initially 'justify-items: end' and was changed to 'stretch'.
</p>
15 <div id=
"toStretch" class=
"grid">
16 <div style=
"height: 50px;" class=
"firstRowFirstColumn" data-expected-width=
"150" data-offset-x=
"0">
17 <div style=
"width: 50px;"></div>
19 <div style=
"height: 50px;" class=
"secondRowFirstColumn" data-expected-width=
"150" data-offset-x=
"0">
20 <div style=
"width: 100px;"></div>
23 <p>The grid bellow was initially stretched and it has now 'justify-items: center'.
</p>
24 <div id=
"fromStretch" class=
"grid">
25 <div style=
"height: 50px;" class=
"firstRowFirstColumn" data-expected-width=
"50" data-offset-x=
"50">
26 <div style=
"width: 50px;"></div>
28 <div style=
"height: 50px;" class=
"secondRowFirstColumn" data-expected-width=
"100" data-offset-x=
"25">
29 <div style=
"width: 100px;"></div>
33 document
.body
.offsetLeft
;
34 document
.getElementById("toStretch").style
.justifyItems
= "stretch";
35 document
.getElementById("fromStretch").style
.justifyItems
= "center";