mirror of
https://github.com/LadybirdBrowser/ladybird.git
synced 2024-12-29 06:02:07 +03:00
LibWeb: Add layout tests for floats, margins collapsing and positioning
Those are copied from 'Base/res/html/misc/'.
This commit is contained in:
Aliaksandr Kalenik
Andreas Kling
parent
12eca612bc
commit
900cd78121
Notes:
sideshowbarker
2024-07-17 00:43:45 +09:00
Author: https://github.com/kalenikaliaksandr Commit: https://github.com/SerenityOS/serenity/commit/900cd78121 Pull-request: https://github.com/SerenityOS/serenity/pull/17255
114
Tests/LibWeb/Layout/expected/float-1.txt
Normal file
114
Tests/LibWeb/Layout/expected/float-1.txt
Normal 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
16
Tests/LibWeb/Layout/expected/float-2.txt
Normal 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
26
Tests/LibWeb/Layout/expected/float-3.txt
Normal 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
79
Tests/LibWeb/Layout/expected/float-stress-1.txt
Normal 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
18
Tests/LibWeb/Layout/expected/float-stress-2.txt
Normal 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
16
Tests/LibWeb/Layout/expected/float-stress-3.txt
Normal 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
17
Tests/LibWeb/Layout/expected/margin-collapse-1.txt
Normal 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
24
Tests/LibWeb/Layout/expected/margin-collapse-2.txt
Normal 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
10
Tests/LibWeb/Layout/expected/margin-collapse-3.txt
Normal 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
10
Tests/LibWeb/Layout/expected/margin-collapse-4.txt
Normal 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>
|
||||
@ -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
36
Tests/LibWeb/Layout/expected/position-absolute-top-left.txt
Normal 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
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…
Reference in New Issue
Block a user