Upstream version 5.34.104.0
[platform/framework/web/crosswalk.git] / src / third_party / WebKit / LayoutTests / fast / css-grid-layout / minmax-max-content-resolution-rows.html
index fdbf507..2813069 100644 (file)
@@ -7,13 +7,13 @@ if (window.testRunner)
 <link href="resources/grid.css" rel="stylesheet">
 <style>
 .gridMinMaxContent {
-    grid-definition-columns: 20px;
-    grid-definition-rows: minmax(max-content, 50px);
+    grid-template-columns: 20px;
+    grid-template-rows: minmax(max-content, 50px);
 }
 
 .gridMaxMaxContent {
-    grid-definition-columns: 20px;
-    grid-definition-rows: minmax(30px, max-content);
+    grid-template-columns: 20px;
+    grid-template-rows: minmax(30px, max-content);
 }
 
 .firstRowFirstColumn {
@@ -33,24 +33,36 @@ if (window.testRunner)
 <p>Test that resolving minmax function with max-content on grid items works properly.</p>
 
 <div class="constrainedContainer">
-    <div class="grid gridMinMaxContent">
+    <div class="grid gridMinMaxContent" style="height: 100%">
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX</div>
     </div>
 </div>
 
 <div class="constrainedContainer">
     <div class="grid gridMinMaxContent">
-        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX</div>
     </div>
 </div>
 
 <div class="constrainedContainer">
     <div class="grid gridMinMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+    </div>
+</div>
+
+<div class="constrainedContainer">
+    <div class="grid gridMinMaxContent" style="height: 100%">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridMinMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 <div style="width: 10px; height: 100px;">
     <div class="grid gridMinMaxContent">
@@ -59,12 +71,19 @@ if (window.testRunner)
 </div>
 
 <div style="width: 10px; height: 100px;">
-    <div class="grid gridMinMaxContent">
+    <div class="grid gridMinMaxContent" style="height: 100%">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="80">XX XX XX XX XX XX XX XX</div>
     </div>
 </div>
 
+<div style="width: 10px; height: 100px;">
+    <div class="grid gridMinMaxContent">
+        <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX XX XX XX</div>
+    </div>
+</div>
+
 <div class="constrainedContainer">
     <div class="grid gridMaxMaxContent">
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX</div>
@@ -78,11 +97,17 @@ if (window.testRunner)
 </div>
 
 <div class="constrainedContainer">
-    <div class="grid gridMaxMaxContent">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
     </div>
 </div>
 
+<div class="constrainedContainer">
+    <div class="grid gridMaxMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+    </div>
+</div>
+
 <!-- Allow the extra logical space distribution to occur. -->
 
 <div style="width: 100px; height: 20px">
@@ -92,11 +117,17 @@ if (window.testRunner)
 </div>
 
 <div style="width: 100px; height: 20px">
-    <div class="grid gridMaxMaxContent">
+    <div class="grid gridMaxMaxContent" style="height: 100%">
         <!-- The 'max' logical width ends up being smaller than the 'min' so per the spec we ignore the 'max'. -->
         <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="30">XX XX XX XX XX</div>
     </div>
 </div>
 
+<div style="width: 100px; height: 20px">
+    <div class="grid gridMaxMaxContent">
+        <div class="firstRowFirstColumn" data-expected-width="20" data-expected-height="50">XX XX XX XX XX</div>
+    </div>
+</div>
+
 </body>
 </html>