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 grid items along the column and/or ro
w axis respect their defined margin-box's boundaries."> |
| 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 writing-mode: vertical-lr; |
| 19 } |
| 20 .firstRowFirstColumn { |
| 21 grid-row: 1; |
| 22 grid-column: 1; |
| 23 background: green; |
| 24 justify-self: stretch; |
| 25 align-self: start; |
| 26 margin-bottom: 10px; |
| 27 } |
| 28 .firstRowSecondColumn { |
| 29 grid-row: 1; |
| 30 grid-column: 2; |
| 31 background: blue; |
| 32 justify-self: start; |
| 33 align-self: stretch; |
| 34 margin-right: 20px; |
| 35 } |
| 36 .secondRowFirstColumn { |
| 37 grid-row: 2; |
| 38 grid-column: 1; |
| 39 background: yellow; |
| 40 justify-self: start; |
| 41 align-self: start; |
| 42 } |
| 43 .secondRowSecondColumn { |
| 44 grid-row: 2; |
| 45 grid-column: 2; |
| 46 background: red; |
| 47 justify-self: stretch; |
| 48 align-self: stretch; |
| 49 margin-bottom: 20px; |
| 50 margin-right: 10px; |
| 51 } |
| 52 </style> |
| 53 <script src="/resources/testharness.js"></script> |
| 54 <script src="/resources/testharnessreport.js"></script> |
| 55 <script src="../support/check-layout-th.js"></script> |
| 56 <body onload="checkLayout('.grid')"> |
| 57 <div class="grid"> |
| 58 <div data-offset-x="0" data-offset-y="0" data-expected-width="20" data-ex
pected-height="110" class="firstRowFirstColumn">XX X</div> |
| 59 <div data-offset-x="0" data-offset-y="120" data-expected-width="110" data-ex
pected-height="80" class="firstRowSecondColumn">XX X</div> |
| 60 <div data-offset-x="130" data-offset-y="00" data-expected-width="20" data-ex
pected-height="80" class="secondRowFirstColumn">XX X</div> |
| 61 <div data-offset-x="130" data-offset-y="120" data-expected-width="110" data-ex
pected-height="110" class="secondRowSecondColumn">XX X</div> |
| 62 </div> |
OLD | NEW |