diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-19 00:47:55 +0000 |
| commit | 26a029d407be480d791972afb5975cf62c9360a6 (patch) | |
| tree | f435a8308119effd964b339f76abb83a57c29483 /testing/web-platform/tests/css/CSS2/box-display | |
| parent | Initial commit. (diff) | |
| download | firefox-26a029d407be480d791972afb5975cf62c9360a6.tar.xz firefox-26a029d407be480d791972afb5975cf62c9360a6.zip | |
Adding upstream version 124.0.1.upstream/124.0.1
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/box-display')
205 files changed, 7622 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/box-display/anonymous-box-generation-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/anonymous-box-generation-001-ref.xht new file mode 100644 index 0000000000..63d72d0220 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/anonymous-box-generation-001-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/anonymous-box-generation-001.xht b/testing/web-platform/tests/css/CSS2/box-display/anonymous-box-generation-001.xht new file mode 100644 index 0000000000..40c9922c87 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/anonymous-box-generation-001.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/anonymous-boxes-inheritance-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/anonymous-boxes-inheritance-001-ref.xht new file mode 100644 index 0000000000..7898040973 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/anonymous-boxes-inheritance-001-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/anonymous-boxes-inheritance-001.xht b/testing/web-platform/tests/css/CSS2/box-display/anonymous-boxes-inheritance-001.xht new file mode 100644 index 0000000000..e0c6be8bce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/anonymous-boxes-inheritance-001.xht @@ -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: 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." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/anonymous-inline-whitespace-001.xht b/testing/web-platform/tests/css/CSS2/box-display/anonymous-inline-whitespace-001.xht new file mode 100644 index 0000000000..02c1e38012 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/anonymous-inline-whitespace-001.xht @@ -0,0 +1,23 @@ +<!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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-001-ref.xht new file mode 100644 index 0000000000..40922b52bd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-001-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-001.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-001.xht new file mode 100644 index 0000000000..aed4f2ce28 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-001.xht @@ -0,0 +1,36 @@ +<!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="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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-002.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-002.xht new file mode 100644 index 0000000000..884dd16bea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-002.xht @@ -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 - 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."/> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-003-ref.xht new file mode 100644 index 0000000000..a99d588134 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-003-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-003.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-003.xht new file mode 100644 index 0000000000..fe3ab4d482 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-003.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-004.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-004.xht new file mode 100644 index 0000000000..eb5ff7c1d0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-004.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-005.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-005.xht new file mode 100644 index 0000000000..c287c8bea2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-005.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-006.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-006.xht new file mode 100644 index 0000000000..1e6684f93c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-006.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-007-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-007-ref.xht new file mode 100644 index 0000000000..71dd363b6d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-007-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-007.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-007.xht new file mode 100644 index 0000000000..da2d6a9c0e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-007.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-008-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-008-ref.xht new file mode 100644 index 0000000000..aed38f2f4c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-008-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-008.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-008.xht new file mode 100644 index 0000000000..94317e5b05 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-008.xht @@ -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: 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" /> + + <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> + + + + + diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-001-ref.xht new file mode 100644 index 0000000000..916845caf3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-001-ref.xht @@ -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"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-001.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-001.xht new file mode 100644 index 0000000000..a5d6d27373 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-001.xht @@ -0,0 +1,58 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: 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." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-002.xht b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-002.xht new file mode 100644 index 0000000000..bc3580083c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/block-in-inline-relpos-002.xht @@ -0,0 +1,83 @@ +<!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."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/box-generation-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/box-generation-001-ref.xht new file mode 100644 index 0000000000..a07a102038 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/box-generation-001-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/box-generation-001.xht b/testing/web-platform/tests/css/CSS2/box-display/box-generation-001.xht new file mode 100644 index 0000000000..6d821f5c98 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/box-generation-001.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/box-generation-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/box-generation-002-ref.xht new file mode 100644 index 0000000000..ed0ad4783d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/box-generation-002-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/box-generation-002.xht b/testing/web-platform/tests/css/CSS2/box-display/box-generation-002.xht new file mode 100644 index 0000000000..cc6562e9e3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/box-generation-002.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/box-generation-003.xht b/testing/web-platform/tests/css/CSS2/box-display/box-generation-003.xht new file mode 100644 index 0000000000..1c2c7e4e8e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/box-generation-003.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-001.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-001.xht new file mode 100644 index 0000000000..a323a79b17 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-001.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-002.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-002.xht new file mode 100644 index 0000000000..2856a48654 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-002.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-003.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-003.xht new file mode 100644 index 0000000000..a7bec9509e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-003.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-004.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-004.xht new file mode 100644 index 0000000000..dc571931a5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-004.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-005.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-005.xht new file mode 100644 index 0000000000..575a1cc1ec --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-005.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-006.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-006.xht new file mode 100644 index 0000000000..ef1717b311 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-006.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-007-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-007-ref.xht new file mode 100644 index 0000000000..9503f7e428 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-007-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-007.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-007.xht new file mode 100644 index 0000000000..be6e8ac554 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-007.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-008-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-008-ref.xht new file mode 100644 index 0000000000..3a68ecf7b8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-008-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-008.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-008.xht new file mode 100644 index 0000000000..d64fcabd5b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-008.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-009-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-009-ref.xht new file mode 100644 index 0000000000..6f0be72a99 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-009-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-009.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-009.xht new file mode 100644 index 0000000000..3f81afcb37 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-009.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-010.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-010.xht new file mode 100644 index 0000000000..08db1f60aa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-010.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-011.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-011.xht new file mode 100644 index 0000000000..27dea18f30 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-011.xht @@ -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 - 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-013.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-013.xht new file mode 100644 index 0000000000..426f10dd3b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-013.xht @@ -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 - 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-015.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-015.xht new file mode 100644 index 0000000000..dce201b3e3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-015.xht @@ -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 - 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-017.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-017.xht new file mode 100644 index 0000000000..5a134c570d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-017.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-018.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-018.xht new file mode 100644 index 0000000000..28c23a6840 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-018.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-019-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-019-ref.xht new file mode 100644 index 0000000000..7ba9b2c133 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-019-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-019.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-019.xht new file mode 100644 index 0000000000..7df6b7f4cb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-019.xht @@ -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: 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="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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-020-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-020-ref.xht new file mode 100644 index 0000000000..270ea7f97a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-020-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-020.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-020.xht new file mode 100644 index 0000000000..cc8668e035 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-020.xht @@ -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: 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="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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-021.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-021.xht new file mode 100644 index 0000000000..fd36da88da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-021.xht @@ -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: 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="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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-022.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-022.xht new file mode 100644 index 0000000000..2fe09098bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-022.xht @@ -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: 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="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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-023-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-023-ref.xht new file mode 100644 index 0000000000..b9534ec5b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-023-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-023.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-023.xht new file mode 100644 index 0000000000..dcda232631 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-023.xht @@ -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: 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="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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-024.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-024.xht new file mode 100644 index 0000000000..baeea8c191 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-024.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-025.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-025.xht new file mode 100644 index 0000000000..eb83defd84 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-025.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-026.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-026.xht new file mode 100644 index 0000000000..a30501d5b0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-026.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-027-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-027-ref.xht new file mode 100644 index 0000000000..9a0744ee55 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-027-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-027.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-027.xht new file mode 100644 index 0000000000..839ed069a1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-027.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-028-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-028-ref.xht new file mode 100644 index 0000000000..72c19b2a7a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-028-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-028.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-028.xht new file mode 100644 index 0000000000..028057ae09 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-028.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-029-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-029-ref.xht new file mode 100644 index 0000000000..5cc01070b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-029-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-029.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-029.xht new file mode 100644 index 0000000000..027c735645 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-029.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-030-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-030-ref.xht new file mode 100644 index 0000000000..5025549d57 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-030-ref.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/containing-block-030.xht b/testing/web-platform/tests/css/CSS2/box-display/containing-block-030.xht new file mode 100644 index 0000000000..3f02d8f214 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/containing-block-030.xht @@ -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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-beginning-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-beginning-001-ref.xht new file mode 100644 index 0000000000..d74030940c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-beginning-001-ref.xht @@ -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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-beginning-001.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-beginning-001.xht new file mode 100644 index 0000000000..ccbe7429db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-beginning-001.xht @@ -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" 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" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-end-001.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-end-001.xht new file mode 100644 index 0000000000..c08f497fe7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-end-001.xht @@ -0,0 +1,60 @@ +<!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" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-middle-001.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-middle-001.xht new file mode 100644 index 0000000000..d7a15693c1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-block-in-inlines-middle-001.xht @@ -0,0 +1,60 @@ +<!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" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-beginning-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-beginning-001-ref.xht new file mode 100644 index 0000000000..693a2c5371 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-beginning-001-ref.xht @@ -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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-beginning-001.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-beginning-001.xht new file mode 100644 index 0000000000..474a861757 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-beginning-001.xht @@ -0,0 +1,66 @@ +<!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" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-end-001.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-end-001.xht new file mode 100644 index 0000000000..03411f0d05 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-end-001.xht @@ -0,0 +1,66 @@ +<!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" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-001.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-001.xht new file mode 100644 index 0000000000..a2a80f8c18 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-001.xht @@ -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-beginning-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-002-ref.xht new file mode 100644 index 0000000000..18b30c4a35 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-002-ref.xht @@ -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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-002.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-002.xht new file mode 100644 index 0000000000..d524189054 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-002.xht @@ -0,0 +1,66 @@ +<!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" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-003.xht b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-003.xht new file mode 100644 index 0000000000..fdb53b0eb2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/delete-inline-in-blocks-middle-003.xht @@ -0,0 +1,66 @@ +<!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" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/descendant-display-none-001.xht b/testing/web-platform/tests/css/CSS2/box-display/descendant-display-none-001.xht new file mode 100644 index 0000000000..e68b219ff1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/descendant-display-none-001.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/descendant-display-override-001.xht b/testing/web-platform/tests/css/CSS2/box-display/descendant-display-override-001.xht new file mode 100644 index 0000000000..de2c9a74f2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/descendant-display-override-001.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/display-001-ref.xht new file mode 100644 index 0000000000..c30736f47a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-001-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-001.xht b/testing/web-platform/tests/css/CSS2/box-display/display-001.xht new file mode 100644 index 0000000000..385619e9ed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-001.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/display-002-ref.xht new file mode 100644 index 0000000000..1110982292 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-002-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-002.xht b/testing/web-platform/tests/css/CSS2/box-display/display-002.xht new file mode 100644 index 0000000000..81020d33e4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-002.xht @@ -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 '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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-003.xht b/testing/web-platform/tests/css/CSS2/box-display/display-003.xht new file mode 100644 index 0000000000..974c77bb2b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-003.xht @@ -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 '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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-005.xht b/testing/web-platform/tests/css/CSS2/box-display/display-005.xht new file mode 100644 index 0000000000..44fbe1dfb2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-005.xht @@ -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-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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-006.xht b/testing/web-platform/tests/css/CSS2/box-display/display-006.xht new file mode 100644 index 0000000000..3ebe813d06 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-006.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-007.xht b/testing/web-platform/tests/css/CSS2/box-display/display-007.xht new file mode 100644 index 0000000000..9b3f7242c0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-007.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-008-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/display-008-ref.xht new file mode 100644 index 0000000000..0c6748d03a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-008-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-008.xht b/testing/web-platform/tests/css/CSS2/box-display/display-008.xht new file mode 100644 index 0000000000..bafe117ff8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-008.xht @@ -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-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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-009.xht b/testing/web-platform/tests/css/CSS2/box-display/display-009.xht new file mode 100644 index 0000000000..e7bc7f80d3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-009.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-010-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/display-010-ref.xht new file mode 100644 index 0000000000..f7796e654f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-010-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-010.xht b/testing/web-platform/tests/css/CSS2/box-display/display-010.xht new file mode 100644 index 0000000000..06ce558943 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-010.xht @@ -0,0 +1,50 @@ +<!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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-011.xht b/testing/web-platform/tests/css/CSS2/box-display/display-011.xht new file mode 100644 index 0000000000..405290fe4b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-011.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-012-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/display-012-ref.xht new file mode 100644 index 0000000000..7d7903f9ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-012-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-012.xht b/testing/web-platform/tests/css/CSS2/box-display/display-012.xht new file mode 100644 index 0000000000..fccc1c44c7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-012.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-013.xht b/testing/web-platform/tests/css/CSS2/box-display/display-013.xht new file mode 100644 index 0000000000..43a52c9c5b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-013.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-014.xht b/testing/web-platform/tests/css/CSS2/box-display/display-014.xht new file mode 100644 index 0000000000..7cb0591c6e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-014.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-015.xht b/testing/web-platform/tests/css/CSS2/box-display/display-015.xht new file mode 100644 index 0000000000..9a2c3e4268 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-015.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-016.xht b/testing/web-platform/tests/css/CSS2/box-display/display-016.xht new file mode 100644 index 0000000000..4367c5f575 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-016.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-017.xht b/testing/web-platform/tests/css/CSS2/box-display/display-017.xht new file mode 100644 index 0000000000..30d5522eb5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-017.xht @@ -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 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-018-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/display-018-ref.xht new file mode 100644 index 0000000000..aed8233160 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-018-ref.xht @@ -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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-018.xht b/testing/web-platform/tests/css/CSS2/box-display/display-018.xht new file mode 100644 index 0000000000..d16d648f26 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-018.xht @@ -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: 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" /> + + <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> diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/box-display/display-applies-to-001.xht new file mode 100644 index 0000000000..ca899da23b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-applies-to-001.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/box-display/display-applies-to-002.xht new file mode 100644 index 0000000000..478c6e9163 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-applies-to-002.xht @@ -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: 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="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>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-change-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/display-change-001-ref.xht new file mode 100644 index 0000000000..4f7e2a96e3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-change-001-ref.xht @@ -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 there is a small filled green square and <strong>no red</strong>.</p> + + <div><img src="support/swatch-green.png" width="20" height="20" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-change-001.xht b/testing/web-platform/tests/css/CSS2/box-display/display-change-001.xht new file mode 100644 index 0000000000..ec33b9f231 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-change-001.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" + "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Updating layout on display changes</title> + <link rel="author" title="Boris Zbarsky" href="mailto:bzbarsky@mit.edu"/> + <link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2012-04-07 --> + <link rel="help" + href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <link rel="match" href="display-change-001-ref.xht" /> + + <meta name="flags" content="ahem dom" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <script type="text/javascript"> + function test() { + document.getElementById('float').style.display = 'none'; + } + </script> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #float { width: 100%; float:left; } + div { background: red; color: green; font-size: 1.25em; width: 1em; font-family: Ahem; line-height: 1; } + </style> + </head> + <body onload="test()"> + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + <div id="float">X</div> + <div> + X + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-initial-001.xht b/testing/web-platform/tests/css/CSS2/box-display/display-initial-001.xht new file mode 100644 index 0000000000..f0d0e8d058 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-initial-001.xht @@ -0,0 +1,21 @@ +<!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 initial value</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <meta name="assert" content="The initial display value for all elements is 'inline'." /> + <style type="text/css"> + span + { + background: orange; + } + </style> + </head> + <body> + <p>Test passes if a background starts and ends where the content starts and ends below.</p> + <div> + <span>Filler Text Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-none-001.xht b/testing/web-platform/tests/css/CSS2/box-display/display-none-001.xht new file mode 100644 index 0000000000..f7760f7ba1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-none-001.xht @@ -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: Display set to 'none' does not generate a box even with 'position' set to '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-03-11 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <meta name="assert" content="Elements set to 'display: none' do not render even if element is positioned absolute." /> + <style type="text/css"> + div + { + background: red; + display: none; + position: absolute; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-none-002.xht b/testing/web-platform/tests/css/CSS2/box-display/display-none-002.xht new file mode 100644 index 0000000000..9887d38a61 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-none-002.xht @@ -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: Display set to 'none' does not generate a box even with 'position' set to '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-03-11 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#dis-pos-flo" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <meta name="assert" content="Elements set to 'display: none' do not render even if element is positioned fixed." /> + <style type="text/css"> + div + { + background: red; + display: none; + position: fixed; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/display-none-003.xht b/testing/web-platform/tests/css/CSS2/box-display/display-none-003.xht new file mode 100644 index 0000000000..f57a605681 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/display-none-003.xht @@ -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: Display set to 'none' does not generate a box even when element is floated</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#dis-pos-flo" /> + <link rel="match" href="../reference/ref-if-there-is-no-red.xht" /> + + <meta name="assert" content="Elements set to 'display: none' do not render even if element is floated." /> + <style type="text/css"> + div + { + background: red; + display: none; + float: left; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-001-ref.xht new file mode 100644 index 0000000000..d66bd97f8d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-001-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div class="inserted">Inserted new block</div> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div class="inserted">Inserted new block</div> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-001.xht new file mode 100644 index 0000000000..28f5fbd630 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-001.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) at the beginning of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-begin-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtBeginning() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div id="insertion-point">1stBlock</div> + <div>ScndBlock</div><span>1stInline</span><div>FourthBlock</div> + <div>Fifth55Block</div><span>SecondInline</span><div>Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div class="inserted">Inserted new block</div> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-002-ref.xht new file mode 100644 index 0000000000..05f1d788a7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-002-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div class="inserted">Inserted new block</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div class="inserted">Inserted new block</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-002.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-002.xht new file mode 100644 index 0000000000..dc10e08ec5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-002.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) at the beginning of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-begin-002-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtBeginning() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div id="insertion-point">ScndBlock</div><span>1stInline</span><div>FourthBlock</div> + <div>Fifth55Block</div><span>SecondInline</span><div>Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div class="inserted">Inserted new block</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-003-ref.xht new file mode 100644 index 0000000000..980de9416c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-003-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <div class="inserted">Inserted new block</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <div class="inserted">Inserted new block</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-003.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-003.xht new file mode 100644 index 0000000000..8b39ff8b5b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-begin-003.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) at the beginning of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-begin-003-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtBeginning() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div>ScndBlock</div><span id="insertion-point">1stInline</span><div>FourthBlock</div> + <div>Fifth55Block</div><span>SecondInline</span><div>Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <div class="inserted">Inserted new block</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-001-ref.xht new file mode 100644 index 0000000000..bcaa0692b3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-001-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div class="inserted">Inserted new block</div> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div class="inserted">Inserted new block</div> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-001.xht new file mode 100644 index 0000000000..28a25231c4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-001.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) at the end of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-end-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtEnd() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtEnd();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div>ScndBlock</div><span>1stInline</span><div>FourthBlock</div> + <div>Fifth55Block</div><span>SecondInline</span><div id="insertion-point">Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div class="inserted">Inserted new block</div> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-002-ref.xht new file mode 100644 index 0000000000..c75398531f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-002-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div class="inserted">Inserted new block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div class="inserted">Inserted new block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-002.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-002.xht new file mode 100644 index 0000000000..b24b74231a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-002.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) at the end of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-end-002-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtEnd() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtEnd();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div>ScndBlock</div><span>1stInline</span><div>FourthBlock</div> + <div>Fifth55Block</div><span>SecondInline</span><div>Seven777Block</div> + <div id="insertion-point">Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div class="inserted">Inserted new block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-003-ref.xht new file mode 100644 index 0000000000..a9f43877ba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-003-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + <div class="inserted">Inserted new block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + <div class="inserted">Inserted new block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-003.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-003.xht new file mode 100644 index 0000000000..fed83aa6e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-end-003.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) at the end of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-end-003-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtEnd() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].appendChild(newBlockNode); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtEnd();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div>ScndBlock</div><span>1stInline</span><div>FourthBlock</div> + <div>Fifth55Block</div><span>SecondInline</span><div>Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + <div class="inserted">Inserted new block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-001-ref.xht new file mode 100644 index 0000000000..23b883b136 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-001-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div class="inserted">Inserted new block</div> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div class="inserted">Inserted new block</div> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-001.xht new file mode 100644 index 0000000000..35aff524ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-001.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) in the middle of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-middle-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtMiddle() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtMiddle();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div>ScndBlock</div><span>1stInline</span><div id="insertion-point">FourthBlock</div> + <div>Fifth55Block</div><span>SecondInline</span><div>Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div class="inserted">Inserted new block</div> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-002-ref.xht new file mode 100644 index 0000000000..d8d4376291 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-002-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div class="inserted">Inserted new block</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div class="inserted">Inserted new block</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-002.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-002.xht new file mode 100644 index 0000000000..dbc4941f67 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-002.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) in the middle of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-middle-002-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtMiddle() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtMiddle();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div>ScndBlock</div><span>1stInline</span><div>FourthBlock</div> + <div id="insertion-point">Fifth55Block</div><span>SecondInline</span><div>Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div class="inserted">Inserted new block</div> + <div>Fifth55Block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-003-ref.xht new file mode 100644 index 0000000000..e691312593 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-003-ref.xht @@ -0,0 +1,61 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <div class="inserted">Inserted new block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <div class="inserted">Inserted new block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-003.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-003.xht new file mode 100644 index 0000000000..73aa60b0a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-blocks-n-inlines-middle-003.xht @@ -0,0 +1,76 @@ +<!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: Insert a block-level element into an element that contains both blocks and inlines and directly into the block-of-blocks (and not into any anonymous block-of-inlines) in the middle of the block-of-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#anonymous-block-level" title="9.2.1.1 Anonymous block boxes" /> + <link rel="match" href="insert-block-in-blocks-n-inlines-middle-003-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtMiddle() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.className = "inserted"; + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtMiddle();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><div>1stBlock</div> + <div>ScndBlock</div><span>1stInline</span><div>FourthBlock</div> + <div>Fifth55Block</div><span id="insertion-point">SecondInline</span><div>Seven777Block</div> + <div>Eight8888Block</div></div> + + <div class="container"> + <div>1stBlock</div> + <div>ScndBlock</div> + <span>1stInline</span> + <div>FourthBlock</div> + <div>Fifth55Block</div> + <div class="inserted">Inserted new block</div> + <span>SecondInline</span> + <div>Seven777Block</div> + <div>Eight8888Block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-beginning-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-beginning-001-ref.xht new file mode 100644 index 0000000000..cf3105cbbb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-beginning-001-ref.xht @@ -0,0 +1,44 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + margin: 1em 0em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div class="inserted">Inserted new block</div> + Several inline elements are in this sentence. + </div> + + <div class="container"> + <div class="inserted">Inserted new block</div> + Several inline elements are in this sentence. + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-beginning-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-beginning-001.xht new file mode 100644 index 0000000000..ca8f49e358 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-beginning-001.xht @@ -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: Insert a block-level element into a block of inlines 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="insert-block-in-inlines-beginning-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + margin: 1em 0em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtBeginning() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + newBlockNode.className = "inserted"; + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span id="insertion-point">Several</span> <span>inline elements</span> are <span>in this</span> sentence.</div> + + <div class="container"> + <div class="inserted">Inserted new block</div> + Several inline elements are in this sentence. + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-end-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-end-001-ref.xht new file mode 100644 index 0000000000..1a2a150072 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-end-001-ref.xht @@ -0,0 +1,44 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + margin: 1em 0em; + } + ]]></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 class="inserted">Inserted new block</div> + </div> + + <div class="container"> + Several inline elements are in this sentence. + <div class="inserted">Inserted new block</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-end-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-end-001.xht new file mode 100644 index 0000000000..c196757e70 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-end-001.xht @@ -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: Insert a block-level element into a block of inlines 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="insert-block-in-inlines-end-001-ref.xht" /> + + <meta content="ahem dom" name="flags" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + margin: 1em 0em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtEnd() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + newBlockNode.className = "inserted"; + + document.getElementsByClassName("container")[0].appendChild(newBlockNode); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtEnd();"> + + <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> + + <div class="container"> + Several inline elements are in this sentence. + <div class="inserted">Inserted new block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-middle-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-middle-001-ref.xht new file mode 100644 index 0000000000..c9f59509fe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-middle-001-ref.xht @@ -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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + margin: 1em 0em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + Several inline elements are + <div class="inserted">Inserted new block</div> + in this sentence. + </div> + + <div class="container"> + Several inline elements are + <div class="inserted">Inserted new block</div> + in this sentence. + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-middle-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-middle-001.xht new file mode 100644 index 0000000000..9d79d637e9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-block-in-inlines-middle-001.xht @@ -0,0 +1,66 @@ +<!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: Insert a block-level element into a block of inlines 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="insert-block-in-inlines-middle-001-ref.xht" /> + + <meta content="ahem dom" name="flags" /> + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + margin: 1em 0em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertABlockAtMiddle() + { + document.body.offsetHeight; + + var newBlockNode = document.createElement("div"); + + newBlockNode.appendChild(document.createTextNode("Inserted new block")); + + newBlockNode.className = "inserted"; + + document.getElementsByClassName("container")[0].insertBefore(newBlockNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertABlockAtMiddle();"> + + <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 id="insertion-point">in this</span> sentence.</div> + + <div class="container"> + Several inline elements are + <div class="inserted">Inserted new block</div> + in this sentence. + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-beginning-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-beginning-001-ref.xht new file mode 100644 index 0000000000..8af5fefb7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-beginning-001-ref.xht @@ -0,0 +1,50 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <span class="inserted">Inserted new inline</span> + <div>First block</div> + Anonymous second block + <div>Third block</div> + </div> + + <div class="container"> + <span class="inserted">Inserted new inline</span> + <div>First block</div> + Anonymous second block + <div>Third block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-beginning-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-beginning-001.xht new file mode 100644 index 0000000000..c57a91b225 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-beginning-001.xht @@ -0,0 +1,72 @@ +<!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: Insert an inline-level element into a block of blocks 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="insert-inline-in-blocks-beginning-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtBeginning() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + newInlineNode.className = "inserted"; + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div id="insertion-point">First block</div> + Anonymous second block + <div>Third block</div> + </div> + + <div class="container"> + <span class="inserted">Inserted new inline</span> + <div>First block</div> + Anonymous second block + <div>Third block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-end-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-end-001-ref.xht new file mode 100644 index 0000000000..407b9d8fef --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-end-001-ref.xht @@ -0,0 +1,50 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></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> + <span class="inserted">Inserted new inline</span> + </div> + + <div class="container"> + <div>First block</div> + Anonymous second block + <div>Third block</div> + <span class="inserted">Inserted new inline</span> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-end-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-end-001.xht new file mode 100644 index 0000000000..fb3fb51fc1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-end-001.xht @@ -0,0 +1,72 @@ +<!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: Insert an inline-level element into a block of blocks 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="insert-inline-in-blocks-end-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtEnd() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + newInlineNode.className = "inserted"; + + document.getElementsByClassName("container")[0].appendChild(newInlineNode); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtEnd();"> + + <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> + <span class="inserted">Inserted new inline</span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-001-ref.xht new file mode 100644 index 0000000000..fa2a5eddf9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-001-ref.xht @@ -0,0 +1,50 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>First block</div> + <span class="inserted">Inserted new inline</span> + <div>Second block</div> + <div>Third block</div> + </div> + + <div class="container"> + <div>First block</div> + <span class="inserted">Inserted new inline</span> + <div>Second block</div> + <div>Third block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-001.xht new file mode 100644 index 0000000000..f7de7048c1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-001.xht @@ -0,0 +1,72 @@ +<!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: Insert an inline-level element into a block of blocks 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="insert-inline-in-blocks-middle-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtMiddle() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + newInlineNode.className = "inserted"; + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtMiddle();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"> + <div>First block</div> + <div id="insertion-point">Second block</div> + <div>Third block</div> + </div> + + <div class="container"> + <div>First block</div> + <span class="inserted">Inserted new inline</span> + <div>Second block</div> + <div>Third block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-002-ref.xht new file mode 100644 index 0000000000..d4a54e7497 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-002-ref.xht @@ -0,0 +1,50 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></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> + <span class="inserted">Inserted new inline</span> + <div>Third block</div> + </div> + + <div class="container"> + <div>First block</div> + <div>Second block</div> + <span class="inserted">Inserted new inline</span> + <div>Third block</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-002.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-002.xht new file mode 100644 index 0000000000..a09f064349 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-middle-002.xht @@ -0,0 +1,72 @@ +<!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: Insert an inline-level element into a block of blocks 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="insert-inline-in-blocks-middle-002-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtMiddle() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + newInlineNode.className = "inserted"; + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtMiddle();"> + + <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 id="insertion-point">Third block</div> + </div> + + <div class="container"> + <div>First block</div> + <div>Second block</div> + <span class="inserted">Inserted new inline</span> + <div>Third block</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-001-ref.xht new file mode 100644 index 0000000000..78fabf5ee9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-001-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span class="inserted">Inserted new inline</span>1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + <div class="container"><span class="inserted">Inserted new inline</span>1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-001.xht new file mode 100644 index 0000000000..32d3ba544a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-001.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-begin-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtBeginning() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span id="insertion-point">1stInline</span> + <span>ScndInline</span><div>1stBlock</div><span>FourthInline</span> + <span>Fifth55Inline</span><div>SecondBlock</div><span>Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container"><span class="inserted">Inserted new inline</span>1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-002-ref.xht new file mode 100644 index 0000000000..24d16d9e7b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-002-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline <span class="inserted">Inserted new inline</span>ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + <div class="container">1stInline <span class="inserted">Inserted new inline</span>ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-002.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-002.xht new file mode 100644 index 0000000000..7f1dd29384 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-002.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-begin-002-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtBeginning() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span id="insertion-point">ScndInline</span><div>1stBlock</div><span>FourthInline</span> + <span>Fifth55Inline</span><div>SecondBlock</div><span>Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container">1stInline <span class="inserted">Inserted new inline</span>ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-003-ref.xht new file mode 100644 index 0000000000..75e95d9a2d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-003-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline ScndInline<span class="inserted">Inserted new inline</span> + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + <div class="container">1stInline ScndInline<span class="inserted">Inserted new inline</span> + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-003.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-003.xht new file mode 100644 index 0000000000..b9399e426f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-begin-003.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-begin-003-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtBeginning() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtBeginning();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span>ScndInline</span><div id="insertion-point">1stBlock</div><span>FourthInline</span> + <span>Fifth55Inline</span><div>SecondBlock</div><span>Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container">1stInline ScndInline<span class="inserted">Inserted new inline</span> + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-001-ref.xht new file mode 100644 index 0000000000..5f622d8a00 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-001-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + <span class="inserted">Inserted new inline</span>Seven777Inline Eight8888Inline</div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + <span class="inserted">Inserted new inline</span>Seven777Inline Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-001.xht new file mode 100644 index 0000000000..88997fa4ae --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-001.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-end-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtEnd() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtEnd();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span>ScndInline</span><div>1stBlock</div><span>FourthInline</span> + <span>Fifth55Inline</span><div>SecondBlock</div><span id="insertion-point">Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + <span class="inserted">Inserted new inline</span>Seven777Inline Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-002-ref.xht new file mode 100644 index 0000000000..2e09cfff70 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-002-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline <span class="inserted">Inserted new inline</span>Eight8888Inline</div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline <span class="inserted">Inserted new inline</span>Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-002.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-002.xht new file mode 100644 index 0000000000..72855d3a45 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-002.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-end-002-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtEnd() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtEnd();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span>ScndInline</span><div>1stBlock</div><span>FourthInline</span> + <span>Fifth55Inline</span><div>SecondBlock</div><span>Seven777Inline</span> + <span id="insertion-point">Eight8888Inline</span></div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline <span class="inserted">Inserted new inline</span>Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-003-ref.xht new file mode 100644 index 0000000000..c4d10ecc0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-003-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline<span class="inserted">Inserted new inline</span></div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline<span class="inserted">Inserted new inline</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-003.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-003.xht new file mode 100644 index 0000000000..bd982b78d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-end-003.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-end-003-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtEnd() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].appendChild(newInlineNode); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtEnd();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span>ScndInline</span><div>1stBlock</div><span>FourthInline</span> + <span>Fifth55Inline</span><div>SecondBlock</div><span>Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline<span class="inserted">Inserted new inline</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-001-ref.xht new file mode 100644 index 0000000000..026ac5b028 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-001-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + <span class="inserted">Inserted new inline</span>FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + <span class="inserted">Inserted new inline</span>FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-001.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-001.xht new file mode 100644 index 0000000000..fde80e5f05 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-001.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-middle-001-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtMiddle() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtMiddle();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span>ScndInline</span><div>1stBlock</div><span id="insertion-point">FourthInline</span> + <span>Fifth55Inline</span><div>SecondBlock</div><span>Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + <span class="inserted">Inserted new inline</span>FourthInline Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-002-ref.xht new file mode 100644 index 0000000000..b1c228a9ff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-002-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline <span class="inserted">Inserted new inline</span>Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline <span class="inserted">Inserted new inline</span>Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-002.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-002.xht new file mode 100644 index 0000000000..b0073b1da7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-002.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-middle-002-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtMiddle() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtMiddle();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span>ScndInline</span><div>1stBlock</div><span>FourthInline</span> + <span id="insertion-point">Fifth55Inline</span><div>SecondBlock</div><span>Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline <span class="inserted">Inserted new inline</span>Fifth55Inline + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-003-ref.xht new file mode 100644 index 0000000000..4e5d873f7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-003-ref.xht @@ -0,0 +1,49 @@ +<!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/" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline<span class="inserted">Inserted new inline</span> + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline<span class="inserted">Inserted new inline</span> + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-003.xht b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-003.xht new file mode 100644 index 0000000000..277d27c72c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/insert-inline-in-blocks-n-inlines-middle-003.xht @@ -0,0 +1,70 @@ +<!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: Insert an inline-level element into an element that contains both blocks and inlines and directly into the block-of-inlines 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="insert-inline-in-blocks-n-inlines-middle-003-ref.xht" /> + + <meta http-equiv="Content-Script-Type" content="text/javascript" /> + <meta content="ahem dom" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div.container + { + background-color: fuchsia; + color: black; + font: 20px/1 Ahem; + margin: 1em; + } + + div > div {margin: 1em 0em;} + + span.inserted + { + border-left: yellow solid 0.5em; + border-right: yellow solid 0.5em; + } + ]]></style> + + <script type="text/javascript"><![CDATA[ + function insertAnInlineAtMiddle() + { + document.body.offsetHeight; + + var newInlineNode = document.createElement("span"); + + newInlineNode.className = "inserted"; + + newInlineNode.appendChild(document.createTextNode("Inserted new inline")); + + document.getElementsByClassName("container")[0].insertBefore(newInlineNode, document.getElementById("insertion-point")); + + document.documentElement.className = ""; + } + ]]></script> + + </head> + + <body onload="insertAnInlineAtMiddle();"> + + <p>Test passes if the 2 colorized rectangles are <strong>identical</strong>.</p> + + <div class="container"><span>1stInline</span> + <span>ScndInline</span><div>1stBlock</div><span>FourthInline</span> + <span>Fifth55Inline</span><div id="insertion-point">SecondBlock</div><span>Seven777Inline</span> + <span>Eight8888Inline</span></div> + + <div class="container">1stInline ScndInline + <div>1stBlock</div> + FourthInline Fifth55Inline<span class="inserted">Inserted new inline</span> + <div>SecondBlock</div> + Seven777Inline Eight8888Inline</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/root-box-002-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/root-box-002-ref.xht new file mode 100644 index 0000000000..521051add3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/root-box-002-ref.xht @@ -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 + { + border-spacing: 0em; + margin: -0.5em auto; + } + + caption + { + margin: 0 auto -0.2em; + padding: .1em; + text-align: left; + } + + td {padding: 0em;} + + img {vertical-align: bottom;} + ]]></style> + + </head> + + <body> + + <table> + <caption>There should be a single unbroken yin-yang symbol below.</caption> + <tr><td><img src="support/test-tl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-tr.png" width="100" height="100" alt="Image download support must be enabled" /></td></tr> + <tr><td><img src="support/test-bl.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/test-br.png" width="100" height="100" alt="Image download support must be enabled" /></td></tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/root-box-002.xht b/testing/web-platform/tests/css/CSS2/box-display/root-box-002.xht new file mode 100644 index 0000000000..f7c43460e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/root-box-002.xht @@ -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: Styling the root element: display:table</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <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-07-01 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/root/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <link rel="match" href="root-box-002-ref.xht" /> + + <meta name="flags" content="image"/> + <meta name="assert" content="HTML elements can be set to other display + property values - like sub-table elements just like in this testcase - + in order to behave like another element."/> + <style type="text/css"> + * { display: none; padding: 0; border: 0; margin: 0; width: auto; height: auto; } + html:before { content: "There should be a single unbroken yin-yang symbol below."; + display: table-caption; margin: 0 auto -1.2em; padding: .1em; + min-height: 1em; + background: white; color: black; } + html { display: table; border-spacing: 0; margin: 0 auto; + border-top: 1em solid red; } + head, body { display: table-row; } + div, style[title] { display: table-cell; width: 100px; height: 100px; } + [title="tl"] { background: url(support/test-tl.png); } + [title="tr"] { background: url(support/test-tr.png); } + .bl { background: url(support/test-bl.png); } + .br { background: url(support/test-br.png); } + </style> + <style title="tl" type=""></style> + <style title="tr" type=""></style> + </head> + <body> + <div class="bl"></div> + <div class="br"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/root-box-003-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/root-box-003-ref.xht new file mode 100644 index 0000000000..a86194448a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/root-box-003-ref.xht @@ -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[ + html {height: 100%;} + + body {background-color: green;} + ]]></style> + + </head> + + <body> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/root-box-003.xht b/testing/web-platform/tests/css/CSS2/box-display/root-box-003.xht new file mode 100644 index 0000000000..088b3b257d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/root-box-003.xht @@ -0,0 +1,18 @@ +<!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: Styling the root element: display:none (page should be a big green expanse)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/root/003.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <link rel="match" href="root-box-003-ref.xht" /> + + <style type="text/css"> + html { display: none; background: green; color: red; } + body { background: red; color: yellow; } + </style> + </head> + <body> + <p>FAIL</p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/root-canvas-001-ref.xht b/testing/web-platform/tests/css/CSS2/box-display/root-canvas-001-ref.xht new file mode 100644 index 0000000000..55cd7cccd0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/root-canvas-001-ref.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + border: lime solid medium; + color: white; + height: 10em; + width: 10em; + } + ]]></style> + + </head> + + <body> + + <p>There should be no red, only a green square with white text and a lime green border.</p> + + <div>This square must be green.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/root-canvas-001.xht b/testing/web-platform/tests/css/CSS2/box-display/root-canvas-001.xht new file mode 100644 index 0000000000..87d747ee5e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/root-canvas-001.xht @@ -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 Test: Canvas: Embedded documents</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <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-11 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/model/canvas/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#viewport"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#containing-block-details"/> + <link rel="match" href="root-canvas-001-ref.xht" /> + + <style type="text/css"> + div { width: 10em; height: 10em; border: solid lime; background: red; padding: 0; } + object { width: 10em; height: 10em; margin: 0; padding: 0; border: 0; } + </style> + </head> + <body> + <p>There should be no red, only a green square with white text and a lime green border.</p> + <div><object type="text/html" data="support/root-canvas-001a.html">FAIL</object></div> + + <!-- reasoning: + + Section 9.1.1: + # There is at most one viewport per canvas + -> http://www.w3.org/TR/CSS21/visuren.html#q2 + + Section 2.3.1: + # the term canvas describes "the space where the formatting + # structure is rendered." + -> http://www.w3.org/TR/CSS21/intro.html#q4 + + Section 2.3, item 5: + # From the annotated document tree, generate a formatting + # structure. + -> http://www.w3.org/TR/CSS21/intro.html#processing-model + + Section 2.3, item 1: + # Parse the source document and create a document tree. + -> http://www.w3.org/TR/CSS21/intro.html#processing-model + + ...therefore is a viewport per rendered document. Since there are + two documents on this page (the main one and the one in the + object) there are two viewports. + + The question becomes, what size is the viewport on the object + element. The spec doesn't define this, but if we consider the + desired results of the following proposed rule: + + @viewport { overflow: scroll; } + + ...I don't think it makes sense for the viewport to be anything + other than the size of the object element's box. + + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/1x1-green.png b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-green.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/1x1-lime.png b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/1x1-maroon.png b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/1x1-navy.png b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/1x1-red.png b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-red.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/1x1-white.png b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/1x1-white.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/60x60-gg-rr.png b/testing/web-platform/tests/css/CSS2/box-display/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/60x60-green.png b/testing/web-platform/tests/css/CSS2/box-display/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/60x60-green.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/a-green.css b/testing/web-platform/tests/css/CSS2/box-display/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/b-green.css b/testing/web-platform/tests/css/CSS2/box-display/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/b-green.css @@ -0,0 +1 @@ +.b { color: green; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/blue15x15.png b/testing/web-platform/tests/css/CSS2/box-display/support/blue15x15.png Binary files differnew file mode 100644 index 0000000000..89de32fdb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/blue15x15.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/blue96x96.png b/testing/web-platform/tests/css/CSS2/box-display/support/blue96x96.png Binary files differnew file mode 100644 index 0000000000..820f8cace2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/blue96x96.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/c-red.css b/testing/web-platform/tests/css/CSS2/box-display/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/c-red.css @@ -0,0 +1 @@ +.c { color: red; }
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/cat.png b/testing/web-platform/tests/css/CSS2/box-display/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/cat.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/diamond.png b/testing/web-platform/tests/css/CSS2/box-display/support/diamond.png Binary files differnew file mode 100644 index 0000000000..51112efc7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/diamond.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/green15x15.png b/testing/web-platform/tests/css/CSS2/box-display/support/green15x15.png Binary files differnew file mode 100644 index 0000000000..51741584a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/green15x15.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..9b88fbd811 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..d454e3a630 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/pattern-tr.png b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/ring.png b/testing/web-platform/tests/css/CSS2/box-display/support/ring.png Binary files differnew file mode 100644 index 0000000000..061bb94eba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/ring.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/root-canvas-001a.html b/testing/web-platform/tests/css/CSS2/box-display/support/root-canvas-001a.html new file mode 100644 index 0000000000..4cfa963ff0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/root-canvas-001a.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>Canvas: Embedded documents: Internal</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/model/canvas/001a.html" type="text/html"/> + <style type="text/css"> + html, body { background: red; color: white; } + html, body, p { + margin: 0; padding: 0; border: 0; height: 100%; + } + p { + background: green; + } + </style> + </head> + <body> + <p>This square must be green.</p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/square-purple.png b/testing/web-platform/tests/css/CSS2/box-display/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/square-purple.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/square-teal.png b/testing/web-platform/tests/css/CSS2/box-display/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/square-teal.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/square-white.png b/testing/web-platform/tests/css/CSS2/box-display/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/square-white.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/swatch-blue.png b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/swatch-green.png b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-green.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/swatch-lime.png b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/swatch-orange.png b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/swatch-red.png b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-red.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/swatch-white.png b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-white.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/swatch-yellow.png b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/test-bl.png b/testing/web-platform/tests/css/CSS2/box-display/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/test-bl.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/test-br.png b/testing/web-platform/tests/css/CSS2/box-display/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/test-br.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/test-outer.png b/testing/web-platform/tests/css/CSS2/box-display/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/test-outer.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/test-tl.png b/testing/web-platform/tests/css/CSS2/box-display/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/test-tl.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/test-tr.png b/testing/web-platform/tests/css/CSS2/box-display/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/test-tr.png diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/viewport-004-firstcanvas.htm b/testing/web-platform/tests/css/CSS2/box-display/support/viewport-004-firstcanvas.htm new file mode 100644 index 0000000000..297302f376 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/viewport-004-firstcanvas.htm @@ -0,0 +1,18 @@ +<!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 Suite: Viewport-004 pass conditions</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/" /> + <meta name="assert" content="" /> + <style type="text/css"> + body + { + background: blue; + } + </style> + </head> + <body> + <p>Test passes if the page is blue or orange or a combination of both.</p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/support/viewport-004-secondcanvas.htm b/testing/web-platform/tests/css/CSS2/box-display/support/viewport-004-secondcanvas.htm new file mode 100644 index 0000000000..c924f8e079 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/support/viewport-004-secondcanvas.htm @@ -0,0 +1,18 @@ +<!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 Suite: </title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/" /> + <meta name="assert" content="" /> + <style type="text/css"> + body + { + background: orange; + } + </style> + </head> + <body> + <p></p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/viewport-001.xht b/testing/web-platform/tests/css/CSS2/box-display/viewport-001.xht new file mode 100644 index 0000000000..a6204458b4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/viewport-001.xht @@ -0,0 +1,14 @@ +<!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: Viewport resize can change layout</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#viewport" /> + <meta name="flags" content="interact may" /> + <meta name="assert" content="Resizing the viewport may change the layout of page." /> + <style type="text/css"></style> + </head> + <body> + <p>Test passes regardless if this text wraps or does not wrap when the page is resized to a small width.</p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/viewport-002.xht b/testing/web-platform/tests/css/CSS2/box-display/viewport-002.xht new file mode 100644 index 0000000000..fc55e20b9f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/viewport-002.xht @@ -0,0 +1,21 @@ +<!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: Scrolling mechanism</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#viewport" /> + <meta name="flags" content="interact scroll should" /> + <meta name="assert" content="Scrolling mechanism should be available when canvas is larger than viewport." /> + <style type="text/css"> + div + { + margin-top: 2000px; + } + </style> + </head> + <body> + <p>Test passes if this page can be scrolled to the words "Bottom of page".</p> + <div>Bottom of page</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/viewport-003.xht b/testing/web-platform/tests/css/CSS2/box-display/viewport-003.xht new file mode 100644 index 0000000000..b67bc3bb1e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/viewport-003.xht @@ -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: Scrolling mechanism and right-to-left</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#viewport" /> + <meta name="flags" content="interact scroll should" /> + <meta name="assert" content="Scrolling mechanism should be available when canvas is larger than viewport even when page is set to right-to-left." /> + <style type="text/css"> + body + { + direction: rtl; + } + div + { + margin-top: 2000px; + } + </style> + </head> + <body> + <p>Test passes if this page can be scrolled to the words "Bottom of page".‎</p> + <div>Bottom of page</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/box-display/viewport-004.xht b/testing/web-platform/tests/css/CSS2/box-display/viewport-004.xht new file mode 100644 index 0000000000..6c748b2fff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/box-display/viewport-004.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Rendering more than one canvas</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#viewport" /> + <meta name="flags" content="may" /> + <meta name="assert" content="User agents may render more than one canvas." /> + <style type="text/css"> + </style> + </head> + <frameset cols="*,*"> + <frame src="support/viewport-004-firstcanvas.htm" /> + <frame src="support/viewport-004-secondcanvas.htm" /> + <noframes> + <body> + <p>Test passes if this text is visible.</p> + </body> + </noframes> + </frameset> +</html>
\ No newline at end of file |
