OLD | NEW |
---|---|
(Empty) | |
1 <!DOCTYPE html> | |
2 <meta charset="utf-8"> | |
3 <title>CSS Grid Layout Test: Self-Baseline alignment may change grid area height </title> | |
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/#baseline-align-self "> | |
6 <link rel="help" href="https://drafts.csswg.org/css-align-3/#align-by-baseline"> | |
7 <link rel="match" href="../../../reference/ref-filled-green-100px-square.xht"> | |
8 <meta name="assert" content="Column-Axis Self-Baseline alignment may change grid area height on a fixed grid."> | |
9 <style> | |
10 .block, .grid { font: 10px/1 Ahem; } | |
11 .big { font-size: 20px; } | |
12 .block { | |
13 position: absolute; | |
14 z-index: -1; | |
15 background: green; | |
16 width: 100px; | |
17 height: 100px; | |
18 } | |
19 .block > div { | |
20 position: absolute; | |
21 color: red; | |
22 } | |
23 .grid { | |
24 display: grid; | |
25 width: 100px; | |
26 height: 100px; | |
27 color: green; | |
28 grid-auto-columns: 50px; | |
29 align-items: baseline; | |
30 align-content: start; | |
31 } | |
32 .firstRowFirstColumn { | |
33 grid-row: 1; | |
34 grid-column: 1; | |
35 } | |
36 .firstRowSecondColumn { | |
37 grid-row: 1; | |
38 grid-column: 2; | |
39 } | |
40 .secondRowFirstColumn { | |
41 grid-row: 2; | |
42 grid-column: 1; | |
43 } | |
44 </style> | |
45 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p > | |
46 <div class="block"> | |
47 <div style="top: 8px; left: 0px;">XX<br>XXXX<br>XX<br>XX X</div> | |
48 <div style="top: 0px; left: 50px; font-size: 20px">X</div> | |
Manuel Rego
2017/05/16 10:29:39
Nit: You could use "big" class here.
jfernandez
2017/05/30 10:39:29
Acknowledged.
| |
49 </div> | |
50 <div class="grid"> | |
51 <div class="firstRowFirstColumn">XX XXXX XX</div> | |
52 <div class="firstRowSecondColumn big">X</div> | |
53 <div class="secondRowFirstColumn">XX X</div> | |
54 </div> | |
OLD | NEW |