Skip to content

GitLab

T
tangled
Commit ffd2e9cc authored by Henrique Ferreiro's avatar Henrique Ferreiro Committed by Commit Bot
Browse files
Options

[css-grid] Migrate grid-automatic-minimum-for-auto-rows to WPT 

Migrate this test out of web_tests/fast/css-grid-layout/ and into the
WPT-specific directory, adding links to the relevant specs and a test
assertion describing its purpose.

Bug: 1063749, 767015
Change-Id: Id3fe39a3ce2d81e8e378d55fc0b21bc74426670d
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2152791
Commit-Queue: Henrique Ferreiro <hferreiro@igalia.com>
Reviewed-by: default avatarJavier Fernandez <jfernandez@igalia.com>
Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#760445}
parent 230421d2
Hide whitespace changes
Inline Side-by-side
Showing with 278 additions and 378 deletions
third_party/blink/web_tests/external/wpt/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-rows-001.html 0 → 100644
View file @ ffd2e9cc
<!DOCTYPE html>
<title>CSS Grid: automatic minimum in 'auto' rows</title>
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css-grid/#layout-algorithm">
<link rel="help" href="https://drafts.csswg.org/css-sizing-3/#automatic-minimum-size">
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=464287">
<meta name="assert" content="Check that grid item's 'min-width' is honored when sizing 'auto' rows.">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.grid { font: 10px/1 Ahem; }
.minHeight10 { min-height: 10px; }
.minHeight20 { min-height: 20px; }
.minHeight30 { min-height: 30px; }
.minHeight40 { min-height: 40px; }
.minHeight50 { min-height: 50px; }
.minHeight60 { min-height: 60px; }
.minHeight70 { min-height: 70px; }
.minHeight90 { min-height: 90px; }
.minHeightMaxContent { min-height: max-content; }
.height30 { height: 30px; }
.height50 { height: 50px; }
.height60 { height: 60px; }
.height200 { height: 200px; }
.border5 { border: 5px solid #abc; }
.padding8 { padding: 8px 0px; }
/* All these 4 cases are equivalent. We use them interchangeably. */
.gridAuto { grid-template-rows: auto; }
.gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); }
.gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); }
.gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); }
/* All these 3 cases are equivalent. We use them interchangeably. */
.gridAutoAndAuto { grid-template-rows: auto auto; }
.gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); }
.gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; }
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div class="grid gridAuto constrainedContainer" id="gridAuto">
<div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div>
</div>
<div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize">
<div class="firstRowFirstColumn minHeight40">XX</div>
</div>
<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto">
<div class="firstRowFirstColumn minHeight40">XX<br>XX</div>
</div>
<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent">
<div class="firstRowFirstColumn minHeight20 height30"></div>
</div>
<div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto">
<div class="firstRowFirstColumn minHeight60">X</div>
</div>
<div class="grid gridAuto constrainedContainer" id="gridAutoMultipleItems">
<div class="firstRowFirstColumn minHeight60">X<br>X</div>
<div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div>
<div class="firstRowAutoColumn minConstrainedContainer height50"></div>
</div>
<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight">
<div class="firstRowFirstColumn height30">X<br>X</div>
<div class="firstRowSecondColumn minHeight50"></div>
<div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div>
</div>
<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight">
<div class="firstRowFirstColumn minHeight30">X<br>X</div>
<div class="firstRowSecondColumn height60">XX</div>
<div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren">
<div class="firstRowFirstColumn height200"></div>
<div class="secondRowFirstColumn height50"></div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
<div class="firstRowFirstColumn">XX XX</div>
<div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
<div class="bothRowSecondColumn minHeight60">XX XX XX</div>
<div class="firstRowFirstColumn">X X X X</div>
<div class="firstRowFirstColumn">XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
<div class="secondRowFirstColumn">X XXX XX</div>
<div class="bothRowSecondColumn minHeight70">XXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
<div class="bothRowSecondColumn minHeight70">XX XX XX</div>
<div class="bothRowFirstColumn">XXXXX X XXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto"
id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
<div class="secondRowFirstColumn minHeight60">X XXX XX</div>
<div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div>
<div class="firstRowFirstColumn">XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto"
id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
<div class="bothRowSecondColumn">XX XX XX XX</div>
<div class="firstRowFirstColumn minHeight40">XXX</div>
<div class="bothRowFirstColumn minHeight90">X XX XXX</div>
<div class="secondRowFirstColumn">X XX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedHeightChild">
<div class="firstRowFirstColumn height60">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight">
<div class="firstRowFirstColumn height60 minHeight40">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight">
<div class="firstRowFirstColumn height60 minHeight90">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight">
<div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight">
<div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight">
<div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder">
<div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding">
<div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding">
<div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder">
<div class="firstRowFirstColumn border5">XX<br>XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding">
<div class="firstRowFirstColumn padding8">XX<br>XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder">
<div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding">
<div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div>
</div>
</div>
<script>
function testGridRowsValues(id, computedRowValue)
{
assert_equals(window.getComputedStyle(document.getElementById(id))
.getPropertyValue('grid-template-rows')", computedRowValue);
}
setup({ explicit_done: true });
document.fonts.ready.then(() => {
test(() => {
testGridRowsValues('gridAuto', '40px');
testGridRowsValues('gridAutoItemSmallerThanMinSize', '40px');
testGridRowsValues('gridMinMaxAutoAuto', '40px');
testGridRowsValues('gridMinMaxAutoMaxContent', '30px');
testGridRowsValues('gridMinMaxMinContentAuto', '60px');
testGridRowsValues('gridAutoMultipleItems', '60px');
testGridRowsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight', '50px');
testGridRowsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight', '60px');
testGridRowsValues('gridAutoAndAutoFixedHeightChildren', '200px 50px');
}, 'Check that min-height is honored when sizing auto rows.');
test(() => {
testGridRowsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '10px 40px');
testGridRowsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '40px 20px');
testGridRowsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '40px 30px');
testGridRowsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px');
testGridRowsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px');
testGridRowsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '50px 40px');
}, 'Check that min-height is honored when sizing auto rows and spanning grid items.');
test(() => {
testGridRowsValues('gridAutoWithFixedHeightChild', '60px');
testGridRowsValues('gridAutoWithFixedHeightChildAndMinHeight', '60px');
testGridRowsValues('gridAutoWithFixedHeightChildAndHigherMinHeight', '90px');
testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeight', '25px 25px');
testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndMinHeight', '30px 30px');
testGridRowsValues('gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight', '35px 35px');
}, 'Check the interactions between height and min-height and auto tracks.');
test(() => {
testGridRowsValues('gridAutoFixedMinHeightWithBorder', '50px');
testGridRowsValues('gridAutoFixedMinHeightWithPadding', '56px');
testGridRowsValues('gridAutoFixedMinHeightWithBorderAndPadding', '66px');
testGridRowsValues('gridAutoAutoMinHeightWithBorder', '40px');
testGridRowsValues('gridAutoAutoMinHeightWithPadding', '46px');
testGridRowsValues('gridAutoAutoMinHeightWithBorderAndPadding', '56px');
testGridRowsValues('gridAutoMaxContentMinHeightWithBorder', '30px');
testGridRowsValues('gridAutoMaxContentMinHeightWithPadding', '36px');
testGridRowsValues('gridAutoMaxContentMinHeightWithBorderAndPadding', '46px');
}, 'Check that borders and paddings are considering when computing min sizes.');
done();
});
</script>
third_party/blink/web_tests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt deleted 100644 → 0
View file @ 230421d2
Check that min-height is honored when sizing auto rows.
PASS window.getComputedStyle(gridAuto, '').getPropertyValue('grid-template-rows') is "40px"
PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('grid-template-rows') is "40px"
PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('grid-template-rows') is "40px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('grid-template-rows') is "30px"
PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('grid-template-rows') is "60px"
PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('grid-template-rows') is "60px"
PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight, '').getPropertyValue('grid-template-rows') is "50px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight, '').getPropertyValue('grid-template-rows') is "60px"
PASS window.getComputedStyle(gridAutoAndAutoFixedHeightChildren, '').getPropertyValue('grid-template-rows') is "200px 50px"
Check that min-height is honored when sizing auto rows and spanning grid items.
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('grid-template-rows') is "10px 40px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-rows') is "40px 20px"
PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('grid-template-rows') is "40px 30px"
PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('grid-template-rows') is "35px 35px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-rows') is "25px 65px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-rows') is "50px 40px"
Check the interactions between height and min-height and auto tracks.
PASS window.getComputedStyle(gridAutoWithFixedHeightChild, '').getPropertyValue('grid-template-rows') is "60px"
PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndMinHeight, '').getPropertyValue('grid-template-rows') is "60px"
PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndHigherMinHeight, '').getPropertyValue('grid-template-rows') is "90px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeight, '').getPropertyValue('grid-template-rows') is "25px 25px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndMinHeight, '').getPropertyValue('grid-template-rows') is "30px 30px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight, '').getPropertyValue('grid-template-rows') is "35px 35px"
Check that borders and paddings are considering when computing min sizes.
PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorder, '').getPropertyValue('grid-template-rows') is "50px"
PASS window.getComputedStyle(gridAutoFixedMinHeightWithPadding, '').getPropertyValue('grid-template-rows') is "56px"
PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorderAndPadding, '').getPropertyValue('grid-template-rows') is "66px"
PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorder, '').getPropertyValue('grid-template-rows') is "40px"
PASS window.getComputedStyle(gridAutoAutoMinHeightWithPadding, '').getPropertyValue('grid-template-rows') is "46px"
PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorderAndPadding, '').getPropertyValue('grid-template-rows') is "56px"
PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorder, '').getPropertyValue('grid-template-rows') is "30px"
PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithPadding, '').getPropertyValue('grid-template-rows') is "36px"
PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorderAndPadding, '').getPropertyValue('grid-template-rows') is "46px"
PASS successfullyParsed is true
TEST COMPLETE
XX
XXX
XX
XXX
XXXX
XX
XX
XX
X
X
X
XXX
X
XX
XX
X
X
XXXX
X
XX
XXX
X
X
XX
XXX
XX
XXX
XX
XX XX
XXXXXX X XXX
XX XX XX
X X X X
XX XX
X XXX XX
XXX XXXX
XX XX XX
XXXXX X XXXXX
X XXX XX
XXXXX XXXXX
XX XX
XX XX XX XX
XXX
X XX XXX
X XX X
XXX X
XXX X
XXX X
XX XXX XX XXX XX XXX
XX XXX XX
XX XXX XX X XX
XXXXXX
XXXXXX
XXXXXX
XX
XXX X
XX
XXX X
XX
XXX X
XXX X
XXX X
XXX X
third_party/blink/web_tests/fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html deleted 100644 → 0
View file @ 230421d2
<html>
<link href="resources/grid.css" rel="stylesheet"/>
<style>
.grid { font: 10px/1 Ahem; }
.minHeight10 { min-height: 10px; }
.minHeight20 { min-height: 20px; }
.minHeight30 { min-height: 30px; }
.minHeight40 { min-height: 40px; }
.minHeight50 { min-height: 50px; }
.minHeight60 { min-height: 60px; }
.minHeight70 { min-height: 70px; }
.minHeight90 { min-height: 90px; }
.minHeightMaxContent { min-height: -webkit-max-content; }
.height30 { height: 30px; }
.height50 { height: 50px; }
.height60 { height: 60px; }
.height200 { height: 200px; }
.border5 { border: 5px solid #abc; }
.padding8 { padding: 8px 0px; }
/* All these 4 cases are equivalent. We use them interchangeably. */
.gridAuto { grid-template-rows: auto; }
.gridMinMaxAutoAuto { grid-template-rows: minmax(auto, auto); }
.gridMinMaxAutoMaxContent { grid-template-rows: minmax(auto, max-content); }
.gridMinMaxMinContentAuto { grid-template-rows: minmax(min-content, auto); }
/* All these 3 cases are equivalent. We use them interchangeably. */
.gridAutoAndAuto { grid-template-rows: auto auto; }
.gridAutoAndMinMaxAutoAuto { grid-template-rows: auto minmax(auto, auto); }
.gridMinMaxAutoMaxContentAndAuto { grid-template-rows: minmax(auto, max-content) auto; }
</style>
<script src="../../resources/js-test.js"></script>
<body>
<div class="grid gridAuto constrainedContainer" id="gridAuto">
<div class="firstRowFirstColumn minHeight40">XX<br>XXX<br>XX<br>XXX<br>XXXX</div>
</div>
<div class="grid gridAuto constrainedContainer" id="gridAutoItemSmallerThanMinSize">
<div class="firstRowFirstColumn minHeight40">XX</div>
</div>
<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAuto">
<div class="firstRowFirstColumn minHeight40">XX<br>XX</div>
</div>
<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContent">
<div class="firstRowFirstColumn minHeight20 height30"></div>
</div>
<div class="grid gridMinMaxMinContentAuto constrainedContainer" id="gridMinMaxMinContentAuto">
<div class="firstRowFirstColumn minHeight60">X</div>
</div>
<div class="grid gridAuto constrainedContainer" id="gridAutoMultipleItems">
<div class="firstRowFirstColumn minHeight60">X<br>X</div>
<div class="firstRowSecondColumn minHeight20"">XXX<br>X<br>XX<br>XX</div>
<div class="firstRowAutoColumn minConstrainedContainer height50"></div>
</div>
<div class="grid gridMinMaxAutoAuto constrainedContainer" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight">
<div class="firstRowFirstColumn height30">X<br>X</div>
<div class="firstRowSecondColumn minHeight50"></div>
<div class="firstRowAutoColumn minHeight20">XXXX<br>X<br>XX<br>XXX</div>
</div>
<div class="grid gridMinMaxAutoMaxContent constrainedContainer" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight">
<div class="firstRowFirstColumn minHeight30">X<br>X</div>
<div class="firstRowSecondColumn height60">XX</div>
<div class="firstRowAutoColumn minHeight20">XXX<br>XX<br>XXX<br>XX</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedHeightChildren">
<div class="firstRowFirstColumn height200"></div>
<div class="secondRowFirstColumn height50"></div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
<div class="firstRowFirstColumn">XX XX</div>
<div class="bothRowFirstColumn minHeight50">XXXXXX X XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
<div class="bothRowSecondColumn minHeight60">XX XX XX</div>
<div class="firstRowFirstColumn">X X X X</div>
<div class="firstRowFirstColumn">XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
<div class="secondRowFirstColumn">X XXX XX</div>
<div class="bothRowSecondColumn minHeight70">XXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
<div class="bothRowSecondColumn minHeight70">XX XX XX</div>
<div class="bothRowFirstColumn">XXXXX X XXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
<div class="secondRowFirstColumn minHeight60">X XXX XX</div>
<div class="bothRowSecondColumn minHeight90">XXXXX XXXXX</div>
<div class="firstRowFirstColumn">XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
<div class="bothRowSecondColumn">XX XX XX XX</div>
<div class="firstRowFirstColumn minHeight40">XXX</div>
<div class="bothRowFirstColumn minHeight90">X XX XXX</div>
<div class="secondRowFirstColumn">X XX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedHeightChild">
<div class="firstRowFirstColumn height60">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto height30" id="gridAutoWithFixedHeightChildAndMinHeight">
<div class="firstRowFirstColumn height60 minHeight40">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedHeightChildAndHigherMinHeight">
<div class="firstRowFirstColumn height60 minHeight90">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeight">
<div class="bothRowFirstColumn height50">XX XXX XX XXX XX XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto height30" id="gridAutoAndAutoOneSpanningFixedHeightAndMinHeight">
<div class="bothRowFirstColumn height60 minHeight50">XX XXX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight">
<div class="bothRowFirstColumn height60 minHeight70">XX XXX XX X XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorder">
<div class="firstRowFirstColumn minHeight40 border5">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithPadding">
<div class="firstRowFirstColumn minHeight40 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinHeightWithBorderAndPadding">
<div class="firstRowFirstColumn minHeight40 border5 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorder">
<div class="firstRowFirstColumn border5">XX<br>XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithPadding">
<div class="firstRowFirstColumn padding8">XX<br>XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinHeightWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8">XX<br>XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorder">
<div class="firstRowFirstColumn minHeightMaxContent border5">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithPadding">
<div class="firstRowFirstColumn minHeightMaxContent padding8">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinHeightWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8 minHeightMaxContent">XXX X</div>
</div>
</div>
<script>
function testGridRowsValues(id, computedRowValue)
{
shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-rows')", computedRowValue);
}
debug("");
debug("Check that min-height is honored when sizing auto rows.");
testGridRowsValues("gridAuto", "40px");
testGridRowsValues("gridAutoItemSmallerThanMinSize", "40px");
testGridRowsValues("gridMinMaxAutoAuto", "40px");
testGridRowsValues("gridMinMaxAutoMaxContent", "30px");
testGridRowsValues("gridMinMaxMinContentAuto", "60px");
testGridRowsValues("gridAutoMultipleItems", "60px");
testGridRowsValues("gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight", "50px");
testGridRowsValues("gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight", "60px");
testGridRowsValues("gridAutoAndAutoFixedHeightChildren", "200px 50px");
debug("");
debug("Check that min-height is honored when sizing auto rows and spanning grid items.");
testGridRowsValues("gridAutoAndAutoOneSpanningOneNonSpannig", "10px 40px");
testGridRowsValues("gridAutoAndAutoOneSpanningMultipleNonSpanning", "40px 20px");
testGridRowsValues("gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning", "40px 30px");
testGridRowsValues("gridAutoAndMinMaxAutoAutoMultipleSpanning", "35px 35px");
testGridRowsValues("gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning", "25px 65px");
testGridRowsValues("gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning", "50px 40px");
debug("");
debug("Check the interactions between height and min-height and auto tracks.");
testGridRowsValues("gridAutoWithFixedHeightChild", "60px");
testGridRowsValues("gridAutoWithFixedHeightChildAndMinHeight", "60px");
testGridRowsValues("gridAutoWithFixedHeightChildAndHigherMinHeight", "90px");
testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeight", "25px 25px");
testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndMinHeight", "30px 30px");
testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight", "35px 35px");
debug("");
debug("Check that borders and paddings are considering when computing min sizes.");
testGridRowsValues("gridAutoFixedMinHeightWithBorder", "50px");
testGridRowsValues("gridAutoFixedMinHeightWithPadding", "56px");
testGridRowsValues("gridAutoFixedMinHeightWithBorderAndPadding", "66px");
testGridRowsValues("gridAutoAutoMinHeightWithBorder", "40px");
testGridRowsValues("gridAutoAutoMinHeightWithPadding", "46px");
testGridRowsValues("gridAutoAutoMinHeightWithBorderAndPadding", "56px");
testGridRowsValues("gridAutoMaxContentMinHeightWithBorder", "30px");
testGridRowsValues("gridAutoMaxContentMinHeightWithPadding", "36px");
testGridRowsValues("gridAutoMaxContentMinHeightWithBorderAndPadding", "46px");
</script>
</body>
</html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment