Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab

This commit is contained in:
James Graham
2015-03-27 09:18:12 +00:00
parent 1a81b18b9f
commit 2c9faf5363
91915 changed files with 5979820 additions and 0 deletions

View File

@@ -0,0 +1,97 @@
<!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>