diff options
Diffstat (limited to 'testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html')
-rw-r--r-- | testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html | 294 |
1 files changed, 294 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html new file mode 100644 index 0000000000..0bac13960b --- /dev/null +++ b/testing/web-platform/tests/css/css-grid/layout-algorithm/grid-automatic-minimum-for-auto-columns-001.html @@ -0,0 +1,294 @@ +<!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> |