+2015-09-15 Sergio Villar Senin <svillar@igalia.com>
+
+ [CSS Grid Layout] Using automatic (instead of min-content) minimums for 'auto' tracks
+ https://bugs.webkit.org/show_bug.cgi?id=142329
+
+ Reviewed by Darin Adler.
+
+ Based on Blink's r198697 by <svillar@igalia.com> and r200478 by <jfernandez@igalia.com>
+
+ New tests to verify that auto is a valid keyword inside
+ minmax. Updated the expectations of existing tests to
+ reflect the new status of auto.
+
+ * fast/css-grid-layout/grid-auto-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-auto-columns-rows-get-set.html:
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-columns-expected.txt: Added.
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html: Added.
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-rows-expected.txt: Added.
+ * fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html: Added.
+ * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-columns-rows-get-set-multiple-expected.txt:
+ * fast/css-grid-layout/grid-columns-rows-get-set-multiple.html:
+ * fast/css-grid-layout/grid-columns-rows-get-set.html:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple-expected.txt:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set-multiple.html:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set.html:
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set-multiple.js:
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
+ * fast/css-grid-layout/resources/non-grid-columns-rows-get-set-multiple.js:
+ * fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
+
2015-09-17 Javier Fernandez <jfernandez@igalia.com>
[CSS Grid Layout] Relayout whenever Box Alignment properties change
PASS window.getComputedStyle(gridAutoMinMax, '').getPropertyValue('-webkit-grid-auto-columns') is "minmax(30%, 100px)"
PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-rows') is "-webkit-min-content"
PASS window.getComputedStyle(gridAutoMinMaxContent, '').getPropertyValue('-webkit-grid-auto-columns') is "-webkit-max-content"
+PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('-webkit-grid-auto-rows') is "minmax(auto, 48px)"
+PASS window.getComputedStyle(gridAutoAutoInMinMax, '').getPropertyValue('-webkit-grid-auto-columns') is "minmax(80px, auto)"
Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created
PASS window.getComputedStyle(gridAutoFixedFixedWithChildren, '').getPropertyValue('-webkit-grid-auto-rows') is "30px"
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is 'auto'
-PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows') is 'auto'
Test setting grid-auto-columns and grid-auto-rows to 'inherit' through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns') is '50px'
-webkit-grid-template-columns: 20px;
}
+.gridAutoAutoInMinMax {
+ -webkit-grid-auto-rows: minmax(auto, 8vh);
+ -webkit-grid-auto-columns: minmax(10vw, auto);
+}
+
</style>
<script src="../../resources/js-test-pre.js"></script>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<div class="grid gridAutoFixedFixed" id="gridAutoFixedFixed"></div>
<div class="grid gridAutoMinMax" id="gridAutoMinMax"></div>
<div class="grid gridAutoMinMaxContent" id="gridAutoMinMaxContent"></div>
+<div class="grid gridAutoAutoInMinMax" id="gridAutoAutoInMinMax"></div>
<div class="grid gridAutoFixedFixed" id="gridAutoFixedFixedWithChildren">
<div class="sizedToGridArea firstRowFirstColumn"></div>
</div>
testGridAutoDefinitionsValues(document.getElementById("gridAutoFixedFixed"), "30px", "50px");
testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMax"), "minmax(10%, 15px)", "minmax(30%, 100px)");
testGridAutoDefinitionsValues(document.getElementById("gridAutoMinMaxContent"), "-webkit-min-content", "-webkit-max-content");
+testGridAutoDefinitionsValues(document.getElementById("gridAutoAutoInMinMax"), "minmax(auto, 48px)", "minmax(80px, auto)");
debug("");
debug("Test that getting grid-template-columns and grid-template-rows set through CSS lists every track listed whether implicitly or explicitly created");
element = document.createElement("div");
document.body.appendChild(element);
-// Auto is not allowed inside minmax.
-element.style.webkitGridAutoColumns = "minmax(auto, 8vh)";
-element.style.webkitGridAutoRows = "minmax(10vw, auto)";
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-columns')", "'auto'");
-shouldBe("getComputedStyle(element, '').getPropertyValue('-webkit-grid-auto-rows')", "'auto'");
-
-element = document.createElement("div");
-document.body.appendChild(element);
// None is not allowed for grid-auto-{rows|columns}.
element.style.webkitGridAutoColumns = "none";
element.style.webkitGridAutoRows = "none";
--- /dev/null
+Check that min-width is honored when sizing auto columns.
+PASS window.getComputedStyle(gridAuto, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('-webkit-grid-template-columns') is "30px"
+PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "60px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "80px"
+
+Check that min-width is honored when sizing auto columns and spanning grid items.
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('-webkit-grid-template-columns') is "35px 15px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "20px 40px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "20px 50px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "35px 35px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "25px 65px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-columns') is "40px 50px"
+
+Check the interactions between width and min-width and auto tracks.
+PASS window.getComputedStyle(gridAutoWithFixedWidthChild, '').getPropertyValue('-webkit-grid-template-columns') is "60px"
+PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoWithFixedWidthChildAndHigherMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "90px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidth, '').getPropertyValue('-webkit-grid-template-columns') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedWidthAndHigherMinWidth, '').getPropertyValue('-webkit-grid-template-columns') is "35px 35px"
+
+Check that borders and paddings are considering when computing min sizes.
+PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorder, '').getPropertyValue('-webkit-grid-template-columns') is "50px"
+PASS window.getComputedStyle(gridAutoFixedMinWidthWithPadding, '').getPropertyValue('-webkit-grid-template-columns') is "56px"
+PASS window.getComputedStyle(gridAutoFixedMinWidthWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-columns') is "66px"
+PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorder, '').getPropertyValue('-webkit-grid-template-columns') is "40px"
+PASS window.getComputedStyle(gridAutoAutoMinWidthWithPadding, '').getPropertyValue('-webkit-grid-template-columns') is "46px"
+PASS window.getComputedStyle(gridAutoAutoMinWidthWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-columns') is "56px"
+PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorder, '').getPropertyValue('-webkit-grid-template-columns') is "90px"
+PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithPadding, '').getPropertyValue('-webkit-grid-template-columns') is "96px"
+PASS window.getComputedStyle(gridAutoMaxContentMinWidthWithBorderAndPadding, '').getPropertyValue('-webkit-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
--- /dev/null
+<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; }
+
+.border5 { border: 5px solid #abc; }
+.padding8 { padding: 0px 8px 0px; }
+
+/* All these 4 cases are equivalent. We use them interchangeably. */
+.gridAuto { -webkit-grid-template-columns: auto; }
+.gridMinMaxAutoAuto { -webkit-grid-template-columns: minmax(auto, auto); }
+.gridMinMaxAutoMaxContent { -webkit-grid-template-columns: minmax(auto, -webkit-max-content); }
+.gridMinMaxMinContentAuto { -webkit-grid-template-columns: minmax(-webkit-min-content, auto); }
+
+/* All these 3 cases are equivalent. We use them interchangeably. */
+.gridAutoAndAuto { -webkit-grid-template-columns: auto auto; }
+.gridAutoAndMinMaxAutoAuto { -webkit-grid-template-columns: auto minmax(auto, auto); }
+.gridMinMaxAutoMaxContentAndAuto { -webkit-grid-template-columns: minmax(auto, -webkit-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="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('-webkit-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");
+
+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", "40px");
+testGridColumnsValues("gridAutoWithFixedWidthChildAndHigherMinWidth", "90px");
+testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidth", "25px 25px");
+testGridColumnsValues("gridAutoAndAutoOneSpanningFixedWidthAndMinWidth", "25px 25px");
+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>
--- /dev/null
+
+Check that min-height is honored when sizing auto rows.
+PASS window.getComputedStyle(gridAuto, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridAutoItemSmallerThanMinSize, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoAuto, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContent, '').getPropertyValue('-webkit-grid-template-rows') is "20px"
+PASS window.getComputedStyle(gridMinMaxMinContentAuto, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridAutoMultipleItems, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "50px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
+
+Check that min-height is honored when sizing auto rows and spanning grid items.
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningOneNonSpannig, '').getPropertyValue('-webkit-grid-template-rows') is "10px 40px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "40px 20px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoOneSpanningOneNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "40px 30px"
+PASS window.getComputedStyle(gridAutoAndMinMaxAutoAutoMultipleSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "35px 35px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoOneSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "25px 65px"
+PASS window.getComputedStyle(gridMinMaxAutoMaxContentAndAutoMultipleSpanningMultipleNonSpanning, '').getPropertyValue('-webkit-grid-template-rows') is "50px 40px"
+
+Check the interactions between height and min-height and auto tracks.
+PASS window.getComputedStyle(gridAutoWithFixedHeightChild, '').getPropertyValue('-webkit-grid-template-rows') is "60px"
+PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridAutoWithFixedHeightChildAndHigherMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "90px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeight, '').getPropertyValue('-webkit-grid-template-rows') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "25px 25px"
+PASS window.getComputedStyle(gridAutoAndAutoOneSpanningFixedHeightAndHigherMinHeight, '').getPropertyValue('-webkit-grid-template-rows') is "35px 35px"
+
+Check that borders and paddings are considering when computing min sizes.
+PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorder, '').getPropertyValue('-webkit-grid-template-rows') is "50px"
+PASS window.getComputedStyle(gridAutoFixedMinHeightWithPadding, '').getPropertyValue('-webkit-grid-template-rows') is "56px"
+PASS window.getComputedStyle(gridAutoFixedMinHeightWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-rows') is "66px"
+PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorder, '').getPropertyValue('-webkit-grid-template-rows') is "40px"
+PASS window.getComputedStyle(gridAutoAutoMinHeightWithPadding, '').getPropertyValue('-webkit-grid-template-rows') is "46px"
+PASS window.getComputedStyle(gridAutoAutoMinHeightWithBorderAndPadding, '').getPropertyValue('-webkit-grid-template-rows') is "56px"
+PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorder, '').getPropertyValue('-webkit-grid-template-rows') is "30px"
+PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithPadding, '').getPropertyValue('-webkit-grid-template-rows') is "36px"
+PASS window.getComputedStyle(gridAutoMaxContentMinHeightWithBorderAndPadding, '').getPropertyValue('-webkit-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
--- /dev/null
+<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; }
+
+.border5 { border: 5px solid #abc; }
+.padding8 { padding: 8px 0px; }
+
+/* All these 4 cases are equivalent. We use them interchangeably. */
+.gridAuto { -webkit-grid-template-rows: auto; }
+.gridMinMaxAutoAuto { -webkit-grid-template-rows: minmax(auto, auto); }
+.gridMinMaxAutoMaxContent { -webkit-grid-template-rows: minmax(auto, -webkit-max-content); }
+.gridMinMaxMinContentAuto { -webkit-grid-template-rows: minmax(-webkit-min-content, auto); }
+
+/* All these 3 cases are equivalent. We use them interchangeably. */
+.gridAutoAndAuto { -webkit-grid-template-rows: auto auto; }
+.gridAutoAndMinMaxAutoAuto { -webkit-grid-template-rows: auto minmax(auto, auto); }
+.gridMinMaxAutoMaxContentAndAuto { -webkit-grid-template-rows: minmax(auto, -webkit-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="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('-webkit-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", "20px");
+testGridRowsValues("gridMinMaxMinContentAuto", "60px");
+testGridRowsValues("gridAutoMultipleItems", "60px");
+testGridRowsValues("gridMinMaxAutoAutoMultipleItemsOneWithoutMinHeight", "50px");
+testGridRowsValues("gridMinMaxAutoMaxContentMultipleItemsOneWithAutoMinHeight", "60px");
+
+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", "40px");
+testGridRowsValues("gridAutoWithFixedHeightChildAndHigherMinHeight", "90px");
+testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeight", "25px 25px");
+testGridRowsValues("gridAutoAndAutoOneSpanningFixedHeightAndMinHeight", "25px 25px");
+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>
PASS window.getComputedStyle(gridWithCalcInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "300px"
PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "415px"
PASS window.getComputedStyle(gridWithCalcComplexInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "300px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-columns') is "20px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMaxElement, '').getPropertyValue('-webkit-grid-template-rows') is "11px"
Test getting wrong values for -webkit-grid-template-columns and -webkit-grid-template-rows through CSS (they should resolve to the default: 'none')
PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS element.style.webkitGridTemplateColumns is "minmax(-webkit-min-content, -webkit-max-content)"
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "0px"
PASS element.style.webkitGridTemplateRows is "minmax(-webkit-max-content, -webkit-min-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px"
+PASS element.style.webkitGridTemplateColumns is "minmax(auto, -webkit-max-content)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "80px"
+PASS element.style.webkitGridTemplateRows is "minmax(10vw, auto)"
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "800px"
PASS element.style.webkitGridTemplateColumns is "3600fr"
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "600px"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
Test setting grid-template-columns and grid-template-rows back to 'none' through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px"
PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px 53px"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "400px 120px"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px 175px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "0px 30px"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "132px 60px"
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
PASS element.style.webkitGridTemplateColumns is "calc(25px + 40%) minmax(-webkit-min-content, calc(10% + 12px))"
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "100px 0px"
PASS element.style.webkitGridTemplateRows is "minmax(calc(75% - 350px), -webkit-max-content) auto"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "0px 16px"
+PASS element.style.webkitGridTemplateColumns is "auto minmax(16px, auto)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "90px 80px"
+PASS element.style.webkitGridTemplateRows is "minmax(auto, 15%) 10vw"
Test getting wrong values set from CSS
PASS window.getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 750px [last]"
-webkit-grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
font: 10px Ahem;
}
+.gridWithAutoInsideMinMax {
+ -webkit-grid-template-columns: minmax(auto, -webkit-min-content) 30px;
+ -webkit-grid-template-rows: calc(100px + 2em) minmax(10%, auto);
+}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<div class="grid gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
<div class="grid gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
+<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script src="resources/grid-columns-rows-get-set-multiple.js"></script>
<script src="../../resources/js-test-post.js"></script>
-<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
+<!DOCTYPE html>
<html>
<head>
<link href="resources/grid.css" rel="stylesheet">
-webkit-grid-template-columns: minmax(10%, calc(50% + 15px));
-webkit-grid-template-rows: minmax(calc(20px + 10%), 50%);
}
+.gridWithAutoInsideMinMax {
+ -webkit-grid-template-columns: minmax(auto, 20px);
+ -webkit-grid-template-rows: minmax(max-content, auto);
+}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<div class="grid gridWithCalcComplex" id="gridWithCalcComplexElement"></div>
<div class="grid gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMaxElement"></div>
<div class="grid gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMaxElement"></div>
+<div class="grid gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMaxElement">
+ <div class="gridItem"></div>
+</div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script src="resources/grid-columns-rows-get-set.js"></script>
<script src="../../resources/js-test-post.js"></script>
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(20px, 50%)"
PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(10%, calc(50% + 15px))"
PASS window.getComputedStyle(gridWithCalcComplexInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(calc(20px + 10%), 50%)"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 20px)"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(-webkit-min-content, auto)"
Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')
PASS window.getComputedStyle(gridWithFitContentElement, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS element.style.webkitGridTemplateColumns is "3fr"
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "4fr"
PASS element.style.webkitGridTemplateRows is "4fr"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 48px)"
+PASS element.style.webkitGridTemplateColumns is "minmax(auto, 8vh)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(80px, auto)"
+PASS element.style.webkitGridTemplateRows is "minmax(10vw, auto)"
Test setting grid-template-columns and grid-template-rows to bad values through JS
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
Test setting grid-template-columns and grid-template-rows back to 'none' through JS
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "18px"
PASS window.getComputedStyle(gridWithCalcAndMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(25%, -webkit-max-content) calc(10% - 7px)"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(calc(23px + 10%), 400px) 120px"
PASS window.getComputedStyle(gridWithCalcInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "150px minmax(5%, calc(50% - 125px))"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-columns') is "minmax(auto, 20px) 10%"
+PASS window.getComputedStyle(gridWithAutoInsideMinMax, '').getPropertyValue('-webkit-grid-template-rows') is "-webkit-max-content minmax(-webkit-min-content, auto)"
Test the initial value
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
PASS element.style.webkitGridTemplateColumns is "50% 12vw"
PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "5% 510px"
PASS element.style.webkitGridTemplateRows is "5% 85vh"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "auto minmax(16px, auto)"
+PASS element.style.webkitGridTemplateColumns is "auto minmax(16px, auto)"
+PASS getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "minmax(auto, 15%) 80px"
+PASS element.style.webkitGridTemplateRows is "minmax(auto, 15%) 10vw"
Test getting wrong values set from CSS
PASS getComputedStyle(gridWithNoneAndAuto, '').getPropertyValue('-webkit-grid-template-columns') is 'none'
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "none"
-PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-rows') is "none"
Test setting grid-template-columns and grid-template-rows to 'inherit' through JS
PASS window.getComputedStyle(element, '').getPropertyValue('-webkit-grid-template-columns') is "50px 1fr [last]"
-webkit-grid-template-rows: calc(150px) minmax(5%, calc(50% - 125px));
font: 10px Ahem;
}
+.gridWithAutoInsideMinMax {
+ -webkit-grid-template-columns: minmax(auto, 20px) 10%;
+ -webkit-grid-template-rows: -webkit-max-content minmax(-webkit-min-content, auto);
+}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<div class="gridWithCalcAndFixed" id="gridWithCalcAndFixed"></div>
<div class="gridWithCalcAndMinMax" id="gridWithCalcAndMinMax"></div>
<div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
+<div class="gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script src="resources/non-grid-columns-rows-get-set-multiple.js"></script>
<script src="../../resources/js-test-post.js"></script>
-webkit-grid-template-columns: minmax(10%, calc(50% + 15px));
-webkit-grid-template-rows: minmax(calc(20px + 10%), 50%);
}
+.gridWithAutoInsideMinMax {
+ -webkit-grid-template-columns: minmax(auto, 20px);
+ -webkit-grid-template-rows: minmax(-webkit-min-content, auto);
+}
</style>
<script src="../../resources/js-test-pre.js"></script>
</head>
<div class="gridWithCalcComplex" id="gridWithCalcComplex"></div>
<div class="gridWithCalcInsideMinMax" id="gridWithCalcInsideMinMax"></div>
<div class="gridWithCalcComplexInsideMinMax" id="gridWithCalcComplexInsideMinMax"></div>
+<div class="gridWithAutoInsideMinMax" id="gridWithAutoInsideMinMax"></div>
<script src="resources/grid-definitions-parsing-utils.js"></script>
<script src="resources/non-grid-columns-rows-get-set.js"></script>
<script src="../../resources/js-test-post.js"></script>
testGridTemplatesValues(document.getElementById("gridWithCalcAndFixed"), "50% 80px", "88px 25%", "400px 80px", "88px 150px");
testGridTemplatesValues(document.getElementById("gridWithCalcAndMinMax"), "190px minmax(-webkit-min-content, 80px)", "minmax(25%, -webkit-max-content) 53px", "190px 80px", "150px 53px");
testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(103px, 400px) 120px", "150px minmax(5%, 175px)", "400px 120px", "150px 175px");
+testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMax"), "0px 30px", "132px 60px");
debug("");
debug("Test the initial value");
testGridTemplatesSetJSValues("16em 2fr", "14fr auto", "160px 640px", "600px 0px");
testGridTemplatesSetJSValues("calc(25px) calc(2em)", "auto calc(10%)", "25px 20px", "0px 60px", "calc(25px) calc(2em)", "auto calc(10%)");
testGridTemplatesSetJSValues("calc(25px + 40%) minmax(-webkit-min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), -webkit-max-content) auto", "345px 92px", "100px 0px", "calc(25px + 40%) minmax(-webkit-min-content, calc(10% + 12px))", "minmax(calc(75% - 350px), -webkit-max-content) auto");
+testGridTemplatesSetJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw", "0px 16px", "90px 80px");
debug("");
debug("Test getting wrong values set from CSS");
testGridTemplatesSetBadJSValues("auto none", "auto none");
testGridTemplatesSetBadJSValues("auto none 16em", "auto 18em none");
testGridTemplatesSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
-testGridTemplatesSetBadJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw");
// Negative values are not allowed.
testGridTemplatesSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");
testGridTemplatesValues(document.getElementById("gridWithCalcComplexElement"), "550px", "465px");
testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMaxElement"), "minmax(10%, 15px)", "minmax(20px, 50%)", "80px", "300px");
testGridTemplatesValues(document.getElementById("gridWithCalcComplexInsideMinMaxElement"), "minmax(10%, 415px)", "minmax(80px, 50%)", "415px", "300px");
+testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMaxElement"), "20px", "11px");
debug("");
debug("Test getting wrong values for -webkit-grid-template-columns and -webkit-grid-template-rows through CSS (they should resolve to the default: 'none')");
testGridTemplatesSetJSValues("minmax(-webkit-min-content, 8vh)", "minmax(10vw, -webkit-min-content)", "48px", "80px");
testGridTemplatesSetJSValues("minmax(22em, -webkit-max-content)", "minmax(-webkit-max-content, 5em)", "220px", "50px");
testGridTemplatesSetJSValues("minmax(-webkit-min-content, -webkit-max-content)", "minmax(-webkit-max-content, -webkit-min-content)", "0px", "0px");
+testGridTemplatesSetJSValues("minmax(auto, -webkit-max-content)", "minmax(10vw, auto)", "0px", "80px");
// Unit comparison should be case-insensitive.
testGridTemplatesSetJSValues("3600Fr", "154fR", "800px", "600px", "3600fr", "154fr");
// No breadth value and no comma.
testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
-// Auto is not allowed inside minmax.
-testGridTemplatesSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
testGridTemplatesSetBadJSValues("-2fr", "3ffr");
testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");
testGridTemplatesSetBadJSValues("0fr", "1r");
testGridTemplatesValues(document.getElementById("gridWithCalcAndFixed"), "50% 80px", "88px 25%");
testGridTemplatesValues(document.getElementById("gridWithCalcAndMinMax"), "calc(30px + 20%) minmax(-webkit-min-content, 80px)", "minmax(25%, -webkit-max-content) calc(10% - 7px)");
testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(calc(23px + 10%), 400px) 120px", "150px minmax(5%, calc(50% - 125px))");
+testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMax"), "minmax(auto, 20px) 10%", "-webkit-max-content minmax(-webkit-min-content, auto)");
debug("");
debug("Test the initial value");
testNonGridTemplatesSetJSValues("16em minmax(16px, 20px)", "minmax(10%, 15%) auto", "160px minmax(16px, 20px)");
testNonGridTemplatesSetJSValues("16em 2fr", "14fr auto", "160px 2fr");
testNonGridTemplatesSetJSValues("50% 12vw", "5% 85vh", "50% 96px", "5% 510px");
+testNonGridTemplatesSetJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw", "auto minmax(16px, auto)", "minmax(auto, 15%) 80px");
debug("");
debug("Test getting wrong values set from CSS");
testGridTemplatesSetBadJSValues("auto none", "auto none");
testGridTemplatesSetBadJSValues("auto none 16em", "auto 18em none");
testGridTemplatesSetBadJSValues("-webkit-fit-content -webkit-fit-content", "-webkit-fit-available -webkit-fit-available");
-testGridTemplatesSetBadJSValues("auto minmax(16px, auto)", "minmax(auto, 15%) 10vw");
// Negative values are not allowed.
testGridTemplatesSetBadJSValues("-10px minmax(16px, 32px)", "minmax(10%, 15%) -10vw");
testGridTemplatesSetBadJSValues("10px minmax(16px, -1vw)", "minmax(-1%, 15%) 10vw");
testGridTemplatesValues(document.getElementById("gridWithCalcComplex"), "calc(50% + 150px)", "calc(65% + 75px)");
testGridTemplatesValues(document.getElementById("gridWithCalcInsideMinMax"), "minmax(10%, 15px)", "minmax(20px, 50%)");
testGridTemplatesValues(document.getElementById("gridWithCalcComplexInsideMinMax"), "minmax(10%, calc(50% + 15px))", "minmax(calc(20px + 10%), 50%)");
+testGridTemplatesValues(document.getElementById("gridWithAutoInsideMinMax"), "minmax(auto, 20px)", "minmax(-webkit-min-content, auto)");
debug("");
debug("Test getting wrong values for grid-template-columns and grid-template-rows through CSS (they should resolve to the default: 'none')");
testNonGridTemplatesSetJSValues("3.1459fr", "2.718fr");
// A leading '+' is allowed.
testNonGridTemplatesSetJSValues("+3fr", "+4fr", "3fr", "4fr", "3fr", "4fr");
+testNonGridTemplatesSetJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)", "minmax(auto, 48px)", "minmax(80px, auto)");
debug("");
debug("Test setting grid-template-columns and grid-template-rows to bad values through JS");
testGridTemplatesSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)");
// No breadth value and no comma.
testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
-// Auto is not allowed inside minmax.
-testGridTemplatesSetBadJSValues("minmax(auto, 8vh)", "minmax(10vw, auto)");
testGridTemplatesSetBadJSValues("-2fr", "3ffr");
testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");
testGridTemplatesSetBadJSValues("0fr", "1r");
+2015-09-15 Sergio Villar Senin <svillar@igalia.com>
+
+ [CSS Grid Layout] Using automatic (instead of min-content) minimums for 'auto' tracks
+ https://bugs.webkit.org/show_bug.cgi?id=142329
+
+ Reviewed by Darin Adler.
+
+ Based on Blink's r198697 by <svillar@igalia.com> and r200478 by <jfernandez@igalia.com>
+
+ More precisely (syntax-wise), this would allow 'auto' to be used within the
+ minmax() function (it's currently forbidden) and have the 'auto' keyword map
+ to minmax(auto, auto) instead of minmax(min-content, max-content).
+ - As a minimum, 'auto' would mean "use the specified minimum size, or if
+ that is auto, treat as 0 or min-content per Flexbox rules".
+ - As a maximum, 'auto' would mean "use the max-content size".
+
+ Regarding the implementation, a new phase is added to the track sizing
+ algorithm called ResolveIntrinsicMinimums (the former ResolveIntrinsicMinimums
+ is now called ResolveContentBasedMinimums which does not include 'auto'
+ resolution) which will be run before any other. This phase uses the minimum
+ size of grid items (as specified by min-width/height).
+
+ Tests: fast/css-grid-layout/grid-automatic-minimum-for-auto-columns.html
+ fast/css-grid-layout/grid-automatic-minimum-for-auto-rows.html
+
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseGridBreadth):
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::computeUsedBreadthOfMinLength):
+ (WebCore::RenderGrid::computeUsedBreadthOfMaxLength):
+ (WebCore::RenderGrid::minSizeForChild):
+ (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctions):
+ (WebCore::RenderGrid::resolveContentBasedTrackSizingFunctionsForNonSpanningItems):
+ (WebCore::RenderGrid::trackSizeForTrackSizeComputationPhase):
+ (WebCore::RenderGrid::shouldProcessTrackForTrackSizeComputationPhase):
+ (WebCore::RenderGrid::trackShouldGrowBeyondGrowthLimitsForTrackSizeComputationPhase):
+ (WebCore::RenderGrid::markAsInfinitelyGrowableForTrackSizeComputationPhase):
+ (WebCore::RenderGrid::updateTrackSizeForTrackSizeComputationPhase):
+ (WebCore::RenderGrid::currentItemSizeForTrackSizeComputationPhase):
+ * rendering/RenderGrid.h:
+ * rendering/style/GridTrackSize.h:
+ (WebCore::GridTrackSize::minTrackBreadth):
+ (WebCore::GridTrackSize::maxTrackBreadth):
+ (WebCore::GridTrackSize::cacheMinMaxTrackBreadthTypes):
+ (WebCore::GridTrackSize::hasIntrinsicMinTrackBreadth):
+ (WebCore::GridTrackSize::hasAutoMinTrackBreadth):
+ (WebCore::GridTrackSize::hasAutoMaxTrackBreadth):
+ (WebCore::GridTrackSize::hasMaxContentOrAutoMaxTrackBreadth):
+ (WebCore::GridTrackSize::hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth):
+ (WebCore::GridTrackSize::hasMinContentMinTrackBreadthAndMinOrMaxContentMaxTrackBreadth): Deleted.
+
2015-09-17 Javier Fernandez <jfernandez@igalia.com>
[CSS Grid Layout] Relayout whenever Box Alignment properties change
RefPtr<CSSPrimitiveValue> CSSParser::parseGridBreadth(CSSParserValue& value)
{
- if (value.id == CSSValueWebkitMinContent || value.id == CSSValueWebkitMaxContent)
+ if (value.id == CSSValueWebkitMinContent || value.id == CSSValueWebkitMaxContent || value.id == CSSValueAuto)
return CSSValuePool::singleton().createIdentifierValue(value.id);
if (value.unit == CSSPrimitiveValue::CSS_FR) {
return 0;
const Length& trackLength = gridLength.length();
- ASSERT(!trackLength.isAuto());
if (trackLength.isSpecified())
return computeUsedBreadthOfSpecifiedLength(direction, trackLength);
- ASSERT(trackLength.isMinContent() || trackLength.isMaxContent());
+ ASSERT(trackLength.isMinContent() || trackLength.isAuto() || trackLength.isMaxContent());
return 0;
}
return usedBreadth;
const Length& trackLength = gridLength.length();
- ASSERT(!trackLength.isAuto());
if (trackLength.isSpecified()) {
LayoutUnit computedBreadth = computeUsedBreadthOfSpecifiedLength(direction, trackLength);
ASSERT(computedBreadth != infinity);
return computedBreadth;
}
- ASSERT(trackLength.isMinContent() || trackLength.isMaxContent());
+ ASSERT(trackLength.isMinContent() || trackLength.isAuto() || trackLength.isMaxContent());
return infinity;
}
return child.logicalHeight() + child.marginLogicalHeight();
}
+LayoutUnit RenderGrid::minSizeForChild(RenderBox& child, GridTrackSizingDirection direction, Vector<GridTrack>& columnTracks)
+{
+ bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
+ // FIXME: Properly support orthogonal writing mode.
+ if (hasOrthogonalWritingMode)
+ return { };
+
+ const Length& childMinSize = direction == ForColumns ? child.style().logicalMinWidth() : child.style().logicalMinHeight();
+ if (childMinSize.isAuto()) {
+ // FIXME: Implement intrinsic aspect ratio support (transferred size in specs).
+ return minContentForChild(child, direction, columnTracks);
+ }
+
+ if (direction == ForColumns)
+ return child.computeLogicalWidthInRegionUsing(MinSize, childMinSize, contentLogicalWidth(), this, nullptr);
+
+ return child.computeContentAndScrollbarLogicalHeightUsing(MinSize, childMinSize, child.logicalHeight()).valueOr(0);
+}
+
LayoutUnit RenderGrid::minContentForChild(RenderBox& child, GridTrackSizingDirection direction, Vector<GridTrack>& columnTracks)
{
bool hasOrthogonalWritingMode = child.isHorizontalWritingMode() != isHorizontalWritingMode();
while (it != end) {
GridItemsSpanGroupRange spanGroupRange = { it, std::upper_bound(it, end, *it) };
resolveContentBasedTrackSizingFunctionsForItems<ResolveIntrinsicMinimums>(direction, sizingData, spanGroupRange);
+ resolveContentBasedTrackSizingFunctionsForItems<ResolveContentBasedMinimums>(direction, sizingData, spanGroupRange);
resolveContentBasedTrackSizingFunctionsForItems<ResolveMaxContentMinimums>(direction, sizingData, spanGroupRange);
resolveContentBasedTrackSizingFunctionsForItems<ResolveIntrinsicMaximums>(direction, sizingData, spanGroupRange);
resolveContentBasedTrackSizingFunctionsForItems<ResolveMaxContentMaximums>(direction, sizingData, spanGroupRange);
track.setBaseSize(std::max(track.baseSize(), minContentForChild(gridItem, direction, columnTracks)));
else if (trackSize.hasMaxContentMinTrackBreadth())
track.setBaseSize(std::max(track.baseSize(), maxContentForChild(gridItem, direction, columnTracks)));
+ else if (trackSize.hasAutoMinTrackBreadth())
+ track.setBaseSize(std::max(track.baseSize(), minSizeForChild(gridItem, direction, columnTracks)));
if (trackSize.hasMinContentMaxTrackBreadth())
track.setGrowthLimit(std::max(track.growthLimit(), minContentForChild(gridItem, direction, columnTracks)));
- else if (trackSize.hasMaxContentMaxTrackBreadth())
+ else if (trackSize.hasMaxContentOrAutoMaxTrackBreadth())
track.setGrowthLimit(std::max(track.growthLimit(), maxContentForChild(gridItem, direction, columnTracks)));
}
{
switch (phase) {
case ResolveIntrinsicMinimums:
+ case ResolveContentBasedMinimums:
case ResolveMaxContentMinimums:
case MaximizeTracks:
return track.baseSize();
{
switch (phase) {
case ResolveIntrinsicMinimums:
+ return trackSize.hasIntrinsicMinTrackBreadth();
+ case ResolveContentBasedMinimums:
return trackSize.hasMinOrMaxContentMinTrackBreadth();
case ResolveMaxContentMinimums:
return trackSize.hasMaxContentMinTrackBreadth();
case ResolveIntrinsicMaximums:
return trackSize.hasMinOrMaxContentMaxTrackBreadth();
case ResolveMaxContentMaximums:
- return trackSize.hasMaxContentMaxTrackBreadth();
+ return trackSize.hasMaxContentOrAutoMaxTrackBreadth();
case MaximizeTracks:
ASSERT_NOT_REACHED();
return false;
{
switch (phase) {
case ResolveIntrinsicMinimums:
- return trackSize.hasMinContentMinTrackBreadthAndMinOrMaxContentMaxTrackBreadth();
+ case ResolveContentBasedMinimums:
+ return trackSize.hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth();
case ResolveMaxContentMinimums:
return trackSize.hasMaxContentMinTrackBreadthAndMaxContentMaxTrackBreadth();
case ResolveIntrinsicMaximums:
{
switch (phase) {
case ResolveIntrinsicMinimums:
+ case ResolveContentBasedMinimums:
case ResolveMaxContentMinimums:
return;
case ResolveIntrinsicMaximums:
{
switch (phase) {
case ResolveIntrinsicMinimums:
+ case ResolveContentBasedMinimums:
case ResolveMaxContentMinimums:
track.setBaseSize(track.plannedSize());
return;
{
switch (phase) {
case ResolveIntrinsicMinimums:
+ return minSizeForChild(gridItem, direction, columnTracks);
+ case ResolveContentBasedMinimums:
case ResolveIntrinsicMaximums:
return minContentForChild(gridItem, direction, columnTracks);
case ResolveMaxContentMinimums:
};
enum TrackSizeComputationPhase {
ResolveIntrinsicMinimums,
+ ResolveContentBasedMinimums,
ResolveMaxContentMinimums,
ResolveIntrinsicMaximums,
ResolveMaxContentMaximums,
GridTrackSize gridTrackSize(GridTrackSizingDirection, unsigned) const;
LayoutUnit logicalContentHeightForChild(RenderBox&, Vector<GridTrack>&);
+ LayoutUnit minSizeForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
LayoutUnit minContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
LayoutUnit maxContentForChild(RenderBox&, GridTrackSizingDirection, Vector<GridTrack>& columnTracks);
GridAxisPosition columnAxisPositionForChild(const RenderBox&) const;
return minTrackBreadth;
}
- const GridLength& minTrackBreadth() const
- {
- if (m_minTrackBreadth.isLength() && m_minTrackBreadth.length().isAuto()) {
- static NeverDestroyed<const GridLength> minContent{Length(MinContent)};
- return minContent;
- }
- return m_minTrackBreadth;
- }
+ const GridLength& minTrackBreadth() const { return m_minTrackBreadth; }
- const GridLength& maxTrackBreadth() const
- {
- if (m_maxTrackBreadth.isLength() && m_maxTrackBreadth.length().isAuto()) {
- static NeverDestroyed<const GridLength> maxContent{Length(MaxContent)};
- return maxContent;
- }
- return m_maxTrackBreadth;
- }
+ const GridLength& maxTrackBreadth() const { return m_maxTrackBreadth; }
GridTrackSizeType type() const { return m_type; }
void cacheMinMaxTrackBreadthTypes()
{
+ m_minTrackBreadthIsAuto = minTrackBreadth().isLength() && minTrackBreadth().length().isAuto();
m_minTrackBreadthIsMinContent = minTrackBreadth().isLength() && minTrackBreadth().length().isMinContent();
m_minTrackBreadthIsMaxContent = minTrackBreadth().isLength() && minTrackBreadth().length().isMaxContent();
m_maxTrackBreadthIsMaxContent = maxTrackBreadth().isLength() && maxTrackBreadth().length().isMaxContent();
m_maxTrackBreadthIsMinContent = maxTrackBreadth().isLength() && maxTrackBreadth().length().isMinContent();
+ m_maxTrackBreadthIsAuto = maxTrackBreadth().isLength() && maxTrackBreadth().length().isAuto();
}
+ bool hasIntrinsicMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent || m_minTrackBreadthIsMinContent || m_minTrackBreadthIsAuto; }
bool hasMinOrMaxContentMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent || m_minTrackBreadthIsMinContent; }
+ bool hasAutoMinTrackBreadth() const { return m_minTrackBreadthIsAuto; }
+ bool hasAutoMaxTrackBreadth() const { return m_maxTrackBreadthIsAuto; }
bool hasMaxContentMaxTrackBreadth() const { return m_maxTrackBreadthIsMaxContent; }
+ bool hasMaxContentOrAutoMaxTrackBreadth() const { return m_maxTrackBreadthIsMaxContent || m_maxTrackBreadthIsAuto; }
bool hasMinContentMaxTrackBreadth() const { return m_maxTrackBreadthIsMinContent; }
bool hasMinOrMaxContentMaxTrackBreadth() const { return m_maxTrackBreadthIsMaxContent || m_maxTrackBreadthIsMinContent; }
bool hasMaxContentMinTrackBreadth() const { return m_minTrackBreadthIsMaxContent; }
bool hasMinContentMinTrackBreadth() const { return m_minTrackBreadthIsMinContent; }
- bool hasMinContentMinTrackBreadthAndMinOrMaxContentMaxTrackBreadth() const { return m_minTrackBreadthIsMinContent && hasMinOrMaxContentMaxTrackBreadth(); }
bool hasMaxContentMinTrackBreadthAndMaxContentMaxTrackBreadth() const { return m_minTrackBreadthIsMaxContent && m_maxTrackBreadthIsMaxContent; }
+ bool hasAutoOrMinContentMinTrackBreadthAndIntrinsicMaxTrackBreadth() const { return (m_minTrackBreadthIsMinContent || m_minTrackBreadthIsAuto) && (m_maxTrackBreadthIsAuto || hasMinOrMaxContentMaxTrackBreadth()); }
private:
GridTrackSizeType m_type;
GridLength m_minTrackBreadth;
GridLength m_maxTrackBreadth;
+ bool m_minTrackBreadthIsAuto;
bool m_minTrackBreadthIsMaxContent;
bool m_minTrackBreadthIsMinContent;
+ bool m_maxTrackBreadthIsAuto;
bool m_maxTrackBreadthIsMaxContent;
bool m_maxTrackBreadthIsMinContent;
};
git://git.webkit.org / WebKit-https.git / commitdiff