OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <meta charset="utf-8"> |
| 3 <title>CSS Grid Layout Test: Self-Alignment and stretch on fixed-sized tracks</t
itle> |
| 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 include their defined border-box."> |
| 10 <style> |
| 11 .grid { |
| 12 position: relative; |
| 13 display: inline-grid; |
| 14 grid-template-columns: 100px 150px; |
| 15 grid-template-rows: 150px 100px; |
| 16 font: 10px/1 Ahem; |
| 17 background: grey; |
| 18 writing-mode: vertical-lr; |
| 19 } |
| 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 0px 10px 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 20px 0px 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 10px 20px 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="10" data-ex
pected-height="100" class="firstRowFirstColumn">X XX X</div> |
| 60 <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-ex
pected-height="60" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</d
iv> |
| 61 <div data-offset-x="150" data-offset-y="0" data-expected-width="10" data-ex
pected-height="60" class="secondRowFirstColumn">X XX X</div> |
| 62 <div data-offset-x="150" data-offset-y="100" data-expected-width="100" data-ex
pected-height="150" class="secondRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</
div> |
| 63 </div> |
OLD | NEW |