Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html |
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html |
index cd4b791ca2807d9d471933bea3bd7446db097f58..d500125838024bf95a7712e4b2ce37e7d383d6e0 100644 |
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html |
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html |
@@ -3,17 +3,28 @@ |
<head> |
<link href="resources/grid.css" rel="stylesheet"> |
<link href="resources/grid-alignment.css" rel="stylesheet"> |
-<script src="../../resources/check-layout.js"></script> |
+<link href="../css-intrinsic-dimensions/resources/width-keyword-classes.css" rel="stylesheet"> |
<style> |
body { |
margin: 0; |
} |
+.container { |
+ position: relative; |
+ float: left; |
+} |
+ |
+.title { |
+} |
.grid { |
grid-template-columns: 50px 50px; |
grid-template-rows: 100px 100px; |
} |
+.contentSizedTracks { |
+ grid-template: max-content 100px / max-content 50px; |
+} |
+ |
.overflowWidth { |
width: 60px; |
height: 300px; |
@@ -23,13 +34,34 @@ body { |
width: 200px; |
height: 150px; |
} |
+ |
+.item1 { |
+ width: 50px; |
+ height: 150px; |
+} |
+.item2 { |
+ width: 150px; |
+ height: 100px; |
+} |
+ |
+.minSize { |
+ min-width: 300px; |
+ min-height: 400px; |
+} |
+.maxSize { |
+ max-width: 100px; |
+ max-height: 100px; |
+} |
</style> |
+<script src="../../resources/testharness.js"></script> |
+<script src="../../resources/testharnessreport.js"></script> |
+<script src="../../resources/check-layout-th.js"></script> |
</head> |
<body onload="checkLayout('.grid')"> |
<p>This test checks that the 'overflow' keyword is applied correctly for Content Alignment properties.</p> |
-<div style="position: relative"> |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
<div class="grid overflowWidth contentCenter" data-expected-width="60" data-expected-height="300"> |
<div class="firstRowFirstColumn" data-offset-x="-20" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="-20" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
@@ -37,8 +69,11 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="30" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>default</b></div> |
-<div style="position: relative"> |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
<div class="grid overflowHeight contentCenterUnsafe" data-expected-width="200" data-expected-height="150"> |
<div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="-25" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> |
@@ -46,8 +81,11 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="75" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
-<div style="position: relative"> |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
<div class="grid overflowWidth contentCenterSafe" data-expected-width="60" data-expected-height="300"> |
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
@@ -55,8 +93,11 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="150" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div> |
+ |
+<br clear="all"> |
-<div style="position: relative"> |
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;"> |
<div class="grid overflowHeight contentCenterSafe" data-expected-width="200" data-expected-height="150"> |
<div class="firstRowFirstColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
@@ -64,8 +105,11 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>safe</b></div> |
-<div style="position: relative"> |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
<div class="grid overflowWidth contentEnd" data-expected-width="60" data-expected-height="300"> |
<div class="firstRowFirstColumn" data-offset-x="-40" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="-40" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
@@ -73,8 +117,11 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="10" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>default</b></div> |
+ |
+<br clear="all"> |
-<div style="position: relative"> |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
<div class="grid overflowHeight contentEndUnsafe" data-expected-width="200" data-expected-height="150"> |
<div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="-50" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
@@ -82,8 +129,11 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
-<div style="position: relative"> |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
<div class="grid overflowWidth contentEndSafe" data-expected-width="60" data-expected-height="300"> |
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
@@ -91,8 +141,11 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="200" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container width of 60px not enough for 2 column tracks of 50px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div> |
-<div style="position: relative"> |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 75px; margin-right: 25px;"> |
<div class="grid overflowHeight contentEndSafe" data-expected-width="200" data-expected-height="150"> |
<div class="firstRowFirstColumn" data-offset-x="100" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
<div class="secondRowFirstColumn" data-offset-x="100" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
@@ -100,6 +153,73 @@ body { |
<div class="secondRowSecondColumn" data-offset-x="150" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
</div> |
</div> |
+<div class="title">Grid container height of 150px not enough for 2 row tracks of 100px.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>safe</b></div> |
+ |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
+ <div class="grid fit-content contentEndUnsafe" data-expected-width="100" data-expected-height="200"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+<div clas="title">Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 200px; margin-right: 25px;"> |
+ <div class="grid fit-content contentCenterUnsafe" data-expected-width="100" data-expected-height="200"> |
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowFirstColumn" data-offset-x="0" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="100"></div> |
+ <div class="secondRowSecondColumn" data-offset-x="50" data-offset-y="100" data-expected-width="50" data-expected-height="100"></div> |
+ </div> |
+</div> |
+<div class="title">Grid container indefinite size using fit-content, hence no possible overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 100px; margin-right: 25px;"> |
+ <div class="grid contentSizedTracks fit-content maxSize contentEndUnsafe" data-expected-width="100" data-expected-height="100"> |
+ <div class="item1 firstRowSecondColumn" data-offset-x="50" data-offset-y="-150" data-expected-width="50" data-expected-height="150"></div> |
+ <div class="item2 secondRowFirstColumn" data-offset-x="-100" data-offset-y="0" data-expected-width="150" data-expected-height="100"></div> |
+ </div> |
+</div> |
+<div class="title">Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 100px; margin-right: 75px;"> |
+ <div class="grid contentSizedTracks fit-content maxSize contentCenterUnsafe" data-expected-width="100" data-expected-height="100"> |
+ <div class="item1 firstRowSecondColumn" data-offset-x="100" data-offset-y="-75" data-expected-width="50" data-expected-height="150"></div> |
+ <div class="item2 secondRowFirstColumn" data-offset-x="-50" data-offset-y="75" data-expected-width="150" data-expected-height="100"></div> |
+ </div> |
+</div> |
+<div class="title">Grid container indefinite size using fit-content, but max-size constraints implies that the content-sized tracks overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
+ |
+<div class="container" style="margin-bottom: 50px; margin-right: 25px;"> |
+ <div class="grid contentSizedTracks fit-content minSize contentEndUnsafe" data-expected-width="300" data-expected-height="400"> |
+ <div class="item1 firstRowSecondColumn" data-offset-x="250" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div> |
+ <div class="item2 secondRowFirstColumn" data-offset-x="100" data-offset-y="300" data-expected-width="150" data-expected-height="100"></div> |
+ </div> |
+</div> |
+<div class="title">Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>end</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
+ |
+<div class="container" style="margin-right: 25px;"> |
+ <div class="grid contentSizedTracks fit-content minSize contentCenterUnsafe" data-expected-width="300" data-expected-height="400"> |
+ <div class="item1 firstRowSecondColumn" data-offset-x="200" data-offset-y="75" data-expected-width="50" data-expected-height="150"></div> |
+ <div class="item2 secondRowFirstColumn" data-offset-x="50" data-offset-y="225" data-expected-width="150" data-expected-height="100"></div> |
+ </div> |
+</div> |
+<div class="title">Grid container indefinite size using fit-content, but min-size constraints implies that the content-sized tracks don't overflow.<br> Content-Alignment: <b>center</b> and Overflow-Alignment: <b>unsafe</b></div> |
+ |
+<br clear="all"> |
</body> |
</html> |