diff options
| author | jfernandez <jfernandez@igalia.com> | 2015-10-02 12:03:40 -0700 |
|---|---|---|
| committer | Commit bot <commit-bot@chromium.org> | 2015-10-02 19:04:25 +0000 |
| commit | 42162f3d51bc0472475314a04661dfcc57096778 (patch) | |
| tree | adf78bf60db6377a0ea6436ffee8c87a19817def /third_party/WebKit/LayoutTests/fast/css-grid-layout | |
| parent | 5e0bd99c4011ab4592eb2ecefdae4430d08fdc41 (diff) | |
| download | chromium_src-42162f3d51bc0472475314a04661dfcc57096778.zip chromium_src-42162f3d51bc0472475314a04661dfcc57096778.tar.gz chromium_src-42162f3d51bc0472475314a04661dfcc57096778.tar.bz2 | |
[CSS Grid Layout] Combining Content and Self Alignment with span items
Using the Content Alignment CSS properties we can add offsets to the
grid tracks so they are not adjacent anymore. This requires to handle
Self Alignment of items spanning more than one track in a special way,
because grid item's area breadth is bigger than the tracks base size it
occupies.
In order to properly adjust the Self Alignment values we need to consider
the offset between tracks.
BUG=249451, 376823
Review URL: https://codereview.chromium.org/1342453004
Cr-Commit-Position: refs/heads/master@{#352096}
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/css-grid-layout')
2 files changed, 295 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt new file mode 100644 index 0000000..e7c4fbd --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment-expected.txt @@ -0,0 +1,50 @@ +This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track. + +direction: LTR | distribution: 'space-between' | self-alignment: center + +PASS +direction: LTR | distribution: 'space-between' | self-alignment: end + +PASS +direction: LTR | distribution: 'space-around' | self-alignment: center + +PASS +direction: LTR | distribution: 'space-around' | self-alignment: end + +PASS +direction: LTR | distribution: 'space-evenly' | self-alignment: center + +PASS +direction: LTR | distribution: 'space-evenly' | self-alignment: end + +PASS +direction: LTR | distribution: 'stretch' | self-alignment: center + +PASS +direction: LTR | distribution: 'stretch' | self-alignment: end + +PASS +direction: RTL | distribution: 'space-between' | self-alignment: center + +PASS +direction: RTL | distribution: 'space-between' | self-alignment: end + +PASS +direction: RTL | distribution: 'space-around' | self-alignment: center + +PASS +direction: RTL | distribution: 'space-around' | self-alignment: end + +PASS +direction: RTL | distribution: 'space-evenly' | self-alignment: center + +PASS +direction: RTL | distribution: 'space-evenly' | self-alignment: end + +PASS +direction: RTL | distribution: 'stretch' | self-alignment: center + +PASS +direction: RTL | distribution: 'stretch' | self-alignment: end + +PASS diff --git a/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html new file mode 100644 index 0000000..5ed39f0 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css-grid-layout/grid-content-alignment-and-self-alignment.html @@ -0,0 +1,245 @@ +<!DOCTYPE html> +<html> +<head> +<link href="resources/grid.css" rel="stylesheet"> +<script src="../../resources/check-layout.js"></script> +<style> +body { + margin: 0px; +} + +.grid { + grid-auto-columns: 20px; + grid-auto-rows: 40px; + grid-template-areas: "a a b" + "c d b"; + position: relative; + width: 300px; + height: 200px; +} +.a { + grid-area: a; + background-color: blue; +} +.b { + grid-area: b; + background-color: lime; +} +.c { + grid-area: c; + background-color: purple; +} +.d { + grid-area: d; + background-color: orange; +} +.stretchedGrid { + grid-auto-columns: minmax(20px, auto); + grid-auto-rows: minmax(40px, auto); +} + +.spaceBetween { + justify-content: space-between; + align-content: space-between; +} + +.spaceAround { + justify-content: space-around; + align-content: space-around; +} + +.spaceEvenly { + justify-content: space-evenly; + align-content: space-evenly; +} + +.stretch { + justify-content: stretch; + align-content: stretch; +} + +.cell { + width: 20px; + height: 40px; +} +.justifyCenter { + justify-self: center; +} +.alignCenter { + align-self: center; +} +.justifyEnd { + justify-self: end; +} +.alignEnd { + align-self: end; +} +</style> +</head> +<body onload="checkLayout('.grid')"> + +<p>This test checks that Content Distribution alignment works fine in combination with Self Alignmet and items span more than one track.</p> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter" data-offset-x="70" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignCenter" data-offset-x="280" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spaceBetween" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-around' | self-alignment: center</p> + <div class="grid spaceAround" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-around' | self-alignment: end</p> + <div class="grid spaceAround" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignEnd" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-evenly' | self-alignment: center</p> + <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter" data-offset-x="100" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignCenter" data-offset-x="220" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'space-evenly' | self-alignment: end</p> + <div class="grid spaceEvenly" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignEnd" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'stretch' | self-alignment: center</p> + <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter alignCenter" data-offset-x="90" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifyCenter alignCenter" data-offset-x="240" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: LTR | distribution: 'stretch' | self-alignment: end</p> + <div class="grid stretchedGrid stretch" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd alignEnd" data-offset-x="180" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifyEnd alignEnd" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<!-- RTL direction. --> +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between' | self-alignment: center</p> + <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter" data-offset-x="210" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignCenter" data-offset-x="0" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-between' | self-alignment: end</p> + <div class="grid spaceBetween directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="0" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="280" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-around' | self-alignment: center</p> + <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-around' | self-alignment: end</p> + <div class="grid spaceAround directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignEnd" data-offset-x="40" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="240" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="130" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-evenly' | self-alignment: center</p> + <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter" data-offset-x="180" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignCenter" data-offset-x="60" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'space-evenly' | self-alignment: end</p> + <div class="grid spaceEvenly directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd" data-offset-x="140" data-offset-y="40" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell alignEnd" data-offset-x="60" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="220" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + <div class="d" data-offset-x="140" data-offset-y="120" data-expected-width="20" data-expected-height="40"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'stretch' | self-alignment: center</p> + <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyCenter alignCenter" data-offset-x="190" data-offset-y="30" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifyCenter alignCenter" data-offset-x="40" data-offset-y="80" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +<div style="position: relative"> + <p>direction: RTL | distribution: 'stretch' | self-alignment: end</p> + <div class="grid stretchedGrid stretch directionRTL" data-expected-width="300" data-expected-height="200"> + <div class="a cell justifyEnd alignEnd" data-offset-x="100" data-offset-y="60" data-expected-width="20" data-expected-height="40"></div> + <div class="b cell justifyEnd alignEnd" data-offset-x="0" data-offset-y="160" data-expected-width="20" data-expected-height="40"></div> + <div class="c" data-offset-x="200" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + <div class="d" data-offset-x="100" data-offset-y="100" data-expected-width="100" data-expected-height="100"></div> + </div> +</div> + +</body> +</html> |