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,36 @@
<!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) - floated :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#float-position">
<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). Since this :before pseudo element is floated left, the document tree content of the associated element must appear alongside (after) this :before pseudo element. The position of the marker box of the associated element must not be affected, as it must still appear to the outside left edge of it's 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;
float:left;
list-style-position:inside;
}
</style>
</head>
<body>
<p>To pass, there <strong>must</strong> be blue bullet (filled-in circle) to the outside left edge of a grey box. Inside the grey box, there <strong>must</strong> be a yellow bullet to the left of a yellow letter. There <strong>must</strong> also be a blue letter to the right of the yellow letter.</p>
<div id="test">
T
</div>
</body>
</html>