Skip to content

Commit c3f0309

Browse files
fantasaifantasai
committed
[css-align-3] Add exploratory testcase for research purposes.
1 parent 3bd261f commit c3f0309

1 file changed

Lines changed: 54 additions & 0 deletions

File tree

‎css-align-3/baseline-align-test.html‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<!DOCTYPE html>
2+
<style>
3+
h2 { font: bold 100%/1 sans-serif; }
4+
div { border: solid 1em; }
5+
.scroll { border-color: orange; overflow: auto; }
6+
.inline > div { display: inline-block; }
7+
table { border-spacing: 0; }
8+
.flex { display: flex; border: none; align-items: baseline; }
9+
</style>
10+
<section class="inline">
11+
<h2>Last Baseline: Inline Alignment</h2>
12+
A<div></div>
13+
B<div class="scroll"></div>
14+
C<div>x</div>
15+
D<div class="scroll">X</div>
16+
E<div>X<div class="scroll">X</div></div>
17+
F<div>X<div class="scroll"></div></div>
18+
G<div><div class="scroll">X</div>X</div>
19+
H<div><div class="scroll"></div>X</div>
20+
I<div><div class="scroll"></div></div>
21+
</section>
22+
23+
<section>
24+
<h2>First Baseline: Table Row Alignment</h2>
25+
<table>
26+
<tr valign=baseline>
27+
<td>A<td><div></div>
28+
<td>B<td><div class="scroll"></div>
29+
<td>C<td><div>X</div>
30+
<td>D<td><div class="scroll">X</div>
31+
<td>E<td><div>X<div class="scroll">X</div></div>
32+
<td>F<td><div>X<div class="scroll"></div></div>
33+
<td>G<td><div><div class="scroll">X</div>X</div>
34+
<td>H<td><div><div class="scroll"></div>X</div>
35+
<td>I<td><div><div class="scroll"></div>X</div>
36+
<td>J<td><div class="scroll">X</div>
37+
<td>K<td><div class="scroll"></div>X
38+
<td>K<td><div class="scroll"></div>
39+
</table>
40+
</section>
41+
42+
<section>
43+
<h2>First Baseline: Flex Row Alignment</h2>
44+
<div class="flex">
45+
A<div></div>
46+
B<div class="scroll"></div>
47+
C<div>X</div>
48+
D<div class="scroll">X</div>
49+
E<div>X<div class="scroll">X</div></div>
50+
F<div>X<div class="scroll"></div></div>
51+
G<div><div class="scroll">X</div>X</div>
52+
H<div><div class="scroll"></div>X</div>
53+
I<div><div class="scroll"></div></div>
54+
</div>

0 commit comments

Comments
 (0)