mirror of
https://github.com/RGBCube/serenity
synced 2025-07-27 09:27:35 +00:00
LibWeb: Add layout tests for floats, margins collapsing and positioning
Those are copied from 'Base/res/html/misc/'.
This commit is contained in:
parent
12eca612bc
commit
900cd78121
24 changed files with 865 additions and 0 deletions
63
Tests/LibWeb/Layout/input/float-1.html
Normal file
63
Tests/LibWeb/Layout/input/float-1.html
Normal file
|
@ -0,0 +1,63 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
#lefty {
|
||||
float: left;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#righty {
|
||||
float: right;
|
||||
background: green;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
#lefty2 {
|
||||
float: left;
|
||||
background: orange;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
#righty2 {
|
||||
float: right;
|
||||
background: magenta;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
#lefty3 {
|
||||
float: left;
|
||||
background: cyan;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
}
|
||||
#righty3 {
|
||||
float: right;
|
||||
background: silver;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
<body>
|
||||
<div>
|
||||
<div id=lefty>L</div>
|
||||
<div id=righty>R</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id=lefty2>L2</div>
|
||||
<div id=righty2>R2</div>
|
||||
</div>
|
||||
<div>
|
||||
<div id=lefty3>L3</div>
|
||||
<div id=righty3>R3</div>
|
||||
</div>
|
||||
<div>
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum
|
||||
</div>
|
||||
</body>
|
20
Tests/LibWeb/Layout/input/float-2.html
Normal file
20
Tests/LibWeb/Layout/input/float-2.html
Normal file
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
#b {
|
||||
border: 1px solid red;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id=b></div>
|
||||
<div id=a>Text</div>
|
||||
</body>
|
||||
</html>
|
28
Tests/LibWeb/Layout/input/float-3.html
Normal file
28
Tests/LibWeb/Layout/input/float-3.html
Normal file
|
@ -0,0 +1,28 @@
|
|||
<style>
|
||||
body {
|
||||
width: 780px;
|
||||
text-align: center;
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
.box {
|
||||
height: 100px;
|
||||
width: 300px;
|
||||
background: red;
|
||||
}
|
||||
#top {
|
||||
overflow: hidden;
|
||||
}
|
||||
#bottom {
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<div id="top">
|
||||
<div id="top-left" class="box" style="float: left"></div>
|
||||
<div id="top-right" class="box" style="float: right"></div>
|
||||
</div>
|
||||
<div id="bottom">
|
||||
<!-- Due to the overflow property of the top div, this div should be laid beneath the top, rather than inline -->
|
||||
<div id="text">foobar</div>
|
||||
</div>
|
||||
</body>
|
68
Tests/LibWeb/Layout/input/float-stress-1.html
Normal file
68
Tests/LibWeb/Layout/input/float-stress-1.html
Normal file
|
@ -0,0 +1,68 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>float horror show</title>
|
||||
<style type="text/css">
|
||||
html {
|
||||
font: 16px/1 'SerenitySans';
|
||||
}
|
||||
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.one {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: #fc0;
|
||||
}
|
||||
.two {
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: pink;
|
||||
}
|
||||
.lefty {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: lime;
|
||||
}
|
||||
.righty {
|
||||
float: right;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: magenta;
|
||||
}
|
||||
</style></head><body>
|
||||
<div class=outer>
|
||||
foo bar baz foo bar baz
|
||||
<div class=lefty></div>
|
||||
<div class=one></div>
|
||||
<div class=two></div>
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
||||
<div class=righty></div>
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
||||
<div class="lefty shwifty"></div>
|
||||
foo bar baz foo bar baz
|
||||
<div class=righty></div>
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
||||
foo bar baz foo bar baz
|
46
Tests/LibWeb/Layout/input/float-stress-2.html
Normal file
46
Tests/LibWeb/Layout/input/float-stress-2.html
Normal file
|
@ -0,0 +1,46 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="js" lang="en-US">
|
||||
<head>
|
||||
<style>
|
||||
* {
|
||||
border: 0px solid black !important;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
|
||||
html, body {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#page {
|
||||
background: cyan;
|
||||
padding-left: 50px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
#content_box {
|
||||
float: left;
|
||||
background: lime;
|
||||
width: 400px;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.first {
|
||||
background: pink;
|
||||
|
||||
width: 300px;
|
||||
height: 100px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.second {
|
||||
background: orange;
|
||||
|
||||
width: 200px;
|
||||
height: 50px;
|
||||
float: left;
|
||||
}
|
||||
</style>
|
||||
</head><body><div id="page"><div id="content_box"><article class="first">first</article><article class="second">second</article> </div></div></body></html>
|
52
Tests/LibWeb/Layout/input/float-stress-3.html
Normal file
52
Tests/LibWeb/Layout/input/float-stress-3.html
Normal file
|
@ -0,0 +1,52 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>float horror show</title>
|
||||
<style type="text/css">
|
||||
html {
|
||||
font: 16px/1 'SerenitySans';
|
||||
}
|
||||
.outer {
|
||||
border: 1px solid black;
|
||||
width: 300px;
|
||||
height: 250px;
|
||||
}
|
||||
|
||||
.one {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: #fc0;
|
||||
}
|
||||
.two {
|
||||
float: right;
|
||||
height: 50px;
|
||||
width: 200px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: pink;
|
||||
}
|
||||
.lefty {
|
||||
float: left;
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: lime;
|
||||
}
|
||||
.righty {
|
||||
float: right;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
margin: 0;
|
||||
border: 1px solid black;
|
||||
background-color: magenta;
|
||||
}
|
||||
</style></head><body>
|
||||
<div class=outer>
|
||||
foo bar baz foo bar baz
|
||||
<div class=lefty></div>
|
||||
<div class=one></div>
|
||||
<div class=two></div>
|
19
Tests/LibWeb/Layout/input/margin-collapse-1.html
Normal file
19
Tests/LibWeb/Layout/input/margin-collapse-1.html
Normal file
|
@ -0,0 +1,19 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
#foo {
|
||||
border: 1px solid red;
|
||||
margin: 25px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#bar {
|
||||
border: 1px solid green;
|
||||
margin: 25px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=foo>foo</div>
|
||||
<div id=bar>bar</div>
|
26
Tests/LibWeb/Layout/input/margin-collapse-2.html
Normal file
26
Tests/LibWeb/Layout/input/margin-collapse-2.html
Normal file
|
@ -0,0 +1,26 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
#foo {
|
||||
border: 1px solid red;
|
||||
margin-bottom: 25px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#bar {
|
||||
border: 1px solid green;
|
||||
margin-bottom: 25px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#baz {
|
||||
border: 1px solid blue;
|
||||
width: 100px;
|
||||
margin-top: -20px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=foo>foo</div>
|
||||
<div id=bar>bar</div>
|
||||
<div id=baz>baz</div>
|
25
Tests/LibWeb/Layout/input/margin-collapse-3.html
Normal file
25
Tests/LibWeb/Layout/input/margin-collapse-3.html
Normal file
|
@ -0,0 +1,25 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
#foo {
|
||||
background-color: red;
|
||||
margin-bottom: 25px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#bar {
|
||||
background-color: green;
|
||||
margin-top: 100px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
#baz {
|
||||
background-color: blue;
|
||||
width: 100px;
|
||||
margin-top: -50px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=foo></div>
|
||||
<div id=bar><div id=baz></div></div>
|
23
Tests/LibWeb/Layout/input/margin-collapse-4.html
Normal file
23
Tests/LibWeb/Layout/input/margin-collapse-4.html
Normal file
|
@ -0,0 +1,23 @@
|
|||
<style>
|
||||
body {
|
||||
font-family: 'SerenitySans';
|
||||
}
|
||||
#foo {
|
||||
background-color: red;
|
||||
width: 100px;
|
||||
}
|
||||
#bar {
|
||||
background-color: green;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-top: -50px;
|
||||
}
|
||||
#baz {
|
||||
background-color: blue;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=foo><div id=baz></div></div>
|
||||
<div id=bar></div>
|
48
Tests/LibWeb/Layout/input/position-absolute-from-edges.html
Normal file
48
Tests/LibWeb/Layout/input/position-absolute-from-edges.html
Normal file
|
@ -0,0 +1,48 @@
|
|||
<style>
|
||||
#container {
|
||||
position: absolute;
|
||||
width: 500px;
|
||||
height: 400px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#red {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 20px;
|
||||
background: red;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
border: 10px solid gray;
|
||||
}
|
||||
#green {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
top: 20px;
|
||||
background: green;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 50px;
|
||||
}
|
||||
#blue {
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
bottom: 20px;
|
||||
background: blue;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
#yellow {
|
||||
position: absolute;
|
||||
right: 20px;
|
||||
bottom: 20px;
|
||||
background: yellow;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=container>
|
||||
<div id=red></div>
|
||||
<div id=green></div>
|
||||
<div id=blue></div>
|
||||
<div id=yellow></div>
|
||||
</div>
|
67
Tests/LibWeb/Layout/input/position-absolute-top-left.html
Normal file
67
Tests/LibWeb/Layout/input/position-absolute-top-left.html
Normal file
|
@ -0,0 +1,67 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>absolute</title>
|
||||
<style>
|
||||
div {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
.absolute {
|
||||
position: absolute;
|
||||
}
|
||||
.blue {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
top: 208px;
|
||||
left: 208px;
|
||||
}
|
||||
.yellow {
|
||||
background-color: yellow;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.red {
|
||||
background-color: red;
|
||||
top: 100px;
|
||||
left: 100px;
|
||||
}
|
||||
.green {
|
||||
background-color: green;
|
||||
top: 300px;
|
||||
left: 300px;
|
||||
}
|
||||
.black {
|
||||
background-color: black;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
top: 50px;
|
||||
left: 50px;
|
||||
}
|
||||
.blue_margin {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: blue;
|
||||
margin-top: 200px;
|
||||
margin-left: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="blue absolute">
|
||||
<div class="red absolute"></div>
|
||||
<div class="yellow absolute">
|
||||
<div class="black absolute"></div>
|
||||
</div>
|
||||
<div class="green absolute"></div>
|
||||
</div>
|
||||
<div class="blue">
|
||||
<div class="red"></div>
|
||||
<div class="yellow"></div>
|
||||
<div class="green"></div>
|
||||
</div>
|
||||
<div class="blue_margin"></div>
|
||||
</body>
|
||||
</html>
|
Loading…
Add table
Add a link
Reference in a new issue