| Index: third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-007.html
|
| diff --git a/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-007.html b/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-007.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..ac9231412f4015160804e16fa2a9c0f254a1b4fc
|
| --- /dev/null
|
| +++ b/third_party/WebKit/LayoutTests/external/wpt/css/css-grid-1/alignment/grid-self-alignment-stretch-vertical-rl-007.html
|
| @@ -0,0 +1,64 @@
|
| +<!DOCTYPE html>
|
| +<meta charset="utf-8">
|
| +<title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</title>
|
| +<link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernandez@igalia.com">
|
| +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self">
|
| +<link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-self">
|
| +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-stretch">
|
| +<link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-stretch">
|
| +<meta name="assert" content="The stretched orthogonal grid items along the column and/or row axis include their defined border-box.">
|
| +<style>
|
| +.grid {
|
| + position: relative;
|
| + display: inline-grid;
|
| + grid-template-columns: 100px 150px;
|
| + grid-template-rows: 150px 100px;
|
| + font: 10px/1 Ahem;
|
| + background: grey;
|
| + writing-mode: vertical-rl;
|
| +}
|
| +.grid > div { writing-mode: horizontal-tb; }
|
| +.grid > div { border-style: solid; }
|
| +.firstRowFirstColumn {
|
| + grid-row: 1;
|
| + grid-column: 1;
|
| + background: green;
|
| + justify-self: stretch;
|
| + align-self: start;
|
| + border-width: 0px 0px 10px 0px;
|
| +}
|
| +.firstRowSecondColumn {
|
| + grid-row: 1;
|
| + grid-column: 2;
|
| + background: blue;
|
| + justify-self: start;
|
| + align-self: stretch;
|
| + border-width: 0px 20px 0px 0px;
|
| +}
|
| +.secondRowFirstColumn {
|
| + grid-row: 2;
|
| + grid-column: 1;
|
| + background: yellow;
|
| + justify-self: start;
|
| + align-self: start;
|
| + border-width: 0px 0px 0px 0px;
|
| +}
|
| +.secondRowSecondColumn {
|
| + grid-row: 2;
|
| + grid-column: 2;
|
| + background: red;
|
| + justify-self: stretch;
|
| + align-self: stretch;
|
| + border-width: 0px 10px 20px 0px;
|
| +}
|
| +</style>
|
| +<script src="/resources/testharness.js"></script>
|
| +<script src="/resources/testharnessreport.js"></script>
|
| +<script src="../support/check-layout-th.js"></script>
|
| +<body onload="checkLayout('.grid')">
|
| +<div class="grid">
|
| + <div data-offset-x="190" data-offset-y="0" data-expected-width="60" data-expected-height="100" class="firstRowFirstColumn">X XX X</div>
|
| + <div data-offset-x="100" data-offset-y="100" data-expected-width="150" data-expected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
| + <div data-offset-x="40" data-offset-y="0" data-expected-width="60" data-expected-height="10" class="secondRowFirstColumn">X XX X</div>
|
| + <div data-offset-x="0" data-offset-y="100" data-expected-width="100" data-expected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</div>
|
| +</div>
|
|
|
Chromium Code Reviews
Issue 2919473002:
[css-grid] Apply flow-aware logic for margins during stretching (Closed)
