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

Unified Diff: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html

Issue 1407633003: [css-grid] Implementation of Baseline Self-Alignment (Closed) Base URL: https://chromium.googlesource.com/chromium/src.git@master
Patch Set: Get advantage of recomputing the intrinsic size to solve the issues with orthogonal flows. Created 3 years, 10 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
Index: third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html
index 04b6f84c57d4f54607f86da21ad69514451bd9ff..a451203e5d236d8a046f247b5748d68f91f7ec9e 100644
--- a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html
+++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-track-sizing-with-orthogonal-flows.html
@@ -39,7 +39,7 @@ body {
<p>This test checks that grid tracks are sizing correctly with orthogonal flows, so grid container's intrinsic size is computed accordingly.</p>
<div class="container">
- <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Enough available space in the inline axis, so parallel tracks grow until their limits; orthogonal tracks, however, are limited to the bloc-axis available space, which will determine their column tracks size.</p>
+ <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -48,8 +48,8 @@ body {
</div>
<div class="container">
- <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Orthogonal green row track assumed as infinity, hence 10px for the column track. Actual row tracks size is different, hence overflowing. </p>
- <div class="grid itemsStart contentStart min-content height200" data-expected-width="50" data-expected-height="200">
+ <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
+ <div class="grid itemsStart contentStart min-content height200" data-expected-width="70" data-expected-height="200">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
@@ -57,25 +57,25 @@ body {
</div>
<div class="container">
- <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Parallel blue column track sized as its max of 150x, while Orthogonal green row, assumed as infinity, sized as 10px. Since actual row tracks size is different, green column track will occupy some space initally assigned to the blue one.</p>
- <div class="grid itemsStart contentStart max-content height200" data-expected-width="170" data-expected-height="200">
- <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="130" data-expected-height="20">XX XXX X XXX XX</div>
- <div class="verticalLR firstRowSecondColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+ <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
+ <div class="grid itemsStart contentStart max-content height200" data-expected-width="190" data-expected-height="200">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+ <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
- <p>Grid width under <b>fit-content</b> constrain and <b>fixed</b> height.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since we use assumed row tracks sizes, minimum and maximum will be the same, hence fit-content will produce the same result than max-content.</p>
- <div class="grid itemsStart contentStart fit-content height200" data-expected-width="170" data-expected-height="200">
- <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="130" data-expected-height="20">XX XXX X XXX XX</div>
- <div class="verticalLR firstRowSecondColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+ <p>Grid width under <b>fit-content</b> constrain and <b>fixed</b> height.<br >All grid items sized with <b>min-{width, height} auto</b>.</p>
+ <div class="grid itemsStart contentStart fit-content height200" data-expected-width="190" data-expected-height="200">
+ <div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+ <div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
- <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br >All grid items sized with <b>min-{width, height} auto</b>.<br> Since there is enough space in the inline-axis, the orthogonal green row sets the min-content size, which is 50px because of the 5 chars line.</p>
+ <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br >All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="90">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -84,7 +84,7 @@ body {
</div>
<div class="container">
- <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Both paralell and orthogonal tracks reach their maximum sizes.</p>
+ <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -93,7 +93,7 @@ body {
</div>
<div class="container">
- <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.<br> Same result as sizing under max-content constrain.</p>
+ <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-{width, height} auto</b>.</p>
<div class="grid itemsStart contentStart fit-content width300" data-expected-width="300" data-expected-height="490">
<div class="firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -104,7 +104,7 @@ body {
<!-- Playing with min-{width,height} constrains. -->
<div class="container">
- <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.</p>
+ <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
<div class="minWidthZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minWidthZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -113,7 +113,7 @@ body {
</div>
<div class="container">
- <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
+ <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart min-content height200" data-expected-width="0" data-expected-height="200">
<div class="minWidthZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XX XXX X XXX XX</div>
<div class="minWidthZero verticalLR firstRowSecondColumn" data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -122,16 +122,16 @@ body {
</div>
<div class="container">
- <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.<br> Since container is sized under max-content, tracks will use its maximum size.</p>
- <div class="grid itemsStart contentStart max-content height200" data-expected-width="170" data-expected-height="200">
- <div class="minWidthZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="130" data-expected-height="20">XX XXX X XXX XX</div>
- <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset-x="130" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
+ <p>Grid width under <b>max-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 0px, min-height: auto</b>.</p>
+ <div class="grid itemsStart contentStart max-content height200" data-expected-width="190" data-expected-height="200">
+ <div class="minWidthZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
+ <div class="minWidthZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="40" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
<div class="minWidthZero verticalLR secondRowFirstColumn" data-offset-x="0" data-offset-y="105" data-expected-width="20" data-expected-height="95">XXXX XX X XX XXX</div>
</div>
</div>
<div class="container">
- <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
+ <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.</p>
<div class="grid itemsStart contentStart min-content width300 " data-expected-width="300" data-expected-height="0">
<div class="minHeightZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minHeightZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -140,7 +140,7 @@ body {
</div>
<div class="container">
- <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.<br> Both parallel and orthogonal column tracks are 0px because of item's min-width and container's min-content constrain.</p>
+ <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 0px</b>.</p>
<div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
<div class="minHeightZero firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minHeightZero verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -149,7 +149,7 @@ body {
</div>
<div class="container">
- <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> Since grid container has definite size in both axis, all grid tracks grow until reach their maximum breadth, hence min-width has no effect.</p>
+ <p>Grid using <b>fixed</b> width and height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart width300 height200" data-expected-width="300" data-expected-height="200">
<div class="minWidthFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="10">XX XXX X XXX XX</div>
<div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="50" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -158,7 +158,7 @@ body {
</div>
<div class="container">
- <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.<br> Column tracks size is set by min-width, while rows grow until exhaust the available height.</p>
+ <p>Grid width under <b>min-content</b> constrain and <b>fixed</b> height.<br> All grid items sized with <b>min-width: 50px, min-height: auto</b>.</p>
<div class="grid itemsStart contentStart min-content height200" data-expected-width="100" data-expected-height="200">
<div class="minWidthFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">XX XXX X XXX XX</div>
<div class="minWidthFixed verticalLR firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="105">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -176,7 +176,7 @@ body {
</div>
<div class="container">
- <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> Parallel blue row track must grow to fulfill min-height restriction, while orthogonal shrink to satisfy container's min-content constrain.</p>
+ <p>Grid with <b>fixed</b> width and height under <b>min-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.</p>
<div class="grid itemsStart contentStart min-content width300" data-expected-width="300" data-expected-height="100">
<div class="minHeightFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
<div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="70" data-expected-height="50">X XXX XX XXXXX XX XXX X XXXX X XX</div>
@@ -185,7 +185,7 @@ body {
</div>
<div class="container">
- <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.<br> Orthogonal rows can grow now to reach their maximum, exceeding min-height as well, while parallel row tracks are still sized according to min-height.</p>
+ <p>Grid with <b>fixed</b> width and height under <b>max-content</b> constrain.<br> All grid items sized with <b>min-width: auto, min-height: 50px</b>.</p>
<div class="grid itemsStart contentStart max-content width300" data-expected-width="300" data-expected-height="490">
<div class="minHeightFixed firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="150" data-expected-height="50">XX XXX X XXX XX</div>
<div class="minHeightFixed verticalLR firstRowSecondColumn" data-offset-x="150" data-offset-y="0" data-expected-width="10" data-expected-height="330">X XXX XX XXXXX XX XXX X XXXX X XX</div>

Powered by Google App Engine
This is Rietveld 408576698