Skip to content

Commit

Permalink
[css-grid] Use transferred size over content size for automatic minimum
Browse files Browse the repository at this point in the history
CSS WG has agreed to modify the spec so now the transferred size is used
(if it exists) independently if it's bigger or smaller
than the content size.
See: w3c/csswg-drafts#1149

The spec text (https://drafts.csswg.org/css-grid/#min-size-auto):
  "The automatic minimum size for a grid item in a given dimension is
   its specified size if it exists, otherwise its transferred size
   if that exists, else its content size"

This patch modifies GridTrackSizingAlgorithmStrategy::MinSizeForChild()
so it always returns the transferred size (if any).
This also updates the tests to check the new behavior.

BUG=763265

Change-Id: If6134e7d031a3f9693b8d9ca62f8f41d3146add2
Reviewed-on: https://chromium-review.googlesource.com/657098
Reviewed-by: Javier Fernandez <jfernandez@igalia.com>
Commit-Queue: Manuel Rego Casasnovas <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#500799}
  • Loading branch information
mrego authored and jakearchibald committed Nov 16, 2017
1 parent c975c02 commit 0942474
Show file tree
Hide file tree
Showing 7 changed files with 17 additions and 14 deletions.
Expand Up @@ -5,7 +5,7 @@
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size for height (as it's smaller than the content size of the image).">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is bigger).">
<style>
#reference-overlapped-red {
position: absolute;
Expand Down
10 changes: 6 additions & 4 deletions css/css-grid-1/grid-items/grid-minimum-size-grid-items-007.html
Expand Up @@ -5,7 +5,7 @@
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the content size for height (as it's smaller than the transferred size of the image).">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for width (regardless the content size) and the transferred size of the image for height (even when content size is smaller).">
<style>
#reference-overlapped-red {
position: absolute;
Expand All @@ -17,12 +17,13 @@

#constrained-grid {
display: grid;
grid-template-columns: auto auto;
width: 10px;
height: 10px;
}

#test-grid-item-overlapping-green {
width: 100px;
.test-grid-item-overlapping-green {
width: 50px;
justify-self: stretch;
align-self: stretch;
}
Expand All @@ -31,6 +32,7 @@

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/50x100-green.png" alt="Image download support must be enabled" />
<img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
<img class="test-grid-item-overlapping-green" src="support/25x50-green.png" alt="Image download support must be enabled" />
</div>

Expand Up @@ -5,7 +5,7 @@
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width (as it's smaller than the content size of the image).">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size of the image for width (even when content size is bigger).">
<style>
#reference-overlapped-red {
position: absolute;
Expand Down
Expand Up @@ -5,7 +5,7 @@
<link rel="help" href="http://www.w3.org/TR/css-grid-1/#min-size-auto" title="6.6. Implied Minimum Size of Grid Items">
<link rel="match" href="ref-filled-green-100px-square-image.html">
<meta name="flags" content="image">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the content size for width (as it's smaller than the transferred size of the image).">
<meta name="assert" content="Checks that minimum size for grid items is the specified size for height (regardless the content size) and the transferred size for width of the image (even when content size is smaller).">
<style>
#reference-overlapped-red {
position: absolute;
Expand All @@ -21,8 +21,8 @@
height: 10px;
}

#test-grid-item-overlapping-green {
height: 100px;
.test-grid-item-overlapping-green {
height: 50px;
justify-self: stretch;
align-self: stretch;
}
Expand All @@ -31,6 +31,7 @@

<div id="reference-overlapped-red"></div>
<div id="constrained-grid">
<img id="test-grid-item-overlapping-green" src="support/100x50-green.png" alt="Image download support must be enabled" />
<img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" />
<img class="test-grid-item-overlapping-green" src="support/50x25-green.png" alt="Image download support must be enabled" />
</div>

Expand Up @@ -67,17 +67,17 @@

function runTests() {
checkGridSizeTracksAndImageSize("grid-1", "img-1", "200px", "200px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "50px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-3", "img-3", "200px", "50px", "200px", "50px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-4", "img-4", "200px", "10px", "200px", "50px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-5", "img-5", "200px", "50px", "50px", "50px", "50px", "50px");
checkGridSizeTracksAndImageSize("grid-6", "img-6", "200px", "10px", "50px", "50px", "50px", "50px");
checkGridSizeTracksAndImageSize("grid-7", "img-7", "200px", "225px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-8", "img-8", "10px", "10px", "200px", "50px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-8", "img-8", "10px", "10px", "200px", "200px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-9", "img-9", "200px", "125px", "200px", "100px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-10", "img-10", "200px", "10px", "200px", "50px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-10", "img-10", "200px", "10px", "200px", "100px 25px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-11", "img-11", "200px", "125px", "100px", "100px 25px", "100px", "100px");
checkGridSizeTracksAndImageSize("grid-12", "img-12", "200px", "10px", "100px", "50px 25px", "100px", "100px");
checkGridSizeTracksAndImageSize("grid-12", "img-12", "200px", "10px", "100px", "100px 25px", "100px", "100px");
checkGridSizeTracksAndImageSize("grid-13", "img-13", "200px", "200px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-14", "img-14", "10px", "10px", "200px", "200px", "200px", "200px");
checkGridSizeTracksAndImageSize("grid-15", "img-15", "200px", "200px", "200px", "200px", "200px", "200px");
Expand Down
Binary file added css/css-grid-1/grid-items/support/25x50-green.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added css/css-grid-1/grid-items/support/50x25-green.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0942474

Please sign in to comment.