Diff
Modified: trunk/LayoutTests/ChangeLog (201324 => 201325)
--- trunk/LayoutTests/ChangeLog 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/ChangeLog 2016-05-24 08:55:13 UTC (rev 201325)
@@ -1,3 +1,33 @@
+2016-05-24 Manuel Rego Casasnovas <[email protected]>
+
+ [css-grid] Fix behavior of flexible track breadths
+ https://bugs.webkit.org/show_bug.cgi?id=157834
+
+ Reviewed by Sergio Villar Senin.
+
+ This patch is fixing 2 issues that are interrelated:
+ 1) Flex sizes are invalid as min track sizing function.
+ 2) Flex sizes outside minmax() behave as auto minimum.
+
+ The patch includes new test cases checking specifically these 2 issues.
+ In addition several tests results have been updated to reflect
+ the new behavior. Also, some cases that are now invalid and
+ were not testing anything new have been removed.
+
+ * fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt:
+ * fast/css-grid-layout/flex-and-content-sized-resolution-columns.html:
+ * fast/css-grid-layout/flex-content-resolution-columns-expected.txt:
+ * fast/css-grid-layout/flex-content-resolution-columns.html:
+ * fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
+ * fast/css-grid-layout/flex-content-resolution-rows.html:
+ * fast/css-grid-layout/grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt:
+ * fast/css-grid-layout/grid-gutters-and-flex-content.html:
+ * fast/css-grid-layout/grid-preferred-logical-widths.html:
+ * fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt:
+ * fast/css-grid-layout/resources/grid-columns-rows-get-set.js:
+ * fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js:
+
2016-05-24 Youenn Fablet <[email protected]>
[Fetch API] Implement Fetch redirect mode
Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns-expected.txt 2016-05-24 08:55:13 UTC (rev 201325)
@@ -2,7 +2,7 @@
PASS window.getComputedStyle(gridFixedAndMinContentAndFlexMultipleOverlap, '').getPropertyValue('grid-template-columns') is "20px 10px 70px"
PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAuto, '').getPropertyValue('grid-template-columns') is "60px 20px 20px"
PASS window.getComputedStyle(gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems, '').getPropertyValue('grid-template-columns') is "100px 0px 0px"
-PASS window.getComputedStyle(gridMinMaxFlexFixedAndMinContentAndFixed, '').getPropertyValue('grid-template-columns') is "35px 5px 25px"
+PASS window.getComputedStyle(gridMinMaxAutoFixedAndMinContentAndFixed, '').getPropertyValue('grid-template-columns') is "35px 20px 25px"
PASS window.getComputedStyle(gridMinContentAndMinMaxFixedMinContentAndFlex, '').getPropertyValue('grid-template-columns') is "20px 20px 60px"
PASS window.getComputedStyle(gridMaxContentAndMinMaxFixedMaxContentAndFlex, '').getPropertyValue('grid-template-columns') is "70px 20px 10px"
PASS successfullyParsed is true
Modified: trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-and-content-sized-resolution-columns.html 2016-05-24 08:55:13 UTC (rev 201325)
@@ -15,8 +15,8 @@
grid-template-columns: minmax(20px, 1fr) -webkit-max-content auto;
}
-.gridMinMaxFlexFixedAndMinContentAndFixed {
- grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px;
+.gridMinMaxAutoFixedAndMinContentAndFixed {
+ grid-template-columns: minmax(auto, 35px) -webkit-min-content 25px;
}
.gridMinContentAndMinMaxFixedMinContentAndFlex {
@@ -63,7 +63,7 @@
</div>
<div style="position: relative; width: 100px;">
- <div id="gridMinMaxFlexFixedAndMinContentAndFixed" class="grid gridMinMaxFlexFixedAndMinContentAndFixed">
+ <div id="gridMinMaxAutoFixedAndMinContentAndFixed" class="grid gridMinMaxAutoFixedAndMinContentAndFixed">
<div style="grid-column: 1 / span 2;">XXXX XXXX</div>
<div style="grid-column: 2 / span 2; grid-row: 2;">XXX XXX</div>
<div style="grid-column: 1 / -1; grid-row: 3;">XXXXX XXXXX</div>
@@ -100,7 +100,7 @@
checkColumns("gridFixedAndMinContentAndFlexMultipleOverlap", "20px 10px 70px");
checkColumns("gridMinMaxFixedFlexAndMaxContentAndAuto", "60px 20px 20px");
checkColumns("gridMinMaxFixedFlexAndMaxContentAndAutoNoFlexSpanningItems", "100px 0px 0px");
-checkColumns("gridMinMaxFlexFixedAndMinContentAndFixed", "35px 5px 25px");
+checkColumns("gridMinMaxAutoFixedAndMinContentAndFixed", "35px 20px 25px");
checkColumns("gridMinContentAndMinMaxFixedMinContentAndFlex", "20px 20px 60px");
checkColumns("gridMaxContentAndMinMaxFixedMaxContentAndFlex", "70px 20px 10px");
Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns-expected.txt 2016-05-24 08:55:13 UTC (rev 201325)
@@ -1,11 +1,17 @@
Test that resolving auto tracks on grid items works properly.
PASS
+XX
+XXX
PASS
PASS
PASS
+XXX
+XXXX
PASS
PASS
+XXX
+XXXX
PASS
PASS
PASS
@@ -18,3 +24,6 @@
PASS
PASS
PASS
+PASS
+PASS
+PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-columns.html 2016-05-24 08:55:13 UTC (rev 201325)
@@ -2,12 +2,12 @@
<html>
<link href="" rel="stylesheet">
<style>
-.gridMinFlexContent {
- grid-template-columns: minmax(1fr, 50px);
+.gridFlexContent {
+ grid-template-columns: 1fr 1fr;
grid-template-rows: 50px;
}
.gridZeroFlexContent {
- grid-template-columns: minmax(1fr, 0px);
+ grid-template-columns: minmax(auto, 0px);
grid-template-rows: 50px;
}
.gridMaxFlexContent {
@@ -54,11 +54,18 @@
<p>Test that resolving auto tracks on grid items works properly.</p>
<div style="width: 0px">
- <div class="grid gridMinFlexContent">
+ <div class="grid gridFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
</div>
</div>
+<div style="width: 0px; position: relative;">
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="20" data-expected-height="50">XX</div>
+ <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="20" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div>
+ </div>
+</div>
+
<div style="width: 100px">
<div class="grid gridZeroFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
@@ -67,17 +74,31 @@
<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 40px; height: 10px">
- <div class="grid gridMinFlexContent">
- <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="40" data-expected-height="50"></div>
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="20" data-expected-height="50"></div>
</div>
</div>
+<div style="width: 40px; height: 10px; position: relative;">
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="30" data-expected-height="50">XXX</div>
+ <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="30" data-offset-y="0" data-expected-width="40" data-expected-height="50">XXXX</div>
+ </div>
+</div>
+
<div style="width: 100px; height: 10px;">
- <div class="grid gridMinFlexContent">
+ <div class="grid gridFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
+<div style="width: 100px; height: 10px; position: relative;">
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXX</div>
+ <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXX</div>
+ </div>
+</div>
+
<div class="constrainedContainer">
<div class="grid gridMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="30" data-expected-height="50"></div>
Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows-expected.txt 2016-05-24 08:55:13 UTC (rev 201325)
@@ -2,16 +2,54 @@
PASS
PASS
+X
+X
+X
+X
+X
PASS
+X
+X
+X
+X
+X
PASS
PASS
PASS
PASS
+X
+X
+X
+X
+X
+X
+X
PASS
+X
+X
+X
+X
+X
+X
+X
PASS
PASS
PASS
+X
+X
+X
+X
+X
+X
+X
PASS
+X
+X
+X
+X
+X
+X
+X
PASS
PASS
PASS
@@ -29,3 +67,10 @@
PASS
PASS
PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
Modified: trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/flex-content-resolution-rows.html 2016-05-24 08:55:13 UTC (rev 201325)
@@ -2,13 +2,13 @@
<html>
<link href="" rel="stylesheet">
<style>
-.gridMinFlexContent {
+.gridFlexContent {
grid-template-columns: 50px;
- grid-template-rows: minmax(1fr, 50px);
+ grid-template-rows: 1fr 1fr;
}
.gridZeroFlexContent {
grid-template-columns: 50px;
- grid-template-rows: minmax(1fr, 0px);
+ grid-template-rows: minmax(auto, 0px);
}
.gridMaxFlexContent {
grid-template-columns: 50px;
@@ -50,43 +50,91 @@
<p>Test that resolving auto tracks on grid items works properly.</p>
<div style="height: 0px">
- <div class="grid gridMinFlexContent" style="height: 100%">
+ <div class="grid gridFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
</div>
</div>
<div style="height: 0px">
- <div class="grid gridZeroFlexContent">
+ <div class="grid gridFlexContent" style="height: 100%;">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
</div>
</div>
+<div style="height: 0px; position: relative;">
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X</div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
+ </div>
+</div>
+
+<div style="height: 0px; position: relative;">
+ <div class="grid gridFlexContent" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="20">X<br>X</div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="20" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
+ </div>
+</div>
+
<div style="height: 0px">
- <div class="grid gridMinFlexContent">
- <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ <div class="grid gridZeroFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
</div>
</div>
<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 10px; height: 40px">
- <div class="grid gridMinFlexContent" style="height: 100%">
- <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
</div>
</div>
<div style="width: 10px; height: 40px">
- <div class="grid gridMinFlexContent">
- <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
+ <div class="grid gridFlexContent" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</div>
</div>
+<div style="width: 10px; height: 40px; position: relative">
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">X<br>X<br>X</div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 40px; position: relative">
+ <div class="grid gridFlexContent" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="30">X<br>X<br>X</div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
+ </div>
+</div>
+
<div style="width: 10px; height: 100px;">
- <div class="grid gridMinFlexContent">
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
+ </div>
+</div>
+
+<div style="width: 10px; height: 100px;">
+ <div class="grid gridFlexContent" style="height: 100%;">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>
+<div style="width: 10px; height: 100px; position: relative;">
+ <div class="grid gridFlexContent">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="40">X<br>X<br>X</div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="40" data-expected-width="50" data-expected-height="40">X<br>X<br>X<br>X</div>
+ </div>
+</div>
+<div style="width: 10px; height: 100px; position: relative;">
+ <div class="grid gridFlexContent" style="height: 100%;">
+ <div class="sizedToGridArea firstRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">X<br>X<br>X</div>
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50">X<br>X<br>X<br>X</div>
+ </div>
+</div>
+
+
<div class="constrainedContainer">
<div class="grid gridMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="30"></div>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-columns-rows-get-set-expected.txt 2016-05-24 08:55:13 UTC (rev 201325)
@@ -162,6 +162,10 @@
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
Test setting grid-template-columns and grid-template-rows back to 'none' through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content-expected.txt 2016-05-24 08:55:13 UTC (rev 201325)
@@ -7,11 +7,6 @@
PASS
PASS
PASS
-XXXX XXXX
-XXX XXX
-XXXXX XXXXX
-XX XX XX XX
-PASS
XXXXX
XXX XXX XXX
XXXX XXXX
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-gutters-and-flex-content.html 2016-05-24 08:55:13 UTC (rev 201325)
@@ -13,7 +13,6 @@
.gridRowsTwoMaxFlexContent { grid-template: minmax(10px, 1fr) minmax(10px, 2fr) / 50px; }
.gridRowsTwoDoubleMaxFlexContent { grid-template: minmax(10px, 0.5fr) minmax(10px, 2fr) / 50px; }
-.gridMinMaxFlexFixedAndMinContentAndFixed { grid-template-columns: minmax(0.5fr, 35px) -webkit-min-content 25px; }
.gridMinContentAndMinMaxFixedMinContentAndFlex { grid-template-columns: -webkit-min-content minmax(20px, -webkit-min-content) 2fr; }
.gridMaxContentAndMinMaxFixedMaxContentAndFlex { grid-template-columns: -webkit-max-content minmax(20px, -webkit-max-content) 1fr; }
@@ -76,15 +75,6 @@
<!-- Check that gutters do not interfere with flex content resolution with content sized tracks -->
<div style="position: relative; width: 100px;">
- <div class="grid gridMinMaxFlexFixedAndMinContentAndFixed gridRowColumnGaps" data-expected-width="100" data-expected-height="199">
- <div style="grid-column: 1 / span 2;" data-expected-width="54" data-expected-height="20">XXXX XXXX</div>
- <div style="grid-column: 2 / span 2; grid-row: 2;" data-expected-width="44" data-expected-height="20">XXX XXX</div>
- <div style="grid-column: 1 / -1; grid-row: 3;" data-expected-width="98" data-expected-height="20">XXXXX XXXXX</div>
- <div style="grid-column: 2 / span 2; grid-row: 4;" data-expected-width="44" data-expected-height="40">XX XX XX XX</div>
- </div>
-</div>
-
-<div style="position: relative; width: 100px;">
<div class="grid gridMinContentAndMinMaxFixedMinContentAndFlex gridRowColumnGaps" data-expected-width="100" data-expected-height="149">
<div style="grid-column: 2 / span 2;" data-expected-width="80">XXXXX</div>
<div style="grid-column: 1 / -1; grid-row: 2;" data-expected-width="100">XXX XXX XXX</div>
Modified: trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/grid-preferred-logical-widths.html 2016-05-24 08:55:13 UTC (rev 201325)
@@ -35,7 +35,7 @@
}
.gridFixedFraction {
- grid-template-columns: minmax(10px, 1fr) minmax(2fr, 20px);
+ grid-template-columns: minmax(10px, 1fr) minmax(20px, 2fr);
grid-template-rows: 10px;
}
@@ -101,7 +101,7 @@
<div class="firstRowSecondColumn">XX XX XX</div>
</div>
-<div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="10"></div>
+<div class="grid gridFixedFraction min-content" data-expected-height="10" data-expected-width="30"></div>
<div class="grid gridFixedFraction max-content" data-expected-height="10" data-expected-width="30"></div>
<!-- Now with margin on one of the grid items. -->
Modified: trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/non-grid-columns-rows-get-set-expected.txt 2016-05-24 08:55:13 UTC (rev 201325)
@@ -132,6 +132,10 @@
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "none"
+PASS window.getComputedStyle(element, '').getPropertyValue('grid-template-rows') is "none"
Test setting grid-template-columns and grid-template-rows back to 'none' through JS
PASS getComputedStyle(element, '').getPropertyValue('grid-template-columns') is "18px"
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/grid-columns-rows-get-set.js 2016-05-24 08:55:13 UTC (rev 201325)
@@ -77,6 +77,9 @@
testGridTemplatesSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)");
// No breadth value and no comma.
testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
+// Flexible lengths are invalid on the min slot of minmax().
+testGridTemplatesSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)");
+testGridTemplatesSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)");
testGridTemplatesSetBadJSValues("-2fr", "3ffr");
testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");
Modified: trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js (201324 => 201325)
--- trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/LayoutTests/fast/css-grid-layout/resources/non-grid-columns-rows-get-set.js 2016-05-24 08:55:13 UTC (rev 201325)
@@ -65,6 +65,10 @@
testGridTemplatesSetBadJSValues("minmax(minmax(10px, 20px), 20px)", "minmax(10px, 20px, 30px)");
// No breadth value and no comma.
testGridTemplatesSetBadJSValues("minmax()", "minmax(30px 30% 30em)");
+// Flexible lengths are invalid on the min slot of minmax().
+testGridTemplatesSetBadJSValues("minmax(0fr, 100px)", "minmax(.0fr, 200px)");
+testGridTemplatesSetBadJSValues("minmax(1fr, 100px)", "minmax(2.5fr, 200px)");
+
testGridTemplatesSetBadJSValues("-2fr", "3ffr");
testGridTemplatesSetBadJSValues("-2.05fr", "+-3fr");
testGridTemplatesSetBadJSValues("0fr", "1r");
Modified: trunk/Source/WebCore/ChangeLog (201324 => 201325)
--- trunk/Source/WebCore/ChangeLog 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/Source/WebCore/ChangeLog 2016-05-24 08:55:13 UTC (rev 201325)
@@ -1,3 +1,37 @@
+2016-05-24 Manuel Rego Casasnovas <[email protected]>
+
+ [css-grid] Fix behavior of flexible track breadths
+ https://bugs.webkit.org/show_bug.cgi?id=157834
+
+ Reviewed by Sergio Villar Senin.
+
+ This patch is fixing 2 issues that are interrelated:
+
+ 1) Flex sizes are invalid as min track sizing function.
+
+ The syntax has been recently updated on the spec:
+ <track-size> =
+ <track-breadth> |
+ minmax( <inflexible-breadth> , <track-breadth> )
+
+ 2) Flex sizes outside minmax() behave as auto minimum.
+
+ Flex sizes outside minmax() were previously behaving like
+ minimum and maximum (e.g. 1fr => minmax(1fr, 1fr)).
+ However the spec changed and now this would be invalid,
+ so they should behave like auto minimum (e.g. minmax(auto, 1fr)).
+
+ * css/CSSParser.cpp:
+ (WebCore::CSSParser::parseGridTrackSize): Call parseGridBreadth()
+ for min sizing function using "InflexibleSizeOnly" restriction
+ when needed.
+ (WebCore::CSSParser::parseGridBreadth): Add check for
+ "InflexibleSizeOnly" resctriction.
+ * css/CSSParser.h: Add new type of restriction "InflexibleSizeOnly".
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::gridTrackSize): Add new condition to make
+ |minTrackBreadth| auto if it was a flex size.
+
2016-05-24 Youenn Fablet <[email protected]>
[Fetch API] Implement Fetch redirect mode
Modified: trunk/Source/WebCore/css/CSSParser.cpp (201324 => 201325)
--- trunk/Source/WebCore/css/CSSParser.cpp 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/Source/WebCore/css/CSSParser.cpp 2016-05-24 08:55:13 UTC (rev 201325)
@@ -5977,7 +5977,8 @@
if (!arguments || arguments->size() != 3 || !isComma(arguments->valueAt(1)))
return nullptr;
- RefPtr<CSSPrimitiveValue> minTrackBreadth = parseGridBreadth(*arguments->valueAt(0), restriction);
+ TrackSizeRestriction minTrackBreadthRestriction = restriction == AllowAll ? InflexibleSizeOnly : restriction;
+ RefPtr<CSSPrimitiveValue> minTrackBreadth = parseGridBreadth(*arguments->valueAt(0), minTrackBreadthRestriction);
if (!minTrackBreadth)
return nullptr;
@@ -6005,7 +6006,7 @@
}
if (value.unit == CSSPrimitiveValue::CSS_FR) {
- if (restriction == FixedSizeOnly)
+ if (restriction == FixedSizeOnly || restriction == InflexibleSizeOnly)
return nullptr;
double flexValue = value.fValue;
Modified: trunk/Source/WebCore/css/CSSParser.h (201324 => 201325)
--- trunk/Source/WebCore/css/CSSParser.h 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/Source/WebCore/css/CSSParser.h 2016-05-24 08:55:13 UTC (rev 201325)
@@ -240,7 +240,7 @@
bool parseSingleGridAreaLonghand(RefPtr<CSSValue>&);
RefPtr<CSSValue> parseGridTrackList();
bool parseGridTrackRepeatFunction(CSSValueList&, bool& isAutoRepeat);
- enum TrackSizeRestriction { FixedSizeOnly, AllowAll };
+ enum TrackSizeRestriction { FixedSizeOnly, InflexibleSizeOnly, AllowAll };
RefPtr<CSSValue> parseGridTrackSize(CSSParserValueList& inputList, TrackSizeRestriction = AllowAll);
RefPtr<CSSPrimitiveValue> parseGridBreadth(CSSParserValue&, TrackSizeRestriction = AllowAll);
bool parseGridTemplateAreasRow(NamedGridAreaMap&, const unsigned, unsigned&);
Modified: trunk/Source/WebCore/rendering/RenderGrid.cpp (201324 => 201325)
--- trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-05-24 07:35:09 UTC (rev 201324)
+++ trunk/Source/WebCore/rendering/RenderGrid.cpp 2016-05-24 08:55:13 UTC (rev 201325)
@@ -747,6 +747,11 @@
}
}
+ // Flex sizes are invalid as a min sizing function. However we still can have a flexible |minTrackBreadth|
+ // if the track size is just a flex size (e.g. "1fr"), the spec says that in this case it implies an automatic minimum.
+ if (minTrackBreadth.isFlex())
+ minTrackBreadth = Length(Auto);
+
return GridTrackSize(minTrackBreadth, maxTrackBreadth);
}
