diff options
| author | svillar <svillar@igalia.com> | 2015-10-20 03:33:34 -0700 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2015-10-20 10:34:22 +0000 |
| commit | 7eafefcbd32c3e1b0c534dc54694065926076f6b (patch) | |
| tree | 17c79fcb02d7882ba74cf4265322e96f3b165b72 /third_party/WebKit/LayoutTests/fast/css-grid-layout | |
| parent | ad92622a9f4001e648f9cc45298e7bdd14d1a4a8 (diff) | |
| download | chromium_src-7eafefcbd32c3e1b0c534dc54694065926076f6b.zip chromium_src-7eafefcbd32c3e1b0c534dc54694065926076f6b.tar.gz chromium_src-7eafefcbd32c3e1b0c534dc54694065926076f6b.tar.bz2 | |
[css-grid] Fix freeSpace computation with non-zero baseSize flex tracks
The freeSpace computation was incorrect whenever the flex tracks had
a non-zero baseSize before the 1fr unit size resolution. That happened
because when assigning the new base size to the flex track, we were
unconditionally subtracting the whole base size to the freeSpace. That's
correct if the track is a "pure" flex track, i.e. 2fr, but if the track had
a non-zero base size (like minmax(10px, 1fr)) then both the new and the old
base sizes were incorrectly used to compute the freeSpace.
We can test the amount of remaining freeSpace by using content distribution to align and item place on a non-zero baseSize flex track. If the freeSpace computation is correct then the alignment will be accurate.
Review URL: https://codereview.chromium.org/1408403003
Cr-Commit-Position: refs/heads/master@{#355028}
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/css-grid-layout')
| -rw-r--r-- | third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution-expected.txt | 20 | ||||
| -rw-r--r-- | third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution.html | 81 |
2 files changed, 101 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution-expected.txt new file mode 100644 index 0000000..e6916ee --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution-expected.txt @@ -0,0 +1,20 @@ +This test checks that freeSpace is properly computed after computing fr tracks so that we could use it for content distribution + +Grid with justify-content: start. + +PASS +Grid with justify-content: center. + +PASS +Grid with justify-content: end. + +PASS +Grid with align-content: start. + +PASS +Grid with align-content: center. + +PASS +Grid with align-content: end. + +PASS diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution.html new file mode 100644 index 0000000..bdabea2 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/flex-content-distribution.html @@ -0,0 +1,81 @@ +<!DOCTYPE html> + +<link href="resources/grid.css" rel="stylesheet"> +<link href="resources/grid-alignment.css" rel="stylesheet"> +<style> +.freeSpaceForColumnsGrid { + grid-template: minmax(20px, 0.7fr) / 100%; + width: 50px; + height: 100px; +} + +.freeSpaceForRowsGrid { + grid-template: 100% / minmax(20px, 0.7fr); + width: 50px; + height: 100px; +} + +.container { position: relative; } + +.item { + width: 100%; + height: 50px; + background-color: red; +} + +.item2 { + width: 50px; + height: 100%; + background-color: red; +} + +</style> + +<script src="../../resources/check-layout.js"></script> + +<body onload="checkLayout('.grid');"> + +<p>This test checks that freeSpace is properly computed after computing fr tracks so that we could use it for content distribution</p> + +<p>Grid with justify-content: start.</p> +<div class="container"> + <div class="grid freeSpaceForColumnsGrid justifyContentStart"> + <div class="item" data-offset-x="0" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div> + </div> +</div> + +<p>Grid with justify-content: center.</p> +<div class="container"> + <div class="grid freeSpaceForColumnsGrid justifyContentCenter"> + <div class="item" data-offset-x="8" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div> + </div> +</div> + +<p>Grid with justify-content: end.</p> +<div class="container"> + <div class="grid freeSpaceForColumnsGrid justifyContentEnd"> + <div class="item" data-offset-x="15" data-offset-y="0" data-expected-width="35" data-expected-height="50"></div> + </div> +</div> + +<p>Grid with align-content: start.</p> +<div class="container"> + <div class="grid freeSpaceForRowsGrid alignContentStart"> + <div class="item2" data-offset-x="0" data-offset-y="0" data-expected-width="50" data-expected-height="70"></div> + </div> +</div> + +<p>Grid with align-content: center.</p> +<div class="container"> + <div class="grid freeSpaceForRowsGrid alignContentCenter"> + <div class="item2" data-offset-x="0" data-offset-y="15" data-expected-width="50" data-expected-height="70"></div> + </div> +</div> + +<p>Grid with align-content: end.</p> +<div class="container"> + <div class="grid freeSpaceForRowsGrid alignContentEnd"> + <div class="item2" data-offset-x="0" data-offset-y="30" data-expected-width="50" data-expected-height="70"></div> + </div> +</div> +</body> |