mirror of
https://github.com/servo/servo.git
synced 2025-08-13 09:25:32 +01:00
Update web-platform-tests to revision 58eb04cecbbec2e18531ab440225e38944a9c444
This commit is contained in:
Josh Matthews
Anthony Ramine
parent
25e8bf69e6
commit
665817d2a6
35333 changed files with 1818077 additions and 16036 deletions
|
|
@ -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[
|
||||
div
|
||||
{
|
||||
text-align: center;
|
||||
width: 2in;
|
||||
}
|
||||
|
||||
div + div
|
||||
{
|
||||
background-color: blue;
|
||||
height: 1em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if "Filler Text" is centered above the blue stripe.</p>
|
||||
|
||||
<div>Filler Text</div>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Anonymous block box generation</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" />
|
||||
<link rel="match" href="anonymous-box-generation-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Block boxes with inline content followed by a block box generate an anonymous block box around the inline content." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 2in;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
text-align: center;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: blue;
|
||||
height: 1em;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if "Filler Text" is centered above the blue stripe.</p>
|
||||
<div id="div1">
|
||||
Filler Text
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!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
|
||||
{
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#blue {background-color: blue;}
|
||||
|
||||
div#orange {background-color: orange}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 squares have the <strong>same size</strong>.</p>
|
||||
|
||||
<div id="blue"></div>
|
||||
|
||||
<div id="orange"></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Anonymous box property inheritance</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" />
|
||||
<link rel="match" href="anonymous-boxes-inheritance-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="Anonymous boxes inherit property values from their non-anonymous box." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
color: blue;
|
||||
font: 100px/1 Ahem;
|
||||
}
|
||||
div div
|
||||
{
|
||||
color: orange;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 squares have the <strong>same size</strong>.</p>
|
||||
<div>
|
||||
X
|
||||
<div>X</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: White space does not generate an anonymous inline box</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous" />
|
||||
<link rel="match" href="../reference/ref-if-there-is-no-red.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="White space is collapsed according to the 'white-space' property and does not generate an anonymous inline box." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: red;
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
<div> </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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[
|
||||
td
|
||||
{
|
||||
border: black solid;
|
||||
color: black;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.lime {background-color: lime;}
|
||||
.green {background-color: green;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>The following two boxes should look identical.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="lime">Line 1</div>
|
||||
<div class="green">Line 2</div>
|
||||
<div class="lime">Line 3</div>
|
||||
</td>
|
||||
<td>
|
||||
<div class="lime">Line 1</div>
|
||||
<div class="green">Line 2</div>
|
||||
<div class="lime">Line 3</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: CSS: Blocks Within Inlines - Basic</title>
|
||||
<link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/>
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/001.xml" type="application/xhtml+xml"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" />
|
||||
<link rel="match" href="block-in-inline-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content=""/>
|
||||
<meta name="assert" content="When an inline box contains a block box,
|
||||
the inline box is broken around the block."/>
|
||||
<style type="text/css">
|
||||
td { border: solid black; padding: 0; background: red; color: red; }
|
||||
.inline { display: inline; background: lime; color: black; }
|
||||
.block { display: block; background: green; }
|
||||
div { color: black; }
|
||||
.a, .c { background: lime; }
|
||||
.b { background: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The following two boxes should look identical.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline">Line 1<span class="block">Line 2</span>Line 3</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="a">Line 1</div>
|
||||
<div class="b">Line 2</div>
|
||||
<div class="c">Line 3</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: CSS: Blocks Within Inlines - Backgrounds</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<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-07-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" />
|
||||
<link rel="match" href="block-in-inline-001-ref.xht" />
|
||||
|
||||
<meta name="assert" content="When an inline box contains a block box,
|
||||
the inline box is broken around the box and its background is drawn
|
||||
only behind the inline's pieces, not behind the block."/>
|
||||
<meta name="flags" content=""/>
|
||||
<style type="text/css">
|
||||
td { border: solid black; color: black; padding: 0; background: green; }
|
||||
.inline { display: inline; background: lime; }
|
||||
.block { display: block; }
|
||||
.a, .c { background: lime; }
|
||||
.b { background: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The following two boxes should look identical.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<span class="inline">Line 1<span class="block">Line 2</span>Line 3</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="a">Line 1</div>
|
||||
<div class="b">Line 2</div>
|
||||
<div class="c">Line 3</div>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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>There should be no red.</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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 Test: Blocks within inlines: Simple</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-03-07 -->
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/003.html" type="text/html"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="block-in-inline-003-ref.xht" />
|
||||
|
||||
<meta name="assert" content="When an inline box contains a block box,
|
||||
the inline box is broken around the box and its pieces, if empty,
|
||||
will not show any background."/>
|
||||
<style type="text/css">
|
||||
.inline { background: red; color: red; display: inline; }
|
||||
.block { color: green; display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block">
|
||||
<div class="inline">
|
||||
<div class="block">
|
||||
There should be no red.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Blocks within inlines: Simple with :hover</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-03-07 -->
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/004.html" type="text/html"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<meta name="flags" content="interact"/>
|
||||
<meta name="assert" content="A block that splits an inline still inherits
|
||||
from the inline, even in dynamic cases."/>
|
||||
<style type="text/css">
|
||||
.inline { color: blue; display: inline; }
|
||||
.block { display: block; }
|
||||
.inline:hover { color: green; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="block">
|
||||
<div class="inline">
|
||||
The text of all 3 sentences should become green when you hover over any text.
|
||||
<div class="block">
|
||||
The text of all 3 sentences should become green when you hover over any text.
|
||||
</div>
|
||||
The text of all 3 sentences should become green when you hover over any text.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Blocks within inlines: Simple with dynamic class changes</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-03-07 -->
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/005.html" type="text/html"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<meta name="flags" content="dom interact"/>
|
||||
<style type="text/css">
|
||||
body { color: blue; }
|
||||
.inline { display: inline; }
|
||||
.block { display: block; }
|
||||
</style>
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
|
||||
<script type="text/javascript">
|
||||
function clicked() {
|
||||
document.getElementById('test').className = document.getElementById('test').className == 'inline' ? 'block' : 'inline';
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onclick="clicked()">
|
||||
<div class="block">
|
||||
<div class="inline">
|
||||
This text should all collapse
|
||||
<div class="block" id="test">
|
||||
into one line of text when
|
||||
</div>
|
||||
you click on the text.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Blocks within inlines: Simple with dynamic class changes</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-03-07 -->
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/006.html" type="text/html"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<meta name="flags" content="dom interact"/>
|
||||
<style type="text/css">
|
||||
body { color: blue; }
|
||||
.inline { display: inline; }
|
||||
.block { display: block; }
|
||||
</style>
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript"/>
|
||||
<script type="text/javascript">
|
||||
function clicked() {
|
||||
document.getElementById('test').className = document.getElementById('test').className == 'inline' ? 'block' : 'inline';
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onclick="clicked()">
|
||||
<div class="block">
|
||||
<div class="inline">
|
||||
This text should split into
|
||||
<div class="inline" id="test">
|
||||
three separate lines when
|
||||
</div>
|
||||
you click on the text.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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[
|
||||
td {font: 1em/1 monospace;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>The pairs of letters below should be adjacent.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<pre>A
|
||||
|
||||
B
|
||||
|
||||
C
|
||||
|
||||
D
|
||||
|
||||
E
|
||||
|
||||
F
|
||||
|
||||
G</pre>
|
||||
</td>
|
||||
|
||||
<td>
|
||||
<pre>A
|
||||
|
||||
B
|
||||
|
||||
C
|
||||
|
||||
D
|
||||
|
||||
E
|
||||
|
||||
F
|
||||
|
||||
G</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,62 @@
|
|||
<!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 Test: Blocks within inlines: Simple</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-03-07 -->
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/007.html" type="text/html"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="block-in-inline-007-ref.xht" />
|
||||
|
||||
<meta name="assert" content="When an inline box contains block boxes,
|
||||
the inline box is broken around the blocks." />
|
||||
<style type="text/css">
|
||||
.inline { display: inline; }
|
||||
.block { display: block; margin: 1em 0; }
|
||||
td { font: 1em/1 monospace; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The pairs of letters below should be adjacent.</p>
|
||||
<table>
|
||||
<tr>
|
||||
<td>
|
||||
<div class="block">
|
||||
<div class="inline">
|
||||
A
|
||||
<div class="block">
|
||||
B
|
||||
</div>
|
||||
<div class="block">
|
||||
C
|
||||
</div>
|
||||
D
|
||||
<div class="block">
|
||||
E
|
||||
</div>
|
||||
F
|
||||
<div class="block">
|
||||
G
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
<pre>A
|
||||
|
||||
B
|
||||
|
||||
C
|
||||
|
||||
D
|
||||
|
||||
E
|
||||
|
||||
F
|
||||
|
||||
G</pre>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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[
|
||||
body {padding-bottom: 5em;}
|
||||
|
||||
div
|
||||
{
|
||||
background-color: green;
|
||||
height: 5em;
|
||||
width: 5em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>There should be no red.</p>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Blocks within inlines: Relative positioning</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-03-12 -->
|
||||
<link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/ib/008.html" type="text/html"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="block-in-inline-008-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<style type="text/css">
|
||||
.inline { display: inline; }
|
||||
.block { display: block; }
|
||||
.control { background: red; height: 5em; width: 5em; }
|
||||
.test { background: green; height: 5em; width: 5em; position: relative; top: -5em; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>There should be no red.</p>
|
||||
<div class="control"></div>
|
||||
<div>
|
||||
<div class="inline">
|
||||
<div class="block test"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,56 @@
|
|||
<!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[
|
||||
.container {
|
||||
margin: 1em;
|
||||
font: 20px/1 Ahem;
|
||||
border: solid silver;
|
||||
width: 4em;
|
||||
color: aqua;
|
||||
background: fuchsia;
|
||||
}
|
||||
|
||||
.controlC {
|
||||
color: orange;
|
||||
background: orange;
|
||||
width: 2em;
|
||||
margin-left: -2em;
|
||||
border-left: 2em solid blue
|
||||
}
|
||||
|
||||
.controlB {
|
||||
color: yellow;
|
||||
}
|
||||
.controlC {
|
||||
margin-left: 0;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>The patterns in the 2 silver boxes must be <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
A <span class="controlB">B</span>
|
||||
<div class="controlC">C</div>
|
||||
A<span class="controlB">B</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
A <span class="controlB">B</span>
|
||||
<div class="controlC">C</div>
|
||||
A<span class="controlB">B</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: Relative-positioning Inline Containing Block</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" />
|
||||
<link rel="match" href="block-in-inline-relpos-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="ahem" />
|
||||
<meta name="assert" content="When such an inline box is affected by relative positioning, the relative positioning also affects the block-level box contained in the inline box." />
|
||||
<style type="text/css"><![CDATA[
|
||||
.container {
|
||||
margin: 1em;
|
||||
font: 20px/1 Ahem;
|
||||
border: solid silver;
|
||||
width: 4em;
|
||||
color: aqua;
|
||||
background: fuchsia;
|
||||
}
|
||||
.relpos {
|
||||
position: relative;
|
||||
color: yellow;
|
||||
left: 2em;
|
||||
display: inline;
|
||||
}
|
||||
.block, .controlC {
|
||||
color: orange;
|
||||
background: orange;
|
||||
width: 2em;
|
||||
margin-left: -2em;
|
||||
border-left: 2em solid blue
|
||||
}
|
||||
|
||||
.controlB {
|
||||
color: yellow;
|
||||
}
|
||||
.controlC {
|
||||
margin-left: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The patterns in the 2 silver boxes must be <strong>identical</strong>.</p>
|
||||
<div class="container">
|
||||
A<div class="relpos">B
|
||||
<div class="block">C</div>
|
||||
B</div>A
|
||||
</div>
|
||||
<div class="container">
|
||||
A <span class="controlB">B</span>
|
||||
<div class="controlC">C</div>
|
||||
A<span class="controlB">B</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
<!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: Relative-positioning Inline Containing Blocks and Floats</title>
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level"/>
|
||||
<link rel="match" href="block-in-inline-relpos-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="ahem"/>
|
||||
<meta name="assert" content="When such an inline box is affected by relative positioning, the relative positioning also affects the block-level box contained in the inline box."/>
|
||||
<style type="text/css"><![CDATA[
|
||||
.container {
|
||||
margin: 1em;
|
||||
font: 20px/1 Ahem;
|
||||
border: solid silver;
|
||||
width: 4em;
|
||||
color: aqua;
|
||||
background: fuchsia;
|
||||
}
|
||||
.relpos {
|
||||
position: relative;
|
||||
display: inline;
|
||||
color: yellow;
|
||||
left: 2em;
|
||||
}
|
||||
.block, .controlC {
|
||||
color: orange;
|
||||
background: orange;
|
||||
width: 2em;
|
||||
border-left: 2em solid blue;
|
||||
}
|
||||
.block {
|
||||
margin-left: -2em;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.float {
|
||||
width: 2em;
|
||||
height: 10px;
|
||||
}
|
||||
.float.L {
|
||||
float: left;
|
||||
background: orange;
|
||||
color: orange;
|
||||
}
|
||||
.float.R {
|
||||
float: right;
|
||||
background: blue;
|
||||
color: blue;
|
||||
/* Back position to fill the hole left by relpos'ing .float.L */
|
||||
position: relative;
|
||||
right: 4em;
|
||||
}
|
||||
|
||||
.controlB {
|
||||
color: yellow;
|
||||
}
|
||||
.controlC {
|
||||
margin-left: 0;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
<body>
|
||||
<p>The patterns in the 2 silver boxes must be <strong>identical</strong>.</p>
|
||||
<div class="container">
|
||||
A<div class="relpos">B
|
||||
<div class="block"></div>
|
||||
<div class="float L"></div>
|
||||
<div class="float R"></div>
|
||||
<div></div>
|
||||
B</div>A
|
||||
</div>
|
||||
<div class="container">
|
||||
A <span class="controlB">B</span>
|
||||
<div class="controlC">C</div>
|
||||
A<span class="controlB">B</span>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!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#block
|
||||
{
|
||||
background-color: blue;
|
||||
width: 1in;
|
||||
}
|
||||
|
||||
div#yellow-cell
|
||||
{
|
||||
background-color: yellow;
|
||||
display: table-cell;
|
||||
width: 0.5in;
|
||||
}
|
||||
|
||||
div#orange-cell
|
||||
{
|
||||
background-color: orange;
|
||||
display: table-cell;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the orange stripe is below the blue stripe and the yellow stripe is on the left-hand side of the orange stripe.</p>
|
||||
|
||||
<div id="block">Block box</div>
|
||||
|
||||
<div id="yellow-cell">Float</div><div id="orange-cell">Inline box</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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 Test: Block-level elements generate principal block boxes with block boxes</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" />
|
||||
<link rel="match" href="box-generation-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Block boxes can reside within a principal block box established by a block-level element; inline boxes are outside of the principal block box." />
|
||||
<style type="text/css">
|
||||
div div
|
||||
{
|
||||
background: blue;
|
||||
width: 1in;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
background: orange;
|
||||
}
|
||||
#span2
|
||||
{
|
||||
background: yellow;
|
||||
float: left;
|
||||
width: 0.5in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange stripe is below the blue stripe and the yellow stripe is on the left-hand side of the orange stripe.</p>
|
||||
<div id="div1">
|
||||
<div>Block box</div>
|
||||
<span id="span1">Inline box</span>
|
||||
<span id="span2">Float</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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#orange-cell
|
||||
{
|
||||
background-color: orange;
|
||||
display: table-cell;
|
||||
width: 0.5in;
|
||||
}
|
||||
|
||||
div#yellow-cell
|
||||
{
|
||||
background-color: blue;
|
||||
display: table-cell;
|
||||
}
|
||||
|
||||
div#block {background-color: yellow;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the orange stripe is on the left-hand side of the blue stripe and both stripes are above the yellow bar.</p>
|
||||
|
||||
<div id="orange-cell">Float</div><div id="yellow-cell">Inline box</div>
|
||||
|
||||
<div id="block">Block box</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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 Test: Block-level elements generate principal block boxes with inline boxes</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" />
|
||||
<link rel="match" href="box-generation-002-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Inline boxes can reside within a principal block box established by a block-level element; block boxes are outside of the principal block box." />
|
||||
<style type="text/css">
|
||||
span
|
||||
{
|
||||
background: blue;
|
||||
}
|
||||
#div1
|
||||
{
|
||||
background: orange;
|
||||
float: left;
|
||||
width: 0.5in;
|
||||
}
|
||||
#div2
|
||||
{
|
||||
background: yellow;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange stripe is on the left-hand side of the blue stripe and both stripes are above the yellow bar.</p>
|
||||
<div>
|
||||
<span>Inline box</span>
|
||||
<div id="div1">Float</div>
|
||||
<div id="div2">Block box</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Additional boxes generated outside the principal block box</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Some block-level elements (i.e. 'list-item' elements) can generate additional boxes outside the principal block box." />
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
margin-left: 50px;
|
||||
}
|
||||
div
|
||||
{
|
||||
background: blue;
|
||||
display: list-item;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a marker to the left of the "Filler Text" and the marker does not have a blue background.</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Containing block for relative positioned elements is nearest block-level ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element's position is 'relative', the containing block is formed by the content edge of the nearest block-level ancestor box." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
background: red;
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: green;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="div1">
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Containing block for relative positioned elements is nearest table cell ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element's position is 'relative', the containing block is formed by the content edge of the nearest table cell ancestor box." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: red;
|
||||
display: table-cell;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#cell div
|
||||
{
|
||||
background: green;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="table">
|
||||
<div id="row">
|
||||
<div id="cell">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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 Test: Containing block for relative positioned elements is nearest inline-block ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element's position is 'relative', the containing block is formed by the content edge of the nearest inline-block ancestor box." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
background: red;
|
||||
display: inline-block;
|
||||
height: 60px;
|
||||
padding: 20px;
|
||||
width: 60px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: green;
|
||||
height: 100px;
|
||||
left: -20px;
|
||||
position: relative;
|
||||
top: -20px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="div1">
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Containing block for static positioned elements is nearest block-level ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element's position is 'static', the containing block is formed by the content edge of the nearest block-level ancestor box." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
background: red;
|
||||
display: block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: green;
|
||||
height: 100%;
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="div1">
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Containing block for static positioned elements is nearest table cell ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element's position is 'static', the containing block is formed by the content edge of the nearest table cell ancestor box." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
#cell
|
||||
{
|
||||
background: red;
|
||||
display: table-cell;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#cell div
|
||||
{
|
||||
background: green;
|
||||
height: 100%;
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="table">
|
||||
<div id="row">
|
||||
<div id="cell">
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Containing block for static positioned elements is nearest inline-block ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element's position is 'static', the containing block is formed by the content edge of the nearest inline-block ancestor box." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
background: red;
|
||||
display: inline-block;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: green;
|
||||
height: 100%;
|
||||
position: static;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="div1">
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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[
|
||||
img
|
||||
{
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 0px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is a filled blue square in the upper-right corner of the page.<img src="support/blue15x15.png" width="96" height="96" alt="Image download support must be enabled" /></p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Initial containing block for fixed positioned elements</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-007-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The containing block is established by the viewport when an element uses fixed positioning." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
position: relative;
|
||||
bottom: 0;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled blue square in the upper-right corner of the page.</p>
|
||||
<div id="div1">
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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: black solid medium;
|
||||
height: 196px;
|
||||
margin-left: 50px;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
width: 196px;
|
||||
}
|
||||
|
||||
img
|
||||
{
|
||||
position: relative;
|
||||
left: 100px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square.</p>
|
||||
|
||||
<div><img src="support/blue15x15.png" width="96" height="96" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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 Test: Containing block for absolute positioned elements is nearest positioned (absolute) ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-008-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element has 'position: absolute', the containing block is established by the nearest positioned ancestor." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
border: solid black;
|
||||
margin: 50px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
div div
|
||||
{
|
||||
height: 1in;
|
||||
width: 1in;
|
||||
}
|
||||
#div2
|
||||
{
|
||||
margin: 50px;
|
||||
}
|
||||
#div3
|
||||
{
|
||||
background: blue;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square.</p>
|
||||
<div id="div1">
|
||||
<div id="div2">
|
||||
<div id="div3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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
|
||||
{
|
||||
border: black solid medium;
|
||||
height: 196px;
|
||||
margin: 50px;
|
||||
text-align: right;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow wide black rectangle.</p>
|
||||
|
||||
<div><img src="support/blue15x15.png" width="96" height="96" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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 Test: Containing block for absolute positioned elements is nearest positioned (relative) ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-04 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-009-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element has 'position: absolute', the containing block is established by the nearest positioned ancestor." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
border: solid black;
|
||||
margin: 50px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
}
|
||||
div div
|
||||
{
|
||||
height: 1in;
|
||||
width: 1in;
|
||||
}
|
||||
#div2
|
||||
{
|
||||
margin: 50px;
|
||||
}
|
||||
#div3
|
||||
{
|
||||
background: blue;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow wide black rectangle.</p>
|
||||
<div id="div1">
|
||||
<div id="div2">
|
||||
<div id="div3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,46 @@
|
|||
<!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 Test: Containing block for absolute positioned elements is nearest positioned (fixed) ancestor</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-07 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-008-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the element has 'position: absolute', the containing block is established by the nearest positioned ancestor." />
|
||||
<style type="text/css">
|
||||
#div1
|
||||
{
|
||||
border: solid black;
|
||||
margin: 50px;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
}
|
||||
div div
|
||||
{
|
||||
height: 1in;
|
||||
width: 1in;
|
||||
}
|
||||
#div2
|
||||
{
|
||||
margin: 50px;
|
||||
}
|
||||
#div3
|
||||
{
|
||||
background: blue;
|
||||
right: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled blue square is in the <strong>upper-right corner</strong> of an hollow black square.</p>
|
||||
<div id="div1">
|
||||
<div id="div2">
|
||||
<div id="div3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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 Test: Containing Blocks - Inline-level elements position based on left-to-right direction and parent element is relative</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the ancestor is inline-level, positioned absolute, and direction is left-to-right, the top/left of the containing block determines the top/left padding edges of the first box generated by the ancestor." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
padding: 1in;
|
||||
position: relative;
|
||||
width: 0;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
direction: ltr;
|
||||
}
|
||||
span span
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
position: absolute;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the filled blue square is in the <strong>lower-right corner</strong> of the hollow black square.</p>
|
||||
<div>
|
||||
<span id="span1">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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 Test: Containing Blocks - Inline-level elements position based on left-to-right direction and parent element is absolute</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the ancestor is inline-level, positioned absolute, and direction is left-to-right, the top/left of the containing block determines the top/left padding edges of the first box generated by the ancestor." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
padding: 1in;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
direction: ltr;
|
||||
}
|
||||
span span
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
position: absolute;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the filled blue square is in the <strong>lower-right corner</strong> of the hollow black square.</p>
|
||||
<div>
|
||||
<span id="span1">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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 Test: Containing Blocks - Inline-level elements position based on left-to-right direction and parent element is fixed</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If the ancestor is inline-level, positioned absolute, and direction is left-to-right, the top/left of the containing block determines the top/left padding edges of the first box generated by the ancestor." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
padding: 1in;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
direction: ltr;
|
||||
}
|
||||
span span
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
position: absolute;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the filled blue square is in the <strong>lower-right corner</strong> of the hollow black square.</p>
|
||||
<div>
|
||||
<span id="span1">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!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 Test: Containing Blocks - Block-level elements position based on left-to-right direction and parent element is relative</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="author" title="Alan Gresley" href="alan{at}css-class.com" />
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<meta name="flags" content="dom interact" />
|
||||
<meta name="assert" content="The containing block of an absolutely positioned block-level element is formed by the padding edge of its nearest (closest) positioned ancestor element." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid silver;
|
||||
direction: ltr;
|
||||
margin-bottom: 20px;
|
||||
padding: 100px;
|
||||
width: 450px;
|
||||
}
|
||||
#first-box, #last-box
|
||||
{
|
||||
color: silver;
|
||||
}
|
||||
.position
|
||||
{
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
}
|
||||
#tl-control
|
||||
{
|
||||
border-top: 30px solid red;
|
||||
margin-left: -50px;
|
||||
margin-right: 20px;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
#br-control
|
||||
{
|
||||
border-bottom: 30px solid red;
|
||||
margin-left: 20px;
|
||||
margin-right: -50px;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
.top-left
|
||||
{
|
||||
background: green;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.bottom-right
|
||||
{
|
||||
background: green;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border: 5px solid silver;
|
||||
padding: 50px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div>
|
||||
<span id="test">
|
||||
<span id="first-box"><span id="tl-control"></span>Filler Text Filler Text Filler Text Filler Text</span>
|
||||
<span class="position bottom-right">BR</span>
|
||||
<span class="position top-left">TL</span>
|
||||
<span id="last-box">Filler Text Filler Text Filler Text Filler Text<span id="br-control"></span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!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 Test: Containing Blocks - Block-level elements position based on right-to-left direction and parent element is relative</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="author" title="Alan Gresley" href="alan{at}css-class.com" />
|
||||
<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<meta name="flags" content="dom interact" />
|
||||
<meta name="assert" content="The containing block of an absolutely positioned block-level element is formed by the padding edge of its nearest (closest) positioned ancestor element." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid silver;
|
||||
direction: rtl;
|
||||
margin-bottom: 20px;
|
||||
padding: 100px;
|
||||
width: 450px;
|
||||
}
|
||||
#first-box, #last-box
|
||||
{
|
||||
color: silver;
|
||||
}
|
||||
.position
|
||||
{
|
||||
height: 30px;
|
||||
position: absolute;
|
||||
width: 30px;
|
||||
}
|
||||
#tr-control
|
||||
{
|
||||
border-top: 30px solid red;
|
||||
margin-left: 20px;
|
||||
margin-right: -50px;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
#bl-control
|
||||
{
|
||||
border-bottom: 30px solid red;
|
||||
margin-left: -50px;
|
||||
margin-right: 20px;
|
||||
padding: 20px 15px;
|
||||
}
|
||||
.top-right
|
||||
{
|
||||
background: green;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
.bottom-left
|
||||
{
|
||||
background: green;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border: 5px solid silver;
|
||||
padding: 50px;
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div>
|
||||
<span id="test">
|
||||
<span id="first-box"><span id="tr-control"></span><br /></span>
|
||||
<span class="position bottom-left">BL</span>
|
||||
<span class="position top-right">TR</span>
|
||||
<span id="last-box"><span id="bl-control"></span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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: black solid medium;
|
||||
height: 96px;
|
||||
padding-top: 96px;
|
||||
text-align: right;
|
||||
width: 192px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a filled blue square is in the <strong>lower-right corner</strong> of an hollow black square.</p>
|
||||
|
||||
<div><img src="support/blue15x15.png" width="96" height="96" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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 Test: Containing Blocks - Block-level elements position based on left-to-right direction and parent element is absolute</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-019-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="When the nearest (closest within document containment hierarchy) positioned ancestor of an absolutely positioned element is a block-level element, then the containing block of such absolutely positioned element is formed by the padding edge of such nearest positioned ancestor." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
padding: 1in;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/*
|
||||
The span#span1 element determines, conditions (§10.3.7 and
|
||||
§10.6.4) the 'top: auto' and 'left: auto' coordinates while the
|
||||
wrapping div's padding box forms the containing block
|
||||
geometry/area.
|
||||
*/
|
||||
|
||||
span span
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled blue square is in the <strong>lower-right corner</strong> of an hollow black square.</p>
|
||||
<div>
|
||||
<span id="span1">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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
|
||||
{
|
||||
border: black solid medium;
|
||||
height: 96px;
|
||||
padding-top: 96px;
|
||||
width: 192px;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a filled blue square is in the <strong>lower-left corner</strong> of an hollow black square.</p>
|
||||
|
||||
<div><img src="support/blue15x15.png" width="96" height="96" alt="Image download support must be enabled" /></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,52 @@
|
|||
<!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 Test: Containing Blocks - Block-level elements position based on right-to-left direction and parent element is absolute</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-10-10 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-020-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="When the nearest (closest within document containment hierarchy) positioned ancestor of an absolutely positioned element is a block-level element, then the containing block of such absolutely positioned element is formed by the padding edge of such nearest (closest) positioned ancestor." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
padding: 1in;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
direction: rtl;
|
||||
}
|
||||
span span
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 1in;
|
||||
}
|
||||
/*
|
||||
The span#span1 element determines, conditions (§10.3.7 and §10.6.4)
|
||||
the 'top: auto' and 'left: auto' coordinates while the wrapping
|
||||
div's padding box forms the containing block geometry/area.
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled blue square is in the <strong>lower-left corner</strong> of an hollow black square.</p>
|
||||
<div>
|
||||
<span id="span1">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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 Test: Containing Blocks - Block-level elements position based on left-to-right direction and parent element is fixed</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-07-01 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-019-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="When the nearest (closest within document containment hierarchy) positioned ancestor of an absolutely positioned element is a block-level element, then the containing block of such absolutely positioned element is formed by the padding edge of such nearest positioned ancestor." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
padding: 1in;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
/*
|
||||
The span#span1 element determines, conditions (§10.3.7 and
|
||||
§10.6.4) the 'top: auto' and 'left: auto' coordinates while the
|
||||
wrapping div's padding box forms the containing block
|
||||
geometry/area.
|
||||
*/
|
||||
|
||||
span span
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled blue square is in the <strong>lower-right corner</strong> of an hollow black square.</p>
|
||||
<div>
|
||||
<span id="span1">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!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 Test: Containing Blocks - Block-level elements position based on right-to-left direction and parent element is fixed</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-10-10 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-020-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="When the nearest (closest within document containment hierarchy) positioned ancestor of an absolutely positioned element is a block-level element, then the containing block of such absolutely positioned element is formed by the padding edge of such nearest positioned ancestor." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
padding: 1in;
|
||||
position: fixed;
|
||||
width: 0;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
direction: rtl;
|
||||
}
|
||||
|
||||
/*
|
||||
The span#span1 element determines, conditions (§10.3.7 and
|
||||
§10.6.4) the 'top: auto' and 'left: auto' coordinates while the
|
||||
wrapping div's padding box forms the containing block
|
||||
geometry/area.
|
||||
*/
|
||||
|
||||
span span
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
left: auto;
|
||||
position: absolute;
|
||||
top: auto;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a filled blue square is in the <strong>lower-left corner</strong> of an hollow black square.</p>
|
||||
<div>
|
||||
<span id="span1">
|
||||
<span></span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!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[
|
||||
html, body {height: 100%;}
|
||||
|
||||
body
|
||||
{
|
||||
background: white url("support/blue96x96.png") no-repeat left bottom;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
p
|
||||
{
|
||||
margin: 0px;
|
||||
padding: 1em 0.5em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a blue square is at the <strong>bottom-left corner</strong> of the page.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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 Test: Containing Blocks - Fall back to Initial containing block</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-05-16 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<link rel="match" href="containing-block-023-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="When there are no positioned ancestors, then the initial containing block is used." />
|
||||
<style type="text/css">
|
||||
body {margin: 8px;}
|
||||
|
||||
#div1, #div2
|
||||
{
|
||||
margin: 1in;
|
||||
}
|
||||
#div3
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a blue square is at the <strong>bottom-left corner</strong> of the page.</p>
|
||||
<div id="div1">
|
||||
<div id="div2">
|
||||
<div id="div3"></div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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 Test: Containing block and absolutely positioned element in paged media</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<meta name="flags" content="paged" />
|
||||
<meta name="assert" content="An absolutely positioned element ignores page breaks in paged media." />
|
||||
<style type="text/css">
|
||||
@media print
|
||||
{
|
||||
#print
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
p
|
||||
{
|
||||
margin-top: 1.1in;
|
||||
page-break-after: always;
|
||||
}
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
height: 1in;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 1in;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="print">PREREQUISITE: Switch to paged media view.</p>
|
||||
<p>Test passes if there is a black box above.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Containing block and absolutely positioned element in paged media positioned off first page</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details" />
|
||||
<meta name="flags" content="may paged" />
|
||||
<meta name="assert" content="An absolutely positioned element positioned beyond the boundaries of the page being laid out can be omitted, rendered on the current page or on a following page." />
|
||||
<style type="text/css">
|
||||
@media print
|
||||
{
|
||||
#print
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
div
|
||||
{
|
||||
border: solid black;
|
||||
height: 1in;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 50in;
|
||||
width: 1in;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p id="print">PREREQUISITE: Switch to paged media view.</p>
|
||||
<p>Test passes if there is no box below, or there is a box on page 1, or there is a box on a following page.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Element position based on containing block</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#containing-block" />
|
||||
<link rel="match" href="../reference/ref-filled-green-100px-square.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="An element's position is based on the position of its containing block." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: green;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!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-spacing: 0px;}
|
||||
|
||||
td
|
||||
{
|
||||
line-height: 5px;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
img {vertical-align: bottom;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the orange rectangle is within or overflows to the right and outside of the blue square.</p>
|
||||
|
||||
<table>
|
||||
<tr><td><img src="support/blue15x15.png" width="96" height="5" alt="Image download support must be enabled" /></td></tr>
|
||||
|
||||
<tr><td><img src="support/swatch-orange.png" width="192" height="53" alt="Image download support must be enabled" /></td></tr>
|
||||
|
||||
<tr><td><img src="support/blue15x15.png" width="96" height="43" alt="Image download support must be enabled" /></td></tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!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 Test: Content is not confined by containing blocks</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-10 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#containing-block" />
|
||||
<link rel="match" href="containing-block-027-ref.xht" />
|
||||
|
||||
<meta name="flags" content="may" />
|
||||
<meta name="assert" content="Content may overflow containing blocks." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
padding-top: 5px;
|
||||
width: 1in;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: orange;
|
||||
height: 0.5in;
|
||||
width: 2in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the orange rectangle is within or overflows to the right and outside of the blue square.</p>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!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
|
||||
{
|
||||
background-color: blue;
|
||||
border-spacing: 0px;
|
||||
height: 96px;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
td
|
||||
{
|
||||
padding: 0px;
|
||||
text-align: right;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
|
||||
img {vertical-align: bottom;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a small orange square is in the bottom right corner of the blue square.</p>
|
||||
|
||||
<table>
|
||||
<tr><td><img src="support/swatch-orange.png" width="24" height="24" alt="Image download support must be enabled" /></td></tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Principal block box establishes the containing block</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" />
|
||||
<link rel="match" href="containing-block-028-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Principal block boxes establish a containing block for descendant boxes." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
position: absolute;
|
||||
width: 1in;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: orange;
|
||||
bottom: 0;
|
||||
height: 0.25in;
|
||||
right: 0;
|
||||
width: 0.25in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a small orange square is in the bottom right corner of the blue square.</p>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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-spacing: 0px;
|
||||
height: 96px;
|
||||
table-layout: fixed;
|
||||
width: 96px;
|
||||
}
|
||||
|
||||
col#first-column {width: 72px;}
|
||||
|
||||
col#second-column {width: 24px;}
|
||||
|
||||
td
|
||||
{
|
||||
background-color: blue;
|
||||
padding: 0px;
|
||||
}
|
||||
|
||||
tr {height: 72px;}
|
||||
|
||||
tr#twenty-four {height: 24px;}
|
||||
|
||||
td#orange-dot
|
||||
{
|
||||
background-color: orange;
|
||||
vertical-align: top;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if a small orange square (with a black dot in its middle) is in the bottom right corner of the blue square.</p>
|
||||
|
||||
<table>
|
||||
<col id="first-column"></col><col id="second-column"></col>
|
||||
<tr><td></td><td></td></tr>
|
||||
<tr id="twenty-four"><td></td><td id="orange-dot">.</td></tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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 Test: Principal block box establishes the containing block for generated content</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#block-boxes" />
|
||||
<link rel="match" href="containing-block-029-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Principal block boxes establish a containing block for generated content." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background: blue;
|
||||
height: 1in;
|
||||
position: absolute;
|
||||
width: 1in;
|
||||
}
|
||||
div div:before
|
||||
{
|
||||
content: ".";
|
||||
background: orange;
|
||||
bottom: 0;
|
||||
display: block;
|
||||
height: 0.25in;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 0.25in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if a small orange square (with a black dot in its middle) is in the bottom right corner of the blue square.</p>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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[
|
||||
table {border-spacing: 0px;}
|
||||
|
||||
td {padding: 0px;}
|
||||
|
||||
img {vertical-align: top;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the orange rectangle is within or overflows below and outside of the blue square.</p>
|
||||
|
||||
<table>
|
||||
<tr><td><img src="support/blue15x15.png" width="5" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="48" height="192" alt="Image download support must be enabled" /><img src="support/blue15x15.png" width="48" height="96" alt="Image download support must be enabled" /></td></tr>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!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 Test: Content is not confined by containing blocks</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#containing-block" />
|
||||
<link rel="match" href="containing-block-030-ref.xht" />
|
||||
|
||||
<meta content="may" name="flags" />
|
||||
<meta content="Content may overflow containing blocks." name="assert" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div#containing-block
|
||||
{
|
||||
background-color: blue;
|
||||
height: 1in;
|
||||
padding-left: 5px;
|
||||
width: 1in;
|
||||
}
|
||||
|
||||
div#sole-child-with-taller-content
|
||||
{
|
||||
background-color: orange;
|
||||
height: 2in;
|
||||
width: 0.5in;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the orange rectangle is within or overflows below and outside of the blue square.</p>
|
||||
|
||||
<div id="containing-block">
|
||||
<div id="sole-child-with-taller-content"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
]]></style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">Several inline elements are in this sentence.</div>
|
||||
|
||||
<div class="container">Several inline elements are in this sentence.</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
<!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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete a block-level element inside a block whose children are otherwise all inline at its beginning</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-block-in-inlines-beginning-001-ref.xht" />
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteABlockAtBeginning()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteABlockAtBeginning();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<div id="target-node-to-delete">Block to remove</div>
|
||||
<span>Several</span> <span>inline elements</span> are <span>in this</span> sentence.</div>
|
||||
|
||||
<div class="container">Several inline elements are in this sentence.</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete a block-level element inside a block whose children are otherwise all inline at its end</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-block-in-inlines-beginning-001-ref.xht" />
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteABlockAtEnd()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteABlockAtEnd();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<span>Several</span> <span>inline elements</span> are
|
||||
<span>in this</span> sentence.
|
||||
<div id="target-node-to-delete">Block to remove</div>
|
||||
</div>
|
||||
|
||||
<div class="container">Several inline elements are in this sentence.</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,59 @@
|
|||
<!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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete a block-level element inside a block whose children are otherwise all inline at its middle</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-block-in-inlines-beginning-001-ref.xht" />
|
||||
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
margin: 1em 0em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteABlockAtMiddle()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteABlockAtMiddle();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<span>Several</span> <span>inline elements</span> are
|
||||
<div id="target-node-to-delete">Block to remove</div>
|
||||
<span>in this</span> sentence.</div>
|
||||
|
||||
<div class="container">Several inline elements are in this sentence.</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div > div {margin: 1em 0em;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
Anonymous second block
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
Anonymous second block
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete an inline-level element inside a block whose children are otherwise all block-level, located at its beginning</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-inline-in-blocks-beginning-001-ref.xht" />
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div > div {margin: 1em 0em;}
|
||||
|
||||
span#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteAnInlineAtBeginning()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteAnInlineAtBeginning();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<span id="target-node-to-delete">Span to remove</span>
|
||||
<div>First block</div>
|
||||
Anonymous second block
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
Anonymous second block
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete an inline-level element inside a block whose children are otherwise all block-level, located at its end</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-inline-in-blocks-beginning-001-ref.xht" />
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div > div {margin: 1em 0em;}
|
||||
|
||||
span#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteAnInlineAtEnd()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteAnInlineAtEnd();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
Anonymous second block
|
||||
<div>Third block</div>
|
||||
<span id="target-node-to-delete">Span to remove</span>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
Anonymous second block
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete an inline-level element inside a block whose children are otherwise all block-level, located in its middle</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-inline-in-blocks-beginning-001-ref.xht" />
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div > div {margin: 1em 0em;}
|
||||
|
||||
span#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteAnInlineAtMiddle()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteAnInlineAtMiddle();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
Anonymous second block <span id="target-node-to-delete">Span to remove</span>
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
Anonymous second block
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<!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.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div > div {margin: 1em 0em;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
<div>Second block</div>
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
<div>Second block</div>
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete an inline-level element inside a block whose children are otherwise all block-level, located in its middle</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-inline-in-blocks-middle-002-ref.xht" />
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div > div {margin: 1em 0em;}
|
||||
|
||||
span#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteAnInlineAtMiddle()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteAnInlineAtMiddle();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
<span id="target-node-to-delete">Span to remove</span>
|
||||
<div>Second block</div>
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
<div>Second block</div>
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,65 @@
|
|||
<!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" class="reftest-wait">
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Test: Delete an inline-level element inside a block whose children are otherwise all block-level, located in its middle</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" />
|
||||
<link rel="match" href="delete-inline-in-blocks-middle-002-ref.xht" />
|
||||
|
||||
<meta http-equiv="Content-Script-Type" content="text/javascript" />
|
||||
<meta content="ahem dom" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
div.container
|
||||
{
|
||||
background-color: fuchsia;
|
||||
color: black;
|
||||
font: 20px/1 Ahem;
|
||||
margin: 1em;
|
||||
}
|
||||
|
||||
div > div {margin: 1em 0em;}
|
||||
|
||||
span#target-node-to-delete
|
||||
{
|
||||
border-left: yellow solid 0.5em;
|
||||
border-right: yellow solid 0.5em;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
<script type="text/javascript"><![CDATA[
|
||||
function deleteAnInlineAtMiddle()
|
||||
{
|
||||
document.body.offsetHeight;
|
||||
|
||||
document.getElementsByClassName("container")[0].removeChild(document.getElementById("target-node-to-delete"));
|
||||
|
||||
document.documentElement.className = "";
|
||||
}
|
||||
]]></script>
|
||||
|
||||
</head>
|
||||
|
||||
<body onload="deleteAnInlineAtMiddle();">
|
||||
|
||||
<p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
<div>Second block</div>
|
||||
<span id="target-node-to-delete">Span to remove</span>
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div>First block</div>
|
||||
<div>Second block</div>
|
||||
<div>Third block</div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Descendant elements and 'display: none'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="../reference/ref-if-there-is-no-red.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Descendant elements do not get generated when parent is 'display: none'." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: red;
|
||||
height: 1in;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Overriding display none from parent</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="../reference/ref-if-there-is-no-red.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Descendant elements cannot override the parent's setting of the 'display' property when set to 'none'." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
display: none;
|
||||
}
|
||||
div div
|
||||
{
|
||||
background: red;
|
||||
display: block;
|
||||
height: 1in;
|
||||
width: 1in;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
<div>
|
||||
<div></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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/" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 2 "Filler text" are both <strong>on the same line</strong>.</p>
|
||||
|
||||
<div>Filler text Filler text</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'inline'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'inline' behaves in layout as an inline element." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 "Filler text" are both <strong>on the same line</strong>.</p>
|
||||
<div>Filler text</div>
|
||||
<div>Filler text</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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/" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are <strong>2 lines of "Filler text"</strong>.</p>
|
||||
|
||||
<div>Filler text</div>
|
||||
|
||||
<div>Filler text</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'block'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-002-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'block' behaves in layout as a block." />
|
||||
<style type="text/css">
|
||||
span
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are <strong>2 lines of "Filler text"</strong>.</p>
|
||||
<div>
|
||||
<span>Filler text</span>
|
||||
<span>Filler text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!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 Test: Display set to 'list-item'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'list-item' behaves in layout as a list item block." />
|
||||
<style type="text/css">
|
||||
body
|
||||
{
|
||||
margin-left: 50px;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: list-item;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the "Filler Text" has a bullet list-marker (filled disc) on its left-hand side.</p>
|
||||
<div>
|
||||
<span>Filler Text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'inline-block'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'inline-block' is formatted in layout as an inline-level element: it creates a new block formatting context for its descendants but it is laid out, flowed as an inline-level element. An inline-block does not begin on a new line and does not require to begin on a new line." />
|
||||
<style type="text/css">
|
||||
div div
|
||||
{
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 "Filler text" are both <strong>on the same line</strong>.</p>
|
||||
<div>
|
||||
Filler text
|
||||
<div>Filler text</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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 Test: Display set to 'table'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table' behaves in layout as a table." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
#row div
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 "Filler text" are both <strong>on the same line</strong>.</p>
|
||||
<div id="table">
|
||||
<div id="row">
|
||||
<div>Filler text </div>
|
||||
<div>Filler text</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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 Test: Display set to 'inline-table'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'inline-table' behaves in layout as an inline table." />
|
||||
<style type="text/css">
|
||||
#test
|
||||
{
|
||||
display: inline-table;
|
||||
}
|
||||
.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
.cell
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 "Filler text" are both <strong>on the same line</strong>.</p>
|
||||
<div>Filler text
|
||||
<div id="test">
|
||||
<div class="row">
|
||||
<div class="cell">Filler </div>
|
||||
<div class="cell">text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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#blue
|
||||
{
|
||||
background-color: blue;
|
||||
display: inline;
|
||||
}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the top line of the 2 lines of "Filler Text" has a blue background.</p>
|
||||
|
||||
<div id="blue">Filler TextFiller Text</div>
|
||||
|
||||
<div>Filler TextFiller Text</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<!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 Test: Display set to 'table-row-group'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-008-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-row-group' behaves in layout as a table row group." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
display: table-row-group;
|
||||
}
|
||||
.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
.cell
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the top line of the 2 lines of "Filler Text" has a blue background.</p>
|
||||
<div id="table">
|
||||
<div id="test">
|
||||
<div class="row">
|
||||
<div class="cell">Filler Text</div>
|
||||
<div class="cell">Filler Text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell">Filler Text</div>
|
||||
<div class="cell">Filler Text</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,54 @@
|
|||
<!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 Test: Display set to 'table-header-group'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-008-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-header-group' behaves in layout as a table header group." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#test
|
||||
{
|
||||
background: blue;
|
||||
display: table-header-group;
|
||||
}
|
||||
#rowgroup
|
||||
{
|
||||
display: table-row-group;
|
||||
}
|
||||
.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
.cell
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the top line of the 2 lines of "Filler Text" has a blue background.</p>
|
||||
<div id="table">
|
||||
<div id="test">
|
||||
<div class="row">
|
||||
<div class="cell">Filler Text</div>
|
||||
<div class="cell">Filler Text</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="rowgroup">
|
||||
<div class="row">
|
||||
<div class="cell">Filler Text</div>
|
||||
<div class="cell">Filler Text</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!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/" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the word "Below" is below "Filler Text".</p>
|
||||
|
||||
<div>Filler Text</div>
|
||||
|
||||
<div>Below</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'table-footer-group'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-010-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-footer-group' behaves in layout as a table footer group." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#test
|
||||
{
|
||||
display: table-footer-group;
|
||||
}
|
||||
#rowgroup
|
||||
{
|
||||
display: table-row-group;
|
||||
}
|
||||
.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
.cell
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the word "Below" is below "Filler Text".</p>
|
||||
<div>
|
||||
<span id="test">
|
||||
<span class="row">
|
||||
<span class="cell">Below</span>
|
||||
</span>
|
||||
</span>
|
||||
<span id="rowgroup">
|
||||
<span class="row">
|
||||
<span class="cell">Filler Text</span>
|
||||
</span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!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 Test: Display set to 'table-row'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-002-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-row' behaves in layout as a table row." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
.row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
.cell
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are <strong>2 lines of "Filler text"</strong>.</p>
|
||||
<div>
|
||||
<span class="row">
|
||||
<span class="cell">Filler text</span>
|
||||
</span>
|
||||
<span class="row">
|
||||
<span class="cell">Filler text</span>
|
||||
</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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[
|
||||
span {background-color: blue;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the first half of the line of "Filler Text" has a blue background.</p>
|
||||
|
||||
<div><span>Filler Text</span>Filler Text</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'table-column-group'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-012-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-column-group' behaves in layout as a table column group." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: table-column-group;
|
||||
}
|
||||
#test
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
#row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
.cell
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the first half of the line of "Filler Text" has a blue background.</p>
|
||||
<div id="table">
|
||||
<span id="test"></span>
|
||||
<span></span>
|
||||
<div id="row">
|
||||
<div class="cell">Filler Text</div>
|
||||
<div class="cell">Filler Text</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'table-column'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-012-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-column' behaves in layout as a table column." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: table-column;
|
||||
}
|
||||
#test
|
||||
{
|
||||
background-color: blue;
|
||||
}
|
||||
#row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
.cell
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the first half of the line of "Filler Text" has a blue background.</p>
|
||||
<div id="table">
|
||||
<span id="test"></span>
|
||||
<span></span>
|
||||
<div id="row">
|
||||
<div class="cell">Filler Text</div>
|
||||
<div class="cell">Filler Text</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!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 Test: Display set to 'table-cell'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-001-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-cell' behaves in layout as a table cell." />
|
||||
<style type="text/css">
|
||||
#table
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#row
|
||||
{
|
||||
display: table-row;
|
||||
}
|
||||
#row div
|
||||
{
|
||||
display: table-cell;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the 2 "Filler text" are both <strong>on the same line</strong>.</p>
|
||||
<div id="table">
|
||||
<div id="row">
|
||||
<div>Filler text </div>
|
||||
<div>Filler text</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'table-caption'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-002-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'table-caption' behaves in layout as a table caption." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
display: table;
|
||||
}
|
||||
#span1
|
||||
{
|
||||
display: table-caption;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are <strong>2 lines of "Filler text"</strong>.</p>
|
||||
<div id="table">
|
||||
<span id="span1">Filler text</span>
|
||||
<span>Filler text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'none'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="../reference/ref-if-there-is-no-red.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'none' has no layout." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
color: red;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
<div>FAIL</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Display set to 'inherit'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-03-11 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="match" href="display-002-ref.xht" />
|
||||
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="The property 'display' set to 'inherit' can inherit its layout behavior from a parent container." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
display: block;
|
||||
}
|
||||
span
|
||||
{
|
||||
display: inherit;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there are <strong>2 lines of "Filler text"</strong>.</p>
|
||||
<div>
|
||||
<span>Filler text</span>
|
||||
<span>Filler text</span>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!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/" />
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 3 "Filler text" are all on the same line.</p>
|
||||
|
||||
<div>Filler text <strong>Filler</strong> text <strong>Filler</strong> text</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
53
tests/wpt/web-platform-tests/css/CSS2/box-display/display-018.xht
Executable file
53
tests/wpt/web-platform-tests/css/CSS2/box-display/display-018.xht
Executable file
|
|
@ -0,0 +1,53 @@
|
|||
<!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 Test: display - sub-table elements with 'display' set to 'inline'</title>
|
||||
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" />
|
||||
<link rel="match" href="display-018-ref.xht" />
|
||||
|
||||
<meta content="When an element with its property 'display' set to 'inline', then it makes its box laid out horizontally, beginning at the top of its containing block without beginning on a new line and without requiring to begin on a new line. Elements with 'display' set to 'inline' are laid out horizontally, one after the other, in the line box." name="assert" />
|
||||
<meta content="" name="flags" />
|
||||
|
||||
<style type="text/css"><![CDATA[
|
||||
table, caption, tbody, tr, th, td
|
||||
{
|
||||
display: inline;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
th, td {padding: 0px;}
|
||||
]]></style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if the 3 "Filler text" are all on the same line.</p>
|
||||
|
||||
<table>
|
||||
<caption>Filler text</caption>
|
||||
|
||||
<tbody>
|
||||
|
||||
<tr>
|
||||
<th>Filler</th>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<th>Filler</th>
|
||||
<td>text</td>
|
||||
</tr>
|
||||
|
||||
</tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Applying the property 'display' set to 'inline' to the 'a' element</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Display set to 'inline' applies the correct rendering behavior for the 'a' element." />
|
||||
<style type="text/css">
|
||||
/* Note that per the non-normative default stylesheet definition 'a' is already 'display: inline'. */
|
||||
a
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if all the "Filler Text" below is on the same line.</p>
|
||||
<div>
|
||||
Filler Text
|
||||
<a>Filler Text</a>
|
||||
Filler Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -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 Test: Applying the property 'display' set to 'inline' to the 'abbr' element</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-display" />
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Display set to 'inline' applies the correct rendering behavior for the 'abbr' element." />
|
||||
<style type="text/css">
|
||||
/* Note that per the non-normative default stylesheet definition 'abbr' is already 'display: inline'. */
|
||||
abbr
|
||||
{
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if all the "Filler Text" below is on the same line.</p>
|
||||
<div>
|
||||
Filler Text
|
||||
<abbr>Filler Text</abbr>
|
||||
Filler Text
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue