+2014-07-14 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [CSS Grid Layout] Support sparse in auto-placement algorithm
+ https://bugs.webkit.org/show_bug.cgi?id=134544
+
+ Reviewed by Sergio Villar Senin.
+
+ Test cases have been adapted accordingly, adding new cases to cover both
+ sparse and dense options.
+
+ * fast/css-grid-layout/grid-auto-flow-resolution-expected.txt:
+ * fast/css-grid-layout/grid-auto-flow-resolution.html:
+ * fast/css-grid-layout/grid-auto-flow-sparse-expected.txt: Added.
+ * fast/css-grid-layout/grid-auto-flow-sparse.html: Added.
+ * fast/css-grid-layout/grid-container-change-named-grid-lines-recompute-child.html:
+ * fast/css-grid-layout/grid-item-auto-placement-automatic-span-expected.txt:
+ * fast/css-grid-layout/grid-item-auto-placement-automatic-span.html:
+ * fast/css-grid-layout/grid-item-auto-placement-definite-span-expected.txt:
+ * fast/css-grid-layout/grid-item-auto-placement-definite-span.html:
+ * fast/css-grid-layout/grid-item-removal-auto-placement-update.html:
+ * fast/css-grid-layout/named-grid-lines-with-named-grid-areas-resolution.html:
+ * fast/css-grid-layout/resources/grid.css:
+ (.autoRowAutoColumnSpanning2):
+ (.autoRowSpanning2AutoColumn):
+ (.autoRowSpanning2AutoColumnSpanning3):
+ (.autoRowSpanning3AutoColumnSpanning2):
+ (.gridAutoFlowColumnDense):
+ (.gridAutoFlowRowDense):
+
2014-07-14 Bear Travis <betravis@adobe.com>
[Feature Queries] Enable Feature Queries on Mac
PASS
XXXXX XXXXX XXXXX
XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
+PASS
+XXXXX XXXXX XXXXX
+XXXXX XXXXX XXXXX
PASS
XXXXX XXXXX XXXXX
XXXXX XXXXX XXXXX
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid bigGrid gridAutoFlowColumnDense">
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
</div>
</div>
<div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150">XXXXX XXXXX XXXXX</div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid bigGrid gridAutoFlowRowDense">
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100">XXXXX XXXXX XXXXX</div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50">XXXXX XXXXX XXXXX</div>
</div>
</div>
--- /dev/null
+This test checks that the auto-placement algorithm is sparse by default.
+
+PASS
+PASS
+PASS
+PASS
--- /dev/null
+<!DOCTYPE html>
+<html>
+<link href="resources/grid.css" rel="stylesheet">
+<style>
+.grid {
+ -webkit-grid-template-columns: 50px 100px 150px 200px;
+ -webkit-grid-template-rows: 50px 100px 150px 200px;
+}
+
+.unconstrainedContainer {
+ /* For accurate x / y offset. */
+ position: relative;
+}
+</style>
+<script src="../../resources/check-layout.js"></script>
+<body onload="checkLayout('.grid')">
+
+<p>This test checks that the auto-placement algorithm is sparse by default.</p>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="50" data-offset-y="50" data-expected-width="250" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid">
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="150" data-offset-y="0" data-expected-width="350" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning3" data-offset-x="50" data-offset-y="150" data-expected-width="450" data-expected-height="350"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="50" data-expected-height="200"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid gridAutoFlowColumn">
+ <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="250"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="150" data-expected-width="150" data-expected-height="150"></div>
+ </div>
+</div>
+
+<div class="unconstrainedContainer">
+ <div class="grid gridAutoFlowColumn">
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="350"></div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="300" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning3AutoColumnSpanning2" data-offset-x="150" data-offset-y="50" data-expected-width="350" data-expected-height="450"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ </div>
+</div>
+
+</body>
+</html>
<script src="../../resources/check-layout.js"></script>
<style type="text/css">
.grid {
- -webkit-grid-auto-flow: row;
+ -webkit-grid-auto-flow: row dense;
}
#firstGridItem {
PASS
PASS
PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
+PASS
-webkit-grid-template-rows: 50px 100px (line) 200px (line);
}
-.autoRowAutoColumnSpanning2 {
- background-color: maroon;
- -webkit-grid-column: span 2;
- -webkit-grid-row: auto;
-}
-
.autoRowAutoColumnSpanning3 {
background-color: teal;
-webkit-grid-column: span 3;
</div>
<div style="position: relative">
+ <div class="grid gridAutoFlowRowDense">
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="200" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="250" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="250" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="300" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div style="position: relative">
<div class="grid gridAutoFlowRow">
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="250" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="300" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="350" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="400" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="0" data-offset-y="450" data-expected-width="200" data-expected-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid gridAutoFlowRowDense">
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="150" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="200" data-expected-width="200" data-expected-height="50"></div>
</div>
<div style="position: relative">
+ <div class="grid gridAutoFlowRowDense">
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="150" data-expected-width="200" data-expected-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
<div class="grid gridAutoFlowRow gridNamedGridLinesColumns">
<div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="100" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="200" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="50" data-offset-y="200" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="200" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="0" data-offset-y="250" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="50" data-offset-y="250" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid gridAutoFlowRowDense gridNamedGridLinesColumns">
+ <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumnSpanning2Line" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowThirdColumn" data-offset-x="150" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumnSpanningLine" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="50"></div>
</div>
<div style="position: relative">
+ <div class="grid gridAutoFlowColumnDense">
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="300" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="400" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="500" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="600" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div style="position: relative">
<div class="grid gridAutoFlowColumn">
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="600" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="700" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="800" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="900" data-offset-y="0" data-expected-width="200" data-expected-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid gridAutoFlowColumnDense">
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea autoRowSpanning2AutoColumn" data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
</div>
<div style="position: relative">
+ <div class="grid gridAutoFlowColumnDense">
+ <div class="sizedToGridArea autoRowAutoColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowAutoColumnSpanning3" data-offset-x="200" data-offset-y="0" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2AutoColumnSpanning2" data-offset-x="300" data-offset-y="50" data-expected-width="200" data-expected-height="100"></div>
+ </div>
+</div>
+
+<div style="position: relative">
<div class="grid gridAutoFlowColumn gridNamedGridLinesRows">
<div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="200" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="300" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="400" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="400" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="400" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
+ <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="500" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="500" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div-->
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid gridAutoFlowColumnDense gridNamedGridLinesRows">
+ <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea autoRowSpanning2LineAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
<div class="sizedToGridArea thirdRowAutoColumn" data-offset-x="100" data-offset-y="150" data-expected-width="100" data-expected-height="200"></div>
<div class="sizedToGridArea autoRowSpanningLineAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
PASS
PASS
PASS
+PASS
+PASS
+PASS
+PASS
<div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="150" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid gridAutoFlowRowDense">
+ <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
<div style="position: relative">
+ <div class="grid gridAutoFlowRowDense">
+ <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div style="position: relative">
<div class="grid gridAutoFlowColumn">
<div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
<div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="300" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
+<div style="position: relative">
+ <div class="grid gridAutoFlowColumnDense">
+ <div class="sizedToGridArea firstRowSpanning2AutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea secondRowSpanning2AutoColumn" data-offset-x="100" data-offset-y="50" data-expected-width="100" data-expected-height="100"></div>
+ <div class="sizedToGridArea firstRowSpanning3AutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="150"></div>
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="50"></div>
<div class="sizedToGridArea autoRowAutoColumn" data-offset-x="100" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
</div>
</div>
</div>
+<div style="position: relative">
+ <div class="grid gridAutoFlowColumnDense">
+ <div class="sizedToGridArea autoRowFirstColumnSpanning2" data-offset-x="0" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowSecondColumnSpanning2" data-offset-x="100" data-offset-y="50" data-expected-width="200" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowFirstColumnSpanning3" data-offset-x="0" data-offset-y="100" data-expected-width="300" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="100" data-expected-height="50"></div>
+ <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="200" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div>
+ </div>
+</div>
+
</body>
</html>
</div>
<div class="unconstrainedContainer">
- <div class="grid gridAutoFlowColumn" id="gridAutoFlowColumnWithAutoItems">
+ <div class="grid gridAutoFlowColumnDense" id="gridAutoFlowColumnWithAutoItems">
<div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea autoRowSecondColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
</div>
<div class="unconstrainedContainer">
- <div class="grid gridAutoFlowRow" id="gridAutoFlowRowWithAutoAndFixedItems">
+ <div class="grid gridAutoFlowRowDense" id="gridAutoFlowRowWithAutoAndFixedItems">
<div class="sizedToGridArea autoRowFirstColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea firstRowSecondColumn">XXXXX XXXXX XXXXX</div>
<div class="sizedToGridArea secondRowAutoColumn">XXXXX XXXXX XXXXX</div>
<!-- Check positioning using grid areas -->
<div style="position: relative">
- <div class="grid gridAreas gridNoLineNames">
+ <div class="grid gridAreas gridNoLineNames gridAutoFlowRowDense">
<div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
<div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
<!-- Use grid area's implicit line names if defined before explicitly named grid lines -->
<div style="position: relative">
- <div class="grid gridAreas gridWithNamedLineAfterGridArea">
+ <div class="grid gridAreas gridWithNamedLineAfterGridArea gridAutoFlowRowDense">
<div class="sizedToGridArea" style="-webkit-grid-column: d;" data-offset-x="150" data-offset-y="0" data-expected-width="200" data-expected-height="50"></div>
<div class="sizedToGridArea" style="-webkit-grid-row: d;" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="200"></div>
<div class="sizedToGridArea" style="-webkit-grid-column: c;" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div>
-webkit-grid-row: auto;
}
+.autoRowAutoColumnSpanning2 {
+ background-color: maroon;
+ -webkit-grid-column: span 2;
+ -webkit-grid-row: auto;
+}
+
+.autoRowSpanning2AutoColumn {
+ background-color: aqua;
+ -webkit-grid-column: auto;
+ -webkit-grid-row: span 2;
+}
+
+.autoRowSpanning2AutoColumnSpanning3 {
+ background-color: olive;
+ -webkit-grid-column: span 3;
+ -webkit-grid-row: span 2;
+}
+
+.autoRowSpanning3AutoColumnSpanning2 {
+ background-color: indigo;
+ -webkit-grid-column: span 2;
+ -webkit-grid-row: span 3;
+}
+
/* Grid element flow. */
.gridAutoFlowStack {
-webkit-grid-auto-flow: stack;
-webkit-grid-auto-flow: column;
}
+.gridAutoFlowColumnDense {
+ -webkit-grid-auto-flow: column dense;
+}
+
.gridAutoFlowRow {
-webkit-grid-auto-flow: row;
}
+.gridAutoFlowRowDense {
+ -webkit-grid-auto-flow: row dense;
+}
+
/* This rule makes sure the container is smaller than any grid items to avoid distributing any extra logical space to them. */
.constrainedContainer {
width: 10px;
+2014-07-14 Manuel Rego Casasnovas <rego@igalia.com>
+
+ [CSS Grid Layout] Support sparse in auto-placement algorithm
+ https://bugs.webkit.org/show_bug.cgi?id=134544
+
+ Reviewed by Sergio Villar Senin.
+
+ This patch implements sparse mode for auto-placement algorithm, which is
+ the default mode in the new grid-auto-flow syntax. It keeps track of the
+ auto-placement cursor in
+ RenderGrid::placeAutoMajorAxisItemsOnGrid() and updates it accordingly
+ when auto-positioned items are placed.
+ If we're in dense mode it resets the cursor after each item (which keeps
+ the old behavior that was using dense mode by default).
+
+ GridIterator has been adapted to look for empty areas from a given
+ position in both directions.
+
+ Test: fast/css-grid-layout/grid-auto-flow-sparse.html
+
+ * rendering/RenderGrid.cpp:
+ (WebCore::RenderGrid::GridIterator::GridIterator): Modify constructor to
+ add an optional argument for the varying index. This allows to look for
+ empty areas in both axis.
+ (WebCore::RenderGrid::placeAutoMajorAxisItemsOnGrid): Defined the
+ auto-placement cursor and rested after each item if we're in dense mode.
+ (WebCore::RenderGrid::placeAutoMajorAxisItemOnGrid): Use auto-placement
+ cursor to look for empty areas from the last auto-positioned item
+ placed.
+ * rendering/RenderGrid.h: Modify placeAutoMajorAxisItemOnGrid() header
+ to receive the auto-placement cursor.
+
2014-07-14 Brent Fulgham <bfulgham@apple.com>
[iOS] Some videos play as inline audio-only content
public:
// |direction| is the direction that is fixed to |fixedTrackIndex| so e.g
// GridIterator(m_grid, ForColumns, 1) will walk over the rows of the 2nd column.
- GridIterator(const Vector<Vector<Vector<RenderBox*, 1>>>& grid, GridTrackSizingDirection direction, size_t fixedTrackIndex)
+ GridIterator(const Vector<Vector<Vector<RenderBox*, 1>>>& grid, GridTrackSizingDirection direction, size_t fixedTrackIndex, size_t varyingTrackIndex = 0)
: m_grid(grid)
, m_direction(direction)
- , m_rowIndex((direction == ForColumns) ? 0 : fixedTrackIndex)
- , m_columnIndex((direction == ForColumns) ? fixedTrackIndex : 0)
+ , m_rowIndex((direction == ForColumns) ? varyingTrackIndex : fixedTrackIndex)
+ , m_columnIndex((direction == ForColumns) ? fixedTrackIndex : varyingTrackIndex)
, m_childIndex(0)
{
ASSERT(m_rowIndex < m_grid.size());
void RenderGrid::placeAutoMajorAxisItemsOnGrid(const Vector<RenderBox*>& autoGridItems)
{
- for (auto& autoGridItem : autoGridItems)
- placeAutoMajorAxisItemOnGrid(autoGridItem);
+ AutoPlacementCursor autoPlacementCursor = {0, 0};
+ bool isGridAutoFlowDense = style().isGridAutoFlowAlgorithmDense();
+
+ for (auto& autoGridItem : autoGridItems) {
+ placeAutoMajorAxisItemOnGrid(autoGridItem, autoPlacementCursor);
+
+ if (isGridAutoFlowDense) {
+ autoPlacementCursor.first = 0;
+ autoPlacementCursor.second = 0;
+ }
+ }
}
-void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem)
+void RenderGrid::placeAutoMajorAxisItemOnGrid(RenderBox* gridItem,
+AutoPlacementCursor& autoPlacementCursor)
{
std::unique_ptr<GridSpan> minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromStyle(style(), *gridItem, autoPlacementMinorAxisDirection());
ASSERT(!GridResolvedPosition::resolveGridPositionsFromStyle(style(), *gridItem, autoPlacementMajorAxisDirection()));
GridSpan majorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *gridItem, autoPlacementMajorAxisDirection(), GridResolvedPosition(0));
+
+ const size_t endOfMajorAxis = (autoPlacementMajorAxisDirection() == ForColumns) ? gridColumnCount() : gridRowCount();
+ size_t majorAxisAutoPlacementCursor = autoPlacementMajorAxisDirection() == ForColumns ? autoPlacementCursor.second : autoPlacementCursor.first;
+ size_t minorAxisAutoPlacementCursor = autoPlacementMajorAxisDirection() == ForColumns ? autoPlacementCursor.first : autoPlacementCursor.second;
+
std::unique_ptr<GridCoordinate> emptyGridArea;
if (minorAxisPositions) {
- GridIterator iterator(m_grid, autoPlacementMinorAxisDirection(), minorAxisPositions->resolvedInitialPosition.toInt());
- emptyGridArea = iterator.nextEmptyGridArea(minorAxisPositions->integerSpan(), majorAxisPositions.integerSpan());
+ // Move to the next track in major axis if initial position in minor axis is before auto-placement cursor.
+ if (minorAxisPositions->resolvedInitialPosition.toInt() < minorAxisAutoPlacementCursor)
+ majorAxisAutoPlacementCursor++;
+
+ if (majorAxisAutoPlacementCursor < endOfMajorAxis) {
+ GridIterator iterator(m_grid, autoPlacementMinorAxisDirection(), minorAxisPositions->resolvedInitialPosition.toInt(), majorAxisAutoPlacementCursor);
+ emptyGridArea = iterator.nextEmptyGridArea(minorAxisPositions->integerSpan(), majorAxisPositions.integerSpan());
+ }
+
if (!emptyGridArea)
emptyGridArea = createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(gridItem, autoPlacementMinorAxisDirection(), *minorAxisPositions);
} else {
GridSpan minorAxisPositions = GridResolvedPosition::resolveGridPositionsFromAutoPlacementPosition(style(), *gridItem, autoPlacementMinorAxisDirection(), GridResolvedPosition(0));
- const size_t endOfMajorAxis = (autoPlacementMajorAxisDirection() == ForColumns) ? gridColumnCount() : gridRowCount();
- for (size_t majorAxisIndex = 0; majorAxisIndex < endOfMajorAxis; ++majorAxisIndex) {
- GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisIndex);
+ for (size_t majorAxisIndex = majorAxisAutoPlacementCursor; majorAxisIndex < endOfMajorAxis; ++majorAxisIndex) {
+ GridIterator iterator(m_grid, autoPlacementMajorAxisDirection(), majorAxisIndex, minorAxisAutoPlacementCursor);
emptyGridArea = iterator.nextEmptyGridArea(majorAxisPositions.integerSpan(), minorAxisPositions.integerSpan());
if (emptyGridArea) {
// We don't need to create a new empty grid area yet as we might find a valid one in the next iteration.
emptyGridArea = nullptr;
}
+
+ // As we're moving to the next track in the major axis we should reset the auto-placement cursor in the minor axis.
+ minorAxisAutoPlacementCursor = 0;
}
if (!emptyGridArea)
}
insertItemIntoGrid(gridItem, *emptyGridArea);
+ autoPlacementCursor.first = emptyGridArea->rows.resolvedInitialPosition.toInt();
+ autoPlacementCursor.second = emptyGridArea->columns.resolvedInitialPosition.toInt();
}
GridTrackSizingDirection RenderGrid::autoPlacementMajorAxisDirection() const
std::unique_ptr<GridCoordinate> createEmptyGridAreaAtSpecifiedPositionsOutsideGrid(const RenderBox*, GridTrackSizingDirection, const GridSpan&) const;
void placeSpecifiedMajorAxisItemsOnGrid(const Vector<RenderBox*>&);
void placeAutoMajorAxisItemsOnGrid(const Vector<RenderBox*>&);
- void placeAutoMajorAxisItemOnGrid(RenderBox*);
+ typedef std::pair<size_t, size_t> AutoPlacementCursor;
+ void placeAutoMajorAxisItemOnGrid(RenderBox*, AutoPlacementCursor&);
GridTrackSizingDirection autoPlacementMajorAxisDirection() const;
GridTrackSizingDirection autoPlacementMinorAxisDirection() const;