Skip to content

Commit 7011e12

Browse files
Aleks Toticchromium-wpt-export-bot
Aleks Totic
authored and
chromium-wpt-export-bot
committed
[TablesNG] Tentative baseline tests
More upstreaming of master table patch tests. Change-Id: I4bc78ea05a5041f7adf7eb57de5b2f4c9a210098 Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2823578 Commit-Queue: Aleks Totic <[email protected]> Reviewed-by: David Grogan <[email protected]> Cr-Commit-Position: refs/heads/master@{#872548}
1 parent 5163993 commit 7011e12

File tree

2 files changed

+290
-0
lines changed

2 files changed

+290
-0
lines changed

‎css/css-tables/tentative/baseline-table.html

+179
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
<!doctype html>
2+
<script src='/resources/testharness.js'></script>
3+
<script src='/resources/testharnessreport.js'></script>
4+
<script src="/resources/check-layout-th.js"></script>
5+
<meta name="flags" content="ahem">
6+
<title>TABLE baseline</title>
7+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8+
<link rel="author" title="Aleks Totic" href="[email protected]" />
9+
<link rel="help" href="https://drafts.csswg.org/css-tables-3/" />
10+
<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" />
11+
<style>
12+
main table {
13+
display: inline-table;
14+
border: 15px solid green;
15+
background: gray;
16+
width: 0px;
17+
height: 0px;
18+
vertical-align:baseline;
19+
border-spacing: 0;
20+
}
21+
main td {
22+
background: #BFB;
23+
padding: 4px;
24+
}
25+
main td > div {
26+
display: inline-block;
27+
background: rgba(56,162,56,0.3);
28+
}
29+
.container {
30+
position: relative;
31+
outline: black dotted 1px;
32+
height: 100px;
33+
width: 400px;
34+
font: 50px/1 Ahem; /* baseline is 40px */
35+
}
36+
</style>
37+
<main>
38+
<h2>&lt;TABLE&gt; baseline tests</h2>
39+
40+
<p>Empty table's baseline is bottom of table's border box.</p>
41+
<div class="container">
42+
Xp<table data-offset-y="10">
43+
</table>
44+
</div>
45+
46+
<p>Empty body's baseline is bottom of table's border box.</p>
47+
<div class="container">
48+
Xp<table data-offset-y="10">
49+
<tbody>
50+
</tbody>
51+
</table>
52+
</div>
53+
54+
<p>Empty row's baseline is center of the row.</p>
55+
<div class="container">
56+
Xp<table data-offset-y="25">
57+
<tbody>
58+
<tr></tr>
59+
</tbody>
60+
</table>
61+
</div>
62+
63+
<p>First row defines baseline even if empty.</p>
64+
<div class="container">
65+
Xp<table style="font: 12px fixed" data-offset-y="25">
66+
<tbody>
67+
<tr></tr>
68+
<tr><td>1,0</td></tr>
69+
</tbody>
70+
</table>
71+
</div>
72+
73+
<p>Cell's baseline defined row's baseline only if cell is vertical-align:baseline.</p>
74+
<div class="container">
75+
Xp<table style="font-size: 24px" data-offset-y="2">
76+
<tbody>
77+
<tr><td style="vertical-align:baseline">Xp</td></tr>
78+
</tbody>
79+
</table></div>
80+
</div>
81+
<div class="container">
82+
Xp<table style="font-size:24px" data-offset-y="0">
83+
<tbody>
84+
<tr><td style="vertical-align:middle">Xp</td></tr>
85+
</tbody>
86+
</table>
87+
</div>
88+
89+
90+
<p>Table's vertical-align: top.</p>
91+
<div class="container">
92+
Xp<table style="vertical-align:top" data-offset-y="0"></table>
93+
</div>
94+
95+
<p>Table's vertical-align: middle. </p>
96+
<div class="container">
97+
Xp<table style="vertical-align:middle" data-offset-y="5"></table>
98+
</div>
99+
100+
<p>Table's vertical-align: bottom. </p>
101+
<div class="container">
102+
Xp<table style="vertical-align:bottom" data-offset-y="20"></table>
103+
</div>
104+
105+
<p>Table's top/middle/bottom combined. </p>
106+
<div class="container">
107+
Xp<table style="vertical-align:top" data-offset-y="0"></table>
108+
<table style="vertical-align:middle" data-offset-y="5"></table>
109+
<table style="vertical-align:bottom" data-offset-y="20"></table>
110+
</div>
111+
112+
<p>Two rows empty, 1st row has css height.</p>
113+
<div class="container">
114+
Xp<table data-offset-y=25 data-expected-height=50>
115+
<tr style="height:20px"></tr>
116+
<tr></tr>
117+
</table>
118+
</div>
119+
120+
<p>First row empty with css height, 2 row has content, </p>
121+
<div class="container">
122+
Xp<table data-offset-y=25 data-expected-height=68>
123+
<tr style="height:20px"></tr>
124+
<tr><td style="font-size:10px">X</td></tr>
125+
</table>
126+
</div>
127+
128+
<p>Empty rowspanned cells should not set baseline. This test might not be per-spec, distribution of empty cells over empty rows differs between browsers.</p>
129+
<div class="container">
130+
Xp<table>
131+
<tr>
132+
<td rowspan=2 style="height:80px"></td>
133+
<td></td>
134+
</tr>
135+
<tr>
136+
<td></td>
137+
</tr>
138+
</table><div style="display:inline-block" data-offset-y=15>pX</div>
139+
</div>
140+
141+
<p>Block level table inside inline block does not produce a baseline.</p>
142+
<div class="container" style="font: 10px/1 Ahem;width:500px">
143+
Xp<br>Xp<table
144+
title="inline table produces a baseline"
145+
data-offset-y=33><td style="vertical-align:baseline">Xp</td></table>
146+
<div style="display:inline-block;height:50px;background:yellow;width:50px;"
147+
title="empty inline block baseline is bottom of the block"
148+
data-offset-y=10
149+
></div>
150+
<div style="display:inline-block;height:50px;background:yellow;width:50px;"
151+
title="inline block's content defines its baseline"
152+
data-offset-y=52
153+
>X</div>
154+
<div style="display:inline-block;height:50px;background:yellow"
155+
title="table inside inline block does not produce a baseline"
156+
data-offset-y=10
157+
><table style="display:table"><td style="vertical-align:baseline">X</td></table></div>
158+
<div style="display:inline-block;height:50px;background:yellow"
159+
title="but inline table inside inline block does produce a baseline"
160+
data-offset-y=33
161+
><table style="display:inline-table"><td style="vertical-align:baseline">X</td></table></div>
162+
</div>
163+
164+
<!-- anonymous-table-no-baseline-align replica -->
165+
<p>Anonymous tables should not generate baselines</p>
166+
<div class="container">Xp
167+
<div style="height:60px;width:100px;display:inline-block;background:green"
168+
data-offset-y=0>
169+
<div style="display:table-cell;vertical-align:middle;color:yellow">&nbsp;</div>
170+
</div>
171+
<div style="height:60px;width:100px;display:inline-block;background:green"
172+
data-offset-y=0>
173+
<div style="display:table-cell;vertical-align:middle;color:yellow">>&nbsp;<br>&nbsp;<br></div>
174+
</div>
175+
</div>
176+
</main>
177+
<script>
178+
checkLayout(".container");
179+
</script>

‎css/css-tables/tentative/baseline-td.html

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!doctype html>
2+
<script src='/resources/testharness.js'></script>
3+
<script src='/resources/testharnessreport.js'></script>
4+
<script src="/resources/check-layout-th.js"></script>
5+
<meta name="flags" content="ahem">
6+
<title>TD baseline</title>
7+
<link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />
8+
<link rel="stylesheet" type="text/css" href="./support/tables-ng.css">
9+
<link rel="author" title="Aleks Totic" href="[email protected]" />
10+
<link rel="help" href="https://drafts.csswg.org/css-tables-3/" />
11+
<link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align" />
12+
<style>
13+
table {
14+
background: #AAA;
15+
border-spacing: 8px 0px;
16+
}
17+
td {
18+
padding: 0;
19+
background: #BFB;
20+
}
21+
.ahem {
22+
font: 25px/2 Ahem;
23+
}
24+
.ahem td, .ahem .display-cell {
25+
font: 25px/2 Ahem;
26+
color: rgba(0,120,0, 0.5);
27+
}
28+
.vgrad {
29+
background: linear-gradient(180deg, #DDD 0%, #DDD 60%, #999 60%, #999 100%) !important;
30+
}
31+
.m {
32+
display:inline-block;
33+
}
34+
.display-table {
35+
display:table;
36+
background: #AAA;
37+
border-spacing: 8px 0px;
38+
}
39+
.display-cell {
40+
display:table-cell;
41+
padding: 0;
42+
}
43+
</style>
44+
<main>
45+
<h2>&lt;TD&gt; baseline tests</h2>
46+
47+
<p class="testdesc">All the baseline values.
48+
Many text values map to plain baseline. </p>
49+
<table style="height:100px" class="ahem vgrad">
50+
<td style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></td>
51+
<td style="" title="default"><div class="m" data-offset-y=25>Xp</div></td>
52+
<td style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></td>
53+
<td style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></td>
54+
<td style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></td>
55+
<td style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></td>
56+
<td style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></td>
57+
<td style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></td>
58+
<td style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></td>
59+
<td style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></td>
60+
<td style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></td>
61+
<td style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></td>
62+
</table>
63+
64+
<p class="testdesc">All the baseline values.
65+
Same as test before, but use display:table/table-cell. Default td alignment is baseline, not middle.</p>
66+
<div style="height:100px;position:relative" class="ahem vgrad display-table">
67+
<div class="display-cell" style="font: 75px/1 Ahem;vertical-align:baseline;"><div class="m" data-offset-y=0>Xp</div></div>
68+
<div class="display-cell" style="" title="default"><div class="m" data-offset-y=28>Xp</div></div>
69+
<div class="display-cell" style="vertical-align: top"><div class="m" data-offset-y=0>Xp</div></div>
70+
<div class="display-cell" style="vertical-align: middle"><div class="m" data-offset-y=25>Xp</div></div>
71+
<div class="display-cell" style="vertical-align: bottom"><div class="m" data-offset-y=50>Xp</div></div>
72+
<div class="display-cell" style="vertical-align: baseline"><div class="m" data-offset-y=28>Xp</div></div>
73+
<div class="display-cell" style="vertical-align: sub"><div class="m" data-offset-y=28>Xp</div></div>
74+
<div class="display-cell" style="vertical-align: super"><div class="m" data-offset-y=28>Xp</div></div>
75+
<div class="display-cell" style="vertical-align: text-top"><div class="m" data-offset-y=28>Xp</div></div>
76+
<div class="display-cell" style="vertical-align: text-bottom"><div class="m" data-offset-y=28>Xp</div></div>
77+
<div class="display-cell" style="vertical-align: 100px"><div class="m" data-offset-y=28>Xp</div></div>
78+
<div class="display-cell" style="vertical-align: 100%"><div class="m" data-offset-y=28>Xp</div></div>
79+
</div>
80+
81+
82+
<p class="testdesc">Baselines with %ge children</p>
83+
<p class="error">FF/Edge fails here</p>
84+
<div>
85+
inline table
86+
<table style="height:100px;position:relative;display:inline-table">
87+
<td style="vertical-align:baseline">
88+
<div style="width:100px;height:50%;background:rgba(0,120,0, 0.5)" data-offset-y=30></div>
89+
</td>
90+
<td style="vertical-align:baseline">
91+
<div style="width:100px;height:80%;background:rgba(0,120,0, 0.5)" data-offset-y=0></div>
92+
</td>
93+
</table>
94+
</div>
95+
<p class="testdesc">Baseline and td height
96+
If td is baseline aligned, and has a height, how tall should the td be?
97+
</p>
98+
<p class="error">Legacy/FF apply height to below baseline?. With baseline alignment, this makes the cell taller.</p>
99+
<table style="border: 1px solid black" data-expected-height=202>
100+
<tr>
101+
<td style="vertical-align:baseline;height:200px">base</td>
102+
<td style="vertical-align:baseline">
103+
<div style="background:yellow;width:50px;height:100px"></div>
104+
</td>
105+
</tr>
106+
</table>
107+
</main>
108+
<script>
109+
checkLayout("table, .display-table");
110+
</script>
111+

0 commit comments

Comments
 (0)