mirror of
https://github.com/servo/servo
synced 2026-04-28 18:37:39 +02:00
97 lines
2.9 KiB
HTML
97 lines
2.9 KiB
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
|
<html>
|
|
|
|
<head>
|
|
|
|
<title>CSS Test: vertical baseline alignment of an element with 'display' set to 'inline-table' with a 'border-bottom' and with a first row made of empty cells</title>
|
|
|
|
<!--
|
|
Inspired by
|
|
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/margin-applies-to-014.htm
|
|
http://test.csswg.org/suites/css2.1/nightly-unstable/html4/border-bottom-width-applies-to-014.htm
|
|
and
|
|
http://lists.w3.org/Archives/Public/public-css-testsuite/2012Aug/0040.html
|
|
-->
|
|
|
|
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
|
<!--
|
|
Credits must go to Anton Prowse for answering an accurate
|
|
question with regards to this test.
|
|
-->
|
|
<link rel="bookmark" href="http://lists.w3.org/Archives/Public/www-style/2012Sep/0270.html" title="[CSS21] baseline of an inline-table question">
|
|
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" title="10.8.1 Leading and half-leading">
|
|
<link rel="match" href="reference/inline-table-valign-002-ref.htm">
|
|
|
|
<meta name="flags" content="ahem">
|
|
<meta name="assert" content="The baseline of an 'inline-table' is the baseline of the first row of the table. If the content of cells in such first row are empty, then the baseline of such first row coincides with the bottom edge of the content box of cells.">
|
|
|
|
<style type="text/css">
|
|
p#ahem-font-required-for-test
|
|
{
|
|
background-color: red;
|
|
color: white;
|
|
display: inline;
|
|
font: 1.25em/1 Ahem, serif;
|
|
/*
|
|
To download Ahem font:
|
|
http://www.w3.org/Style/CSS/Test/Fonts/Ahem/
|
|
*/
|
|
}
|
|
|
|
div#wrapper
|
|
{
|
|
border-bottom: blue solid 10px;
|
|
font: 3.125em/1 Ahem;
|
|
/*
|
|
equivalent to font-size: 50px with a line-box of 50px;
|
|
50px was chosen so that É, which sits on the
|
|
baseline, is 0.8 times 50px == 40px;
|
|
*/
|
|
|
|
/*
|
|
"
|
|
'É' U+00C9
|
|
A rectangle exactly 0.8em high, 1em wide, and aligned so
|
|
that its bottom is flush with the baseline.
|
|
"
|
|
http://www.w3.org/Style/CSS/Test/Fonts/Ahem/
|
|
*/
|
|
}
|
|
|
|
div#inline-table
|
|
{
|
|
border-bottom: orange solid 40px;
|
|
display: inline-table;
|
|
margin-left: -200px; /* set to 0 to debug */
|
|
margin-right: -200px; /* set to 0 to debug */
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
div#row {display: table-row;}
|
|
|
|
div.cell
|
|
{
|
|
display: table-cell;
|
|
height: 40px;
|
|
width: 100px;
|
|
}
|
|
</style>
|
|
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<p id="ahem-font-required-for-test">Ahem_font_required_for_this_test</p>
|
|
|
|
<p>Test passes if the following 5 conditions are met: there is a black stripe, there is an orange stripe, there is a blue line, the black stripe's bottom is touching the top of the orange stripe and the orange stripe's bottom is touching the top of the blue line.</p>
|
|
|
|
<div id="wrapper">
|
|
ÉÉÉÉ<div id="inline-table">
|
|
<div id="row">
|
|
<div class="cell"></div><div class="cell"></div>
|
|
</div>
|
|
</div>ÉÉÉÉ
|
|
</div>
|
|
|
|
</body>
|
|
</html> |