RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 14:47:35 +00:00
Code Issues Activity Actions

Tests/LibWeb: Move block & inline layout tests into own directory

Browse source
This commit is contained in:
Andreas Kling 2023-04-06 11:56:10 +02:00
parent 332bb8a299
commit 68459d43e0
40 changed files with 0 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

14
Tests/LibWeb/Layout/input/block-and-inline/atomic-inline-with-percentage-vertical-align.html Normal file
View file

@ -0,0 +1,14 @@
<!DOCTYPE html><html><head><style>
* {
border: 1px solid black;
margin: 0;
padding: 0;
font: 16px SerenitySans;
}
.clump {
display: inline-block;
vertical-align: -20%;
width: 30px;
height: 30px;
}
</style></head><body><div class="clump"></div><br><div class="clump"></div>

28
Tests/LibWeb/Layout/input/block-and-inline/bfc-consider-all-currently-stacked-floats.html Normal file
View file

@ -0,0 +1,28 @@
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family: 'SerenitySans';
}
.big-float {
float: left;
width: 100px;
height: 100px;
background-color: pink;
}
.xxx,
.yyy {
float: left;
background-color: orange;
}
</style>
</head>
<div class="big-float"></div>
<div class="xxx">xxx</div>
bar
<div>
<div class="yyy">yyy</div>
baz
</div>
</html>

32
Tests/LibWeb/Layout/input/block-and-inline/bfc-float-left-break-vertically-2.html Normal file
View file

@ -0,0 +1,32 @@
<!DOCTYPE html><html><head><style>
* {
margin: 0;
padding: 0;
}
body {
width: 200px;
}
div {
float: left;
width: 150px;
height: 50px;
}
.red {
background: red;
}
.green {
background: green;
}
.blue {
background: blue;
}
.orange {
background: orange;
}
</style></head><body><ul><div class="red"></div><div class="green"></div> </ul><div class="orange"></div>

44
Tests/LibWeb/Layout/input/block-and-inline/bfc-float-left-break-vertically.html Normal file
View file

@ -0,0 +1,44 @@
<!DOCTYPE html>
<html>
<head>
<style>
* {
border: 1px solid black !important;
margin: 0;
padding: 0;
}
body {
width: 400px;
}
.yellow {
width: 60px;
height: 50px;
float: left;
background: yellow;
}
.orange {
width: 250px;
height: 50px;
float: left;
background: orange;
}
.green {
background: lime;
width: 100px;
height: 50px;
float: left;
}
</style>
</head>
<body>
<div class="ul">
<div class="yellow"></div>
<div class="orange"></div>
</div>
<div class="green"></div>
</body>
</html>

23
Tests/LibWeb/Layout/input/block-and-inline/clearfix.html Normal file
View file

@ -0,0 +1,23 @@
<style>
.clearfix {
clear: both;
}
.square {
float: left;
width: 49px;
height: 49px;
}
.white {
background-color: salmon;
width: 100px;
height: 100px;
}
.black {
background-color: slateblue;
}
</style>
<div>
<div class="square white"></div>
<div class="clearfix"></div>
<div class="square black"></div>
</div>

63
Tests/LibWeb/Layout/input/block-and-inline/float-1.html Normal file
View 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/block-and-inline/float-2.html Normal file
View 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/block-and-inline/float-3.html Normal file
View 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/block-and-inline/float-stress-1.html Normal file
View 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/block-and-inline/float-stress-2.html Normal file
View 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/block-and-inline/float-stress-3.html Normal file
View 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>

16
Tests/LibWeb/Layout/input/block-and-inline/ifc-float-left-and-sibling-with-margin-left.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html><html><head><style>
* {
border: 1px solid black;
font-family: 'SerenitySans';
}
.thumbnail {
float: left;
width: 50px;
height: 50px;
background-color: pink;
}
.title {
margin-left: 80px;
background-color: orange;
}
</style></head><body><div class="thumbnail"></div><div class="title">Chrono Trigger

16
Tests/LibWeb/Layout/input/block-and-inline/inline-box-with-vertical-margins-vertical-align-top.html Normal file
View file

@ -0,0 +1,16 @@
<style>
body {
font-family: 'SerenitySans';
}
#inline-box {
background-color: red;
margin-top: 50px;
margin-bottom: 25px;
width: 100px;
height: 100px;
display: inline-block;
vertical-align: top;
}
</style>Well, <div id="inline-box"></div> friends.

15
Tests/LibWeb/Layout/input/block-and-inline/inline-box-with-vertical-margins.html Normal file
View file

@ -0,0 +1,15 @@
<style>
body {
font-family: 'SerenitySans';
}
#inline-box {
background-color: red;
margin-top: 50px;
margin-bottom: 25px;
width: 100px;
height: 100px;
display: inline-block;
}
</style>Well, <div id="inline-box"></div> friends.

17
Tests/LibWeb/Layout/input/block-and-inline/join-out-of-flow-box-with-previous-sibling-if-wrapped-in-anonymous-box.html Normal file
View file

@ -0,0 +1,17 @@
<!DOCTYPE html><html><head><style>
div {
width: 200px;
height: 30px;
}
.banner {
background: lime;
}
.tab {
background: orange;
display: inline-block;
}
.timeline {
background: magenta;
float: right;
}
</style></head><body><div class="banner"></div><div class="tab"></div><div class="timeline">

19
Tests/LibWeb/Layout/input/block-and-inline/margin-collapse-1.html Normal file
View 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/block-and-inline/margin-collapse-2.html Normal file
View 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/block-and-inline/margin-collapse-3.html Normal file
View 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/block-and-inline/margin-collapse-4.html Normal file
View 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>

15
Tests/LibWeb/Layout/input/block-and-inline/single-br-inline-layout.html Normal file
View file

@ -0,0 +1,15 @@
<style>
body {
font-family: 'SerenitySans';
}
#begin {
height: 2px;
background-color: blue;
}
#end {
height: 2px;
background-color: red;
}
</style><div id="begin"></div><br><div id="end"></div>