Index: LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html |
diff --git a/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html b/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html |
index d84f503b0d77b3e97215c1476923e25efadae3a7..e3da19a70c03822910629f79ec68baafa4b74258 100644 |
--- a/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html |
+++ b/LayoutTests/fast/css-grid-layout/grid-item-with-percent-height-in-auto-height-grid-resolution.html |
@@ -11,6 +11,18 @@ |
grid-template-columns: 50px 100px; |
grid-template-rows: auto auto; |
} |
+ |
+.sizedToGridAreaMinSizes { |
+ font: 10px/1 Ahem; |
+ min-width: 100%; |
+ min-height: 100%; |
+} |
+ |
+.sizedToGridAreaMaxSizes { |
+ font: 10px/1 Ahem; |
+ max-width: 100%; |
+ max-height: 100%; |
+} |
</style> |
<script src="../../resources/check-layout.js"></script> |
<body onload="checkLayout('.grid')"> |
@@ -53,5 +65,77 @@ |
</div> |
</div> |
+<div class="unconstrainedContainer" style="position: relative"> |
+<div class="grid gridMinMaxMinMax"> |
+ <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
+<div style="position: relative; height: 100px;"> |
+<div class="grid gridMinMaxMinMax"> |
+ <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
+<div style="position: relative;"> |
+<div class="grid gridMinMaxMinMax" style="height: 100px;"> |
+ <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
+<div class="unconstrainedContainer" style="position: relative"> |
+<div class="grid gridAutoAuto"> |
+ <div class="sizedToGridAreaMinSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMinSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
+<div class="unconstrainedContainer" style="position: relative"> |
+<div class="grid gridMinMaxMinMax"> |
+ <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
+<div style="position: relative; height: 100px;"> |
+<div class="grid gridMinMaxMinMax"> |
+ <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="100">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="100">XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
+<div style="position: relative;"> |
+<div class="grid gridMinMaxMinMax" style="height: 100px;"> |
+ <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="20">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="80">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="80">XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
+<div class="unconstrainedContainer" style="position: relative"> |
+<div class="grid gridAutoAuto"> |
+ <div class="sizedToGridAreaMaxSizes firstRowFirstColumn" data-expected-width="50" data-expected-height="30">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes firstRowSecondColumn" data-expected-width="100" data-expected-height="30">XXXXX XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXXX</div> |
+ <div class="sizedToGridAreaMaxSizes secondRowSecondColumn" data-expected-width="100" data-expected-height="40">XXXXX XXXXX XXXXX XXXXXX</div> |
+</div> |
+</div> |
+ |
</body> |
</html> |