5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 <link href="resources/grid.css" rel="stylesheet">
10 grid-template-columns: 30px;
11 grid-template-rows: minmax(min-content, 40px);
15 grid-template-columns: 30px;
16 grid-template-rows: minmax(30px, min-content);
19 .firstRowFirstColumn {
21 /* Make us fit our grid area. */
26 <script src="../../resources/check-layout.js"></script>
27 <body onload="checkLayout('.gridMinMinContent'); checkLayout('.gridMaxMinContent')">
29 <p>Test that resolving minmax function with min-content on grid items works properly.</p>
31 <div class="constrainedContainer">
32 <div class="grid gridMinMinContent" style="height: 100%">
33 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="20">XXX XXX</div>
37 <div class="constrainedContainer">
38 <div class="grid gridMinMinContent">
39 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
43 <div class="constrainedContainer">
44 <div class="grid gridMinMinContent">
45 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX XXX XXX</div>
49 <div class="constrainedContainer">
50 <div class="grid gridMinMinContent" style="height: 100%">
51 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
55 <div class="constrainedContainer">
56 <div class="grid gridMinMinContent">
57 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
61 <!-- Allow the extra logical space distribution to occur. -->
62 <div style="width: 30px; height: 100px">
63 <div class="grid gridMinMinContent">
64 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XXX XXX</div>
68 <div style="width: 30px; height: 100px">
69 <div class="grid gridMinMinContent" style="height: 100%">
70 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
74 <div style="width: 30px; height: 100px">
75 <div class="grid gridMinMinContent">
76 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="40">XX XX XX XX XX XX</div>
80 <div class="constrainedContainer">
81 <div class="grid gridMaxMinContent">
82 <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
83 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>
87 <div class="constrainedContainer">
88 <div class="grid gridMaxMinContent">
89 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX XXX</div>
93 <!-- Allow the extra logical space distribution to occur. -->
95 <div style="width: 30px; height: 100px">
96 <div class="grid gridMaxMinContent">
97 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="60">XX XX XX XX XX XX</div>
101 <div style="width: 30px; height: 100px">
102 <div class="grid gridMaxMinContent">
103 <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
104 <div class="firstRowFirstColumn" data-expected-width="30" data-expected-height="30">XXX XXX</div>