0ct0pu5/ladybird
1
0
Fork 0
mirror of https://github.com/LadybirdBrowser/ladybird.git synced 2024-12-11 17:00:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 7

Tests/LibWeb: Import CSS floats tests from WPT

Browse source
This commit is contained in:
Aliaksandr Kalenik 2024-11-10 19:04:18 +01:00 committed by Andreas Kling
parent 7460f0c6e2
commit bd50a31be6
Notes: github-actions[bot] 2024-11-11 12:32:30 +00:00 
Author: https://github.com/kalenikaliaksandr
Commit: https://github.com/LadybirdBrowser/ladybird/commit/bd50a31be68
Pull-request: https://github.com/LadybirdBrowser/ladybird/pull/2273
183 changed files with 5216 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/float-no-content-beside-001-ref.html Normal file
View file

@ -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>

24
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/float-nowrap-1.html Normal file
View file

@ -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>

29
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/float-nowrap-3-ref.html Normal file
View file

@ -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>

5
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/float-nowrap-5-ref.html Normal file
View file

@ -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

11
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/float-root-ref.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPe html>
<style>
body {
float: right;
margin-top: 0;
}
</style>
<body>
<p>foo</p>
</body>

34
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/float-table-align-left-quirk-ref.html Normal file
View file

@ -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 &lt;table align=left&gt; 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>

32
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/float-with-absolutely-positioned-child-with-static-inset-ref.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html>
<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position">
<meta name="assert" content="An absolutely positioned child of a float with a static inset should be positioned the same as a non-positioned child of that float." />
<style>
#float {
float: right;
width: 250px;
}
#abs-child {
background: green;
width: 100px;
height: 100px;
}
#abs-grandchild {
background: darkgreen;
width: 50px;
height: 50px;
}
</style>
<body>
<div id="float">
<div id="abs-child">
<div id="abs-grandchild"></div>
</div>
</div>
</body>
</html>

17
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-in-table-caption-001-ref.html Normal file
View file

@ -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

23
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-line-wrap-shifted-001-ref.html Normal file
View file

@ -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>

26
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-placement-005-ref.html Normal file
View file

@ -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>

21
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-placement-vertical-001-ref.xht Normal file
View file

@ -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>

12
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-placement-vertical-003-ref.xht Normal file
View file

@ -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>

11
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-placement-vertical-004-ref.xht Normal file
View file

@ -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>

6
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-rule3-outside-left-001-ref.xht Normal file
View file

@ -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>

5
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-rule3-outside-left-002-ref.xht Normal file
View file

@ -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>

5
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-rule3-outside-right-001-ref.xht Normal file
View file

@ -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>

5
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-rule3-outside-right-002-ref.xht Normal file
View file

@ -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>

5
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-rule7-outside-left-001-ref.xht Normal file
View file

@ -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>

5
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-rule7-outside-right-001-ref.xht Normal file
View file

@ -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>

19
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-left-overflow-ref.xht Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-left-table-ref.xht Normal file
View file

@ -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>

19
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-right-overflow-ref.xht Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-right-table-ref.xht Normal file
View file

@ -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>

19
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-002-left-ref.xht Normal file
View file

@ -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>

19
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-002-right-ref.xht Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-003-left-overflow-ref.xht Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-003-left-table-ref.xht Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-003-right-overflow-ref.xht Normal file
View file

@ -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>

17
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-003-right-table-ref.xht Normal file
View file

@ -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>

60
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-004-ref.xht Normal file
View file

@ -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>

37
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-005-ref.xht Normal file
View file

@ -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>

177
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-006-ref.xht Normal file
View file

@ -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>

110
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-007-ref.xht Normal file
View file

@ -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>

20
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-outside-001-ref.xht Normal file
View file

@ -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>

121
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-with-margin-001-ref.html Normal file
View file

@ -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>

96
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-with-margin-002-ref.html Normal file
View file

@ -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>

124
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-with-margin-003-ref.html Normal file
View file

@ -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>

43
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-bfc-with-margin-010-ref.html Normal file
View file

@ -0,0 +1,43 @@
<!DOCTYPE html>
<title>CSS Test Reference</title>
<link rel="author" title="Oriol Brufau" href="obrufau@igalia.com">
<style>
body {
position: relative;
}
.wrapper {
position: absolute;
width: 100px;
border: 5px solid;
top: 75px;
}
.float {
position: absolute;
width: 50px;
height: 50px;
left: 0;
top: 0;
background: cyan;
}
.bfc {
position: absolute;
height: 50px;
background: green;
}
</style>
<div class="wrapper" style="left: 10px; height: 50px">
<div class="float"></div>
<div class="bfc" style="width: 50px; left: 0; top: -75px"></div>
</div>
<div class="wrapper" style="left: 140px; height: 50px">
<div class="float"></div>
<div class="bfc" style="width: 75px; left: 0; top: -75px"></div>
</div>
<div class="wrapper" style="left: 270px; height: 50px">
<div class="float"></div>
<div class="bfc" style="width: 50px; left: 50px; top: -25px"></div>
</div>
<div class="wrapper" style="left: 400px; height: 100px">
<div class="float"></div>
<div class="bfc" style="width: 75px; left: 0px; top: 50px"></div>
</div>

22
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-top-below-001l-ref.xht Normal file
View file

@ -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>

22
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-top-below-001r-ref.xht Normal file
View file

@ -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>

21
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-top-below-002l-ref.xht Normal file
View file

@ -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>

21
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-top-below-002r-ref.xht Normal file
View file

@ -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>

20
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-top-below-003l-ref.xht Normal file
View file

@ -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>

20
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-wrap-top-below-003r-ref.xht Normal file
View file

@ -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>

10
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/floats-zero-height-wrap-001-ref.xht Normal file
View file

@ -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>

8
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/negative-block-margin-pushing-float-out-of-block-formatting-context-ref.html Normal file
View file

@ -0,0 +1,8 @@
<!DOCTYPE html>
<link rel="author" title="Martin Robinson" href="mailto:mrobinson@igalia.com" />
<meta name="assert" content="When a floating box has a negative margin negative enough that it pushes the float past the top of the block formatting context, it should render properly."/>
<body>
<div style="width: 50px; height: 50px; background: green;"></div>
</body>

4
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/overflow-scroll-float-paint-order-ref.html Normal file
View file

@ -0,0 +1,4 @@
<!DOCTYPE html>
<div style="width: 100px; height: 100px; background: green">
<div style="width: 50px; height: 50px; background: magenta"></div>
</div>

3
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/floats/overhanging-float-paint-order-ref.html Normal file
View file

@ -0,0 +1,3 @@
<!DOCTYPE html>
<div style="width: 100px; height: 80px; background: green"></div>
<div style="width: 100px; height: 20px; background: blue"></div>

18
Tests/LibWeb/Ref/expected/wpt-import/css/CSS2/reference/ref-filled-green-100px-square.xht Normal file
View file

@ -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 Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css">
div
{
background-color: green;
height: 100px;
width: 100px;
}</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

18
Tests/LibWeb/Ref/expected/wpt-import/css/reference/ref-filled-green-100px-square.xht Normal file
View file

@ -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 Reftest Reference</title>
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
<style type="text/css">
div {
background-color: green;
height: 100px;
width: 100px;
}
</style>
</head>
<body>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>
</body>
</html>

13
Tests/LibWeb/Ref/expected/wpt-import/css/reference/ref-filled-green-200px-square.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>CSS Reftest Reference</title>
<link rel="author" title="Javier Fernandez Garcia-Boente" href="jfernandez@igalia.com" />
<style>
div {
background-color: green;
height: 200px;
width: 200px;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div></div>

35
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/adjoining-floats-dynamic.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

23
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/block-in-inline-become-float.html Normal file
View file

@ -0,0 +1,23 @@
<!DOCTYPE html>
<link rel="author" title="Morten Stenshorne" href="mailto:mstensho@chromium.org">
<link rel="help" href="http://crbug.com/332396356">
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../reference/ref-filled-green-100px-square.xht">
<style>
.half {
display: inline-block;
vertical-align: top;
width: 50px;
height: 100px;
background: green;
}
</style>
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="width:100px; height:100px; background:red;">
<span>
<div class="half"></div><div id="trouble"></div><div class="half"></div>
</span>
</div>
<script>
document.body.offsetTop;
trouble.style.cssFloat = "left";
</script>

12
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-in-inline-anonymous-block-with-overflow-hidden.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<title>CSS Test: A float wrapped in an anonymous block should be visible within a container with overflow: hidden.</title>
<link rel="author" href="mailto:obrufrau@igalia.com" title="Oriol Brufrau">
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../reference/ref-filled-green-100px-square.xht">
<link rel="help" href="https://www.w3.org/TR/CSS22/visuren.html#anonymous-block-level" />
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
<div style="overflow: hidden; width: 100px; height: 100px; background: red">
<div style="height: 50px; background: green"></div>
<span>
<div style="float: left; width: 100px; height: 50px; background: green"></div>
</span>
</div>

23
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-no-content-beside-001.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

25
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-nowrap-2.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

28
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-nowrap-3.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

16
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-nowrap-5.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/float-nowrap-5-ref.html">
<style>
div {
white-space: nowrap;
}
span {
float: left;
}
</style>
<div>Kittie<span>Hello&nbsp;</span>

16
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-nowrap-6.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/float-nowrap-5-ref.html">
<style>
div {
white-space: nowrap;
}
span {
float: left;
}
</style>
<div><span>Hello&nbsp;</span>Kittie

26
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-nowrap-7.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

24
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-nowrap-8.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

28
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-nowrap-9.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

11
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-paint-relayout.html Normal file
View file

@ -0,0 +1,11 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1049973">
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

13
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-root.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPe html>
<link rel="help" href="https://drafts.csswg.org/css2/#propdef-float">
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/float-root-ref.html">
<style>
:root {
float: right;
}
</style>
<body>
<p>foo</p>
</body>

36
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-table-align-left-quirk.html Normal file
View file

@ -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 &lt;table align=left&gt; 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

10
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-under-flatten-under-preserve-3d.html Normal file
View file

@ -0,0 +1,10 @@
<!DOCTYPE html>
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

35
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/float-with-absolutely-positioned-child-with-static-inset.html Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<link rel="author" title="Martin Robinson" href="mrobinson@igalia.com">
<link rel="help" href="https://drafts.csswg.org/css2/visuren.html#float-position">
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/float-with-absolutely-positioned-child-with-static-inset-ref.html">
<meta name="assert" content="An absolutely positioned child of a float with a static inset should be positioned the same as a non-positioned child of that float." />
<style>
#float {
float: right;
width: 250px;
}
#abs-child {
background: green;
position: absolute;
width: 100px;
height: 100px;
}
#abs-grandchild {
background: darkgreen;
position: absolute;
width: 50px;
height: 50px;
}
</style>
<body>
<div id="float">
<div id="abs-child">
<div id="abs-grandchild"></div>
</div>
</div>
</body>
</html>

15
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floated-table-wider-than-specified.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

24
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-in-table-caption-001.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

44
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-line-wrap-shifted-001.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

12
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-001.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

16
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-002.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

14
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-003.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html>
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

9
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-004.html Normal file
View file

@ -0,0 +1,9 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1183944">
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/../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>

34
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-005.html Normal file
View file

@ -0,0 +1,34 @@
<!DOCTYPE html>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=1378106">
<link rel="match" href="../../../../../expected/wpt-import/css/CSS2/floats/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>

38
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-006.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

39
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-007.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

40
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-008.html Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/../../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>

24
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-vertical-001a.xht Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

24
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-vertical-001b.xht Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

24
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-vertical-001c.xht Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>
<title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

16
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-vertical-003.xht Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

15
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-placement-vertical-004.xht Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

30
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-rule3-outside-left-001.xht Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

30
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-rule3-outside-left-002.xht Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

30
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-rule3-outside-right-001.xht Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

30
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-rule3-outside-right-002.xht Normal file
View file

@ -0,0 +1,30 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

32
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-rule7-outside-left-001.xht Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

32
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-rule7-outside-right-001.xht Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

33
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-left-overflow.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

33
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-left-table.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

33
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-right-overflow.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

33
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-001-right-table.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

34
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-002-left-overflow.xht Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

34
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-002-left-table.xht Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

34
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-002-right-overflow.xht Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

34
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-002-right-table.xht Normal file
View file

@ -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="../../../../../expected/wpt-import/css/CSS2/floats/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>

33
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-003-left-overflow.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

33
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-003-left-table.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

33
Tests/LibWeb/Ref/input/wpt-import/css/CSS2/floats/floats-wrap-bfc-003-right-overflow.xht Normal file
View file

@ -0,0 +1,33 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" 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="../../../../../expected/wpt-import/css/CSS2/floats/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>

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