diff options
| author | rego@igalia.com <rego@igalia.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538> | 2014-07-16 10:48:00 +0000 |
|---|---|---|
| committer | rego@igalia.com <rego@igalia.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538> | 2014-07-16 10:48:00 +0000 |
| commit | 54a32beb556ec6fb94d516e2949b80b14dd780a3 (patch) | |
| tree | c0ca7bb291ab05bb0360f569146617bebf03f72c /third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html | |
| parent | 45acb6c51852298925516e99e7592738c98e87b8 (diff) | |
| download | chromium_src-54a32beb556ec6fb94d516e2949b80b14dd780a3.zip chromium_src-54a32beb556ec6fb94d516e2949b80b14dd780a3.tar.gz chromium_src-54a32beb556ec6fb94d516e2949b80b14dd780a3.tar.bz2 | |
[CSS Grid Layout] Support sparse in auto-placement algorithm
Sparse mode for auto-placement algorithm was not implemented yet.
This patch implements sparse mode for auto-placement algorithm. 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.
GridIterator has been adapted to look for empty areas from a given
position in both directions.
Test cases have been adapted accordingly, adding new cases to cover both
sparse and dense options.
TEST=fast/css-grid-layout/grid-auto-flow-sparse.html
BUG=384099
Review URL: https://codereview.chromium.org/362733002
git-svn-id: svn://svn.chromium.org/blink/trunk@178262 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html')
| -rw-r--r-- | third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html | 109 |
1 files changed, 109 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html new file mode 100644 index 0000000..907b3ce --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-auto-flow-sparse.html @@ -0,0 +1,109 @@ +<!DOCTYPE html> +<html> +<link href="resources/grid.css" rel="stylesheet"> +<style> +.grid { + grid-template-columns: 50px 100px 150px 200px; + 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"> + <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea secondRowAutoColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div> + <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid"> + <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="150" data-expected-width="50" data-expected-height="150"></div> + <div class="sizedToGridArea firstRowSecondColumn" data-offset-x="50" 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="50" data-expected-height="100"></div> + <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="50" data-offset-y="150" data-expected-width="100" data-expected-height="150"></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> + +<div class="unconstrainedContainer"> + <div class="grid gridAutoFlowColumn"> + <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" 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="50" data-expected-height="100"></div> + <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div> + <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> + +<div class="unconstrainedContainer"> + <div class="grid gridAutoFlowColumn"> + <div class="sizedToGridArea firstRowAutoColumn" data-offset-x="150" data-offset-y="0" data-expected-width="150" data-expected-height="50"></div> + <div class="sizedToGridArea secondRowFirstColumn" data-offset-x="0" data-offset-y="50" data-expected-width="50" data-expected-height="100"></div> + <div class="sizedToGridArea autoRowSecondColumn" data-offset-x="50" data-offset-y="0" data-expected-width="100" data-expected-height="50"></div> + <div class="sizedToGridArea autoRowFirstColumn" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="50"></div> + <div class="sizedToGridArea autoRowAutoColumn" data-offset-x="150" data-offset-y="50" data-expected-width="150" data-expected-height="100"></div> + </div> +</div> + +</body> +</html> |