| OLD | NEW |
|---|
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset="utf-8"> |
| 3 <title>CSS Grid Layout Test: Self-Alignment and stretch on auto-sized tracks</ti
tle> |
| 4 <link rel="author" title="Javier Fernandez Garcia-Boente" href="mailto:jfernande
z@igalia.com"> |
| 5 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-align-self"
> |
| 6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#propdef-justify-sel
f"> |
| 7 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-justify-self-s
tretch"> |
| 8 <link rel="help" href="https://drafts.csswg.org/css-align/#valdef-align-self-str
etch"> |
| 9 <meta name="assert" content="The stretched orthogonal grid items along the colum
n and/or row axis include their defined border-box."> |
| 10 <style> |
| 11 .grid { |
| 12 position: relative; |
| 13 display: inline-grid; |
| 14 font: 20px/1 Ahem; |
| 15 background: grey; |
| 16 width: 250px; |
| 17 height: 250px; |
| 18 } |
| 19 .grid > div { writing-mode: vertical-lr; } |
| 20 .grid > div { border-style: solid; } |
| 21 .firstRowFirstColumn { |
| 22 grid-row: 1; |
| 23 grid-column: 1; |
| 24 background: green; |
| 25 justify-self: stretch; |
| 26 align-self: start; |
| 27 border-width: 0px 10px 0px 0px; |
| 28 } |
| 29 .firstRowSecondColumn { |
| 30 grid-row: 1; |
| 31 grid-column: 2; |
| 32 background: blue; |
| 33 justify-self: start; |
| 34 align-self: stretch; |
| 35 border-width: 0px 0px 20px 0px; |
| 36 } |
| 37 .secondRowFirstColumn { |
| 38 grid-row: 2; |
| 39 grid-column: 1; |
| 40 background: yellow; |
| 41 justify-self: start; |
| 42 align-self: start; |
| 43 border-width: 0px 0px 0px 0px; |
| 44 } |
| 45 .secondRowSecondColumn { |
| 46 grid-row: 2; |
| 47 grid-column: 2; |
| 48 background: red; |
| 49 justify-self: stretch; |
| 50 align-self: stretch; |
| 51 border-width: 0px 20px 10px 0px; |
| 52 } |
| 53 </style> |
| 54 <script src="/resources/testharness.js"></script> |
| 55 <script src="/resources/testharnessreport.js"></script> |
| 56 <script src="../support/check-layout-th.js"></script> |
| 57 <body onload="checkLayout('.grid')"> |
| 58 <div class="grid"> |
| 59 <div data-offset-x="0" data-offset-y="0" data-expected-width="120" data-ex
pected-height="80" class="firstRowFirstColumn">XX X</div> |
| 60 <div data-offset-x="120" data-offset-y="0" data-expected-width="20" data-ex
pected-height="130" class="firstRowSecondColumn">XX X</div> |
| 61 <div data-offset-x="0" data-offset-y="130" data-expected-width="20" data-ex
pected-height="80" class="secondRowFirstColumn">XX X</div> |
| 62 <div data-offset-x="120" data-offset-y="130" data-expected-width="130" data-ex
pected-height="120" class="secondRowSecondColumn">XX X</div> |
| 63 </div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2919473002:
[css-grid] Apply flow-aware logic for margins during stretching (Closed)
