5 testRunner.overridePreference("WebKitCSSGridLayoutEnabled", 1);
7 <link href="resources/grid.css" rel="stylesheet">
10 grid-definition-columns: 20px;
11 grid-definition-rows: minmax(max-content, 50px);
15 grid-definition-columns: 20px;
16 grid-definition-rows: minmax(30px, max-content);
19 .firstRowFirstColumn {
21 /* Make us fit our grid area. */
27 -webkit-writing-mode: vertical-rl;
30 <script src="../../resources/check-layout.js"></script>
31 <body onload="checkLayout('.gridMinMaxContent'); checkLayout('.gridMaxMaxContent')">
33 <p>Test that resolving minmax function with max-content on grid items works properly.</p>
35 <div class="constrainedContainer">
36 <div class="grid gridMinMaxContent">
37 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
41 <div class="constrainedContainer">
42 <div class="grid gridMinMaxContent">
43 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
47 <div class="constrainedContainer">
48 <div class="grid gridMinMaxContent">
49 <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
50 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
54 <!-- Allow the extra logical space distribution to occur. -->
55 <div style="width: 10px; height: 100px;">
56 <div class="grid gridMinMaxContent">
57 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
61 <div style="width: 10px; height: 100px;">
62 <div class="grid gridMinMaxContent">
63 <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
64 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
68 <div class="constrainedContainer">
69 <div class="grid gridMaxMaxContent">
70 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX</div>
74 <div class="constrainedContainer">
75 <div class="grid gridMaxMaxContent">
76 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
80 <div class="constrainedContainer">
81 <div class="grid gridMaxMaxContent">
82 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
86 <!-- Allow the extra logical space distribution to occur. -->
88 <div style="width: 100px; height: 20px">
89 <div class="grid gridMaxMaxContent">
90 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
94 <div style="width: 100px; height: 20px">
95 <div class="grid gridMaxMaxContent">
96 <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
97 <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>