diff options
| author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
|---|---|---|
| committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
| commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
| tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /testing/web-platform/tests/css/CSS2/floats | |
| parent | Initial commit. (diff) | |
| download | firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.tar.xz firefox-esr-36d22d82aa202bb199967e9512281e9a53db42c9.zip | |
Adding upstream version 115.7.0esr.upstream/115.7.0esr
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'testing/web-platform/tests/css/CSS2/floats')
157 files changed, 4626 insertions, 0 deletions
diff --git a/testing/web-platform/tests/css/CSS2/floats/adjoining-floats-dynamic.html b/testing/web-platform/tests/css/CSS2/floats/adjoining-floats-dynamic.html new file mode 100644 index 0000000000..3446d972d7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/adjoining-floats-dynamic.html @@ -0,0 +1,35 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1003558"> +<style> +#target { + height: 50px; + width: 0; + background: green; + float: right; +} + +span { + float: left; + width: 50px; + height: 50px; + background: green; +} +</style> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="display: flow-root; width: 100px; background: red;"> + <div id="target"></div> + <div style="position: absolute; width: 50px; height: 50px; background: green;"></div> + <div> + <div style="clear: both; height: 10px;"> + <div> + <span></span> + <span></span> + </div> + </div> + </div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.width = '50px'; +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/computed-float-position-absolute.html b/testing/web-platform/tests/css/CSS2/floats/computed-float-position-absolute.html new file mode 100644 index 0000000000..ad9220b3a0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/computed-float-position-absolute.html @@ -0,0 +1,28 @@ +<!doctype html> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html" /> +<title>The computed value of float with absolute positioning when there is no box should be "none"</title> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<style> + +div[id] { + position: absolute; + float: left; +} + +</style> + +<div id="test1" style="display: none"></div> +<div id="test2" style="display: contents"></div> +<div style="display: none"><div id="test3"></div></div> + +<script> +promise_test( + t => { + return new Promise(test => addEventListener('load', e=>test())) + .then(test => assert_equals(getComputedStyle(test1)['float'], "none", "[display:none] Invalid gCS(test1)['float'];")) + .then(test => assert_equals(getComputedStyle(test2)['float'], "none", "[display:contents] Invalid gCS(test2)['float'];")) + .then(test => assert_equals(getComputedStyle(test3)['float'], "none", "[in a display:none] Invalid gCS(test3)['float'];")) + } +); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-in-nested-multicol-001.html b/testing/web-platform/tests/css/CSS2/floats/float-in-nested-multicol-001.html new file mode 100644 index 0000000000..8e1a257e38 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-in-nested-multicol-001.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<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=1833238"> +<!-- Browsers do not agree on the rendering, so we just verify the rendering is *not* blank. --> +<link rel="mismatch" href="../../reference/blank.html"> + +<style> +article { + width: 300px; + column-count: 2; +} +main { + column-count: 2; +} +</style> + +<article> + <main> + <div> </div> + <footer style="float: left"> + <div style="margin-top: 1em">ABC</div> <!-- This text should appear. --> + </footer> + </main> +</article> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-in-self-painting-inline.html b/testing/web-platform/tests/css/CSS2/floats/float-in-self-painting-inline.html new file mode 100644 index 0000000000..6ff47d3626 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-in-self-painting-inline.html @@ -0,0 +1,13 @@ +<!DOCTYPE html> +<title>Floats in self-painting inline box should not crash</title> +<link rel="help" href="https://crbug.com/1109565"> +<link rel="author" href="kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<span style='opacity: 0.5'> + <div style="float: right">X</div> +</span> +<img title="ABC"> +<script> +test(() => {}, "Pass if not crashes"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-no-content-beside-001-ref.html b/testing/web-platform/tests/css/CSS2/floats/float-no-content-beside-001-ref.html new file mode 100644 index 0000000000..758f5875de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-no-content-beside-001-ref.html @@ -0,0 +1,20 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS Floats — reference</title> +<link rel=author title="Jonathan Kew" href="jkew@mozilla.com"> +<style> +p { width: 10em; border: solid aqua; } +span { float: left; width: 5em; height: 5em; border: solid blue; } +</style> + +<div>Test passes if all three examples render the same:</div> + +<p><span></span><br>Supercalifragilisticexpialidocious</p> + +<br style="clear:both"> + +<p><span></span><br>Supercalifragilisticexpialidocious</p> + +<br style="clear:both"> + +<p><span></span><br>Supercalifragilisticexpialidocious</p> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-no-content-beside-001.html b/testing/web-platform/tests/css/CSS2/floats/float-no-content-beside-001.html new file mode 100644 index 0000000000..f073453eca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-no-content-beside-001.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<meta charset=utf-8> +<title>CSS Floats — narrow containing block</title> +<meta name=assert content="If a shortened line box is too small to contain any content, then the line box is shifted downward"> +<link rel=help href="https://www.w3.org/TR/CSS2/visuren.html#floats"> +<link rel=match href="float-no-content-beside-001-ref.html"> +<link rel=author title="Jonathan Kew" href="jkew@mozilla.com"> +<style> +p { width: 10em; border: solid aqua; } +span { float: left; width: 5em; height: 5em; border: solid blue; } +</style> + +<div>Test passes if all three examples render the same:</div> + +<p><span></span>Supercalifragilisticexpialidocious</p> + +<br style="clear:both"> + +<p><span></span> Supercalifragilisticexpialidocious</p> + +<br style="clear:both"> + +<p><span></span><br>Supercalifragilisticexpialidocious</p> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-no-interpolation.html b/testing/web-platform/tests/css/CSS2/floats/float-no-interpolation.html new file mode 100644 index 0000000000..eb06dfefc6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-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: 'float', + from: 'initial', + to: 'right' +}); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-1-notref.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-1-notref.html new file mode 100644 index 0000000000..540c8048af --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-1-notref.html @@ -0,0 +1,21 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<style> + div { + width: 10ch; + white-space: nowrap; + font-family: monospace; + } + span { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } +</style> +<div> + <span></span> + Some text that overflows my parent. +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-1.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-1.html new file mode 100644 index 0000000000..656b9398e6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-1.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="mismatch" href="float-nowrap-1-notref.html"> +<style> + div { + width: 10ch; + white-space: nowrap; + font-family: monospace; + } + span { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } +</style> +<div> + Some text that overflows my parent. + <span></span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-2.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-2.html new file mode 100644 index 0000000000..fc8e11fadc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-2.html @@ -0,0 +1,25 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-1.html"> +<style> + div { + width: 10ch; + white-space: nowrap; + font-family: monospace; + } + span { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } +</style> +<div> + Some text that + <span></span> + overflows my parent. +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-3-ref.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-3-ref.html new file mode 100644 index 0000000000..e7556a2136 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-3-ref.html @@ -0,0 +1,29 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="mismatch" href="float-nowrap-4.html"> +<style> + div { + width: 10ch; + font-family: monospace; + } + .float { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } + .nowrap { + white-space: nowrap; + } +</style> +<div> + Some + <span class="nowrap"> + text that overflows my parent. + </span> + <span class="float"></span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-3.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-3.html new file mode 100644 index 0000000000..dbc643c8ca --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-3.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-3-ref.html"> +<style> + div { + width: 10ch; + font-family: monospace; + } + .float { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } + .nowrap { + white-space: nowrap; + } +</style> +<div> + Some + <span class="nowrap"> + text that overflows <span class="float"></span> my parent. + </span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-4-ref.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-4-ref.html new file mode 100644 index 0000000000..a8c7b06081 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-4-ref.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<style> + div { + width: 10ch; + font-family: monospace; + } + .float { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } + .nowrap { + white-space: nowrap; + } +</style> +<div> + Some + <span class="float"></span> + <span class="nowrap"> + text that overflows my parent. + </span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-4.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-4.html new file mode 100644 index 0000000000..bf11e6e31c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-4.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-4-ref.html"> +<style> + div { + width: 10ch; + font-family: monospace; + } + .float { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } + .nowrap { + white-space: nowrap; + } +</style> +<div> + Some + <span class="nowrap"> + <span class="float"></span> text that overflows my parent. + </span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-5-ref.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-5-ref.html new file mode 100644 index 0000000000..7f40084103 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-5-ref.html @@ -0,0 +1,5 @@ +<!doctype html> +<title>CSS Test Reference</title> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<div>Hello Kittie diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-5.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-5.html new file mode 100644 index 0000000000..f4403cfb83 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-5.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-5-ref.html"> +<style> + div { + white-space: nowrap; + } + span { + float: left; + } +</style> +<div>Kittie<span>Hello </span> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-6.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-6.html new file mode 100644 index 0000000000..7c6bf9c0db --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-6.html @@ -0,0 +1,16 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-5-ref.html"> +<style> + div { + white-space: nowrap; + } + span { + float: left; + } +</style> +<div><span>Hello </span>Kittie diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-7.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-7.html new file mode 100644 index 0000000000..bef462d995 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-7.html @@ -0,0 +1,26 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-1.html"> +<style> + div { + width: 10ch; + white-space: nowrap; + font-family: monospace; + } + .nowrap { + white-space: nowrap; + } + .float { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } +</style> +<div> + <span class="nowrap">S<div class="float"></div><span>ome</span> text that overflows my parent.</span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-8.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-8.html new file mode 100644 index 0000000000..8c2653193d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-8.html @@ -0,0 +1,24 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-1.html"> +<style> + div { + width: 10ch; + white-space: nowrap; + font-family: monospace; + } + span { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } +</style> +<div> + Some <span></span> + text that overflows my parent. +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-nowrap-9.html b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-9.html new file mode 100644 index 0000000000..b4a6b29230 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-nowrap-9.html @@ -0,0 +1,28 @@ +<!doctype html> +<title>CSS Test: Floats in nowrap context</title> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=488725"> +<link rel="author" href="mailto:emilio@crisal.io" title="Emilio Cobos Álvarez"> +<link rel="author" href="https://www.mozilla.org" title="Mozilla"> +<link rel="match" href="float-nowrap-3-ref.html"> +<style> + div { + width: 10ch; + font-family: monospace; + } + .float { + float: right; + width: 5ch; + height: 5ch; + background: blue; + } + .nowrap { + white-space: nowrap; + } +</style> +<div> + Some + <span class="nowrap"> + text <span class="float"></span> that overflows my parent. + </span> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-paint-relayout.html b/testing/web-platform/tests/css/CSS2/floats/float-paint-relayout.html new file mode 100644 index 0000000000..0499e3e9a2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-paint-relayout.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1049973"> +<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; height: 100px; background: red; overflow: auto;"> + <div id="target" style="display: none; float: left; width: 100px; height: 100px; background: green;"></div> +</div> +<script> +document.body.offsetTop; +document.getElementById('target').style.display = 'block'; +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-root-ref.html b/testing/web-platform/tests/css/CSS2/floats/float-root-ref.html new file mode 100644 index 0000000000..1f593f460a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-root-ref.html @@ -0,0 +1,11 @@ +<!DOCTYPe html> +<style> +body { + float: right; + margin-top: 0; +} +</style> + +<body> +<p>foo</p> +</body> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-root.html b/testing/web-platform/tests/css/CSS2/floats/float-root.html new file mode 100644 index 0000000000..ee7f70e784 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-root.html @@ -0,0 +1,13 @@ +<!DOCTYPe html> +<link rel="help" href="https://w3c.github.io/csswg-drafts/css2/#propdef-float"> +<link rel="match" href="float-root-ref.html"> + +<style> +:root { + float: right; +} +</style> + +<body> +<p>foo</p> +</body> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-table-align-left-quirk-ref.html b/testing/web-platform/tests/css/CSS2/floats/float-table-align-left-quirk-ref.html new file mode 100644 index 0000000000..6b46fb8eb9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-table-align-left-quirk-ref.html @@ -0,0 +1,34 @@ +<!-- intentionally quirks mode --> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>Reference: Check that the old IE quirk for <table align=left> is NOT implemented</title> + <meta name="assert" content="1 and 2 should all be on separate lines below."> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> +</head> +<body> + +<div style="width:0"> +<table><td>1</td></table> +<table><td>2</td></table> +</div> + +<div style="width:0"> +<table><td>1</td></table> +<table><td>2</td></table> +</div> + +<div style="width:0"> +<table><td>1</td></table> +<table><td>2</td></table> +</div> + +<div style="width:0"> +<table><td>1</td></table> +<table><td>2</td></table> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-table-align-left-quirk.html b/testing/web-platform/tests/css/CSS2/floats/float-table-align-left-quirk.html new file mode 100644 index 0000000000..60e219078a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-table-align-left-quirk.html @@ -0,0 +1,36 @@ +<!-- intentionally quirks mode --> +<!-- + Any copyright is dedicated to the Public Domain. + http://creativecommons.org/publicdomain/zero/1.0/ +--> +<html><head> + <title>CSS2: Check that the old IE quirk for <table align=left> is NOT implemented</title> + <meta name="assert" content="1 and 2 should all be on separate lines below."> + <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com"> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="float-table-align-left-quirk-ref.html"> +</head> +<body> + +<div style="width:0"> +<table align="left"><td>1</td></table> +<table align="left"><td>2</td></table> +</div> + +<div style="width:0"> +<table align="left"><td>1</td></table> +<table style="float:left"><td>2</td></table> +</div> + +<div style="width:0"> +<table style="float:left"><td>1</td></table> +<table align="left"><td>2</td></table> +</div> + +<div style="width:0"> +<table style="float:left"><td>1</td></table> +<table style="float:left"><td>2</td></table> +</div> + +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/float-under-flatten-under-preserve-3d.html b/testing/web-platform/tests/css/CSS2/floats/float-under-flatten-under-preserve-3d.html new file mode 100644 index 0000000000..18b6bbc122 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/float-under-flatten-under-preserve-3d.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://crbug.com/1298871"> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="transform-style: preserve-3d"> + <div style="background: red; width: 100px; height: 100px"> + <div style="float: left; background: green; width: 100px; height: 100px"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floated-table-wider-than-specified.html b/testing/web-platform/tests/css/CSS2/floats/floated-table-wider-than-specified.html new file mode 100644 index 0000000000..f93d50e43d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floated-table-wider-than-specified.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>Floated table that becomes wider than its specified width, due to wide contents</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#auto-table-layout" title="17.5.2.2 Automatic table layout"> +<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:300px;"> + <div style="float:left; width:200px; height:100px; margin-right:10px; background:green;"></div> + <div style="float:left; display:table; width:50px; height:10px; background:green;"> + <div style="width:200px; height:100px;"></div> + </div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-in-table-caption-001-ref.html b/testing/web-platform/tests/css/CSS2/floats/floats-in-table-caption-001-ref.html new file mode 100644 index 0000000000..91ddca772b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-in-table-caption-001-ref.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#model"> +<title> +Caption block containers are rendered same as normal block boxes +</title> + +<p> +The words floated and inline should be legible below, with inline appearing just +to the right of the border surrounding floated. +</p> + +<div style="float:left; border: 1px solid black;"> + floated +</div> +inline diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-in-table-caption-001.html b/testing/web-platform/tests/css/CSS2/floats/floats-in-table-caption-001.html new file mode 100644 index 0000000000..a1dc7e9d52 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-in-table-caption-001.html @@ -0,0 +1,24 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<link rel="author" title="David Grogan" href="dgrogan@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/tables.html#model"> +<link rel="match" href="floats-in-table-caption-001-ref.html"> +<meta name="assert" content="Basic floats are honored inside a caption" /> +<title> +Caption block containers are rendered same as normal block boxes +</title> + +<p> +The words floated and inline should be legible below, with inline appearing just +to the right of the border surrounding floated. +</p> + +<table> + <!-- 200px allows floated and inline to not wrap --> + <caption style="text-align:left; width:200px"> + <div style="float:left; border: 1px solid black;"> + floated + </div> + inline + </caption> +</table> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-line-wrap-shifted-001-ref.html b/testing/web-platform/tests/css/CSS2/floats/floats-line-wrap-shifted-001-ref.html new file mode 100644 index 0000000000..ab06bba524 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-line-wrap-shifted-001-ref.html @@ -0,0 +1,23 @@ +<!DOCTYPE html> +<style> +div { + font-size: 10px; + width: 12ch; + line-height: 1; + background: yellow; +} +.float { + width: 12ch; + height: 1em; + background: orange; +} +</style> + +<body> +<div> + 1111<br> + 2222 3333 + <div class="float"></div> +</div> + +</body> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-line-wrap-shifted-001.html b/testing/web-platform/tests/css/CSS2/floats/floats-line-wrap-shifted-001.html new file mode 100644 index 0000000000..5eb1a8f2b1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-line-wrap-shifted-001.html @@ -0,0 +1,44 @@ +<!DOCTYPE html> +<link rel="author" title="Koji Ishii" href="kojii@chromium.org"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="match" href="floats-line-wrap-shifted-001-ref.html"> +<meta name="assert" content="Float may not be higher than line-box containing a box generated by an element earlier in the source document." /> + +<style> +div { + font-size: 10px; + width: 12ch; + line-height: 1; + background: yellow; +} +.float { + float: left; + width: 12ch; + height: 1em; + background: orange; +} +</style> + +<body> +<div> + 1111 + <nobr> + 2222 +<!-- + This float does not fit in the 1st line and thus shifted downward. +--> + <div class="float"></div> +<!-- + The next word causes the 1st line to wrap. + The last break opportunity was before the float, and thus the float is also + wrapped to the next line. + + According to the rule 6, the float should be below <nobr> box. + 6. The outer top of an element's floating box may not be higher than the top + of any line-box containing a box generated by an element earlier in the + source document. +--> + 3333 + </nobr> +</div> +</body> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-001.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-001.html new file mode 100644 index 0000000000..f022134744 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-001.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<meta name="assert" content="This test checks placement of inflow content with floats present." /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; background: red; line-height: 0; position: relative;"> + <div style="float: left; width: 20px;"></div> + <div style="float: right; width: 30px; height: 50px; background: green;"></div> + <div style="float: right; clear: right; width: 100px; height: 50px; background: green;"></div> + <div style="display: inline-block; width: 50px; height: 50px; background: green;"></div> + <div style="position: absolute; width: 20px; height: 50px; top: 0; left: 50px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-002.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-002.html new file mode 100644 index 0000000000..871775901e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<meta name="assert" content="This test checks placement of inflow content with floats present." /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; background: red; position: relative;"> + <div style="float: left; width: 20px;"></div> + <div style="line-height: 0;"> + <div style="display: inline-block; width: 100px; height: 20px; background: green;"></div> + </div> + <div style="float: right; width: 20px; height: 80px; background: green;"></div> + <div style="float: right; clear: right; width: 30px; clear: right;"></div> + <div style="display: inline-block; width: 60px; height: 60px; background: green;"></div> + <div style="position: absolute; width: 20px; height: 80px; background: green; top: 20px; right: 20px;"></div> + <div style="position: absolute; width: 60px; height: 20px; background: green; bottom: 0; left: 0;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-003.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-003.html new file mode 100644 index 0000000000..47509172c9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-003.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<meta name="assert" content="This test checks placement of inflow content with floats present." /> +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div style="width: 100px; height: 100px; line-height: 0; background: red; position: relative;"> + <div style="float: left; width: 20px; height: 20px;"></div> + <div style="height: 30px; background: green;"></div> + <div style="float: right; width: 40px; height: 20px; background: green;"></div> + <div style="float: right; clear: right; width: 50px; height: 50px; background: green;"></div> + <div style="float: left; width: 50px; height: 50px; background: green;"></div> + <span style="display: inline-block; width: 40px; height: 20px; background: green;"></span> + <div style="position: absolute; width: 20px; height: 20px; background: green; left: 40px; top: 30px;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-004.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-004.html new file mode 100644 index 0000000000..bbfc9196c8 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-004.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1183944"> +<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; display: flow-root; background: red; line-height: 0;"> + <div style="width: 100px; height: 50px; float: left; background: green;"></div> + <div style="width: 100px; height: 10px; float: right; background: green;"></div> + <div style="display: inline-block; width: 100px; height: 40px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-005-ref.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-005-ref.html new file mode 100644 index 0000000000..a286a4aeb7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-005-ref.html @@ -0,0 +1,26 @@ +<!DOCTYPE html> +<style> +.float-left { + float: left; + clear: left; + width: 50px; + height: 50px; + background: green; +} +.float-right { + float: right; + clear: right; + width: 50px; + height: 50px; + background: green; +} +</style> +<div style="width: 150px; display: flow-root;"> + <div class="float-left"></div> + <div style="height: 40px;"></div> + <div class="float-right"></div> + <div class="float-left" style="width: 100px; height: 40px; background: cyan;"></div> + <div class="float-right"></div> + <div class="float-left"></div> + <div class="float-right"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-005.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-005.html new file mode 100644 index 0000000000..e224a6b773 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-005.html @@ -0,0 +1,34 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378106"> +<link rel="match" href="floats-placement-005-ref.html"> +<style> +.float-left { + float: left; + clear: left; + width: 50px; + height: 50px; + background: green; +} +.float-right { + float: right; + clear: right; + width: 50px; + height: 50px; + background: green; +} +span { + display: inline-block; + width: 50px; + height: 40px; + background: cyan; +} +</style> +<div style="width: 150px; display: flow-root;"> + <div class="float-left"></div> + <div style="height: 40px;"></div> + <div class="float-right"></div> + <div class="float-right"></div> + <div class="float-left"></div> + <div class="float-right"></div> + <div style="margin-top: 10px; line-height: 0;"><span></span><span></span></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-006.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-006.html new file mode 100644 index 0000000000..038e40848a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-006.html @@ -0,0 +1,38 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test the inline-block does not overlap with the float-right element.</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=1805597"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.container { + width: 100px; + height: 100px; + background-color: red; +} + +.inline-block { + display: inline-block; + width: 50px; + height: 100px; + background-color: green; +} +.float-right { + float: right; + width: 50px; + height: 100px; + background-color: green; +} +.float-left { + width: 30px; + height: 50px; + clear: both; + float: left; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <div class="inline-block"></div><div class="float-right"></div><div class="float-left"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-007.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-007.html new file mode 100644 index 0000000000..d7e3ef685f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-007.html @@ -0,0 +1,39 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test the inline-block does not overlap with the float-left element.</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=1805597"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.container { + width: 100px; + height: 100px; + background-color: red; + direction: rtl; +} + +.inline-block { + display: inline-block; + width: 50px; + height: 100px; + background-color: green; +} +.float-left { + float: left; + width: 50px; + height: 100px; + background-color: green; +} +.float-right { + width: 30px; + height: 50px; + clear: both; + float: right; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <div class="inline-block"></div><div class="float-left"></div><div class="float-right"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-008.html b/testing/web-platform/tests/css/CSS2/floats/floats-placement-008.html new file mode 100644 index 0000000000..90d919dddc --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-008.html @@ -0,0 +1,40 @@ +<!DOCTYPE html> +<meta charset="utf-8"> +<title>Test the inline-block does not overlap with the float-right element.</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=1805597"> +<link rel="match" href="../../reference/ref-filled-green-100px-square.xht"> +<style> +.container { + width: 100px; + height: 100px; + background-color: red; + position: relative; +} + +.inline-block { + display: inline-block; + width: 50px; + height: 50px; + background-color: green; +} +.float-right { + float: right; + width: 50px; + height: 100px; + background-color: green; +} +.float-left { + width: 30px; + height: 50px; + clear: both; + float: left; +} +</style> + +<p>Test passes if there is a filled green square and <strong>no red</strong>.</p> +<div class="container"> + <div class="inline-block"></div><div class="float-right"></div><div class="float-left"></div> + <div style="position: absolute; top: 50px; width: 50px; height: 50px; background-color: green"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001-ref.xht new file mode 100644 index 0000000000..15ff213301 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001-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 Test: Test for float placement rules (reference)</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> +.left { float:left; } +.right { float:right; } +.left, .right { width:50px; height:50px; background:yellow; } +p { overflow:auto; } +</style> +</head> +<body style="width:400px;"> +<p><span class="left"></span>HelloKitty +</p><p><span class="right"></span>HelloKitty +</p><p dir="rtl"><span class="left"></span>HelloKitty +</p><p dir="rtl"><span class="right"></span>HelloKitty +</p><p style="text-align:right;"><span class="left"></span>HelloKitty +</p><p style="text-align:right;"><span class="right"></span>HelloKitty + + +</p></body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001a.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001a.xht new file mode 100644 index 0000000000..61815e9ad3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001a.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: Test for float placement rules</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> +<link rel="match" href="floats-placement-vertical-001-ref.xht"/> +<meta name="assert" content="A floating box must be placed as high as possible. " /> +<style type="text/css"> +.left { float:left; } +.right { float:right; } +.left, .right { width:50px; height:50px; background:yellow; } +p { overflow:auto; } +</style> +</head> +<body style="width:400px;"> +<p>Hello<span class="left"></span>Kitty +</p><p>Hello<span class="right"></span>Kitty +</p><p dir="rtl">Hello<span class="left"></span>Kitty +</p><p dir="rtl">Hello<span class="right"></span>Kitty +</p><p style="text-align:right;">Hello<span class="left"></span>Kitty +</p><p style="text-align:right;">Hello<span class="right"></span>Kitty + + +</p></body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001b.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001b.xht new file mode 100644 index 0000000000..8a2e7247b2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001b.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: Test for float placement rules</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> +<link rel="match" href="floats-placement-vertical-001-ref.xht"/> +<meta name="assert" content="A floating box must be placed as high as possible. " /> +<style type="text/css"> +.left { float:left; } +.right { float:right; } +.left, .right { width:50px; height:50px; background:yellow; } +p { overflow:auto; } +</style> +</head> +<body style="width:400px"> +<p><span>Hello<span class="left"></span></span>Kitty +</p><p><span>Hello<span class="right"></span></span>Kitty +</p><p dir="rtl"><span>Hello<span class="left"></span></span>Kitty +</p><p dir="rtl"><span>Hello<span class="right"></span></span>Kitty +</p><p style="text-align:right;"><span>Hello<span class="left"></span></span>Kitty +</p><p style="text-align:right;"><span>Hello<span class="right"></span></span>Kitty + + +</p></body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001c.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001c.xht new file mode 100644 index 0000000000..2784c59027 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-001c.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: Test for float placement rules</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> +<link rel="match" href="floats-placement-vertical-001-ref.xht"/> +<meta name="assert" content="A floating box must be placed as high as possible. " /> +<style type="text/css"> +.left { float:left; } +.right { float:right; } +.left, .right { width:50px; height:50px; background:yellow; } +p { overflow:auto; } +</style> +</head> +<body style="width:400px;"> +<p>Hello<span><span class="left"></span>Kitty</span> +</p><p>Hello<span><span class="right"></span>Kitty</span> +</p><p dir="rtl">Hello<span><span class="left"></span>Kitty</span> +</p><p dir="rtl">Hello<span><span class="right"></span>Kitty</span> +</p><p style="text-align:right;">Hello<span><span class="left"></span>Kitty</span> +</p><p style="text-align:right;">Hello<span><span class="right"></span>Kitty</span> + + +</p></body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-003-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-003-ref.xht new file mode 100644 index 0000000000..f89b9e768e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-003-ref.xht @@ -0,0 +1,12 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: Test for float placement rules (reference)</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +</head><body style="width:100px; font-size:5px;"> +<!-- Check that we don't allow floats to reorder --> +H +<div style="background:blue; width:100px; height:100px;"></div> +<div style="background:yellow; width:30px; height:30px; float:left;"></div> +<div style="background:yellow; width:30px; height:30px; float:right;"></div> + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-003.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-003.xht new file mode 100644 index 0000000000..9c4ea52740 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-003.xht @@ -0,0 +1,16 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: Test for float placement rules</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> +<link rel="match" href="floats-placement-vertical-003-ref.xht"/> +<meta name="assert" content="The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document." /> +<meta name="assert" content="A floating box must be placed as high as possible. " /> +</head><body style="width:100px; font-size:5px;"> +<!-- Check that we don't allow floats to reorder --> +H +<div style="background:blue; width:100px; height:100px; float:left;"></div> +<div style="background:yellow; width:30px; height:30px; float:left;"></div> +<div style="background:yellow; width:30px; height:30px; float:right;"></div> + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004-ref.xht new file mode 100644 index 0000000000..9e2cd4682e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004-ref.xht @@ -0,0 +1,11 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: Test for float placement rules (reference)</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="match" href="floats-placement-vertical-004-ref2.xht"/> +</head><body style="width:200px; font-size:5px;"> +<div style="background:green; width:100px; height:100px; float:left;"></div> +H<br /> +<div style="background:blue; width:100px; height:100px; float:left;"></div> + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004-ref2.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004-ref2.xht new file mode 100644 index 0000000000..97b26306de --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004-ref2.xht @@ -0,0 +1,13 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: Test for float placement rules (reference)</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="match" href="floats-placement-vertical-004-ref.xht"/> +</head><body style="width:200px; font-size:5px;"> +<div style="position:absolute; background:green; width:100px; height:100px;"></div> +<div style="position:relative; left:100px; width:100px; height:100px;"> + H + <div style="background:blue; width:100px; height:100px;"></div> +</div> + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004.xht b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004.xht new file mode 100644 index 0000000000..143cca2e07 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-placement-vertical-004.xht @@ -0,0 +1,15 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: Test for float placement rules</title> +<link rel="author" title="Robert O'Callahan" href="mailto:robert@ocallahan.org" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#float-position" /> +<link rel="match" href="floats-placement-vertical-004-ref.xht"/> +<meta name="assert" content="A floating box must be placed as high as possible. " /> +</head><body style="width:200px; font-size:5px;"> +<!-- Check that we're actually taking inline content already in the line into account + when we check whether the blue float fits --> +<div style="background:green; width:100px; height:100px; float:left;"></div> +H +<div style="background:blue; width:100px; height:100px; float:left;"></div> + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-001-ref.xht new file mode 100644 index 0000000000..a401cd41da --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-001-ref.xht @@ -0,0 +1,6 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test for float placement around other float in BFC but outside containing block</title> + +</head><body><div style="float: left; width: 500px; height: 500px"> + <div style="width: 425px; height: 10px; background: blue"></div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-001.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-001.xht new file mode 100644 index 0000000000..9c63c0ebdd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-001.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: float placement around other float in BFC but outside containing block</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-rule3-outside-left-001-ref.xht"/> + <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" /> + +<!-- + CSS2.1 9.5.1 rule 3 says: + + The right outer edge of a left-floating box may not be to the right + of the left outer edge of any right-floating box that is to the + right of it. Analogous rules hold for right-floating elements. + + --> + +<!-- the block formatting context inside which we're testing --> +</head><body><div style="float: left; width: 500px; height: 500px"> + + <div style="float: right; width: 50px; height: 300px"></div> + + <div style="margin-right: 100px"> <!-- 400px wide --> + + <!-- we're testing the position of this float --> + <div style="float: left; width: 425px; height: 10px; background: blue"></div> + + </div> + +</div> +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-002-ref.xht new file mode 100644 index 0000000000..f16aba29c9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-002-ref.xht @@ -0,0 +1,5 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test for float placement around other float in BFC but outside containing block</title> +</head><body><div style="float: left; width: 500px; height: 500px"> + <div style="margin-top: 300px; width: 475px; height: 10px; background: blue"></div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-002.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-002.xht new file mode 100644 index 0000000000..053251a3d2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-left-002.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: float placement around other float in BFC but outside containing block</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-rule3-outside-left-002-ref.xht"/> + <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" /> + +<!-- + CSS2.1 9.5.1 rule 3 says: + + The right outer edge of a left-floating box may not be to the right + of the left outer edge of any right-floating box that is to the + right of it. Analogous rules hold for right-floating elements. + + --> + +<!-- the block formatting context inside which we're testing --> +</head><body><div style="float: left; width: 500px; height: 500px"> + + <div style="float: right; width: 50px; height: 300px"></div> + + <div style="margin-right: 100px"> <!-- 400px wide --> + + <!-- we're testing the position of this float --> + <div style="float: left; width: 475px; height: 10px; background: blue"></div> + + </div> + +</div> +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-001-ref.xht new file mode 100644 index 0000000000..1495741607 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-001-ref.xht @@ -0,0 +1,5 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test for float placement around other float in BFC but outside containing block</title> +</head><body><div style="float: left; width: 500px; height: 500px"> + <div style="margin-left: 75px; width: 425px; height: 10px; background: blue"></div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-001.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-001.xht new file mode 100644 index 0000000000..47c2e66868 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-001.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: float placement around other float in BFC but outside containing block</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-rule3-outside-right-001-ref.xht"/> + <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" /> + +<!-- + CSS2.1 9.5.1 rule 3 says: + + The right outer edge of a left-floating box may not be to the right + of the left outer edge of any right-floating box that is to the + right of it. Analogous rules hold for right-floating elements. + + --> + +<!-- the block formatting context inside which we're testing --> +</head><body><div style="float: left; width: 500px; height: 500px"> + + <div style="float: left; width: 50px; height: 300px"></div> + + <div style="margin-left: 100px"> <!-- 400px wide --> + + <!-- we're testing the position of this float --> + <div style="float: right; width: 425px; height: 10px; background: blue"></div> + + </div> + +</div> +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-002-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-002-ref.xht new file mode 100644 index 0000000000..e95714e466 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-002-ref.xht @@ -0,0 +1,5 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test for float placement around other float in BFC but outside containing block</title> +</head><body><div style="float: left; width: 500px; height: 500px"> + <div style="margin-top: 300px; margin-left: 25px; width: 475px; height: 10px; background: blue"></div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-002.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-002.xht new file mode 100644 index 0000000000..ff8552de68 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule3-outside-right-002.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: float placement around other float in BFC but outside containing block</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-rule3-outside-right-002-ref.xht"/> + <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" /> + +<!-- + CSS2.1 9.5.1 rule 3 says: + + The right outer edge of a left-floating box may not be to the right + of the left outer edge of any right-floating box that is to the + right of it. Analogous rules hold for right-floating elements. + + --> + +<!-- the block formatting context inside which we're testing --> +</head><body><div style="float: left; width: 500px; height: 500px"> + + <div style="float: left; width: 50px; height: 300px"></div> + + <div style="margin-left: 100px"> <!-- 400px wide --> + + <!-- we're testing the position of this float --> + <div style="float: right; width: 475px; height: 10px; background: blue"></div> + + </div> + +</div> +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-left-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-left-001-ref.xht new file mode 100644 index 0000000000..546e2ae41c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-left-001-ref.xht @@ -0,0 +1,5 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test for float placement around other float in BFC but outside containing block</title> +</head><body><div style="float: left; width: 500px; height: 500px"> + <div style="margin-top: 300px; margin-left: 100px; width: 425px; height: 10px; background: blue"></div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-left-001.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-left-001.xht new file mode 100644 index 0000000000..d0fb1c730a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-left-001.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: float placement around other float in BFC but outside containing block</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-rule7-outside-left-001-ref.xht"/> + <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" /> + +<!-- + CSS2.1 9.5.1 rule 7 says: + + A left-floating box that has another left-floating box to its left + may not have its right outer edge to the right of its containing + block's right edge. (Loosely: a left float may not stick out at the + right edge, unless it is already as far to the left as possible.) An + analogous rule holds for right-floating elements. + + --> + +<!-- the block formatting context inside which we're testing --> +</head><body><div style="float: left; width: 500px; height: 500px"> + + <div style="float: left; width: 50px; height: 300px"></div> + + <div style="margin-left: 100px"> <!-- 400px wide --> + + <!-- we're testing the position of this float --> + <div style="float: left; width: 425px; height: 10px; background: blue"></div> + + </div> + +</div> +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-right-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-right-001-ref.xht new file mode 100644 index 0000000000..69e1a26a28 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-right-001-ref.xht @@ -0,0 +1,5 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test for float placement around other float in BFC but outside containing block</title> +</head><body><div style="float: left; width: 500px; height: 500px"> + <div style="margin-top: 300px; margin-left: -25px; width: 425px; height: 10px; background: blue"></div> +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-right-001.xht b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-right-001.xht new file mode 100644 index 0000000000..fd8cff6497 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-rule7-outside-right-001.xht @@ -0,0 +1,32 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: float placement around other float in BFC but outside containing block</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-rule7-outside-right-001-ref.xht"/> + <meta name="assert" content="Test for float placement around other float in BFC but outside containing block" /> + +<!-- + CSS2.1 9.5.1 rule 7 says: + + A left-floating box that has another left-floating box to its left + may not have its right outer edge to the right of its containing + block's right edge. (Loosely: a left float may not stick out at the + right edge, unless it is already as far to the left as possible.) An + analogous rule holds for right-floating elements. + + --> + +<!-- the block formatting context inside which we're testing --> +</head><body><div style="float: left; width: 500px; height: 500px"> + + <div style="float: right; width: 50px; height: 300px"></div> + + <div style="margin-right: 100px"> <!-- 400px wide --> + + <!-- we're testing the position of this float --> + <div style="float: right; width: 425px; height: 10px; background: blue"></div> + + </div> + +</div> +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-saturated-position-crash.html b/testing/web-platform/tests/css/CSS2/floats/floats-saturated-position-crash.html new file mode 100644 index 0000000000..08a400df56 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-saturated-position-crash.html @@ -0,0 +1,18 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/972904"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> + +<div style="margin-top:-100000000px;"> + <div style="margin-bottom:-100000000px; padding-top: 1px;"></div> + text <!-- "text" is placed at the highest possible location due to saturated margin top values. --> + <div style="float: left; width: 60px; height: 20px;"></div> + <div style="margin-top: 10px;"> + <div style="float: left; width: 10px;"></div> + <div style="float: left; width: 100px; height: 100px;"></div> + </div> +</div> + +<script> +test(() => { }, 'test passes if it does not crash'); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-overflow-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-overflow-ref.xht new file mode 100644 index 0000000000..9d4c968d1d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-overflow-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:yellow; width: 200px; height: 50px"> + <div style="background:purple; width: 150px; height: 50px"></div> + </div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-overflow.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-overflow.xht new file mode 100644 index 0000000000..d99861b680 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-overflow.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-001-left-overflow-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + + <div style="overflow: hidden; background: yellow"> + <span style="width: 150px; height: 50px; background: purple"></span> + </div> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-table-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-table-ref.xht new file mode 100644 index 0000000000..4b3b439c6d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-table-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:purple; width: 150px; height: 50px"></div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-table.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-table.xht new file mode 100644 index 0000000000..2bafffd854 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-left-table.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-001-left-table-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + + <table style="background: yellow"><tbody><tr><td> + <span style="width: 150px; height: 50px; background: purple"></span> + </td></tr></tbody></table> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-overflow-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-overflow-ref.xht new file mode 100644 index 0000000000..00fc8fe6b7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-overflow-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:yellow; width: 200px; height: 50px"> + <div style="background:purple; width: 150px; height: 50px"></div> + </div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-overflow.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-overflow.xht new file mode 100644 index 0000000000..183bb78918 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-overflow.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-001-right-overflow-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + + <div style="overflow: hidden; background: yellow"> + <span style="width: 150px; height: 50px; background: purple"></span> + </div> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-table-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-table-ref.xht new file mode 100644 index 0000000000..0b98fa080f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-table-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:purple; width: 150px; height: 50px"></div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-table.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-table.xht new file mode 100644 index 0000000000..c67193d3a3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-001-right-table.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-001-right-table-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + + <table style="background: yellow"><tbody><tr><td> + <span style="width: 150px; height: 50px; background: purple"></span> + </td></tr></tbody></table> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-overflow.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-overflow.xht new file mode 100644 index 0000000000..3cb59caa78 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-overflow.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-002-left-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + + <div style="overflow: hidden; background: yellow"> + <span style="width: 150px; height: 50px; background: purple"></span> + <span style="width: 150px; height: 50px; background: purple"></span> + </div> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-ref.xht new file mode 100644 index 0000000000..b118e94fc3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:yellow; width: 200px; height: 100px"> + <div style="background:purple; width: 150px; height: 100px"></div> + </div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-table.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-table.xht new file mode 100644 index 0000000000..9a7bfe68dd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-left-table.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-002-left-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + + <table style="background: yellow"><tbody><tr><td> + <span style="width: 150px; height: 50px; background: purple"></span> + <span style="width: 150px; height: 50px; background: purple"></span> + </td></tr></tbody></table> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-overflow.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-overflow.xht new file mode 100644 index 0000000000..1ff4fa6a1a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-overflow.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-002-right-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + + <div style="overflow: hidden; background: yellow"> + <span style="width: 150px; height: 50px; background: purple"></span> + <span style="width: 150px; height: 50px; background: purple"></span> + </div> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-ref.xht new file mode 100644 index 0000000000..bb3774567e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:yellow; width: 200px; height: 100px"> + <div style="background:purple; width: 150px; height: 100px"></div> + </div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-table.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-table.xht new file mode 100644 index 0000000000..894287a0b7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-002-right-table.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-002-right-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + + <table style="background: yellow"><tbody><tr><td> + <span style="width: 150px; height: 50px; background: purple"></span> + <span style="width: 150px; height: 50px; background: purple"></span> + </td></tr></tbody></table> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-overflow-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-overflow-ref.xht new file mode 100644 index 0000000000..41ed0d3d35 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-overflow-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:purple; width: 200px; height: 50px"></div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-overflow.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-overflow.xht new file mode 100644 index 0000000000..1f6889c93d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-overflow.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-003-left-overflow-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + + <div style="overflow: hidden; background: yellow"> + <span style="width: 250px; height: 50px; background: purple"></span> + </div> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-table-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-table-ref.xht new file mode 100644 index 0000000000..e9ddad7da1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-table-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 150px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; clear:left; background:purple; width: 250px; height: 50px"></div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-table.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-table.xht new file mode 100644 index 0000000000..dcb6c04f14 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-left-table.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-003-left-table-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:left; background:blue; width: 100px; height: 100px"></div> + + <table style="background: yellow"><tbody><tr><td> + <span style="width: 250px; height: 50px; background: purple"></span> + </td></tr></tbody></table> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-overflow-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-overflow-ref.xht new file mode 100644 index 0000000000..42c7861d6c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-overflow-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 100px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; background:purple; width: 200px; height: 50px"></div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-overflow.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-overflow.xht new file mode 100644 index 0000000000..fce87aef22 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-overflow.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-003-right-overflow-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + + <div style="overflow: hidden; background: yellow"> + <span style="width: 250px; height: 50px; background: purple"></span> + </div> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-table-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-table-ref.xht new file mode 100644 index 0000000000..768355e7a4 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-table-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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 150px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + <div style="float:left; clear:right; background:purple; width: 250px; height: 50px"></div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-table.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-table.xht new file mode 100644 index 0000000000..10fac3bd92 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-003-right-table.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-003-right-table-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + span { display: inline-block; vertical-align: bottom; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + + <div style="float:right; background:blue; width: 100px; height: 100px"></div> + + <table style="background: yellow"><tbody><tr><td> + <span style="width: 250px; height: 50px; background: purple"></span> + </td></tr></tbody></table> + +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-004-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-004-ref.xht new file mode 100644 index 0000000000..fede0e5f0e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-004-ref.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> +</head> +<body> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 150px; height: 10px; background: purple"></div> +</div> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 150px; height: 10px; background: purple"></div> +</div> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 150px; height: 10px; background: purple"></div> +</div> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 150px; height: 10px; background: purple"></div> +</div> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 100px; height: 10px; background: purple"></div> +</div> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 100px; height: 10px; background: purple"></div> +</div> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 100px; height: 10px; background: purple"></div> +</div> + +<div style="width: 300px; height: 20px; background: aqua"> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <div style="float:left; width: 100px; height: 10px; background: purple"></div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-004.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-004.xht new file mode 100644 index 0000000000..39653b83eb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-004.xht @@ -0,0 +1,85 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-004-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <table style="background: yellow"><tbody><tr><td> + <div style="width: 150px; height: 10px; background: purple"></div> + </td></tr></tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <table style="background: yellow"><tbody><tr><td> + <div style="width: 150px; height: 10px; background: purple"></div> + </td></tr></tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <table style="background: yellow"><tbody><tr><td> + <div style="width: 150px; height: 10px; background: purple"></div> + </td></tr></tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <table style="background: yellow"><tbody><tr><td> + <div style="width: 150px; height: 10px; background: purple"></div> + </td></tr></tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <div style="overflow: hidden; background: yellow"> + <div style="width: 150px; height: 10px; background: purple"></div> + </div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <div style="overflow: hidden; background: yellow"> + <div style="width: 150px; height: 10px; background: purple"></div> + </div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:left; background:silver; width: 100px; height: 6px"></div> + <div style="overflow: hidden; background: yellow"> + <div style="width: 150px; height: 10px; background: purple"></div> + </div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:right; background:blue; width: 100px; height: 20px"></div> + <div style="float:right; background:silver; width: 100px; height: 6px"></div> + <div style="overflow: hidden; background: yellow"> + <div style="width: 150px; height: 10px; background: purple"></div> + </div> +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-005-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-005-ref.xht new file mode 100644 index 0000000000..bb3190d0cb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-005-ref.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + body { font-size: 10px; } + + </style> +</head> +<body> + +<div style="width: 300px; height: 40px;background: aqua"> + <div style="float:left; background:blue; width: 200px; height: 20px"></div> + <div style="float:left; clear: left; background: yellow; width: 150px; height: 20px">50%</div> +</div> + +<div style="width: 300px; height: 40px;background: aqua"> + <div style="float:right; background:blue; width: 200px; height: 20px"></div> + <div style="float:left; clear: right; background: yellow; width: 150px; height: 20px">50%</div> +</div> + +<div style="width: 300px; height: 40px;background: aqua"> + <div style="float:left; background:blue; width: 200px; height: 20px"></div> + <div style="float:left; clear: left; background: yellow; width: 150px; height: 20px">50%</div> +</div> + +<div style="width: 300px; height: 40px;background: aqua"> + <div style="float:right; background:blue; width: 200px; height: 20px"></div> + <div style="float:left; clear: right; background: yellow; width: 150px; height: 20px">50%</div> +</div> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-005.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-005.xht new file mode 100644 index 0000000000..6122eb0fa2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-005.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" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-005-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + body { font-size: 10px; } + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; vertical-align: top; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; background:blue; width: 200px; height: 20px"></div> + <table width="50%" style="background: yellow" height="20"><tbody><tr><td>50%</td></tr></tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:right; background:blue; width: 200px; height: 20px"></div> + <table width="50%" style="background: yellow" height="20"><tbody><tr><td>50%</td></tr></tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; background:blue; width: 200px; height: 20px"></div> + <div style="overflow:hidden; background: yellow; width: 50%; height: 20px;">50%</div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:right; background:blue; width: 200px; height: 20px"></div> + <div style="overflow:hidden; background: yellow; width: 50%; height: 20px;">50%</div> +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-006-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-006-ref.xht new file mode 100644 index 0000000000..59051f846a --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-006-ref.xht @@ -0,0 +1,177 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + body { font-size: 16px; } + + table { margin: 0; border-spacing: 0; } + caption, td, th { padding: 0; vertical-align: top; text-align: left; } + + .capref { background: yellow; } + .tabref { background: purple; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + + <div style="float:right; height: 30px; width: 100px; margin-right: 130px;" class="capref">Caption</div> + + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + + <div style="float:right; clear: right; height: 30px; width: 230px;" class="tabref">Cell</div> + +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + + <div style="float:right; height: 30px; width: 190px;" class="capref">Caption</div> + + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + + <div style="float:right; clear: right; height: 30px; width: 100px; margin-right: 90px;" class="tabref">Cell</div> + +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + + <div style="float:right; clear: right; height: 30px; width: 227px;margin-right:3px;" class="tabref">Cell</div> + + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + + <div style="float:right; clear: right; height: 30px; width: 100px;margin-right:130px;" class="capref">Caption</div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + + <div style="float:right; clear: right; height: 30px; width: 100px; margin-right:95px;" class="tabref">Cell</div> + + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + + <div style="float:right; clear: right; height: 30px; width: 192px; margin-right:3px;" class="capref">Caption</div> +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-006.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-006.xht new file mode 100644 index 0000000000..4f302d6e6d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-006.xht @@ -0,0 +1,174 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-006-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + body { font-size: 16px; } + + table { margin: 0; border-spacing: 0; } + caption, td, th { padding: 0; vertical-align: top; text-align: left; } + + table table caption { background: yellow; } + table table { background: purple; } + + </style> +</head> +<body> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + <table> + <caption style="caption-side: top; height:30px; width: 100px;">Caption</caption> + <tbody><tr><td><div style="height: 30px; width: 230px">Cell</div></td></tr> + </tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + <table> + <caption style="caption-side: top; height:30px; width: 190px;">Caption</caption> + <tbody><tr><td><div style="height: 30px; width: 100px">Cell</div></td></tr> + </tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + <table> + <caption style="caption-side: bottom; height:30px; width: 100px;">Caption</caption> + <tbody><tr><td><div style="height: 30px; width: 227px">Cell</div></td></tr> + </tbody></table> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float:left; clear:left; background:blue; width:150px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:145px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:140px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:135px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:130px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:125px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:120px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:115px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:110px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:105px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:100px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:95px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:90px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:85px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:80px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:75px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:70px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:65px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:60px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:55px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:50px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:45px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:40px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:35px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:30px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:25px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:20px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:15px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:10px; height:1px"></div> + <div style="float:left; clear:left; background:blue; width:5px; height:1px"></div> + <table> + <caption style="caption-side: bottom; height:30px; width: 192px;">Caption</caption> + <tbody><tr><td><div style="height: 30px; width: 100px">Cell</div></td></tr> + </tbody></table> +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-007-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-007-ref.xht new file mode 100644 index 0000000000..f67bd790c3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-007-ref.xht @@ -0,0 +1,110 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> + <title>CSS Test: Test for flow around floats (reference)</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; vertical-align: top; } + + </style> +</head> +<body> + +<!-- 6px margin between (from top, from bottom, from both) --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow; margin-top: 1px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow; margin-top: 1px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow; margin-top: 1px;"></div> +</td></tr></tbody></table> + +<!-- 5px margin between (from both) --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<!-- 4px margin between (from both) --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<!-- negative margin between --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="float: left; clear: left; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-007.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-007.xht new file mode 100644 index 0000000000..77483b25d6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-007.xht @@ -0,0 +1,113 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en-US"><head> + <title>CSS Test: Test for flow around floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-007-ref.xht"/> + <meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> + <meta http-equiv="Content-Style-Type" content="text/css" /> + <style type="text/css"> + + table { margin: 0; border-spacing: 0; } + td, th { padding: 0; vertical-align: top; } + + </style> +</head> +<body> + +<!-- 6px margin between (from top, from bottom, from both) --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: 6px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: 6px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 6px;"></div> +</td></tr></tbody></table> + +<!-- 5px margin between (from both) --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: 5px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: 10px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -5px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: -5px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 10px;"></div> +</td></tr></tbody></table> + +<!-- 4px margin between (from both) --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: 4px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 4px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 5px;"></div> +</td></tr></tbody></table> + +<!-- negative margin between --> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: 0px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: 0px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -1px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: -1px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> +</td></tr></tbody></table> + +<table width="300" style="background: aqua"><tbody><tr><td> + <div style="float: left; height: 10px; width: 150px; background: blue"></div> + <div style="height: 5px; background: purple; margin-bottom: -4px;"></div> + <div style="overflow: hidden; width: 200px; height: 5px; background: yellow; margin-top: -4px;"></div> +</td></tr></tbody></table> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-outside-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-outside-001-ref.xht new file mode 100644 index 0000000000..20ae62757d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-outside-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" lang="en"><head> +<title>Testcase, bug 472252</title> + +<style type="text/css"> +#wrap {width:600px; border:1px solid;position:relative} +.a {background:lime; color:#fff; width:80%;} +.b {position:absolute; right:0; width:18%; background: cyan; color: #000; height:10em;} +textarea {box-sizing: border-box; width: 100%; height:10em;} +</style> + +<title>test</title> +</head> +<body> +<div id="wrap"> + <div class="b"></div> + <div class="a"><textarea></textarea></div> +</div> + + +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-outside-001.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-outside-001.xht new file mode 100644 index 0000000000..5ba6a9750e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-outside-001.xht @@ -0,0 +1,23 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="en"><head> + <title>CSS Test: float</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-wrap-bfc-outside-001-ref.xht"/> + +<style type="text/css"> +#wrap {width:600px; border:1px solid;} +.a {background:lime; color:#fff; width:80%;} +.b {float:right; width:18%; background: cyan; color: #000; height:10em;} +textarea {box-sizing: border-box;width: 100%; height:10em;} +</style> + +</head> +<body> +<div id="wrap"> + <div class="b"></div> + <div class="a"><textarea></textarea></div> +</div> + + +</body></html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001-ref.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001-ref.html new file mode 100644 index 0000000000..8e079b1f17 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001-ref.html @@ -0,0 +1,121 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Reference Case</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<script> + const MARGIN_VALS = [-30, -20, -17, + // Values -16 through -1 are non-interoperable and are + // split off to a separate test. + 0, 5, 10, 14 + // Values over 15 are non-interoperable and are + // split off to a separate test. + ]; + const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. + const DIRECTION_VALS = ["ltr", "rtl"]; + + function newDivWithClassAndParent(className, parent) { + let elem = document.createElement("div"); + if (className) { + elem.classList.add(className); + } + parent.appendChild(elem); + return elem; + } + function generateGroup(directionVal, floatVal, marginPropSuffix) { + let group = newDivWithClassAndParent("group", document.body); + group.style.direction = directionVal; + const marginPropName = "margin-" + marginPropSuffix; + + for (let v of MARGIN_VALS) { + // In this test, the negative values are specifically the ones that + // are expected to cause wrapping. + const isExpectingToWrap = (v < 0); + let container = newDivWithClassAndParent("container", group); + if (isExpectingToWrap) { + container.style.flexWrap = "wrap"; + } + if ((floatVal == "right") != (directionVal == "rtl")) { + // In the corresponding piece of the testcase, the float is floated to + // the inline-end side (for the given writing-mode). We use a + // "row-reverse" flex container as our mockup for that here. + container.style.flexDirection = "row-reverse"; + } + + let float = newDivWithClassAndParent("float", container); + float.style.cssFloat = floatVal; + + let bfc = newDivWithClassAndParent("bfc", container); + if (isExpectingToWrap) { + // If we wrap, then we expect the testcase to resolve the BFC's + // content-box width to be: 30px (container's available space) + // minus 2px (for bfc's border), plus the absolute value of whatever + // (negative) margin value we're testing here. + bfc.style.width = (30 - 2 - v) + "px"; + } + + // Set the actual margin value that we're testing here, EXCEPT if we're + // not-expecting-to-wrap and the bfc's margin is going to "overlap" the + // float in the testcase. (In this latter case, the margin doesn't + // impact the testcase's rendering, so we take care not to set it here.) + if (isExpectingToWrap || marginPropSuffix != floatVal) { + bfc.style[marginPropName] = v + "px"; + } + } + } + function go() { + for (let directionVal of DIRECTION_VALS) { + for (let floatVal of HORIZ_SIDES) { + for (let marginPropSuffix of HORIZ_SIDES) { + generateGroup(directionVal, floatVal, marginPropSuffix); + } + } + } + // Note: the "reftest-wait" usage here isn't strictly necessary; it just + // helps ensure that we actually make it through all of the above JS and + // populate this document with the content that we want to render. + // (Specifically: if we e.g. throw a JS exception somewhere early in both + // the testcase and reference case, then the "reftest-wait" class will + // never be removed; and that will cause the test run to be classified + // as a failure, rather than a trivial "pass" with a visual comparison of + // two blank documents.) + document.documentElement.removeAttribute("class"); + } +</script> +<style> +.group { + width: 500px; + border: 1px solid black; +} +.container { + display: inline-flex; + align-content: start; + vertical-align: top; + width: 30px; + height: 40px; + /* This border and margin are just cosmetic, to avoid overlap between + * adjacent containers within a row. */ + border: 1px solid gray; + margin-left: 30px; +} + +.float { + width: 7px; + height: 8px; + background: fuchsia; + border: 1px solid purple; + margin: 1px 3px 1px 2px; +} +.bfc { + display: flow-root; + background: aqua; + height: 15px; + border: 1px solid blue; + /* We use "flex: 1" (on a flex item) to mock up the fill-available-space + * block-layout behavior in the testcase. */ + flex: 1 auto; +} +</style> +<body onload="go()"> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001.html new file mode 100644 index 0000000000..cc344f0fd5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001.html @@ -0,0 +1,114 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such + that it inflates its border-box to be too large to fit alongside a float, + then it should be pushed below the float</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats"> +<meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth"> +<!-- For a BFC with 'width:auto', negative total inline-axis margins will + effectively set a lower-bound for the used border-box width, to satisfy + the equation in CSS2.1 10.3.3. This test exercises scenarios where this + mechanism "props up" the BFC's border-box enough to make its border-box + collide width the float's margin-box, resulting in it needing to be moved + down below the float. --> +<link rel="match" href="floats-wrap-bfc-with-margin-001-ref.html"> +<script> + const MARGIN_VALS = [-30, -20, -17, + // Values -16 through -1 are non-interoperable and are + // split off to a separate test. + 0, 5, 10, 14 + // Values over 15 are non-interoperable and are + // split off to a separate test. + ]; + const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. + const DIRECTION_VALS = ["ltr", "rtl"]; + + function newDivWithClassAndParent(className, parent) { + let elem = document.createElement("div"); + if (className) { + elem.classList.add(className); + } + parent.appendChild(elem); + return elem; + } + function generateGroup(directionVal, floatVal, marginPropSuffix) { + let group = newDivWithClassAndParent("group", document.body); + group.style.direction = directionVal; + const marginPropName = "margin-" + marginPropSuffix; + + for (let v of MARGIN_VALS) { + let container = newDivWithClassAndParent("container", group); + let float = newDivWithClassAndParent("float", container); + float.style.cssFloat = floatVal; + + let bfc = newDivWithClassAndParent("bfc", container); + bfc.style[marginPropName] = v + "px"; + } + } + function go() { + for (let directionVal of DIRECTION_VALS) { + for (let floatVal of HORIZ_SIDES) { + for (let marginPropSuffix of HORIZ_SIDES) { + generateGroup(directionVal, floatVal, marginPropSuffix); + } + } + } + // Note: the "reftest-wait" usage here isn't strictly necessary; it just + // helps ensure that we actually make it through all of the above JS and + // populate this document with the content that we want to render. + // (Specifically: if we e.g. throw a JS exception somewhere early in both + // the testcase and reference case, then the "reftest-wait" class will + // never be removed; and that will cause the test run to be classified + // as a failure, rather than a trivial "pass" with a visual comparison of + // two blank documents.) + document.documentElement.removeAttribute("class"); + } +</script> +<style> +.group { + width: 500px; + border: 1px solid black; +} +.container { + /* This is the container that holds our float+bfc. We make it an + inline-block so that we can test a bunch of these in a row. */ + display: inline-block; + vertical-align: top; + width: 30px; + height: 40px; + /* This border and margin are just cosmetic, to avoid overlap between + * adjacent containers within a row. */ + border: 1px solid gray; + margin-left: 30px; +} + +.float { + /* We'll set the float property elsewhere (to 'right' or 'left'). */ + width: 7px; + height: 8px; + background: fuchsia; + border: 1px solid purple; + /* Each .float's margin-box (which the corresponding .bfc's border-box cannot + * overlap) is 14px wide: + * 7px content + 2px horizontal border + 5px horizontal margin + * Note that we're intentionally using a nonzero 'margin' here, to be sure + * the UA is using the float's margin-box (and not one of its other + * boxes) for this non-overlapping calculation. */ + margin: 1px 3px 1px 2px; +} +.bfc { + /* Each .bfc's border-box width is 2px (from the border) plus whatever we + * resolve 'width:auto' to, which is influenced by the particular choice of + * 'margin' values (and the available space). */ + display: flow-root; + background: aqua; + height: 15px; + border: 1px solid blue; +} +</style> +<body onload="go()"> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001a.tentative.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001a.tentative.html new file mode 100644 index 0000000000..9aa6b69ab7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-001a.tentative.html @@ -0,0 +1,127 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such + that it inflates its border-box to be too large to fit alongside a float, + then it should be pushed below the float</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats"> +<link rel="help" href="https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing"> +<meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth"> +<!-- For a BFC with 'width:auto', negative total inline-axis margins will + effectively set a lower-bound for the used border-box width, to satisfy + the equation in CSS2.1 10.3.3. This test exercises scenarios where this + mechanism "props up" the BFC's border-box enough to make its border-box + collide width the float's margin-box, resulting in it needing to be moved + down below the float. --> +<!-- NOTE: This testcase-variant actually has "width:stretch" (and + vendor-prefixed equivalents) rather than "auto", but I think the effect + should be the same, since the "stretch" and "auto" sizing keywords are + equivalent in most cases. (Though: in practice, WebKit and Gecko are both + more-eager-to-wrap here, with their vendor-prefixed "stretch" values, as + compared to with "auto"... I'm not sure whether or not there's a good + reason for that, so this test is named with ".tentative" for now.) --> +<link rel="match" href="floats-wrap-bfc-with-margin-001-ref.html"> +<script> + const MARGIN_VALS = [-30, -20, -17, + // Values -16 through -1 are non-interoperable and are + // split off to a separate test. + 0, 5, 10, 14 + // Values over 15 are non-interoperable and are + // split off to a separate test. + ]; + const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. + const DIRECTION_VALS = ["ltr", "rtl"]; + + function newDivWithClassAndParent(className, parent) { + let elem = document.createElement("div"); + if (className) { + elem.classList.add(className); + } + parent.appendChild(elem); + return elem; + } + function generateGroup(directionVal, floatVal, marginPropSuffix) { + let group = newDivWithClassAndParent("group", document.body); + group.style.direction = directionVal; + const marginPropName = "margin-" + marginPropSuffix; + + for (let v of MARGIN_VALS) { + let container = newDivWithClassAndParent("container", group); + let float = newDivWithClassAndParent("float", container); + float.style.cssFloat = floatVal; + + let bfc = newDivWithClassAndParent("bfc", container); + bfc.style[marginPropName] = v + "px"; + } + } + function go() { + for (let directionVal of DIRECTION_VALS) { + for (let floatVal of HORIZ_SIDES) { + for (let marginPropSuffix of HORIZ_SIDES) { + generateGroup(directionVal, floatVal, marginPropSuffix); + } + } + } + // Note: the "reftest-wait" usage here isn't strictly necessary; it just + // helps ensure that we actually make it through all of the above JS and + // populate this document with the content that we want to render. + // (Specifically: if we e.g. throw a JS exception somewhere early in both + // the testcase and reference case, then the "reftest-wait" class will + // never be removed; and that will cause the test run to be classified + // as a failure, rather than a trivial "pass" with a visual comparison of + // two blank documents.) + document.documentElement.removeAttribute("class"); + } +</script> +<style> +.group { + width: 500px; + border: 1px solid black; +} +.container { + /* This is the container that holds our float+bfc. We make it an + inline-block so that we can test a bunch of these in a row. */ + display: inline-block; + vertical-align: top; + width: 30px; + height: 40px; + /* This border and margin are just cosmetic, to avoid overlap between + * adjacent containers within a row. */ + border: 1px solid gray; + margin-left: 30px; +} + +.float { + /* We'll set the float property elsewhere (to 'right' or 'left'). */ + width: 7px; + height: 8px; + background: fuchsia; + border: 1px solid purple; + /* Each .float's margin-box (which the corresponding .bfc's border-box cannot + * overlap) is 14px wide: + * 7px content + 2px horizontal border + 5px horizontal margin + * Note that we're intentionally using a nonzero 'margin' here, to be sure + * the UA is using the float's margin-box (and not one of its other + * boxes) for this non-overlapping calculation. */ + margin: 1px 3px 1px 2px; +} +.bfc { + /* Each .bfc's border-box width is 2px (from the border) plus whatever we + * resolve 'width:auto' to, which is influenced by the particular choice of + * 'margin' values (and the available space). */ + display: flow-root; + background: aqua; + height: 15px; + border: 1px solid blue; + + /* https://drafts.csswg.org/css-sizing-4/#stretch-fit-sizing */ + width: -moz-available; + width: -webkit-fill-available; + width: stretch; +} +</style> +<body onload="go()"> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002-ref.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002-ref.html new file mode 100644 index 0000000000..03b7d86acb --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002-ref.html @@ -0,0 +1,96 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Reference Case</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<script> + const MARGIN_VALS = [-16, -15, -10, -1, 0]; + const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. + const DIRECTION_VALS = ["ltr", "rtl"]; + + function newDivWithClassAndParent(className, parent) { + let elem = document.createElement("div"); + if (className) { + elem.classList.add(className); + } + parent.appendChild(elem); + return elem; + } + function generateGroup(directionVal, floatVal, marginPropSuffix) { + let group = newDivWithClassAndParent("group", document.body); + group.style.direction = directionVal; + const marginPropName = "margin-" + marginPropSuffix; + + for (let v of MARGIN_VALS) { + // In this test, none of the MARGIN_VALS are expected to + // make us wrap. + let container = newDivWithClassAndParent("container", group); + if ((floatVal == "right") != (directionVal == "rtl")) { + // In the corresponding piece of the testcase, the float is floated to + // the inline-end side (for the given writing-mode). We use a + // "row-reverse" flex container as our mockup for that here. + container.style.flexDirection = "row-reverse"; + } + + let float = newDivWithClassAndParent("float", container); + float.style.cssFloat = floatVal; + + let bfc = newDivWithClassAndParent("bfc", container); + } + } + function go() { + for (let directionVal of DIRECTION_VALS) { + for (let floatVal of HORIZ_SIDES) { + for (let marginPropSuffix of HORIZ_SIDES) { + generateGroup(directionVal, floatVal, marginPropSuffix); + } + } + } + // Note: the "reftest-wait" usage here isn't strictly necessary; it just + // helps ensure that we actually make it through all of the above JS and + // populate this document with the content that we want to render. + // (Specifically: if we e.g. throw a JS exception somewhere early in both + // the testcase and reference case, then the "reftest-wait" class will + // never be removed; and that will cause the test run to be classified + // as a failure, rather than a trivial "pass" with a visual comparison of + // two blank documents.) + document.documentElement.removeAttribute("class"); + } +</script> +<style> +.group { + width: 500px; + border: 1px solid black; +} +.container { + display: inline-flex; + align-content: start; + vertical-align: top; + width: 30px; + height: 40px; + /* This border and margin are just cosmetic, to avoid overlap between + * adjacent containers within a row. */ + border: 1px solid gray; + margin-left: 30px; +} + +.float { + width: 7px; + height: 8px; + background: fuchsia; + border: 1px solid purple; + margin: 1px 3px 1px 2px; +} +.bfc { + display: flow-root; + background: aqua; + height: 15px; + border: 1px solid blue; + /* We use "flex: 1" (on a flex item) to mock up the fill-available-space + * block-layout behavior in the testcase. */ + flex: 1 auto; +} +</style> +<body onload="go()"> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002.tentative.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002.tentative.html new file mode 100644 index 0000000000..9c10f2cccf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-002.tentative.html @@ -0,0 +1,112 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: If a BFC's inline-axis margin is sufficiently negative such + that it inflates its border-box to be too large to fit alongside a float, + then it should be pushed below the float</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats"> +<meta name="assert" content="The border box of ... an element in the normal flow that establishes a new block formatting context ... must not overlap the margin box of any floats in the same block formatting context as the element itself. If necessary, implementations should clear the said element by placing it below any preceding floats"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth"> +<!-- For a BFC with 'width:auto', negative total inline-axis margins will + effectively set a lower-bound for the used border-box width, to satisfy + the equation in CSS2.1 10.3.3. This test exercises scenarios where this + mechanism "props up" the BFC's border-box, but not enough to make its + border-box collide width the float's margin-box; so it does not need to + be moved down below the float. --> +<!-- NOTE: Eventually this test might want to merge with the -001 test. + The test logic should be exactly the same, except that here we're testing + some values (in MARGIN_VALS) that aren't currently interoperable, per + the WebKit bug at https://bugs.webkit.org/show_bug.cgi?id=239976 --> +<link rel="match" href="floats-wrap-bfc-with-margin-002-ref.html"> +<script> + const MARGIN_VALS = [-16, -15, -10, -1, 0]; + const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. + const DIRECTION_VALS = ["ltr", "rtl"]; + + function newDivWithClassAndParent(className, parent) { + let elem = document.createElement("div"); + if (className) { + elem.classList.add(className); + } + parent.appendChild(elem); + return elem; + } + function generateGroup(directionVal, floatVal, marginPropSuffix) { + let group = newDivWithClassAndParent("group", document.body); + group.style.direction = directionVal; + const marginPropName = "margin-" + marginPropSuffix; + + for (let v of MARGIN_VALS) { + let container = newDivWithClassAndParent("container", group); + let float = newDivWithClassAndParent("float", container); + float.style.cssFloat = floatVal; + + let bfc = newDivWithClassAndParent("bfc", container); + bfc.style[marginPropName] = v + "px"; + } + } + function go() { + for (let directionVal of DIRECTION_VALS) { + for (let floatVal of HORIZ_SIDES) { + for (let marginPropSuffix of HORIZ_SIDES) { + generateGroup(directionVal, floatVal, marginPropSuffix); + } + } + } + // Note: the "reftest-wait" usage here isn't strictly necessary; it just + // helps ensure that we actually make it through all of the above JS and + // populate this document with the content that we want to render. + // (Specifically: if we e.g. throw a JS exception somewhere early in both + // the testcase and reference case, then the "reftest-wait" class will + // never be removed; and that will cause the test run to be classified + // as a failure, rather than a trivial "pass" with a visual comparison of + // two blank documents.) + document.documentElement.removeAttribute("class"); + } +</script> +<style> +.group { + width: 500px; + border: 1px solid black; +} +.container { + /* This is the container that holds our float+bfc. We make it an + inline-block so that we can test a bunch of these in a row. */ + display: inline-block; + vertical-align: top; + width: 30px; + height: 40px; + /* This border and margin are just cosmetic, to avoid overlap between + * adjacent containers within a row. */ + border: 1px solid gray; + margin-left: 30px; +} + +.float { + /* We'll set the float property elsewhere (to 'right' or 'left'). */ + width: 7px; + height: 8px; + background: fuchsia; + border: 1px solid purple; + /* Each .float's margin-box (which the corresponding .bfc's border-box cannot + * overlap) is 14px wide: + * 7px content + 2px horizontal border + 5px horizontal margin + * Note that we're intentionally using a nonzero 'margin' here, to be sure + * the UA is using the float's margin-box (and not one of its other + * boxes) for this non-overlapping calculation. */ + margin: 1px 3px 1px 2px; +} +.bfc { + /* Each .bfc's border-box width is 2px (from the border) plus whatever we + * resolve 'width:auto' to, which is influenced by the particular choice of + * 'margin' values (and the available space). */ + display: flow-root; + background: aqua; + height: 15px; + border: 1px solid blue; +} +</style> +<body onload="go()"> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003-ref.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003-ref.html new file mode 100644 index 0000000000..ac45eb30bf --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003-ref.html @@ -0,0 +1,124 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Reference Case</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<script> + const MARGIN_VALS = [15, 22, 28]; + const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. + const DIRECTION_VALS = ["ltr", "rtl"]; + // This comes from .float width + horizontal border and padding: + const FLOAT_MARGIN_BOX_WIDTH = 14; + // This comes from 30 (container) - 14 (float mbox width) - 2 (bfc border): + const AVAIL_WIDTH_NO_WRAPPING = 14; + + function newDivWithClassAndParent(className, parent) { + let elem = document.createElement("div"); + if (className) { + elem.classList.add(className); + } + parent.appendChild(elem); + return elem; + } + function generateGroup(directionVal, floatVal, marginPropSuffix) { + let group = newDivWithClassAndParent("group", document.body); + group.style.direction = directionVal; + const marginPropName = "margin-" + marginPropSuffix; + + for (let v of MARGIN_VALS) { + const isMarginSideFloatSide = (marginPropSuffix == floatVal); + // initial-char comparison to match [l]eft/[l]tr and [r]ight/[r]tl: + const isMarginSideLineStartSide = (marginPropSuffix[0] == directionVal[0]); + const isFloatSideLineStartSide = (floatVal[0] == directionVal[0]); + + let container = newDivWithClassAndParent("container", group); + if (!isFloatSideLineStartSide) { + // In the corresponding piece of the testcase, the float is floated to + // the inline-end side (for the given writing-mode). We use a + // "row-reverse" flex container as our mockup for that here. + container.style.flexDirection = "row-reverse"; + } + + let float = newDivWithClassAndParent("float", container); + let bfc = newDivWithClassAndParent("bfc", container); + + // Set the actual margin value that we're testing here, based on which + // case this group is in. See comment in testcase for explanation of the + // three cases. + let marginValToUse; + if (isMarginSideFloatSide) { + // Case (A): in the testcase, the margin simply overlaps the float. + // In our mockup here, they don't actually overlap; so we subtract + // the portion that overlaps in the testcase, which is the float's + // margin-box width: + marginValToUse = v - FLOAT_MARGIN_BOX_WIDTH; + } else if (isMarginSideLineStartSide) { + // Case (B): we push the BFC down below the float (which we emulate + // here with a wrapped flexbox), and we use the full specified margin: + container.style.flexWrap = "wrap"; + marginValToUse = v; + } else { + // Case (C): we let the BFC be smooshed against the float, and the + // margin effectively behaves as if it were clamped to the available + // space (so we just clamp it to that value here). + marginValToUse = AVAIL_WIDTH_NO_WRAPPING; + } + bfc.style[marginPropName] = marginValToUse + "px"; + } + } + function go() { + for (let directionVal of DIRECTION_VALS) { + for (let floatVal of HORIZ_SIDES) { + for (let marginPropSuffix of HORIZ_SIDES) { + generateGroup(directionVal, floatVal, marginPropSuffix); + } + } + } + // Note: the "reftest-wait" usage here isn't strictly necessary; it just + // helps ensure that we actually make it through all of the above JS and + // populate this document with the content that we want to render. + // (Specifically: if we e.g. throw a JS exception somewhere early in both + // the testcase and reference case, then the "reftest-wait" class will + // never be removed; and that will cause the test run to be classified + // as a failure, rather than a trivial "pass" with a visual comparison of + // two blank documents.) + document.documentElement.removeAttribute("class"); + } +</script> +<style> +.group { + width: 300px; + border: 1px solid black; +} +.container { + display: inline-flex; + align-content: start; + vertical-align: top; + width: 30px; + height: 40px; + /* This border and margin are just cosmetic, to avoid overlap between + * adjacent containers within a row. */ + border: 1px solid gray; + margin-left: 30px; +} + +.float { + width: 7px; + height: 8px; + background: fuchsia; + border: 1px solid purple; + margin: 1px 3px 1px 2px; +} +.bfc { + display: flow-root; + background: aqua; + height: 15px; + border: 1px solid blue; + /* We use "flex: 1" (on a flex item) to mock up the fill-available-space + * block-layout behavior in the testcase. */ + flex: 1 auto; +} +</style> +<body onload="go()"> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003.tentative.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003.tentative.html new file mode 100644 index 0000000000..f69a11002d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-003.tentative.html @@ -0,0 +1,147 @@ +<!DOCTYPE html> +<html class="reftest-wait"> +<meta charset="utf-8"> +<title>CSS Test: BFCs with large margin, placed next to a float</title> +<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visuren.html#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS21/visudet.html#blockwidth"> +<link rel="match" href="floats-wrap-bfc-with-margin-003-ref.html"> +<!-- This test exercises the layout of an auto-width BFC with a large positive + margin on one side, positioned alongside a float. (Here, "large" = larger + than the space that's left when the float's width and the BFC's border + are subtracted away from the available space.) + + The scenarios here break down into 3 cases, described below as A/B/C with + expected outcomes for each (with expectations based on the observed and + interoperably-implemented behavior of Gecko, WebKit, and Blink, aside + from some known bugs listed further down[1]): + + (A) If the BFC's margin is on the same side as the float, then that margin + can simply overlap the float. In this case, nothing needs to overflow or + wrap, and there may even be some space remaining for the BFC's auto-width + content box (rendered as aqua). + + (B) If the BFC's margin is on the "line-start" side and the float is on + the "line-end" side, then the BFC's margin pushes it into the float's + margin-box-area such that it impermissably "collides". So, the BFC + instead gets moved down below the float to avoid this collision. With + this moved-down placement, there may be space remaining for the BFC's + auto-width content-box -- precisely the same amount of space as in case A. + + (C) If the BFC's margin is on the "line-end" side and the float is on the + "line-start" side, then the BFC is placed adjacent to the float, and its + large margin simply runs off the line-end edge of its containing + block. The BFC's content-box is 0 width (since there's no free space left + over). + + Note: the expected-outcome in case B and C feels somewhat asymmetrical, + and in fact Gecko is the only engine that pushes the BFC down in case B. + But Blink/WebKit's alternative behavior for case B involves the BFC + overlapping the float, which clearly violates the spec, as discussed in + their bugs linked below. So I'm making the test expect Gecko's existing + and non-spec-violating behavior for case B, at this point. (I'm guessing + the asymmetry comes from how overflowing margins are handled at the + line-start vs. line-end edge, which makes some sense.) + + Here's how this test's groups (black-bordered sections) map to these cases: + * This test's 1st, 4th, 5th, and 8th groups are "case A". + * This test's 3rd and 6th groups are in "case B". + * This test's 2nd and 7th groups are in "case C". + + [1] Known bugs referenced above, which cause parts of this test to fail in + WebKit and Blink: + https://bugs.webkit.org/show_bug.cgi?id=240128 + https://bugs.chromium.org/p/chromium/issues/detail?id=1322774 + https://bugs.chromium.org/p/chromium/issues/detail?id=1323004 +--> +<script> + const MARGIN_VALS = [15, 22, 28]; + const HORIZ_SIDES = ["left", "right"]; // Used for 'float:*' and 'margin-*'. + const DIRECTION_VALS = ["ltr", "rtl"]; + + function newDivWithClassAndParent(className, parent) { + let elem = document.createElement("div"); + if (className) { + elem.classList.add(className); + } + parent.appendChild(elem); + return elem; + } + function generateGroup(directionVal, floatVal, marginPropSuffix) { + let group = newDivWithClassAndParent("group", document.body); + group.style.direction = directionVal; + const marginPropName = "margin-" + marginPropSuffix; + + for (let v of MARGIN_VALS) { + let container = newDivWithClassAndParent("container", group); + let float = newDivWithClassAndParent("float", container); + float.style.cssFloat = floatVal; + + let bfc = newDivWithClassAndParent("bfc", container); + bfc.style[marginPropName] = v + "px"; + } + } + function go() { + for (let directionVal of DIRECTION_VALS) { + for (let floatVal of HORIZ_SIDES) { + for (let marginPropSuffix of HORIZ_SIDES) { + generateGroup(directionVal, floatVal, marginPropSuffix); + } + } + } + // Note: the "reftest-wait" usage here isn't strictly necessary; it just + // helps ensure that we actually make it through all of the above JS and + // populate this document with the content that we want to render. + // (Specifically: if we e.g. throw a JS exception somewhere early in both + // the testcase and reference case, then the "reftest-wait" class will + // never be removed; and that will cause the test run to be classified + // as a failure, rather than a trivial "pass" with a visual comparison of + // two blank documents.) + document.documentElement.removeAttribute("class"); + } +</script> +<style> +.group { + width: 300px; + border: 1px solid black; +} +.container { + /* This is the container that holds our float+bfc. We make it an + inline-block so that we can test a bunch of these in a row. */ + display: inline-block; + vertical-align: top; + width: 30px; + height: 40px; + /* This border and margin are just cosmetic, to avoid overlap between + * adjacent containers within a row. */ + border: 1px solid gray; + margin-left: 30px; +} + +.float { + /* We'll set the float property elsewhere (to 'right' or 'left'). */ + width: 7px; + height: 8px; + background: fuchsia; + border: 1px solid purple; + /* Each .float's margin-box (which the corresponding .bfc's border-box cannot + * overlap) is 14px wide: + * 7px content + 2px horizontal border + 5px horizontal margin + * Note that we're intentionally using a nonzero 'margin' here, to be sure + * the UA is using the float's margin-box (and not one of its other + * boxes) for this non-overlapping calculation. */ + margin: 1px 3px 1px 2px; +} +.bfc { + /* Each .bfc's border-box width is 2px (from the border) plus whatever we + * resolve 'width:auto' to, which is influenced by the particular choice of + * 'margin' values (and the available space). */ + display: flow-root; + background: aqua; + height: 15px; + border: 1px solid blue; +} +</style> +<body onload="go()"> +</body> +</html> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-004.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-004.html new file mode 100644 index 0000000000..cab9e00087 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-004.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1323004"> +<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; height:100px; background:red;"> + <div style="display:flow-root; background:green;"> + <div style="float:right; width:50px; height:40px;"></div> + <div style="display:flow-root; height:60px; margin-left:51px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-005.html b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-005.html new file mode 100644 index 0000000000..5c0bc4f931 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-bfc-with-margin-005.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1323004"> +<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; height:100px; background:red;"> + <div style="display:flow-root; background:green; direction:rtl;"> + <div style="float:left; width:50px; height:40px;"></div> + <div style="display:flow-root; height:60px; margin-right:51px;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001l-notref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001l-notref.xht new file mode 100644 index 0000000000..0953df73d2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001l-notref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; text-align: left; } +div { float: left; clear: left; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 50px;"></div> +<div style="width: 50px; height: 100px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001l-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001l-ref.xht new file mode 100644 index 0000000000..85fd23f870 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001l-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; text-align: left; } +div { float: left; clear: left; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 50px;"></div> +<div style="width: 100px; height: 100px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001r-notref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001r-notref.xht new file mode 100644 index 0000000000..e9aa0802b2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001r-notref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; text-align: right; } +div { float: right; clear: right; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 50px;"></div> +<div style="width: 50px; height: 100px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001r-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001r-ref.xht new file mode 100644 index 0000000000..915e532788 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-001r-ref.xht @@ -0,0 +1,22 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> +<title>CSS Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; text-align: right; } +div { float: right; clear: right; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 50px;"></div> +<div style="width: 100px; height: 100px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-002l-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-002l-ref.xht new file mode 100644 index 0000000000..1b003f4399 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-002l-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 Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: left; width: 150px; height: 25px;"></div> +<span></span> +<div style="height: 100px"></div> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-002r-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-002r-ref.xht new file mode 100644 index 0000000000..847ff9a096 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-002r-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 Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: right; width: 150px; height: 25px;"></div> +<span></span> +<div style="height: 100px"></div> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-003l-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-003l-ref.xht new file mode 100644 index 0000000000..028a65fb67 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-003l-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 Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 100px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: left; width: 250px; height: 25px;"></div> +<span></span> +<span style="margin-top: 25px; margin-right: 250px"></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-003r-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-003r-ref.xht new file mode 100644 index 0000000000..4155c67aee --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-003r-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 Test: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 100px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: right; width: 250px; height: 25px;"></div> +<span></span> +<span style="margin-top: 25px; margin-left: 250px"></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-001l.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-001l.xht new file mode 100644 index 0000000000..17bec33eb1 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-001l.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-001l-ref.xht"/> +<link rel="mismatch" href="floats-wrap-top-below-001l-notref.xht"/> +<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +div { float: left; clear: left; } +span { display: block; overflow: hidden; width: 200px; height: 50px; background: aqua; margin-right: auto; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 75px;"></div> +<div style="width: 100px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-001r.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-001r.xht new file mode 100644 index 0000000000..65e6ca1b42 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-001r.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-001r-ref.xht"/> +<link rel="mismatch" href="floats-wrap-top-below-001r-notref.xht"/> +<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +div { float: right; clear: right; } +span { display: block; overflow: hidden; width: 200px; height: 50px; background: aqua; margin-left: auto; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 75px;"></div> +<div style="width: 100px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-002l.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-002l.xht new file mode 100644 index 0000000000..ab439ae3f6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-002l.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-002l-ref.xht"/> +<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: block; overflow: hidden; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: left; width: 150px; height: 75px;"></div> +<div style="float: right; width: 300px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-002r.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-002r.xht new file mode 100644 index 0000000000..123e621cfe --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-002r.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-002r-ref.xht"/> +<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: block; overflow: hidden; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: right; width: 150px; height: 75px;"></div> +<div style="float: left; width: 300px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-003l.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-003l.xht new file mode 100644 index 0000000000..7386535c80 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-003l.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-003l-ref.xht"/> +<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: block; overflow: hidden; width: 100px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: left; width: 250px; height: 75px;"></div> +<div style="float: right; width: 250px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-003r.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-003r.xht new file mode 100644 index 0000000000..1c1a517c37 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-bfc-003r.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-003r-ref.xht"/> +<meta name="assert" content="The border box of a table, a block-level replaced element, or an element in the normal flow that establishes a new block formatting context (such as an element with 'overflow' other than 'visible') must not overlap any floats in the same block formatting context as the element itself." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: block; overflow: hidden; width: 100px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: right; width: 250px; height: 75px;"></div> +<div style="float: left; width: 250px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-001l.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-001l.xht new file mode 100644 index 0000000000..bfa3f95c7d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-001l.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-001l-ref.xht"/> +<link rel="mismatch" href="floats-wrap-top-below-001l-notref.xht"/> +<meta name="assert" content="However, line boxes created next to the float are shortened to make room for the margin box of the float." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; text-align: left; } +div { float: left; clear: left; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 75px;"></div> +<div style="width: 100px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-001r.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-001r.xht new file mode 100644 index 0000000000..c0ee2cd207 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-001r.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-001r-ref.xht"/> +<link rel="mismatch" href="floats-wrap-top-below-001r-notref.xht"/> +<meta name="assert" content="However, line boxes created next to the float are shortened to make room for the margin box of the float." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; text-align: right; } +div { float: right; clear: right; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="width: 50px; height: 75px;"></div> +<div style="width: 100px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-002l.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-002l.xht new file mode 100644 index 0000000000..68a51e25b6 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-002l.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-002l-ref.xht"/> +<meta name="assert" content="However, line boxes created next to the float are shortened to make room for the margin box of the float." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: left; width: 150px; height: 75px;"></div> +<div style="float: right; width: 300px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-002r.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-002r.xht new file mode 100644 index 0000000000..4dd653af74 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-002r.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-002r-ref.xht"/> +<meta name="assert" content="However, line boxes created next to the float are shortened to make room for the margin box of the float." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 200px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: right; width: 150px; height: 75px;"></div> +<div style="float: left; width: 300px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-003l.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-003l.xht new file mode 100644 index 0000000000..98d9b417ad --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-003l.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-003l-ref.xht"/> +<meta name="assert" content="However, line boxes created next to the float are shortened to make room for the margin box of the float." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 100px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: left; width: 250px; height: 75px;"></div> +<div style="float: right; width: 250px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-003r.xht b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-003r.xht new file mode 100644 index 0000000000..1fb2633c72 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-wrap-top-below-inline-003r.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: Test for wrapping around floats whose top is below the top of what must wrap around them</title> +<link rel="author" title="L. David Baron" href="https://dbaron.org/" /> +<link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="match" href="floats-wrap-top-below-003r-ref.xht"/> +<meta name="assert" content="However, line boxes created next to the float are shortened to make room for the margin box of the float." /> +<style type="text/css"> + +body { width: 400px; border: medium solid; } +span { display: inline-block; vertical-align: top; width: 100px; height: 50px; background: aqua; } + +</style> +</head> +<body> + +<div style="float: right; width: 250px; height: 75px;"></div> +<div style="float: left; width: 250px; height: 75px;"></div> +<span></span> +<span></span> + + + +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-001-ref.xht b/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-001-ref.xht new file mode 100644 index 0000000000..68139cdbe2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-001-ref.xht @@ -0,0 +1,10 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>Test for wrapping around zero-height floats</title> + +</head><body><div style="width: 500px; height: 500px; float: left; font-size: 12px;"> + + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: blue; margin-left: 10px;"></span> + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: purple; margin-left: 100px;"></span> + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: fuchsia"></span> + +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-001.xht b/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-001.xht new file mode 100644 index 0000000000..c748a32ad2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-001.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: wrapping around zero-height floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-zero-height-wrap-001-ref.xht"/> + <meta name="assert" content="wrapping around zero-height floats" /> + +</head><body><div style="width: 500px; height: 500px; float: left; font-size: 12px;"> + + <div style="float: left; width: 10px; height: 30px"></div> + <div style="float: left; clear: left; width: 100px; height: 1px"></div> + + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: blue;"></span> + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: purple;"></span> + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: fuchsia"></span> + +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-002.xht b/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-002.xht new file mode 100644 index 0000000000..5a24f25272 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/floats-zero-height-wrap-002.xht @@ -0,0 +1,18 @@ +<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS Test: wrapping around zero-height floats</title> + <link rel="author" title="L. David Baron" href="https://dbaron.org/" /> + <link rel="author" title="Mozilla Corporation" href="http://mozilla.com/" /> + <link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> + <link rel="match" href="floats-zero-height-wrap-001-ref.xht"/> + <meta name="assert" content="wrapping around zero-height floats" /> + +</head><body><div style="width: 500px; height: 500px; float: left; font-size: 12px;"> + + <div style="float: left; width: 10px; height: 30px"></div> + <div style="float: left; clear: left; width: 100px; height: 0"></div> + + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: blue;"></span> + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: purple;"></span> + <span style="display:inline-block; vertical-align: bottom; height: 20px; width: 300px; background: fuchsia"></span> + +</div> +</body></html>
\ No newline at end of file diff --git a/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-001.html b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-001.html new file mode 100644 index 0000000000..e554918e75 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-001.html @@ -0,0 +1,21 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/977856"> +<link rel="help" href="http://www.w3.org/TR/CSS21/visuren.html#floats" /> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<div style="width: 270px"> + <img width="260" height="68"> + <div style="float: left"> + <a id="target" href="#">Link</a> + </div> + <br style="clear: both"> +</div> +<script> +test(() => { + let target = document.getElementById('target'); + let bounds = target.getBoundingClientRect(); + let element = document.elementFromPoint(bounds.x + 1, bounds.y + 1); + assert_equals(element, target); +}); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-002.html b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-002.html new file mode 100644 index 0000000000..ea93e95d8f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-002.html @@ -0,0 +1,14 @@ +<!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#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html"> +<div id="f1" style="float:left; width:100px; height:100px;"></div> +<div id="f2" style="float:left; width:100px; height:100px; margin-top:50px; margin-left:-50px;"></div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var elm = document.elementFromPoint(70, 70); + assert_equals(elm.id, "f2"); + }, "Hit test float"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-003.html b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-003.html new file mode 100644 index 0000000000..8a404b592f --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-003.html @@ -0,0 +1,15 @@ +<!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#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html"> +<div id="target" style="width:100px; height:100px;"> + <div id="error" style="float:left; position:relative; z-index:-1; width:100px; height:100px;"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var elm = document.elementFromPoint(50, 50); + assert_equals(elm.id, "target"); + }, "Miss float below something else"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-004.html b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-004.html new file mode 100644 index 0000000000..1bed4c464d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-004.html @@ -0,0 +1,16 @@ +<!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#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/zindex.html"> +<div id="error" style="overflow:hidden; width:100px; height:100px;"></div> +<div style="margin-top:-100px; overflow:hidden; width:100px; height:100px;"> + <div id="target" style="float:left; width:100px; height:100px;"></div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var elm = document.elementFromPoint(50, 50); + assert_equals(elm.id, "target"); + }, "Miss float below something else"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-005.html b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-005.html new file mode 100644 index 0000000000..2be78115f3 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/hit-test-floats-005.html @@ -0,0 +1,17 @@ +<!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#floats"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visufx.html#propdef-overflow"> +<div id="target" style="height:200px;"> + <div style="overflow:hidden; width:100px; height:100px;"> + <div id="error" style="float:left; width:100px; height:200px;"></div> + </div> +</div> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script> + test(()=> { + var elm = document.elementFromPoint(50, 150); + assert_equals(elm.id, "target"); + }, "Miss clipped float"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/intrinsic-size-float-and-line.html b/testing/web-platform/tests/css/CSS2/floats/intrinsic-size-float-and-line.html new file mode 100644 index 0000000000..0603124549 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/intrinsic-size-float-and-line.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<title>Put float next to line in shrink-to-fit container</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<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="float:left; min-width:150px; background:red;"> + <div style="float:right; width:100px; height:200px; background:green;"></div> + <div style="vertical-align:top; display:inline-block; width:100px; height:200px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/line-pushed-by-floats-crash.html b/testing/web-platform/tests/css/CSS2/floats/line-pushed-by-floats-crash.html new file mode 100644 index 0000000000..ace28cc71c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/line-pushed-by-floats-crash.html @@ -0,0 +1,10 @@ +<!DOCTYPE html> +<link rel="help" href="https://crbug.com/1064987"> +<body style="width: 100px;"> + <div style="float: right; width: 10px;"></div> + <span> + <div style="display: inline-block; width: 1000px; height: 10px;"></div> + </span> + <span style="position: absolute;"></span> + <span style="float: left; height: 10px; column-gap: 65536px; column-count: 65536;"></span> +</body> diff --git a/testing/web-platform/tests/css/CSS2/floats/list-item-taller-than-opportunity-001.html b/testing/web-platform/tests/css/CSS2/floats/list-item-taller-than-opportunity-001.html new file mode 100644 index 0000000000..ae8783ce31 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/list-item-taller-than-opportunity-001.html @@ -0,0 +1,17 @@ +<!DOCTYPE html> +<title>List item taller than the first opportunity should not crash</title> +<link rel="author" title="Koji Ishii" href="mailto:kojii@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"> +<link rel="help" href="http://crbug.com/967997"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <div style="float: left; width: 5px; height: 5px;"></div> + <div style="clear: left; float: left; width: 10px; height: 5px;"></div> + <ul> + <li></li> + </ul> +<script> +test(() => {}, "Layout should not crash"); +</script> +</body> diff --git a/testing/web-platform/tests/css/CSS2/floats/negative-margin-float-positioning.html b/testing/web-platform/tests/css/CSS2/floats/negative-margin-float-positioning.html new file mode 100644 index 0000000000..8b4aef22f7 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/negative-margin-float-positioning.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<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;"> + <div style="float: left; width: 50px; height: 100px; margin-left: 50px; margin-right: 50px;background: green;"></div> + <div style="float: left; width: 50px; height: 100px; margin-left: -150px; background: green;"></div> +</div> + diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-adjoining-float-2.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-adjoining-float-2.html new file mode 100644 index 0000000000..2d27a28a05 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-adjoining-float-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>A new formatting context that fits beside an adjoining float, and thus pulls down the float with its 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#bfc-next-to-float" title="9.5 Floats"> +<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"> +<meta name="assert" content="The float is adjoining with the box that establishes a new formatting context when it fits beside it, and will therefore be affected by its margin"> +<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="overflow:hidden; width:200px; height:200px; background:red;"> + <div style="margin-top:190px;"> + <div> + <div style="float:left; width:100px; height:200px; background:green;"></div> + </div> + <div style="margin-top:-190px; overflow:hidden; width:100px; height:200px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-adjoining-float.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-adjoining-float.html new file mode 100644 index 0000000000..91adbfce2d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-adjoining-float.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>A new formatting context that fits beside an adjoining float, and thus pulls down the float with its 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#bfc-next-to-float" title="9.5 Floats"> +<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"> +<meta name="assert" content="The float is adjoining with the box that establishes a new formatting context when it fits beside it, and will therefore be affected by its margin"> +<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="overflow:hidden; width:200px; background:green;"> + <div style="width:300px; margin-top:50px; background:red;"> + <div> + <div style="float:left; width:200px; height:10px; background:green;"></div> + </div> + <div style="margin-top:190px; overflow:hidden; width:100px; height:10px; background:red;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin-rtl.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin-rtl.html new file mode 100644 index 0000000000..5a564f7831 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin-rtl.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats"> +<meta name="assert" content="The new formatting context's margin-right does not push it down to the next area."> +<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; height: 100px; background: red; direction: rtl;"> + <div style="float: left; width: 50px; height: 100px; background: green;"></div> + <div style="overflow: hidden; height: 100px; margin-left: -20px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin.html new file mode 100644 index 0000000000..ead8e548be --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-beside-float-with-margin.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats"> +<meta name="assert" content="The new formatting context's margin-right does not push it down to the next area."> +<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; height: 100px; background: red;"> + <div style="float:left; width:50px; height:100px; background:green;"></div> + <div style="overflow: hidden; margin-right: 1px; width:50px; height:100px; background:green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-relayout.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-relayout.html new file mode 100644 index 0000000000..97d8b9a2ff --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-relayout.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>New formatting context relayout</title> +<link rel="author" title="Ian Kilpatrick" href="ikilpatrick@chromium.org"> +<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/2452"> +<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; line-height: 0;"> + <div style="float: right; width: 50px; height: 50px; background: green;"></div> + <div style="float: right; width: 75px; height: 50px; background: green;"></div> + <div style="overflow: hidden;"> + <div style="display: inline-block; width: 25px; height: 75px; background: green;"></div> + <div style="display: inline-block; width: 25px; height: 25px; background: green;"></div> + </div> + <div style="position: relative; width: 25px; height: 50px; background: green; top: -100px; left: 25px;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float-2.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float-2.html new file mode 100644 index 0000000000..fd0deab18e --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float-2.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>A new formatting context that doesn't fit beside a float make the float non-adjoining</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats"> +<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"> +<meta name="assert" content="Although the 'clear' property isn't specified in this test, a new formatting context that doesn't fit below a float that would otherwise be adjoining will need to separate its margin from the float, so that it doesn't affect the float. This is very similar to clearance."> +<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="overflow:hidden; width:200px; height:200px; background:red;"> + <div style="margin-top:-50px;"> + <div> + <div style="float:left; width:200px; height:150px; background:green;"></div> + </div> + <div style="margin-top:12345px; overflow:hidden; width:200px; height:100px; background:green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float-3.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float-3.html new file mode 100644 index 0000000000..4c37be4ba2 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float-3.html @@ -0,0 +1,14 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats"> +<meta name="assert" content="Although the 'clear' property isn't specified in this test, a new formatting context that doesn't fit below a float that would otherwise be adjoining will need to separate its margin from the float, so that it doesn't affect the float. This is very similar to clearance."> +<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="display: flow-root; width: 100px; background: red; position: relative;"> + <div> + <div style="float: right; width: 50px; height: 30px; background: green;"></div> + <div> + <div style="overflow: hidden; width: 100px; height: 70px; margin-top: 100px; background: green;"></div> + </div> + <div style="position: absolute; width: 50px; height: 30px; top: 0; left: 0; background: green;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float.html b/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float.html new file mode 100644 index 0000000000..89ee7516ec --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/new-fc-separates-from-float.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>A new formatting context that doesn't fit beside a float make the float non-adjoining</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#bfc-next-to-float" title="9.5 Floats"> +<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"> +<meta name="assert" content="Although the 'clear' property isn't specified in this test, a new formatting context that doesn't fit below a float that would otherwise be adjoining will need to separate its margin from the float, so that it doesn't affect the float. This is very similar to clearance."> +<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="overflow:hidden; width:200px; background:red;"> + <div> + <div> + <div style="float:left; width:200px; height:200px; background:green;"></div> + </div> + <div style="margin-top:200px; overflow:hidden; width:200px; height:1px; background:white;"></div> + </div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/overflow-scroll-float-paint-order-ref.html b/testing/web-platform/tests/css/CSS2/floats/overflow-scroll-float-paint-order-ref.html new file mode 100644 index 0000000000..0fb53d4ecd --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/overflow-scroll-float-paint-order-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 100px; background: green"> + <div style="width: 50px; height: 50px; background: magenta"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/overflow-scroll-float-paint-order.html b/testing/web-platform/tests/css/CSS2/floats/overflow-scroll-float-paint-order.html new file mode 100644 index 0000000000..79ab770eec --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/overflow-scroll-float-paint-order.html @@ -0,0 +1,49 @@ +<!DOCTYPE html> +<title>Overflow:scroll floating paint order</title> +<link rel="help" href="https://www.w3.org/TR/CSS2/zindex.html"> +<link rel="match" href="overflow-scroll-float-paint-order-ref.html"> +<style> + #scroller { + float: left; + background: red; + padding: 20px; + box-sizing: border-box; + width: 100px; + height: 100px; + overflow: scroll; + } + #negative-margin { + float: left; + width: 100px; + height: 100px; + background: green; + margin-left: -100px; + } + #foreground1 { + display: inline-block; + width: 50px; + height: 50px; + background: blue; + } + #foreground2 { + display: inline-block; + width: 50px; + height: 50px; + background: magenta; + } +</style> +<!-- The paint order should be: + scroller background (invisible) + scroller child background (invisible) + foreground1 (invisible) + negative-margin background (visible) + foreground2 (visible) +--> +<div id="scroller"> + <div style="height: 200px; background: yellow"> + <div id="foreground1"></div> + </div> +</div> +<div id="negative-margin"> + <div id="foreground2"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/overhanging-float-paint-order-ref.html b/testing/web-platform/tests/css/CSS2/floats/overhanging-float-paint-order-ref.html new file mode 100644 index 0000000000..608e009ff5 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/overhanging-float-paint-order-ref.html @@ -0,0 +1,4 @@ +<!DOCTYPE html> +<div style="width: 100px; height: 80px; background: green"></div> +<div style="width: 100px; height: 20px; background: blue"></div> + diff --git a/testing/web-platform/tests/css/CSS2/floats/overhanging-float-paint-order.html b/testing/web-platform/tests/css/CSS2/floats/overhanging-float-paint-order.html new file mode 100644 index 0000000000..6075d0a2c9 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/overhanging-float-paint-order.html @@ -0,0 +1,43 @@ +<!DOCTYPE html> +<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position"> +<link rel="help" href="https://drafts.csswg.org/css2/zindex.html"> +<link rel="match" href="overhanging-float-paint-order-ref.html"> +<style> +#first-container { + width: 100px; + height: 60px; +} + +#red-first-float { + width: 100px; + height: 60px; + background-color: red; + float: left; +} + +#container { + width: 100px; + height: 80px; +} + +#blue-second-float-overhanging { + width: 100px; + height: 60px; + background-color: blue; + float: left; + margin-top: -20px; +} + +#green-third-float { + width: 100px; + height: 80px; + background-color: green; + float: left; + margin-top: -100px; +} +</style> +<div id="red-first-float"></div> +<div id="container"> + <div id="blue-second-float-overhanging"></div> + <div id="green-third-float"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/remove-block-between-inline-and-float.html b/testing/web-platform/tests/css/CSS2/floats/remove-block-between-inline-and-float.html new file mode 100644 index 0000000000..21235d550d --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/remove-block-between-inline-and-float.html @@ -0,0 +1,22 @@ +<!DOCTYPE html> +<title>Removing block between inline and float should put the two on the same line</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#floats" title="9.5 Floats"> +<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> +<!-- This is a block with block children, so inlines need to be wrapped inside + anonymous blocks. A float and out-of-flow positioned box is neutral here, + in that it can either live among block children OR among inline + children. If it is (or becomes) sibling of an inline child, though, it + should be wrapped inside the same anonymous block as the inline, or layout + will be wrong. --> +<div style="width:200px; background:red;"> + <div style="height:50px; background:green;"></div> + <div style="display:inline-block; vertical-align:top; width:100px; height:150px; background:green;"></div> + <div id="removeMe" style="height:100px;"></div> + <div style="float:left; width:100px; height:150px; background:green;"></div> +</div> +<script> + document.body.offsetTop; // Trigger layout. + document.getElementById("removeMe").style.display = "none"; +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/remove-float-in-first-line.html b/testing/web-platform/tests/css/CSS2/floats/remove-float-in-first-line.html new file mode 100644 index 0000000000..56f1c87c9c --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/remove-float-in-first-line.html @@ -0,0 +1,30 @@ +<!DOCTYPE html> +<title>Removing floats in ::first-line should not crash</title> +<link rel="author" href="kojii@chromium.org"> +<link rel="help" href="https://crbug.com/1100900"> +<meta name="assert" content="Removing floats in ::first-line should not crash"> +<style> +#container { + display: flow-root; +} +#container::first-line { + background: orange; +} +#float { + float: left; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <div id="container">text<span id="float"></span></div> +</body> +<script> +test(() => { + document.body.offsetTop; + let float = document.getElementById('float'); + float.remove(); + let container = document.getElementById('container'); + container.style.color = 'blue'; +}, 'No crash or DCHECK failure'); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/remove-float-then-abspos-in-inline.html b/testing/web-platform/tests/css/CSS2/floats/remove-float-then-abspos-in-inline.html new file mode 100644 index 0000000000..5cf8084c63 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/remove-float-then-abspos-in-inline.html @@ -0,0 +1,31 @@ +<!DOCTYPE html> +<title>Removing floats changed to positioned object should not crash</title> +<link rel="author" href="kojii@chromium.org"> +<link rel="help" href="https://crbug.com/1101277"> +<meta name="assert" content="Removing floats changed to positioned object should not crash"> +<style> +.float { + float: left; +} +.abs { + position: absolute; +} +</style> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<body> + <div id="container">text<span id="target" class="float"></span></div> +</body> +<script> +test(() => { + document.body.offsetTop; + let target = document.getElementById('target'); + + // Change `#target` from floating object to positioned object. + target.className = 'abs'; + document.body.offsetTop; + + // and remove it. + target.remove(); +}, 'No crash or DCHECK failure'); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/zero-available-space-float-positioning.html b/testing/web-platform/tests/css/CSS2/floats/zero-available-space-float-positioning.html new file mode 100644 index 0000000000..62ace6daa0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-available-space-float-positioning.html @@ -0,0 +1,9 @@ +<!DOCTYPE html> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<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: 0px;"> + <div style="float: left; width: 100px; height: 50px; background: green;"></div> + <div style="float: left; width: 100px; height: 50px; background: green;"></div> +</div> + diff --git a/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-001.html b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-001.html new file mode 100644 index 0000000000..a7796011b0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-001.html @@ -0,0 +1,15 @@ +<!DOCTYPE html> +<title>A zero-width new formatting context should fit in a zero-width layout opportunity between floats</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="container" style="position:relative; width:200px;"> + <div style="float:left; width:100px; height:200px;"></div> + <div style="float:right; width:100px; height:200px;"></div> + <div data-offset-x="100" data-offset-y="0" style="overflow:hidden; width:0; height:200px;"></div> +</div> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-002.html b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-002.html new file mode 100644 index 0000000000..f8eb591998 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-002.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>A zero-width new formatting context should fit in a zero-width layout opportunity between floats, above a 100% wide float</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="container" style="position:relative; width:200px;"> + <div style="float:left; width:100px; height:200px;"></div> + <div style="float:right; width:100px; height:200px;"></div> + <div style="float:right; width:100%; height:10px;"></div> + <div data-offset-x="100" data-offset-y="0" style="overflow:hidden; width:0; height:200px;"></div> +</div> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-003.html b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-003.html new file mode 100644 index 0000000000..3ddbb871c0 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-003.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Zero-width new formatting context with clearance</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="container" style="position:relative; width:200px;"> + <div style="float:left; width:100px; height:100px;"></div> + <div style="float:right; width:100px; height:100px;"></div> + <div style="float:right; width:100%; height:100px;"></div> + <div data-offset-x="0" data-offset-y="100" style="overflow:hidden; clear:left; width:0;"></div> +</div> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-004.html b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-004.html new file mode 100644 index 0000000000..4ac426fe6b --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-space-between-floats-004.html @@ -0,0 +1,16 @@ +<!DOCTYPE html> +<title>Zero-width new formatting context with clearance</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#float-position" title="9.5.1 Positioning the float: the 'float' property"> +<script src="/resources/testharness.js"></script> +<script src="/resources/testharnessreport.js"></script> +<script src="/resources/check-layout-th.js"></script> +<div id="container" style="position:relative; width:200px;"> + <div style="float:left; width:100px; height:100px;"></div> + <div style="float:right; width:100px; height:100px;"></div> + <div style="float:right; width:100%; height:100px;"></div> + <div data-offset-x="0" data-offset-y="200" style="overflow:hidden; clear:right; width:0;"></div> +</div> +<script> + checkLayout("#container"); +</script> diff --git a/testing/web-platform/tests/css/CSS2/floats/zero-width-floats-positioning.tentative.html b/testing/web-platform/tests/css/CSS2/floats/zero-width-floats-positioning.tentative.html new file mode 100644 index 0000000000..18f8f6e204 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-width-floats-positioning.tentative.html @@ -0,0 +1,11 @@ +<!DOCTYPE html> +<title>Zero width floats, and positioning with negative margins</title> +<link rel="author" title="Ian Kilpatrick" href="ikilpatrick@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<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: 125px;"> + <div style="float: left; width: 0px; height: 50px;"></div> + <div style="float: right; clear: left; width: 25px; height: 50px;"></div> + <div style="overflow: hidden; margin-left: -50px; height: 100px; background: green;"></div> +</div> diff --git a/testing/web-platform/tests/css/CSS2/floats/zero-width-floats.html b/testing/web-platform/tests/css/CSS2/floats/zero-width-floats.html new file mode 100644 index 0000000000..affecab513 --- /dev/null +++ b/testing/web-platform/tests/css/CSS2/floats/zero-width-floats.html @@ -0,0 +1,12 @@ +<!DOCTYPE html> +<title>Zero width floats</title> +<link rel="author" title="Morten Stenshorne" href="mstensho@chromium.org"> +<link rel="help" href="https://www.w3.org/TR/CSS22/visudet.html#float-width" title="10.3.5 Floating, non-replaced elements"> +<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="margin-left:50px; width:100px;"> + <div style="float:left; width:0; height:50px;"></div> + <div style="float:right; clear:left; width:0; height:150px;"></div> + <div style="overflow:hidden; margin:0 -50px; height:100px; background:green;"></div> +</div> +<div style="position:relative; top:-100px; overflow:hidden; clear:both; width:200px; height:100px; background:green;"></div> |