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,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>CSS Test: Marker box position (outside principal box) - :before pseudo-element list-item ('list-style-position:inside')</title>
<link rel="author" title="James Hopkins" href="http://idreamincode.co.uk/css21testsuite">
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#list-style">
<link rel="help" href="http://www.w3.org/TR/CSS21/generate.html#before-after-content">
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes">
<meta name="flags" content="">
<meta name="assert" content="When the :before element is set as a list-item, it establishes a principal box into which a marker box is placed (when 'list-style-position:inside). The document tree content of the associated element must be placed after the principal box established by the :before pseudo element. The presence of the :before pseudo element in this context, must have no affect on the position of the marker box of the associated element as it must still appear to the outside left edge of it's own principal box (since 'list-style-position:outside').">
<style type="text/css">
#test{
background:silver;
color:blue;
display:list-item;
font-size:85px;
margin:100px;
}
#test:before{
color:yellow;
content:'T';
display:list-item;
list-style-position:inside;
}
</style>
</head>
<body>
<p>To pass, there <strong>must</strong> be a blue bullet (filled-in circle) to the left outside edge of a grey box. Also, there <strong>must</strong> be a yellow bullet to the left inside edge of the grey box, with a yellow letter to the right of the yellow bullet, and there <strong>must</strong> be a blue letter below the yellow bullet, within the grey box.</p>
<div id="test">
T
</div>
</body>
</html>