Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(30)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow.html

Issue 2415313003: [css-grid] Computing free space on indefinite sized grids (Closed)
Patch Set: Clearer layout test cases. Created 4 years, 2 months ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
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>
« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-overflow-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698