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