Skip to content

GitLab

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

[css-grid] Migrate grid-automatic-minimum-for-auto-columns 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: Icdb180274b6d82ae02dc25461efa1b5819670195
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2151512
Commit-Queue: Henrique Ferreiro <hferreiro@igalia.com>
Reviewed-by: default avatarManuel Rego <rego@igalia.com>
Cr-Commit-Position: refs/heads/master@{#760041}
parent 02c5ec8c
Hide whitespace changes
Inline Side-by-side
Showing with 294 additions and 375 deletions
third_party/blink/web_tests/external/wpt/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html 0 → 100644
View file @ 51dbd7f7
<!DOCTYPE html>
<title>CSS Grid: automatic minimum in 'auto' columns</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' columns.">
<link rel="stylesheet" href="/css/support/grid.css">
<link rel="stylesheet" href="/fonts/ahem.css">
<style>
.grid { font: 10px/1 Ahem; }
.minWidth10 { min-width: 10px; }
.minWidth20 { min-width: 20px; }
.minWidth30 { min-width: 30px; }
.minWidth40 { min-width: 40px; }
.minWidth50 { min-width: 50px; }
.minWidth60 { min-width: 60px; }
.minWidth70 { min-width: 70px; }
.minWidth90 { min-width: 90px; }
.minWidthMaxContent { min-width: max-content; }
.width50 { width: 50px; }
.width60 { width: 60px; }
.width200 { width: 200px; }
.border5 { border: 5px solid #abc; }
.padding8 { padding: 0px 8px 0px; }
/* All these 4 cases are equivalent. We use them interchangeably. */
.gridAuto { grid-template-columns: auto; }
.gridMinMaxAutoAuto { grid-template-columns: minmax(auto, auto); }
.gridMinMaxAutoMaxContent { grid-template-columns: minmax(auto, max-content); }
.gridMinMaxMinContentAuto { grid-template-columns: minmax(min-content, auto); }
/* All these 3 cases are equivalent. We use them interchangeably. */
.gridAutoAndAuto { grid-template-columns: auto auto; }
.gridAutoAndMinMaxAutoAuto { grid-template-columns: auto minmax(auto, auto); }
.gridMinMaxAutoMaxContentAndAuto { grid-template-columns: minmax(auto, max-content) auto; }
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAuto">
<div class="firstRowFirstColumn minWidth40">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoItemSmallerThanMinSize">
<div class="firstRowFirstColumn minWidth40">XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAuto">
<div class="firstRowFirstColumn minWidth40">XX XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContent">
<div class="firstRowFirstColumn minWidth40">XXX XX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxMinContentAuto" id="gridMinMaxMinContentAuto">
<div class="firstRowFirstColumn minWidth40">X X X X X X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMultipleItems">
<div class="firstRowFirstColumn minWidth30">XX</div>
<div class="secondRowFirstColumn minWidth20"">XXXX XXXX</div>
<div class="thirdRowAutoColumn minWidth10">XX XXXXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth">
<div class="firstRowFirstColumn minWidth30">XX</div>
<div class="secondRowFirstColumn">XXXXXX</div>
<div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth">
<div class="firstRowFirstColumn minWidth30">XX</div>
<div class="secondRowFirstColumn">XX XXXXXXXX</div>
<div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedWidthChildren">
<div class="firstRowFirstColumn width200 minWidth50"></div>
<div class="firstRowSecondColumn width50"></div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
<div class="firstRowFirstColumn">XX XX</div>
<div class="secondRowBothColumn minWidth50">XXXXXX X XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
<div class="secondRowBothColumn minWidth60">XX XX XX</div>
<div class="firstRowSecondColumn">X X</div>
<div class="firstRowSecondColumn">XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
<div class="firstRowSecondColumn">X XXX XX</div>
<div class="secondRowBothColumn minWidth70">XXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
<div class="secondRowBothColumn minWidth70">XX XX XX</div>
<div class="firstRowBothColumn">XXXXX X XXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
<div class="firstRowSecondColumn minWidth60">X XXX XX</div>
<div class="secondRowBothColumn minWidth90">XXXXX XXXXX</div>
<div class="firstRowFirstColumn">XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
<div class="secondRowBothColumn">XX XX XX XX</div>
<div class="firstRowFirstColumn minWidth40">XXX</div>
<div class="firstRowBothColumn minWidth90">X XX XXX</div>
<div class="firstRowSecondColumn">X XX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedWidthChild">
<div class="firstRowFirstColumn width60">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndMinWidth">
<div class="firstRowFirstColumn width60 minWidth40">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndHigherMinWidth">
<div class="firstRowFirstColumn width60 minWidth90">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidth">
<div class="firstRowBothColumn width50">XX XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndMinWidth">
<div class="firstRowBothColumn width60 minWidth50">XX XXX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth">
<div class="firstRowBothColumn width60 minWidth70">XX XXX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorder">
<div class="firstRowFirstColumn minWidth40 border5">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinWidthWithPadding">
<div class="firstRowFirstColumn minWidth40 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorderAndPadding">
<div class="firstRowFirstColumn minWidth40 border5 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorder">
<div class="firstRowFirstColumn border5">XX XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinWidthWithPadding">
<div class="firstRowFirstColumn padding8">XX XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8">XX XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorder">
<div class="firstRowFirstColumn minWidthMaxContent border5">X XXXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithPadding">
<div class="firstRowFirstColumn minWidthMaxContent padding8">X XXXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8 minWidthMaxContent">X XXXX X</div>
</div>
</div>
<script>
function testGridColumnsValues(id, computedColumnValue)
{
assert_equals(window.getComputedStyle(document.getElementById(id))
.getPropertyValue('grid-template-columns'), computedColumnValue);
}
setup({ explicit_done: true });
document.fonts.ready.then(() => {
test(() => {
testGridColumnsValues('gridAuto', '40px');
testGridColumnsValues('gridAutoItemSmallerThanMinSize', '40px');
testGridColumnsValues('gridMinMaxAutoAuto', '40px');
testGridColumnsValues('gridMinMaxAutoMaxContent', '40px');
testGridColumnsValues('gridMinMaxMinContentAuto', '40px');
testGridColumnsValues('gridAutoMultipleItems', '30px');
testGridColumnsValues('gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth', '60px');
testGridColumnsValues('gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth', '80px');
testGridColumnsValues('gridAutoAndAutoFixedWidthChildren', '200px 50px');
}, 'Check that min-width is honored when sizing auto columns.');
test(() => {
testGridColumnsValues('gridAutoAndAutoOneSpanningOneNonSpannig', '35px 15px');
testGridColumnsValues('gridAutoAndAutoOneSpanningMultipleNonSpanning', '20px 40px');
testGridColumnsValues('gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning', '20px 50px');
testGridColumnsValues('gridAutoAndMinMaxAutoAutoMultipleSpanning', '35px 35px');
testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning', '25px 65px');
testGridColumnsValues('gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning', '40px 50px');
}, 'Check that min-width is honored when sizing auto columns and spanning grid items.');
test(() => {
testGridColumnsValues('gridAutoWithFixedWidthChild', '60px');
testGridColumnsValues('gridAutoWithFixedWidthChildAndMinWidth', '60px');
testGridColumnsValues('gridAutoWithFixedWidthChildAndHigherMinWidth', '90px');
testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidth', '25px 25px');
testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndMinWidth', '30px 30px');
testGridColumnsValues('gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth', '35px 35px');
}, 'Check the interactions between width and min-width and auto tracks.');
test(() => {
testGridColumnsValues('gridAutoFixedMinWidthWithBorder', '50px');
testGridColumnsValues('gridAutoFixedMinWidthWithPadding', '56px');
testGridColumnsValues('gridAutoFixedMinWidthWithBorderAndPadding', '66px');
testGridColumnsValues('gridAutoAutoMinWidthWithBorder', '40px');
testGridColumnsValues('gridAutoAutoMinWidthWithPadding', '46px');
testGridColumnsValues('gridAutoAutoMinWidthWithBorderAndPadding', '56px');
testGridColumnsValues('gridAutoMaxContentMinWidthWithBorder', '90px');
testGridColumnsValues('gridAutoMaxContentMinWidthWithPadding', '96px');
testGridColumnsValues('gridAutoMaxContentMinWidthWithBorderAndPadding', '106px');
}, '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-columns-expected.txt deleted 100644 → 0
View file @ 02c5ec8c
Check that min-width is honored when sizing auto columns.
PASS window.getComputedStyle(gridAuto, '').getPropertyValue('grid-template-columns') is "40px"
PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('grid-template-columns') is "40px"
PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('grid-template-columns') is "40px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('grid-template-columns') is "40px"
PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('grid-template-columns') is "40px"
PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('grid-template-columns') is "30px"
PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth, '').getPropertyValue('grid-template-columns') is "60px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth, '').getPropertyValue('grid-template-columns') is "80px"
PASS window.getComputedStyle(gridAutoAndAutoFixedWidthChildren, '').getPropertyValue('grid-template-columns') is "200px 50px"
Check that min-width is honored when sizing auto columns and spanning grid items.
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('grid-template-columns') is "35px 15px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-columns') is "20px 40px"
PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('grid-template-columns') is "20px 50px"
PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('grid-template-columns') is "35px 35px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-columns') is "25px 65px"
PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('grid-template-columns') is "40px 50px"
Check the interactions between width and min-width and auto tracks.
PASS window.getComputedStyle(gridAutoWithFixedWidthChild, '').getPropertyValue('grid-template-columns') is "60px"
PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndMinWidth, '').getPropertyValue('grid-template-columns') is "60px"
PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndHigherMinWidth, '').getPropertyValue('grid-template-columns') is "90px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidth, '').getPropertyValue('grid-template-columns') is "25px 25px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndMinWidth, '').getPropertyValue('grid-template-columns') is "30px 30px"
PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth, '').getPropertyValue('grid-template-columns') is "35px 35px"
Check that borders and paddings are considering when computing min sizes.
PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorder, '').getPropertyValue('grid-template-columns') is "50px"
PASS window.getComputedStyle(gridAutoFixedMinWidthWithPadding, '').getPropertyValue('grid-template-columns') is "56px"
PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorderAndPadding, '').getPropertyValue('grid-template-columns') is "66px"
PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorder, '').getPropertyValue('grid-template-columns') is "40px"
PASS window.getComputedStyle(gridAutoAutoMinWidthWithPadding, '').getPropertyValue('grid-template-columns') is "46px"
PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorderAndPadding, '').getPropertyValue('grid-template-columns') is "56px"
PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorder, '').getPropertyValue('grid-template-columns') is "90px"
PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithPadding, '').getPropertyValue('grid-template-columns') is "96px"
PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorderAndPadding, '').getPropertyValue('grid-template-columns') is "106px"
PASS successfullyParsed is true
TEST COMPLETE
XXXXXX
XX
XX XX XX
XXX XX X
X X X X X X
XX
XXXX XXXX
XX XXXXX X
XX
XXXXXX
XXXX XXXX
XX
XX XXXXXXXX
XXXX XXXX
XX XX
XXXXXX X XXX
XX XX XX
X X
XXXX
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
XX XXX XX
XXXXXX
XXXXXX
XXXXXX
XX XXX X
XX XXX X
XX XXX X
X XXXX X
X XXXX X
X XXXX X
third_party/blink/web_tests/fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html deleted 100644 → 0
View file @ 02c5ec8c
<html>
<link href="resources/grid.css" rel="stylesheet"/>
<style>
.grid { font: 10px/1 Ahem; }
.minWidth10 { min-width: 10px; }
.minWidth20 { min-width: 20px; }
.minWidth30 { min-width: 30px; }
.minWidth40 { min-width: 40px; }
.minWidth50 { min-width: 50px; }
.minWidth60 { min-width: 60px; }
.minWidth70 { min-width: 70px; }
.minWidth90 { min-width: 90px; }
.minWidthMaxContent { min-width: -webkit-max-content; }
.width50 { width: 50px; }
.width60 { width: 60px; }
.width200 { width: 200px; }
.border5 { border: 5px solid #abc; }
.padding8 { padding: 0px 8px 0px; }
/* All these 4 cases are equivalent. We use them interchangeably. */
.gridAuto { grid-template-columns: auto; }
.gridMinMaxAutoAuto { grid-template-columns: minmax(auto, auto); }
.gridMinMaxAutoMaxContent { grid-template-columns: minmax(auto, max-content); }
.gridMinMaxMinContentAuto { grid-template-columns: minmax(min-content, auto); }
/* All these 3 cases are equivalent. We use them interchangeably. */
.gridAutoAndAuto { grid-template-columns: auto auto; }
.gridAutoAndMinMaxAutoAuto { grid-template-columns: auto minmax(auto, auto); }
.gridMinMaxAutoMaxContentAndAuto { grid-template-columns: minmax(auto, max-content) auto; }
</style>
<script src="../../resources/js-test.js"></script>
<body>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAuto">
<div class="firstRowFirstColumn minWidth40">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoItemSmallerThanMinSize">
<div class="firstRowFirstColumn minWidth40">XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAuto">
<div class="firstRowFirstColumn minWidth40">XX XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContent">
<div class="firstRowFirstColumn minWidth40">XXX XX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxMinContentAuto" id="gridMinMaxMinContentAuto">
<div class="firstRowFirstColumn minWidth40">X X X X X X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMultipleItems">
<div class="firstRowFirstColumn minWidth30">XX</div>
<div class="secondRowFirstColumn minWidth20"">XXXX XXXX</div>
<div class="thirdRowAutoColumn minWidth10">XX XXXXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoAuto" id="gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth">
<div class="firstRowFirstColumn minWidth30">XX</div>
<div class="secondRowFirstColumn">XXXXXX</div>
<div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContent" id="gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth">
<div class="firstRowFirstColumn minWidth30">XX</div>
<div class="secondRowFirstColumn">XX XXXXXXXX</div>
<div class="thirdRowAutoColumn minWidth20">XXXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoFixedWidthChildren">
<div class="firstRowFirstColumn width200 minWidth50"></div>
<div class="firstRowSecondColumn width50"></div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningOneNonSpannig">
<div class="firstRowFirstColumn">XX XX</div>
<div class="secondRowBothColumn minWidth50">XXXXXX X XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningMultipleNonSpanning">
<div class="secondRowBothColumn minWidth60">XX XX XX</div>
<div class="firstRowSecondColumn">X X</div>
<div class="firstRowSecondColumn">XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning">
<div class="firstRowSecondColumn">X XXX XX</div>
<div class="secondRowBothColumn minWidth70">XXX XXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndMinMaxAutoAuto" id="gridAutoAndMinMaxAutoAutoMultipleSpanning">
<div class="secondRowBothColumn minWidth70">XX XX XX</div>
<div class="firstRowBothColumn">XXXXX X XXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning">
<div class="firstRowSecondColumn minWidth60">X XXX XX</div>
<div class="secondRowBothColumn minWidth90">XXXXX XXXXX</div>
<div class="firstRowFirstColumn">XX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridMinMaxAutoMaxContentAndAuto" id="gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning">
<div class="secondRowBothColumn">XX XX XX XX</div>
<div class="firstRowFirstColumn minWidth40">XXX</div>
<div class="firstRowBothColumn minWidth90">X XX XXX</div>
<div class="firstRowSecondColumn">X XX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedWidthChild">
<div class="firstRowFirstColumn width60">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndMinWidth">
<div class="firstRowFirstColumn width60 minWidth40">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoWithFixedWidthChildAndHigherMinWidth">
<div class="firstRowFirstColumn width60 minWidth90">XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidth">
<div class="firstRowBothColumn width50">XX XXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndMinWidth">
<div class="firstRowBothColumn width60 minWidth50">XX XXX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAutoAndAuto" id="gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth">
<div class="firstRowBothColumn width60 minWidth70">XX XXX XX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorder">
<div class="firstRowFirstColumn minWidth40 border5">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinWidthWithPadding">
<div class="firstRowFirstColumn minWidth40 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoFixedMinWidthWithBorderAndPadding">
<div class="firstRowFirstColumn minWidth40 border5 padding8">XXXXXX</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorder">
<div class="firstRowFirstColumn border5">XX XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinWidthWithPadding">
<div class="firstRowFirstColumn padding8">XX XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoAutoMinWidthWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8">XX XXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorder">
<div class="firstRowFirstColumn minWidthMaxContent border5">X XXXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithPadding">
<div class="firstRowFirstColumn minWidthMaxContent padding8">X XXXX X</div>
</div>
</div>
<div class="constrainedContainer">
<div class="grid gridAuto" id="gridAutoMaxContentMinWidthWithBorderAndPadding">
<div class="firstRowFirstColumn border5 padding8 minWidthMaxContent">X XXXX X</div>
</div>
</div>
<script>
function testGridColumnsValues(id, computedColumnValue)
{
shouldBeEqualToString("window.getComputedStyle(" + id + ", '').getPropertyValue('grid-template-columns')", computedColumnValue);
}
debug("Check that min-width is honored when sizing auto columns.");
testGridColumnsValues("gridAuto", "40px");
testGridColumnsValues("gridAutoItemSmallerThanMinSize", "40px");
testGridColumnsValues("gridMinMaxAutoAuto", "40px");
testGridColumnsValues("gridMinMaxAutoMaxContent", "40px");
testGridColumnsValues("gridMinMaxMinContentAuto", "40px");
testGridColumnsValues("gridAutoMultipleItems", "30px");
testGridColumnsValues("gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth", "60px");
testGridColumnsValues("gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth", "80px");
testGridColumnsValues("gridAutoAndAutoFixedWidthChildren", "200px 50px");
debug("");
debug("Check that min-width is honored when sizing auto columns and spanning grid items.");
testGridColumnsValues("gridAutoAndAutoOneSpanningOneNonSpannig", "35px 15px");
testGridColumnsValues("gridAutoAndAutoOneSpanningMultipleNonSpanning", "20px 40px");
testGridColumnsValues("gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning", "20px 50px");
testGridColumnsValues("gridAutoAndMinMaxAutoAutoMultipleSpanning", "35px 35px");
testGridColumnsValues("gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning", "25px 65px");
testGridColumnsValues("gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning", "40px 50px");
debug("");
debug("Check the interactions between width and min-width and auto tracks.");
testGridColumnsValues("gridAutoWithFixedWidthChild", "60px");
testGridColumnsValues("gridAutoWithFixedWidthChildAndMinWidth", "60px");
testGridColumnsValues("gridAutoWithFixedWidthChildAndHigherMinWidth", "90px");
testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidth", "25px 25px");
testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndMinWidth", "30px 30px");
testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth", "35px 35px");
debug("");
debug("Check that borders and paddings are considering when computing min sizes.");
testGridColumnsValues("gridAutoFixedMinWidthWithBorder", "50px");
testGridColumnsValues("gridAutoFixedMinWidthWithPadding", "56px");
testGridColumnsValues("gridAutoFixedMinWidthWithBorderAndPadding", "66px");
testGridColumnsValues("gridAutoAutoMinWidthWithBorder", "40px");
testGridColumnsValues("gridAutoAutoMinWidthWithPadding", "46px");
testGridColumnsValues("gridAutoAutoMinWidthWithBorderAndPadding", "56px");
testGridColumnsValues("gridAutoMaxContentMinWidthWithBorder", "90px");
testGridColumnsValues("gridAutoMaxContentMinWidthWithPadding", "96px");
testGridColumnsValues("gridAutoMaxContentMinWidthWithBorderAndPadding", "106px");
</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