Skip to content
Permalink
Browse files
[CSS Grid Layout] Flex tracks sizing alg must handle 0fr values
https://bugs.webkit.org/show_bug.cgi?id=148944

Reviewed by Darin Adler.

Source/WebCore:

We don't allow 0 as flexible size value, which is not following current
specs; it just states that it must be a positive value. This patch
adds such change in the parser but some additional logic must be added
as well to handle 0 values during the flex tracks sizing algorithm.

The old algorithm didn't take 0 values into account, so there is the risk
of division by zero. Additionally, it was not handling fraction values
in the best way. The last versions of the spec changed this algorithm in
order to handle fraction values so that they don't cause exponential
grow of tracks using values bigger than 1.

This patch implements also such new algorithm, so we can deal not only
with 0 values, but managing fraction values properly.

No new tests, just some additional test cases and some of them rebaselined.

* rendering/RenderGrid.cpp:
(WebCore::normalizedFlexFraction):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::computeFlexFactorUnitSize): Added.
(WebCore::RenderGrid::findFlexFactorUnitSize): Added.
(WebCore::RenderGrid::GridTrackForNormalization): Deleted.
(WebCore::RenderGrid::computeNormalizedFractionBreadth): Deleted.
* rendering/RenderGrid.h:

LayoutTests:

Allow 0 as flex factor value and implement the new flex track sizing algorithm.

* fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html: Updated some cases.
* fast/css-grid-layout/flex-content-resolution-columns-expected.txt:
* fast/css-grid-layout/flex-content-resolution-columns.html: Added some new cases.
* fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
* fast/css-grid-layout/flex-content-resolution-rows.html: Added some new cases.


Canonical link: https://commits.webkit.org/167725@main
git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190308 268f45cc-cd09-0410-ab3c-d52691b4dbfc
  • Loading branch information
javifernandez committed Sep 29, 2015
1 parent 8cc92ed commit 2b5e272d59fe2921f9f566311522b875b312ef23
Showing 9 changed files with 271 additions and 69 deletions.
@@ -1,3 +1,18 @@
2015-09-29 Javier Fernandez <jfernandez@igalia.com>

[CSS Grid Layout] Flex tracks sizing alg must handle 0fr values
https://bugs.webkit.org/show_bug.cgi?id=148944

Reviewed by Darin Adler.

Allow 0 as flex factor value and implement the new flex track sizing algorithm.

* fast/css-grid-layout/flex-and-minmax-content-resolution-rows.html: Updated some cases.
* fast/css-grid-layout/flex-content-resolution-columns-expected.txt:
* fast/css-grid-layout/flex-content-resolution-columns.html: Added some new cases.
* fast/css-grid-layout/flex-content-resolution-rows-expected.txt:
* fast/css-grid-layout/flex-content-resolution-rows.html: Added some new cases.

2015-09-16 Carlos Garcia Campos <cgarcia@igalia.com>

printing does not use minimum page zoom factor
@@ -120,17 +120,19 @@
</div>
</div>

<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<div style="width: 10px; height: 60px;">
<div class="grid gridWithIntrinsicSizeBiggerThanFlex" style="height: 100%">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</div>
</div>

<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<div style="width: 10px; height: 60px;">
<div class="grid gridWithIntrinsicSizeBiggerThanFlex">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="40">XXXXX XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="160"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="80"></div>
</div>
</div>

@@ -13,3 +13,8 @@ PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
@@ -6,6 +6,10 @@
-webkit-grid-template-columns: minmax(1fr, 50px);
-webkit-grid-template-rows: 50px;
}
.gridZeroFlexContent {
-webkit-grid-template-columns: minmax(1fr, 0px);
-webkit-grid-template-rows: 50px;
}
.gridMaxFlexContent {
-webkit-grid-template-columns: minmax(30px, 2fr);
-webkit-grid-template-rows: 50px;
@@ -22,6 +26,27 @@
-webkit-grid-template-columns: minmax(300px, 3fr) minmax(150px, 1fr);
-webkit-grid-template-rows: 50px;
}
.gridRespectBaseSize {
-webkit-grid-template-columns: minmax(75px, 1fr) minmax(0px, 2fr);
-webkit-grid-template-rows: 50px;
}
.gridRespectProportions {
-webkit-grid-template-columns: minmax(0px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
-webkit-grid-template-rows: 50px;
}
.gridRespectBaseSizeProportions {
-webkit-grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
-webkit-grid-template-rows: 50px;
}
.gridRespectBaseSizeBeforeProportions {
-webkit-grid-template-columns: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
-webkit-grid-template-rows: 50px;
}
.firstRowThirdColumn {
background-color: yellow;
-webkit-grid-column: 3;
-webkit-grid-row: 1;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid');">
@@ -34,6 +59,12 @@
</div>
</div>

<div style="width: 100px">
<div class="grid gridZeroFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="0" data-expected-height="50"></div>
</div>
</div>

<!-- Allow the extra logical space distribution to occur. -->
<div style="width: 40px; height: 10px">
<div class="grid gridMinFlexContent">
@@ -121,5 +152,40 @@
</div>
</div>

<!-- Flex track length must be at least its baseSize. -->
<div style="width: 100px; height: 10px;">
<div class="grid gridRespectBaseSize">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="75" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="25" data-expected-height="50"></div>
</div>
</div>

<!-- Flex track lengths must be proportional to their flex factors.. -->
<div style="width: 275px; height: 10px;">
<div class="grid gridRespectProportions">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="25" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>

<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
<div style="width: 350px; height: 10px;">
<div class="grid gridRespectBaseSizeProportions">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="200" data-expected-height="50"></div>
</div>
</div>

<!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
<div style="width: 275px; height: 10px;">
<div class="grid gridRespectBaseSizeBeforeProportions">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowSecondColumn" data-expected-width="75" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowThirdColumn" data-expected-width="150" data-expected-height="50"></div>
</div>
</div>

</body>
</html>
@@ -22,3 +22,10 @@ PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
PASS
@@ -6,6 +6,10 @@
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(1fr, 50px);
}
.gridZeroFlexContent {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(1fr, 0px);
}
.gridMaxFlexContent {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(30px, 2fr);
@@ -18,6 +22,27 @@
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(10px, 0.5fr) minmax(10px, 2fr);
}
.gridRespectBaseSize {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(75px, 1fr) minmax(0px, 2fr);
}
.gridRespectProportions {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(25px, .25fr) minmax(0px, .5fr) minmax(0px, 2fr);
}
.gridRespectBaseSizeProportions {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
}
.gridRespectBaseSizeBeforeProportions {
-webkit-grid-template-columns: 50px;
-webkit-grid-template-rows: minmax(50px, .25fr) minmax(0px, .5fr) minmax(0px, 1fr);
}
.thirdRowFirstColumn {
background-color: yellow;
-webkit-grid-column: 1;
-webkit-grid-row: 3;
}
</style>
<script src="../../resources/check-layout.js"></script>
<body onload="checkLayout('.grid');">
@@ -30,6 +55,12 @@
</div>
</div>

<div style="height: 0px">
<div class="grid gridZeroFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="0"></div>
</div>
</div>

<div style="height: 0px">
<div class="grid gridMinFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
@@ -137,10 +168,11 @@
</div>
</div>

<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<div class="constrainedContainer">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</div>
</div>

@@ -152,10 +184,11 @@
</div>
</div>

<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<div style="width: 10px; height: 60px">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</div>
</div>

@@ -166,10 +199,62 @@
</div>
</div>

<!-- We normalize fraction flex factors to 1, so we don't keep exact proportions with >1 factors. -->
<div style="width: 10px; height: 120px;">
<div class="grid gridTwoDoubleMaxFlexContent">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="10"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="40"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="20"></div>
</div>
</div>

<!-- Flex track lengths must be proportional to their flex factors.. -->
<div style="width: 10px; height: 275px;">
<div class="grid gridRespectProportions" style="height: 100%;">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
</div>
</div>

<div style="width: 10px; height: 275px;">
<div class="grid gridRespectProportions">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="13"></div>
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>

<!-- Flex track lengths must be proportional but still respecting their base sizes. -->
<div style="width: 10px; height: 350px;">
<div class="grid gridRespectBaseSizeProportions" style="height: 100%;">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="100"></div>
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="200"></div>
</div>
</div>

<div style="width: 10px; height: 350px;">
<div class="grid gridRespectBaseSizeProportions">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>

<!-- Not enough space to repsect proportions, because minTrackBreadh it's a harder requirement -->
<div style="width: 10px; height: 275px;">
<div class="grid gridRespectBaseSizeBeforeProportions" style="height: 100%;">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="75"></div>
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="150"></div>
</div>
</div>

<div style="width: 10px; height: 275px;">
<div class="grid gridRespectBaseSizeBeforeProportions">
<div class="sizedToGridArea firstRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea secondRowFirstColumn" data-expected-width="50" data-expected-height="25"></div>
<div class="sizedToGridArea thirdRowFirstColumn" data-expected-width="50" data-expected-height="50"></div>
</div>
</div>

@@ -1,3 +1,35 @@
2015-09-29 Javier Fernandez <jfernandez@igalia.com>

[CSS Grid Layout] Flex tracks sizing alg must handle 0fr values
https://bugs.webkit.org/show_bug.cgi?id=148944

Reviewed by Darin Adler.

We don't allow 0 as flexible size value, which is not following current
specs; it just states that it must be a positive value. This patch
adds such change in the parser but some additional logic must be added
as well to handle 0 values during the flex tracks sizing algorithm.

The old algorithm didn't take 0 values into account, so there is the risk
of division by zero. Additionally, it was not handling fraction values
in the best way. The last versions of the spec changed this algorithm in
order to handle fraction values so that they don't cause exponential
grow of tracks using values bigger than 1.

This patch implements also such new algorithm, so we can deal not only
with 0 values, but managing fraction values properly.

No new tests, just some additional test cases and some of them rebaselined.

* rendering/RenderGrid.cpp:
(WebCore::normalizedFlexFraction):
(WebCore::RenderGrid::computeUsedBreadthOfGridTracks):
(WebCore::RenderGrid::computeFlexFactorUnitSize): Added.
(WebCore::RenderGrid::findFlexFactorUnitSize): Added.
(WebCore::RenderGrid::GridTrackForNormalization): Deleted.
(WebCore::RenderGrid::computeNormalizedFractionBreadth): Deleted.
* rendering/RenderGrid.h:

2015-09-29 Csaba Osztrogonác <ossy@webkit.org>

Fix the broken !ENABLE(STREAM_API) build

0 comments on commit 2b5e272

Please sign in to comment.