Skip to content

Commit

Permalink
[css-grid] Add test to verify the minimum size of images
Browse files Browse the repository at this point in the history 
This is a test created from issue w3c/csswg-drafts#1117.
The test checks how the automatic minimum size of images affect
to the grid container sizing and the track sizes.
The test also verifies the size of the image in the different cases.

The test combines the following cases:
* A grid container with fixed width (smaller and bigger than the image).
* A constrained grid container.
* A grid container without default "justify-content: stretch".
* A grid container with an extra test item.
* An image with a fixed width (smaller and bigger than the image original size).
* An image with a percentage width.
  • Loading branch information
@mrego
mrego committed May 24, 2017
1 parent 6e147b8 commit fca7580
Show file tree
Hide file tree
Showing 2 changed files with 278 additions and 0 deletions.
278 changes: 278 additions & 0 deletions css/css-grid-1/grid-items/grid-minimum-size-grid-items-021.html
View file
@@ -0,0 +1,278 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Grid Layout Test: Minimum size of grid items</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
<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="help" href="http://www.w3.org/TR/css-grid-1/#algo-track-sizing" title="12.3. Track Sizing Algorithm">
<meta name="assert" content="Checks how automatic minimum size of images affect to the calculation of the grid container size and the grid tracks. Verifies the sizing of the image in the different cases too.">
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<style>
.grid {
display: inline-grid;
font: 25px/1 Ahem;
}

.constrainedGrid {
width: 10px;
height: 10px;
}

.justifyContentStart {
justify-content: start;
}

.width200px {
width: 200px;
}

.width100percent {
width: 100%;
}
</style>

<div id=log></div>

<script>
function checkGridSizeTracksAndImageSize(gridId, imgId, gridWidth, gridHeight, gridColumns, gridRows, imgWidth, imgHeight) {
const gridStyle = getComputedStyle(document.getElementById(gridId));
const imgStyle = getComputedStyle(document.getElementById(imgId));

test(
function(){
assert_equals(gridStyle.width, gridWidth);
}, gridId + ".width");
test(
function(){
assert_equals(gridStyle.height, gridHeight);
}, gridId + ".height");
test(
function(){
assert_equals(gridStyle.gridTemplateColumns, gridColumns);
}, gridId + ".gridTemplateColumns");
test(
function(){
assert_equals(gridStyle.gridTemplateRows, gridRows);
}, gridId + ".gridTemplateRows");
test(
function(){
assert_equals(imgStyle.width, imgWidth);
}, imgId + ".width");
test(
function(){
assert_equals(imgStyle.height, imgHeight);
}, imgId + ".height");
}
</script>

<!-- Grids with only a 50x50 image as grid item. -->

<div id="grid-1" class="grid">
<img id="img-1" class="width200px" src="support/50x50-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-1", "img-1", "200px", "200px", "200px", "200px", "200px", "200px");
</script>

<div id="grid-2" class="grid constrainedGrid">
<img id="img-2" class="width200px" src="support/50x50-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-2", "img-2", "10px", "10px", "200px", "50px", "200px", "200px");
</script>

<div id="grid-3" class="grid width200px">
<img id="img-3" class="width100percent" src="support/50x50-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-3", "img-3", "200px", "50px", "200px", "50px", "200px", "200px");
</script>

<div id="grid-4" class="grid width200px constrainedGrid">
<img id="img-4" class="width100percent" src="support/50x50-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-4", "img-4", "200px", "10px", "200px", "50px", "200px", "200px");
</script>

<div id="grid-5" class="grid width200px justifyContentStart">
<img id="img-5" class="width100percent" src="support/50x50-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-5", "img-5", "200px", "50px", "50px", "50px", "50px", "50px");
</script>

<div id="grid-6" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-6" class="width100percent" src="support/50x50-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-6", "img-6", "200px", "10px", "50px", "50px", "50px", "50px");
</script>

<!-- Grids with a 50x50 image as grid item and a 100x25 text grid item. -->

<div id="grid-7" class="grid">
<img id="img-7" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-7", "img-7", "200px", "225px", "200px", "200px 25px", "200px", "200px");
</script>

<div id="grid-8" class="grid constrainedGrid">
<img id="img-8" class="width200px" src="support/50x50-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-8", "img-8", "10px", "10px", "200px", "50px 25px", "200px", "200px");
</script>

<div id="grid-9" class="grid width200px">
<img id="img-9" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-9", "img-9", "200px", "125px", "200px", "100px 25px", "200px", "200px");
</script>

<div id="grid-10" class="grid width200px constrainedGrid">
<img id="img-10" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-10", "img-10", "200px", "10px", "200px", "50px 25px", "200px", "200px");
</script>

<div id="grid-11" class="grid width200px justifyContentStart">
<img id="img-11" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-11", "img-11", "200px", "125px", "100px", "100px 25px", "100px", "100px");
</script>

<div id="grid-12" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-12" class="width100percent" src="support/50x50-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-12", "img-12", "200px", "10px", "100px", "50px 25px", "100px", "100px");
</script>

<!-- Grids with only a 500x500 image as grid item. -->

<div id="grid-13" class="grid">
<img id="img-13" class="width200px" src="support/500x500-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-13", "img-13", "200px", "200px", "200px", "200px", "200px", "200px");
</script>

<div id="grid-14" class="grid constrainedGrid">
<img id="img-14" class="width200px" src="support/500x500-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-14", "img-14", "10px", "10px", "200px", "200px", "200px", "200px");
</script>

<div id="grid-15" class="grid width200px">
<img id="img-15" class="width100percent" src="support/500x500-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-15", "img-15", "200px", "200px", "200px", "200px", "200px", "200px");
</script>

<div id="grid-16" class="grid width200px constrainedGrid">
<img id="img-16" class="width100percent" src="support/500x500-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-16", "img-16", "200px", "10px", "200px", "200px", "200px", "200px");
</script>

<div id="grid-17" class="grid width200px justifyContentStart">
<img id="img-17" class="width100percent" src="support/500x500-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-17", "img-17", "200px", "200px", "200px", "200px", "200px", "200px");
</script>

<div id="grid-18" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-18" class="width100percent" src="support/500x500-green.png">
</div>

<script>
checkGridSizeTracksAndImageSize("grid-18", "img-18", "200px", "10px", "200px", "200px", "200px", "200px");
</script>

<!-- Grids with a 500x500 image as grid item and a 100x25 text grid item. -->

<div id="grid-19" class="grid">
<img id="img-19" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-19", "img-19", "200px", "225px", "200px", "200px 25px", "200px", "200px");
</script>

<div id="grid-20" class="grid constrainedGrid">
<img id="img-20" class="width200px" src="support/500x500-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-20", "img-20", "10px", "10px", "200px", "200px 25px", "200px", "200px");
</script>

<div id="grid-21" class="grid width200px">
<img id="img-21" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-21", "img-21", "200px", "225px", "200px", "200px 25px", "200px", "200px");
</script>

<div id="grid-22" class="grid width200px constrainedGrid">
<img id="img-22" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-22", "img-22", "200px", "10px", "200px", "200px 25px", "200px", "200px");
</script>

<div id="grid-23" class="grid width200px justifyContentStart">
<img id="img-23" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-23", "img-23", "200px", "225px", "200px", "200px 25px", "200px", "200px");
</script>

<div id="grid-24" class="grid width200px constrainedGrid justifyContentStart">
<img id="img-24" class="width100percent" src="support/500x500-green.png">
<div>ITEM</div>
</div>

<script>
checkGridSizeTracksAndImageSize("grid-24", "img-24", "200px", "10px", "200px", "200px 25px", "200px", "200px");
</script>
Binary file added css/css-grid-1/grid-items/support/500x500-green.png
View file
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 fca7580

Please sign in to comment.