Update web-platform-tests to revision 9d583db6a1a16763322dce912bf057490cd7b0c7

This commit is contained in:
WPT Sync Bot 2020-04-19 08:19:10 +00:00
parent 306e8ac5f9
commit e116a19f0b
243 changed files with 6909 additions and 2244 deletions

View file

@ -1,11 +1,11 @@
<!DOCTYPE HTML>
<title>CSS Grid Layout Test: min and max size when computing the flex fraction</title>
<title>CSS Grid Layout Test: min and max width when computing the flex column</title>
<link rel="author" title="Sergio Villar" href="mailto:svillar@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid/#algo-flex-tracks"/>
<link rel="issue" href="https://bugs.chromium.org/p/chromium/issues/detail?id=660690"/>
<link href="/css/support/grid.css" rel="stylesheet"/>
<link href="/css/support/width-keyword-classes.css" rel="stylesheet">
<meta name="assert" content="This test ensures that minimum and maximum sizes are used to compute the flex fraction for indefinite free spaces."/>
<meta name="assert" content="This test ensures that minimum and maximum widths are used to compute the flex fraction for grid columns."/>
<style>
.grid {
margin: 3px;

View file

@ -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>

View file

@ -0,0 +1,305 @@
<!DOCTYPE html>
<html>
<title>CSS Grid: indefinite grid container and percentage rows.</title>
<link rel="author" title="Manuel Rego Casasnovas" href="mailto:rego@igalia.com"/>
<link rel="help" href="https://drafts.csswg.org/css-grid-1/#track-sizing"/>
<link rel="help" href="https://drafts.csswg.org/css-grid/#valdef-grid-template-columns-length-percentage"/>
<meta name="assert" content="This test checks that percentage rows behave as 'auto' if the height of the grid container is indefinite to compute the grid container intrinsic height, but are afterwards resolved against that size."/>
<link rel="issue" href="https://crbug.com/616716"/>
<link rel="stylesheet" href="/css/support/grid.css"/>
<link rel="stylesheet" href="/css/support/height-keyword-classes.css"/>
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css"/>
<style>
.wrapper {
position: relative;
clear: both;
}
.grid {
font: 10px/1 Ahem;
width: fit-content;
}
.abspos {
position: absolute;
}
.fixedSize {
width: 200px;
height: 200px;
}
.oneRow100 {
grid-template-rows: 100%;
}
.oneRow50 {
grid-template-rows: 50%;
}
.twoRows {
grid-template-rows: 100px 50%;
}
</style>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<script src="/resources/check-layout-th.js"></script>
<script type="text/javascript">
setup({ explicit_done: true });
</script>
<body onload="document.fonts.ready.then(() => { checkLayout('.grid'); })">
<div id="log"></div>
<div class="wrapper">
<div class="grid oneRow100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fixedSize oneRow100" data-expected-width="200" data-expected-height="200">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="200">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos oneRow100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content oneRow100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content oneRow100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content oneRow100" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="10">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid oneRow50" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fixedSize oneRow50" data-expected-width="200" data-expected-height="200">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos oneRow50" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content oneRow50" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content oneRow50" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content oneRow50" data-expected-width="40" data-expected-height="10">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="5">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid twoRows" data-expected-width="40" data-expected-height="110">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos twoRows" data-expected-width="40" data-expected-height="110">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content twoRows" data-expected-width="40" data-expected-height="110">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="110">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content twoRows" data-expected-width="40" data-expected-height="110">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="55">
XX X
</div>
</div>
</div>
<div class="wrapper">
<div class="grid twoRows" data-expected-width="40" data-expected-height="100">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
XX X
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fixedSize twoRows" data-expected-width="200" data-expected-height="200">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="100">
XX X
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="200" data-expected-height="100">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid abspos twoRows" data-expected-width="40" data-expected-height="100">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
XX X
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid max-content twoRows" data-expected-width="40" data-expected-height="100">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
XX X
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid fit-content twoRows" data-expected-width="40" data-expected-height="100">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
XX X
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
</div>
</div>
</div>
<div class="wrapper">
<div class="grid min-content twoRows" data-expected-width="40" data-expected-height="100">
<div class="firstRowFirstColumn"
data-offset-x="0" data-offset-y="0" data-expected-width="40" data-expected-height="100">
XX X
</div>
<div class="secondRowFirstColumn"
data-offset-x="0" data-offset-y="100" data-expected-width="40" data-expected-height="50">
</div>
</div>
</div>
</body>
</html>