system/serenity
system/serenity
1
0
Fork 0
mirror of https://github.com/SerenityOS/serenity synced 2024-07-21 01:55:07 +00:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

LibWeb: Add layout tests for floats, margins collapsing and positioning

Browse source 
Those are copied from 'Base/res/html/misc/'.
This commit is contained in:
Aliaksandr Kalenik 2023-01-30 23:40:22 +03:00 committed by Andreas Kling
parent 12eca612bc
commit 900cd78121
24 changed files with 865 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

114
Tests/LibWeb/Layout/expected/float-1.txt Normal file
View file

@ -0,0 +1,114 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x348.34375 children: not-inline
BlockContainer <body> at (8,8) content-size 784x332.34375 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#lefty> at (8,8) content-size 100x100 floating children: inline
line 0 width: 10.859375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [8,8 10.859375x17.46875]
"L"
TextNode <#text>
TextNode <#text>
BlockContainer <div#righty> at (742,8) content-size 50x50 floating children: inline
line 0 width: 13.6875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 1, rect: [742,8 13.6875x17.46875]
"R"
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#lefty2> at (108,8) content-size 80x80 floating children: inline
line 0 width: 19.671875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [108,8 19.671875x17.46875]
"L2"
TextNode <#text>
TextNode <#text>
BlockContainer <div#righty2> at (712,8) content-size 30x30 floating children: inline
line 0 width: 22.5, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [712,8 22.5x17.46875]
"R2"
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#lefty3> at (188,8) content-size 40x40 floating children: inline
line 0 width: 19.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [188,8 19.953125x17.46875]
"L3"
TextNode <#text>
TextNode <#text>
BlockContainer <div#righty3> at (692,8) content-size 20x20 floating children: inline
line 0 width: 22.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 2, rect: [692,8 22.78125x17.46875]
"R3"
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div> at (8,8) content-size 784x332.34375 children: inline
line 0 width: 414.5625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 1, length: 47, rect: [228,8 414.5625x17.46875]
"lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
line 1 width: 414.5625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
frag 0 from TextNode start: 49, length: 47, rect: [228,25 414.5625x17.46875]
"lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
line 2 width: 466.90625, height: 18.40625, bottom: 53.34375, baseline: 13.53125
frag 0 from TextNode start: 97, length: 53, rect: [228,42 466.90625x17.46875]
"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 3 width: 573.5, height: 17.875, bottom: 70.28125, baseline: 13.53125
frag 0 from TextNode start: 151, length: 65, rect: [188,60 573.5x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
line 4 width: 572.546875, height: 18.34375, bottom: 88.21875, baseline: 13.53125
frag 0 from TextNode start: 217, length: 65, rect: [188,77 572.546875x17.46875]
"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 5 width: 679.140625, height: 17.8125, bottom: 105.15625, baseline: 13.53125
frag 0 from TextNode start: 283, length: 77, rect: [108,95 679.140625x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum"
line 6 width: 783.828125, height: 18.28125, bottom: 123.09375, baseline: 13.53125
frag 0 from TextNode start: 361, length: 89, rect: [8,112 783.828125x17.46875]
"lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 7 width: 731.484375, height: 17.75, bottom: 140.03125, baseline: 13.53125
frag 0 from TextNode start: 451, length: 83, rect: [8,130 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 8 width: 731.484375, height: 18.21875, bottom: 157.96875, baseline: 13.53125
frag 0 from TextNode start: 535, length: 83, rect: [8,147 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 9 width: 731.484375, height: 17.6875, bottom: 174.90625, baseline: 13.53125
frag 0 from TextNode start: 619, length: 83, rect: [8,165 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 10 width: 731.484375, height: 18.15625, bottom: 192.84375, baseline: 13.53125
frag 0 from TextNode start: 703, length: 83, rect: [8,182 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 11 width: 731.484375, height: 17.625, bottom: 209.78125, baseline: 13.53125
frag 0 from TextNode start: 787, length: 83, rect: [8,200 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 12 width: 731.484375, height: 18.09375, bottom: 227.71875, baseline: 13.53125
frag 0 from TextNode start: 871, length: 83, rect: [8,217 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 13 width: 731.484375, height: 17.5625, bottom: 244.65625, baseline: 13.53125
frag 0 from TextNode start: 955, length: 83, rect: [8,235 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 14 width: 731.484375, height: 18.03125, bottom: 262.59375, baseline: 13.53125
frag 0 from TextNode start: 1039, length: 83, rect: [8,252 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 15 width: 731.484375, height: 17.5, bottom: 279.53125, baseline: 13.53125
frag 0 from TextNode start: 1123, length: 83, rect: [8,270 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 16 width: 731.484375, height: 17.96875, bottom: 297.46875, baseline: 13.53125
frag 0 from TextNode start: 1207, length: 83, rect: [8,287 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 17 width: 731.484375, height: 18.4375, bottom: 315.40625, baseline: 13.53125
frag 0 from TextNode start: 1291, length: 83, rect: [8,304 731.484375x17.46875]
"ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem"
line 18 width: 45.296875, height: 17.90625, bottom: 332.34375, baseline: 13.53125
frag 0 from TextNode start: 1375, length: 5, rect: [8,322 45.296875x17.46875]
"ipsum"
TextNode <#text>
BlockContainer <(anonymous)> at (8,340.34375) content-size 784x0 children: inline
TextNode <#text>

16
Tests/LibWeb/Layout/expected/float-2.txt Normal file
View file

@ -0,0 +1,16 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x60 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#b> at (9,9) content-size 50x50 floating children: not-inline
TextNode <#text>
BlockContainer <div#a> at (8,8) content-size 784x17.46875 children: inline
line 0 width: 37.578125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 4, rect: [60,8 37.578125x17.46875]
"Text"
TextNode <#text>
BlockContainer <(anonymous)> at (8,25.46875) content-size 784x0 children: inline
TextNode <#text>

26
Tests/LibWeb/Layout/expected/float-3.txt Normal file
View file

@ -0,0 +1,26 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x135.46875 children: not-inline
BlockContainer <body> at (8,8) content-size 780x119.46875 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 780x0 children: inline
TextNode <#text>
BlockContainer <div#top> at (8,8) content-size 780x100 children: inline
TextNode <#text>
BlockContainer <div#top-left.box> at (8,8) content-size 300x100 floating children: not-inline
TextNode <#text>
BlockContainer <div#top-right.box> at (488,8) content-size 300x100 floating children: not-inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,108) content-size 780x0 children: inline
TextNode <#text>
BlockContainer <div#bottom> at (9,109) content-size 778x17.46875 children: not-inline
BlockContainer <(anonymous)> at (9,109) content-size 778x0 children: inline
TextNode <#text>
TextNode <#text>
BlockContainer <div#text> at (9,109) content-size 778x17.46875 children: inline
line 0 width: 54.796875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [371,109 54.796875x17.46875]
"foobar"
TextNode <#text>
BlockContainer <(anonymous)> at (9,126.46875) content-size 778x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,127.46875) content-size 780x0 children: inline
TextNode <#text>

79
Tests/LibWeb/Layout/expected/float-stress-1.txt Normal file
View file

@ -0,0 +1,79 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.outer> at (9,9) content-size 300x250 children: inline
line 0 width: 239.15625, height: 16, bottom: 16, baseline: 12.796875
frag 0 from TextNode start: 1, length: 24, rect: [61,9 212x16]
"foo bar baz foo bar baz "
frag 1 from TextNode start: 1, length: 3, rect: [273,9 27.15625x16]
"foo"
line 1 width: 27.640625, height: 16, bottom: 32, baseline: 12.796875
frag 0 from TextNode start: 5, length: 3, rect: [263,25 27.640625x16]
"bar"
line 2 width: 27.203125, height: 16, bottom: 48, baseline: 12.796875
frag 0 from TextNode start: 9, length: 3, rect: [263,41 27.203125x16]
"baz"
line 3 width: 27.15625, height: 16, bottom: 64, baseline: 12.796875
frag 0 from TextNode start: 13, length: 3, rect: [263,57 27.15625x16]
"foo"
line 4 width: 0, height: 0, bottom: 0, baseline: 0
line 5 width: 98, height: 16, bottom: 84, baseline: 12.796875
frag 0 from TextNode start: 17, length: 11, rect: [9,77 98x16]
"bar baz foo"
line 6 width: 98, height: 16, bottom: 100, baseline: 12.796875
frag 0 from TextNode start: 29, length: 11, rect: [9,93 98x16]
"bar baz foo"
line 7 width: 98, height: 16, bottom: 116, baseline: 12.796875
frag 0 from TextNode start: 41, length: 8, rect: [9,109 70.84375x16]
"bar baz "
frag 1 from TextNode start: 1, length: 3, rect: [80,109 27.15625x16]
"foo"
line 8 width: 62.84375, height: 16, bottom: 132, baseline: 12.796875
frag 0 from TextNode start: 5, length: 7, rect: [9,125 62.84375x16]
"bar baz"
line 9 width: 62.796875, height: 16, bottom: 148, baseline: 12.796875
frag 0 from TextNode start: 13, length: 7, rect: [9,141 62.796875x16]
"foo bar"
line 10 width: 274.359375, height: 16, bottom: 164, baseline: 12.796875
frag 0 from TextNode start: 21, length: 31, rect: [9,157 274.359375x16]
"baz foo bar baz foo bar baz foo"
line 11 width: 239.640625, height: 16, bottom: 180, baseline: 12.796875
frag 0 from TextNode start: 53, length: 20, rect: [61,173 176.84375x16]
"bar baz foo bar baz "
frag 1 from TextNode start: 1, length: 7, rect: [238,173 62.796875x16]
"foo bar"
line 12 width: 204, height: 16, bottom: 196, baseline: 12.796875
frag 0 from TextNode start: 9, length: 16, rect: [61,189 141.203125x16]
"baz foo bar baz "
frag 1 from TextNode start: 1, length: 7, rect: [202,189 62.796875x16]
"foo bar"
line 13 width: 204, height: 16, bottom: 212, baseline: 12.796875
frag 0 from TextNode start: 9, length: 23, rect: [61,205 204x16]
"baz foo bar baz foo bar"
line 14 width: 239.203125, height: 16, bottom: 228, baseline: 12.796875
frag 0 from TextNode start: 33, length: 27, rect: [61,221 239.203125x16]
"baz foo bar baz foo bar baz"
line 15 width: 274.796875, height: 16, bottom: 244, baseline: 12.796875
frag 0 from TextNode start: 61, length: 31, rect: [9,237 274.796875x16]
"foo bar baz foo bar baz foo bar"
line 16 width: 274.359375, height: 16, bottom: 260, baseline: 12.796875
frag 0 from TextNode start: 93, length: 31, rect: [9,253 274.359375x16]
"baz foo bar baz foo bar baz foo"
line 17 width: 168.84375, height: 16, bottom: 276, baseline: 12.796875
frag 0 from TextNode start: 125, length: 19, rect: [9,269 168.84375x16]
"bar baz foo bar baz"
TextNode <#text>
BlockContainer <div.lefty> at (10,10) content-size 50x50 floating children: not-inline
TextNode <#text>
BlockContainer <div.one> at (62,26) content-size 200x50 floating children: not-inline
TextNode <#text>
BlockContainer <div.two> at (108,78) content-size 200x50 floating children: not-inline
TextNode <#text>
BlockContainer <div.righty> at (76,126) content-size 30x30 floating children: not-inline
TextNode <#text>
BlockContainer <div.lefty.shwifty> at (10,174) content-size 50x50 floating children: not-inline
TextNode <#text>
BlockContainer <div.righty> at (278,190) content-size 30x30 floating children: not-inline
TextNode <#text>

18
Tests/LibWeb/Layout/expected/float-stress-2.txt Normal file
View file

@ -0,0 +1,18 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html.js> at (0,0) content-size 800x200 children: not-inline
BlockContainer <body> at (0,0) content-size 800x50 children: not-inline
BlockContainer <div#page> at (50,50) content-size 750x0 children: not-inline
BlockContainer <div#content_box> at (50,50) content-size 400x150 floating children: inline
BlockContainer <article.first> at (50,50) content-size 300x100 floating children: inline
line 0 width: 36.03125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 5, rect: [50,50 36.03125x17.46875]
"first"
TextNode <#text>
BlockContainer <article.second> at (50,150) content-size 200x50 floating children: inline
line 0 width: 54.78125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 6, rect: [50,150 54.78125x17.46875]
"second"
TextNode <#text>
TextNode <#text>
BlockContainer <(anonymous)> at (0,50) content-size 800x0 children: inline
TextNode <#text>

16
Tests/LibWeb/Layout/expected/float-stress-3.txt Normal file
View file

@ -0,0 +1,16 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x268 children: not-inline
BlockContainer <body> at (8,8) content-size 784x252 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.outer> at (9,9) content-size 300x250 children: inline
line 0 width: 204, height: 16, bottom: 16, baseline: 12.796875
frag 0 from TextNode start: 1, length: 23, rect: [61,9 204x16]
"foo bar baz foo bar baz"
TextNode <#text>
BlockContainer <div.lefty> at (10,10) content-size 50x50 floating children: not-inline
TextNode <#text>
BlockContainer <div.one> at (62,26) content-size 200x50 floating children: not-inline
TextNode <#text>
BlockContainer <div.two> at (108,78) content-size 200x50 floating children: not-inline
TextNode <#text>

17
Tests/LibWeb/Layout/expected/margin-collapse-1.txt Normal file
View file

@ -0,0 +1,17 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x262 children: not-inline
BlockContainer <body> at (8,25) content-size 784x229 children: not-inline
BlockContainer <div#foo> at (34,26) content-size 100x100 children: inline
line 0 width: 27.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [34,26 27.15625x17.46875]
"foo"
TextNode <#text>
BlockContainer <(anonymous)> at (8,152) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#bar> at (34,153) content-size 100x100 children: inline
line 0 width: 27.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [34,153 27.640625x17.46875]
"bar"
TextNode <#text>
BlockContainer <(anonymous)> at (8,279) content-size 784x0 children: inline
TextNode <#text>

24
Tests/LibWeb/Layout/expected/margin-collapse-2.txt Normal file
View file

@ -0,0 +1,24 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x352 children: not-inline
BlockContainer <body> at (8,8) content-size 784x336 children: not-inline
BlockContainer <div#foo> at (9,9) content-size 100x100 children: inline
line 0 width: 27.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [9,9 27.15625x17.46875]
"foo"
TextNode <#text>
BlockContainer <(anonymous)> at (8,135) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#bar> at (9,136) content-size 100x100 children: inline
line 0 width: 27.640625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [9,136 27.640625x17.46875]
"bar"
TextNode <#text>
BlockContainer <(anonymous)> at (8,262) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#baz> at (9,243) content-size 100x100 children: inline
line 0 width: 27.203125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
frag 0 from TextNode start: 0, length: 3, rect: [9,243 27.203125x17.46875]
"baz"
TextNode <#text>
BlockContainer <(anonymous)> at (8,344) content-size 784x0 children: inline
TextNode <#text>

10
Tests/LibWeb/Layout/expected/margin-collapse-3.txt Normal file
View file

@ -0,0 +1,10 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x366 children: not-inline
BlockContainer <body> at (8,8) content-size 784x350 children: not-inline
BlockContainer <div#foo> at (8,8) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,133) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#bar> at (8,158) content-size 200x200 children: not-inline
BlockContainer <div#baz> at (8,158) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,358) content-size 784x0 children: inline
TextNode <#text>

10
Tests/LibWeb/Layout/expected/margin-collapse-4.txt Normal file
View file

@ -0,0 +1,10 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x166 children: not-inline
BlockContainer <body> at (8,8) content-size 784x150 children: not-inline
BlockContainer <div#foo> at (8,8) content-size 100x50 children: not-inline
BlockContainer <div#baz> at (8,8) content-size 50x50 children: not-inline
BlockContainer <(anonymous)> at (8,158) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div#bar> at (8,108) content-size 50x50 children: not-inline
BlockContainer <(anonymous)> at (8,158) content-size 784x0 children: inline
TextNode <#text>

14
Tests/LibWeb/Layout/expected/position-absolute-from-edges.txt Normal file
View file

@ -0,0 +1,14 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x16 children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: inline
BlockContainer <div#container> at (8,8) content-size 500x400 positioned children: inline
TextNode <#text>
BlockContainer <div#red> at (38,38) content-size 100x100 positioned children: not-inline
TextNode <#text>
BlockContainer <div#green> at (338,78) content-size 100x100 positioned children: not-inline
TextNode <#text>
BlockContainer <div#blue> at (28,288) content-size 100x100 positioned children: not-inline
TextNode <#text>
BlockContainer <div#yellow> at (388,288) content-size 100x100 positioned children: not-inline
TextNode <#text>
TextNode <#text>

36
Tests/LibWeb/Layout/expected/position-absolute-top-left.txt Normal file
View file

@ -0,0 +1,36 @@
InitialContainingBlock <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x616 children: not-inline
BlockContainer <(anonymous)> at (0,0) content-size 800x0 children: inline
TextNode <#text>
BlockContainer <body> at (8,8) content-size 784x600 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.blue.absolute> at (208,208) content-size 200x200 positioned children: inline
TextNode <#text>
BlockContainer <div.red.absolute> at (308,308) content-size 100x100 positioned children: not-inline
TextNode <#text>
BlockContainer <div.yellow.absolute> at (258,258) content-size 100x100 positioned children: inline
TextNode <#text>
BlockContainer <div.black.absolute> at (308,308) content-size 50x50 positioned children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <div.green.absolute> at (508,508) content-size 100x100 positioned children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <div.blue> at (8,8) content-size 200x200 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <div.red> at (8,8) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,108) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <div.yellow> at (8,108) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,208) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <div.green> at (8,208) content-size 100x100 children: not-inline
BlockContainer <(anonymous)> at (8,308) content-size 200x0 children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,208) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <div.blue_margin> at (408,408) content-size 200x200 children: not-inline
BlockContainer <(anonymous)> at (8,608) content-size 784x0 children: inline
TextNode <#text>

63
Tests/LibWeb/Layout/input/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/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/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/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/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/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>

19
Tests/LibWeb/Layout/input/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/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/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/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>

48
Tests/LibWeb/Layout/input/position-absolute-from-edges.html Normal file
View 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
View 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>