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 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 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 { writing-mode: horizontal-tb; } |
| 21 .grid > div { border-style: solid; } |
| 22 .firstRowFirstColumn { |
| 23 grid-row: 1; |
| 24 grid-column: 1; |
| 25 background: green; |
| 26 justify-self: stretch; |
| 27 align-self: start; |
| 28 border-width: 0px 0px 10px 0px; |
| 29 } |
| 30 .firstRowSecondColumn { |
| 31 grid-row: 1; |
| 32 grid-column: 2; |
| 33 background: blue; |
| 34 justify-self: start; |
| 35 align-self: stretch; |
| 36 border-width: 0px 20px 0px 0px; |
| 37 } |
| 38 .secondRowFirstColumn { |
| 39 grid-row: 2; |
| 40 grid-column: 1; |
| 41 background: yellow; |
| 42 justify-self: start; |
| 43 align-self: start; |
| 44 border-width: 0px 0px 0px 0px; |
| 45 } |
| 46 .secondRowSecondColumn { |
| 47 grid-row: 2; |
| 48 grid-column: 2; |
| 49 background: red; |
| 50 justify-self: stretch; |
| 51 align-self: stretch; |
| 52 border-width: 0px 10px 20px 0px; |
| 53 } |
| 54 </style> |
| 55 <script src="/resources/testharness.js"></script> |
| 56 <script src="/resources/testharnessreport.js"></script> |
| 57 <script src="../support/check-layout-th.js"></script> |
| 58 <body onload="checkLayout('.grid')"> |
| 59 <div class="grid"> |
| 60 <div data-offset-x="0" data-offset-y="0" data-expected-width="60" data-ex
pected-height="100" class="firstRowFirstColumn">X XX X</div> |
| 61 <div data-offset-x="0" data-offset-y="100" data-expected-width="150" data-ex
pected-height="40" class="firstRowSecondColumn">XX X<br>X XXX<br>X<br>XX XXX</d
iv> |
| 62 <div data-offset-x="150" data-offset-y="0" data-expected-width="60" data-ex
pected-height="10" class="secondRowFirstColumn">X XX X</div> |
| 63 <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> |
| 64 </div> |
OLD | NEW |