2 <link href=
"resources/grid.css" rel=
"stylesheet">
5 grid:
150px /
100px
100px;
9 .fromStretch { justify-self: stretch; }
10 .toStretch { justify-self: end; }
12 <script src=
"../../resources/check-layout.js"></script>
13 <p>Tests how a justify-self style change requires a relayout of the grid and previously stretched items.
</p>
14 <p>The grid bellow had initially 'justify-self: end' and was changed to 'stretch'.
</p>
16 <div style=
"height: 50px;" class=
"toStretch firstRowFirstColumn" data-expected-width=
"150" data-offset-x=
"0">
17 <div style=
"width: 50px;"></div>
19 <div style=
"height: 50px;" class=
"toStretch 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-self: center'.
</p>
25 <div style=
"height: 50px;" class=
"fromStretch firstRowFirstColumn" data-expected-width=
"50" data-offset-x=
"50">
26 <div style=
"width: 50px;"></div>
28 <div style=
"height: 50px;" class=
"fromStretch secondRowFirstColumn" data-expected-width=
"100" data-offset-x=
"25">
29 <div style=
"width: 100px;"></div>
33 document
.body
.offsetLeft
;
34 document
.getElementsByClassName('toStretch')[0].style
.justifySelf
= 'stretch';
35 document
.getElementsByClassName('toStretch')[1].style
.justifySelf
= 'stretch';
36 document
.getElementsByClassName('fromStretch')[0].style
.justifySelf
= 'center';
37 document
.getElementsByClassName('fromStretch')[1].style
.justifySelf
= 'center';