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