diff options
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/floats-clear')
407 files changed, 13720 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjacent-floats-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/adjacent-floats-001-ref.xht new file mode 100644 index 0000000000..2a4c9f9432 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjacent-floats-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 orange square is to the left of the blue square and the squares top edges are aligned.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjacent-floats-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/adjacent-floats-001.xht new file mode 100644 index 0000000000..47bfd21ba9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjacent-floats-001.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: Multiple floated boxes adjacent to each other</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="adjacent-floats-001-ref.xht" /> + + <meta name="assert" content="Floated boxes are allowed to be next to each other." /> + <style type="text/css"> + div div + { + float: left; + height: 1in; + width: 1in; + } + #div1 + { + background-color: orange; + } + #div2 + { + background-color: blue; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the left of the blue square and the squares top edges are aligned.</p> + <div> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-before-clearance.html b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-before-clearance.html new file mode 100644 index 0000000000..13041a2749 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-before-clearance.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Float that would be adjoining if there were no clearance</title> +<meta name="assert" content="If the clearance candidate would pull a float down with it (due to margin collapsing) if there were no clearance, clearance needs to be inserted to separate the two, so that the block can go past the float. No matter how large the margin is, it should still be just below the float."> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; background:red;"> + <div> + <div style="float:left; width:100px; height:50px; background:green;"></div> + </div> + <div style="margin-top:400px; clear:left; height:50px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-002.html b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-002.html new file mode 100644 index 0000000000..ed8ffd26fa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-002.html @@ -0,0 +1,75 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<style> +#container { + width: 100px; + background: green; +} +#left { + float: left; + width: 25px; + height: 10px; +} +#right { + float: right; + width: 25px; + height: 20px; +} +#clears-left { + clear: left; +} +#zero { + margin-bottom: 40px; + margin-top: -20px; +} +#nested-float { + float: left; + width: 25px; + height: 20px; +} +#new-formatting-context { + overflow: hidden; + width: 60px; + height: 80px; + margin-top: -30px; +} +</style> +<p>Test passes if there is a filled green square.</p> +<div id=container> + <div id=left></div> + <div id=right></div> + <div> + <div id=clears-left> + <div> + <div id=zero></div> + <div id=nested-float></div> + <!-- + The margins up to this new formatting context are chosen to hit an + edge condition. At this point there are two possible margins: + - (adjoining) {-30px, 40px} => 10px + - (non-adjoining) {-20px, 40px} => 20px + + The logic for placing this new formatting context however shouldn't + check these margins, as there is an ancestor ("clears-left") which + has clearance past adjoining floats ("left", and "right"). + + And "nested-float" should get placed at "10px". + + However if we didn't have this logic the following would occur. + 1. We'd try and place the formatting context using the "adjoining" + margins. + 2. The new formatting context doesn't "fit" on the same edge as the + floats, so it would trigger a retry using with a new position + calculated using the "non-adjoining" margins. + 3. During the next pass, it still doesn't think the margins have + been separated yet as the parent is still using the position + calculated by the forced clearance from above. + 4. It will trigger a retry again (and if an implementation does this + in a loop, will timeout). + --> + <div id=new-formatting-context></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-003.html b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-003.html new file mode 100644 index 0000000000..4c080d2b7f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="overflow: hidden; width: 100px; background: red; position: relative;"> + <div style="float: left; height: 50px; width: 50px; background: green"></div> + <div style="height: 40px; background: green;"></div> + <div style="margin-top: 15px; clear: both;"> + <div style="width: 50px; height: 50px; background: green; float: left;"></div> + <div style="margin-top: -10px;"> + <span style="display: inline-block; width: 50px; height: 40px; background: green;"></span> + </div> + <div style="position: absolute; width: 50px; height: 10px; right: 0; top: 40px; background: green;"></div> + <div style="position: absolute; width: 50px; height: 10px; right: 0; bottom: 0; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-004.html b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-004.html new file mode 100644 index 0000000000..bda89a9f6f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance-004.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<html> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html" /> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<p>Test passes if there is a filled green square.</p> +<div style="overflow: hidden;"></div> +<div style="float: left; width: 100px; height: 50px; background: green;"></div> +<span> + <div style="clear: both;"> + <div style="height: 10px;"> + <div style="float: left; width: 100px; height: 50px; background: green;"> + </div> + </div> +</span> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance.html b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance.html new file mode 100644 index 0000000000..426b47537b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-nested-forced-clearance.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="position: absolute; width: 100px; height: 100px; background: red;"></div> +<div style="position: absolute; width: 100px;"> + <div> + <div style="float:left; width:100px; height:50px; background: green;"></div> + <div style="clear:both;"> + <div style="float:left; width:10px; height:10px;"></div> + <div style="margin-top:100px; height:50px; background: green;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-new-fc-crash.html b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-new-fc-crash.html new file mode 100644 index 0000000000..b220a48422 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-new-fc-crash.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=987004"> +<meta name="assert" content="The renderer should not crash."> +<div style="width: 100px; overflow: hidden;"> + <div style="float: left; width: 100%; height: 20px; background: hotpink;"></div> + <div style="clear: both;"> + <span style="position: absolute; width: 10px; height: 10px; background: orange;"></span> + <div style="height: 10px; background: green; overflow: hidden;"></div> + </div> +</div> +<script> +test(() => { +}, 'Test passes if the renderer does not crash.'); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-new-fc.html b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-new-fc.html new file mode 100644 index 0000000000..587bbf51b7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/adjoining-float-new-fc.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>New formatting context next to adjoining float</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; overflow:hidden; background:red;"> + <div> + <div style="float:left; width:100px; height:50px; background:green;"></div> + <div style="margin-top:300px; clear:left; overflow:hidden; width:100px; height:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-001-ref.xht new file mode 100644 index 0000000000..e607591a90 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-001-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: bottom;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is an orange square below a blue square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-001.xht new file mode 100644 index 0000000000..e692241428 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-001.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 Test: Clear set 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-07-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property set to a value of 'left' positions the current element to clear left-floated elements." /> + <style type="text/css"> + #div1 + { + width: 500px; + } + div div + { + height: 1in; + width: 1in; + } + #div2 + { + background: blue; + float: left; + } + #div3 + { + background: orange; + clear: left; + } + </style> + </head> + <body> + <p>Test passes if there is an orange square below a blue square.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-002-ref.xht new file mode 100644 index 0000000000..2e2b0b6c4a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-002-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin-bottom: 0px;} + + img + { + left: 404px; + position: relative; + vertical-align: bottom; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is an orange square below a blue square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-002.xht new file mode 100644 index 0000000000..f64848f910 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-002.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 Test: Clear set to 'right'</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-002-ref.xht" /> + + <meta name="assert" content="The 'clear' property set to a value of 'right' positions the current element to clear right-floated elements." /> + <style type="text/css"> + #div1 + { + width: 500px; + } + div div + { + float: right; + height: 1in; + width: 1in; + } + #div2 + { + background: blue; + } + #div3 + { + background: orange; + clear: right; + } + </style> + </head> + <body> + <p>Test passes if there is an orange square below a blue square.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-003-ref.xht new file mode 100644 index 0000000000..38b152c320 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-003-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a black box below the blue and orange boxes.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="144" alt="Image download support must be enabled" /></div> + + <div><img src="support/black15x15.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-003.xht new file mode 100644 index 0000000000..7e5d19baa2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-003.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear set to 'both'</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-003-ref.xht" /> + + <meta content="The 'clear' property set to a value of 'both' positions the current element to clear both left- and right-floated elements." name="assert" /> + <style type="text/css"> + #div1 + { + width: 2in; + } + div div + { + height: 1in; + width: 1in; + } + #div2 + { + background: blue; + float: left; + } + #div3 + { + float: right; + background: orange; + height: 1.5in; + } + #div4 + { + background: black; + clear: both; + } + </style> + </head> + <body> + <p>Test passes if there is a black box below the blue and orange boxes.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-004.xht new file mode 100644 index 0000000000..32ecd2a897 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-004.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: Clear 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-07-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="The 'clear' property set to a value of 'none' does not perform any clearing of floated elements." /> + <style type="text/css"> + div div + { + height: 100px; + width: 100px; + } + #div2 + { + background: green; + float: left; + } + #div3 + { + background: red; + clear: none; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-005.xht new file mode 100644 index 0000000000..5298239a25 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-005.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear 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-07-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property set to 'inherit', inherits the computed value from the parent element." /> + <style type="text/css"> + #div1 + { + clear: left; + width: 500px; + } + div div + { + height: 1in; + width: 1in; + } + #div2 + { + background: blue; + float: left; + } + #div3 + { + background: orange; + clear: inherit; + } + </style> + </head> + <body> + <p>Test passes if there is an orange square below a blue square.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-after-top-margin.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-after-top-margin.html new file mode 100644 index 0000000000..95b445657c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-after-top-margin.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Clearance inside block with top margin</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="float:right; width:100px; height:100px;"></div> +<!-- Using padding to prevent the child margin from pulling the block down. --> +<div style="padding-top:10px; width:100px; background:green;"> + <div style="margin-top:80px;"> + <div style="clear:right;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-000-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-000-ref.xht new file mode 100644 index 0000000000..973d1c6a05 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-000-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 word PASS appears on a single line.</p> + + <div>PASS</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-000.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-000.xht new file mode 100644 index 0000000000..7b7cb9e76d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-000.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: Clear on floats after floats with display:none blocks between them</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/clear/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#display-prop" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-000-ref.xht" /> + + <style type="text/css"> + .float { float: left; margin: 0; } + .clear { clear: left; display: none; background: red; } + </style> + </head> + <body> + <p>Test passes if the word PASS appears on a single line.</p> + <div class="float">PA</div> + <div class="clear">| FAIL |</div> + <div class="float">SS</div> + </body> +</html> + + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-001-ref.xht new file mode 100644 index 0000000000..785c5212f4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-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[ + img + { + left: 328px; + position: absolute; + top: 8px; + } + + p + { + line-height: 1.25; + margin-top: 24px; + width: 320px; + } + ]]></style> + + </head> + + <body> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <p>Test passes if there is a filled blue square to the right of this text.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-001.xht new file mode 100644 index 0000000000..ff423f0bd5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-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: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-row-group'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + #test + { + background: blue; + clear: both; + display: table-row-group; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="test"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-002.xht new file mode 100644 index 0000000000..4ecd5cdb8d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-002.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-header-group'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + #test + { + background: blue; + clear: both; + display: table-header-group; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="test"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-003.xht new file mode 100644 index 0000000000..8372b314da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-003.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-footer-group'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + #test + { + background: blue; + display: table-footer-group; + clear: both; + } + + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="test"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-004.xht new file mode 100644 index 0000000000..ce773dc5da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-004.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: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-row'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + .test + { + background: blue; + display: table-row; + clear: both; + } + + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div class="test"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="test"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-005.xht new file mode 100644 index 0000000000..c155bbf57b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-005.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 Test: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-column-group'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + #test + { + display: table-column-group; + clear: both; + } + + .col + { + display: table-column; + } + + .row + { + display: table-row; + } + .cell + { + background: blue; + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="test"><div class="col"></div><div class="col"></div></div> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-006.xht new file mode 100644 index 0000000000..ea2027ff6a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-006.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-column'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + #test + { + clear: both; + display: table-column; + } + .row + { + display: table-row; + } + .cell + { + background: blue; + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="test"></div> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-007.xht new file mode 100644 index 0000000000..a15268b53c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-007.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 Test: Clear applied to element with '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-12-14--> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-cell'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + #cell + { + background: blue; + color: blue; + display: table-cell; + clear: both; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="cell">C</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-008-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-008-ref.xht new file mode 100644 index 0000000000..e947a1a4c5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-008-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + body {margin-bottom: 0px;} + + div {height: 10em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the word PASS appears on a single line below.</p> + + <div>PASS</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-008.xht new file mode 100644 index 0000000000..1ff09c6cc1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-008.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: Clear on inline elements</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-04-07 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/clear/001-demo.html" type="text/html" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-008-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'inline'." /> + <style type="text/css"> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + .float { float: left; height: 10em; } + .clear { clear: left; } + </style> + </head> + <body> + <p>Test passes if the word PASS appears on a single line below.</p> + <div><div class="float">P</div><span class="clear">A</span>SS</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-009-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-009-ref.xht new file mode 100644 index 0000000000..f8e1401e43 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-009-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + p + { + line-height: 1.25; + margin: 1.5em 0 1em; + width: 320px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled blue square <strong>below this text</strong>.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-009.xht new file mode 100644 index 0000000000..d9facbeedd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-009.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 Test: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-009-ref.xht" /> + + <meta name="assert" content="The 'clear' property applies to elements with a display of block." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + span + { + background: blue; + color: blue; + display: block; + clear: both; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square <strong>below this text</strong>.</p> + <div> + <span>B</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-010.xht new file mode 100644 index 0000000000..7e8de8efca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-010.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: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <meta name="assert" content="The 'clear' property applies to elements with a display of list-item." /> + <style type="text/css"> + body + { + margin-left: 2em; + } + p + { + float: left; + } + div + { + background: blue; + color: blue; + display: list-item; + clear: both; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square <strong>below this text</strong> and a marker bullet on its left-hand side.</p> + <div>L</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-012.xht new file mode 100644 index 0000000000..a1d2a032a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-012.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 Test: Clear applied to element with 'display' set to inline-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-12-17 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'inline-block'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + div + { + background: blue; + display: inline-block; + clear: both; + width: 1in; + } + + + span.block-descendant + { + color: blue; + display: block; + height: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div> + <span class="block-descendant"> a</span> + <span class="block-descendant"> b</span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-013.xht new file mode 100644 index 0000000000..ec65a778f8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-013.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-009-ref.xht" /> + + <meta name="assert" content="The 'clear' property does apply to elements with a display of 'table'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + #table + { + background: blue; + clear: both; + display: table; + table-layout: fixed; + width: 1in; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square <strong>below this text</strong>.</p> + + <div id="table"> + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-014.xht new file mode 100644 index 0000000000..5844658e1a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-014.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'inline-table'." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + #table + { + background: blue; + clear: both; + display: inline-table; + table-layout: fixed; + width: 1in; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="table"> + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-015.xht new file mode 100644 index 0000000000..591fd95506 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-applies-to-015.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 Test: Clear applied to element with '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/" /> <!-- 2013-01-10 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + + <link rel="match" href="clear-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'clear' property does not apply to elements with a display of 'table-caption' because an anonymous table wrapper box will be generated for a misparented table-caption element and such anonymous table wrapper box creates a block formatting context. Clear will not apply to floats outside a block formatting context." /> + <style type="text/css"> + body {margin: 8px;} + + p + { + float: left; + line-height: 1.25; + margin: 1em 0; + width: 320px; + } + + #caption + { + background: blue; + clear: both; + color: blue; + display: table-caption; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square to the right of this text.</p> + + <div id="caption">C</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-001-ref.xht new file mode 100644 index 0000000000..c6087ea752 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-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 + { + background-color: green; + height: 1.25em; + margin: 1em 0em 1.25em; + width: 6.25em; + } + + div + div {margin-bottom: 2.5em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-001.xht new file mode 100644 index 0000000000..e3df457555 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-001.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: Clearance calculations - clear box non-collapsing margins with larger margings than clearance</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-clearance-calculation-001-ref.xht" /> + + <meta name="flags" content="ahem image" /> + <meta name="assert" content="When a cleared element has more top margin than the height of the floated element the margin is collpased with previous in-flow children. The element is then placed at the point of the resulting collapsed margin." /> + <!-- C1 = H-M2 --> + <!-- C2 = Max(M1, M2) - M1 - M2 --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + width: 5em; + } + #parent + { + background: url('support/clear-clearance-calculation-001.png'); + min-height: 6em; + } + div div + { + background: green; + height: 1em; + } + #div1 + { + margin-bottom: 1em; + } + #div2 + { + float: left; + margin: 0; + } + #div3 + { + clear: left; + margin-top: 4em; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="parent"> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-002-ref.xht new file mode 100644 index 0000000000..b90c818d3d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-002-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 + { + background-color: green; + height: 1.25em; + margin: 1em 0em 5em; + width: 6.25em; + } + + div + div {height: 3.75em} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-002.xht new file mode 100644 index 0000000000..3ec8887a52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-002.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clearance calculations - clear box non-collapsing margins with larger clearance than margins</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-clearance-calculation-002-ref.xht" /> + + <meta name="flags" content="ahem image" /> + <meta name="assert" content="If after margin collapsing the position of the cleared element is above or hypothetically positioned within the layout position of the float. Then the cleared element is positioned directly below the floated element." /> + <!-- C1 = H-M2 --> + <!-- C2 = Max(M1, M2) - M1 - M2 --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + width: 5em; + } + #parent + { + background: url('support/clear-clearance-calculation-002.png'); + min-height: 8em; + } + div div + { + background: green; + height: 1em; + } + #div1 + { + margin-bottom: 4em; + } + #div2 + { + float: left; + height: 2em; + margin: 0; + } + #div3 + { + clear: left; + margin-top: 3em; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="parent"> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-003-ref.xht new file mode 100644 index 0000000000..f2c3f43618 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-003-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 + { + background-color: green; + height: 1.25em; + margin: 1em 0em 1.25em; + width: 6.25em; + } + + div + div {margin-bottom: 3.75em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-003.xht new file mode 100644 index 0000000000..79362e199d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-003.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 Test: Clearance calculations - clear box collapsing margins</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-clearance-calculation-003-ref.xht" /> + + <meta name="assert" content="When a cleared element has more top margin than the height of the floated element the margin is collpased with previous in-flow children. The element is then placed at the point of the resulting collapsed margin." /> + <!-- C1 = H-MT2 --> + <!-- C2 = Max(M1, MT2, MB2) - M1 - MT2 --> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + width: 5em; + } + #parent + { + background: url('support/clear-clearance-calculation-003.png'); + min-height: 7em; + position: relative; + } + #div1 + { + margin-bottom: 1em; + } + #div2 + { + float: left; + margin: 0; + } + #div3 + { + background: red; + clear: left; + margin-bottom: 5em; + margin-top: 4em; + } + #div1, #div2, #div4 + { + background: green; + height: 1em; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="parent"> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-004-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-004-ref.xht new file mode 100644 index 0000000000..45d794c7c1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-004-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + div + { + background-color: green; + height: 100px; + margin: 108px 0px 1em; + } + + p {margin: 1em 0em;} + ]]></style> + + </head> + + <body> + + <div></div> + +<p>Test passes if there is a wide green rectangle above and <strong>no red</strong>.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-004.xht new file mode 100644 index 0000000000..945dfd99da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-004.xht @@ -0,0 +1,67 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: clear and clearance calculation - margin collapsing</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#flow-control" /> + <link rel="match" href="clear-clearance-calculation-004-ref.xht" /> + + <meta content="With clear: left, the top border edge of the last paragraph must be below the floating paragraph, i.e., 50px lower. That means that the margin-bottom of the first paragraph must not collapse with the margin-top of the last paragraph and clearance must be added such that clearance + margin-top of last paragraph = 50px, i.e., clearance = 50px - margin-top of last paragraph = 50px - 75px = - 25px." name="assert" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + #overlapped-red + { + background-color: red; + height: 100px; + left: 8px; + position: absolute; + right: 8px; + top: 108px; + z-index: -1; + } + + #firstParg + { + height: 25px; + margin-bottom: 25px; + margin-top: 0px; + } + + #floatingParg + { + float: left; + height: 50px; + margin: 0; + } + + #lastParg + { + background-color: green; + clear: left; + height: 100px; + margin-top: 75px; + } + ]]></style> + + </head> + + <body> + + <div id="overlapped-red"></div> + + <p id="firstParg"></p> + + <p id="floatingParg"></p> + + <p id="lastParg"></p> + + <p>Test passes if there is a wide green rectangle above and <strong>no red</strong>.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-005-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-005-ref.xht new file mode 100644 index 0000000000..d5b6249959 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-005-ref.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 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[ + body {margin: 8px;} + + div + { + background-color: green; + color: orange; + font: 100px/1 Ahem; + margin: 118px 0px 0px; + } + + p {margin: 1em 0em;} + ]]></style> + + </head> + + <body> + + <div>XX</div> + + <p>Test passes if there is above an orange rectangle and a wide green rectangle side by side, touching each other. The top of the orange rectangle should be flush with the top of the green rectangle. There should be no red.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-005.xht new file mode 100644 index 0000000000..5d1416c9d0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-clearance-calculation-005.xht @@ -0,0 +1,69 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: clear and clearance calculation - margin collapsing</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#flow-control" /> + <link rel="match" href="clear-clearance-calculation-005-ref.xht" /> + + <meta content="With clear: none, the first and last paragraphs' margins collapse and the last paragraph's top border edge should be flush with the top of the floating paragraph." name="assert" /> + + <style type="text/css"><![CDATA[ + body {margin: 8px;} + + #overlapped-red + { + background-color: red; + height: 100px; + left: 8px; + position: absolute; + right: 8px; + top: 118px; + z-index: -1; + } + + #firstParg + { + height: 20px; + margin-bottom: 90px; + margin-top: 0px; + } + + #floatingParg + { + background-color: orange; + float: left; + height: 100px; + margin: 0; + width: 200px; + } + + #lastParg + { + background-color: green; + clear: none; + height: 100px; + margin-top: 75px; + } + ]]></style> + + </head> + + <body> + + <div id="overlapped-red"></div> + + <p id="firstParg"></p> + + <p id="floatingParg"></p> + + <p id="lastParg"></p> + + <p>Test passes if there is above an orange rectangle and a wide green rectangle side by side, touching each other. The top of the orange rectangle should be flush with the top of the green rectangle. There should be no red.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-default-inheritance-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-default-inheritance-001.xht new file mode 100644 index 0000000000..57064dccd0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-default-inheritance-001.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear default 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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="The 'clear' property is not inherited by default from the parent element." /> + <style type="text/css"> + #div1 + { + clear: left; + } + div div + { + height: 100px; + width: 100px; + } + #div2 + { + background: green; + float: left; + } + #div3 + { + background: red; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-001-ref.xht new file mode 100644 index 0000000000..04a7b5c95e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-001-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the yellow square is directly to the right of the blue square and the yellow and blue squares are below the orange square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-yellow.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-001.xht new file mode 100644 index 0000000000..436ff4b0b5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-001.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 Test: Child elements are not impacted by 'clear'</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-float-001-ref.xht" /> + + <meta name="assert" content="Child elements of the container are not impacted by clear." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + } + #div2 + { + background: blue; + clear: both; + width: 2in; + } + #div3 + { + background: yellow; + float: right; + } + </style> + </head> + <body> + <p>Test passes if the yellow square is directly to the right of the blue square and the yellow and blue squares are below the orange square.</p> + <div id="div1"></div> + <div id="div2"> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-002-ref.xht new file mode 100644 index 0000000000..5b46a0594f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-002-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; + height: 96px; + left: 96px; + position: relative; + width: 96px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-002.xht new file mode 100644 index 0000000000..27d7e15717 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-002.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clearance of floats and top margin affect</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-float-002-ref.xht" /> + + <meta name="assert" content="Clearance is introduced as spacing above the top margin." /> + <style type="text/css"> + div div + { + float: right; + height: 1in; + width: 1in; + } + #div1 + { + height: 2in; + width: 2in; + } + #div2 + { + background: red; + } + #div3 + { + background: green; + clear: right; + margin-top: -1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-003-ref.xht new file mode 100644 index 0000000000..c77332b1f3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-003-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; + height: 96px; + margin-left: 96px; + margin-top: 96px; + width: 96px; + } + ]]></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/floats-clear/clear-float-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-003.xht new file mode 100644 index 0000000000..12e9e05ce6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-003.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: Clear floats handled after margin collapsing</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-float-003-ref.xht" /> + + <meta name="assert" content="Clearance is introduced as spacing above the top margin after margin collapsing occurs." /> + <style type="text/css"> + #div1 + { + height: 2in; + width: 2in; + } + #div2 + { + background: red; + } + #div3 + { + margin-top: 1in; + margin-bottom: 1in; + } + #div4 + { + background: green; + clear: right; + margin-top: -1in; + } + #div2, #div4 + { + float: right; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-004-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-004-ref.xht new file mode 100644 index 0000000000..da392c370b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-004-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: bottom;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange square is positioned above the blue square and if there is no red.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-004.xht new file mode 100644 index 0000000000..35c0ab4f17 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-004.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: Clear set to 'left' with earlier left floated 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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-float-004-ref.xht" /> + + <meta name="assert" content="Boxes with 'clear: left' need to clear earlier left floated boxes." /> + <style type="text/css"> + span + { + float: left; + height: 1in; + width: 1in; + } + #span1 + { + background-color: orange; + } + #span2 + { + background: blue; + clear: left; + } + </style> + </head> + <body> + <p>Test passes if the orange square is positioned above the blue square and if there is no red.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-005-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-005-ref.xht new file mode 100644 index 0000000000..1a81364b96 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-005-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[ + img + { + position: relative; + left: 96px; + vertical-align: bottom; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is directly below the orange square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-005.xht new file mode 100644 index 0000000000..141caf2698 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-005.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear set to 'right' with earlier right floated 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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-float-005-ref.xht" /> + + <meta name="assert" content="Boxes with 'clear: right' need to clear earlier right floated boxes." /> + <style type="text/css"> + div + { + width: 2in; + } + span + { + float: right; + height: 1in; + width: 1in; + } + #span1 + { + background-color: orange; + } + #span2 + { + background: blue; + clear: right; + } + </style> + </head> + <body> + <p>Test passes if the blue square is directly below the orange square.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-006-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-006-ref.xht new file mode 100644 index 0000000000..a70d0a220b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-006-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: bottom;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue box is below the orange boxes.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-006.xht new file mode 100644 index 0000000000..a8d0f32162 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-006.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear set to 'both' with earlier floated 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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-float-006-ref.xht" /> + + <meta name="assert" content="Boxes with 'clear: both' need to clear earlier floated boxes." /> + <style type="text/css"> + div + { + width: 3in; + } + span + { + height: 1in; + width: 1in; + } + #span1, #span2 + { + background-color: orange; + } + #span1 + { + float: right; + } + #span2, #span3 + { + float: left; + } + #span3 + { + background: blue; + clear: both; + } + </style> + </head> + <body> + <p>Test passes if the blue box is below the orange boxes.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + <span id="span3"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-007.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-007.xht new file mode 100644 index 0000000000..0fa95b2640 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-007.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: Clear set to 'left' with later left floated 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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="adjacent-floats-001-ref.xht" /> + + <meta name="assert" content="Boxes with 'clear: left' do not clear later left floated boxes." /> + <style type="text/css"> + span + { + float: left; + height: 1in; + width: 1in; + } + #span1 + { + background-color: orange; + clear: left; + } + #span2 + { + background: blue; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the left of the blue square and the squares top edges are aligned.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-008.xht new file mode 100644 index 0000000000..6d93e608dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-008.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear set to 'right' with later right floated 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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="adjacent-floats-001-ref.xht" /> + + <meta name="assert" content="Boxes with 'clear: right' do not clear later right floated boxes." /> + <style type="text/css"> + div + { + width: 2in; + } + span + { + float: right; + height: 1in; + width: 1in; + } + #span1 + { + background-color: blue; + clear: right; + } + #span2 + { + background: orange; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the left of the blue square and the squares top edges are aligned.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-009-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-009-ref.xht new file mode 100644 index 0000000000..567b62aebf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-009-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[ + img {vertical-align: bottom;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is to the right of the orange squares.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-009.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-009.xht new file mode 100644 index 0000000000..7c2cdb9c8e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-float-009.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Clear set to 'both' with later floated 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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-float-009-ref.xht" /> + + <meta name="assert" content="Boxes with 'clear: both' do not clear later floated boxes." /> + <style type="text/css"> + div + { + width: 4in; + } + span + { + height: 1in; + width: 1in; + } + #span1 + { + background-color: blue; + clear: both; + } + #span1, #span2 + { + float: right; + } + #span2, #span3 + { + background: orange; + } + #span3 + { + float: left; + } + </style> + </head> + <body> + <p>Test passes if the blue square is to the right of the orange squares.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + <span id="span3"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-initial-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-initial-001.xht new file mode 100644 index 0000000000..d4757c923e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-initial-001.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: Clear initial value</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-clear" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + + <meta name="assert" content="The 'clear' property has a initial value of 'none'." /> + <style type="text/css"> + div div + { + height: 100px; + width: 100px; + } + #div2 + { + background: green; + float: left; + } + #div3 + { + background: red; + } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-inline-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-inline-001-ref.xht new file mode 100644 index 0000000000..02e71152c0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-inline-001-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[ + span {background-color: blue;} + + img {vertical-align: top;} + + ]]></style> + + </head> + + <body> + + <p>Test passes if a short blue stripe is to the right of the orange square.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><span>Filler Text</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-inline-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clear-inline-001.xht new file mode 100644 index 0000000000..3cb5318089 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-inline-001.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: Clear on inline 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-07-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="clear-inline-001-ref.xht" /> + + <meta name="assert" content="Clear cannot be applied to an inline box." /> + <style type="text/css"> + #span1 + { + background-color: orange; + float: left; + height: 1in; + width: 1in; + } + #span2 + { + background: blue; + clear: left; + } + </style> + </head> + <body> + <p>Test passes if a short blue stripe is to the right of the orange square.</p> + <div> + <span id="span1"></span> + <span id="span2">Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-no-interpolation.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-no-interpolation.html new file mode 100644 index 0000000000..05db269ec6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-no-interpolation.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<link rel=author href="mailto:jarhar@chromium.org"> +<link rel=help href="https://github.com/w3c/csswg-drafts/issues/4441"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/css/support/interpolation-testcommon.js"></script> + +<body> +<script> +test_no_interpolation({ + property: 'clear', + from: 'initial', + to: 'both' +}); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins-2.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins-2.html new file mode 100644 index 0000000000..594fee03f4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins-2.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Child of block with clear</title> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="width: 100px;background: red;overflow: hidden;"> + <div style="float: right; height: 20px; width: 50%; background: green;"></div> + <div> + <div style="float: left; height:100px; width: 50%; background: green;"></div> + <div> + <div style="clear: right; height: 80px; margin-top: 16px; background: green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins.html new file mode 100644 index 0000000000..f65f314a2f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-child-with-margins.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Child of block with clear</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="position:relative; top:-20px;"> + <div style="float:left; margin-top:20px; width:50px; height:50px; background:green;"></div> + <div style="padding-top:1px;"> + <div style="margin-top:19px; width:100px; background:green;"> + <div style="clear:left; margin-top:25px; width:100px; height:50px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-and-child.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-and-child.html new file mode 100644 index 0000000000..d7dc26f30a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-and-child.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>Child of block with clear</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div id="container" style="overflow:hidden; width:200px; height:200px; background:red;"> + <div style="float:left; width:10px; height:50px;"></div> + <div style="float:right; width:10px; height:100px;"></div> + <div style="clear:right;"> + <div style="clear:left; height:200px; background:green;"></div> + </div> + <div style="height:10000px;"></div> +</div> +<script> + document.getElementById("container").scrollTop = 100; +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html new file mode 100644 index 0000000000..f3d3c1891a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins-no-clearance.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Child of block with clear</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="border-top:1px solid white; position:relative; z-index:-1; top:-51px; width:100px; background:green;"> + <div style="float:left; width:100px; height:50px; background:white;"></div> + <div style="clear:left; margin-top:25px;"> + <div style="height:50px; margin-top:150px; background:white;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins.html new file mode 100644 index 0000000000..9b331d5e4c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent-with-margins.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Child of block with clear</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:200px; height:200px; background:red;"> + <div style="float:left; width:200px; height:100px; background:green;"></div> + <div style="clear:left; margin-top:100px;"> + <div style="height:100px; margin-top:-1000px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent.html new file mode 100644 index 0000000000..755cd78809 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-on-parent.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Child of block with clear</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:200px; height:200px; background:red;"> + <div style="float:left; width:200px; height:100px; background:green;"></div> + <div style="clear:left;"> + <div style="height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clear-with-top-margin-after-cleared-empty-block.html b/testing/web-platform/tests/css/CSS2/floats-clear/clear-with-top-margin-after-cleared-empty-block.html new file mode 100644 index 0000000000..5d0fba7981 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clear-with-top-margin-after-cleared-empty-block.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Clearance on empty block followed by block with large margin and 'clear'</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="position:relative; width:100px; border-top:1px solid white; top:-21px; z-index:-1; background:green;"> + <div style="float:left; width:100px; height:20px; background:white;"></div> + <div style="clear:both;"></div> + <div style="clear:both; margin-top:100px; height:20px; background:white;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clearance-006-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clearance-006-ref.xht new file mode 100644 index 0000000000..b57ca537d1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clearance-006-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 + { + background-color: green; + height: 1.25em; + margin: 1em 0em 5em; + width: 6.25em; + } + + div + div {margin-bottom: 0em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clearance-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/clearance-006.xht new file mode 100644 index 0000000000..44cded188c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clearance-006.xht @@ -0,0 +1,46 @@ +<!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: Zero Clearance</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-07-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/> + <link rel="match" href="clearance-006-ref.xht" /> + + <meta name="assert" content="Zero clearance is not the same as no clearance."/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div { + font: 20px/1em Ahem; + width: 5em; + } + .container { + border-top: solid green 1em; + border-bottom: solid red 1em; + height: 4em; + } + .before { + margin-bottom: 2em; + } + .float { + float: left; + height: 2em; + } + .clear { + clear: both; + margin-top: 2em; + height: 1em; + background: green; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div class="container"> + <div class="before"></div> + <div class="float"></div> + <div class="clear"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/clearance-containing-fragmented-float-crash.html b/testing/web-platform/tests/css/CSS2/floats-clear/clearance-containing-fragmented-float-crash.html new file mode 100644 index 0000000000..3e62a52c30 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/clearance-containing-fragmented-float-crash.html @@ -0,0 +1,36 @@ +<!-- quirks mode --> +<meta charset="utf-8"> +<title>Should not crash when a clearance frame having a fragmented float is discovered</title> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="https://www.mozilla.org/"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1663232"> + +<style> +:not(em) { + border-left: 4px dashed green; + column-width: 0; +} +</style> +<script> +function go() { + b.appendChild(a) +} +</script> +<m> +<details ontoggle="go()" open> +<f> +<menu>U<menu> +<table align="RIGHT"> +<caption> +<o> +<ul> +<l> +<li> +<tr>6 +<table> +<a> +<details id="b" open> +<summary> +<i id="a"> +</summary> +<details style="float: right"> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-001.xht new file mode 100644 index 0000000000..2d1a60fc59 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-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: Float set 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-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <meta name="assert" content="The 'float' property set to 'left' correctly aligns the element to the left and text/objects flow around it." /> + <style type="text/css"> + #div1 + { + border: 2px solid orange; + width: 500px; + } + #div2 + { + float: left; + background: blue; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the upper left corner of the orange box and the "Filler Text" flows around the blue square.</p> + <div id="div1"> + <div id="div2"></div> + Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-002.xht new file mode 100644 index 0000000000..0662088d0d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-002.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: Float set to 'right'</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-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <meta name="assert" content="The 'float' property set to 'right' correctly aligns the element to the right and text/objects flow around it." /> + <style type="text/css"> + #div1 + { + border: 2px solid orange; + width: 500px; + } + #div2 + { + float: right; + background: blue; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the upper right corner of the orange box and the "Filler Text" flows around the blue square.</p> + <div id="div1"> + <div id="div2"></div> + Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-003-ref.xht new file mode 100644 index 0000000000..414eeccf30 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-003-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: orange solid 2px; + width: 500px; + } + + img {vertical-align: bottom;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is in the upper left corner of the orange box and all the "Filler Text" is completely below the blue square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><br />Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-003.xht new file mode 100644 index 0000000000..7c18aa8f44 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-003.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: Float 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-26 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="float-003-ref.xht" /> + + <meta name="assert" content="The 'float' property set to 'none' does not float the element." /> + <style type="text/css"> + #div1 + { + border: 2px solid orange; + width: 500px; + } + #div2 + { + float: right; + float: none; + background: blue; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the upper left corner of the orange box and all the "Filler Text" is completely below the blue square.</p> + <div id="div1"> + <div id="div2"></div> + Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-004.xht new file mode 100644 index 0000000000..6a5a91e488 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-004.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: Float 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-07-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <meta name="assert" content="The 'float' property set to 'inherit' correctly inherits the value from the parent element." /> + <style type="text/css"> + #div1 + { + border: 2px solid orange; + width: 500px; + float: right; + } + #div2 + { + float: inherit; + background: blue; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the upper right corner of the orange box and the "Filler Text" flows around the blue square.</p> + <div id="div1"> + <div id="div2"></div> + Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-005-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-005-ref.xht new file mode 100644 index 0000000000..fcd009edcc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-005-ref.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 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: black; + height: 200px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue square fills the upper left corner of a bigger black square.</p> + + <div><img src="support/swatch-blue.png" width="100" height="100" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-005.xht new file mode 100644 index 0000000000..6b5dac999c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-005.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 Test: float - non-positioned block box created after a float</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#floats" /> + <link rel="match" href="float-005-ref.xht" /> + + <meta content="ahem" name="flags" /> + <meta content="A non-positioned block box created after a float box should flow vertically as if the float did not exist. The line boxes created next to the float should be shortened to make room for that preceding floated box." name="assert" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div#left-floated-square + { + color: blue; + float: left; + font: 100px/1 Ahem; + } + + div#non-positioned-block-square-after + { + background-color: black; + height: 200px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if a blue square fills the upper left corner of a bigger black square.</p> + + <div id="left-floated-square">X</div> + + <div id="non-positioned-block-square-after"></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-006-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-006-ref.xht new file mode 100644 index 0000000000..5d1ae28849 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-006-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 10em; + width: 14em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-006.xht new file mode 100644 index 0000000000..d72832437e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-006.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"> + + <head> + + <title>CSS Test: floats - zero height empty float</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <!-- Inspired by http://test.csswg.org/suites/css2.1/20100727/html4/floats-107.htm --> + + <link rel="help" title="Section 9.5 Floats" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="float-006-ref.xht" /> + + <meta content="A zero-height (margin-box) empty float without border and without padding will not require the line box to be shortened; in such case, the zero-height (margin-box) empty float will slide in or will fit in at the top of the line box." name="assert" /> + + <style type="text/css"><![CDATA[ + #rel-pos-containing-block {position: relative;} + + #green-overlapping-abs-pos + { + background-color: green; + border-bottom: green solid 2em; + border-top: green solid 2em; + left: 0em; + padding: 3em; + position: absolute; + width: 8em; + z-index: auto; + } + + #zero-height-first-float + { + float: left; + width: 18em; + /* + or any other width number which would + represent less than the document box width + */ + } + + #red-overlapped-second-float + { + background-color: red; + float: left; + padding: 5em; + width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div id="rel-pos-containing-block"> + <div id="green-overlapping-abs-pos"></div> + <div id="zero-height-first-float"></div> + <div id="red-overlapped-second-float"></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-001.xht new file mode 100644 index 0000000000..9f6bce16b8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-001.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-row-group'." /> + <style type="text/css"> + #test + { + background: blue; + display: table-row-group; + float: right; + } + + #table + { + display: table; + table-layout: fixed; + width: 100%; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div id="test"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-001a.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-001a.xht new file mode 100644 index 0000000000..3cb57aa420 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-001a.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"> + + <head> + + <title>CSS Test: Float applied to element with 'display' set to 'table-row-group'</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#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float' "/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="If 'float' has a value other than 'none' and is applied to an element with a specified 'display' value of 'table-row-group', then the box is floated and its computed 'display' value is set to 'block'." /> + + <style type="text/css"><![CDATA[ + div#table + { + display: table; + table-layout: fixed; + width: 100%; + } + + div#table-row-group + { + background-color: blue; + display: table-row-group; + float: right; + height: 1in; + width: 1in; + } + + div.row {display: table-row;} + + div.cell + { + color: blue; + display: table-cell; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div id="table-row-group"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-002.xht new file mode 100644 index 0000000000..d762ff6a51 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-002.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-header-group'." /> + <style type="text/css"> + #test + { + background: blue; + display: table-header-group; + float: right; + } + #table + { + display: table; + table-layout: fixed; + width: 100%; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div id="test"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-003.xht new file mode 100644 index 0000000000..7b3c06bee7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-003.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-footer-group'." /> + <style type="text/css"> + #test + { + background: blue; + display: table-footer-group; + float: right; + } + #table + { + display: table; + table-layout: fixed; + width: 100%; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div id="test"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-004.xht new file mode 100644 index 0000000000..02e48f1ff6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-004.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-row'." /> + <style type="text/css"> + .test + { + background: blue; + display: table-row; + float: right; + } + #table + { + display: table; + table-layout: fixed; + width: 100%; + } + .cell + { + color: blue; + display: table-cell; + height: 1in; + width: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div class="test"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-004a.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-004a.xht new file mode 100644 index 0000000000..3499544464 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-004a.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: Float applied to element with 'display' set to 'table-row'</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#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float' "/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="If 'float' has a value other than 'none' and is applied to an element with a specified 'display' value of 'table-row', then the box is floated and its computed 'display' value is set to 'block'." /> + + <style type="text/css"><![CDATA[ + div#table + { + display: table; + table-layout: fixed; + width: 100%; + } + + div#table-row + { + background-color: blue; + display: table-row; + float: right; + height: 1in; + width: 1in; + } + + div.cell + { + color: blue; + display: table-cell; + } + + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + <div id="table-row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-005.xht new file mode 100644 index 0000000000..dc92539b95 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-005.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 Test: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-column-group' in which case the box is floated and its computed 'display' value is set to 'block'." /> + <style type="text/css"> + #test + { + background: blue; + display: table-column-group; + float: right; + height: 1in; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + width: 100%; + } + + #col + { + display: table-column; + } + + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div id="test"><div id="col"></div></div> + + <div id="row"> + <div id="cell"></div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-006.xht new file mode 100644 index 0000000000..e140b08270 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-006.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-column' in which case the box is floated and its computed 'display' value is set to 'block'." /> + <style type="text/css"> + #test + { + background: blue; + display: table-column; + float: right; + height: 1in; + width: 1in; + } + #table + { + display: table; + table-layout: fixed; + width: 100%; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div id="test"></div> + + <div id="row"> + <div id="cell"></div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-007.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-007.xht new file mode 100644 index 0000000000..22772d87e6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-007.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 Test: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-cell' in which case the box is floated and its computed 'display' value is set to 'block'." /> + <style type="text/css"> + #table + { + display: table; + table-layout: fixed; + width: 100%; + } + #row + { + display: table-row; + } + #cell + { + background: blue; + display: table-cell; + float: right; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008-ref.xht new file mode 100644 index 0000000000..addfe5eeae --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008-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[ + div {text-align: right;} + ]]></style> + + </head> + + <body> + + <p>Test passes if Filler Text can be seen on the right side of the page.</p> + + <div>Filler Text</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008.xht new file mode 100644 index 0000000000..b192b52102 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="float-applies-to-008-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of inline." /> + <style type="text/css"> + div + { + display: inline; + float: right; + } + </style> + </head> + <body> + <p>Test passes if Filler Text can be seen on the right side of the page.</p> + <div>Filler Text</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008a.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008a.xht new file mode 100644 index 0000000000..b01abc3b46 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-008a.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: Float applied to element with 'display' set to inline</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#dis-pos-flo" title="9.7 Relationships between 'display', 'position', and 'float' "/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="If 'float' has a value other than 'none' and is applied to an element with a specified 'display' value of 'inline', then the box is floated and its computed 'display' value is set to 'block'." /> + + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + color: blue; + display: inline; + float: right; + height: 1in; + width: 1in; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div>a</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-009.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-009.xht new file mode 100644 index 0000000000..9063523826 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-009.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of block." /> + <style type="text/css"> + span + { + background: blue; + display: block; + float: right; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + <div> + <span></span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-010.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-010.xht new file mode 100644 index 0000000000..3af5f4b804 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-010.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <meta name="assert" content="The 'float' property applies to elements with a display of list-item." /> + <style type="text/css"> + div + { + background: blue; + display: list-item; + float: right; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page and a marker bullet on its left-hand side.</p> + <div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-012.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-012.xht new file mode 100644 index 0000000000..3d4bdb8cba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-012.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Float applied to element with 'display' set to inline-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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of inline-block." /> + <style type="text/css"> + span#inline-block + { + background: blue; + display: inline-block; + float: right; + height: 1in; + width: 1in; + } + + span.block-descendant + { + color: blue; + display: block; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div> + <span id="inline-block"> + <span class="block-descendant"> a</span> + <span class="block-descendant"> b</span> + </span> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-013.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-013.xht new file mode 100644 index 0000000000..d071041726 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-013.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 Test: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table'." /> + <style type="text/css"> + #table + { + background: blue; + display: table; + table-layout: fixed; + float: right; + width: 1in; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-014.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-014.xht new file mode 100644 index 0000000000..c2d39ecd2d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-014.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 Test: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'inline-table'." /> + <style type="text/css"> + #table + { + background: blue; + display: inline-table; + table-layout: fixed; + float: right; + width: 1in; + } + .row + { + display: table-row; + } + .cell + { + color: blue; + display: table-cell; + height: 0.5in; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + + <div id="table"> + + <div class="row"> + <div class="cell">a</div><div class="cell">b</div> + </div> + + <div class="row"> + <div class="cell">c</div><div class="cell">d</div> + </div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-015.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-015.xht new file mode 100644 index 0000000000..f1b237f455 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-applies-to-015.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: Float applied to element with '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-12-14 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#propdef-float" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> + <link rel="match" href="../reference/float-applies-to-001-ref.xht" /> + + <meta name="assert" content="The 'float' property applies to elements with a display of 'table-caption'." /> + <style type="text/css"> + #caption + { + background: blue; + display: table-caption; + float: right; + height: 1in; + width: 1in; + } + #table + { + display: table; + width: 100%; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if there is a filled blue square on the right side of the page.</p> + <div id="table"> + <div id="caption"></div> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-height-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-height-001-ref.xht new file mode 100644 index 0000000000..f2bd0ed830 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-height-001-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//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 blue and orange squares have the same height.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-height-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-height-001.xht new file mode 100644 index 0000000000..027429ce38 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-height-001.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: Floated non-replaced element with 'margin-top', margin-bottom' set to 'auto' and 'height' relying on the descendants</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#block-root-margin" /> + <link rel="match" href="float-non-replaced-height-001-ref.xht" /> + + <meta name="assert" content="If 'height' is 'auto' on an floated non-replaced element then the 'height' depends on the descendants." /> + <style type="text/css"> + #div1 + { + position: relative; + } + #div2 + { + background: blue; + float: left; + } + #div2 div, #div3 + { + height: 1in; + width: 1in; + } + #div3 + { + background: orange; + left: 1in; + position: absolute; + top: 0; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same height.</p> + <div id="div1"> + <div id="div2"> + <div></div> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-001-ref.xht new file mode 100644 index 0000000000..bafa658682 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-001-ref.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 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: 192px; + width: 192px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the filled blue square is in the <strong>upper-left corner</strong> of the hollow black square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-001.xht new file mode 100644 index 0000000000..62ff2de22e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-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: Floating non-replaced elements with 'auto' left margin</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-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="match" href="float-non-replaced-width-001-ref.xht" /> + + <meta name="assert" content="If 'margin-left' is computed as 'auto' its used value is '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + div div + { + background-color: blue; + float: left; + margin-left: auto; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is in the <strong>upper-left corner</strong> of the hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-002-ref.xht new file mode 100644 index 0000000000..6e4936b924 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-002-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: 192px; + text-align: center; + width: 192px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the filled blue square is <strong>horizontally centered</strong> inside the hollow black square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-002.xht new file mode 100644 index 0000000000..8d37183a82 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-002.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: Floating non-replaced elements with specified left margin</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="match" href="float-non-replaced-width-002-ref.xht" /> + + <meta name="assert" content="If 'margin-left' is not computed as 'auto' its used value is as specified." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + div div + { + background-color: blue; + float: left; + margin-left: 0.5in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is <strong>horizontally centered</strong> inside the hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-003-ref.xht new file mode 100644 index 0000000000..342cbf7386 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-003-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: 192px; + text-align: right; + width: 192px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the filled blue square is in the <strong>upper-right corner</strong> of the hollow black square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-003.xht new file mode 100644 index 0000000000..23e6b2520a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-003.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: Floating non-replaced elements with 'auto' right margin</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-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="match" href="float-non-replaced-width-003-ref.xht" /> + + <meta name="assert" content="If 'margin-right' is computed as 'auto' its used value is '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + div div + { + background-color: blue; + float: right; + margin-right: auto; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is in the <strong>upper-right corner</strong> of the hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-004.xht new file mode 100644 index 0000000000..2af1928e00 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-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: Floating non-replaced elements with specified right margin</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-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="match" href="float-non-replaced-width-002-ref.xht" /> + + <meta name="assert" content="If 'margin-right' is not computed as 'auto' its used value is as specified." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + div div + { + background-color: blue; + float: right; + margin-right: 0.5in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is <strong>horizontally centered</strong> inside the hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-005.xht new file mode 100644 index 0000000000..39b0918a7a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-005.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: Floating non-replaced elements with left and right margins as 'auto'</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-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="match" href="float-non-replaced-width-001-ref.xht" /> + + <meta name="assert" content="If both 'margin-left' and margin-right' are computed as 'auto' their used value is as '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + div div + { + background-color: blue; + float: left; + margin-left: auto; + margin-right: auto; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is in the <strong>upper-left corner</strong> of the hollow black square.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-006.xht new file mode 100644 index 0000000000..7246558ca2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-006.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: Floating non-replaced elements with 'auto' width</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-08 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="If 'width' computes to 'auto' then the used value of 'width' is 'shrink-to-fit'." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + background: red; + color: green; + float: left; + font: 100px/1em Ahem; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div>X</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-007.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-007.xht new file mode 100644 index 0000000000..2cf7865dd4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-007.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: 'shrink-to-fit' width of floating, non-replaced elements - inline-block and max-width</title> + + <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="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../positioning/absolute-non-replaced-width-017-ref.xht" /> + <meta content="If 'width' of a floating, non-replaced element computes to 'auto' or 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If 'width' of a floating, non-replaced element computes to 'auto' but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + float: left; + font: 30px/4 Ahem; + width: auto; + } + + span + { + background-color: green; + display: inline-block; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div><span>12345678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-008.xht new file mode 100644 index 0000000000..aca4ede498 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-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: 'shrink-to-fit' width of floating, non-replaced elements - max-width</title> + + <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="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../positioning/absolute-non-replaced-width-017-ref.xht" /> + <meta content="If 'width' of a floating, non-replaced element computes to 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If 'width' of a floating, non-replaced element computes to 'auto' but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + float: left; + font: 30px/4 Ahem; + width: auto; + } + + span + { + background-color: green; + float: left; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div><span>12345678</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-009.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-009.xht new file mode 100644 index 0000000000..1382e4c091 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-009.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: 'shrink-to-fit' width of floating, non-replaced elements - max-width</title> + + <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="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../positioning/absolute-non-replaced-width-017-ref.xht" /> + <meta content="If 'width' of a floating, non-replaced element computes to 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of a floating, non-replaced element is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If 'width' of a floating, non-replaced element computes to 'auto' but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + float: left; + font: 30px/4 Ahem; + width: auto; + } + + div > div + { + background-color: green; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div> + <div>12345678</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-010.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-010.xht new file mode 100644 index 0000000000..d09e24eee9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-010.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: 'shrink-to-fit' width of floating, non-replaced elements - width</title> + + <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="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#the-width-property" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../positioning/absolute-non-replaced-width-017-ref.xht" /> + <meta content="If 'width' of a floating, non-replaced element computes to 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' is specified with absolute length, then the computed value is the specified value. If 'width' of a floating, non-replaced element computes to 'auto' but its own child uses specified absolute length, then such specified absolute length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + float: left; + font: 30px/4 Ahem; + width: auto; + } + + div > div + { + background-color: green; + width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div> + <div>12345678</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-011.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-011.xht new file mode 100644 index 0000000000..5e436fbe8b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-011.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: 'shrink-to-fit' width of floating, non-replaced elements - inline-block and max-width</title> + + <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="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" title="Section 10.3.9 Width of 'inline-block', non-replaced elements in normal flow" href="http://www.w3.org/TR/CSS21/visudet.html#inlineblock-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../positioning/absolute-non-replaced-width-017-ref.xht" /> + <meta content="If 'width' of a floating, non-replaced element computes to 'auto' or 'width' of an inline-block, non-replaced element in normal flow computes to 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation. If 'width' of an inline-block, non-replaced element in normal flow is given by 'shrink-to-fit' width calculation, then such calculated width can be furthermore constrained, reduced by a max-width declaration. If 'width' of a floating, non-replaced element computes to 'auto' but its own child uses a constrained length resulting from a max-width declaration, then such constrained length will define the preferred width in 'shrink-to-fit' width calculation." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: red; + float: left; + font: 30px/4 Ahem; + width: auto; + } + + div > div + { + background-color: green; + display: inline-block; + max-width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div> + <div>12345678</div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-012.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-012.xht new file mode 100644 index 0000000000..24015935d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-012.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: 'shrink-to-fit' width of floating, non-replaced elements - max-width</title> + + <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="help" title="Section 10.3.5 Width of floating, non-replaced elements" href="http://www.w3.org/TR/CSS21/visudet.html#float-width" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#min-max-widths" /> + <link rel="match" href="../positioning/absolute-non-replaced-width-017-ref.xht" /> + <meta content="If 'width' of a floating non-replaced element computes to 'auto', then the used value of 'width' is given by 'shrink-to-fit' width calculation and such calculated width can be furthermore constrained, reduced by a max-width declaration." name="assert" /> + <meta content="ahem" name="flags" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: green; + float: left; + font: 30px/4 Ahem; + max-width: 4em; + width: auto; + } + ]]></style> + + </head> + + <body> + + <p>Below there should be a green square. In the middle of such green square, a black horizontal stripe should be traversing it and protruding out of it toward the right. There should be no red in this page.</p> + + <div>12345678</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-013.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-013.xht new file mode 100644 index 0000000000..60f85bc029 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-non-replaced-width-013.xht @@ -0,0 +1,63 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: width - non-replaced float with scrollbar and percentage height of inline replaced child</title> + + <!-- + Credits should go to Erik Brown for originally reporting a related test + --> + + <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1281713" title="Bug 1281713: intrinsic width of parent with overflow-x:scroll not computing correctly with child image with height:100%" /> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="help" title="11.1.1 Overflow: the 'overflow' property" href="https://www.w3.org/TR/CSS21/visufx.html#overflow" /> + <link rel="help" title="10.3.2 Inline, replaced elements" href="https://www.w3.org/TR/CSS21/visudet.html#inline-replaced-width" /> + <link rel="help" title="10.3.5 Floating, non-replaced elements" href="https://www.w3.org/TR/CSS21/visudet.html#float-width" /> + + <meta name="DC.date.created" content="2016-06-23T09:54:03+11:00" scheme="W3CDTF" /> + <meta name="DC.date.modified" content="2016-07-06T09:54:03+11:00" scheme="W3CDTF" /> + + <!-- + Siblings of this test are: + inline-block-non-replaced-width-005 + absolute-non-replaced-width-028 + --> + + <meta content="image scroll" name="flags" /> + <meta content="This test checks interaction of percentage height of an inline replaced element with its parent having scrollbars and with the parent's width determined by 'shrink-to-fit' width algorithm. In this test, the image height should be 100px minus scrollbar height since space taken up by generated scrollbars should be taken out of (subtracted from the dimensions of) the containing block formed by the element with the scrollbars. Then the width of parent should be (used image height == 100px minus scrollbar) * (intrinsic ratio == 5width:1height)." name="assert" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: red; + float: left; /* or display: inline-block; */ /* or position: absolute; */ + height: 100px; + overflow: scroll; + } + + img + { + height: 100%; + vertical-align: bottom; + /* + This 'vertical-align: bottom' declaration is not part of the test. + We 'baseline-align' the image at the bottom of the line box so + that the vertical scrollbar remains inactive. + */ + } + ]]></style> + + </head> + + <body> + + <p>PREREQUISITE: User agent needs to support scrollbars as the scrolling mechanism. If it does not, then this test does not apply to such user agent.</p> + + <p>Test passes if there is a filled green rectangle with inactive scrollbars and <strong>no red</strong>.</p> + + <div><img src="support/green-rectangle-50wideBy10tall.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-001-ref.xht new file mode 100644 index 0000000000..7fc4dd9d71 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-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 + { + border-bottom: orange solid medium; + border-top: orange solid medium; + font-size: 16px; + line-height: 15px; + width: 1in; + } + + img + { + margin: 0px; + vertical-align: top; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no white space between the blue box below and the orange lines.</p> + + <div><img src="support/blue15x15.png" width="15" height="15" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-001.xht new file mode 100644 index 0000000000..a4d8e3d321 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-001.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: Floated replaced elements with 'margin-top' and 'margin-bottom' as 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> + <link rel="match" href="float-replaced-height-001-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="A floated replaced elements' used value of 'margin-top' and/or 'margin-bottom' set to 'auto' is '0'." /> + <style type="text/css"> + div + { + border-bottom: solid orange; + border-top: solid orange; + line-height: 0; + width: 1in; + } + img + { + margin-top: auto; + margin-bottom: auto; + } + div, img + { + float: left; + } + </style> + </head> + <body> + <p>Test passes if there is no white space between the blue box below and the orange lines.</p> + <div> + <img alt="blue 15x15" src="support/blue15x15.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-002-ref.xht new file mode 100644 index 0000000000..baaa21e3c7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-002-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//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 blue and orange squares have the same height.</p> + + <div><img src="support/blue15x15.png" width="15" height="15" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="15" height="15" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-002.xht new file mode 100644 index 0000000000..ca49db816f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-002.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 Test: Floated replaced elements relying on intrinsic height dimensions</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> + <link rel="match" href="float-replaced-height-002-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the intrinsic height when an floated replaced element with and intrinsic height has a 'height' and 'width' computed as 'auto'." /> + <style type="text/css"> + div + { + line-height: 0; + position: relative; + } + div div + { + background: orange; + height: 15px; + left: 15px; + position: absolute; + top: 0; + width: 15px; + } + img + { + height: auto; + width: auto; + } + div, img + { + float: left; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same height.</p> + <div> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-003-ref.xht new file mode 100644 index 0000000000..2eafd48235 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-003-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//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 blue and orange squares have the same height.</p> + + <div><img src="support/blue15x15.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-003.xht new file mode 100644 index 0000000000..ca7facb74b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-003.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: Floating replaced elements with intrinsic ratios and 'height' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> + <link rel="match" href="float-replaced-height-003-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The 'height' is the used width divided by the ratio when an floated replaced element has an intrinsic ratio, 'height' is set to 'auto' and 'width' is specified." /> + <style type="text/css"> + div + { + line-height: 0; + position: relative; + } + div div + { + background: orange; + height: 1in; + left: 1in; + position: absolute; + top: 0; + } + img + { + height: auto; + } + div, img + { + float: left; + } + div div, img + { + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same height.</p> + <div> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-004-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-004-ref.xht new file mode 100644 index 0000000000..2727852a22 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-004-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: green solid medium; + height: 150px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-004.xht new file mode 100644 index 0000000000..7710028dd6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-004.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Floated replaced elements without intrinsic ratios and 'height' set to 'auto'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> + <link rel="match" href="float-replaced-height-004-ref.xht" /> + + <meta name="assert" content="For floated replaced elements the 'height' is set to the largest rectangle that has a 2:1 ratio that is not greater than 150px and has a 'width' not greater than the device width." /> + <style type="text/css"> + div + { + position: relative; + } + div div + { + border: solid green; + height: 150px; + position: absolute; + top: 0; + width: 300px; + } + iframe + { + border: solid red; + float: left; + height: auto; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div> + <iframe></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-005-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-005-ref.xht new file mode 100644 index 0000000000..69c56f694d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-005-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: green solid medium; + height: 96px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-005.xht new file mode 100644 index 0000000000..8e72c67a68 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-005.xht @@ -0,0 +1,39 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Floated replaced elements with percentage based intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> + <link rel="match" href="float-replaced-height-005-ref.xht" /> + + <meta name="assert" content="A floated replaced element with percentage intrinsic height resolves based on the containing block height when percentage is explicitly specified." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + border: solid green; + height: 1in; + position: absolute; + top: 0; + width: 300px; + } + iframe + { + border: solid red; + float: left; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-006-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-006-ref.xht new file mode 100644 index 0000000000..c9f487b95a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-006-ref.xht @@ -0,0 +1,19 @@ +<!DOCTYPE html PUBLIC "-//W3C//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 blue and orange rectangles have the same height.</p> + + <div><img src="support/blue15x15.png" width="200" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="200" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-006.xht new file mode 100644 index 0000000000..2d76339eac --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-006.xht @@ -0,0 +1,43 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> + <head> + <title>CSS Test: Absolutely positioned floated replaced elements with percentage based intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> + <link rel="match" href="float-replaced-height-006-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="A floated replaced element with percentage intrinsic height resolves based on the containing block when the replaced element is absolutely positioned." /> + <style type="text/css"> + #div1 + { + position: relative; + height: 2in; + } + div div + { + background: orange; + height: 1in; + left: 200px; + position: absolute; + top: 0; + width: 200px; + } + svg + { + float: left; + position: absolute; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same height.</p> + <div id="div1"> + <svg:svg version="1.1" height="50%" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-007.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-007.xht new file mode 100644 index 0000000000..469c8decdb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-height-007.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Floated replaced elements with percentage based intrinsic height that cannot be resolved</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#inline-replaced-height" /> + <link rel="match" href="float-replaced-height-004-ref.xht" /> + + <meta name="assert" content="A floated replaced elements with a percentage height that cannot be resolved has no intrinsic height." /> + <style type="text/css"> + #div1 + { + position: relative; + } + div div + { + border: solid green; + height: 150px; + position: absolute; + top: 0; + width: 300px; + } + iframe + { + border: solid red; + float: left; + width: auto; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="div1"> + <iframe height="50%"></iframe> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-001.xht new file mode 100644 index 0000000000..d6e353f942 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-001.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: Floated replaced elements with 'auto' left margin</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-28 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-non-replaced-width-001-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="If 'margin-left' is computed as 'auto' its used value is '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + img + { + background-color: blue; + float: left; + margin-left: auto; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is in the <strong>upper-left corner</strong> of the hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-002.xht new file mode 100644 index 0000000000..cb6050b78b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-002.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: Floated replaced elements with specified left margin</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-28 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="If 'margin-left' is not computed as 'auto' its used value is as specified." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + img + { + background-color: blue; + float: left; + margin-left: 0.5in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is <strong>horizontally centered</strong> inside the hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-003.xht new file mode 100644 index 0000000000..ac4e3aa804 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-003.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: Floated replaced elements with 'auto' right margin</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-28 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-non-replaced-width-003-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="If 'margin-right' is computed as 'auto' its used value is '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + img + { + background-color: blue; + float: right; + margin-right: auto; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is in the <strong>upper-right corner</strong> of the hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-004.xht new file mode 100644 index 0000000000..3f1bdc7353 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-004.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: Floated replaced elements with specified right margin</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-28 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-non-replaced-width-002-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="If 'margin-right' is not computed as 'auto' its used value is as specified." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + img + { + background-color: blue; + float: right; + margin-right: 0.5in; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is <strong>horizontally centered</strong> inside the hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-005.xht new file mode 100644 index 0000000000..8553d6afc1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-005.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: Floated replaced elements with left and right margins as 'auto'</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-28 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-non-replaced-width-001-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="If both 'margin-left' and margin-right' are computed as 'auto' their used value is as '0'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + img + { + background-color: blue; + float: left; + margin-left: auto; + margin-right: auto; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is in the <strong>upper-left corner</strong> of the hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-006-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-006-ref.xht new file mode 100644 index 0000000000..d36d8cc68d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-006-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: 192px; + line-height: 15px; + width: 192px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the small blue and orange squares have the same width and if the blue square is in the upper-left corner of the hollow black square.</p> + + <div><img src="support/swatch-blue.png" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-006.xht new file mode 100644 index 0000000000..aee917141e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-006.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Floated replaced elements and 'auto' specified for 'margin-left', 'margin-right' and intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-replaced-width-006-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on floated replaced elements becomes a used value of '0'. The intrinsic width is also used if 'height' and 'width' are 'auto'." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 2in; + width: 2in; + } + img + { + float: left; + margin-left: auto; + margin-right: auto; + } + div div + { + background: orange; + height: 15px; + margin-top: 15px; + width: 15px; + } + </style> + </head> + <body> + <p>Test passes if the small blue and orange squares have the same width and if the blue square is in the upper-left corner of the hollow black square.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-007-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-007-ref.xht new file mode 100644 index 0000000000..b5b4772bfc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-007-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: 288px; + width: 288px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and if the blue rectangle is in the upper-left corner of the hollow black square.</p> + + <div><img src="support/swatch-blue.png" height="50" width="200" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" height="50" width="200" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-007.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-007.xht new file mode 100644 index 0000000000..7ab350ea02 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-007.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> + <head> + <title>CSS Test: Floated replaced elements and 'auto' specified for 'margin-left', 'margin-right' and intrinsic height</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-replaced-width-007-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on floated replaced elements becomes a used value of '0'. The 'width' is (used height) * (intrinsic ratio) if there is no intrinsic width but there is intrinsic height and ratio." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + width: 3in; + } + svg + { + float: left; + margin-left: auto; + margin-right: auto; + } + div div + { + background: orange; + height: 50px; + margin-top: 50px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and if the blue rectangle is in the upper-left corner of the hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-008-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-008-ref.xht new file mode 100644 index 0000000000..d38f145a9e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-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[ + div + { + border: black solid medium; + height: 288px; + width: 288px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and if the blue rectangle is in the upper-left corner of the hollow black square.</p> + + <div><img src="support/swatch-blue.png" height="100" width="200" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" height="100" width="200" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-008.xht new file mode 100644 index 0000000000..b4500ba692 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-008.xht @@ -0,0 +1,44 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> + <head> + <title>CSS Test: Floated replaced elements and 'auto' specified for 'margin-left', 'margin-right' and 'height'</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-replaced-width-008-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on floated replaced elements becomes a used value of '0'. The 'width' is (used height) * (intrinsic ratio) if there is no intrinsic width but there is intrinsic height and ratio." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + width: 3in; + } + svg + { + float: left; + height: 100px; + margin-left: auto; + margin-right: auto; + } + div div + { + background: orange; + height: 100px; + margin-top: 100px; + width: 200px; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and if the blue rectangle is in the upper-left corner of the hollow black square.</p> + <div id="div1"> + <svg:svg version="1.1" height="50" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + <div></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-009-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-009-ref.xht new file mode 100644 index 0000000000..6c8f7a81db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-009-ref.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 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: 288px; + width: 288px; + } + + img {vertical-align: top;} + + img#blue {margin-bottom: 10px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange rectangles have the same width and if the blue rectangle is in the upper-left corner of the hollow black square.</p> + + <div><img id="blue" src="support/swatch-blue.png" height="100" width="200" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" height="96" width="200" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-009.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-009.xht new file mode 100644 index 0000000000..b407448e91 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-009.xht @@ -0,0 +1,47 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0 plus SVG 1.1//EN" "http://www.w3.org/2002/04/xhtml-math-svg/xhtml-math-svg.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> + <head> + <title>CSS Test: Floated replaced elements and 'auto' specified for 'margin-left', 'margin-right' and no intrinsic height or width</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-replaced-width-009-ref.xht" /> + + <meta name="flags" content="nonHTML svg" /> + <meta name="assert" content="Computed value of 'auto' for 'margin-left' or margin-right' on floated replaced elements becomes a used value of '0'. The height and width are adjusted by the constraints for block-level, non-replaced elements." /> + <style type="text/css"> + #div1 + { + border: solid black; + height: 3in; + width: 3in; + } + #div2 + { + height: 110px; + width: 3in; + } + #div3 + { + background: orange; + height: 1in; + width: 200px; + } + svg + { + float: left; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange rectangles have the same width and if the blue rectangle is in the upper-left corner of the hollow black square.</p> + <div id="div1"> + <div id="div2"> + <svg:svg version="1.1" baseProfile="full"> + <svg:rect x="0" y="0" width="200" height="100" fill="blue" /> + </svg:svg> + </div> + <div id="div3"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-011-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-011-ref.xht new file mode 100644 index 0000000000..73829997b9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-011-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: 288px; + width: 192px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue and orange squares have the same width and if the blue square is in the upper-left corner of the hollow black rectangle.</p> + + <div><img src="support/swatch-blue.png" height="96" width="96" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" height="96" width="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-011.xht b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-011.xht new file mode 100644 index 0000000000..2cd206620a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/float-replaced-width-011.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 Test: Floated replaced elements and 'auto' specified for 'margin-left', 'margin-right' and percentage intrinsic width</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#float-replaced-width" /> + <link rel="match" href="float-replaced-width-011-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Percentage intrinsic widths are evaluated against the containing block's width." /> + <style type="text/css"> + div + { + line-height: 0; + } + #div1 + { + border: solid black; + height: 3in; + width: 2in; + } + img + { + float: left; + margin-left: auto; + margin-right: auto; + } + div div + { + background: orange; + height: 1in; + margin-top: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue and orange squares have the same width and if the blue square is in the upper-left corner of the hollow black rectangle.</p> + <div id="div1"> + <img alt="blue 15x15" src="support/blue15x15.png" width="50%" /> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floating-replaced-height-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floating-replaced-height-008.xht new file mode 100644 index 0000000000..f060cffa0f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floating-replaced-height-008.xht @@ -0,0 +1,40 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Floating replaced elements - specified width, height in percentages and intrinsic ratio</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/visudet.html#inline-replaced-height" title="10.6.2 Inline replaced elements, block-level replaced elements in normal flow, 'inline-block' replaced elements in normal flow and floating replaced elements" /> + <link rel="bookmark" href="https://bugs.kde.org/show_bug.cgi?id=274790" title= + "Bug 274790: object specified with width and height percentages and with intrinsic ratio" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <meta content="image interact" name="flags" /> + <meta content="When 'height: 1%' (or any other percentage) applies to a floating replaced element and when the height of its containing block is not specified explicitly (i.e., it depends on content height), then such height computes to 'auto'. Then, if such floating replaced element has an intrinsic ratio and its used width is known or resolved, then the used value of 'height' is determined by the equation (used width) / (intrinsic ratio)." name="assert" /> + + <style type="text/css"><![CDATA[ + img {float: left;} + ]]></style> + + </head> + + <body> + + <p>There should be <strong>5 filled green squares</strong> with the same width and the <strong>same height</strong>. The 5 filled green squares should be <strong>identical</strong> to each other. This should still remain true even after a window resize.</p> + + <div> + <img src="support/60x60-green.png" width="15%" alt="FAIL: image download must be enabled" /><img src="support/swatch-white.png" width="5" height="5" alt="FAIL: image download must be enabled" /> + + <img src="support/60x60-green.png" width="15%" height="1%" alt="FAIL: image download must be enabled" /><img src="support/swatch-white.png" width="5" height="5" alt="FAIL: image download must be enabled" /> + + <img src="support/60x60-green.png" style="width: 15%;" alt="FAIL: image download must be enabled" /><img src="support/swatch-white.png" width="5" height="5" alt="FAIL: image download must be enabled" /> + + <img src="support/60x60-green.png" style="width: 15%; height: auto;" alt="FAIL: image download must be enabled" /><img src="support/swatch-white.png" width="5" height="5" alt="FAIL: image download must be enabled" /> + + <img src="support/60x60-green.png" style="width: 15%; height: 1%;" alt="FAIL: image download must be enabled" /> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-001-ref.xht new file mode 100644 index 0000000000..451620aba6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-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 + { + border: black solid 5px; + height: 1in; + width: 2in; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is on the left inner edge of the hollow black rectangle.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-001.xht new file mode 100644 index 0000000000..a78c804b14 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-001.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: Floats, shifting left until it touches container edge</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-001-ref.xht" /> + + <meta name="assert" content="A left floated box shifts left until its outer edge touches the containing block edge." /> + <style type="text/css"> + #div1 + { + border: solid 5px black; + height: 1in; + width: 2in; + } + div div + { + display: inline-block; + height: 1in; + width: 1in; + } + #div3 + { + background-color: blue; + float: left; + } + </style> + </head> + <body> + <p>Test passes if the blue square is on the left inner edge of the hollow black rectangle.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-002-ref.xht new file mode 100644 index 0000000000..e56d388479 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-002-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 5px; + height: 1in; + text-align: right; + width: 2in; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is on the right inner edge of the hollow black rectangle.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-002.xht new file mode 100644 index 0000000000..435241d81e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-002.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: Floats, shifting right until it touches container edge</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-002-ref.xht" /> + + <meta name="assert" content="A right floated box shifts right until its outer edge touches the containing block edge." /> + <style type="text/css"> + #div1 + { + border: solid 5px black; + height: 1in; + width: 2in; + } + div div + { + background-color: blue; + height: 1in; + float: right; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is on the right inner edge of the hollow black rectangle.</p> + <div id="div1"> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-003.xht new file mode 100644 index 0000000000..f42bc691c6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-003.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: Floats, shifting left until touching other floats</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-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="adjacent-floats-001-ref.xht" /> + + <meta name="assert" content="A left floated box shifts left until it touches another float." /> + <style type="text/css"> + #div1, #div2 + { + height: 1in; + width: 1in; + } + #div1 + { + background-color: orange; + float: left; + } + #div2 + { + background-color: blue; + float: left; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the left of the blue square and the squares top edges are aligned.</p> + <div> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-004-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-004-ref.xht new file mode 100644 index 0000000000..27fc3ea9d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-004-ref.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 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: right; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is to the left of the orange square and the squares top edges are aligned.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-004.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-004.xht new file mode 100644 index 0000000000..572ab756c1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-004.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: Floats, shifting right until touching other floats</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-004-ref.xht" /> + + <meta name="assert" content="A right floated box shifts right until it touches another float." /> + <style type="text/css"> + #div1, #div2 + { + height: 1in; + width: 1in; + } + #div1 + { + background: orange; + float: right; + } + #div2 + { + background: blue; + float: right; + } + </style> + </head> + <body> + <p>Test passes if the blue square is to the left of the orange square and the squares top edges are aligned.</p> + <div> + <div id="div1"></div> + <div id="div2"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-005-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-005-ref.xht new file mode 100644 index 0000000000..b37380805a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-005-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 192px; + width: 120px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-005.xht new file mode 100644 index 0000000000..239f6e3441 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-005.xht @@ -0,0 +1,56 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Floats, shifting down below all other floated elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-005-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Floated boxes shift down until it fits." /> + <style type="text/css"> + #parentDiv + { + background: red url('support/floats-005.png'); + width: 1.25in; + } + div + { + float: left; + } + div div + { + background: green; + } + #div1 + { + height: 1in; + width: 1.2in; + } + #div2 + { + height: 1in; + width: 0.75in; + } + #div3 + { + height: 0.25in; + width: 0.2in; + } + #div4 + { + width: 0.5in; + height: 0.25in; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="parentDiv"> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-006-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-006-ref.xht new file mode 100644 index 0000000000..1a018a3171 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-006-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[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue rectangle is to the left of the orange square and both top edges are aligned.</p> + + <div><img src="support/swatch-blue.png" width="200" height="100" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-006.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-006.xht new file mode 100644 index 0000000000..02c442b9b8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-006.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 Test: Left floats interacting with inline 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-04-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-006-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Inline boxes are reflowed to the first available line on the other side of a float." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + height: 200px; + width: 300px; + } + #span1 + { + color: orange; + font: 100px/1 Ahem; + } + .class1 + { + background-color: blue; + float: left; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if the blue rectangle is to the left of the orange square and both top edges are aligned.</p> + <div id="div1"> + <span id="span1">X</span> + <div class="class1"></div> + <div class="class1"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-007-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-007-ref.xht new file mode 100644 index 0000000000..f4563762a3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-007-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the top edges of the orange and blue squares are aligned and both squares are below the purple rectangle and yellow stripe.</p> + + <div><img src="support/swatch-purple.png" width="120" height="96" alt="Image download support must be enabled" /><br /><img src="support/swatch-yellow.png" width="72" height="24" alt="Image download support must be enabled" /><br /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="120" height="120" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-007.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-007.xht new file mode 100644 index 0000000000..49b81826af --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-007.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Floated elements shifting down below non-floated elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-007-ref.xht" /> + + <meta name="assert" content="Left floated boxes shift down until next to another float and there is room to fit." /> + <style type="text/css"> + #div1 + { + background: purple; + height: 1in; + width: 1.25in; + } + #div2 + { + background: yellow; + height: 0.25in; + width: 0.75in; + } + #div3 + { + background: orange; + float: left; + height: 1in; + width: 1in; + } + #div4 + { + background: blue; + float: left; + height: 1.25in; + width: 1.25in; + } + </style> + </head> + <body> + <p>Test passes if the top edges of the orange and blue squares are aligned and both squares are below the purple rectangle and yellow stripe.</p> + <div> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-008.xht new file mode 100644 index 0000000000..c85e45da26 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-008.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: Floats and block box flow</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="clear-float-004-ref.xht" /> + + <meta name="assert" content="Block boxes flow vertically as if floats don't exist." /> + <style type="text/css"> + div + { + height: 1in; + width: 1in; + } + #div1 + { + background-color: orange; + } + #div2 + { + background-color: blue; + float: left; + } + #div3 + { + background-color: red; + } + </style> + </head> + <body> + <p>Test passes if the orange square is positioned above the blue square and if there is no red.</p> + <div id="div1"></div> + <div id="div2"></div> + <div id="div3"></div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-009-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-009-ref.xht new file mode 100644 index 0000000000..f68d06d003 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-009-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[ + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue rectangle is to the right of the orange square and if the top edges are aligned.</p> + + <div><img src="support/swatch-orange.png" width="100" height="100" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="200" height="100" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-009.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-009.xht new file mode 100644 index 0000000000..eab2dd4408 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-009.xht @@ -0,0 +1,42 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Right floats interacting with right-to-left inline 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-04-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-009-ref.xht" /> + + <meta name="flags" content="ahem" /> + <meta name="assert" content="Inline boxes are reflowed to the first available line on the other side of a float for right-to-left." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #div1 + { + direction: rtl; + height: 200px; + width: 300px; + } + #span1 + { + color: orange; + font: 100px/1 Ahem; + } + .class1 + { + background-color: blue; + float: right; + height: 100px; + width: 100px; + } + </style> + </head> + <body> + <p>Test passes if the blue rectangle is to the right of the orange square and if the top edges are aligned.</p> + <div id="div1"> + <div class="class1"></div> + <div class="class1"></div> + <span id="span1">X</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-014-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-014-ref.xht new file mode 100644 index 0000000000..ffa54ef6a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-014-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/" /> + + <style type="text/css"><![CDATA[ + table + { + border: black solid 5px; + border-collapse: separate; + border-spacing: 0px; + padding: 9px; + } + + img {vertical-align: top;} + + td.left-column {padding-right: 10px;} + + td.right-column {padding-left: 10px;} + + td.top-row {padding-bottom: 10px;} + + td.bottom-row {padding-top: 10px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is twice as much space between the blue squares as there is between the blue squares and the black container edge.</p> + + <table> + + <tr><td class="left-column top-row"><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></td><td class="right-column top-row"><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></td></tr> + + <tr><td class="left-column bottom-row"><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></td><td class="right-column bottom-row"><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></td></tr> + + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-014.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-014.xht new file mode 100644 index 0000000000..91893cdf3c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-014.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: Left floated element margins do not collapse</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-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-014-ref.xht" /> + + <meta name="assert" content="Floating boxes never collapse with margins of adjacent floats or other boxes." /> + <style type="text/css"> + #div1 + { + border: solid 5px black; + height: 232px; + width: 232px; + } + div div + { + background: blue; + float: left; + height: 96px; + margin: 10px; + width: 96px; + } + </style> + </head> + <body> + <p>Test passes if there is twice as much space between the blue squares as there is between the blue squares and the black container edge.</p> + <div id="div1"> + <div></div> + <div></div> + <div></div> + <div></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-015.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-015.xht new file mode 100644 index 0000000000..bd92a4e437 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-015.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 Test: Right floated elements margins do not collapse</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-07 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-014-ref.xht" /> + + <meta name="assert" content="Right floating boxes never collapse with margins of adjacent boxes or other floats." /> + <style type="text/css"> + #div1 + { + border: solid 5px black; + height: 232px; + width: 232px; + } + div div + { + background: blue; + height: 96px; + margin: 10px; + width: 96px; + } + #div2, #div4 + { + float: right; + } + #div3 + { + float: left; + } + </style> + </head> + <body> + <p>Test passes if there is twice as much space between the blue squares as there is between the blue squares and the black container edge.</p> + <div id="div1"> + <div id="div2"></div> + <div></div> + <div id="div3"></div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-016.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-016.xht new file mode 100644 index 0000000000..9447b9f701 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-016.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: Floated elements stacked with blocks and inline elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="assert" content="Floated elements are rendered in front of non-positioned in-flow blocks but behind in-flow inline boxes when a normal flow box is next to a floated element with negative margins." /> + <style type="text/css"> + #container + { + margin: 0.5in; + } + #inline + { + background: yellow; + margin-left: -0.5in; + } + #float, #block + { + height: 1in; + width: 1in; + } + #float + { + background: orange; + float: left; + } + #block + { + background: blue; + margin: -0.25in; + } + </style> + </head> + <body> + <p>Test passes if the boxes are partially stacked on top of each other, and they are stacked in the following order from bottom to top: blue, orange, yellow.</p> + <div id="container"> + <span id="inline">Filler Text</span> + <div id="float">Filler Text</div> + <div id="block">Filler Text</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-019-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-019-ref.xht new file mode 100644 index 0000000000..b8477c096e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-019-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 1.1in 0px 0px;} + + div + { + background-color: blue; + height: 1in; + left: 0px; + position: absolute; + top: 0px; + width: 1in; + } + + p {margin: 0px;} + ]]></style> + + </head> + + <body> + + <div></div> + + <p>Test passes if the blue square above is in the top-left corner of the page.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-019.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-019.xht new file mode 100644 index 0000000000..6353907297 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-019.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: Float applied to absolutely positioned elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-019-ref.xht" /> + + <meta name="assert" content="Float cannot be applied to absolutely positioned element." /> + <style type="text/css"> + * + { + margin: 0; + } + div + { + background: blue; + float: right; + height: 1in; + position: absolute; + width: 1in; + } + p + { + padding-top: 1.1in; + } + </style> + </head> + <body> + <div></div> + <p>Test passes if the blue square above is in the top-left corner of the page.</p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-020.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-020.xht new file mode 100644 index 0000000000..274e8450a3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-020.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: Left floated elements and text wrapping</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="assert" content="Block box is generated and floated to left and content flows on right side starting at the top." /> + <style type="text/css"> + div + { + width: 2.25in; + } + #span1 + { + background-color: blue; + float: left; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the words "Filler Text" start above, flow down the right side of, and then wrap underneath the blue box.</p> + <div> + <span>Filler Text Filler Text Filler Text </span> + <span id="span1"></span> + <span>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-021.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-021.xht new file mode 100644 index 0000000000..da3147f0d2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-021.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: Right floated elements and text wrapping</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="assert" content="Block box is generated and floated to right and content flows on left side starting at the top." /> + <style type="text/css"> + div + { + width: 2in; + } + #span1 + { + background-color: blue; + float: right; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the words "Filler Text" start above the blue box and flow down the left side of and wrap underneath the blue box.</p> + <div> + <span>Filler Text Filler Text Filler Text </span> + <span id="span1"></span> + <span>Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-022-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-022-ref.xht new file mode 100644 index 0000000000..5ca7586cb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-022-ref.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 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 three lines of "Filler Text".</p> + + <div>Filler Text</div> + + <div>Filler Text</div> + + <div>Filler Text</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-022.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-022.xht new file mode 100644 index 0000000000..b9fd54f946 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-022.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: Elements do not float when 'float' is set to 'none'</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-022-ref.xht" /> + + <meta name="assert" content="An element with 'float: none' behaves as if it were never set to begin with." /> + <style type="text/css"> + #div1 + { + float: left; + float: none; + } + </style> + </head> + <body> + <p>Test passes if there are three lines of "Filler Text".</p> + <div>Filler Text</div> + <div id="div1">Filler Text</div> + <div>Filler Text</div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-023-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-023-ref.xht new file mode 100644 index 0000000000..3dbbd5e349 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-023-ref.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 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 5px; + height: 192px; + margin: 48px; + width: 192px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the filled blue square is in the upper-left corner of the hollow black square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-023.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-023.xht new file mode 100644 index 0000000000..2bf1786557 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-023.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: Floated elements and container edges</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-023-ref.xht" /> + + <meta name="assert" content="Left floated boxes cannot go past the container's left edge." /> + <style type="text/css"> + div + { + border: solid 5px black; + height: 2in; + margin: 0.5in; + width: 2in; + } + span + { + background-color: blue; + float: left; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the filled blue square is in the upper-left corner of the hollow black square.</p> + <div> + <span></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-024-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-024-ref.xht new file mode 100644 index 0000000000..806e171a48 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-024-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[ + div + { + border-top: black solid 5px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange square is to the left of the blue square and the top edges of both squares touch the black line.</p> + + <div><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-024.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-024.xht new file mode 100644 index 0000000000..2540308f05 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-024.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 Test: Left float with earlier floated siblings</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-024-ref.xht" /> + + <meta name="assert" content="Left floated box is to right of earlier floated box or below the earlier floated element's bottom edge." /> + <style type="text/css"> + div + { + border-top: solid 5px black; + width: 300px; + } + span + { + float: left; + height: 1in; + width: 1in; + } + #span1 + { + background-color: orange; + } + #span2 + { + background-color: blue; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the left of the blue square and the top edges of both squares touch the black line.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-025-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-025-ref.xht new file mode 100644 index 0000000000..31a385e2bd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-025-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 5px; + height: 2in; + text-align: right; + width: 2in; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is in the upper-right corner of the hollow black square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-025.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-025.xht new file mode 100644 index 0000000000..c6c680b2a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-025.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: Right floating elements and container edge</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-025-ref.xht" /> + + <meta name="assert" content="Right floated boxes cannot go past the container's right edge." /> + <style type="text/css"> + div + { + border: solid 5px black; + height: 2in; + width: 2in; + } + span + { + background-color: blue; + float: right; + height: 1in; + width: 1in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is in the upper-right corner of the hollow black square.</p> + <div> + <span></span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-026-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-026-ref.xht new file mode 100644 index 0000000000..8e30d4d8d1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-026-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 5px; + height: 192px; + width: 192px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is aligned on the left side of the hollow black square and is above the orange, right aligned, square.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-026.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-026.xht new file mode 100644 index 0000000000..eed0ae8d73 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-026.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 Test: Margin affects left floated 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-07-02 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-026-ref.xht" /> + + <meta name="assert" content="Right outer edge of left-floating box cannot be to the right of the left outer edge of any right-floating box that is to the right of it." /> + <style type="text/css"> + div + { + border: solid 5px black; + height: 2in; + width: 2in; + } + span + { + height: 1in; + width: 1in; + } + #span1 + { + background: blue; + float: left; + margin-right: 10px; + } + #span2 + { + background-color: orange; + float: right; + margin-left: 10px; + } + </style> + </head> + <body> + <p>Test passes if the blue square is aligned on the left side of the hollow black square and is above the orange, right aligned, square.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-027-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-027-ref.xht new file mode 100644 index 0000000000..ba3cecc4b2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-027-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 5px; + height: 192px; + width: 192px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is aligned on the right side of the hollow black square and is above the orange, left aligned, square.</p> + + <div><img src="support/swatch-white.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-white.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-027.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-027.xht new file mode 100644 index 0000000000..ccea2ad092 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-027.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: Margin affects right floated elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-027-ref.xht" /> + + <meta name="assert" content="Right outer edge of left-floating box cannot be to the right of the left outer edge of any right-floating box that is to the right of it." /> + <style type="text/css"> + div + { + border: solid 5px black; + height: 2in; + width: 2in; + } + span + { + height: 1in; + width: 1in; + } + #span1 + { + background: blue; + float: right; + margin-left: 10px; + } + #span2 + { + background-color: orange; + float: left; + margin-right: 10px; + } + </style> + </head> + <body> + <p>Test passes if the blue square is aligned on the right side of the hollow black square and is above the orange, left aligned, square.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-028-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-028-ref.xht new file mode 100644 index 0000000000..a975a6b5b1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-028-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#wrapper { + border: solid 5px black; + height: 2in; + margin: 0.25in; + position: absolute; + top: 10px; + width: 2in; + } + + div > div { + background-color: blue; + height: 120px; + width: 120px; + } + + ]]></style> + + </head> + + <body> + + <p>Test passes if the blue square is completely contained within the hollow black square.</p> + + <div id="wrapper"> + <div>Filler Text</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-028.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-028.xht new file mode 100644 index 0000000000..bef6f421eb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-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: Floats and containment</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-028-ref.xht" /> + + <meta name="assert" content="Floating box's outer top cannot be higher than the top of its containing block." /> + <style type="text/css"> + div + { + border: solid 5px black; + height: 2in; + margin: 0.25in; + position: absolute; + top: 10px; + width: 2in; + } + span + { + background-color: blue; + float: left; + height: 1.25in; + width: 1.25in; + } + </style> + </head> + <body> + <p>Test passes if the blue square is completely contained within the hollow black square.</p> + <div> + <span>Filler Text</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-029-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-029-ref.xht new file mode 100644 index 0000000000..3ade54b22d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-029-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 112px 0px 0px;} + + div + { + height: 1in; + left: 0px; + position: absolute; + top: 0px; + } + + img {vertical-align: top;} + ]]></style> + + </head> + + <body> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" />Filler Text</div> + + <p>Test passes if the blue square is in the top left corner of the page and the words "Filler Text" are directly to the right of the square.</p> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-029.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-029.xht new file mode 100644 index 0000000000..5c35a93bdf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-029.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: Content flowing around floated elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-029-ref.xht" /> + + <meta name="assert" content="Floats shift the current line and surrounding content to flow along its side unless clear is specified." /> + <style type="text/css"> + #span1 + { + background-color: blue; + float: left; + height: 1in; + width: 1in; + } + body + { + margin: 0; + } + div div + { + clear: both; + } + </style> + </head> + <body> + <div> + <span>Filler Text</span> + <span id="span1"></span> + <div></div> + </div> + <p>Test passes if the blue square is in the top left corner of the page and the words "Filler Text" are directly to the right of the square.</p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-030-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-030-ref.xht new file mode 100644 index 0000000000..f9926cb8ee --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-030-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#wrapper + { + border: solid 5px black; + height: 150px; + margin: 10px; + } + + img#orange {margin-top: 10px;} + + span, img#blue {vertical-align: 20px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange box is within the black box, below the words "Filler Text 1", and to the left of both the blue box and the words "Filler Text 2".</p> + + <div id="wrapper"> + <div>Filler Text 1</div> + <div><img id="orange" src="support/swatch-orange.png" width="96" height="106" alt="Image download support must be enabled" /><span>Filler Text 2</span> <img id="blue" alt="Image download support must be enabled" src="support/blue15x15.png" width="96" height="96" /></div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-030.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-030.xht new file mode 100644 index 0000000000..a25c524d25 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-030.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 Test: Position of floated elements in relation to previous elements</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/> + <link rel="match" href="floats-030-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Outer top of a floating box cannot be higher than the outer top of any block or floated box generated by an element earlier in the source document." /> + <style type="text/css"> + #d1 + { + border: solid 5px black; + margin: 10px; + height: 150px; + } + #span1, img + { + height: 1in; + width: 1in; + } + #span1 + { + background-color: orange; + float: left; + margin-top: 10px; + padding-top: 10px; + } + </style> + </head> + <body> + <p>Test passes if the orange box is within the black box, below the words "Filler Text 1", and to the left of both the blue box and the words "Filler Text 2".</p> + <div id="d1"> + <div>Filler Text 1</div> + <span>Filler Text 2</span> + <img alt="blue box" src="support/blue15x15.png" /> + <span id="span1"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-031-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-031-ref.xht new file mode 100644 index 0000000000..942bd69d9f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-031-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 5px; + font: 16px serif; + margin: 10px; + width: 550px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange rectangle is to the left of the "Filler Text" and the blue rectangle is to the right of the "Filler Text".</p> + + <div id="wrapper"><br /><img src="support/swatch-orange.png" width="96" height="48" alt="Image download support must be enabled" />Filler Text Filler Text <img src="support/blue15x15.png" width="96" height="48" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-031.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-031.xht new file mode 100644 index 0000000000..ee794fe9fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-031.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: Position of floated elements in relation to previous inline 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-07-09 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"/> + <link rel="match" href="floats-031-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="Outer top of floating box cannot be higher than the top of any line-box containing a box generated by an element earlier in the source document." /> + <style type="text/css"> + div + { + border: solid 5px black; + font: 16px serif; + margin: 10px; + width: 550px; + } + #span1 + { + background-color: orange; + float: left; + } + #span1, img + { + height: 0.5in; + width: 1in; + } + span span + { + display: inline-block; + width: 550px; + } + </style> + </head> + <body> + <p>Test passes if the orange rectangle is to the left of the "Filler Text" and the blue rectangle is to the right of the "Filler Text".</p> + <div> + <span><span></span>Filler Text Filler Text</span> + <img alt="blue box" src="support/blue15x15.png" /> + <span id="span1"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-036-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-036-ref.xht new file mode 100644 index 0000000000..0de561abbd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-036-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <style> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + </style> + + </head> + + <body> + + <p>Test passes if the "Filler Text" below is all on the same line.</p> + + <div>Filler TextFiller Text</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-036.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-036.xht new file mode 100644 index 0000000000..1d90b428ff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-036.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: Floated left and aligned with current line box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-036-ref.xht" /> + + <meta name="assert" content="A floated elements top edge will be aligned with the top of a line box." /> + <style type="text/css"> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + div + { + width: 5in; + } + #span1 + { + float: left; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is all on the same line.</p> + <div> + <span>Filler Text</span> + <span id="span1">Filler Text</span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-037.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-037.xht new file mode 100644 index 0000000000..4900de32c2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-037.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: Floated right element aligns with current line box</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="assert" content="A line box aligns with the top of a right floated box." /> + <style type="text/css"> + div + { + width: 2in; + } + #span1 + { + float: right; + } + </style> + </head> + <body> + <p>Test passes if the "Filler Text" below is all on the same line.</p> + <div> + <span>Filler Text</span> + <span id="span1">Filler Text</span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-038-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-038-ref.xht new file mode 100644 index 0000000000..d7391cba52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-038-ref.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 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 5px; + height: 192px; + width: 192px; + } + + img {vertical-align: top;} + + img#orange {border: white solid 10px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange square is to the right of the blue square, space needs to also separate the orange square from other squares.</p> + + <div><img src="support/swatch-blue.png" width="48" height="48" alt="Image download support must be enabled" /><img id="orange" src="support/swatch-orange.png" width="48" height="48" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-038.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-038.xht new file mode 100644 index 0000000000..e95d39b38b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-038.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Floats and table margins</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-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-038-ref.xht" /> + + <meta name="assert" content="The border box of a table cannot overlap any floats in the same block formatting context as the elements itself." /> + <style type="text/css"> + #div1 + { + border: black solid 5px; + height: 2in; + width: 2in; + } + div div + { + height: 0.5in; + width: 0.5in; + } + #div2 + { + background: blue; + float: left; + } + #table + { + background: orange; + display: table; + border: white solid 10px; + } + #row + { + display: table-row; + } + #cell + { + display: table-cell; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the right of the blue square, space needs to also separate the orange square from other squares.</p> + <div id="div1"> + <div id="div2"></div> + <div id="table"> + <div id="row"> + <div id="cell"></div> + </div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-039.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-039.xht new file mode 100644 index 0000000000..03b77c952e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-039.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 Test: Floats and block level replaced element margins</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-04 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-038-ref.xht" /> + + <meta name="flags" content="image" /> + <meta name="assert" content="The border box of a block level replaced element cannot overlap any floats in the same block formatting context as the element itself." /> + <style type="text/css"> + #div1 + { + width: 2in; + height: 2in; + border: black solid 5px; + } + div div + { + background: blue; + float: left; + } + div div, img + { + height: 0.5in; + width: 0.5in; + } + img + { + background: orange; + display: block; + border: white solid 10px; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the right of the blue square, space needs to also separate the orange square from other squares.</p> + <div id="div1"> + <div></div> + <img alt="FAIL: Image download support must be enabled" src="support/swatch-orange.png" /> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-040.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-040.xht new file mode 100644 index 0000000000..9588e15437 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-040.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: Floats inline-block level element margins</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-03 --> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-038-ref.xht" /> + + <meta name="assert" content="The border box of a inline-block level element cannot overlap any floats in the same block formatting context as the element itself." /> + <style type="text/css"> + #div1 + { + width: 2in; + height: 2in; + border: black solid 5px; + } + div div + { + height: 0.5in; + width: 0.5in; + } + #div2 + { + background: blue; + float: left; + } + #div3 + { + background: orange; + display: inline-block; + border: white solid 10px; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the right of the blue square, space needs to also separate the orange square from other squares.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-041-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-041-ref.xht new file mode 100644 index 0000000000..66457bb8dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-041-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 48px; + width: 48px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-041.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-041.xht new file mode 100644 index 0000000000..37b15dfa29 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-041.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 Test: Floats and stacking contexts with content</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-041-ref.xht" /> + + <meta name="assert" content="The contents of floats are stacked as if floats generated new stacking contexts." /> + <style type="text/css"> + div div + { + height: 0.5in; + width: 0.5in; + } + #div1 + { + background: red; + float: left; + } + #div2 + { + background: green; + display: block; + position: relative; + z-index: 10; + } + #div3 + { + background: red; + position: relative; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div> + <div id="div1"> + <div id="div2"></div> + </div> + <div id="div3"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-043-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-043-ref.xht new file mode 100644 index 0000000000..8354429160 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-043-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border-top: black solid 5px; + text-align: right; + width: 288px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if the orange square is to the right of the blue square and the top edges of both squares touch the black line.</p> + + <div><img src="support/swatch-blue.png" width="96" height="96" alt="Image download support must be enabled" /><img src="support/swatch-orange.png" width="96" height="96" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-043.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-043.xht new file mode 100644 index 0000000000..aa004c469c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-043.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 Test: Right float with earlier floated siblings</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-043-ref.xht" /> + + <meta name="assert" content="A right floated box is to left of earlier floated boxes or below the earlier floated element's bottom edge." /> + <style type="text/css"> + div + { + border-top: solid 5px black; + width: 3in; + } + span + { + float: right; + height: 1in; + width: 1in; + } + #span1 + { + background-color: orange; + } + #span2 + { + background-color: blue; + } + </style> + </head> + <body> + <p>Test passes if the orange square is to the right of the blue square and the top edges of both squares touch the black line.</p> + <div> + <span id="span1"></span> + <span id="span2"></span> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-101-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-101-ref.xht new file mode 100644 index 0000000000..787b26cf25 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-101-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/" /> + + <style type="text/css"><![CDATA[ + div + { + border: teal solid 1px; + margin: 4px; + padding: 4px; + } + + div#outer + { + height: 178px; + margin-top: 20px; + width: 178px; + } + + div#inner + { + height: 160px; + width: 160px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are two nested squares and if the inner square is equidistant from the outer square on all sides.</p> + + <div id="outer"> + <div id="inner">This should be inside the inner square.</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-101.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-101.xht new file mode 100644 index 0000000000..7b3d721e1c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-101.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: CSS Floats: Nested floats (no other content)</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-26 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/001-demo.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-101-ref.xht" /> + + <style type="text/css"> + div { border: 1px solid teal; padding: 4px; margin: 4px; } + .left { float: left; } + .right { float: right; } + .size { width: 10em; height: 10em; } + </style> + </head> + <body> + <p>Test passes if there are two nested squares and if the inner square + is equidistant from the outer square on all sides.</p> + <div class="left"><div class="size right">This should be inside the inner square.</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-102.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-102.xht new file mode 100644 index 0000000000..47be23449d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-102.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: CSS Floats: Nested floats (some inline content before nested float)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/002-demo.html" type="text/html" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <style type="text/css"> + div { border: 1px solid teal; padding: 4px; margin: 4px; } + .left { float: left; } + .right { float: right; } + .size { width: 150px; height: 150px; } + </style> + </head> + <body> + + <p>The content before should be to the right of the inner square, + and both it and the inner square should be surrounded by an outer box.</p> + + <div class="left">content before <div class="size left"></div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-103.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-103.xht new file mode 100644 index 0000000000..c662c65305 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-103.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: CSS Floats: Nested floats (some inline content after nested float)</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-07-01 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/003-demo.html" type="text/html" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + + <style type="text/css"> + div { border: 1px solid teal; padding: 4px; margin: 4px; } + .left { float: left; } + .right { float: right; } + .size { width: 150px; height: 150px; } + </style> + </head> + <body> + + <p>The content after should be to the right of the inner square, + and both it and the inner square should be surrounded by an outer box.</p> + + <div class="left"><div class="size left"></div> content after</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-104.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-104.xht new file mode 100644 index 0000000000..636e6f93db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-104.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Unexpected Presences, Part 1</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/004.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <style type="text/css"> + body * { margin: 4px; padding: 4px; border: 1px solid; display: block; } + .test { border-color: blue; width: 40em; } + .float { border-color: fuchsia; float: left; width: 5em; height: 5em; } + .first { border-color: purple; margin-left: 10em; } + .second { border-color: teal; } + </style> + </head> + <body> + <div class="test"> + <div class="first"> This is the first block, with a big left margin. At the end + of this block is a left float which should be square. Text that + follows this box should flow to the right of the float; the float + should always be on the left. <div class="float"> This is the square left + float. </div> </div> + <div class="second"> This is the second block. It should fit in the same + container as the first box. This text should wrap on the right side + of the float. </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-105.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-105.xht new file mode 100644 index 0000000000..2dbc24fc39 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-105.xht @@ -0,0 +1,29 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Unexpected Presences, Part 2</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/005.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <style type="text/css"> + body * { margin: 4px; padding: 4px; border: 1px solid; display: block; } + .test { border-color: blue; width: 40em; } + .float { border-color: fuchsia; float: left; width: 5em; height: 5em; } + .first { border-color: purple; margin-left: 10em; } + .second { border-color: teal; width: 10em; } + </style> + </head> + <body> + <div class="test"> + <div class="first"> This is the first block, with a big left margin. At the end + of this block is a left float which should be square. Text that + follows this box should flow to the right of the float or go below + it; no text should be on the left of the float. <div class="float"> This is + the square left float. </div> </div> + <div class="second"> This is the second block. It is sized so as to be just + wide enough to slightly overlap the float. Text shouldn't be able + to fit around the float without overflowing this box, so instead + all the text should just move below the float. </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-106.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-106.xht new file mode 100644 index 0000000000..4b1cc71c0e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-106.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: CSS Floats: Unexpected Presences, Part 3</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/006.html" type="text/html"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/006.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <style type="text/css"> + body * { margin: 4px; padding: 4px; border: 1px solid; display: block; } + .test { border-color: blue; width: 40em; } + .float { border-color: fuchsia; float: left; width: 5em; height: 5em; } + .first { border-color: purple; margin-left: 10em; } + .second { border-color: teal; width: 8em; } + </style> + </head> + <body> + <div class="test"> + <div class="first"> This is the first block, with a big left + margin. At the end of this block is a left float which should be + square. Text that follows this box should flow to the right of the + float or go below it; no text should be on the left of the float. + <div class="float"> This is the square left float. </div> </div> + <div class="second"> This is the second block. It is sized so as to + be just narrow enough to fit in the gap to the left of the + float. Text should not want to be to the left of the float, since + it is a left float in flow, so instead all the text should just + move below the float. </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-108.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-108.xht new file mode 100644 index 0000000000..a98781003b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-108.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: CSS Floats: Float Sizing (styled floats) </title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/008.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/008.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .float { float: left; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-109.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-109.xht new file mode 100644 index 0000000000..ebdbadc7ea --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-109.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: CSS Floats: Float Sizing (blocks inside styled floats)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/009.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/009.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .float { float: left; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-110.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-110.xht new file mode 100644 index 0000000000..86b6470ed6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-110.xht @@ -0,0 +1,34 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Float Sizing</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/010.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/010.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + + <meta name="flags" content="interact" /> + <style type="text/css"> + .float { float: left; } + .float div { margin: 0; border: solid; padding: 0.5em; margin: 0.5em; } + </style> + </head> + <body> + + <p> Make your window an inch or two bigger than than the width of + one float. All floats should be the same size. This document should + be pixel-perfect identical to <a href="008.xml">this one</a> and <a + href="009.xml">this one</a> at all window sizes. Try resizing the + window so that floats wrap in one or two columns. </p> + + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float this is a float this is a float this is a float this is a float </div> </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-111-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-111-ref.xht new file mode 100644 index 0000000000..ef2233f428 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-111-ref.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 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: black solid medium; + height: 40px; + margin: 40px; + width: 40px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 identical filled green squares with a black border.</p> + + <div></div> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-111.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-111.xht new file mode 100644 index 0000000000..4f8f14703d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-111.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text</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-04-07 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/011.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/011.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-111-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + .container { width: 40%; padding: 0; margin: 1em; border: solid black; font: 2.5em/1 Ahem; height: 1em; width: 1em; background: red; } + .test { text-align: right; float: right; clear: right; color: green; } + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 identical filled green squares with a black border.</p> + <div class="container"> <div class="test">x</div> </div> + <div class="container"> <div class="test"> x </div> </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-112-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-112-ref.xht new file mode 100644 index 0000000000..9967bfa931 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-112-ref.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 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: black solid medium; + height: 40px; + margin: 40px; + width: 80px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 identical filled green rectangles with a black border.</p> + + <div></div> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-112.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-112.xht new file mode 100644 index 0000000000..ec58b33713 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-112.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text</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-04-07 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/012.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/012.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-112-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + .container { width: 40%; padding: 0; margin: 1em; border: solid black; font: 2.5em/1 Ahem; height: 1em; width: 2em; background: red; } + .test { text-align: right; float: right; clear: right; color: green; } + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 identical filled green rectangles with a black border.</p> + <div class="container"> <div class="test">xx</div> </div> + <div class="container"> <div class="test"> xx </div> </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-113-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-113-ref.xht new file mode 100644 index 0000000000..9d3f8fdab3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-113-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 + { + border: black solid medium; + background-color: green; + height: 40px; + margin: 40px; + text-align: center; + width: 120px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 identical rectangles with a black border.</p> + + <div><img src="support/swatch-white.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + <div><img src="support/swatch-white.png" width="40" height="40" alt="Image download support must be enabled" /></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-113.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-113.xht new file mode 100644 index 0000000000..976caef676 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-113.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Shrink Wrapped Right Floats With Right Aligned Text</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-04-07 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/013.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/013.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-113-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + .container { width: 40%; padding: 0; margin: 1em; border: solid black; font: 2.5em/1 Ahem; height: 1em; width: 3em; background: white; } + .test { text-align: right; float: right; clear: right; color: green; } + ]]></style> + </head> + <body> + + <p>Test passes if there are 2 identical rectangles with a black border.</p> + <div class="container"> <div class="test">x x</div> </div> + <div class="container"> <div class="test"> x x </div> </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-114-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-114-ref.xht new file mode 100644 index 0000000000..3f81ae699c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-114-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + border: navy solid 3px; + margin: 1em 0em; + padding: 8px; + } + ]]></style> + + </head> + + <body> + + <p>The following three lines should be identical and should read 'PASS' as one unbroken word:</p> + + <div>PASS</div> + + <div>PASS</div> + + <div>PASS</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-114.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-114.xht new file mode 100644 index 0000000000..feb189a422 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-114.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Generated Content</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/014.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/014.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-114-ref.xht" /> + + <style type="text/css"> + .test { border: solid navy; padding: 0.5em; } + .a:before { float: none; content: 'PA'; width: 5em; } + .b:before { float: left; content: 'PA'; } + .c:after { float: left; content: 'PA'; height: 5em } + </style> + </head> + <body> + <p> The following three lines should be identical and should read 'PASS' as one unbroken word:</p> + <p class="test a">SS</p> + <p class="test b">SS</p> + <p class="test c">SS</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-115-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-115-ref.xht new file mode 100644 index 0000000000..5d789d042b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-115-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 50px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-115.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-115.xht new file mode 100644 index 0000000000..b426fcd610 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-115.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/015.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-115-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .test { display: block; width: 200px; height: 50px; background: red; } + .float { float: left; background: green; color: green; font: 50px/1 Ahem; } + </style> + </head> + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + <div class="test"> + <div class="float">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-116-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-116-ref.xht new file mode 100644 index 0000000000..298be901c4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-116-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 150px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-116.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-116.xht new file mode 100644 index 0000000000..507d74fb54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-116.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing (with padding)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/016.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-116-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .test { display: block; width: 300px; height: 150px; background: red; } + .float { float: left; background: green; color: green; font: 50px/1 Ahem; padding: 50px; } + </style> + </head> + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + <div class="test"> + <div class="float">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-117.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-117.xht new file mode 100644 index 0000000000..43183603a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-117.xht @@ -0,0 +1,24 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing (with border)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/017.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-116-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .test { display: block; width: 300px; height: 150px; background: red; } + .float { float: left; color: green; font: 50px/1 Ahem; border: 50px solid green; } + </style> + </head> + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + <div class="test"> + <div class="float">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-118-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-118-ref.xht new file mode 100644 index 0000000000..e5208bbeaa --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-118-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: navy; + height: 25px; + margin-bottom: 10px; + width: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 identical navy stripes.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-118.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-118.xht new file mode 100644 index 0000000000..efd369b47d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-118.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/018.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-118-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .test { display: block; } + span { display: block; width: 100px; height: 25px; margin-bottom: 10px; background: navy; } + .float { float: left; color: navy; font: 25px/1 Ahem; } + </style> + </head> + <body> + + <p>Test passes if there are 2 identical navy stripes.</p> + <div class="test"> + <span /> + <div class="float">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-119-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-119-ref.xht new file mode 100644 index 0000000000..684cef204a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-119-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: navy; + height: 75px; + margin-bottom: 10px; + width: 150px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 identical filled navy rectangles and <strong>no red</strong>.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-119.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-119.xht new file mode 100644 index 0000000000..4c8b4cbc97 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-119.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing (with padding)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/019.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-119-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .test { display: block; } + span { display: block; width: 150px; height: 75px; margin-bottom: 10px; background: navy; } + .float { float: left; background: navy; color: navy; font: 25px/1 Ahem; padding: 25px; } + </style> + </head> + <body> + + <p>Test passes if there are 2 identical filled navy rectangles and <strong>no red</strong>.</p> + <div class="test"> + <span/> + <div class="float">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-120.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-120.xht new file mode 100644 index 0000000000..c68c1930bd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-120.xht @@ -0,0 +1,25 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing (with border)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/020.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-119-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .test { display: block; } + span { display: block; width: 150px; height: 75px; margin-bottom: 10px; background: navy; } + .float { float: left; background: red; color: navy; font: 25px/1 Ahem; border: solid navy 25px; } + </style> + </head> + <body> + <p>Test passes if there are 2 identical filled navy rectangles and <strong>no red</strong>.</p> + <div class="test"> + <span/> + <div class="float">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-121-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-121-ref.xht new file mode 100644 index 0000000000..99d2b8112d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-121-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 + { + background-color: green; + border: white solid medium; + height: 50px; + margin: 66px 50px 50px 50px; + width: 200px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-121.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-121.xht new file mode 100644 index 0000000000..96df9be181 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-121.xht @@ -0,0 +1,26 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Fixed Sizing (with border)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/021.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-121-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { display: block; width: 299px; background: red; color: green; font: 50px/1 Ahem; border: solid white; } + .float { float: left; margin: 50px; } + </style> + </head> + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + <div id="container"> + <div class="test1"/> + <div class="test2"/> + <div class="float">XXXX</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-122-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-122-ref.xht new file mode 100644 index 0000000000..b9c1d5a985 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-122-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 50px; + margin: auto auto auto 50px; + width: 50px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-122.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-122.xht new file mode 100644 index 0000000000..783783222a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-122.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing Float Followed By Text</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/022.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-122-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { display: block; width: 100px; background: red; color: green; font: 50px/1 Ahem; position: relative; } + .float { float: left; color: white; } + </style> + </head> + <body> + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + <div id="container"> + <div class="float">X</div>X + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-123-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-123-ref.xht new file mode 100644 index 0000000000..2b6134f03d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-123-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 50px; + width: 50px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-123.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-123.xht new file mode 100644 index 0000000000..c05d6f0404 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-123.xht @@ -0,0 +1,21 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Auto Sizing (with relative positioning)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/023.xml" type="application/xhtml+xml"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-123-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + #container { display: block; width: 150px; background: red; position: relative; } + .float { float: left; color: green; font: 50px/1 Ahem; } + </style> + </head> + <body> + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + <div id="container"><div class="float">X</div></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-124-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-124-ref.xht new file mode 100644 index 0000000000..5be82a428f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-124-ref.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 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; + color: white; + display: inline; + line-height: 1; + vertical-align: top; + } + ]]></style> + + </head> + + <body> + + <div>There should be no red on this page.</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-124.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-124.xht new file mode 100644 index 0000000000..3a0a3e9535 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-124.xht @@ -0,0 +1,27 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Bottom Padding on Inline Children</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/024.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/024.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-124-ref.xht" /> + + <style type="text/css"> + /* reset everything to be sure we don't introduce oddities */ + div { border: 0; padding: 0; margin: 0; line-height: 1; float: left; } + span { border: 0; padding: 0; margin: 0; line-height: 1; display: inline; } + + /* the test */ + div { background: red; } + span.control { background: green; color: white; } + span.test { padding-bottom: 10em; } + </style> + </head> + <body> + <div> + <span class="test"><span class="control">There should be no red on this page.</span></span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-125-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-125-ref.xht new file mode 100644 index 0000000000..47ba036fbc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-125-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + line-height: 1; + margin-top: 12em; + } + + span + { + background-color: green; + color: white; + vertical-align: top; + } + ]]></style> + + </head> + + <body> + + <div><span>There should be no red on this page.</span></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-125.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-125.xht new file mode 100644 index 0000000000..1468dd9d31 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-125.xht @@ -0,0 +1,28 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Bottom Padding on Inline Children</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/025.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/025.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-125-ref.xht" /> + + <style type="text/css"> + /* reset everything to be sure we don't introduce oddities */ + div { border: 0; padding: 0; margin: 0; line-height: 1; float: left; } + span { border: 0; padding: 0; margin: 0; line-height: 1; display: inline; } + + /* the test */ + body { margin-top: 12em; } + div { background: red; } + span.control { background: green; color: white; } + span.test { padding-top: 10em; } + </style> + </head> + <body> + <div> + <span class="test"><span class="control">There should be no red on this page.</span></span> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-126.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-126.xht new file mode 100644 index 0000000000..d3aea7b1bc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-126.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: CSS Floats: Float Sizing (styled floated tables)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/026.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/026.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .float { float: left; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; display: table; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-127.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-127.xht new file mode 100644 index 0000000000..348167ca83 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-127.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: CSS Floats: Float Sizing (styled floated tables)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/027.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/027.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .float { float: left; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; display: table; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-128.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-128.xht new file mode 100644 index 0000000000..3b18f499ae --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-128.xht @@ -0,0 +1,33 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Float Sizing (styled blocks within floated tables)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/028.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/028.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .float { float: left; display: table; } + .float div { margin: 0; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-129.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-129.xht new file mode 100644 index 0000000000..b0a6855d03 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-129.xht @@ -0,0 +1,35 @@ +<!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 Floats: Float Sizing (styled floated tables within tables)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/029.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/029.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .table { display: table; } + .float { float: left; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; display: table; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="table"> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + <div class="float"> this is a float this is a float this is a float </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-130.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-130.xht new file mode 100644 index 0000000000..7eae100f09 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-130.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 Floats: Float Sizing (blocks within styled floated tables within tables)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/030.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/030.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .table { display: table; } + .float { float: left; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; display: table; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="table"> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + </div> + + </body> +</html> + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-131.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-131.xht new file mode 100644 index 0000000000..7dacb91d34 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-131.xht @@ -0,0 +1,38 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: CSS Floats: Float Sizing (styled blocks within floated tables within tables)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/031.xml" type="application/xhtml+xml"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/031.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="interact"/> + <style type="text/css"> + .table { display: table; } + .float { float: left; display: table; } + .float div { margin: 0; border: solid blue; color: silver; padding: 0.5em; margin: 0.5em; } + </style> + </head> + <body> + + <p><strong>All blue boxes must always be the same size</strong>. Make your + window an inch or two bigger than than the width of one box to check. Try + resizing the window so that the boxes wrap in two or more columns. Try + resizing the window to be narrower than the boxes so that the text inside + them wraps into two or more lines.</p> + + <div class="table"> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + <div class="float"> <div> this is a float this is a float this is a float </div> </div> + </div> + + </body> +</html> + + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-132-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-132-ref.xht new file mode 100644 index 0000000000..26a9891d1d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-132-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 1.25em; + width: 10em; + } + + div + div + { + background-color: lime; + } + ]]></style> + + </head> + + <body> + + <p>There should be two layers of green below.</p> + + <div></div> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-132.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-132.xht new file mode 100644 index 0000000000..ed947eff26 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-132.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: CSS Floats: Wrapping long text</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/032.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-132-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { font: 20px/1 Ahem; width: 8em; height: 2em; background: red; } + .box { height: 1em; background: green; color: lime; } + .float { width: 1em; height: 1em; float: left; background: green; } + </style> + </head> + <body> + <p>There should be two layers of green below.</p> + <div class="container"> + <div class="box"> + <div class="float"></div> + xxxxxxxx + </div> + </div> + </body> +</html> + + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-133-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-133-ref.xht new file mode 100644 index 0000000000..46ab18f91a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-133-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 20px; + width: 20px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-133.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-133.xht new file mode 100644 index 0000000000..45599baa9c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-133.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: CSS Floats: Wrapping text and position:static</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/033.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-133-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { font: 20px/1 Ahem; width: 2em; height: 1em; background: red; } + .box { height: 1em; color: white; } + .float { width: 1em; height: 1em; float: left; background: green; } + </style> + </head> + <body> + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div class="box"> + <div class="float"></div> + x + </div> + </div> + </body> +</html> + + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-134.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-134.xht new file mode 100644 index 0000000000..b19f0a6dab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-134.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: CSS Floats: Wrapping text and position:relative</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/034.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-133-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { font: 20px/1 Ahem; width: 2em; height: 1em; background: red; } + .box { height: 1em; color: white; position: relative; } + .float { width: 1em; height: 1em; float: left; background: green; } + </style> + </head> + <body> + <p>Test passes if there is a small filled green square and <strong>no red</strong>.</p> + <div class="container"> + <div class="box"> + <div class="float"></div> + x + </div> + </div> + </body> +</html> + + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-135-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-135-ref.xht new file mode 100644 index 0000000000..0684379d6e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-135-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 5em; + width: 15em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-135.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-135.xht new file mode 100644 index 0000000000..ff2924a037 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-135.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: CSS Floats: Wrapping blocks around floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/035.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-135-ref.xht" /> + + <meta name="flags" content="ahem" /> + <style type="text/css"> + .container { width: 15em; height: 5em; background: green; } + .float { width: 5em; height: 5em; background: green; float: left; } + .box { width: 5em; height: 5em; background: red; margin: 0; padding: 0; border: 0; } + </style> + </head> + <body> + <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> + <div class="container"> + <div class="float"></div> + <div class="box"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-136-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-136-ref.xht new file mode 100644 index 0000000000..48466c8166 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-136-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 30px; + width: 60px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a small filled green rectangle and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-136.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-136.xht new file mode 100644 index 0000000000..207426af57 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-136.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: CSS Floats: Wrapping blocks around floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/036.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-136-ref.xht" /> + + <meta name="flags" content="ahem" /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .container { font: 30px/1 Ahem; color: green; margin: 0; padding: 0; border: 0; + background: url(/css/support/60x60-red.png) no-repeat; + text-indent: 0; } + .float { width: 1em; height: 1em; background: green; float: left; + margin: 0; padding: 0; border: 0; } + </style> + </head> + <body> + <p>Test passes if there is a small filled green rectangle and <strong>no red</strong>.</p> + <div class="container"> + <div class="float"></div> + X + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-137.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-137.xht new file mode 100644 index 0000000000..410b97ff84 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-137.xht @@ -0,0 +1,88 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Wrapping text around multiple floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/wrapping/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="ahem animated"/> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + .ahem { font: 1.25em/1 Ahem; background: yellow; color: navy; } + div.ahem { border: solid 1em navy; width: 10em; height: 10em; } + pre.ahem { width: 12em; height: 12em; } + span { font: 0.75em/1 serif; } + + body.a .ahem, body.b .ahem { position: absolute; margin: 1em; } + body.a div.ahem { display: none; } + body.b pre.ahem { display: none; } + + .aleft { text-align: left; } + .aright { text-align: right; } + .acenter { text-align: center; } + .ajustify { text-align: justify; } + + .fleft { float: left; } + .fright { float: right; } + .fleft, .fright { background: navy; } + + .cleft { clear: left; } + .cright { clear: right; } + .cleft.cright { clear: both; } + + .w1 { width: 1em; } .h1 { height: 1em; } + .w2 { width: 2em; } .h2 { height: 2em; } + .w3 { width: 3em; } .h3 { height: 3em; } + .w4 { width: 4em; } .h4 { height: 4em; } + .w5 { width: 5em; } .h5 { height: 5em; } + + </style> + </head> + <body class="test"> + <p>If scripting is supported: there should be only a single static jumble below with the word + "Control" blinking steadily. If there are two squares, or if the + square is animated, then the test has failed.</p> + + <p>If scripting is unsupported: there should be two identical + patterned squares below.</p> + + <script type="text/javascript"> + var body = document.body; + var timer; + function toggle() { + body.className = body.className == 'a' ? 'b' : 'a'; + timer = window.setTimeout(toggle, 500); + } + toggle(); + </script> + + <p><button onclick="clearTimeout(timer); body.className = 'test';"> Examine </button></p> + + <div class="ahem"> + 1 + <div class="fleft w2 h2"></div> + 222222222 + <div class="fleft w1 h2"></div> + <div class="fleft w1 h5"></div> + <div class="fleft w1 h1"></div> + <div class="fleft w2 h2"></div> + <div class="fleft w1 h1"></div> + 3 444 55555555 66666 777777777 + </div> + + <pre class="ahem">############ +#AA1 # +#AA # +#B222222222# +#BCDEEF3 # +# C EE444 # +# C55555555# +# C66666 # +# C # +#777777777 # +# # +############ <span>Control</span> +</pre> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-138-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-138-ref.xht new file mode 100644 index 0000000000..d23da7c7a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-138-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[ + div {color: navy;} + + div + div {text-indent: 10em;} + ]]></style> + + </head> + + <body> + + <p>There should be two lines below, the second indented some way across.</p> + + <div>Line 1</div> + + <div>Line 2</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-138.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-138.xht new file mode 100644 index 0000000000..7d5746d1f3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-138.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: Clearing a float with margins</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/038.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-138-ref.xht" /> + + <style type="text/css"> + div { color: navy; } + .float { float: left; width: 8em; } + .indent { margin: 0 0 0 10em; } + .clear { clear: both; } + </style> + </head> + <body> + <p>There should be two lines below, the second indented some way across.</p> + <div class="float">Line 1</div> + <div class="indent"> + <div class="clear">Line 2</div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-139-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-139-ref.xht new file mode 100644 index 0000000000..0b6c19c09e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-139-ref.xht @@ -0,0 +1,17 @@ +<!DOCTYPE html PUBLIC "-//W3C//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>PASS</p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-139.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-139.xht new file mode 100644 index 0000000000..f130e44acf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-139.xht @@ -0,0 +1,17 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Floats: Ultra basic test</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/039.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-139-ref.xht" /> + + <style type="text/css"> + span { float: left; } + </style> + </head> + <body> + <p><span>PA</span>SS</p> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-140.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-140.xht new file mode 100644 index 0000000000..2537eb4c0e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-140.xht @@ -0,0 +1,17 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Floats: negative margin test</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/040.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + + <style type="text/css"> + p { margin-left: 5em; } + span { float: left; margin-left: -5em; width: 5em; text-align: right; } + </style> + </head> + <body> + <p><span>PA</span>SS</p> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-141-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-141-ref.xht new file mode 100644 index 0000000000..e852244971 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-141-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/" /> + + <style type="text/css"><![CDATA[ + p {color: blue;} + + div#wrapper + { + border: none 0px; + display: inline-block; + margin: 0em; + padding: 0em; + } + + div + { + border: solid thin; + margin: 0.2em; + padding: 0.2em; + } + + div#A + { + color: fuchsia; + width: 12em; + } + + div#B + { + color: orange; + display: inline-block; + width: 8em; + } + + div#C + { + color: orange; + display: inline-block; + width: 4em; + } + ]]></style> + + </head> + + <body> + + <p>C must not be above B.</p> + + <div id="wrapper"> + <div id="A">A</div> + <div id="B">B</div><div id="C">C</div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-141.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-141.xht new file mode 100644 index 0000000000..15fb41f757 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-141.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: Floats: No higher than earlier floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/041.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-141-ref.xht" /> + + <style type="text/css"> + p { color: blue; } + .container { width: 20em; } + .float { float: left; padding: 0.2em; margin: 0.2em; border: thin solid; } + .a { color: fuchsia; width: 12em; } + .b { color: orange; width: 8em; } + .c { color: orange; width: 4em; } + </style> + </head> + <body> + <p>C must not be above B.</p> + <div class="container"> + <div class="float a">A</div> + <div class="float b">B</div> + <div class="float c">C</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-142-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-142-ref.xht new file mode 100644 index 0000000000..c2ca05d300 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-142-ref.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 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; + color: green; + width: 10em; + } + ]]></style> + + </head> + + <body> + + <p>There should be a short green bar with no text in it.</p> + + <div>X</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-142.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-142.xht new file mode 100644 index 0000000000..c64f889699 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-142.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: Floats: negative margin test</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-04-08 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/042.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-142-ref.xht" /> + + <style type="text/css"> + div { background: green; } + div p { margin-left: 10em; background: white; color: white; } + div p span { float: left; margin-left: -8em; } + </style> + </head> + <body> + <p>There should be a short green bar with no text in it.</p> + <div> + <p> FAIL <span></span> </p> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-143-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-143-ref.xht new file mode 100644 index 0000000000..2fcdc134ca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-143-ref.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 Reftest Reference</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + div + { + background-color: green; + color: white; + display: inline-block; + font: 900 2em/1 sans-serif; + } + ]]></style> + + </head> + + <body> + + <p>There should be a single green block with the word "PASS" below.</p> + + <div>PASS</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-143.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-143.xht new file mode 100644 index 0000000000..6eb7e7107e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-143.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: Nested floats: Basic</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-04-14 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/043.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-143-ref.xht" /> + + <style type="text/css"> + /* Disable kerning because kerning may differ for different node tree. */ + html { font-kerning: none; font-feature-settings: "kern" off; } + .float { float: left; background: red; padding: 0; margin: 0; list-style: none; } + .text { font: 900 2em/1 sans-serif; background: green; color: white; } + </style> + </head> + <body> + <p>There should be a single green block with the word "PASS" below.</p> + <ul class="float"> + <li class="float"> <span class="float text"> PA </span></li> + <li class="float"> <span class="float text"> SS </span></li> + </ul> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-144-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-144-ref.xht new file mode 100644 index 0000000000..f39570e766 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-144-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {color: green;} + ]]></style> + + </head> + + <body> + + <div>This line should be green (line 1).</div> + + <div>This line should be green (line 2).</div> + + <div>This line should be green (line 3).</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-144.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-144.xht new file mode 100644 index 0000000000..89e33dc5dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-144.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: Floats inside blocks</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/044.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-144-ref.xht" /> + + <style type="text/css"> + p { float: left; color: green; margin: 0; } + div { background: red; clear: both; } + div.a { } + div.b { width: 30em; } + div.c { height: 0; } + </style> + </head> + <body> + <div class="a"><p>This line should be green (line 1).</p></div> + <div class="b"><p>This line should be green (line 2).</p></div> + <div class="c"><p>This line should be green (line 3).</p></div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-145-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-145-ref.xht new file mode 100644 index 0000000000..0cde7b4a4b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-145-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + img + { + margin-top: 90px; + vertical-align: top; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue bar.</p> + + <div><img src="support/swatch-blue.png" width="330" height="30" alt="Image download support must be enabled" /></div> + + </body> +</html> + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-145.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-145.xht new file mode 100644 index 0000000000..b5b5bf2c1f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-145.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 Test: Bottom margins on floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/045.html" type="text/html"/> + <link rel="bookmark" href="https://github.com/servo/servo/pull/10458#issuecomment-210204244" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2016Apr/0028.html" title="About floats-145" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-145-ref.xht" /> + + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"><![CDATA[ + div + { + background-color: blue; + float: left; + font: 30px/3 Ahem; /* computes to 30px/90px */ + } + + span + { + background-color: white; + color: white; + float: left; + margin-bottom: 1em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a blue bar.</p> + + <div><span>Text sample</span></div> + + </body> +</html> + diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-146-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-146-ref.xht new file mode 100644 index 0000000000..63f25fa5bb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-146-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[ + p {color: blue;} + + div {font-size: 20px;} + + div#A + { + border: fuchsia solid 1px; + color: fuchsia; + margin: 20px 4px 4px 4px; + padding: 4px; + width: 240px; + } + + span + { + border: orange solid 1px; + color: orange; + display: inline-block; + margin: 4px; + padding: 4px; + } + + span#B + { + margin-right: 8px; + width: 280px; + } + + span#C {width: 80px;} + ]]></style> + + </head> + + <body> + + <p>C must not be above B.</p> + + <div id="A">A</div> + + <div><span id="B">B</span><span id="C">C</span></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-146.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-146.xht new file mode 100644 index 0000000000..9aa4be34f0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-146.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: Floats: No higher than earlier floats</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-04-05 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/046.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-146-ref.xht" /> + + <style type="text/css"> + p { color: blue; } + .container { font-size: 20px; width: 20em; } + .float { padding: 0.2em; margin: 0.2em; border: 1px solid; } + .a { color: fuchsia; width: 12em; float: left; } + .b { color: orange; width: 14em; float: left; } + .c { color: orange; width: 4em; float: right; } + </style> + </head> + <body> + <p>C must not be above B.</p> + <div class="container"> + <div class="float a">A</div> + <div class="float b">B</div> + <div class="float c">C</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-147-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-147-ref.xht new file mode 100644 index 0000000000..a25459d5c7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-147-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: blue; + border-color: orange; + border-style: none solid; + border-width: 1em; + height: 3em; + width: 14em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a single blue rectangle with a vertical orange stripe on each side.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-147.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-147.xht new file mode 100644 index 0000000000..e75a7e84d8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-147.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: Floats: No more to the right than the right edge of the containing block</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="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/047-demo.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-147-ref.xht" /> + + <style type="text/css"> + .outer { width: 15em; background: red; border-left: 1em solid orange; } + .container { width: 9em; margin-left: 4em; background: orange; + height: 1em; line-height: 1; + border: 1em transparent; border-style: none solid; } + .float { float: right; width: 14em; background: blue; color: blue; } + .control { width: 14em; height: 1em; background: blue; + border-left: 1em solid orange; border-right: 1em solid orange; } + </style> + </head> + <body> + <p>Test passes if there is a single blue rectangle with a vertical + orange stripe on each side.</p> + <div class="control"></div> + <div class="outer" dir="ltr"> + <div class="container"> + <div class="float">TEST-LTR</div> + </div> + </div> + <div class="outer" dir="rtl"> + <div class="container"> + <div class="float">TEST-RTL</div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-149-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-149-ref.xht new file mode 100644 index 0000000000..cd3b0c1df6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-149-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: 0px; + table-layout: fixed; + width: 100%; + } + + td + { + padding: 0px; + vertical-align: top; + width: 50%; + } + + div {background-color: green;} + ]]></style> + + </head> + + <body> + + <table> + <tr> + <td>There should be a green bar to the right: ⇨</td> + <td><div> </div></td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-149.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-149.xht new file mode 100644 index 0000000000..cae4266953 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-149.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: Empty inlines being displaced by floats</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-07-01 --> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/049.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-149-ref.xht" /> + + <style type="text/css"> + .block { display: block; background: green; } + .inline { display: inline; margin-left: 40px; } + span { float: left; width: 50%; background: white; } + </style> + </head> + <body> + <div class="block"> + <div class="inline"> + <span>There should be a green bar to the right: ⇨</span> + <span></span> <!-- this float should be on the second "line" --> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-150-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-150-ref.xht new file mode 100644 index 0000000000..addea70a28 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-150-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + body {margin: 3.5em 12.5em 3.5em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-150.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-150.xht new file mode 100644 index 0000000000..69764388d3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-150.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: Positioning of floats in tables: auto-width floats with negative outer width</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/050.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-150-ref.xht" /> + + <style type="text/css"> + body { padding: 2em 12em; } + td { padding: 0; background: red; } + div { float: right; margin-left: -10em; color: white; } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <table> + <tr> + <td> + <div>FAIL</div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-151.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-151.xht new file mode 100644 index 0000000000..91f314c58b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-151.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: Positioning of floats in tables: auto-width floats with negative outer width</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/051.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + + <style type="text/css"> + td { padding: 2em 5em; } + div { float: right; margin-left: -10em; color: white; background: green; } + </style> + </head> + <body> + <p>Test passes if there is the word PASS with a green background.</p> + <table> + <tr> + <td> + <div>PASS</div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-152.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-152.xht new file mode 100644 index 0000000000..42df8c1645 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-152.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: Positioning of floats in tables: zero-width floats with negative outer width</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/052.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-150-ref.xht" /> + + <style type="text/css"> + body { padding: 2em 12em; } + td { padding: 0; background: red; } + div { width: 0; float: right; margin-left: -10em; color: white; } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <table> + <tr> + <td> + <div>FAIL</div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-153-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-153-ref.xht new file mode 100644 index 0000000000..dc4796eba0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-153-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 + { + color: green; + display: inline; + left: 82px; + position: relative; + top: 34px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is the green word PASS.</p> + + <div>PASS</div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-153.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-153.xht new file mode 100644 index 0000000000..67129c4da2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-153.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: Positioning of floats in tables: zero-width floats with negative outer width</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/053.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-153-ref.xht" /> + + <style type="text/css"> + td { padding: 2em 5em; } + div { width: 0; float: right; margin-left: -10em; color: green; background: red; } + </style> + </head> + <body> + <p>Test passes if there is the green word PASS.</p> + <table> + <tr> + <td> + <div>PASS</div> + </td> + </tr> + </table> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-154-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-154-ref.xht new file mode 100644 index 0000000000..e15ec103a8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-154-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 128px; + width: 128px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-154.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-154.xht new file mode 100644 index 0000000000..5d704febdf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-154.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: Stacking contexts of relatively positioned content inside floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/054.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-154-ref.xht" /> + + <style type="text/css"> + body { font-size: 8em; } + p { font-size: medium; } + .float { float: left; height: 1em; width: 1em; margin-right: -1em; background: red; } + .relative { position: relative; height: 1em; width: 1em; background: green; } + .inline { color: red; } + </style> + </head> + <body> + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + <div class="float"><div class="relative"></div></div> + <div class="inline">X</div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-001-ref.xht new file mode 100644 index 0000000000..979298deab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-001-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 300px; + width: 300px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a big filled green square and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-001.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-001.xht new file mode 100644 index 0000000000..aa97aeed04 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-001.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: Floats with overflow:hidden next to them</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/root-formatting-contexts/001.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-bfc-001-ref.xht" /> + + <style type="text/css"> + .outer { background: red; height: 300px; width: 300px; } + .block { background: green; height: auto; width: 300px; } + .float { background: green; height: 150px; width: 150px; float: left; } + .overflow { background: green; height: 150px; width: 200px; overflow: hidden; } + </style> + </head> + <body> + <p>Test passes if there is a big filled green square and <strong>no red</strong>.</p> + <div class="outer"> + <div class="block"> + <div class="float"></div> + <div class="overflow"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-002.xht new file mode 100644 index 0000000000..3292e3b650 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-bfc-002.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: Floats with overflow:hidden next to them</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact" /> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/float/root-formatting-contexts/002.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-bfc-001-ref.xht" /> + + <style type="text/css"> + .outer { background: green; height: 300px; width: 300px; } + .block { background: red; height: auto; width: 300px; } + .float { background: green; height: 150px; width: 150px; float: left; } + .overflow { background: green; height: 150px; width: 150px; overflow: hidden; } + </style> + </head> + <body> + <p>Test passes if there is a big filled green square and <strong>no red</strong>.</p> + <div class="outer"> + <div class="block"> + <div class="float"></div> + <div class="overflow"></div> + </div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-000-ref.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-000-ref.html new file mode 100644 index 0000000000..90c2d6abcb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-000-ref.html @@ -0,0 +1,37 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test Reference: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + column-fill: auto; + height: 100px; +} + +.container { + border: 15px aqua; + border-style: none solid; + height: 250px; +} +.clear { + border-bottom: solid orange; + background: red; +} +</style> + +<p>The orange line should be halfway down the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + </div> + <div class="clear"> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-000.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-000.html new file mode 100644 index 0000000000..3598a2f7ab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-000.html @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + column-fill: auto; + height: 100px; +} + +.float { + float: right; + width: 15px; + background: aqua; + height: 250px; +} +.L { + float: left; +} + +.container { + width: 100%; + background: red; +} + +.clear { + border-bottom: solid orange; +} +</style> + +<p>The orange line should be halfway down the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + </div> + <div class="clear"> + <br clear="all"> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-001.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-001.html new file mode 100644 index 0000000000..dbcb3b557b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-001.html @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + column-fill: auto; + height: 100px; +} + +.float { + float: right; + width: 15px; + background: aqua; + height: 250px; +} +.L { + float: left; +} + +.container { + width: 100%; +} + +.clear { + border-bottom: solid orange; + background: red; +} +</style> + +<p>The orange line should be halfway down the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + <br clear="all"> + </div> + <div class="clear"> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-002.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-002.html new file mode 100644 index 0000000000..877ffed2c2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-002.html @@ -0,0 +1,51 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + column-fill: auto; + height: 100px; +} + +.float { + float: right; + width: 15px; + background: aqua; + height: 250px; +} +.L { + float: left; +} + +.container { + width: 100%; + background: red; +} + +.clear { + clear: left; + border-bottom: solid orange; + background: red; +} +</style> + +<p>The orange line should be halfway down the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + </div> + <div class="clear"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-003.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-003.html new file mode 100644 index 0000000000..3f951b67f9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-003.html @@ -0,0 +1,60 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + column-fill: auto; + height: 100px; +} + +.step { + height: 10px; + border: 15px aqua; + border-style: none solid; +} +.float { + float: right; + width: 15px; + background: aqua; + height: 240px; +} +.L { + float: left; +} + +.container { + width: 100%; + background: red; +} + +.clear { + clear: left; + height: 0; + background: red; +} +.bar { + border-bottom: orange solid; +} +</style> + +<p>The orange line should be halfway down the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="step"></div> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + </div> + <div class="clear"><div class="bar"></div></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-000-ref.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-000-ref.html new file mode 100644 index 0000000000..e3b700c5d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-000-ref.html @@ -0,0 +1,36 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test Reference: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + height: 100px; +} + +.container { + border: 15px aqua; + border-style: none solid; + height: 250px; +} +.clear { + border-bottom: 5px solid orange; + background: red; +} +</style> + +<p>The orange line should be in the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + </div> + <div class="clear"> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-000.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-000.html new file mode 100644 index 0000000000..b034ceab49 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-000.html @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-balancing-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + height: 100px; +} + +.float { + float: right; + width: 15px; + background: aqua; + height: 250px; +} +.L { + float: left; +} + +.container { + width: 100%; + background: red; +} + +.clear { + border-bottom: 5px solid orange; +} +</style> + +<p>The orange line should be in the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + </div> + <div class="clear"> + <br clear="all"> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-001.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-001.html new file mode 100644 index 0000000000..5944343c60 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-001.html @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-balancing-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + height: 100px; +} + +.float { + float: right; + width: 15px; + background: aqua; + height: 250px; +} +.L { + float: left; +} + +.container { + width: 100%; +} + +.clear { + border-bottom: 5px solid orange; + background: red; +} +</style> + +<p>The orange line should be in the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + <br clear="all"> + </div> + <div class="clear"> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-002.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-002.html new file mode 100644 index 0000000000..99f86d1d45 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-002.html @@ -0,0 +1,50 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-balancing-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + height: 100px; +} + +.float { + float: right; + width: 15px; + background: aqua; + height: 250px; +} +.L { + float: left; +} + +.container { + width: 100%; + background: red; +} + +.clear { + clear: left; + border-bottom: 5px solid orange; + background: red; +} +</style> + +<p>The orange line should be in the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + </div> + <div class="clear"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-003.html b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-003.html new file mode 100644 index 0000000000..4bc32d833d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/floats-clear-multicol-balancing-003.html @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"> +<title>CSS Float Test: Test the clear position after the floating elements breaking across multi-columns</title> +<link rel="author" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/> +<link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> +<link rel="author" title="Mozilla" href="http://www.mozilla.org/"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#flow-control"> +<link rel="match" href="floats-clear-multicol-balancing-000-ref.html"> + +<style type="text/css"> +.multicol { + margin: 1em; + border: solid silver; + width: 300px; + column-width: 100px; + column-gap: 0; + height: 100px; +} + +.step { + height: 10px; + border: 15px aqua; + border-style: none solid; +} +.float { + float: right; + width: 15px; + background: aqua; + height: 240px; +} +.L { + float: left; +} + +.container { + width: 100%; + background: red; +} + +.clear { + clear: left; + height: 0; + background: red; +} +.bar { + border-bottom: 5px orange solid; +} +</style> + +<p>The orange line should be in the third column +(immediately after the end of the aqua lines). + +<div class="multicol"> + <div class="step"></div> + <div class="container"> + <div class="float L"></div> + <div class="float R"></div> + </div> + <div class="clear"><div class="bar"></div></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-018.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-018.xht new file mode 100644 index 0000000000..f509ad1ac4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-018.xht @@ -0,0 +1,55 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Margin collapsing - element with clearance</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="match" href="clearance-006-ref.xht" /> + + <meta name="flags" content="ahem image" /> + <meta name="assert" content="An element that has clearance applied to it will not collapse its top margin with its parent's bottom margin." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + width: 5em; + } + #div1 + { + background: url('support/margin-collapse-4em-space.png'); + height: 6em + } + .class1 + { + background: green; + height: 1em; + } + #div2 + { + margin-bottom: 1em; + } + #div3 + { + float: left; + height: 3em; + } + #div4 + { + clear: both; + margin-top: 1em; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="div1"> + <div class="class1"></div> + <div id="div2"> + <div id="div3"></div> + <div id="div4"></div> + </div> + <div class="class1"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-023.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-023.xht new file mode 100644 index 0000000000..e54c0a203f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-023.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: Margin collapsing - clearance applied to sibling</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="match" href="clearance-006-ref.xht" /> + + <meta name="flags" content="ahem image" /> + <meta name="assert" content="If an in-flow block-level sibling (#div4) has clearance applied to it, then it will not adjoin its top margin with the bottom margin of its previous in-flow sibling (#div2)." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + width: 5em; + } + #div3 + { + float: left; + height: 3em; + } + #div1 + { + background: url('support/margin-collapse-4em-space.png'); + height: 6em; + } + #div2 + { + margin-bottom: 1em; + } + #div4 + { + clear: both; + margin-top: 2em; + } + #div2, #div4 + { + background: green; + height: 1em; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"></div> + <div id="div4"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-024-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-024-ref.xht new file mode 100644 index 0000000000..25ad3800be --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-024-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; + height: 1.25em; + margin: 1em 0em 2.5em; + width: 6.25em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is no red.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-024.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-024.xht new file mode 100644 index 0000000000..2d64922f61 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-024.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: Margin collapsing - in-flow block-level margin adjoining child's margin</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="match" href="margin-collapse-024-ref.xht" /> + + <meta name="flags" content="ahem image" /> + <meta name="assert" content="When an in-flow block-level element (#div3) is adjoining its in-flow block-level child's top margin and the child has no top border, no top padding or no clearance applied to it, then such top margins collapse." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + width: 5em; + } + #div1 + { + background: url('support/margin-collapse-2em-space.png'); + height: 4em; + } + #div2, #div4 + { + background: green; + height: 1em; + } + #div3 + { + background: red; + } + #div3, #div4 + { + margin-top: 2em; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="div1"> + <div id="div2"></div> + <div id="div3"> + <div id="div4"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-027.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-027.xht new file mode 100644 index 0000000000..fd9a53bd52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-027.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Margin collapsing - bottom margin not collapse when cleared</title> + <link rel="author" title="Microsoft" href="http://www.microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="match" href="clearance-006-ref.xht" /> + + <meta name="flags" content="ahem image" /> + <meta name="assert" content="When a last sibling has clearance, its own margins collapse and it collapsed its margins with a subsequent sibling, the last sibling does not collapse its bottom margin with its parent's bottom margin." /> + <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> + <style type="text/css"> + div + { + font: 20px/1em Ahem; + width: 5em; + } + #div1 + { + background: url('support/margin-collapse-4em-space.png'); + height: 6em; + } + #div2 + { + margin-bottom: 2em; + } + #div3, #div5 + { + margin-bottom: 1em; + } + #div3, #div6 + { + background: green; + height: 1em; + } + #div4 + { + float: left; + height: 1em; + } + #div5 + { + clear: both; + margin-top: 1.5em; + } + </style> + </head> + <body> + <p>Test passes if there is no red.</p> + <div id="div1"> + <div id="div2"> + <div id="div3"></div> + <div id="div4"></div> + <div id="div5"></div> + </div> + <div id="div6"></div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-031-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-031-ref.xht new file mode 100644 index 0000000000..d021e994bb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-031-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[ + div + { + background-color: green; + color: white; + margin-top: 100px; + } + ]]></style> + + </head> + + <body> + + <div>Test passes if there is <strong>no red</strong>.</div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-031.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-031.xht new file mode 100644 index 0000000000..13e70e0b3a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-031.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: margin collapsing - child has no clearance</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/box.html#collapsing-margins" /> + <link rel="match" href="margin-collapse-031-ref.xht" /> + + <meta name="assert" content="The top margin of an in-flow block-level element is adjoining to its first in-flow block-level child's top margin if the element has no top border, no top padding, and the child has no clearance." /> + + <style type="text/css"><![CDATA[ + body + { + background-color: white; + margin: 8px; + } + + div#parent-block-container + { + background-color: red; + margin: 0px; + width: 100%; + } + + div#child-block + { + background-color: green; + color: white; + margin: 100px 0px; + } + ]]></style> + + </head> + + <body> + + <div id="parent-block-container"> + <div id="child-block"> + Test passes if there is <strong>no red</strong>. + </div> + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-033.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-033.xht new file mode 100644 index 0000000000..a86d89c246 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-033.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"> + + <head> + + <title>CSS Test: margin collapsing - clear</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Matt Bradley" href="http://www.inventpartners.com/content/contact" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta content="Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings." name="assert" /> + + <style type="text/css"><![CDATA[ + div#overlapped-red + { + background-color: red; + height: 100px; + position: absolute; + width: 100px; + z-index: -1; + } + + div#overlapping-green-container + { + background-color: green; + width: 100px; + } + + div#floated-left + { + float: left; + height: 1px; + } + + div#clear-left {clear: left;} + + div#following-sibling {margin-top: 99px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="overlapped-red"></div> + + <div id="overlapping-green-container"> + <div id="floated-left"></div> + + <div id="clear-left"></div> + + <div id="following-sibling"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-034.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-034.xht new file mode 100644 index 0000000000..2cc0d1df53 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-034.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"> + + <head> + + <title>CSS Test: margin collapsing - clear</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Matt Bradley" href="http://www.inventpartners.com/content/contact" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta content="Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings." name="assert" /> + + <style type="text/css"><![CDATA[ + div#overlapped-red + { + background-color: red; + height: 100px; + position: absolute; + width: 100px; + z-index: -1; + } + + div#overlapping-green-container + { + background-color: green; + width: 100px; + } + + div#floated-right + { + float: right; + height: 1px; + } + + div#clear-right {clear: right;} + + div#following-sibling {margin-top: 99px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="overlapped-red"></div> + + <div id="overlapping-green-container"> + <div id="floated-right"></div> + + <div id="clear-right"></div> + + <div id="following-sibling"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-035.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-035.xht new file mode 100644 index 0000000000..16168971c2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-035.xht @@ -0,0 +1,68 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: margin collapsing - clear</title> + + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Matt Bradley" href="http://www.inventpartners.com/content/contact" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> + <meta content="Margin-top of following siblings of a block on which 'clear' has been set (to a different value than 'none') must not be substracted when calculating clearance. When an element's own margins collapse, and that element has had clearance applied to it, its top margin collapses with the adjoining margins of following siblings." name="assert" /> + + <style type="text/css"><![CDATA[ + div#overlapped-red + { + background-color: red; + height: 100px; + position: absolute; + width: 100px; + z-index: -1; + } + + div#overlapping-green-container + { + background-color: green; + width: 100px; + } + + div#floated-left + { + float: left; + height: 1px; + } + + div#floated-right + { + float: right; + height: 1px; + } + + div#clear-both {clear: both;} + + div#following-sibling {margin-top: 99px;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> + + <div id="overlapped-red"></div> + + <div id="overlapping-green-container"> + <div id="floated-left"></div> + + <div id="floated-right"></div> + + <div id="clear-both"></div> + + <div id="following-sibling"></div> + </div> + + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-121-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-121-ref.xht new file mode 100644 index 0000000000..f74b1e6dd1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-121-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + table + { + border: black solid medium; + border-spacing: 0px; + display: inline-table; + margin: 1em 0em auto 1em; + } + + td {padding: 0px;} + + td.square { height: 4em; width: 4em; } + td.rectangle { height: 4em; width: 8em; } + td.lime { background-color: lime; } + td.aqua { background-color: aqua; } + td.yellow { background-color: yellow; } + ]]></style> + + </head> + + <body> + + <p>The following two squares should be identical.</p> + + <table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + </table><table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-121.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-121.xht new file mode 100644 index 0000000000..8b6141ea37 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-121.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Margin Collapsing: clear (control: no margins)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/021.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-121-ref.xht" /> + + <style type="text/css"> + table, td { padding: 0; border-spacing: 0; } + .comparator { border-spacing: 1em; } + .test, .control { border: solid; background: red; } + .test .container { display: block; margin: 0; width: 8em; background: lime; } + .test .float { float: left; margin: 0; height: 4em; width: 4em; background: aqua; } + .test .clear { clear: left; display: block; border: 2em solid yellow; margin: 0; } + .control .square { height: 4em; width: 4em; } + .control .rectangle { height: 4em; width: 8em; } + .control .lime { background: lime; } + .control .aqua { background: aqua; } + .control .yellow { background: yellow; } + </style> + </head> + <body> + <p>The following two squares should be identical.</p> + <table class="comparator"> + <tr> + <td class="test"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> </div> + </div> + </td> + <td class="control"> + <table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + </table> + </td> + </tr> + </table> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-122.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-122.xht new file mode 100644 index 0000000000..17081a2cfe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-122.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Margin Collapsing: clear (simple)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/022.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-121-ref.xht" /> + + <style type="text/css"> + table, td { padding: 0; border-spacing: 0; vertical-align: top; } + .comparator { border-spacing: 1em; } + .test, .control { border: solid; background: red; } + .test .container { display: block; margin: 0; width: 8em; background: lime; } + .test .float { float: left; margin: 0; height: 4em; width: 4em; background: aqua; } + .test .clear { clear: left; display: block; border: 2em solid yellow; margin-top: 1em; } + .control .square { height: 4em; width: 4em; } + .control .rectangle { height: 4em; width: 8em; } + .control .lime { background: lime; } + .control .aqua { background: aqua; } + .control .yellow { background: yellow; } + </style> + </head> + <body> + <p>The following two squares should be identical.</p> + <table class="comparator"> + <tr> + <td class="test"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> </div> + </div> + </td> + <td class="control"> + <table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + </table> + </td> + </tr> + </table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-123-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-123-ref.xht new file mode 100644 index 0000000000..80dc48a178 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-123-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/" /> + + <style type="text/css"><![CDATA[ + table + { + background-color: orange; + border: black solid medium; + border-spacing: 0px; + display: inline-table; + margin: 1em 0em auto 1em; + } + + td + { + height: 2em; + padding: 0px; + width: 3em; + } + + td.yellow {background-color: yellow;} + ]]></style> + + </head> + + <body> + + <p>The following two rectangles should be identical.</p> + + <table> + <tr> + <td></td> + <td class="yellow"></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + </table><table> + <tr> + <td></td> + <td class="yellow"></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-123.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-123.xht new file mode 100644 index 0000000000..db83b34178 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-123.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Margin Collapsing: clear (with nearby collapse-through block)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/023.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-123-ref.xht" /> + + <style type="text/css"> + table, td { padding: 0; border-spacing: 0; } + .comparator { border-spacing: 1em; } + .test, .control { background: red; } + .test .container { display: block; margin: 0; width: 6em; background: yellow; border: solid; } + .test .float { float: left; margin: 0; height: 2em; width: 3em; background: orange; } + .test .empty { display: block; background: red; margin: 2em 0; } + .test .clear { clear: left; display: block; border-top: 2em solid orange; margin-top: 1em; } + .control table { border: solid; } + .control .square { height: 2em; width: 3em; } + .control .thin { height: 2em; width: 6em; } + .control .thick { height: 2em; width: 6em; } + .control .yellow { background: yellow; } + .control .orange { background: orange; } + </style> + </head> + <body> + <p>The following two rectangles should be identical.</p> + <table class="comparator"> + <tr> + <td class="test"> + <div class="container"> + <div class="float"> </div> + <div class="empty"> </div> + <div class="clear"> </div> + </div> + </td> + <td class="control"> + <table> + <tr> + <td class="square orange"></td> + <td class="square yellow"></td> + </tr> + <tr> + <td colspan="2" class="thin orange"></td> + </tr> + </table> + </td> + </tr> + </table> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-125-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-125-ref.xht new file mode 100644 index 0000000000..10e21f49fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-125-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + table + { + border: black solid medium; + border-spacing: 0px; + display: inline-table; + margin: 1em 0em auto 1em; + } + + td {padding: 0px;} + + td.square { height: 4em; width: 4em; } + td.rectangle { height: 2em; width: 8em; } + td.lime { background-color: lime; } + td.aqua { background-color: aqua; } + td.yellow { background-color: yellow; } + ]]></style> + + </head> + + <body> + + <p>The following two rectangles should be identical.</p> + + <table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + </table><table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-125.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-125.xht new file mode 100644 index 0000000000..42b39e5f9d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-125.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Margin Collapsing: clear (on a self-collapsing block with a margin)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/025.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-125-ref.xht" /> + + <style type="text/css"> + table, td { padding: 0; border-spacing: 0; vertical-align: top; } + .comparator { border-spacing: 1em; } + .test, .control { border: solid; background: red; } + .test .container { display: block; margin: 0; width: 8em; background: lime; } + .test .float { float: left; margin: 0; height: 4em; width: 4em; background: aqua; } + .test .clear { clear: left; display: block; background: red; margin: 2em 0; } + .test .block { display: block; margin: 1em 0 0; border-top: 2em solid yellow; } + .control .square { height: 4em; width: 4em; } + .control .rectangle { height: 2em; width: 8em; } + .control .lime { background: lime; } + .control .aqua { background: aqua; } + .control .yellow { background: yellow; } + </style> + </head> + <body> + <p>The following two rectangles should be identical.</p> + <table class="comparator"> + <tr> + <td class="test"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> </div> + <div class="block"> </div> + </div> + </td> + <td class="control"> + <table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + </table> + </td> + </tr> + </table> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-134-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-134-ref.xht new file mode 100644 index 0000000000..53eb9830af --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-134-ref.xht @@ -0,0 +1,67 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + table + { + border: black solid medium; + border-spacing: 0px; + display: inline-table; + margin: 1em 0em auto 1em; + } + + td {height: 1em; width: 8em; padding: 0px;} + + .lime { background-color: lime; } + .yellow { background-color: yellow; } + .green { background-color: green; } + ]]></style> + + </head> + + <body> + + <p>The following three rectangles should be identical, with no red present.</p> + + <div><table> + <tr> + <td class="lime"></td> + </tr> + <tr> + <td class="yellow"></td> + </tr> + <tr> + <td class="green"></td> + </tr> + </table><table> + <tr> + <td class="lime"></td> + </tr> + <tr> + <td class="yellow"></td> + </tr> + <tr> + <td class="green"></td> + </tr> + </table></div> + + <table> + <tr> + <td class="lime"></td> + </tr> + <tr> + <td class="yellow"></td> + </tr> + <tr> + <td class="green"></td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-134.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-134.xht new file mode 100644 index 0000000000..a777b655ce --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-134.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Margin Collapsing: clear with no floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/034.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-134-ref.xht" /> + + <style type="text/css"> + table, td { padding: 0; border-spacing: 0; } + .comparator { border-spacing: 1em; } + .test, .control { border: solid; background: red; } + + .test .container { display: block; background: yellow; margin: 0; width: 8em; } + .test .block { display: block; border-top: 1em solid lime; margin: 0 0 0 0; } + .test .clear { display: block; border-top: 1em solid green; margin: 1em 0 0 0; clear: right; } + + .control .lime { background: lime; height: 1em; width: 8em; } + .control .yellow { background: yellow; height: 1em; width: 8em; } + .control .green { background: green; height: 1em; width: 8em; } + + </style> + </head> + <body> + <p>The following three rectangles should be identical, with no red present.</p> + <table class="comparator"> + <tr> + <td class="test"> + <div class="container"> + <div class="block"> </div> + <div class="clear"> </div> + </div> + </td> + <td class="control"> + <div class="lime"> </div> + <div class="yellow"> </div> + <div class="green"> </div> + </td> + </tr> + <tr> + <td class="control"> + <div class="lime"> </div> + <div class="yellow"> </div> + <div class="green"> </div> + </td> + <td></td> + </tr> + </table> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-135-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-135-ref.xht new file mode 100644 index 0000000000..d13dc5a088 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-135-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + div {border: lime solid 1em;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-135.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-135.xht new file mode 100644 index 0000000000..85647a02a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-135.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Margin Collapsing: negative margins with clear</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/035.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-135-ref.xht" /> + + <style type="text/css"> + .container { background: red; height: auto; border: 1em lime solid; } + div { clear: both; } + .a { margin-top: 1em; margin-bottom: 1em; } + .b { margin-top: 1em; margin-bottom: 1em; } + .c { margin-top: 1em; margin-bottom: 1em; } + .d { margin-top: 1em; margin-bottom: 1em; } + .e { margin-top: 1em; margin-bottom: -1em; } + .f { margin-top: 1em; margin-bottom: 1em; } + </style> + </head> + <body> + <p>Test passes if there is <strong>no red</strong>.</p> + <div class="container"> + <div class="a"> + <div class="b"> </div> + <div class="c"> </div> + </div> + <div class="d"> + <div class="e"> </div> + <div class="f"> </div> + </div> + </div> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-142-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-142-ref.xht new file mode 100644 index 0000000000..faccb46814 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-142-ref.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"> + + <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: black solid medium; + border-spacing: 0px; + display: inline-table; + margin: 1em 0em auto 1em; + } + + td {padding: 0px;} + + td.square { height: 4em; width: 4em; } + td.rectangle { height: 4em; width: 8em; } + td.lime { background-color: lime; } + td.aqua { background-color: aqua; } + td.yellow { background-color: yellow; } + td.palegreen { background-color: #AFA; } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 2 identical tall rectangles and <strong>no red</strong>.</p> + + <table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + <tr> + <td colspan="2" class="rectangle lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle palegreen"></td> + </tr> + </table><table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + <tr> + <td colspan="2" class="rectangle lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle palegreen"></td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-142.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-142.xht new file mode 100644 index 0000000000..07fdd758a3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-142.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<head> + <title>CSS Test: Margin Collapsing: clear (hard)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/042.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-142-ref.xht" /> + + <style type="text/css"> + table, td { padding: 0; border-spacing: 0; vertical-align: top; } + .comparator { border-spacing: 1em; } + .test, .control { border: solid; background: red; } + .test .container { display: block; margin: 0; width: 8em; background: lime; } + .test .float { float: left; margin: 0; height: 4em; width: 4em; background: aqua; } + .test .clear { clear: left; display: block; background: yellow; margin: 4em 0; height: 4em; } + .test .block { display: block; margin: 1em 0 0; border: 2em solid #AAFFAA; } + .control .square { height: 4em; width: 4em; } + .control .rectangle { height: 4em; width: 8em; } + .control .AAFFAA { background: #AAFFAA; } + .control .lime { background: lime; } + .control .aqua { background: aqua; } + .control .yellow { background: yellow; } + </style> + </head> + <body> + <p>Test passes if there are 2 identical tall rectangles and <strong>no red</strong>.</p> + <table class="comparator"> + <tr> + <td class="test"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> </div> + <div class="block"> </div> + </div> + </td> + <td class="control"> + <table> + <tr> + <td class="square aqua"></td> + <td class="square lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle yellow"></td> + </tr> + <tr> + <td colspan="2" class="rectangle lime"></td> + </tr> + <tr> + <td colspan="2" class="rectangle AAFFAA"></td> + </tr> + </table> + </td> + </tr> + </table> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-157-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-157-ref.xht new file mode 100644 index 0000000000..1a782b0ad9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-157-ref.xht @@ -0,0 +1,82 @@ +<!DOCTYPE html PUBLIC "-//W3C//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.lime + { + background-color: lime; + border: black solid medium; + width: 8em; + } + + div.aqua + { + background-color: aqua; + height: 4em; + width: 4em; + } + + div.yellow + { + background-color: yellow; + height: 4em; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there are 6 identical squares and <strong>no red</strong>.</p> + + <table> + <tr> + <td> + <div class="lime"> + <div class="aqua"></div> + <div class="yellow"></div> + </div> + </td> + <td> + <div class="lime"> + <div class="aqua"></div> + <div class="yellow"></div> + </div> + </td> + <td> + <div class="lime"> + <div class="aqua"></div> + <div class="yellow"></div> + </div> + </td> + </tr> + <tr> + <td> + <div class="lime"> + <div class="aqua"></div> + <div class="yellow"></div> + </div> + </td> + <td> + <div class="lime"> + <div class="aqua"></div> + <div class="yellow"></div> + </div> + </td> + <td> + <div class="lime"> + <div class="aqua"></div> + <div class="yellow"></div> + </div> + </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-157.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-157.xht new file mode 100644 index 0000000000..ab3ca14b17 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-157.xht @@ -0,0 +1,79 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> +<html lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<!-- This is similar to tests 022 and 023 --><head> + <title>CSS Test: Margin Collapsing: clear (varying margins)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/057.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-157-ref.xht" /> + + <style type="text/css"> + .test { border: solid; background: red; width: 8em; } + .container { background: lime; } + .float { float: left; height: 4em; width: 4em; background: aqua; } + .empty { margin: 1em; background: red; } + .clear { clear: left; border-bottom: 4em solid yellow; background: red; } + .a .clear { margin-top: 0em; } + .b .clear { margin-top: 1em; } + .c .clear { margin-top: 2em; } + </style> + </head> + <body> + <p>Test passes if there are 6 identical squares and <strong>no red</strong>.</p> + <table> + <tr> + <td> + <div class="test a"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> </div> + </div> + </div> + </td> + <td> + <div class="test b"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> </div> + </div> + </div> + </td> + <td> + <div class="test c"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> </div> + </div> + </div> + </td> + </tr> + <tr> + <td> + <div class="test a"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> <div class="empty"> </div> </div> + </div> + </div> + </td> + <td> + <div class="test b"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> <div class="empty"> </div> </div> + </div> + </div> + </td> + <td> + <div class="test c"> + <div class="container"> + <div class="float"> </div> + <div class="clear"> <div class="empty"> </div> </div> + </div> + </div> + </td> + </tr> + </table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-158-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-158-ref.xht new file mode 100644 index 0000000000..4608e118e1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-158-ref.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"> + + <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: orange; + border: black solid medium; + border-spacing: 0px; + display: inline-table; + margin: 1em 0em auto 1em; + } + + td + { + height: 2em; + padding: 0px; + width: 3em; + } + + td.yellow {background-color: yellow;} + ]]></style> + + </head> + + <body> + + <p>Test passes if the 2 squares are identical.</p> + + <table> + <tr> + <td class="yellow"></td> + <td class="yellow"></td> + </tr> + <tr> + <td></td> + <td class="yellow"></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + </table><table> + <tr> + <td class="yellow"></td> + <td class="yellow"></td> + </tr> + <tr> + <td></td> + <td class="yellow"></td> + </tr> + <tr> + <td></td> + <td></td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-158.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-158.xht new file mode 100644 index 0000000000..31a0a9f655 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-158.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 lang="en" xmlns="http://www.w3.org/1999/xhtml"> +<!-- variant of 023 --><head> + <title>CSS Test: Margin Collapsing: clear (with nearby collapse-through block)</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/058.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-158-ref.xht" /> + + <style type="text/css"> + table, td { padding: 0; border-spacing: 0; } + .comparator { border-spacing: 1em; } + .test, .control { background: red; } + .test .container { display: block; margin: 0; width: 6em; background: yellow; border: solid; } + .test .float { float: left; margin: 0; height: 2em; width: 3em; background: orange; } + .test .empty { display: block; background: red; margin: 2em 0; } + .test .clear { clear: left; display: block; border-top: 2em solid orange; margin-top: 1em; } + .control table { border: solid; } + .control .square { height: 2em; width: 3em; } + .control .thin { height: 2em; width: 6em; } + .control .thick { height: 2em; width: 6em; } + .control .yellow { background: yellow; } + .control .orange { background: orange; } + </style> + </head> + <body> + <p>Test passes if the 2 squares are identical.</p> + <table class="comparator"> + <tr> + <td class="test"> + <div class="container"> + <div class="empty"> </div> + <div class="float"> </div> + <div class="empty"> </div> + <div class="clear"> </div> + </div> + </td> + <td class="control"> + <table> + <tr> + <td colspan="2" class="thick yellow"></td> + </tr> + <tr> + <td class="square orange"></td> + <td class="square yellow"></td> + </tr> + <tr> + <td colspan="2" class="thin orange"></td> + </tr> + </table> + </td> + </tr> + </table> + + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-164.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-164.xht new file mode 100644 index 0000000000..ad076eeddf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-164.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: Margins on cleared blocks that contain floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/064.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + + <style type="text/css"> + .outer { margin: 1em; background: red; height: 4.5em; } + .border { border: solid; width: 10em; } + .box { margin: 0; background: yellow; } + .float { margin: 0; width: 5em; height: 1.5em; background: orange; float: right; } + .clear { margin-top: 3em; height: 1.5em; background: aqua; clear: both; } + .control { border: solid; width: 10em; background: yellow; margin: 1em; } + .control .a { margin: 0 0 0 auto; width: 5em; height: 1.5em; background: orange; } + .control .b { margin-top: 1.5em; height: 1.5em; background: aqua; } + </style> + </head> + <body> + <p>The following two boxes should be identical, with no red present.</p> + <div class="outer border"> + <div class="box"> + <div class="float">TEST</div> + <div class="clear">TEST</div> + </div> + </div> + <div class="control"> + <div class="a">TEST</div> + <div class="b">TEST</div> + </div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-165-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-165-ref.xht new file mode 100644 index 0000000000..4007bfae5a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-165-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + td {padding: 0;} + + div.control + { + background-color: yellow; + border: black solid medium; + width: 7em; + } + + div.a + { + background-color: aqua; + height: 1.5em; + margin: 0 0 0 auto; + width: 4em; + } + + div.b {height: 0.5em;} + + div.c {background-color: orange;} + ]]></style> + + </head> + + <body> + + <p>Test passes if there are <strong>4 identical rectangles</strong> and no red.</p> + + <table> + <tr> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + </tr> + <tr> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-165.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-165.xht new file mode 100644 index 0000000000..14a7ccd5f5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-165.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 Test: Margins on cleared blocks that contain floats</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/065.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-165-ref.xht" /> + + <style type="text/css"> + td { padding: 0; background: red; } + .border { border: solid; width: 7em; } + .box { margin: 0; background: yellow; } + .float { margin: 0; width: 4em; height: 1.5em; background: aqua; float: right; } + .clear { margin: 2em 0 0 0; background: orange; clear: both; } + .control { border: solid; width: 7em; background: yellow; } + .control .a { margin: 0 0 0 auto; width: 4em; height: 1.5em; background: aqua; } + .control .b { height: 0.5em; } + .control .c { background: orange; } + </style> + </head> + <body> + <p>Test passes if there are <strong>4 identical rectangles</strong> and no red.</p> + <table> + <tr> + <td> + <div class="outer"> + <div class="box border"> + <div class="float">TEST</div> + <div class="clear">TEST</div> + </div> + </div> + </td> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + </tr> + <tr> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + </tr> + </table> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-166.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-166.xht new file mode 100644 index 0000000000..7bbd95db7e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-166.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"> +<head> + <title>CSS Test: Margins on cleared blocks that contain floats, with dynamic border changes</title> + <link rel="author" title="Ian Hickson" href="mailto:ian@hixie.ch"/> + <link rel="alternate" href="http://www.hixie.ch/tests/adhoc/css/box/block/margin-collapse/066.html" type="text/html"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-165-ref.xht" /> + + <style type="text/css"> + td { padding: 0; background: red; } + .border { width: 7em; /* border: solid; added by script at bottom of test */ } + .box { margin: 0; background: yellow; } + .float { margin: 0; width: 4em; height: 1.5em; background: aqua; float: right; } + .clear { margin: 2em 0 0 0; background: orange; clear: both; } + .control { border: solid; width: 7em; background: yellow; } + .control .a { margin: 0 0 0 auto; width: 4em; height: 1.5em; background: aqua; } + .control .b { height: 0.5em; } + .control .c { background: orange; } + </style> + </head> + <body> + <p>Test passes if there are <strong>4 identical rectangles</strong> and no red.</p> + <table> + <tr> + <td> + <div class="outer"> + <div id="test" class="box border"> + <div class="float">TEST</div> + <div class="clear">TEST</div> + </div> + </div> + </td> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + </tr> + <tr> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + <td> + <div class="control"> + <div class="a">TEST</div> + <div class="b"></div> + <div class="c">TEST</div> + </div> + </td> + </tr> + </table> + <script type="text/javascript"> + var x = document.getElementById('test'); + x.clientHeight; // force reflow + x.style.border = "solid"; // did reflow happen? + </script> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-002-ref.xht new file mode 100644 index 0000000000..ebb55af7cc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-002-ref.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"> + + <head> + + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + table + { + border-collapse: separate; + border-spacing: 0px; + } + + td#first-column {padding: 0px 4px 0px 6px;} + + td#second-column + { + border: black solid thin; + padding: 0px; + width: 150px; + } + + div {height: 50px;} + + div.sliver-yellow {border-left: yellow solid 10px;} + + div.sliver-aqua + { + border-left: 5px solid aqua; + height: 20px; + } + + div.sliver-orange {border-left: orange solid 10px;} + + div.yellow {background-color: yellow;} + + div.aqua + { + background-color: aqua; + height: 20px; + width: 20px; + } + + div.orange {background-color: orange;} + ]]></style> + + </head> + + <body> + + <p>The coloured bars on the left should match the coloured boxes in the black box.</p> + + <table> + <tr> + <td id="first-column"> + <div class="sliver-yellow"></div> + <div><div class="sliver-aqua"></div></div> + <div class="sliver-orange"></div> + </td> + <td id="second-column"> + <div class="yellow">A</div> + <div><div class="aqua">B</div></div> + <div class="orange">C</div> + </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-002.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-002.xht new file mode 100644 index 0000000000..c9fd8961d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-002.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Margin Collapsing with Clearance</title> + <link rel="author" title="Microsoft" href="http://microsoft.com/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-clear-002-ref.xht" /> + + <style type="text/css"> + div.target1 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid yellow; top: 0px; } + div.target2 { position: absolute; left: -15px; height: 20px; width: 0; border-left: 5px solid aqua; top: 50px; } + div.target3 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid orange; top: 100px; } + div.container { width: 150px; position: relative; margin-left: 20px; border: solid thin; } + div.box1 { height: 50px; background-color: yellow; } + div.box2 { background-color: aqua; float: left; width: 20px; height: 20px; } + div.box3 { clear: left; margin-top: 50px; height: 50px; background-color: orange; } + </style> + </head> + <body> + <p>The coloured bars on the left should match the coloured boxes in the black box.</p> + <div class="container"> + <div class="target1"></div> + <div class="target2"></div> + <div class="target3"></div> + <div class="box1">A</div> + <div class="box2">B</div> + <div class="box3">C</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-003-ref.xht new file mode 100644 index 0000000000..7c23b6b340 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-003-ref.xht @@ -0,0 +1,86 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + + <style type="text/css"><![CDATA[ + table + { + border-collapse: separate; + border-spacing: 0px; + } + + td#first-column {padding: 0px 4px 0px 6px;} + + td#second-column + { + border: black solid thin; + padding: 0px; + width: 150px; + } + + div {height: 50px;} + + div.sliver-yellow {border-left: yellow solid 10px;} + + div.sliver-aqua + { + border-left: 5px solid aqua; + height: 20px; + } + + div.mid-container {height: 60px;} + + div.white + { + border-left: 5px solid white; + height: 40px; + } + + div.sliver-orange {border-left: orange solid 10px;} + + div.yellow {background-color: yellow;} + + div.aqua + { + background-color: aqua; + height: 20px; + width: 20px; + } + + div.orange {background-color: orange;} + ]]></style> + + </head> + + <body> + + <p>The coloured bars on the left should match the coloured boxes in the black box.</p> + + <table> + <tr> + <td id="first-column"> + <div class="sliver-yellow"></div> + <div class="mid-container"> + <div class="white"></div> + <div class="sliver-aqua"></div> + </div> + <div class="sliver-orange"></div> + </td> + <td id="second-column"> + <div class="yellow">A</div> + <div class="mid-container"> + <div class="white"></div> + <div class="aqua">B</div> + </div> + <div class="orange">C</div> + </td> + </tr> + </table> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-003.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-003.xht new file mode 100644 index 0000000000..f789279aa9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-003.xht @@ -0,0 +1,31 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Margin Collapsing with Clearance</title> + <link rel="author" title="Microsoft" href="http://microsoft.com/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="match" href="margin-collapse-clear-003-ref.xht" /> + + <style type="text/css"> + div.target1 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid yellow; top: 0px; } + div.target2 { position: absolute; left: -15px; height: 20px; width: 0; border-left: 5px solid aqua; top: 90px; } + div.target3 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid orange; top: 110px; } + div.container { width: 150px; position: relative; margin-left: 20px; border: solid thin; } + div.box1 { height: 50px; margin-bottom: 40px; background-color: yellow; } + div.box2 { background-color: aqua; float: left; width: 20px; height: 20px; } + div.box3 { clear: left; margin-top: 50px; height: 50px; background-color: orange; } + </style> + </head> + <body> + <p>The coloured bars on the left should match the coloured boxes in the black box.</p> + <div class="container"> + <div class="target1"></div> + <div class="target2"></div> + <div class="target3"></div> + <div class="box1">A</div> + <div class="box2">B</div> + <div class="box3">C</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-005.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-005.xht new file mode 100644 index 0000000000..d686922da4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-005.xht @@ -0,0 +1,104 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> +<html xmlns="http://www.w3.org/1999/xhtml"> + <head> + <title>CSS Test: Margin Collapsing with Clearance</title> + <link rel="author" title="Microsoft" href="http://microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="may" /> + <style type="text/css"> + .target1, .target2, .target3, .target4, .target5, .target6, .target7 + { + position: absolute; + width: 0; + } + .target1, .target2, .target3, .target4 + { + left: -155px; + } + .target5, .target6, .target7 + { + left: 155px; + } + .target1, .target5 + { + border-left: 150px solid yellow; + height: 50px; + top: 0px; + } + .target2, .target6 + { + border-left: 20px solid aqua; + border-right: 130px solid silver; + height: 20px; + top: 50px; + } + .target3, .target7 + { + border-left: 140px solid orange; + border-right: 10px solid silver; + height: 50px; + top: 100px; + } + .target4 + { + border-left: 150px solid silver; + height: 30px; + top: 70px; + } + .target7 + { + top: 70px; + } + .container + { + border: solid thin; + margin-left: 150px; + position: relative; + width: 150px; + } + .box1 + { + background-color: yellow; + height: 50px; + } + .parentof2and3 + { + background-color: silver; + padding-right: 10px; + } + .box2 + { + background-color: aqua; + float: left; + height: 20px; + width: 20px; + } + .box3 + { + background-color: orange; + clear: left; + height: 50px; + margin-top: 50px; + } + </style> + </head> + <body> + <p>Test passes if the layout of the boxes within the black box matches either the left or the right reference boxes.</p> + <div class="container"> + <div class="target1"></div> + <div class="target2"></div> + <div class="target3"></div> + <div class="target4"></div> + <div class="target5"></div> + <div class="target6"></div> + <div class="target7"></div> + <div class="box1"></div> + <div class="parentof2and3"> + <div class="box2"></div> + <div class="box3"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-008.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-008.xht new file mode 100644 index 0000000000..f8709d9d57 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-008.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: Margin Collapsing with Clearance</title> + <link rel="author" title="Microsoft" href="http://microsoft.com/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/> + <link rel="match" href="margin-collapse-clear-002-ref.xht" /> + + <style type="text/css"> + div.target1 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid yellow; top: 0px; } + div.target2 { position: absolute; left: -15px; height: 20px; width: 0; border-left: 5px solid aqua; top: 50px; } + div.target3 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid orange; top: 100px; } + div.container { width: 150px; position: relative; margin-left: 20px; border: solid thin; } + div.box1 { height: 50px; background-color: yellow; } + div.box2 { background-color: aqua; float: left; width: 20px; height: 20px; } + div.box3 { overflow: hidden; clear: left; margin-top: 50px; height: 50px; background-color: orange; } + </style> + </head> + <body> + <p>The coloured bars on the left should match the coloured boxes in the black box.</p> + <div class="container"> + <div class="target1"></div> + <div class="target2"></div> + <div class="target3"></div> + <div class="box1">A</div> + <div class="box2">B</div> + <div class="box3">C</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-009.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-009.xht new file mode 100644 index 0000000000..621d968d9b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-009.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: Margin Collapsing with Clearance</title> + <link rel="author" title="Microsoft" href="http://microsoft.com/"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins"/> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats"/> + <link rel="match" href="margin-collapse-clear-003-ref.xht" /> + + <style type="text/css"> + div.target1 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid yellow; top: 0px; } + div.target2 { position: absolute; left: -15px; height: 20px; width: 0; border-left: 5px solid aqua; top: 90px; } + div.target3 { position: absolute; left: -15px; height: 50px; width: 0; border-left: 10px solid orange; top: 110px; } + div.container { width: 150px; position: relative; margin-left: 20px; border: solid thin; } + div.box1 { height: 50px; margin-bottom: 40px; background-color: yellow; } + div.box2 { background-color: aqua; float: left; width: 20px; height: 20px; } + div.box3 { overflow: hidden; clear: left; margin-top: 50px; height: 50px; background-color: orange; } + </style> + </head> + <body> + <p>The coloured bars on the left should match the coloured boxes in the black box.</p> + <div class="container"> + <div class="target1"></div> + <div class="target2"></div> + <div class="target3"></div> + <div class="box1">A</div> + <div class="box2">B</div> + <div class="box3">C</div> + </div> + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-011.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-011.xht new file mode 100644 index 0000000000..e61a6668c3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-011.xht @@ -0,0 +1,105 @@ +<!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: Margin Collapsing with Clearance</title> + <link rel="author" title="Microsoft" href="http://microsoft.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#flow-control" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <meta name="flags" content="may" /> + <style type="text/css"> + .target1, .target2, .target3, .target4, .target5, .target6, .target7 + { + position: absolute; + width: 0; + } + .target1, .target2, .target3, .target4 + { + left: -155px; + } + .target5, .target6, .target7 + { + left: 155px; + } + .target1, .target5 + { + border-left: 150px solid yellow; + height: 50px; + top: 0px; + } + .target2, .target6 + { + border-left: 20px solid aqua; + border-right: 130px solid silver; + height: 20px; + top: 50px; + } + .target3, .target7 + { + border-left: 140px solid orange; + border-right: 10px solid silver; + height: 50px; + top: 100px; + } + .target4 + { + border-left: 150px solid silver; + height: 30px; + top: 70px; + } + .target7 + { + top: 70px; + } + .container + { + border: solid thin; + margin-left: 150px; + position: relative; + width: 150px; + } + .box1 + { + background-color: yellow; + height: 50px; + } + .parentof2and3 + { + background-color: silver; + padding-right: 10px; + } + .box2 + { + background-color: aqua; + float: left; + height: 20px; + width: 20px; + } + .box3 + { + background-color: orange; + clear: left; + height: 50px; + margin-top: 50px; + overflow: hidden; + } + </style> + </head> + <body> + <p>Test passes if the layout of the boxes within the black box matches either the left or the right reference boxes.</p> + <div class="container"> + <div class="target1"></div> + <div class="target2"></div> + <div class="target3"></div> + <div class="target4"></div> + <div class="target5"></div> + <div class="target6"></div> + <div class="target7"></div> + <div class="box1"></div> + <div class="parentof2and3"> + <div class="box2"></div> + <div class="box3"></div> + </div> + </div> + </body> +</html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-012-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-012-ref.xht new file mode 100644 index 0000000000..b8ced2a875 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-012-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/" /> + <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> + + <style type="text/css"><![CDATA[ + div#lime + { + background-color: lime; + border-top: black solid 1px; + height: 200px; + width: 50%; + } + + div#yellow + { + background-color: yellow; + height: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div id="lime"><img src="support/swatch-blue.png" height="100" width="100" alt="Image download support must be enabled" /></div> + + <div id="yellow"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-012.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-012.xht new file mode 100644 index 0000000000..6e48ae4f92 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-012.xht @@ -0,0 +1,127 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title> + + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block" /> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> + <link rel="match" href="margin-collapse-clear-012-ref.xht" /> + + <meta content="When an element has had clearance applied to it and its own margins collapse, these margins collapse with the adjoining margins of following siblings but the resulting margin does not collapse with the bottom margin of the parent block" name="assert" /> + + <style type="text/css"><![CDATA[ + #rel-pos-wrapper {position: relative;} + + #parent-lime + { + background-color: lime; + border-top: black solid 1px; + width: 50%; + } + + #float-left-blue + { + background-color: blue; + float: left; + height: 100px; + width: 100px; + } + + #clear-left + { + clear: left; + margin-bottom: 80px; + margin-top: 40px; + } + + #following-sibling {margin-bottom: 140px;} + + #next-yellow + { + background-color: yellow; + height: 100px; + } + + .ref-overlapped-red + { + background-color: red; + position: absolute; + z-index: -1; + } + + #ref1 + { + height: 200px; + top: 1px; + width: 50%; + } + + #ref2 + { + height: 100px; + top: 201px; + width: 100%; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div id="rel-pos-wrapper"> + + <!-- + + #parent-lime should have height 200px, sum of: + + 100px : height of #float-left-blue + + + (140px - 40px) : part of #following-sibling's margin-bottom + "exceeding" the amount collapsed with + #clear-left's margin-top (140px - 40px) + ======= + 200px + + --> + + <div id="parent-lime"> + <div id="float-left-blue"></div> + <div id="clear-left"></div> + + <!-- + + clearance + + + margin-top of #clear-left (40px) + ==================================== + height of #float-left-blue (100px) + + therefore, clearance is equal to +60px + + --> + + <div id="following-sibling"></div> + </div> + + <div id="next-yellow"></div> + + <!-- + #ref1 and #ref2 boxes create a sort of 'reference rendering' + where #ref1 should be covered, overlapped by #parent-lime + while #ref2 should be covered, overlapped by #next-yellow. + --> + + <div id="ref1" class="ref-overlapped-red"></div> + <div id="ref2" class="ref-overlapped-red"></div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-013.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-013.xht new file mode 100644 index 0000000000..bfeddbf020 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-013.xht @@ -0,0 +1,137 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Margin collapsing with clearance - margins of a 'collapsed through' box with clearance do not collapse with parent block's bottom margin</title> + + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block" /> + <link rel="bookmark" href="http://lists.w3.org/Archives/Public/public-css-testsuite/2013Oct/0009.html" title="Issue with margin-collapse-clear-012.htm and margin-collapse-clear-013.htm" /> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> + <link rel="match" href="margin-collapse-clear-012-ref.xht" /> + + <meta content="When an element has had clearance applied to it and its own margins collapse, these margins do not collapse with the bottom margin of the parent block" name="assert" /> + + <style type="text/css"><![CDATA[ + #rel-pos-wrapper {position: relative;} + + #parent-lime + { + background-color: lime; + border-top: black solid 1px; + width: 50%; + } + + #float-left-blue + { + background-color: blue; + float: left; + height: 100px; + width: 100px; + } + + #clear-left + { + clear: left; + margin-bottom: 140px; + margin-top: 40px; + } + + #next-yellow + { + background-color: yellow; + height: 100px; + } + + .ref-overlapped-red + { + background-color: red; + position: absolute; + z-index: -1; + } + + #ref1 + { + height: 200px; + top: 1px; + width: 50%; + } + + #ref2 + { + height: 100px; + top: 201px; + width: 100%; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div id="rel-pos-wrapper"> + + <!-- + + clearance + + + margin-top of #clear-left (40px) + ==================================== + height of #float-left-blue (100px) + + therefore, clearance is equal to +60px + + --> + + <!-- + + #parent-lime should have height 200px, sum of: + + 100px : height of #float-left-blue + + + (140px - 40px) : part of #clear-left's margin-bottom + exceeding #clear-left's margin-top + ======= + 200px + + The position of the top border edge of the div#clear-left + is where it would have been if the element had a + non-zero bottom border. The margins of div#clear-left + collapse together to 140px and the top border edge of + div#clear-left is at 40px inside of it. Clearance is + added at such position, not to the whole 140px. + + Issue with margin-collapse-clear-012.htm and margin-collapse-clear-013.htm + http://lists.w3.org/Archives/Public/public-css-testsuite/2013Oct/0012.html + + --> + + <div id="parent-lime"> + <div id="float-left-blue"></div> + <div id="clear-left"></div> + </div> + + <!-- + #next-yellow should immediately follow #parent-lime (no margins in between) + --> + + <div id="next-yellow"></div> + + <!-- + #ref1 and #ref2 boxes create a sort of 'reference rendering' + where #ref1 should be covered, overlapped by #parent-lime + while #ref2 should be covered, overlapped by #next-yellow. + --> + + <div id="ref1" class="ref-overlapped-red"></div> + <div id="ref2" class="ref-overlapped-red"></div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-014-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-014-ref.xht new file mode 100644 index 0000000000..f48ba9f07e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-014-ref.xht @@ -0,0 +1,48 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> + + <style type="text/css"><![CDATA[ + div#aqua + { + background-color: aqua; + height: 60px; + width: 50%; + } + + div#lime + { + background-color: lime; + line-height: 140px; + width: 50%; + } + + img {vertical-align: bottom;} + + div#yellow + { + background-color: yellow; + height: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div id="aqua"></div> + + <div id="lime"><img src="support/swatch-blue.png" height="100" width="100" alt="Image download support must be enabled" /></div> + + <div id="yellow"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-014.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-014.xht new file mode 100644 index 0000000000..4dc2282184 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-014.xht @@ -0,0 +1,129 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Margin collapsing with clearance - clearance may be negative</title> + + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visudet.html#normal-block" /> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> + <link rel="match" href="margin-collapse-clear-014-ref.xht" /> + + <meta content="Clearance is created above the top margin of the element with clear set. Clearance can be negative. Clearance stops the collapsing of the element's margins with the preceding siblings' margins and with the parent block's bottom margin." name="assert" /> + + <style type="text/css"><![CDATA[ + #rel-pos-wrapper {position: relative;} + + #parent-lime + { + background-color: lime; + width: 50%; + } + + #preceding-sibling-aqua + { + background-color: aqua; + height: 60px; + margin-bottom: 40px; + } + + #float-left-blue + { + background-color: blue; + float: left; + height: 100px; + width: 100px; + } + + #clear-left + { + clear: left; + margin-top: 120px; + } + + #next-yellow + { + background-color: yellow; + height: 100px; + } + + .ref-overlapped-red + { + background-color: red; + position: absolute; + z-index: -1; + } + + #ref1 + { + height: 200px; + top: 0px; + width: 50%; + } + + #ref2 + { + height: 100px; + top: 200px; + width: 100%; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div id="rel-pos-wrapper"> + + <!-- + + #parent-lime should have height 200px, sum of: + + 60px : height of #preceding-sibling-aqua + + + 40px : margin-bottom of #preceding-sibling-aqua + + + 100px : height of #float-left-blue + ===================================================== + 200px + + --> + + <div id="parent-lime"> + <div id="preceding-sibling-aqua"></div> + <div id="float-left-blue"></div> + <div id="clear-left"></div> + </div> + + <!-- + + clearance + + + margin-top of #clear-left (120px) + ==================================== + height of #float-left-blue (100px) + + therefore, clearance is equal to -20px + + --> + + <div id="next-yellow"></div> + + <!-- + #ref1 and #ref2 boxes create a sort of 'reference rendering' + where #ref1 should be covered, overlapped by #parent-lime + while #ref2 should be covered, overlapped by #next-yellow. + --> + + <div id="ref1" class="ref-overlapped-red"></div> + <div id="ref2" class="ref-overlapped-red"></div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-015-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-015-ref.xht new file mode 100644 index 0000000000..860e38edab --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-015-ref.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 Reftest Reference</title> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> + + <style type="text/css"><![CDATA[ + div#lime + { + background-color: lime; + border-top: black solid 1px; + height: 140px; + width: 50%; + } + + div#aqua + { + background-color: aqua; + height: 60px; + width: 50%; + } + + div#yellow + { + background-color: yellow; + height: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div id="lime"><img src="support/swatch-blue.png" height="100" width="100" alt="Image download support must be enabled" /></div> + + <div id="aqua"></div> + + <div id="yellow"></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-015.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-015.xht new file mode 100644 index 0000000000..ba279bf375 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-015.xht @@ -0,0 +1,101 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Margin collapsing with clearance - Margins collapsing of an element's top margin with its first in-flow child should not be affected by clear and clearance</title> + + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> + <link rel="author" title="Bruno Fassino" href="fassino[at]gmail.com" /> + <link rel="match" href="margin-collapse-clear-015-ref.xht" /> + + <meta content="When an element with clear set to it (to other than 'none') has a first in-flow child and their top margins are adjoining, then these margins should collapse normally." name="assert" /> + + <style type="text/css"><![CDATA[ + #rel-pos-wrapper {position: relative;} + + #parent-lime + { + background-color: lime; + border-top: black solid 1px; + width: 50%; + } + + #float-left-blue + { + background-color: blue; + float: left; + height: 100px; + width: 100px; + } + + #clear-left {clear: left;} + + #clear-left > div + { + background-color: aqua; + height: 60px; + margin-top: 140px; + } + + #next-yellow + { + background-color: yellow; + height: 100px; + } + + .ref-overlapped-red + { + background-color: red; + left: 0; + position: absolute; + z-index: -1; + } + + #ref1 + { + height: 200px; + top: 1px; + width: 50%; + } + + #ref2 + { + height: 100px; + top: 201px; + width: 100%; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is <strong>no red</strong>.</p> + + <div id="rel-pos-wrapper"> + + <div id="parent-lime"> + <div id="float-left-blue"></div> + <div id="clear-left"> + <div></div> + </div> + </div> + + <div id="next-yellow"></div> + + <!-- + #ref1 and #ref2 boxes create a sort of 'reference rendering' + where #ref1 should be covered, overlapped by #parent-lime + while #ref2 should be covered, overlapped by #next-yellow. + --> + + <div id="ref1" class="ref-overlapped-red"></div> + <div id="ref2" class="ref-overlapped-red"></div> + + </div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-016-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-016-ref.xht new file mode 100644 index 0000000000..151143ce30 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-016-ref.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 Reftest Reference</title> + <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" /> + + <style type="text/css"><![CDATA[ + div + { + background-color: green; + height: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a wide filled green rectangle and <strong>no red</strong>.</p> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-016.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-016.xht new file mode 100644 index 0000000000..717ce1ca6f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-016.xht @@ -0,0 +1,59 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> + +<html xmlns="http://www.w3.org/1999/xhtml"> + + <head> + + <title>CSS Test: Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin</title> + + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <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="margin-collapse-clear-016-ref.xht" /> + + <meta content="An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with clear set to it (to other than 'none') can only create a clearance if and when there is a preceding floated block." name="assert" /> + + <style type="text/css"><![CDATA[ + body + { + background-color: white; + } + + #parent-block + { + background-color: red; + margin-bottom: 0px; + } + + #sibling + { + background-color: green; + height: 100px; + } + + #element-without-clearance-applied + { + clear: both; + margin-top: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a wide filled green rectangle and <strong>no red</strong>.</p> + + <div id="parent-block"> + <div id="sibling"></div> + <div id="element-without-clearance-applied"></div> + </div> + + <!-- + #element-without-clearance-applied's margin-top collapses + with #parent-block's margin-bottom: the resulting margin-bottom + then collapses with the adjoining white body's margin-bottom + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-017-ref.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-017-ref.xht new file mode 100644 index 0000000000..5c3f795e0c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-017-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/" /> + <link rel="author" title="Daniel Schattenkirchner" href="mailto:crazy-daniel@gmx.de" /> + + <style type="text/css"><![CDATA[ + body + { + background: white url("support/ruler-v-100px-200px-300px.png") no-repeat; + margin: 34px 8px 8px 55px; + } + + p + { + font-size: 16px; + line-height: 20px; + margin: 1em 8px; + } + + div + { + background-color: green; + height: 10px; + margin-bottom: 100px; + } + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a vertical gap<br /> + of exactly 100px between 2 green bars.</p> + + <div></div> + + <div></div> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-017.xht b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-017.xht new file mode 100644 index 0000000000..6e0dbf05c5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/margin-collapse-clear-017.xht @@ -0,0 +1,82 @@ +<!DOCTYPE html PUBLIC "-//W3C//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: Margin collapsing - margins of a 'collapsed through' box without clearance can collapse with parent block's bottom margin</title> + + <link rel="help" href="http://www.w3.org/TR/CSS21/box.html#collapsing-margins" /> + <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="margin-collapse-clear-017-ref.xht" /> + + <meta content="An element that does not have clearance applied to it can collapse its top margin with its parent block's bottom margin. Margins of a 'collapsed through' box without clearance applied to it can collapse with its parent block's bottom margin. An element with 'clear' set to a value other than 'none' can create a clearance only if and only when there is an earlier (in the source document) floating box." name="assert" /> + <meta content="image" name="flags" /> + + <style type="text/css"><![CDATA[ + body + { + background: white url("support/ruler-v-100px-200px-300px.png") no-repeat; + margin: 34px 8px 8px 55px; + /* + 34px : body's top margin collapsing with p's top margin: max(34px, 16px) + + 20px : p's 1st line box height + + 20px : p's 2nd line box height + + 16px : p's bottom margin + + 10px : height of topmost green bar + ====== + 100px + */ + } + + p + { + font-size: 16px; + line-height: 20px; + margin: 1em 8px; + } + + div#parent-block {margin-bottom: 100px;} + + div.vertical-gap-separator + { + background-color: green; + height: 10px; + } + + div#element-without-clearance + { + clear: both; + margin-top: 100px; + } + + /* + In this test, div#element-without-clearance + is what the spec refers to as + 'collapsed through' box + http://www.w3.org/TR/CSS21/box.html#collapsed-through + */ + ]]></style> + + </head> + + <body> + + <p>Test passes if there is a vertical gap<br /> + of exactly 100px between 2 green bars.</p> + + <div id="parent-block"> + <div class="vertical-gap-separator"></div> + <div id="element-without-clearance"></div> + </div> + + <div class="vertical-gap-separator"></div> + + <!-- + div#element-without-clearance's margin-top should collapse + with #parent-block's margin-bottom: max(100px, 100px) = 100px + --> + + </body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/negative-clearance-after-adjoining-float.html b/testing/web-platform/tests/css/CSS2/floats-clear/negative-clearance-after-adjoining-float.html new file mode 100644 index 0000000000..698f380790 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/negative-clearance-after-adjoining-float.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Negative clearance between adjoining float and child with top margin</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:100px; background:red;"> + <div style="float:left; width:100px; height:50px; background:green;"></div> + <div style="clear:left; margin-top:200px;"></div> +</div> +<div style="width:100px; height:50px; background:green;"></div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/negative-clearance-after-bottom-margin.html b/testing/web-platform/tests/css/CSS2/floats-clear/negative-clearance-after-bottom-margin.html new file mode 100644 index 0000000000..fb0663945e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/negative-clearance-after-bottom-margin.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Negative clearance between bottom margin and cleared child with top margin</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="position:relative; top:-50px; z-index:-1;"> + <div style="float:left; width:50px; height:50px; border-top:50px solid white; background:green;"></div> + <div style="padding-top:1px;"> + <div style="width:100px; background:green;"> + <div style="margin-bottom:49px;"></div> + <div style="clear:left; margin-top:98px;"></div> + </div> + <div style="width:100px; height:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/nested-clearance-new-formatting-context.html b/testing/web-platform/tests/css/CSS2/floats-clear/nested-clearance-new-formatting-context.html new file mode 100644 index 0000000000..5e43b25067 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/nested-clearance-new-formatting-context.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Nested clearance on new formatting context</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-200px-square.html"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width:200px; height:200px; background:red;"> + <div style="width:500px;"> + <div style="float:left; width:200px; height:100px; background:green;"></div> + <div style="clear:left; margin-top:40px;"> + <div style="float:left; width:200px; height:80px; background:green;"></div> + <div style="overflow:hidden; clear:left; margin-top:50px; width:200px; height:20px; background:green;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-adjoining-opposite-float.html b/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-adjoining-opposite-float.html new file mode 100644 index 0000000000..01a457ee1f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-adjoining-opposite-float.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>No clearance due to large top margin that takes us past the float</title> +<meta name="assert" content="Check that we don't apply clearance when the top margin of the clearance candidate takes it past the relevant float, and that a preceding empty block with a right float that's adjoining to the clearance candidate doesn't cause confusion"> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/nothing.html"> +<p>There should be nothing below.</p> +<div style="float:left; width:10px; height:100px;"></div> +<div> + <div> + <div style="float:right; width:10px; height:200px;"></div> + </div> + <div style="background:red;"> + <div style="margin-top:150px; clear:left; background:hotpink;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-due-to-large-margin-after-left-right.html b/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-due-to-large-margin-after-left-right.html new file mode 100644 index 0000000000..bc459d06cd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-due-to-large-margin-after-left-right.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<title>No clearance due to large top margin inside clear:right inside clear:left that takes us past the floats</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="float:left; width:50px; height:50px;"></div> +<div style="float:right; width:50px; height:100px;"></div> +<div style="width:100px; height:100px; background:green;"> + <div style="height:15px; margin-bottom:20px;"></div> + <div style="background:red;"> + <div style="clear:left; background:red;"> + <div style="clear:right; background:red;"> + <div style="margin-top:185px; background:red;"></div> + </div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-due-to-large-margin.html b/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-due-to-large-margin.html new file mode 100644 index 0000000000..cabb1ac850 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/no-clearance-due-to-large-margin.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>No clearance due to large top margin that takes us past the float</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="float:left; width:100px; height:100px; background:green;"></div> +<div style="padding-top:1px;"> + <div style="background:red;"> + <div style="clear:left; background:white; margin-top:150px;"><br></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/remove-block-before-self-collapsing-sibling-with-clearance.html b/testing/web-platform/tests/css/CSS2/floats-clear/remove-block-before-self-collapsing-sibling-with-clearance.html new file mode 100644 index 0000000000..c7a4006ff4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/remove-block-before-self-collapsing-sibling-with-clearance.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#clearance"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#phantom-line-box"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003810"> +<link rel="match" href="../reference/ref-filled-green-100px-square.xht"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="overflow:hidden;"> + <div id="first" style="height:100px;"></div> + <div id="victim" style="width:100px; padding-bottom:1px; background:red;"> + <span></span> + <div style="float:left; width:100%; height:100px; background:green;"></div> + <div style="clear:both;"></div> + </div> +</div> +<script> + document.body.offsetTop; + victim.style.paddingBottom = "0"; + first.style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/second-float-inside-empty-cleared-block-after-margin.html b/testing/web-platform/tests/css/CSS2/floats-clear/second-float-inside-empty-cleared-block-after-margin.html new file mode 100644 index 0000000000..ee8bebc53b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/second-float-inside-empty-cleared-block-after-margin.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Float separated from float inside empty cleared block, margin before clearance</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="float:left; width:100px; height:50px; background:green;"></div> +<div style="height:1px;"></div> +<div style="margin-top:20px;"> + <div style="clear:left;"> + <div style="float:left; width:100px; height:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/second-float-inside-empty-cleared-block.html b/testing/web-platform/tests/css/CSS2/floats-clear/second-float-inside-empty-cleared-block.html new file mode 100644 index 0000000000..a383e9a6a2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/second-float-inside-empty-cleared-block.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<title>Float separated from float inside empty cleared block</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#flow-control" title="9.5.2 Controlling flow next to floats: the 'clear' property"> +<link rel="help" href="https://www.w3.org/TR/CSS22/box.html#collapsing-margins" title="8.3.1 Collapsing margins"> +<link rel="match" href="../../reference/ref-filled-green-100px-square-only.html"> +<p>Test passes if there is a filled green square.</p> +<div style="float:left; width:100px; height:50px; background:green;"></div> +<div style="height:1px;"></div> +<div> + <div style="clear:left;"> + <div style="float:left; width:100px; height:50px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-green.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-green.png Binary files differnew file mode 100644 index 0000000000..b98ca0ba0a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-green.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-lime.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-lime.png Binary files differnew file mode 100644 index 0000000000..cb397fb090 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-lime.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-maroon.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-maroon.png Binary files differnew file mode 100644 index 0000000000..3f86b07219 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-maroon.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-navy.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-navy.png Binary files differnew file mode 100644 index 0000000000..9b9a03955b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-navy.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-red.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-red.png Binary files differnew file mode 100644 index 0000000000..6bd73ac101 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-red.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-white.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-white.png Binary files differnew file mode 100644 index 0000000000..dd43faec54 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/1x1-white.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/60x60-gg-rr.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/60x60-gg-rr.png Binary files differnew file mode 100644 index 0000000000..84f5b2a4f1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/60x60-gg-rr.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/60x60-green.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/60x60-green.png Binary files differnew file mode 100644 index 0000000000..b3c8cf3eb4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/60x60-green.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/a-green.css b/testing/web-platform/tests/css/CSS2/floats-clear/support/a-green.css new file mode 100644 index 0000000000..b0dbb071d5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/a-green.css @@ -0,0 +1 @@ +.a { color: green; } diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/b-green.css b/testing/web-platform/tests/css/CSS2/floats-clear/support/b-green.css new file mode 100644 index 0000000000..a0473f5ca2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/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/floats-clear/support/black15x15.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/black15x15.png Binary files differnew file mode 100644 index 0000000000..b1bbef2cd5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/black15x15.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/blue15x15.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/blue15x15.png Binary files differnew file mode 100644 index 0000000000..89de32fdb8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/blue15x15.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/c-red.css b/testing/web-platform/tests/css/CSS2/floats-clear/support/c-red.css new file mode 100644 index 0000000000..d4ba5c64e9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/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/floats-clear/support/cat.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/cat.png Binary files differnew file mode 100644 index 0000000000..85dd732481 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/cat.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-001.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-001.png Binary files differnew file mode 100644 index 0000000000..b7e6634ee9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-001.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-002.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-002.png Binary files differnew file mode 100644 index 0000000000..8085fe7197 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-002.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-003.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-003.png Binary files differnew file mode 100644 index 0000000000..18a3a8f0b0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/clear-clearance-calculation-003.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/diamond.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/diamond.png Binary files differnew file mode 100644 index 0000000000..51112efc7c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/diamond.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/floats-005.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/floats-005.png Binary files differnew file mode 100644 index 0000000000..c72bcbad11 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/floats-005.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/green-rectangle-50wideBy10tall.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/green-rectangle-50wideBy10tall.png Binary files differnew file mode 100644 index 0000000000..9f43666ee5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/green-rectangle-50wideBy10tall.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/green15x15.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/green15x15.png Binary files differnew file mode 100644 index 0000000000..51741584a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/green15x15.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/margin-collapse-2em-space.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/margin-collapse-2em-space.png Binary files differnew file mode 100644 index 0000000000..2c381ef4dc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/margin-collapse-2em-space.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/margin-collapse-4em-space.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/margin-collapse-4em-space.png Binary files differnew file mode 100644 index 0000000000..dc338c0bfe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/margin-collapse-4em-space.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-grg-rgr-grg.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-grg-rgr-grg.png Binary files differnew file mode 100644 index 0000000000..9b88fbd811 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-grg-rgr-grg.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-grg-rrg-rgg.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-grg-rrg-rgg.png Binary files differnew file mode 100644 index 0000000000..fcf4f3fd7d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-grg-rrg-rgg.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-rgr-grg-rgr.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-rgr-grg-rgr.png Binary files differnew file mode 100644 index 0000000000..d454e3a630 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-rgr-grg-rgr.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-tr.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-tr.png Binary files differnew file mode 100644 index 0000000000..8b4b25364e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/pattern-tr.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/ring.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/ring.png Binary files differnew file mode 100644 index 0000000000..061bb94eba --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/ring.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/ruler-v-100px-200px-300px.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/ruler-v-100px-200px-300px.png Binary files differnew file mode 100644 index 0000000000..d61da4da26 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/ruler-v-100px-200px-300px.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/square-purple.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/square-purple.png Binary files differnew file mode 100644 index 0000000000..0f522d7872 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/square-purple.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/square-teal.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/square-teal.png Binary files differnew file mode 100644 index 0000000000..e567f51b91 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/square-teal.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/square-white.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/square-white.png Binary files differnew file mode 100644 index 0000000000..5853cbb238 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/square-white.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-blue.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-blue.png Binary files differnew file mode 100644 index 0000000000..bf2759634d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-blue.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-green.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-green.png Binary files differnew file mode 100644 index 0000000000..0aa79b0c86 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-green.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-lime.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-lime.png Binary files differnew file mode 100644 index 0000000000..55fd7fdaed --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-lime.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-orange.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-orange.png Binary files differnew file mode 100644 index 0000000000..d3cd498b52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-orange.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-purple.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-purple.png Binary files differnew file mode 100644 index 0000000000..73bea77517 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-purple.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-red.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-red.png Binary files differnew file mode 100644 index 0000000000..1caf25c992 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-red.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-white.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-white.png Binary files differnew file mode 100644 index 0000000000..1a7d4323d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-white.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-yellow.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-yellow.png Binary files differnew file mode 100644 index 0000000000..1591aa0e2e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/swatch-yellow.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/test-bl.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-bl.png Binary files differnew file mode 100644 index 0000000000..904e24e996 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-bl.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/test-br.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-br.png Binary files differnew file mode 100644 index 0000000000..f413ff5c1a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-br.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/test-outer.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-outer.png Binary files differnew file mode 100644 index 0000000000..82eeace7fc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-outer.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/test-tl.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-tl.png Binary files differnew file mode 100644 index 0000000000..f6ac0ef7e8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-tl.png diff --git a/testing/web-platform/tests/css/CSS2/floats-clear/support/test-tr.png b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-tr.png Binary files differnew file mode 100644 index 0000000000..59843ae54b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats-clear/support/test-tr.png |
