Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444

This commit is contained in:
Josh Matthews 2017-04-17 12:06:02 +10:00 committed by Anthony Ramine
parent 25e8bf69e6
commit 665817d2a6
35333 changed files with 1818077 additions and 16036 deletions

View file

@ -0,0 +1,5 @@
These are tests converted from the CSS1 test suite.
They are post-processed from the tests in ../../archive.
Please edit the originals and rebuild rather than editing
these directly.

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p {color: green;}
]]></style>
</head>
<body>
<p>This text should be green.</p>
<p>This text should be green.</p>
<p>This text should be green.</p>
<p>This text should be green.</p>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Basic Containment</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#containment-in-html"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
@import url(support/a-green.css);
@import "support/b-green.css";
.c { color: green; }
@import url(support/c-red.css);
<!-- .d { color: green; } -->
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#at-import" title="6.3 The @import rule"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#comments" title="4.1.9 Comments"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#uri" title="4.3.4 URLs and URIs"/>
<link rel="match" href="c11-import-000-ref.xht" />
</head>
<body>
<p class="a">This text should be green.</p>
<p class="b">This text should be green.</p>
<p class="c">This text should be green.</p>
<p class="d">This text should be green.</p>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p {color: green;}
]]></style>
</head>
<body>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
</body>
</html>

View file

@ -0,0 +1,20 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Grouping</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#grouping"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
.one, .two, .three { color: green; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#grouping" title="5.2.1 Grouping"/>
<link rel="match" href="c12-grouping-000-ref.xht" />
</head>
<body>
<p class="one"> This sentence should be green. </p>
<p class="two"> This sentence should be green. </p>
<p class="three"> This sentence should be green. </p>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Inheritance</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#inheritance"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
<style type="text/css"><![CDATA[
body { color: navy; }
.a { text-decoration: underline; }
#a { font-style: italic; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" title="6.2 Inheritance"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#lining-striking-props" title="16.3.1 Underlining, overlining, striking, and blinking: the 'text-decoration' property"/>
</head>
<body>
<p class="a"> This should be blue and underlined. </p>
<p class="a"> This sentence should be underlined, including
<code>this part</code>, <cite>this part</cite>, <em>this part</em>,
and <strong>this part</strong>. </p>
<p class="a" id="a"> This sentence should also be underlined, as
well as italics, <strong>including this part</strong>. </p>
<p> This sentence should be blue but not underlined, like
<strong>this part</strong>, but <em style="text-decoration:
underline;">this part should be underlined</em>. </p>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p {color: green;}
p#background
{
background-color: green;
color: white;
}
]]></style>
</head>
<body>
<p>This sentence should be green.</p>
<p id="background">This sentence <i>should be</i> white on green.</p>
<p><i>PASS</i> <b>&nbsp;</b></p>
<p>PASS</p>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Inheritance</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#inheritance"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c13-inheritance-000-ref.xht" />
<style type="text/css"><![CDATA[
body { color: green; }
.a { background: green; color: white; }
.a1 { font-style: italic; }
.b { color: white; }
em { color: green; }
dfn { color: white; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#inheritance" title="6.2 Inheritance"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#colors" title="14.1 Foreground color: the 'color' property"/>
</head>
<body>
<p> This sentence should be green. </p>
<p class="a"> This sentence <span class="a1">should be</span> white on green. </p>
<p class="b"> <em>PASS</em> <strong>FAIL</strong> </p>
<p class="c"> PASS <dfn>FAIL</dfn> </p>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p, pre, li {color: green;}
]]></style>
</head>
<body>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<pre>This sentence should be green.</pre>
<ul><li>This sentence should be green.</li></ul>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Class as selector</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#class-as-selector"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c14-classes-000-ref.xht" />
<style type="text/css"><![CDATA[
body { color: red; }
div { color: green; }
.one { color: green; }
.1 { color: red; }
.a1 {color: green;}
p.two { color: green; }
p.three { color: red; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#class-html" title="5.8.3 Class selectors"/>
</head>
<body>
<p class="one"> This sentence should be green. </p>
<div> <p class="1"> This sentence should be green. </p> </div>
<p class="a1"> This sentence should be green. </p>
<p class="two"> This sentence should be green. </p>
<div> <pre class="three">This sentence should be green.</pre> </div>
<div> <ul> <li class="three">This sentence should be green. </li> </ul> </div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: ID as selector</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#id-as-selector"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c12-grouping-000-ref.xht" />
<style type="text/css"><![CDATA[
body {color: red;}
#test1 {color: green;}
#test2 {color: green;}
p#test3 {color: green;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#id-selectors" title="5.9 ID selectors"/>
</head>
<body>
<p id="test1"> This sentence should be green. </p>
<p id="test2"> This sentence should be green. </p>
<p id="test3"> This sentence should be green. </p>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p, pre, li {color: green;}
]]></style>
</head>
<body>
<p>This sentence should be green.</p>
<pre> This sentence should be green.</pre>
<ul><li>This sentence should be green.</li></ul>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: ID as selector</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#id-as-selector"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-29 -->
<link rel="match" href="c15-ids-001-ref.xht" />
<style type="text/css"><![CDATA[
body, span { color: green; }
p#test1a, p#test1b { color: red; }
ul#test2 { color: red; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#id-selectors" title="5.9 ID selectors"/>
</head>
<body>
<p id="test1a"> <span> This sentence should be green. </span> </p>
<pre id="test1b"> This sentence should be green. </pre>
<ul>
<li id="test2"> This sentence should be green. </li>
</ul>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p, li {color: green;}
ul {list-style-type: none;}
]]></style>
</head>
<body>
<p> This sentence should be green. </p>
<ul>
<li>This sentence should be green.
<ul>
<li>This sentence should be green.</li>
</ul>
</li>
</ul>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Descendant selectors (Contextual selectors)</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#contextual-selectors"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c16-descendant-000-ref.xht" />
<style type="text/css"><![CDATA[
body {color: red;}
p {color: green;}
li {list-style: none;}
html body div p {color: red;}
span, ul li li {color: green;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors" title="5.5 Descendant selectors"/>
</head>
<body>
<p> This sentence should be green. </p>
<ul>
<li>
<span> This sentence should be green. </span>
<ul>
<li> This sentence should be green. </li>
</ul>
</li>
</ul>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p, li {color: green;}
]]></style>
</head>
<body>
<p>This sentence should be green.</p>
<ul>
<li>This sentence should be green.</li>
</ul>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Contextual selectors</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#contextual-selectors"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c16-descendant-001-ref.xht" />
<style type="text/css"><![CDATA[
ul {color: green;}
p {color: red;}
html body div p {color: green;}
span, ul li li {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors" title="5.5 Descendant selectors"/>
</head>
<body>
<div><p> This sentence should be green. </p></div>
<ul>
<li>
<span> </span> This sentence should be green.
</li>
</ul>
</body>
</html>

View file

@ -0,0 +1,19 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Contextual selectors</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#contextual-selectors"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="../reference/ref-this-text-should-be-green.xht" />
<style type="text/css"><![CDATA[
p {color: green;}
html body div {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#descendant-selectors" title="5.5 Descendant selectors"/>
</head>
<body>
<div><p> This text should be green. </p></div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p {color: green;}
]]></style>
</head>
<body>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Comments</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#comments"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c17-comments-000-ref.xht" />
<style type="text/css"><![CDATA[
body { color: red; }
/* This is a CSS comment. */
.one {color: green;} /* Another comment */
/* The following should not be used:
.two {color: red;} */
.three {color: green; /* color: red; */}
/**
.four {color: red;} */
.five {color: green;}
/**/
.six {color: green;}
/*********/
.seven {color: green;}
/* a comment **/
.eight {color: green;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#comments" title="4.1.9 Comments"/>
</head>
<body>
<p class="one">
This sentence should be green.
</p>
<p class="three">
This sentence should be green.
</p>
<p class="five">
This sentence should be green.
</p>
<p class="six">
This sentence should be green.
</p>
<p class="seven">
This sentence should be green.
</p>
<p class="eight">
This sentence should be green.
</p>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
p {color: green;}
]]></style>
</head>
<body>
<p>This sentence should be green.</p>
<p>This sentence should be green.</p>
</body>
</html>

View file

@ -0,0 +1,37 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Comments</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#comments"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c17-comments-001-ref.xht" />
<style type="text/css"><![CDATA[
body { color: green; }
/* This is a CSS comment. */
.one {color: green;} /* Another comment */
/* The following should not be used:
.two {color: red;} */
.three {color: green; /* color: red; */}
/**
.four {color: red;} */
.five {color: green;}
/**/
.six {color: green;}
/*********/
.seven {color: green;}
/* a comment **/
.eight {color: green;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/syndata.html#comments" title="4.1.9 Comments"/>
</head>
<body>
<p class="two">
This sentence should be green.
</p>
<p class="four">
This sentence should be green.
</p>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<meta name="flags" content="interact" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: red;}
a:link {color: blue;}
a:visited {color: blue;}
a:hover {color: blue;}
a:focus {color: blue;}
a:active {color: green;}
#one {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" title="5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus"/>
</head>
<body>
<p><a href="">While you are activating this link, it should go green.</a> Check that once you have stopped activating it, it goes blue again.</p>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<meta name="flags" content="interact" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: red;}
a:link {color: blue;}
a:visited {color: blue;}
a:hover {color: blue;}
a:focus {color: green;}
a:active {color: red;}
#one {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" title="5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus"/>
</head>
<body>
<p><a href="">If you focus this link, it should go green.</a></p>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<meta name="flags" content="interact" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: red;}
a:link {color: blue;}
a:visited {color: blue;}
a:hover {color: green;}
a:focus {color: red;}
a:active {color: red;}
#one {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#dynamic-pseudo-classes" title="5.11.3 The dynamic pseudo-classes: :hover, :active, and :focus"/>
</head>
<body>
<p><a href="">While you are hovering over this link, it should go green.</a></p>
</body>
</html>

View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<meta name="flags" content="interact" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a:link {color: red;}
a:visited {color: red;}
a:hover {color: red;}
a:focus {color: red;}
a:active {color: red;}
a.test {color: green;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="6.4.3 Calculating a selector's specificity"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascade" title="6.4 The cascade"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-class-selectors" title="5.11 Pseudo-classes"/>
</head>
<body>
<p><a href="" class="test">Whatever you do to this link, it should stay green.</a> (hover, focus, activate, follow)</p>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<meta name="flags" content="interact" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
#one {color: green;}
a {color: red;}
a:link {color: red;}
a:visited {color: red;}
a:hover {color: red;}
a:focus {color: red;}
a:active {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="6.4.3 Calculating a selector's specificity"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascade" title="6.4 The cascade"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-class-selectors" title="5.11 Pseudo-classes"/>
</head>
<body>
<p><a href="" id="one">Whatever you do to this link, it should stay green.</a> (hover, focus, activate, follow)</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<meta name="flags" content="interact" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: green;}
a:link {color: red;}
a:visited {color: red;}
a:hover {color: green;}
a:focus {color: red;}
a:active {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-class-selectors" title="5.11 Pseudo-classes"/>
</head>
<body>
<p><a>This sentence should be green.</a> Check that it remains green after you click it. Note: the link should turn red while clicked.</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: red;}
a:link {color: green;}
a:visited {color: red;}
a:hover {color: red;}
a:focus {color: red;}
a:active {color: red;}
#one {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-class-selectors" title="5.11 Pseudo-classes"/>
</head>
<body>
<p><a href="http://unvisited.example.com/">This link should be green.</a> (do not hover over it or activate it)</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: red;}
a:visited {color: red;}
a:link {color: green;}
a:hover {color: red;}
a:focus {color: red;}
a:active {color: red;}
#one {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-class-selectors" title="5.11 Pseudo-classes"/>
</head>
<body>
<p><a href="http://unvisited.example.com/">This link should be green.</a> (do not hover over it or activate it)</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: red;}
a:link {color: red;}
a:visited {color: green;}
a:hover {color: red;}
a:focus {color: red;}
a:active {color: red;}
#one {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-class-selectors" title="5.11 Pseudo-classes"/>
</head>
<body>
<p><a href="c21-pseud-link-002.xht">This link should be green.</a> (do not hover over it or activate it)</p>
</body>
</html>

View file

@ -0,0 +1,22 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: anchor</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#anchor-pseudo-classes"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
a {color: red;}
a:visited {color: green;}
a:link {color: red;}
a:hover {color: red;}
a:focus {color: red;}
a:active {color: red;}
#one {color: red;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-class-selectors" title="5.11 Pseudo-classes"/>
</head>
<body>
<p><a href="c21-pseud-link-003.xht">This link should be green.</a> (do not hover over it or activate it)</p>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: first-line</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#the-first-line-pseudo-element"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
body { color: blue; }
p:first-line { color: green; }
.two:first-line { font-size: 200%; }
.three:first-line { font-variant: small-caps; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo" title="5.12.1 The :first-line pseudo-element"/>
</head>
<body>
<p>
The <strong>first line</strong> of this paragraph, and only that
one, should be <strong>green</strong>. If this precise combination
does not occur, then the user agent has failed this test. Remember
that in order to ensure a complete test, the paragraph must be
displayed on more than one line. Dummy text. Dummy text. Dummy
text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy text.
Dummy text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy
text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy text.
Dummy text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy
text. Dummy text. Dummy text. Dummy text.
</p>
<p class="two">
The <strong>first line</strong> of this paragraph, and only that
one, should be a <strong>larger</strong> font size as well as
<strong>green</strong>. If this precise combination does not occur,
then the user agent has failed this test. Remember that in order to
ensure a complete test, the paragraph must be displayed on more
than one line. Dummy text. Dummy text. Dummy text. Dummy text.
Dummy text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy
text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy text.
Dummy text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy
text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy text.
Dummy text. Dummy text.
</p>
<p class="three">
The <strong>first line</strong> of this paragraph, and only that
one, should be displayed in <strong>small-caps</strong> style as
well as <strong>green</strong>. Thus, if the first line is not in
small-caps style, or if the entire paragraph turns out in
small-caps, then the user agent has failed this test. Dummy text.
Dummy text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy
text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy text.
Dummy text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy
text. Dummy text. Dummy text. Dummy text. Dummy text. Dummy text.
Dummy text. Dummy text. Dummy text. Dummy text. Dummy text.
</p>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: first-letter</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#the-first-letter-pseudo-element"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 -->
<style type="text/css"><![CDATA[
body { color: blue; }
p:first-letter {color: green;}
.two:first-letter {font-size: 200%;}
p.three:first-letter {font-size: 350%;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter" title="5.12.2 The :first-letter pseudo-element"/>
</head>
<body>
<p>
The <strong>first letter</strong> of this paragraph, and only that
one, should be <strong>green</strong>. If this precise combination
does not occur, then the user agent has failed this test.
</p>
<p class="two">
The <strong>first letter</strong> of this paragraph, and only that
one, should be in a <strong>larger</strong> font size, as well as
<strong>green</strong>. If this precise combination does not occur,
then the user agent has failed this test.
</p>
<p class="three">
"The <strong>first two characters</strong> in this paragraph (a
double-quote mark and a capital 'T') should be in a <strong>much
larger</strong> font size than the rest of the paragraph, and
<strong>green</strong>. If this precise combination does not occur,
then the user agent has failed this test.
</p>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
span
{
background-color: green;
color: white;
}
]]></style>
</head>
<body>
<div>There should be two sentences below.</div>
<p><span>This sentence should have white text on green background.</span></p>
<p><span>This sentence should have white text on green background.</span></p>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Pseudo-elements in Selectors</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#pseudo-elements-in-selectors"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c25-pseudo-elmnt-000-ref.xht" />
<style type="text/css"><![CDATA[
.test { color: red; }
p:first-line { background: green; }
p.test:first-line { color: white; }
p:first-line.two { color: yellow; background: red; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#pseudo-elements" title="5.10 Pseudo-elements and pseudo-classes"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo" title="5.12.1 The :first-line pseudo-element"/>
<meta name="flags" content="invalid" />
</head>
<body>
<div>There should be two sentences below.</div>
<p class="test one"> This sentence should have white text on green background. </p>
<p class="test two"> This sentence should have white text on green background. </p>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Multiple Pseudo-Elements</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#multiple-pseudo-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
body { color: blue; }
p:first-line { color: teal; }
p:first-letter { color: aqua; }
.one:first-line { font-size: 300%; }
.one:first-letter { font-size: 300%; }
p.two:first-letter { font-size: 200%; }
p.two:first-line { font-variant: small-caps; }
/* three uses the default styles */
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter" title="5.12.2 The :first-letter pseudo-element"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-line-pseudo" title="5.12.1 The :first-line pseudo-element"/>
</head>
<body>
<p class="one">
The <strong>first letter</strong> of this paragraph, and only that
one, should be <strong>600% bigger</strong> than the normal text and
<strong>aqua</strong>, while the entire <strong>first line</strong>
should be <strong>300% bigger</strong> than normal text and
<strong>teal</strong>. If this precise combination does not occur,
then the user agent has failed this test. Remember that in order to
ensure a complete test, the paragraph must be displayed on more
than one line. (TEST1)
</p>
<p class="two">
"Test": The first <strong>two characters</strong> in this paragraph
(a double-quote mark and a capital 'T') should be <strong>200%
bigger</strong> than the rest of the paragraph, and
<strong>aqua</strong>. In addition, the entire <strong>first
line</strong> should be in a <strong>small-caps font and
teal</strong>. Remember that in order to ensure a complete test,
the paragraph must be displayed on more than one line. (TEST2)
</p>
<p>
The <strong>first letter</strong> of this paragraph, and only that
one, should be <strong>aqua</strong>, while the entire
<strong>first line</strong> should be <strong>teal</strong>. If
this precise combination does not occur, then the user agent has
failed this test. Remember that in order to ensure a complete test,
the paragraph must be displayed on more than one line. (TEST3)
</p>
<div>You should see the words <strong>"TEST1"</strong>,
<strong>"TEST2"</strong>, and <strong>"TEST3"</strong> at the end of
three paragraphs above.</div>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: important</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#important"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c12-grouping-000-ref.xht" />
<style type="text/css"><![CDATA[
p { color: green ! important; }
p { color: red; }
p#id1 { color: red; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#important-rules" title="6.4.2 !important rules"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order" title="6.4.1 Cascading order"/>
</head>
<body>
<p> This sentence should be green. </p>
<p id="id1"> This sentence should be green. </p>
<p style="color: red;"> This sentence should be green. </p>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div {color: green;}
]]></style>
</head>
<body>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
<div>This sentence should be green.</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Cascading Order</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#cascading-order"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="stylesheet" href="support/c-red.css"/>
<link rel="match" href="c32-cascading-000-ref.xht" />
<style type="text/css"><![CDATA[
body * { color: red; list-style: none; margin: 0; padding: 0; }
span { color: red; }
li span.a { color: red; }
li span.b { color: red; }
li span.c { color: red; }
li span.d { color: red; }
li span.e { color: red; }
li span.f { color: red; }
ul li span.a { color: green; }
ul li span.b { color: green; }
ul li li span.c { color: red; }
ul li li span.d { color: red; }
ul li li span.e { color: red; }
ul li li span.f { color: red; }
ul li li span.c { color: green; }
li.test1 span.d { color: green; }
ul li.test2 span.e { color: green; }
ul li.test3 span.f { color: red; }
ul li#test3 span.f { color: green; }
.test4 { color: red; }
.test4 { color: green; }
.c { color: green; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#cascading-order" title="6.4.1 Cascading order"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/cascade.html#specificity" title="6.4.3 Calculating a selector's specificity"/>
<meta http-equiv="Content-Style-Type" content="text/css" />
</head>
<body>
<ul>
<li> <span class="a"> This sentence should be green. </span> </li>
<li> <span class="b"> This sentence should be green. </span>
<ul>
<li> <span class="c"> This sentence should be green. </span> </li>
<li> <span class="c"> This sentence should be green. </span> </li>
<li class="test1"> <span class="d"> This sentence should be green. </span> </li>
</ul>
</li>
<li class="test2"> <span class="e"> This sentence should be green. </span> </li>
<li class="test3" id="test3"> <span class="f"> This sentence should be green. </span> </li>
<li> <span class="a"> This sentence should be green. </span> </li>
</ul>
<p style="color: green;"> This sentence should be green. </p>
<p class="test4"> This sentence should be green. </p>
<p class="c"> This sentence should be green. </p>
</body>
</html>

View file

@ -0,0 +1,104 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Vertical Formatting</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#vertical-formatting"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
/* test */
p.one { margin-top: 0; margin-bottom: 2cm; }
p.two { margin-top: 2cm; margin-bottom: 0; }
p.three { margin-top: 0; margin-bottom: 0; }
p.four { margin-top: -1cm; margin-bottom: 0; }
div.five { margin-top: 1cm; margin-bottom: 1cm; padding-top: 1cm; }
p.six { margin-top: 1cm; margin-bottom: 1cm; }
p.seven { margin-top: 1cm; margin-bottom: 0; }
p.eight { margin-top: 0; margin-bottom: -1cm; padding-bottom: 2cm; }
p.nine { margin-top: -1cm; margin-bottom: 1cm; padding-top: 1cm; }
p.ten { margin-top: 1cm; margin-bottom: 0; float: left; width: 50%; }
p.eleven { margin-top: 1cm; margin-bottom: 0; }
p.twelve { margin-top: 0; margin-bottom: 0; padding-bottom: 1cm; clear: both; }
p.thirteen { margin-top: 0; margin-bottom: 0; padding-top: 1cm; }
/* control */
td { width: 5em; padding: 0; border: solid; }
.p { margin: 0; padding: 0; height: auto; }
.h1 { margin: 0; padding: 0; height: 1cm; }
.h2 { margin: 0; padding: 0; height: 2cm; }
.h3 { margin: 0; padding: 0; height: 3cm; }
.w50 { width: 50%; }
.l50 { margin-left: 50%; }
.contain { position: relative; } /* XXX relies on CSS2 stuff */
.bottom { position: absolute; bottom: 0; }
.left { position: absolute; left: 0; }
/* colours */
.teal, .test { background: teal; }
.yellow, .one, .seven, .thirteen { background: yellow; }
.fuchsia, .two, .eight { background: fuchsia; }
.lime, .three, .nine { background: lime; }
.white, .four, .ten { background: white; }
.aqua, .five, .eleven { background: aqua; }
.orange, .six, .twelve { background: orange; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" title="8.3.1 Collapsing margins"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" title="8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" title="8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'"/>
</head>
<body>
<p>The two columns below should be identical.</p>
<table>
<tr>
<td class="test">
<p class="one"> - </p>
<p class="two"> - </p>
<p class="one"> - </p>
<p class="three"> - </p>
<p class="one"> - </p>
<p class="four"> - </p>
<div class="five">
<p class="six"> - </p>
</div>
<p class="seven"> - </p>
<p class="eight"> - </p>
<p class="nine"> - </p>
<p class="ten"> - </p>
<p class="eleven"> - </p>
<p class="twelve"> - </p>
<p class="thirteen"> - </p>
</td>
<td class="control">
<div class="yellow p">-</div>
<div class="teal h2"></div>
<div class="fuchsia p">-</div>
<div class="yellow p">-</div>
<div class="teal h2"></div>
<div class="lime p">-</div>
<div class="yellow p">-</div>
<div class="teal h1"></div>
<div class="white p">-</div>
<div class="teal h1"></div>
<div class="aqua h2"></div>
<div class="orange p">-</div>
<div class="teal h1"></div>
<div class="yellow p">-</div>
<div class="fuchsia p">-</div>
<div class="fuchsia h1"></div>
<div class="lime h1"></div>
<div class="lime p">-</div>
<div class="teal h1"></div>
<div class="aqua"><div class="l50 p">-</div></div>
<div class="teal h1 contain"><div class="white p bottom left w50">-</div></div>
<div class="orange p">-</div>
<div class="orange h1"></div>
<div class="yellow h1"></div>
<div class="yellow p">-</div>
</td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 120px;
margin: 10px;
width: 120px;
}
]]></style>
</head>
<body>
<p>Test passes if there are 2 identical filled green squares and <strong>no red</strong>.</p>
<div></div>
<div></div>
</body>
</html>

View file

@ -0,0 +1,63 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Horizontal Formatting</title>
<meta name="flags" content="ahem image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#horizontal-formatting"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c412-blockw-000-ref.xht" />
<style type="text/css"><![CDATA[
.test { font: 10px/1 Ahem; margin: 1em; border: solid 1em; width: 100px; background: red no-repeat; color: green; }
.test p, .test div { margin-top: 0; margin-bottom: 0; }
.test.a { background-image: url(support/css1test412b-a.png); }
.test.b { background-image: url(support/css1test412b-b.png); }
.test.b p { background-color: green; }
p.one {margin-left: 10px;}
div.two {margin-left: 10px;}
p.three {margin-left: 0; width: 50%; margin-right: auto;}
p.four {margin-left: auto; width: 50%; margin-right: auto;}
p.five {margin-left: auto; width: 50%; margin-right: 0;}
p.six {margin-left: auto; width: auto; margin-right: 0;}
p.seven {margin-left: 0; width: auto; margin-right: auto;}
p.eight {margin-left: auto; width: auto; margin-right: auto;}
p.nine {padding-left: auto; padding-right: auto; margin-left: 0; margin-right: 0; width: 50%;}
p.ten {margin-left: auto; width: 100%; margin-right: auto;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" title="10.3.3 Block-level, non-replaced elements in normal flow"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" title="10.2 Content width: the 'width' property"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" title="8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'"/>
</head>
<body>
<p>Test passes if there are 2 identical filled green squares and <strong>no red</strong>.</p>
<div class="test a"> <!-- this tests the text alignment -->
<p class="one"> X </p>
<div class="two">
<p class="one"> X </p>
</div>
<p class="three"> X </p>
<p class="four"> X </p>
<p class="five"> X </p>
<p class="six"> X </p>
<p class="seven"> X </p>
<p class="eight"> X </p>
<p class="nine"> X </p>
<p class="ten"> X </p>
</div>
<div class="test b"> <!-- this tests the size of the content area -->
<p class="one"> X </p>
<div class="two">
<p class="one"> X </p>
</div>
<p class="three"> X </p>
<p class="four"> X </p>
<p class="five"> X </p>
<p class="six"> X </p>
<p class="seven"> X </p>
<p class="eight"> X </p>
<p class="nine"> X </p>
<p class="ten"> X </p>
</div>
</body>
</html>

View file

@ -0,0 +1,40 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
body {margin-bottom: 20px;}
div {margin: 1em 0;}
img {vertical-align: bottom;}
]]></style>
</head>
<body>
<p>The two diagrams below should be identical.</p>
<div><img src="support/css1test412a.png"
alt="The diagram above should be as described here: A 40px white
square (which will appear as a 40px indent from the left margin),
a 40px fuchsia square, six 40px aqua squares separated by five
40px blue squares, and a final fuchsia square." />
</div>
<div><img src="support/css1test412a.png"
alt="The diagram above should be as described here: A 40px white
square (which will appear as a 40px indent from the left margin),
a 40px fuchsia square, six 40px aqua squares separated by five
40px blue squares, and a final fuchsia square." />
</div>
</body>
</html>

View file

@ -0,0 +1,41 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Horizontal Formatting</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#horizontal-formatting"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-29 -->
<link rel="match" href="c412-hz-box-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
p#ruled {
font: 40px/1 Ahem;
width: 360px; background-color: aqua; color: blue;
border-style: solid; border-color: fuchsia;
border-top-width: 0px; border-right-width: 40px; border-bottom-width: 0px; border-left-width: 40px;
padding-top: 0px; padding-right: 40px; padding-bottom: 0px; padding-left: 40px;
margin-top: 0px; margin-right: 40px; margin-bottom: 0px; margin-left: 40px;
}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#box-dimensions" title="8.1 Box dimensions"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#border-properties" title="8.5 Border properties"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#padding-properties" title="8.4 Padding properties: 'padding-top', 'padding-right', 'padding-bottom', 'padding-left', and 'padding'"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/box.html#margin-properties" title="8.3 Margin properties: 'margin-top', 'margin-right', 'margin-bottom', 'margin-left', and 'margin'"/>
</head>
<body>
<p>The two diagrams below should be identical.</p>
<div class="test">
<p id="ruled">X X X X X</p>
<p id="control">
<img src="support/css1test412a.png"
alt="The diagram above should be as described here: A 40px white
square (which will appear as a 40px indent from the left margin),
a 40px fuchsia square, six 40px aqua squares separated by five
40px blue squares, and a final fuchsia square." />
</p>
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Non-Replaced Float Alignment to Containing Block Edges</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
.test div { margin: 1em; padding: 0 0 0.5em; border: 0.5em solid; border-bottom: none; background: navy; color: blue; }
.test p { width: 10em; padding: 0.25em; margin: 0; border: 0.25em solid; background: teal; color: aqua; }
.test p.left { float: left; }
.test p.right { float: right; }
]]></style>
<meta name="assert" content="A floated box is shifted to the left or right until its outer edge touches the containing block edge."/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p>In the following test, the teal blocks must be just inside the
top and sides of the blue rectangle.</p>
<div class="test">
<div>
<p class="left"> Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. </p>
<p class="right"> Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. Teal block. </p>
Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Non-Replaced Floating Left vs. Right</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
.test div { margin: 1em; padding: 0.5em; background: teal; color: aqua; }
.test p { width: 10em; padding: 0.25em; margin: 0; border: 0.25em solid blue; background: navy; color: white; }
.test p.left { float: left; }
.test p.right { float: right; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p>In the following test, the blue blocks should be on the given sides of the teal rectangle.</p>
<div class="test">
<div>
<p class="left"> &#x21E6; This blue block should be on the left. </p>
<p class="right"> &#x21E8; This blue block should be on the right. </p>
Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle.
Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle. Teal rectangle.
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Float Alignment to Containing Block Edges</title>
<meta name="flags" content="image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
.test div { margin: 1em; padding: 0 0 0.5em; border: 0.5em solid; border-bottom: none; background: navy; color: blue; }
.test img { width: 10em; background: red; color: yellow; }
.test img.left { float: left; }
.test img.right { float: right; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p>In the following test, the teal squares must be just inside the
top and sides of the blue rectangle.</p>
<div class="test">
<div>
<img src="support/square-teal.png" alt="FAIL: You need image support." class="left"/>
<img src="support/square-teal.png" alt="FAIL: You need image support." class="right"/>
Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Floating Left vs. Right</title>
<meta name="flags" content="image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
.explanation img { height: 1.2em; vertical-align: text-bottom; }
.test div { margin: 1em; padding: 0.5em; background: navy; color: blue; }
.test img { width: 10em; }
.test img.left { float: left; }
.test img.right { float: right; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p class="explanation">In the following test, the purple square
should be on the left (&#x21E6;<img src="support/square-purple.png"
alt="Image download support must be enabled"/>), and the teal square on the right (<img
src="support/square-teal.png" alt="Image download support must be enabled"/>&#x21E8;) of the blue rectangle.</p>
<div class="test">
<div>
<img src="support/square-purple.png" alt="FAIL: You need image support." class="left"/>
<img src="support/square-teal.png" alt="FAIL: You need image support." class="right"/>
Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle. Blue rectangle.
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,58 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
table
{
border-collapse: separate;
border: blue solid medium;
border-spacing: 0px;
margin-left: 10px;
padding: 1em;
table-layout: fixed;
width: 16.375em;
/*
14em (5em column + 5em column + 4em column)
+ 2em (left and right horizontal padding)
+ 6px (2 vertical 3px borders)
=====
16.375em
*/
}
col {width: 5em;}
col#special {width: 4em;}
td
{
color: navy;
padding: 0;
}
]]></style>
</head>
<body>
<p>There should be five numbers, in numerical order, below: on the first line 1, 2 and 3, on the second, 4 and 5.</p>
<table>
<col></col> <col></col> <col id="special"></col>
<tr><td>1</td><td>2</td><td>3</td></tr>
<tr><td>4</td><td>5</td><td></td></tr>
</table>
</body>
</html>

View file

@ -0,0 +1,28 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Stacking Non-Replaced Left Floats</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="match" href="c414-flt-fit-000-ref.xht" />
<style type="text/css"><![CDATA[
div { border: solid blue; padding: 1em; width: 14em; margin: 10px; }
div p { margin: 0; width: 5em; float: left; color: navy; }
]]></style>
</head>
<body>
<p>There should be five numbers, in numerical order, below: on the first line 1, 2 and 3, on the second, 4 and 5.</p>
<div>
<p> 1 </p>
<p> 2 </p>
<p> 4 </p>
3
5&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;&#xA0;
</div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
border: blue solid 5px;
margin: 10px;
width: 250px;
}
img {vertical-align: bottom;}
]]></style>
</head>
<body>
<p>There should be a complete unbroken drawing of a yin-yang (&#x262F;) symbol below, slightly on the left (&#x21E6;) inside a blue box.</p>
<div><img src="support/test-tl.png" alt="Image download support must be enabled" /><img src="support/test-tr.png" alt="Image download support must be enabled" /><img src="support/test-bl.png" alt="Image download support must be enabled" /><img src="support/test-br.png" alt="Image download support must be enabled" /></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Stacking Replaced Left Floats</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="match" href="c414-flt-fit-001-ref.xht" />
<meta name="flags" content="image" />
<style type="text/css"><![CDATA[
div { border: 5px solid blue; width: 250px; margin: 10px; line-height: 0; }
div p { margin: 0; float: left; }
]]></style>
</head>
<body>
<p>There should be a complete unbroken drawing of a yin-yang (&#x262F;) symbol below, slightly on the left (&#x21E6;) inside a blue box.</p>
<div>
<p> <img src="support/test-tl.png" alt="FAIL: You need images enabled."/> </p>
<p> <img src="support/test-tr.png" alt="FAIL: You need images enabled."/> </p>
<p> <img src="support/test-bl.png" alt="FAIL: You need images enabled."/> </p>
<img src="support/test-br.png" alt="FAIL: You need images enabled."/>
</div>
</body>
</html>

View file

@ -0,0 +1,64 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div#wrapper
{
margin-left: 1.25em;
margin-top: 1.25em;
}
div#wrapper > div {display: inline-block;}
div#left {margin-right: 0.5em;}
div#wrapper > div > div
{
background-color: navy;
border: blue solid medium;
color: white;
margin-bottom: 0.5em;
padding: 0.25em;
width: 7em;
}
div#B4, div#B6, div#B8
{
margin-left: 3.25em;
text-align: right;
}
]]></style>
</head>
<body>
<p>The blue rectangles should be in numeric order and form a "D". (Boxes labelled "A" should be in the first column; boxes labelled "B" should be in the second; arrows indicate the correct alignment.)</p>
<div id="wrapper">
<div id="left">
<div>&#x21E6; A 1</div>
<div>&#x21E6; A 3</div>
<div>&#x21E6; A 5</div>
<div>&#x21E6; A 7</div>
<div>&#x21E6; A 9</div>
</div><div>
<div>&#x21E6; B 2</div>
<div id="B4">B 4 &#x21E8;</div>
<div id="B6">B 6 &#x21E8;</div>
<div id="B8">B 8 &#x21E8;</div>
<div>&#x21E6; B 10</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Stacking Mixed Floats Part I</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="match" href="c414-flt-fit-002-ref.xht" />
<style type="text/css"><![CDATA[
div { margin: 1em; width: 20em; }
div p { margin: 0.25em; border: solid blue; padding: 0.25em; width: 7em; background: navy; color: white; }
div p.left { float: left; }
div p.right { float: right; text-align: right; }
]]></style>
</head>
<body>
<p>The blue rectangles should be in numeric order and form a "D".
(Boxes labelled "A" should be in the first column; boxes labelled
"B" should be in the second; arrows indicate the correct
alignment.)</p>
<div>
<p class="left"> &#x21E6; A 1 </p>
<p class="left"> &#x21E6; B 2 </p>
<p class="left"> &#x21E6; A 3 </p>
<p class="right"> B 4 &#x21E8; </p>
<p class="left"> &#x21E6; A 5 </p>
<p class="right"> B 6 &#x21E8; </p>
<p class="right"> B 8 &#x21E8; </p>
<p class="left"> &#x21E6; A 7 </p>
<p class="left"> &#x21E6; A 9 </p>
<p class="left"> &#x21E6; B 10 </p>
</div>
</body>
</html>

View file

@ -0,0 +1,67 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div#wrapper
{
margin-left: 1.25em;
margin-top: 1.25em;
}
div#wrapper > div {display: inline-block;}
div#left {margin-right: 0.5em;}
div#wrapper > div > div
{
background-color: navy;
border: blue solid medium;
color: white;
margin-bottom: 0.5em;
padding: 0.25em;
text-align: right;
width: 7em;
}
div#A1, div#A9
{
margin-left: 3.25em;
text-align: left;
}
div#A3, div#A5, div#A7 {text-align: left !important;}
]]></style>
</head>
<body>
<p>The blue rectangles should be in numeric order and form a backwards "D". (Boxes labelled "A" should be in the first column; boxes labelled "B" should be in the second; arrows indicate the correct alignment.)</p>
<div id="wrapper">
<div id="left">
<div id="A1">A 1 &#x21E8;</div>
<div id="A3">&#x21E6; A 3</div>
<div id="A5">&#x21E6; A 5</div>
<div id="A7">&#x21E6; A 7</div>
<div id="A9">A 9 &#x21E8;</div>
</div><div>
<div>B 2 &#x21E8;</div>
<div>B 4 &#x21E8;</div>
<div>B 6 &#x21E8;</div>
<div>B 8 &#x21E8;</div>
<div>B 10 &#x21E8;</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Stacking Mixed Floats Part II</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="match" href="c414-flt-fit-003-ref.xht" />
<style type="text/css"><![CDATA[
div { margin: 1em; width: 20em; }
div p { margin: 0.25em; border: solid blue; padding: 0.25em; width: 7em; background: navy; color: white; }
div p.left { float: left; }
div p.right { float: right; text-align: right; }
]]></style>
</head>
<body>
<p>The blue rectangles should be in numeric order and form a
backwards "D". (Boxes labelled "A" should be in the first column;
boxes labelled "B" should be in the second; arrows indicate the
correct alignment.)</p>
<div>
<p class="right"> B 2 &#x21E8; </p>
<p class="right"> A 1 &#x21E8; </p>
<p class="right"> B 4 &#x21E8; </p>
<p class="left"> &#x21E6; A 3 </p>
<p class="right"> B 6 &#x21E8; </p>
<p class="left"> &#x21E6; A 5 </p>
<p class="left"> &#x21E6; A 7 </p>
<p class="right"> B 8 &#x21E8; </p>
<p class="right"> B 10 &#x21E8; </p>
<p class="right"> A 9 &#x21E8; </p>
</div>
</body>
</html>

View file

@ -0,0 +1,68 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div#wrapper
{
margin-left: 1.25em;
margin-top: 1.25em;
}
div#wrapper > div {display: inline-block;}
div#left {margin-right: 0.5em;}
div#wrapper > div > div
{
background-color: navy;
border: blue solid medium;
color: white;
margin-bottom: 0.5em;
padding: 0.25em;
width: 7em;
}
div#B4, div#B6, div#B10, div#B12
{
margin-left: 3.25em;
text-align: right;
}
]]></style>
</head>
<body>
<p>The blue rectangles should be in numeric order and form a "B". (Boxes labelled "A" should be in the first column; boxes labelled "B" should be in the second; arrows indicate the correct alignment.)</p>
<div id="wrapper">
<div id="left">
<div>&#x21E6; A 1</div>
<div>&#x21E6; A 3</div>
<div>&#x21E6; A 5</div>
<div>&#x21E6; A 7</div>
<div>&#x21E6; A 9</div>
<div>&#x21E6; A 11</div>
<div>&#x21E6; A 13</div>
</div><div>
<div>&#x21E6; B 2</div>
<div id="B4">B 4 &#x21E8;</div>
<div id="B6">B 6 &#x21E8;</div>
<div>&#x21E6; B 8</div>
<div id="B10">B 10 &#x21E8;</div>
<div id="B12">B 12 &#x21E8;</div>
<div>&#x21E6; B 14</div>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Stacking Mixed Floats Part III</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="match" href="c414-flt-fit-004-ref.xht" />
<style type="text/css"><![CDATA[
div { margin: 1em; width: 20em; }
div p { margin: 0.25em; border: solid blue; padding: 0.25em; width: 7em; background: navy; color: white; }
div p.left { float: left; }
div p.right { float: right; text-align: right; }
]]></style>
</head>
<body>
<p>The blue rectangles should be in numeric order and form a "B".
(Boxes labelled "A" should be in the first column; boxes labelled
"B" should be in the second; arrows indicate the correct
alignment.)</p>
<div>
<p class="left"> &#x21E6; A 1 </p>
<p class="left"> &#x21E6; B 2 </p>
<p class="left"> &#x21E6; A 3 </p>
<p class="right"> B 4 &#x21E8; </p>
<p class="left"> &#x21E6; A 5 </p>
<p class="right"> B 6 &#x21E8; </p>
<p class="left"> &#x21E6; A 7 </p>
<p class="left"> &#x21E6; B 8 </p>
<p class="left"> &#x21E6; A 9 </p>
<p class="right"> B 10 &#x21E8; </p>
<p class="left"> &#x21E6; A 11 </p>
<p class="right"> B 12 &#x21E8; </p>
<p class="left"> &#x21E6; A 13 </p>
<p class="left"> &#x21E6; B 14 </p>
</div>
</body>
</html>

View file

@ -0,0 +1,45 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div.control {padding: 1em;}
div.control > div
{
background: navy;
color: yellow;
width: 10em;
}
div.control > div.right
{
margin-left: 5em;
text-align: right;
}
]]></style>
</head>
<body>
<p>Test pass if the 2 patterns are identical with <strong>no red</strong>.</p>
<div class="control">
<div>&#x00A0;&#x262E;</div>
<div class="right">&#x262E;&#x00A0;</div>
</div>
<div class="control">
<div>&#x00A0;&#x262E;</div>
<div class="right">&#x262E;&#x00A0;</div>
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Non-Replaced Float Not Fitting Beside Opposite Float</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" title="16.2 Alignment: the 'text-align' property"/>
<link rel="match" href="c414-flt-fit-005-ref.xht" />
<style type="text/css"><![CDATA[
.control { padding: 1em; }
.control div { width: 10em; background: navy; color: yellow; }
.control div.right { margin-left: 5em; text-align: right; }
.test { width: 15em; margin: 1em; }
.test div { margin: 0; padding: 0; background: red; }
.test p { margin: 0; padding: 0; width: 10em; background: navy; color: yellow; }
.test p.left { float: left; text-align: left; }
.test p.right { float: right; text-align: right; }
]]></style>
</head>
<body>
<p>Test pass if the 2 patterns are identical with <strong>no red</strong>.</p>
<div class="control">
<div class="left"> &#x00A0;&#x262E; </div>
<div class="right"> &#x262E;&#x00A0; </div>
</div>
<div class="test">
<div>
<p class="left"> &#x00A0;&#x262E; </p>
<p class="right"> &#x262E;&#x00A0; </p>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,35 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div {padding: 1em;}
img
{
display: block;
height: 1em;
width: 10em;
}
img.right {margin-left: 5em;}
]]></style>
</head>
<body>
<p>Test passes if the 2 patterns are identical with <strong>no red</strong>.</p>
<div><img src="support/square-teal.png" alt="Image download support must be enabled" /> <img src="support/square-purple.png" alt="Image download support must be enabled" class="right" /></div>
<div><img src="support/square-teal.png" alt="Image download support must be enabled" /> <img src="support/square-purple.png" alt="Image download support must be enabled" class="right" /></div>
</body>
</html>

View file

@ -0,0 +1,39 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Float Not Fitting Beside Opposite Float</title>
<meta name="flags" content="image" />
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-05 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="match" href="c414-flt-fit-006-ref.xht" />
<style type="text/css"><![CDATA[
img { background: red; color: yellow; }
.control { padding: 1em; }
.control img { width: 10em; height: 1em; display: block; }
.control img.right { margin-left: 5em; }
.test { width: 15em; margin: 1em; }
.test div { margin: 0; padding: 0; background: red; }
.test img { width: 10em; height: 1em; }
.test img.left { float: left; }
.test img.right { float: right;}
]]></style>
</head>
<body>
<p>Test passes if the 2 patterns are identical with <strong>no red</strong>.</p>
<div class="control">
<img src="support/square-teal.png" alt="FAIL: You need image support for this test." class="left"/>
<img src="support/square-purple.png" alt="FAIL: You need image support for this test." class="right"/>
</div>
<div class="test">
<div>
<img src="support/square-teal.png" alt="FAIL: You need image support for this test." class="left"/>
<img src="support/square-purple.png" alt="FAIL: You need image support for this test." class="right"/>
</div>
</div>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Vertical Position of Floats</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em serif; }
div p { width: 7em; padding: 1em; margin: 0; }
div .a { border: solid aqua; background-color: teal; color: white; }
div p.a { float: left; }
div .b { border: solid fuchsia; background-color: purple; color: white; }
div p.b { float: right; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p>The big coloured boxes should be level with the top of the small
coloured boxes of the same color (unless there is not enough room
for the big box to fit on the small box's line after the small box,
in which case the big box should be level with the bottom of the
respective small box).</p>
<div>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="a">A</span>
<p class="a">AAAA</p>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="b">B</span>
<p class="b">BBBB</p>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
</div>
</body>
</html>

View file

@ -0,0 +1,54 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Vertical Position of Floats</title>
<meta name="flags" content="image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em serif; }
div img { width: 7em; color: red; }
div span.a { border: solid aqua; background-color: teal; color: white; }
div img.a { float: left; }
div span.b { border: solid fuchsia; background-color: purple; color: white; }
div img.b { float: right; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p>The big coloured boxes should be level with the top of the small
coloured boxes of the same color (unless there is not enough room
for the big box to fit on the small box's line, in which case the
big box should be level with the bottom of the respective small
box).</p>
<div>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="a">&#x21E6;</span>
<img src="support/square-teal.png" alt="FAIL: Images required for this test." class="a"/>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="b">&#x21E8;</span>
<img src="support/square-purple.png" alt="FAIL: Images required for this test." class="b"/>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
</div>
</body>
</html>

View file

@ -0,0 +1,81 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Vertical Position of Floats</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<meta name="flags" content="interact"/>
<style type="text/css"><![CDATA[
.gutter { width: 9em; background: yellow; border-left: solid 9em aqua;
margin-left: auto; /* CSS1 agents */
position: absolute; top: 0; right: 0; bottom: 0; z-index: -1; /* CSS2 agents */ }
p, ul { color: navy; }
.test { position: relative; font: 1em serif;
border: 5px solid gray; margin: 1em; color: silver; }
.test p { width: 7em; padding: 1em; margin: 0; }
.test p, .test span { color: white; }
.test .a { background-color: blue; }
.test p.a { float: left; }
.test .b { background-color: purple; }
.test p.b { float: right; }
.test .c { background-color: orange; }
.test p.c { float: left; }
.test .d { background-color: green; }
.test p.d { float: left; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p>Test passes if for each matching pair of colored boxes either:</p>
<ul>
<li>the top of the small box is level with the top of the big box <em>or</em></li>
<li>the top of the big box is level with the bottom of the the small box
and either
<ul>
<li>the small box crosses into the righthand region marked by the yellow box or</li>
<li>the small box crosses into the righthand region marked by the aqua box and
the region marked by the yellow box on the small box's line is filled by another big box</li>
</ul>
</li>
</ul>
<p>These conditions must hold true even if the window is resized or the font
size changed.</p>
<div class="test">
<div class="gutter"></div>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text
<span class="a">A</span>
<p class="a">AAAA</p>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="b">B</span>
<p class="b">BBBB</p>
dummy text dummy text dummy text
<span class="c">C</span>
<p class="c">CCCC</p>
dummy text dummy text dummy text dummy text dummy text dummy text
<span class="d">D</span>
<p class="d">DDDD</p>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
</div>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Vertical Position of Floats</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
div { border: 5px solid purple; padding: 1em; margin: 1em; color: silver; font: 1em serif; }
div p { width: 7em; padding: 1em; margin: 0; }
div .a { border: solid aqua; background-color: teal; color: white; }
div p.a { float: left; }
div .b { border: solid fuchsia; background-color: purple; color: white; }
div p.b { float: right; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/>
</head>
<body>
<p>The big coloured boxes should be level with the top of the small
coloured boxes of the same color (unless there is not enough room
for the big box to fit on the small box's line after the small box,
in which case the big box should be as high as possible below the
small box).</p>
<div>
dummy text dummy text dummy text dummy text
<span class="a">A</span>
<p class="a">AAAA</p>
<span class="b">B</span>
<p class="b">BBBB</p>
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
dummy text dummy text dummy text dummy text dummy text dummy text
</div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Text Not Fitting Beside Non-Replaced Float</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<meta name="assert" content="If a shortened line box is too small to contain any further content, then it is shifted downward until either it fits or there are no more floats present." />
<style type="text/css"><![CDATA[
p { color: navy; }
.test { width: 15em; margin: 1em; padding: 0; background: white; color: white; }
.test p { margin: 0; padding: 0.01em; }
.test p.left { float: left; }
.test p.right { float: right; width: 14.98em; background: teal; color: aqua; text-align: center; }
]]></style>
</head>
<body>
<p>Test passes if the word "fail" does not appear.</p>
<div class="test">
<p class="left"> TEST: </p>
<p class="right"> PASS </p>
fail fail fail fail fail fail fail fail fail fail
fail fail fail fail fail fail fail fail fail fail
fail fail fail fail fail fail fail fail fail fail
fail fail fail fail fail fail fail fail fail fail
fail fail fail fail fail fail fail fail fail fail
</div>
<!-- this test actually failed in Mozilla once -->
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: green;
height: 7em;
margin-left: 1em;
margin-top: 17px;
width: 15em;
}
]]></style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and if the word "FAIL" does not appear.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Text Not Fitting Beside Replaced Float</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#floating-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" title="9.5 Floats"/>
<link rel="match" href="c414-flt-wrap-001-ref.xht" />
<meta name="flags" content="image" />
<style type="text/css"><![CDATA[
.test { width: 15em; margin: 1em; padding: 0; background: white; color: white; }
.test img.left { float: left; }
.test img.right { float: right; width: 15em; height: 7em; }
.test span { font: 6em monospace; }
]]></style>
</head>
<body>
<p>Test passes if there is a filled green rectangle and if the word "FAIL" does not appear.</p>
<div class="test">
<img src="support/1x1-white.png" alt="FAIL: You need image support for this test." class="left"/>
<img src="support/1x1-green.png" alt="FAIL: You need image support for this test." class="right"/>
<span> FAIL </span>
</div>
<!-- this test actually failed in Mozilla once -->
</body>
</html>

View file

@ -0,0 +1,47 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
color: green;
font: 10px/12px Ahem;
width: 20em;
}
span
{
background-color: lime;
color: lime;
}
span > span {padding: 0.2em 0em;}
span.green-square
{
color: green;
padding: 0em;
}
]]></style>
</head>
<body>
<p>There should be no red below, only green lines and dots.</p>
<div>1 3 <span>5 7 9 1 3 5 7 9
1 3 <span>5</span> 7 9 1 3 5 7 9
1 3 5 7 9 1 <span class="green-square">3</span> <span class="green-square">5</span> <span class="green-square">7</span> <span class="green-square">9</span>
<span class="green-square">1</span> <span class="green-square">3</span> <span class="green-square">5</span> <span class="green-square">7</span> <span class="green-square">9</span> <span>1</span> <span class="green-square">3</span> <span class="green-square">5</span> <span class="green-square">7</span> <span class="green-square">9</span>
<span class="green-square">1</span> <span class="green-square">3</span> <span class="green-square">5</span> <span class="green-square">7</span> <span class="green-square">9</span> <span class="green-square">1</span></span> 3 5 7 9</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Inline Elements</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-27 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#inline-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#leading" title="10.8.1 Leading and half-leading"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-non-replaced" title="10.6.1 Inline, non-replaced elements"/>
<link rel="match" href="c42-ibx-ht-000-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
div { width: 20em; font: 10px/12px Ahem; color: green; }
span { border: solid 10px lime; padding: 2px 0 2px 10px; margin: 10px 10px 0 0; }
em { font: 1em/1 Ahem; color: red; }
]]></style>
</head>
<body>
<p>There should be no red below, only green lines and dots.</p>
<div>
z z <em> x x x x x x x x x x </em> <span> <em> x x x x x x x x x x
x x x </em> y y y y y y y y y </span> y y y y y y y y y y z z z z
</div>
</body>
</html>

View file

@ -0,0 +1,36 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
td
{
border: 2px solid black;
padding: 0;
}
img {vertical-align: bottom;}
]]></style>
</head>
<body>
<p>Test passes if the 2 diagrams are <strong>identical</strong> and with <strong>no red</strong>.</p>
<table>
<tr>
<td><img src="support/css1test42a.png" alt="FAIL: Images required for this test."/></td>
<td><img src="support/css1test42a.png" alt="FAIL: Images required for this test."/></td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,42 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Inline Elements</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#inline-elements"/>
<link rel="match" href="c42-ibx-pad-000-ref.xht" />
<meta name="flags" content="ahem image" />
<style type="text/css"><![CDATA[
div { font: 10px/240% Ahem; color: black; width: 200px; margin: 0 0 0 10px; }
span { border: solid 10px blue; padding: 2px 20px 2px 10px; margin: 40px 30px 0 40px; }
td { padding: 0; border: 2px solid black; }
img { display: block; }
.control { background: red; color: yellow; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#inline-formatting" title="9.4.2 Inline formatting context"/>
</head>
<body>
<p>Test passes if the 2 diagrams are <strong>identical</strong> and with <strong>no red</strong>.</p>
<table>
<tr>
<td>
<div>
1 2 3 4 5 6 7 8 9 0
1 2 3 <span> 7 8 9 0
1 2 3 4 5 6 7 8 9 0
1 2 3 4 </span> 8 9 0
1 2 3 4 5 6 7 8 9 0
</div>
</td>
<td class="control">
<img src="support/css1test42a.png" alt="FAIL: Images required for this test."/>
</td>
</tr>
</table>
</body>
</html>

View file

@ -0,0 +1,27 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Elements</title>
<meta name="flags" content="ahem image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#replaced-elements"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
div { margin: 0; background: url(support/swatch-red.png) center repeat-y; font-size: 10px; }
.a img { display: block; margin-right: auto; margin-left: auto; width: auto; }
.b { text-align: center; }
.b img { vertical-align: top; height: 20px; width: 20px; }
.c { text-align: center; font: 20px/1 Ahem; color: blue; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/text.html#alignment-prop" title="16.2 Alignment: the 'text-align' property"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#block-replaced-width" title="10.3.4 Block-level, replaced elements in normal flow"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties" title="14.2.1 Background properties: 'background-color', 'background-image', 'background-repeat', 'background-attachment', 'background-position', and 'background'"/>
</head>
<body>
<p>There should be a single small column of blue below with no red:</p>
<div class="a"><img src="support/blue20x20.png" alt="FAIL: Replaced content did not get replaced."/></div>
<div class="b"><img src="support/swatch-blue.png" alt="FAIL: Replaced content did not get replaced."/></div>
<div class="c">X</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Elements</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#replaced-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#block-replaced-width" title="10.3.4 Block-level, replaced elements in normal flow"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" title="10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements"/>
<meta name="flags" content="image" />
<style type="text/css"><![CDATA[
html, body, p { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
img { display: block; margin-right: auto; margin-left: auto; width: 50%; }
]]></style>
</head>
<body>
<p>
Test passes if there is a big blue square half the width of the window and centered.
</p>
<p><img src="support/swatch-blue.png" alt="FAIL: Images required for this test."/></p>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Elements</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#replaced-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#block-replaced-width" title="10.3.4 Block-level, replaced elements in normal flow"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" title="10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements"/>
<meta name="flags" content="image" />
<style type="text/css"><![CDATA[
html, body, p { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; }
img { display: block; margin-right: 0; margin-left: auto; width: 50%; }
]]></style>
</head>
<body>
<p>
Test passes if there is a big blue square half the width of the window and aligned flush with the right hand side (&#x21E8;).
</p>
<p><img src="support/swatch-blue.png" alt="FAIL: Images required for this test."/></p>
</body>
</html>

View file

@ -0,0 +1,51 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: blue;
margin-left: 16px;
margin-bottom: 5px;
}
div.first-pair-blue-squares
{
height: 15px;
width: 15px;
}
div.second-pair-blue-squares
{
height: 60px;
width: 60px;
}
]]></style>
</head>
<body>
<p>There should be <strong>no red</strong> anywhere.</p>
<p>There should be <strong>2 identical squares</strong> after this line:</p>
<div class="first-pair-blue-squares"></div>
<div class="first-pair-blue-squares"></div>
<p>There should be <strong>2 identical squares</strong> after this line:</p>
<div class="second-pair-blue-squares"></div>
<div class="second-pair-blue-squares"></div>
</body>
</html>

View file

@ -0,0 +1,55 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Elements</title>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="alternate" href="http://www.hixie.ch/tests/evil/css/css21/tests/t1004-c43-rpl-bbx-00-d-ag.htm" type="text/html"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#replaced-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#blockwidth" title="10.3.3 Block-level, non-replaced elements in normal flow"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" title="10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements"/>
<link rel="match" href="c43-rpl-bbx-002-ref.xht" />
<meta name="flags" content="ahem image" />
<style type="text/css"><![CDATA[
div {margin: 1em;}
img
{
display: block;
margin-bottom: 5px;
}
span
{
background: red;
color: blue;
display: block;
font: 15px/1 Ahem;
width: 1em;
}
.b > img, .b > span
{
font-size: 3.75em;
height: 1em;
}
]]></style>
</head>
<body>
<p> There should be <strong>no red</strong> anywhere. </p>
<p> There should be <strong>2 identical squares</strong> after this line: </p>
<div class="a">
<img src="support/swatch-blue.png" alt="FAIL: Replaced content did not get replaced." />
<span>X</span>
</div>
<p> There should be <strong>2 identical squares</strong> after this line: </p>
<div class="b">
<img src="support/swatch-blue.png" alt="FAIL: Replaced content did not get replaced." />
<span>X</span>
</div>
</body>
</html>

View file

@ -0,0 +1,26 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
strong {line-height: 1;}
]]></style>
</head>
<body>
<p>There should be <strong>no red</strong> anywhere.</p>
<p>There should be <strong>2 identical squares</strong> at the end of this line: <img src="support/swatch-blue.png" width="15" height="15" alt="Image download support must be enabled" /> <img src="support/swatch-blue.png" width="15" height="15" alt="Image download support must be enabled" /></p>
<p>There should be <strong>2 identical squares</strong> at the end of this line: <img src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled" /> <img src="support/swatch-blue.png" width="60" height="60" alt="Image download support must be enabled" /></p>
</body>
</html>

View file

@ -0,0 +1,49 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: Replaced Elements</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-30 -->
<link rel="alternate" href="http://www.hixie.ch/tests/evil/css/css21/tests/t1004-c43-rpl-ibx-00-d-ag.htm" type="text/html"/>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#replaced-elements"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" title="10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements"/>
<link rel="match" href="c43-rpl-ibx-000-ref.xht" />
<meta name="flags" content="ahem image" />
<style type="text/css"><![CDATA[
strong {line-height: 1;}
span
{
background: red;
color: blue;
font: 15px/1 Ahem;
vertical-align: top;
}
.b > img
{
font-size: 3.75em;
height: 1em;
}
.b > span {font-size: 3.75em;}
]]></style>
</head>
<body>
<p>There should be <strong>no red</strong> anywhere.</p>
<p class="a">
There should be <strong>2 identical squares</strong> at the end of this line:
<img src="support/swatch-blue.png" alt="FAIL: Replaced content did not get replaced." />
<span>X</span>
</p>
<p class="b">
There should be <strong>2 identical squares</strong> at the end of this line:
<img src="support/swatch-blue.png" alt="FAIL: Replaced content did not get replaced." />
<span>X</span>
</p>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
border: green solid 10px;
height: 8.75em;
width: 13.125em;
}
]]></style>
</head>
<body>
<p>There should be no red below, just the outline of an empty green box.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: The Height of Lines</title>
<meta name="flags" content="ahem image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#the-height-of-lines"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c44-ln-box-000-ref.xht" />
<style type="text/css"><![CDATA[
div { font: 10px/20px Ahem; color: white; background: red url(support/css1test44a.png) no-repeat;
width: 19em; padding: 0.5em 1em; border: 1em solid green; }
img.onea, img.oneb { width: 4em; height: 4em; }
img.onea { vertical-align: text-bottom; }
img.oneb { vertical-align: text-top; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"/>
</head>
<body>
<p>There should be no red below, just the outline of an empty green box.</p>
<div>
xxxx xxxx xxxx xxxx
xxxx xxxx xxxx xxxx
<img src="support/swatch-white.png" alt="Image download support must be enabled" class="onea" />
xxxx
<img src="support/swatch-white.png" alt="Image download support must be enabled" class="oneb" />
xxxx
xxxx xxxx xxxx xxxx
</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
border: green solid 10px;
height: 13.75em;
width: 25.625em;
}
]]></style>
</head>
<body>
<p>Test passes if there is an hollow green rectangle and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: The Height of Lines</title>
<meta name="flags" content="ahem image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#the-height-of-lines"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<link rel="match" href="c44-ln-box-001-ref.xht" />
<style type="text/css"><![CDATA[
div { font: 10px/20px Ahem; color: white; background: red url(support/css1test44b.png) no-repeat;
width: 39em; padding: 0.5em 1em; border: 1em solid green; }
img.twoa, img.twob { width: 3em; height: 3em; padding: 0.5em; border-style: solid; border-width: 1em; margin: 1.5em; }
img.twoa { vertical-align: text-bottom; }
img.twob { vertical-align: text-top; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"/>
</head>
<body>
<p>Test passes if there is an hollow green rectangle and <strong>no red</strong>.</p>
<div>
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
xxxx
<img src="support/swatch-white.png" alt="Image download support must be enabled" class="twoa" />
xxxx xxxx
<img src="support/swatch-white.png" alt="Image download support must be enabled" class="twob" />
xxxx
xxxx xxxx xxxx xxxx xxxx xxxx xxxx xxxx
</div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
border: green solid 20px;
height: 13.75em;
width: 20em;
}
]]></style>
</head>
<body>
<p>Test passes if there is an hollow green rectangle and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: The Height of Lines</title>
<meta name="flags" content="ahem image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#the-height-of-lines"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c44-ln-box-002-ref.xht" />
<style type="text/css"><![CDATA[
div { font: 20px/40px Ahem; color: white; background: red url(support/css1test44c.png) no-repeat;
width: 14em; padding: 0.5em 1em; border: 1em solid green; }
img.twoc { vertical-align: middle; width: 2em; height: 2em;
padding: 0.9em 0.5em 0.1em; border: solid 1em; margin: -1.5em -0.5em -1.7em; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"/>
</head>
<body>
<p>Test passes if there is an hollow green rectangle and <strong>no red</strong>.</p>
<div>
xxxx xxxx xxxx
xxxx xxxx xxxx
xxxx
<img src="support/swatch-white.png" alt="Image download support must be enabled" class="twoc" />
xxxx
xxxx xxxx xxxx
xxxx xxxx xxxx
</div>
</body>
</html>

View file

@ -0,0 +1,38 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: The Height of Lines</title>
<meta name="flags" content="ahem image" />
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#the-height-of-lines"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c44-ln-box-002-ref.xht" />
<style type="text/css"><![CDATA[
div { font: 20px/40px Ahem; color: white; background: red url(support/css1test44d.png) no-repeat;
width: 14em; padding: 0.5em 1em; border: 1em solid green; }
img.twoc { vertical-align: -0.7em
/* 0.4em is exactly equal to 0.5ex which is exactly equal to the distance that 'middle'
causes the centerpoint of the image to be from the baseline. Since the centerpoint
is 1em above the bottom of the image, that means the bottom of the image has to be
moved -0.6em so that it is at the same position as it would be with 'vertical-align'
set to 'middle'. The bottom of the image is a further 0.6em+1em-1.5em from the bottom
margin edge of the whole replaced element, which is what needs to be moved away from
the baseline. So -(0.6em+(0.6em+1em-1.5em)) = -0.7em is the distance to move. */;
width: 2em; height: 2em; padding: 0.4em 0.5em 0.6em; border: solid 1em; margin: -1.5em -0.5em; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties"/>
</head>
<body>
<p>Test passes if there is an hollow green rectangle and <strong>no red</strong>.</p>
<div>
xxxx xxxx xxxx
xxxx xxxx xxxx
xxxx
<img src="support/swatch-white.png" alt="Image download support must be enabled" class="twoc" />
xxxx
xxxx xxxx xxxx
xxxx xxxx xxxx
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
body
{
background-color: purple;
margin: 8px;
}
p
{
background-color: navy;
color: white;
margin: 25px 17px 25px 17px;
}
]]></style>
</head>
<body>
<p>This paragraph should be in a blue block near the top of the page. Around it on all sides should be purple.</p>
</body>
</html>

View file

@ -0,0 +1,21 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: The Canvas</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#the-canvas"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="match" href="c45-bg-canvas-000-ref.xht" />
<style type="text/css"><![CDATA[
html { background-color: purple; }
body { background-color: navy; background-image: none; margin: 25px; color: white; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background" title="14.2 The background"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/intro.html#the-canvas" title="2.3.1 The canvas"/>
</head>
<body>
<p>This paragraph should be in a blue block near the top of the
page. Around it on all sides should be purple.</p>
</body>
</html>

View file

@ -0,0 +1,43 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: font-family</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#font-family"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { margin: 0; color: navy; }
div.a {font-family: serif;}
div.b {font-family: monospace;}
.one {font-family: serif;}
.two {font-family: sans-serif;}
.three {font-family: cursive;}
.four {font-family: fantasy;}
.five {font-family: monospace;}
.six {font-family: sans-serif,cursive;}
.seven {font-family: monospace,serif;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-family-prop" title="15.3 Font family: the 'font-family' property"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-family-prop"/>
</head>
<body>
<div class="a">
<p> This sentence should be in a serif font. </p>
<p class="one"> This sentence should be in a serif font. </p>
<p class="two"> This sentence should be in a sans-serif font. </p>
<p class="three"> This sentence should be in a cursive font. </p>
<p class="four"> This sentence should be in a fantasy font. </p>
<p class="five"> This sentence should be in a monospace font. </p>
</div>
<p class="six"> This sentence should be in a sans-serif font. </p>
<p class="seven"> This sentence should be in a monospace font. </p>
<div class="b">
<p> This sentence should be in a monospace font. </p>
<p class="one"> This sentence should be in a serif font. </p>
<p class="two"> This sentence should be in a sans-serif font. </p>
<p class="three"> This sentence should be in a cursive font. </p>
<p class="four"> This sentence should be in a fantasy font. </p>
<p class="five"> This sentence should be in a monospace font. </p>
</div>
</body>
</html>

View file

@ -0,0 +1,25 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: font-style</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#font-style"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-style-prop"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
.one {font-style: italic;}
.two {font-style: oblique;}
.three, i {font-style: normal;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-styling" title="15.4 Font styling: the 'font-style' property"/>
</head>
<body>
<p class="one">
This sentence should be in italics.
<span class="three">This sentence should be normal.</span>
</p>
<p class="two"> This sentence should be oblique. </p>
<p> <i>This sentence should be normal.</i> </p>
</body>
</html>

View file

@ -0,0 +1,23 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: font-variant</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#font-variant"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; }
.one {font-variant: small-caps;}
.two {font-variant: normal;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#small-caps" title="15.5 Small-caps: the 'font-variant' property"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-variant-prop" />
</head>
<body>
<p class="one">This sentence Should be In small Caps with Every other Word capitalized. </p>
<p class="one">
This sentence Should be In small Caps with Every other Word capitalized.
<span class="two">This sentence Should be In normal Mixed case (Every other Word capitalized).</span>
</p>
</body>
</html>

View file

@ -0,0 +1,57 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: font-weight</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#font-weight"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { margin: 0.5em 0; }
p, h4 { color: navy; }
.bold {font-weight: bold;}
.bolder {font-weight: bolder;}
b {font-weight: lighter;}
.normal { font-weight: normal; }
.one { font-weight: 100; }
.two { font-weight: 200; }
.three { font-weight: 300; }
.four { font-weight: 400; }
.five { font-weight: 500; }
.six { font-weight: 600; }
.seven { font-weight: 700; }
.eight { font-weight: 800; }
.nine { font-weight: 900; }
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-boldness" title="15.6 Font boldness: the 'font-weight' property"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-weight-prop" />
</head>
<body>
<p>This sentence is normal. </p>
<p class="normal">This sentence should also be normal.</p>
<p class="four">This sentence should also be normal.</p>
<p class="bolder"> This sentence should be bolder than normal. </p>
<p class="bold"> This sentence should be bold. </p>
<h4> Whatever this line looks like... </h4>
<h4 class="bolder"> ...this line should look bolder (or the same).</h4>
<p> <b>This sentence should be lighter than normal (or the same).</b> </p>
<p class="bold">
This sentence should be bold.
<span class="normal"> This sentence should be normal.</span>
</p>
<hr/>
<p>For the following nine lines, each must be bolder or the same as the previous:</p>
<p class="one">Line 1 (Lightest)</p>
<p class="two">Line 2</p>
<p class="three">Line 3</p>
<p class="four">Line 4 (Normal)</p>
<p class="five">Line 5</p>
<p class="six">Line 6</p>
<p class="seven">Line 7</p>
<p class="eight">Line 8</p>
<p class="nine">Line 9 (Boldest)</p>
</body>
</html>

View file

@ -0,0 +1,53 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: font-size</title>
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#font-size"/>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<style type="text/css"><![CDATA[
p { color: navy; margin: 10px; }
.one {font-size: medium;}
.two {font-size: larger;}
.three {font-size: smaller;}
.four {font-size: xx-small;}
.five {font-size: x-small;}
.six {font-size: small;}
.seven {font-size: large;}
.eight {font-size: x-large;}
.nine {font-size: xx-large;}
]]></style>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props" title="15.7 Font size: the 'font-size' property"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-size-prop" />
</head>
<body>
<p> This sentence should be normal. </p>
<p class="one"> This sentence should be the same. </p>
<p class="two"> This sentence should be larger than normal. </p>
<p class="three"> This sentence should be smaller than normal. </p>
<p class="four">
This sentence should be very small.
<span class="one">This sentence should be back to normal.</span>
</p>
<p class="five">
This sentence should be rather small.
<span class="one">This sentence should be back to normal.</span>
</p>
<p class="six">
This sentence should be small.
<span class="one">This sentence should be back to normal.</span>
</p>
<p class="seven">
This sentence should be large.
<span class="one">This sentence should be back to normal.</span>
</p>
<p class="eight">
This sentence should be rather large.
<span class="one">This sentence should be back to normal.</span>
</p>
<p class="nine">
This sentence should be very large.
<span class="one">This sentence should be back to normal.</span>
</p>
</body>
</html>

View file

@ -0,0 +1,31 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: blue;
height: 360px;
margin-left: 120px;
width: 60px;
}
]]>
</style>
</head>
<body>
<p>Test passes if there is an uninterrupted smooth column of blue.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,34 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: font-size</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-27 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#font-size"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props" title="15.7 Font size: the 'font-size' property"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-size-prop" />
<link rel="match" href="c526-font-sz-001-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
div { color: blue; font: 3.75em/1 Ahem; margin: 0 2em; }
.a {font-size: 0.625in;}
.b {font-size: 1.5875cm;}
.c {font-size: 15.875mm;}
.d {font-size: 45pt;}
.e {font-size: 3.75pc;}
.h {font-size: 60px;}
]]></style>
</head>
<body>
<p>Test passes if there is an uninterrupted smooth column of blue.</p>
<div class="a"> x </div>
<div class="b"> x </div>
<div class="c"> x </div>
<div class="d"> x </div>
<div class="e"> x </div>
<div class="h"> x </div>
</body>
</html>

View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: blue;
height: 120px;
width: 40px;
}
]]>
</style>
</head>
<body>
<p>Test passes if there is a short uninterrupted smooth column of blue.</p>
<div></div>
</body>
</html>

View file

@ -0,0 +1,29 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Test: font-size</title>
<link rel="author" title="CSS1 Test Suite Contributors" href="http://www.w3.org/Style/CSS/Test/CSS1/current/tsack.html"/>
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-06-27 -->
<link rel="help" href="http://www.w3.org/TR/REC-CSS1#font-size"/>
<link rel="help" href="http://www.w3.org/TR/CSS21/fonts.html#font-size-props" title="15.7 Font size: the 'font-size' property"/>
<link rel="help" href="http://www.w3.org/TR/css-fonts-3/#font-size-prop" />
<link rel="match" href="c526-font-sz-002-ref.xht" />
<meta name="flags" content="ahem" />
<style type="text/css"><![CDATA[
.ahem { font: 1.25em/1 Ahem; color: blue; }
.f {font-size: 2em;}
.g {font-size: 2.5ex;}
.i {font-size: 200%;}
]]></style>
</head>
<body>
<p>Test passes if there is a short uninterrupted smooth column of blue.</p>
<div class="ahem">
<div class="f"> x </div>
<div class="g"> x </div>
<div class="i"> x </div>
</div>
</body>
</html>

View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css"><![CDATA[
div
{
background-color: navy;
height: 60px;
margin: 10px 30px;
width: 60px;
}
]]>
</style>
</head>
<body>
<p>Test passes if the 2 blue navy squares have the <strong>same size</strong>.</p>
<div></div>
<div></div>
</body>
</html>

Some files were not shown because too many files have changed in this diff Show more