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 on fixed-sized grid</title> | |
Manuel Rego
2017/05/11 14:10:08
You can whether put a simpler title (that probably
jfernandez
2017/05/11 21:51:30
Done.
| |
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."> | |
9 <style> | |
10 .block { | |
11 position: absolute; | |
12 z-index: -1; | |
13 background: green; | |
14 width: 100px; | |
15 height: 100px; | |
16 } | |
17 .block > div { | |
18 position: absolute; | |
19 color: red; | |
20 } | |
21 .grid { | |
22 display: grid; | |
23 width: 100px; | |
24 height: 100px; | |
25 font: 10px/1 Ahem; | |
26 color: green; | |
27 grid-auto-columns: 50px; | |
28 align-items: baseline; | |
29 align-content: start; | |
30 } | |
31 .i1 { | |
Manuel Rego
2017/05/11 14:10:08
Please use more descriptive class names like "firs
jfernandez
2017/05/11 21:51:30
Done.
| |
32 grid-row: 1; | |
33 grid-column: 1; | |
34 } | |
35 .i2 { | |
36 grid-row: 1; | |
37 grid-column: 2; | |
38 font: 20px/1 Ahem; | |
Manuel Rego
2017/05/11 14:10:08
Nit: "font-size: 20px" should be enough.
Maybe mov
jfernandez
2017/05/11 21:51:30
Done.
| |
39 } | |
40 .i3 { | |
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; font: 10px/1 Ahem">XX<br>XXXX<br>XX<br>XX X </div> | |
Manuel Rego
2017/05/11 14:10:08
Nit: maybe set "font: 10px/1 Ahem;" on ".block" cl
jfernandez
2017/05/11 21:51:30
Done.
| |
48 <div style="top: 0px; left: 50px; font: 20px/1 Ahem">X</div> | |
Manuel Rego
2017/05/11 14:10:08
And then only use "font-size: 20px;" here.
jfernandez
2017/05/11 21:51:30
Done.
| |
49 </div> | |
50 <div class="grid"> | |
51 <div class="i1">XX XXXX XX</div> | |
52 <div class="i2">X</div> | |
53 <div class="i3">XX X</div> | |
54 </div> | |
OLD | NEW |