3 <link href=
"resources/grid.css" rel=
"stylesheet">
11 grid-template-columns:
30px;
12 grid-template-rows: minmax(
20px,
80px)
160px;
16 grid-template-columns:
30px;
17 grid-template-rows: minmax(
50%,
120px) minmax(
20px,
40%);
21 grid-template-columns:
30px;
22 /* Overlapping range. */
23 grid-template-rows: minmax(
10px,
180px) minmax(
30px,
150px);
27 grid-template-columns:
30px;
28 grid-template-rows: minmax(
20px,
80px)
60px;
29 -webkit-writing-mode: vertical-rl;
33 grid-template-columns:
30px;
34 /*
90%
> 80px,
80px should be ignored. */
35 grid-template-rows: minmax(
90%,
80px) minmax(
10px,
60%);
36 -webkit-writing-mode: vertical-lr;
40 /* Overlapping range. */
41 grid-template-columns:
30px;
42 grid-template-rows: minmax(
10px,
180px) minmax(
30px,
150px);
43 -webkit-writing-mode: horizontal-bt;
46 .firstRowFirstColumn {
51 .secondRowFirstColumn {
56 <script src=
"../../resources/check-layout.js"></script>
57 <body onload=
"checkLayout('.grid')">
59 <p><a href=
"https://webkit.org/b/104700">Bug
104700<a>: [CSS Grid Layout] Implement grid items sizing for fixed minmax grid tracks
</p>
60 <p>Checks that a grid element with fixed minmax properly compute the logical height in several writing-mode.
</p>
62 <div class=
"grid" id=
"grid1" data-expected-width=
"100" data-expected-height=
"200">
63 <div class=
"firstRowFirstColumn" data-expected-height=
"40" data-expected-width=
"30"></div>
64 <div class=
"secondRowFirstColumn" data-expected-height=
"160" data-expected-width=
"30"></div>
67 <div class=
"grid" id=
"grid2" data-expected-width=
"100" data-expected-height=
"200">
68 <div class=
"firstRowFirstColumn" data-expected-height=
"120" data-expected-width=
"30"></div>
69 <div class=
"secondRowFirstColumn" data-expected-height=
"80" data-expected-width=
"30"></div>
72 <div class=
"grid" id=
"grid3" data-expected-width=
"100" data-expected-height=
"200">
73 <div class=
"firstRowFirstColumn" data-expected-height=
"90" data-expected-width=
"30"></div>
74 <div class=
"secondRowFirstColumn" data-expected-height=
"110" data-expected-width=
"30"></div>
77 <div class=
"grid" id=
"grid4" data-expected-width=
"100" data-expected-height=
"200">
78 <div class=
"firstRowFirstColumn" data-expected-height=
"30" data-expected-width=
"40"></div>
79 <div class=
"secondRowFirstColumn" data-expected-height=
"30" data-expected-width=
"60"></div>
82 <div class=
"grid" id=
"grid5" data-expected-width=
"100" data-expected-height=
"200">
83 <div class=
"firstRowFirstColumn" data-expected-height=
"30" data-expected-width=
"90"></div>
84 <div class=
"secondRowFirstColumn" data-expected-height=
"30" data-expected-width=
"10"></div>
87 <div class=
"grid" id=
"grid6" data-expected-width=
"100" data-expected-height=
"200">
88 <div class=
"firstRowFirstColumn" data-expected-height=
"90" data-expected-width=
"30"></div>
89 <div class=
"secondRowFirstColumn" data-expected-height=
"110" data-expected-width=
"30"></div>