mirror of
https://github.com/RGBCube/serenity
synced 2025-07-24 22:17:42 +00:00
LibWeb: Make CSSPixels and Length use 64-bit (double) floating point
This fixes a plethora of rounding problems on many websites. In the future, we may want to replace this with fixed-point arithmetic (bug #18566) for performance (and consistency with other engines), but in the meantime this makes the web look a bit better. :^) There's a lot more things that could be converted to doubles, which would reduce the amount of casting necessary in this patch. We can do that incrementally, however.
This commit is contained in:
parent
30262d7023
commit
655d9d1462
80 changed files with 298 additions and 299 deletions
|
@ -24,45 +24,45 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
"the way"
|
"the way"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <li#bar> at (235,55) content-size 139.977996x90 floating [BFC] children: not-inline
|
BlockContainer <li#bar> at (235,55) content-size 139.977993x90 floating [BFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (235,55) content-size 139.977996x0 children: inline
|
BlockContainer <(anonymous)> at (235,55) content-size 139.977993x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <p> at (235,55) content-size 139.977996x10 children: inline
|
BlockContainer <p> at (235,55) content-size 139.977993x10 children: inline
|
||||||
line 0 width: 74.316406, height: 10, bottom: 10, baseline: 7.998046
|
line 0 width: 74.316406, height: 10, bottom: 10, baseline: 7.998046
|
||||||
frag 0 from TextNode start: 0, length: 14, rect: [235,55 74.316406x10]
|
frag 0 from TextNode start: 0, length: 14, rect: [235,55 74.316406x10]
|
||||||
"the world ends"
|
"the world ends"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (235,65) content-size 139.977996x0 children: inline
|
BlockContainer <(anonymous)> at (235,65) content-size 139.977993x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
InlineNode <form>
|
InlineNode <form>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <p> at (235,65) content-size 139.977996x19 children: inline
|
BlockContainer <p> at (235,65) content-size 139.977993x18.999999 children: inline
|
||||||
line 0 width: 39.490234, height: 19, bottom: 19, baseline: 12.498046
|
line 0 width: 39.490234, height: 18.999999, bottom: 18.999999, baseline: 12.498046
|
||||||
frag 0 from TextNode start: 1, length: 5, rect: [235,65 27.490234x19]
|
frag 0 from TextNode start: 1, length: 5, rect: [235,65 27.490234x18.999999]
|
||||||
"bang "
|
"bang "
|
||||||
frag 1 from RadioButton start: 0, length: 0, rect: [262,65 12x12]
|
frag 1 from RadioButton start: 0, length: 0, rect: [262,65 12x12]
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
RadioButton <input> at (262,65) content-size 12x12 inline-block children: not-inline
|
RadioButton <input> at (262,65) content-size 12x12 inline-block children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <p> at (235,84) content-size 139.977996x19 children: inline
|
BlockContainer <p> at (235,83.999999) content-size 139.977993x18.999999 children: inline
|
||||||
line 0 width: 57.15625, height: 19, bottom: 19, baseline: 12.498046
|
line 0 width: 57.15625, height: 18.999999, bottom: 18.999999, baseline: 12.498046
|
||||||
frag 0 from TextNode start: 1, length: 8, rect: [235,84 45.15625x19]
|
frag 0 from TextNode start: 1, length: 8, rect: [235,83.999999 45.15625x18.999999]
|
||||||
"whimper "
|
"whimper "
|
||||||
frag 1 from RadioButton start: 0, length: 0, rect: [280,84 12x12]
|
frag 1 from RadioButton start: 0, length: 0, rect: [280,83.999999 12x12]
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
RadioButton <input> at (280,84) content-size 12x12 inline-block children: not-inline
|
RadioButton <input> at (280,83.999999) content-size 12x12 inline-block children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (235,103) content-size 139.977996x0 children: inline
|
BlockContainer <(anonymous)> at (235,102.999999) content-size 139.977993x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <li> at (409.977996,60) content-size 50x90 floating [BFC] children: inline
|
BlockContainer <li> at (409.977993,60) content-size 50x90 floating [BFC] children: inline
|
||||||
line 0 width: 31.582031, height: 10, bottom: 10, baseline: 7.998046
|
line 0 width: 31.582031, height: 10, bottom: 10, baseline: 7.998046
|
||||||
frag 0 from TextNode start: 0, length: 6, rect: [409.977996,60 31.582031x10]
|
frag 0 from TextNode start: 0, length: 6, rect: [409.977993,60 31.582031x10]
|
||||||
"i grow"
|
"i grow"
|
||||||
line 1 width: 14.033203, height: 10, bottom: 20, baseline: 7.998046
|
line 1 width: 14.033203, height: 10, bottom: 20, baseline: 7.998046
|
||||||
frag 0 from TextNode start: 7, length: 3, rect: [409.977996,70 14.033203x10]
|
frag 0 from TextNode start: 7, length: 3, rect: [409.977993,70 14.033203x10]
|
||||||
"old"
|
"old"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
@ -100,29 +100,29 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline
|
BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <p> at (20,335) content-size 480x65 children: inline
|
BlockContainer <p> at (20,335) content-size 480x64.999999 children: inline
|
||||||
line 0 width: 473.642578, height: 13, bottom: 13, baseline: 9.498046
|
line 0 width: 473.642578, height: 12.999999, bottom: 12.999999, baseline: 9.498046
|
||||||
frag 0 from TextNode start: 1, length: 90, rect: [20,335 473.642578x13]
|
frag 0 from TextNode start: 1, length: 90, rect: [20,335 473.642578x12.999999]
|
||||||
"This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1"
|
"This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1"
|
||||||
line 1 width: 396.953125, height: 13, bottom: 26, baseline: 9.498046
|
line 1 width: 396.953125, height: 13, bottom: 25.999999, baseline: 9.498046
|
||||||
frag 0 from TextNode start: 92, length: 74, rect: [20,348 396.953125x13]
|
frag 0 from TextNode start: 92, length: 74, rect: [20,348 396.953125x12.999999]
|
||||||
"agents should be able to render the document elements above this paragraph"
|
"agents should be able to render the document elements above this paragraph"
|
||||||
line 2 width: 470.585937, height: 13, bottom: 39, baseline: 9.498046
|
line 2 width: 470.585937, height: 13, bottom: 38.999999, baseline: 9.498046
|
||||||
frag 0 from TextNode start: 167, length: 43, rect: [20,361 207.900390x13]
|
frag 0 from TextNode start: 167, length: 43, rect: [20,361 207.900390x12.999999]
|
||||||
"indistinguishably (to the pixel) from this "
|
"indistinguishably (to the pixel) from this "
|
||||||
frag 1 from TextNode start: 0, length: 20, rect: [228,361 103.007812x13]
|
frag 1 from TextNode start: 0, length: 20, rect: [228,361 103.007812x12.999999]
|
||||||
"reference rendering,"
|
"reference rendering,"
|
||||||
frag 2 from TextNode start: 0, length: 31, rect: [331,361 159.677734x13]
|
frag 2 from TextNode start: 0, length: 31, rect: [331,361 159.677734x12.999999]
|
||||||
" (except font rasterization and"
|
" (except font rasterization and"
|
||||||
line 3 width: 465.019531, height: 13, bottom: 52, baseline: 9.498046
|
line 3 width: 465.019531, height: 13.000000, bottom: 51.999999, baseline: 9.498046
|
||||||
frag 0 from TextNode start: 32, length: 89, rect: [20,374 465.019531x13]
|
frag 0 from TextNode start: 32, length: 89, rect: [20,374 465.019531x12.999999]
|
||||||
"form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings."
|
"form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings."
|
||||||
line 4 width: 408.164062, height: 13, bottom: 65, baseline: 9.498046
|
line 4 width: 408.164062, height: 13.000001, bottom: 64.999999, baseline: 9.498046
|
||||||
frag 0 from TextNode start: 122, length: 67, rect: [20,387 345.556640x13]
|
frag 0 from TextNode start: 122, length: 67, rect: [20,387 345.556640x12.999999]
|
||||||
"Once you have finished evaluating this test, you can return to the "
|
"Once you have finished evaluating this test, you can return to the "
|
||||||
frag 1 from TextNode start: 0, length: 11, rect: [366,387 59.892578x13]
|
frag 1 from TextNode start: 0, length: 11, rect: [366,387 59.892578x12.999999]
|
||||||
"parent page"
|
"parent page"
|
||||||
frag 2 from TextNode start: 0, length: 1, rect: [425,387 2.714843x13]
|
frag 2 from TextNode start: 0, length: 1, rect: [425,387 2.714843x12.999999]
|
||||||
"."
|
"."
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
InlineNode <a>
|
InlineNode <a>
|
||||||
|
@ -131,5 +131,5 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
InlineNode <a>
|
InlineNode <a>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (20,400) content-size 480x0 children: inline
|
BlockContainer <(anonymous)> at (20,399.999999) content-size 480x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
|
@ -1,9 +1,9 @@
|
||||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (1,1) content-size 798x62.506248 [BFC] children: not-inline
|
BlockContainer <html> at (1,1) content-size 798x62.50625 [BFC] children: not-inline
|
||||||
BlockContainer <body> at (2,2) content-size 796x60.506248 children: inline
|
BlockContainer <body> at (2,2) content-size 796x60.50625 children: inline
|
||||||
line 0 width: 34, height: 28.50625, bottom: 28.50625, baseline: 28.50625
|
line 0 width: 34, height: 28.50625, bottom: 28.50625, baseline: 28.50625
|
||||||
frag 0 from BlockContainer start: 0, length: 0, rect: [4,3 30x30]
|
frag 0 from BlockContainer start: 0, length: 0, rect: [4,3 30x30]
|
||||||
line 1 width: 32, height: 28.506248, bottom: 60.506248, baseline: 28.50625
|
line 1 width: 32, height: 28.50625, bottom: 60.50625, baseline: 28.50625
|
||||||
frag 0 from BlockContainer start: 0, length: 0, rect: [3,35 30x30]
|
frag 0 from BlockContainer start: 0, length: 0, rect: [3,35 30x30]
|
||||||
BlockContainer <div.clump> at (4,3) content-size 30x30 inline-block [BFC] children: not-inline
|
BlockContainer <div.clump> at (4,3) content-size 30x30 inline-block [BFC] children: not-inline
|
||||||
BreakNode <br>
|
BreakNode <br>
|
||||||
|
|
|
@ -6,13 +6,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
"Lorem"
|
"Lorem"
|
||||||
frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.553385x21.835937]
|
frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.553385x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 2 from TextNode start: 7, length: 5, rect: [630.553344,10 56.621093x21.835937]
|
frag 2 from TextNode start: 7, length: 5, rect: [630.553385,10 56.621093x21.835937]
|
||||||
"ipsum"
|
"ipsum"
|
||||||
frag 3 from TextNode start: 12, length: 1, rect: [686.553344,10 12.553385x21.835937]
|
frag 3 from TextNode start: 12, length: 1, rect: [686.553385,10 12.553385x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 4 from TextNode start: 13, length: 5, rect: [699.106811,10 52.050781x21.835937]
|
frag 4 from TextNode start: 13, length: 5, rect: [699.106770,10 52.050781x21.835937]
|
||||||
"dolor"
|
"dolor"
|
||||||
frag 5 from TextNode start: 18, length: 1, rect: [751.106811,10 12.553385x21.835937]
|
frag 5 from TextNode start: 18, length: 1, rect: [751.106770,10 12.553385x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 6 from TextNode start: 19, length: 3, rect: [763.660156,10 25.957031x21.835937]
|
frag 6 from TextNode start: 19, length: 3, rect: [763.660156,10 25.957031x21.835937]
|
||||||
"sit"
|
"sit"
|
||||||
|
@ -90,13 +90,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
"rutrum"
|
"rutrum"
|
||||||
frag 1 from TextNode start: 166, length: 1, rect: [624,184 21.010416x21.835937]
|
frag 1 from TextNode start: 166, length: 1, rect: [624,184 21.010416x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 2 from TextNode start: 167, length: 4, rect: [645.010375,184 35.097656x21.835937]
|
frag 2 from TextNode start: 167, length: 4, rect: [645.010416,184 35.097656x21.835937]
|
||||||
"nisi"
|
"nisi"
|
||||||
frag 3 from TextNode start: 171, length: 1, rect: [680.010375,184 21.010416x21.835937]
|
frag 3 from TextNode start: 171, length: 1, rect: [680.010416,184 21.010416x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 4 from TextNode start: 172, length: 4, rect: [701.020874,184 39.824218x21.835937]
|
frag 4 from TextNode start: 172, length: 4, rect: [701.020833,184 39.824218x21.835937]
|
||||||
"eget"
|
"eget"
|
||||||
frag 5 from TextNode start: 176, length: 1, rect: [741.020874,184 21.010416x21.835937]
|
frag 5 from TextNode start: 176, length: 1, rect: [741.020833,184 21.010416x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 6 from TextNode start: 177, length: 3, rect: [762.03125,184 27.734375x21.835937]
|
frag 6 from TextNode start: 177, length: 3, rect: [762.03125,184 27.734375x21.835937]
|
||||||
"dui"
|
"dui"
|
||||||
|
@ -181,15 +181,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
line 17 width: 231.074218, height: 22.210937, bottom: 376.585937, baseline: 16.914062
|
line 17 width: 231.074218, height: 22.210937, bottom: 376.585937, baseline: 16.914062
|
||||||
frag 0 from TextNode start: 328, length: 5, rect: [252,364 48.59375x21.835937]
|
frag 0 from TextNode start: 328, length: 5, rect: [252,364 48.59375x21.835937]
|
||||||
"ante."
|
"ante."
|
||||||
frag 1 from TextNode start: 333, length: 1, rect: [301,364 11.641926x21.835937]
|
frag 1 from TextNode start: 333, length: 1, rect: [301,364 11.641927x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 2 from TextNode start: 334, length: 9, rect: [312.641937,364 94.765625x21.835937]
|
frag 2 from TextNode start: 334, length: 9, rect: [312.641927,364 94.765625x21.835937]
|
||||||
"Phasellus"
|
"Phasellus"
|
||||||
frag 3 from TextNode start: 343, length: 1, rect: [406.641906,364 11.641926x21.835937]
|
frag 3 from TextNode start: 343, length: 1, rect: [406.641927,364 11.641927x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 4 from TextNode start: 344, length: 1, rect: [418.283874,364 11.679687x21.835937]
|
frag 4 from TextNode start: 344, length: 1, rect: [418.283854,364 11.679687x21.835937]
|
||||||
"a"
|
"a"
|
||||||
frag 5 from TextNode start: 345, length: 1, rect: [430.283874,364 11.641926x21.835937]
|
frag 5 from TextNode start: 345, length: 1, rect: [430.283854,364 11.641927x21.835937]
|
||||||
" "
|
" "
|
||||||
frag 6 from TextNode start: 346, length: 4, rect: [441.925781,364 46.035156x21.835937]
|
frag 6 from TextNode start: 346, length: 4, rect: [441.925781,364 46.035156x21.835937]
|
||||||
"arcu"
|
"arcu"
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 164.666671x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 164.666666x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (176.666671,10) content-size 164.666671x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (176.666666,10) content-size 164.666666x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [176.666671,10 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [176.666666,10 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (343.333343,10) content-size 164.666671x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (343.333333,10) content-size 164.666666x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [343.333343,10 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [343.333333,10 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container.column> at (9,9) content-size 782x250 flex-container(column) [FFC] children: not-inline
|
Box <div.container.column> at (9,9) content-size 782x250 flex-container(column) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,93.333333) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333328 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333333 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,176.666666) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666656 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666666 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container.column> at (9,9) content-size 250x250 flex-container(column) [FFC] children: not-inline
|
Box <div.container.column> at (9,9) content-size 250x250 flex-container(column) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,93.333333) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333328 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333333 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,176.666666) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666656 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666666 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container> at (9,9) content-size 782x250 flex-container(column) [FFC] children: not-inline
|
Box <div.container> at (9,9) content-size 782x250 flex-container(column) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,93.333328) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,93.333333) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333328 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,93.333333 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,176.666656) content-size 100x81.333328 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,176.666666) content-size 100x81.333333 flex-item [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666656 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,176.666666 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container> at (9,9) content-size 250x102 flex-container(row) [FFC] children: not-inline
|
Box <div.container> at (9,9) content-size 250x102 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 81.333328x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 81.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (93.333328,10) content-size 81.333328x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (93.333333,10) content-size 81.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [93.333328,10 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [93.333333,10 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (176.666656,10) content-size 81.333328x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (176.666666,10) content-size 81.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [176.666656,10 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [176.666666,10 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container.width-constrained> at (9,9) content-size 250x102 flex-container(row) [FFC] children: not-inline
|
Box <div.container.width-constrained> at (9,9) content-size 250x102 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 81.333328x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 81.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (93.333328,10) content-size 81.333328x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (93.333333,10) content-size 81.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [93.333328,10 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [93.333333,10 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (176.666656,10) content-size 81.333328x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (176.666666,10) content-size 81.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [176.666656,10 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [176.666666,10 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,16 +4,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 229.333343x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 229.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 144.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 144.546875, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 17, rect: [10,10 144.546875x17.46875]
|
frag 0 from TextNode start: 0, length: 17, rect: [10,10 144.546875x17.46875]
|
||||||
"1 I grow the most"
|
"1 I grow the most"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (241.333343,10) content-size 164.666671x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (241.333333,10) content-size 164.666666x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 67.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 67.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 8, rect: [241.333343,10 67.375x17.46875]
|
frag 0 from TextNode start: 0, length: 8, rect: [241.333333,10 67.375x17.46875]
|
||||||
"2 I grow"
|
"2 I grow"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,16 +4,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 82.333335x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 82.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (94.333335,10) content-size 164.666671x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (94.333333,10) content-size 164.666666x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [94.333335,10 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [94.333333,10 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -6,9 +6,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.flex-container> at (11,11) content-size 600x10 flex-container(row) [FFC] children: not-inline
|
Box <div.flex-container> at (11,11) content-size 600x10 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (11,11) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (11,11) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.flex-item> at (12,72) content-size 27.15625x18.000007 flex-item [BFC] children: inline
|
BlockContainer <div.flex-item> at (12,71.999996) content-size 27.15625x18.000010 flex-item [BFC] children: inline
|
||||||
line 0 width: 27.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 27.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 3, rect: [12,72 27.15625x17.46875]
|
frag 0 from TextNode start: 0, length: 3, rect: [12,71.999996 27.15625x17.46875]
|
||||||
"foo"
|
"foo"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (11,11) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (11,11) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container> at (9,9) content-size 250x102 flex-container(row) [FFC] children: not-inline
|
Box <div.container> at (9,9) content-size 250x102 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 62.666664x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 62.666666x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 18.9375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 18.9375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 3, rect: [10,10 18.9375x17.46875]
|
frag 0 from TextNode start: 0, length: 3, rect: [10,10 18.9375x17.46875]
|
||||||
"1 I"
|
"1 I"
|
||||||
|
@ -20,9 +20,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (74.666664,10) content-size 81.333328x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (74.666666,10) content-size 81.333333x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 78.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 78.765625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 10, rect: [74.666664,10 78.765625x17.46875]
|
frag 0 from TextNode start: 0, length: 10, rect: [74.666666,10 78.765625x17.46875]
|
||||||
"2 I shrink"
|
"2 I shrink"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
Box <div.container> at (9,9) content-size 500x102 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (10,10) content-size 47.000030x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (10,10) content-size 47.000011x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [10,10 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (59.000030,10) content-size 164.666671x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (59.000011,10) content-size 164.666666x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [59.000030,10 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [59.000011,10 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.box> at (225.666702,10) content-size 282.333312x100 flex-item [BFC] children: inline
|
BlockContainer <div.box> at (225.666678,10) content-size 282.333321x100 flex-item [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [225.666702,10 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [225.666678,10 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (9,9) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (1,1) content-size 798x70 [BFC] children: not-inline
|
BlockContainer <html> at (1,1) content-size 798x70 [BFC] children: not-inline
|
||||||
Box <body> at (10,10) content-size 780x52 flex-container(row) [FFC] children: not-inline
|
Box <body> at (10,10) content-size 780x52 flex-container(row) [FFC] children: not-inline
|
||||||
ImageBox <img> at (11,11) content-size 66.666671x50 flex-item children: not-inline
|
ImageBox <img> at (11,11) content-size 66.666668x50 flex-item children: not-inline
|
||||||
BlockContainer <(anonymous)> at (10,10) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (10,10) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
|
@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.flex> at (11,11) content-size 300x200 flex-container(row) [FFC] children: not-inline
|
Box <div.flex> at (11,11) content-size 300x200 flex-container(row) [FFC] children: not-inline
|
||||||
BlockContainer <div> at (12,12) content-size 100x20 flex-item [BFC] children: not-inline
|
BlockContainer <div> at (12,12) content-size 100x20 flex-item [BFC] children: not-inline
|
||||||
BlockContainer <div> at (114,12) content-size 100x20 flex-item [BFC] children: not-inline
|
BlockContainer <div> at (114,12) content-size 100x20 flex-item [BFC] children: not-inline
|
||||||
BlockContainer <div> at (12,95.333328) content-size 100x20 flex-item [BFC] children: not-inline
|
BlockContainer <div> at (12,95.333333) content-size 100x20 flex-item [BFC] children: not-inline
|
||||||
BlockContainer <div> at (114,95.333328) content-size 100x20 flex-item [BFC] children: not-inline
|
BlockContainer <div> at (114,95.333333) content-size 100x20 flex-item [BFC] children: not-inline
|
||||||
BlockContainer <div> at (12,178.666656) content-size 100x20 flex-item [BFC] children: not-inline
|
BlockContainer <div> at (12,178.666666) content-size 100x20 flex-item [BFC] children: not-inline
|
||||||
BlockContainer <div> at (114,178.666656) content-size 100x20 flex-item [BFC] children: not-inline
|
BlockContainer <div> at (114,178.666666) content-size 100x20 flex-item [BFC] children: not-inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (8,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (269.333343,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (269.333333,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,8 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,8 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,8 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,23 +4,23 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (8,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (269.333343,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (269.333333,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,8 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,8 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,8 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -103,14 +103,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline
|
Box <div.grid-container> at (8,275.34375) content-size 784x90.9375 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (444.199981,285.34375) content-size 337.799987x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (444.199997,285.34375) content-size 337.800002x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [444.199981,285.34375 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [444.199997,285.34375 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,275.34375) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (18,338.8125) content-size 337.799987x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (18,338.8125) content-size 337.800002x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [18,338.8125 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [18,338.8125 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
|
|
|
@ -2,12 +2,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
BlockContainer <body> at (8,8) content-size 784x50.9375 children: not-inline
|
BlockContainer <body> at (8,8) content-size 784x50.9375 children: not-inline
|
||||||
Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
|
Box <div.container> at (8,8) content-size 784x50.9375 [GFC] children: not-inline
|
||||||
BlockContainer <div.item> at (434.199981,8) content-size 357.799987x17.46875 [BFC] children: inline
|
BlockContainer <div.item> at (434.199997,8) content-size 357.800002x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [434.199981,8 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [434.199997,8 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.item> at (8,41.46875) content-size 357.799987x17.46875 [BFC] children: inline
|
BlockContainer <div.item> at (8,41.46875) content-size 357.800002x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,41.46875 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [8,41.46875 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
|
|
|
@ -2,12 +2,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
||||||
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
BlockContainer <div.first> at (8,8) content-size 313.599975x17.46875 [BFC] children: inline
|
BlockContainer <div.first> at (8,8) content-size 313.599981x17.46875 [BFC] children: inline
|
||||||
line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 42.140625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875]
|
frag 0 from TextNode start: 0, length: 5, rect: [8,8 42.140625x17.46875]
|
||||||
"First"
|
"First"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.second> at (400,8) content-size 78.399993x17.46875 [BFC] children: inline
|
BlockContainer <div.second> at (400,8) content-size 78.399995x17.46875 [BFC] children: inline
|
||||||
line 0 width: 57.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 57.40625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 6, rect: [400,8 57.40625x17.46875]
|
frag 0 from TextNode start: 0, length: 6, rect: [400,8 57.40625x17.46875]
|
||||||
"Second"
|
"Second"
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
BlockContainer <body> at (8,8) content-size 784x24.000022 children: not-inline
|
BlockContainer <body> at (8,8) content-size 784x24 children: not-inline
|
||||||
Box <div.grid-container> at (8,8) content-size 784x24.000022 [GFC] children: not-inline
|
Box <div.grid-container> at (8,8) content-size 784x23.999999 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.wrapper> at (8,8) content-size 64.000061x24.000022 [BFC] children: inline
|
BlockContainer <div.wrapper> at (8,8) content-size 64x23.999999 [BFC] children: inline
|
||||||
line 0 width: 64.000061, height: 24.000022, bottom: 24.000022, baseline: 24.000022
|
line 0 width: 64, height: 23.999999, bottom: 23.999999, baseline: 23.999999
|
||||||
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 64.000061x24.000022]
|
frag 0 from ImageBox start: 0, length: 0, rect: [8,8 64x23.999999]
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
ImageBox <img> at (8,8) content-size 64.000061x24.000022 children: not-inline
|
ImageBox <img> at (8,8) content-size 64x23.999999 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
|
@ -7,12 +7,12 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <div.item-left> at (8,8) content-size 100x35.40625 [BFC] children: not-inline
|
BlockContainer <div.item-left> at (8,8) content-size 100x35.40625 [BFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.item-right> at (108.000061,8) content-size 683.999938x35.40625 [BFC] children: inline
|
BlockContainer <div.item-right> at (108,8) content-size 683.999999x35.40625 [BFC] children: inline
|
||||||
line 0 width: 625.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 625.953125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 77, rect: [108.000061,8 625.953125x17.46875]
|
frag 0 from TextNode start: 0, length: 77, rect: [108,8 625.953125x17.46875]
|
||||||
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis venenatis"
|
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis venenatis"
|
||||||
line 1 width: 304.0625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
line 1 width: 304.0625, height: 17.9375, bottom: 35.40625, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 78, length: 39, rect: [108.000061,25 304.0625x17.46875]
|
frag 0 from TextNode start: 78, length: 39, rect: [108,25 304.0625x17.46875]
|
||||||
"purus, eget blandit velit venenatis at."
|
"purus, eget blandit velit venenatis at."
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -25,30 +25,30 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.grid-container> at (8,25.46875) content-size 784x75 [GFC] children: not-inline
|
Box <div.grid-container> at (8,25.46875) content-size 784x75 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333343x75 [BFC] children: inline
|
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333333x75 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (530.666687,25.46875) content-size 261.333343x50 [BFC] children: inline
|
BlockContainer <div.grid-item> at (530.666666,25.46875) content-size 261.333333x50 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,25.46875 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,25.46875 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 261.333343x25 [BFC] children: inline
|
BlockContainer <div.grid-item> at (269.333333,25.46875) content-size 261.333333x25 [BFC] children: inline
|
||||||
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 9.09375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,25.46875 9.09375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,25.46875 9.09375x17.46875]
|
||||||
"3"
|
"3"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (269.333343,75.46875) content-size 522.666687x25 [BFC] children: inline
|
BlockContainer <div.grid-item> at (269.333333,75.46875) content-size 522.666666x25 [BFC] children: inline
|
||||||
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 7.75, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,75.46875 7.75x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,75.46875 7.75x17.46875]
|
||||||
"4"
|
"4"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -4,16 +4,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
Box <div.grid-container> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (8,8) content-size 522.666687x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (8,8) content-size 522.666666x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [8,8 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [530.666687,8 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [530.666666,8 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,8) content-size 0x0 [BFC] children: inline
|
||||||
|
@ -25,16 +25,16 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
Box <div.grid-container> at (8,25.46875) content-size 784x17.46875 [GFC] children: not-inline
|
Box <div.grid-container> at (8,25.46875) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (8,25.46875) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 6.34375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [8,25.46875 6.34375x17.46875]
|
||||||
"1"
|
"1"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.grid-item> at (269.333343,25.46875) content-size 522.666687x17.46875 [BFC] children: inline
|
BlockContainer <div.grid-item> at (269.333333,25.46875) content-size 522.666666x17.46875 [BFC] children: inline
|
||||||
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 8.8125, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 1, rect: [269.333343,25.46875 8.8125x17.46875]
|
frag 0 from TextNode start: 0, length: 1, rect: [269.333333,25.46875 8.8125x17.46875]
|
||||||
"2"
|
"2"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
BlockContainer <(anonymous)> at (8,25.46875) content-size 0x0 [BFC] children: inline
|
||||||
|
|
|
@ -2,13 +2,13 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
|
||||||
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
BlockContainer <body> at (8,8) content-size 784x17.46875 children: not-inline
|
||||||
Box <div.grid> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
Box <div.grid> at (8,8) content-size 784x17.46875 [GFC] children: not-inline
|
||||||
BlockContainer <div.item-left> at (8,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.item-left> at (8,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
|
frag 0 from TextNode start: 0, length: 3, rect: [8,8 21.609375x17.46875]
|
||||||
"1fr"
|
"1fr"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.item-right> at (530.666687,8) content-size 261.333343x17.46875 [BFC] children: inline
|
BlockContainer <div.item-right> at (530.666666,8) content-size 261.333333x17.46875 [BFC] children: inline
|
||||||
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 21.609375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 3, rect: [530.666687,8 21.609375x17.46875]
|
frag 0 from TextNode start: 0, length: 3, rect: [530.666666,8 21.609375x17.46875]
|
||||||
"1fr"
|
"1fr"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
|
@ -4,9 +4,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <body> at (8,8) content-size 784x0 children: inline
|
BlockContainer <body> at (8,8) content-size 784x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <h1> at (76.590553,103.754333) content-size 126x38 positioned [BFC] children: inline
|
BlockContainer <h1> at (76.590551,103.754331) content-size 126x38 positioned [BFC] children: inline
|
||||||
line 0 width: 46.523437, height: 21.835937, bottom: 21.835937, baseline: 16.914062
|
line 0 width: 46.523437, height: 21.835937, bottom: 21.835937, baseline: 16.914062
|
||||||
frag 0 from TextNode start: 0, length: 4, rect: [116.590553,103.754333 46.523437x21.835937]
|
frag 0 from TextNode start: 0, length: 4, rect: [116.590551,103.754331 46.523437x21.835937]
|
||||||
"Test"
|
"Test"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
|
@ -100,6 +100,6 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGSVGBox <svg> at (249,201) content-size 160x60 [SVG] children: inline
|
SVGSVGBox <svg> at (249,201) content-size 160x60 [SVG] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <circle> at (299,201) content-size 60x60 children: not-inline
|
SVGGeometryBox <circle> at (299,200.999998) content-size 60x60.000003 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
|
|
@ -28,7 +28,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGraphicsBox <g> children: inline
|
SVGGraphicsBox <g> children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <path> at (84.5,159.504882) content-size 81x80.995117 children: not-inline
|
SVGGeometryBox <path> at (84.5,159.504878) content-size 81x80.995117 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
|
@ -43,15 +43,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <rect> at (506,90) content-size 120x120 children: not-inline
|
SVGGeometryBox <rect> at (506,90) content-size 120x120 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <rect> at (471.358978,90) content-size 189.282043x120 children: not-inline
|
SVGGeometryBox <rect> at (471.358985,90) content-size 189.282043x120 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGSVGBox <svg> at (50,250) content-size 200x200 [SVG] children: inline
|
SVGSVGBox <svg> at (50,250) content-size 200x200 [SVG] children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <rect> at (120.588233,320.588256) content-size 58.823524x58.823532 children: not-inline
|
SVGGeometryBox <rect> at (120.588233,320.588241) content-size 58.823524x58.823532 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <rect> at (52.443771,310.373657) content-size 68.144462x68.144454 children: not-inline
|
SVGGeometryBox <rect> at (52.443771,310.373641) content-size 68.144462x68.144454 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <rect> at (179.411773,321.481903) content-size 68.14447x68.14447 children: not-inline
|
SVGGeometryBox <rect> at (179.411773,321.481903) content-size 68.14447x68.14447 children: not-inline
|
||||||
|
@ -76,7 +76,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <rect> at (506,290) content-size 120x120 children: not-inline
|
SVGGeometryBox <rect> at (506,290) content-size 120x120 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGGeometryBox <rect> at (506,255.358978) content-size 120x189.282043 children: not-inline
|
SVGGeometryBox <rect> at (506,255.358985) content-size 120x189.282043 children: not-inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
SVGSVGBox <svg> at (50,450) content-size 200x200 [SVG] children: inline
|
SVGSVGBox <svg> at (50,450) content-size 200x200 [SVG] children: inline
|
||||||
|
|
|
@ -4,4 +4,4 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
line 0 width: 784, height: 784, bottom: 784, baseline: 784
|
line 0 width: 784, height: 784, bottom: 784, baseline: 784
|
||||||
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 784x784]
|
frag 0 from SVGSVGBox start: 0, length: 0, rect: [8,8 784x784]
|
||||||
SVGSVGBox <svg> at (8,8) content-size 784x784 [SVG] children: not-inline
|
SVGSVGBox <svg> at (8,8) content-size 784x784 [SVG] children: not-inline
|
||||||
SVGGeometryBox <rect> at (8,8) content-size 784x784 children: not-inline
|
SVGGeometryBox <rect> at (7.999992,7.999992) content-size 784x784 children: not-inline
|
||||||
|
|
|
@ -2,4 +2,4 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <html> at (0,0) content-size 800x800 [BFC] children: not-inline
|
BlockContainer <html> at (0,0) content-size 800x800 [BFC] children: not-inline
|
||||||
BlockContainer <body> at (8,8) content-size 784x784 children: not-inline
|
BlockContainer <body> at (8,8) content-size 784x784 children: not-inline
|
||||||
SVGSVGBox <svg> at (8,8) content-size 784x784 [SVG] children: not-inline
|
SVGSVGBox <svg> at (8,8) content-size 784x784 [SVG] children: not-inline
|
||||||
SVGGeometryBox <rect> at (8,8) content-size 784x784 children: not-inline
|
SVGGeometryBox <rect> at (7.999992,7.999992) content-size 784x784 children: not-inline
|
||||||
|
|
|
@ -6,9 +6,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
|
||||||
BlockContainer <div.cb> at (11,11) content-size 600x10 children: not-inline
|
BlockContainer <div.cb> at (11,11) content-size 600x10 children: not-inline
|
||||||
BlockContainer <(anonymous)> at (11,11) content-size 600x0 children: inline
|
BlockContainer <(anonymous)> at (11,11) content-size 600x0 children: inline
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <div.foo> at (12,72) content-size 598x18.000007 children: inline
|
BlockContainer <div.foo> at (12,71.999996) content-size 598x18.000010 children: inline
|
||||||
line 0 width: 27.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
line 0 width: 27.15625, height: 17.46875, bottom: 17.46875, baseline: 13.53125
|
||||||
frag 0 from TextNode start: 0, length: 3, rect: [12,72 27.15625x17.46875]
|
frag 0 from TextNode start: 0, length: 3, rect: [12,71.999996 27.15625x17.46875]
|
||||||
"foo"
|
"foo"
|
||||||
TextNode <#text>
|
TextNode <#text>
|
||||||
BlockContainer <(anonymous)> at (11,211) content-size 600x17.46875 children: inline
|
BlockContainer <(anonymous)> at (11,211) content-size 600x17.46875 children: inline
|
||||||
|
|
|
@ -370,7 +370,7 @@ void GradientTool::draw_gradient(GUI::Painter& painter, bool with_guidelines, co
|
||||||
auto gradient_rect_width = determine_required_side_length(t_gradient_center.x(), width);
|
auto gradient_rect_width = determine_required_side_length(t_gradient_center.x(), width);
|
||||||
auto gradient_max_side_length = AK::max(gradient_rect_height, gradient_rect_width);
|
auto gradient_max_side_length = AK::max(gradient_rect_height, gradient_rect_width);
|
||||||
auto gradient_rect = Gfx::IntRect::centered_at(t_gradient_center, { gradient_max_side_length, gradient_max_side_length });
|
auto gradient_rect = Gfx::IntRect::centered_at(t_gradient_center, { gradient_max_side_length, gradient_max_side_length });
|
||||||
float overall_gradient_length_in_rect = Gfx::calculate_gradient_length(gradient_rect.size(), rotation_degrees - 90);
|
float overall_gradient_length_in_rect = Gfx::calculate_gradient_length(gradient_rect.size().to_type<float>(), rotation_degrees - 90);
|
||||||
|
|
||||||
if (m_gradient_half_length == 0 || overall_gradient_length_in_rect == 0 || isnan(overall_gradient_length_in_rect))
|
if (m_gradient_half_length == 0 || overall_gradient_length_in_rect == 0 || isnan(overall_gradient_length_in_rect))
|
||||||
return;
|
return;
|
||||||
|
|
|
@ -135,7 +135,7 @@ struct BorderData {
|
||||||
public:
|
public:
|
||||||
Color color { Color::Transparent };
|
Color color { Color::Transparent };
|
||||||
CSS::LineStyle line_style { CSS::LineStyle::None };
|
CSS::LineStyle line_style { CSS::LineStyle::None };
|
||||||
float width { 0 };
|
double width { 0 };
|
||||||
};
|
};
|
||||||
|
|
||||||
using TransformValue = Variant<CSS::AngleOrCalculated, CSS::LengthPercentage, float>;
|
using TransformValue = Variant<CSS::AngleOrCalculated, CSS::LengthPercentage, float>;
|
||||||
|
|
|
@ -12,7 +12,7 @@
|
||||||
namespace Web::CSS {
|
namespace Web::CSS {
|
||||||
|
|
||||||
// https://www.w3.org/TR/CSS2/visufx.html#value-def-shape
|
// https://www.w3.org/TR/CSS2/visufx.html#value-def-shape
|
||||||
Gfx::FloatRect EdgeRect::resolved(Layout::Node const& layout_node, Gfx::FloatRect border_box) const
|
Gfx::FloatRect EdgeRect::resolved(Layout::Node const& layout_node, Gfx::Rect<double> border_box) const
|
||||||
{
|
{
|
||||||
// In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where
|
// In CSS 2.1, the only valid <shape> value is: rect(<top>, <right>, <bottom>, <left>) where
|
||||||
// <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and
|
// <top> and <bottom> specify offsets from the top border edge of the box, and <right>, and
|
||||||
|
|
|
@ -19,7 +19,7 @@ struct EdgeRect {
|
||||||
Length right_edge;
|
Length right_edge;
|
||||||
Length bottom_edge;
|
Length bottom_edge;
|
||||||
Length left_edge;
|
Length left_edge;
|
||||||
Gfx::FloatRect resolved(Layout::Node const&, Gfx::FloatRect) const;
|
Gfx::FloatRect resolved(Layout::Node const&, Gfx::Rect<double>) const;
|
||||||
bool operator==(EdgeRect const&) const = default;
|
bool operator==(EdgeRect const&) const = default;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
@ -14,7 +14,7 @@ GridSize::GridSize(LengthPercentage length_percentage)
|
||||||
: m_type(Type::LengthPercentage)
|
: m_type(Type::LengthPercentage)
|
||||||
, m_length_percentage(length_percentage) {};
|
, m_length_percentage(length_percentage) {};
|
||||||
|
|
||||||
GridSize::GridSize(float flex_factor)
|
GridSize::GridSize(double flex_factor)
|
||||||
: m_type(Type::FlexibleLength)
|
: m_type(Type::FlexibleLength)
|
||||||
, m_length_percentage { Length::make_px(0) }
|
, m_length_percentage { Length::make_px(0) }
|
||||||
, m_flex_factor(flex_factor)
|
, m_flex_factor(flex_factor)
|
||||||
|
|
|
@ -21,7 +21,7 @@ public:
|
||||||
};
|
};
|
||||||
|
|
||||||
GridSize(LengthPercentage);
|
GridSize(LengthPercentage);
|
||||||
GridSize(float);
|
GridSize(double);
|
||||||
GridSize(Type);
|
GridSize(Type);
|
||||||
GridSize();
|
GridSize();
|
||||||
~GridSize();
|
~GridSize();
|
||||||
|
@ -37,7 +37,7 @@ public:
|
||||||
bool is_min_content() const { return m_type == Type::MinContent; }
|
bool is_min_content() const { return m_type == Type::MinContent; }
|
||||||
|
|
||||||
LengthPercentage length_percentage() const { return m_length_percentage; };
|
LengthPercentage length_percentage() const { return m_length_percentage; };
|
||||||
float flex_factor() const { return m_flex_factor; }
|
double flex_factor() const { return m_flex_factor; }
|
||||||
|
|
||||||
// https://www.w3.org/TR/css-grid-2/#layout-algorithm
|
// https://www.w3.org/TR/css-grid-2/#layout-algorithm
|
||||||
// An intrinsic sizing function (min-content, max-content, auto, fit-content()).
|
// An intrinsic sizing function (min-content, max-content, auto, fit-content()).
|
||||||
|
@ -65,7 +65,7 @@ public:
|
||||||
private:
|
private:
|
||||||
Type m_type;
|
Type m_type;
|
||||||
LengthPercentage m_length_percentage;
|
LengthPercentage m_length_percentage;
|
||||||
float m_flex_factor { 0 };
|
double m_flex_factor { 0 };
|
||||||
};
|
};
|
||||||
|
|
||||||
class GridMinMax {
|
class GridMinMax {
|
||||||
|
|
|
@ -35,7 +35,7 @@ Length::Length(int value, Type type)
|
||||||
, m_value(value)
|
, m_value(value)
|
||||||
{
|
{
|
||||||
}
|
}
|
||||||
Length::Length(float value, Type type)
|
Length::Length(double value, Type type)
|
||||||
: m_type(type)
|
: m_type(type)
|
||||||
, m_value(value)
|
, m_value(value)
|
||||||
{
|
{
|
||||||
|
@ -59,7 +59,7 @@ Length Length::percentage_of(Percentage const& percentage) const
|
||||||
return *this;
|
return *this;
|
||||||
}
|
}
|
||||||
|
|
||||||
return Length { percentage.as_fraction() * raw_value(), m_type };
|
return Length { static_cast<double>(percentage.as_fraction()) * raw_value(), m_type };
|
||||||
}
|
}
|
||||||
|
|
||||||
CSSPixels Length::font_relative_length_to_px(Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const
|
CSSPixels Length::font_relative_length_to_px(Length::FontMetrics const& font_metrics, Length::FontMetrics const& root_font_metrics) const
|
||||||
|
|
|
@ -83,7 +83,7 @@ public:
|
||||||
static Optional<Type> unit_from_name(StringView);
|
static Optional<Type> unit_from_name(StringView);
|
||||||
|
|
||||||
Length(int value, Type type);
|
Length(int value, Type type);
|
||||||
Length(float value, Type type);
|
Length(double value, Type type);
|
||||||
~Length();
|
~Length();
|
||||||
|
|
||||||
static Length make_auto();
|
static Length make_auto();
|
||||||
|
@ -154,7 +154,7 @@ public:
|
||||||
}
|
}
|
||||||
|
|
||||||
Type type() const { return m_type; }
|
Type type() const { return m_type; }
|
||||||
float raw_value() const { return m_value; }
|
double raw_value() const { return m_value; }
|
||||||
|
|
||||||
CSSPixels to_px(Layout::Node const&) const;
|
CSSPixels to_px(Layout::Node const&) const;
|
||||||
|
|
||||||
|
@ -171,8 +171,8 @@ public:
|
||||||
|
|
||||||
ALWAYS_INLINE CSSPixels absolute_length_to_px() const
|
ALWAYS_INLINE CSSPixels absolute_length_to_px() const
|
||||||
{
|
{
|
||||||
constexpr float inch_pixels = 96.0f;
|
constexpr double inch_pixels = 96.0;
|
||||||
constexpr float centimeter_pixels = (inch_pixels / 2.54f);
|
constexpr double centimeter_pixels = (inch_pixels / 2.54);
|
||||||
switch (m_type) {
|
switch (m_type) {
|
||||||
case Type::Cm:
|
case Type::Cm:
|
||||||
return m_value * centimeter_pixels; // 1cm = 96px/2.54
|
return m_value * centimeter_pixels; // 1cm = 96px/2.54
|
||||||
|
@ -181,13 +181,13 @@ public:
|
||||||
case Type::Px:
|
case Type::Px:
|
||||||
return m_value; // 1px = 1/96th of 1in
|
return m_value; // 1px = 1/96th of 1in
|
||||||
case Type::Pt:
|
case Type::Pt:
|
||||||
return m_value * ((1.0f / 72.0f) * inch_pixels); // 1pt = 1/72th of 1in
|
return m_value * ((1.0 / 72.0) * inch_pixels); // 1pt = 1/72th of 1in
|
||||||
case Type::Pc:
|
case Type::Pc:
|
||||||
return m_value * ((1.0f / 6.0f) * inch_pixels); // 1pc = 1/6th of 1in
|
return m_value * ((1.0 / 6.0) * inch_pixels); // 1pc = 1/6th of 1in
|
||||||
case Type::Mm:
|
case Type::Mm:
|
||||||
return m_value * ((1.0f / 10.0f) * centimeter_pixels); // 1mm = 1/10th of 1cm
|
return m_value * ((1.0 / 10.0) * centimeter_pixels); // 1mm = 1/10th of 1cm
|
||||||
case Type::Q:
|
case Type::Q:
|
||||||
return m_value * ((1.0f / 40.0f) * centimeter_pixels); // 1Q = 1/40th of 1cm
|
return m_value * ((1.0 / 40.0) * centimeter_pixels); // 1Q = 1/40th of 1cm
|
||||||
default:
|
default:
|
||||||
VERIFY_NOT_REACHED();
|
VERIFY_NOT_REACHED();
|
||||||
}
|
}
|
||||||
|
@ -211,7 +211,7 @@ private:
|
||||||
char const* unit_name() const;
|
char const* unit_name() const;
|
||||||
|
|
||||||
Type m_type;
|
Type m_type;
|
||||||
float m_value { 0 };
|
double m_value { 0 };
|
||||||
};
|
};
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -18,11 +18,11 @@ CSSPixelPoint PositionValue::resolved(Layout::Node const& node, CSSPixelRect con
|
||||||
return rect.width() * [&] {
|
return rect.width() * [&] {
|
||||||
switch (preset) {
|
switch (preset) {
|
||||||
case HorizontalPreset::Left:
|
case HorizontalPreset::Left:
|
||||||
return 0.0f;
|
return 0.;
|
||||||
case HorizontalPreset::Center:
|
case HorizontalPreset::Center:
|
||||||
return 0.5f;
|
return 0.5;
|
||||||
case HorizontalPreset::Right:
|
case HorizontalPreset::Right:
|
||||||
return 1.0f;
|
return 1.;
|
||||||
default:
|
default:
|
||||||
VERIFY_NOT_REACHED();
|
VERIFY_NOT_REACHED();
|
||||||
}
|
}
|
||||||
|
@ -36,11 +36,11 @@ CSSPixelPoint PositionValue::resolved(Layout::Node const& node, CSSPixelRect con
|
||||||
return rect.height() * [&] {
|
return rect.height() * [&] {
|
||||||
switch (preset) {
|
switch (preset) {
|
||||||
case VerticalPreset::Top:
|
case VerticalPreset::Top:
|
||||||
return 0.0f;
|
return 0.;
|
||||||
case VerticalPreset::Center:
|
case VerticalPreset::Center:
|
||||||
return 0.5f;
|
return 0.5;
|
||||||
case VerticalPreset::Bottom:
|
case VerticalPreset::Bottom:
|
||||||
return 1.0f;
|
return 1.;
|
||||||
default:
|
default:
|
||||||
VERIFY_NOT_REACHED();
|
VERIFY_NOT_REACHED();
|
||||||
}
|
}
|
||||||
|
|
|
@ -1264,7 +1264,7 @@ void StyleComputer::compute_font(StyleProperties& style, DOM::Element const* ele
|
||||||
Optional<Length> maybe_length;
|
Optional<Length> maybe_length;
|
||||||
if (font_size->is_percentage()) {
|
if (font_size->is_percentage()) {
|
||||||
// Percentages refer to parent element's font size
|
// Percentages refer to parent element's font size
|
||||||
maybe_length = Length::make_px(font_size->as_percentage().percentage().as_fraction() * parent_font_size());
|
maybe_length = Length::make_px(static_cast<double>(font_size->as_percentage().percentage().as_fraction()) * parent_font_size());
|
||||||
|
|
||||||
} else if (font_size->is_length()) {
|
} else if (font_size->is_length()) {
|
||||||
maybe_length = font_size->to_length();
|
maybe_length = font_size->to_length();
|
||||||
|
@ -1438,7 +1438,7 @@ ErrorOr<void> StyleComputer::absolutize_values(StyleProperties& style, DOM::Elem
|
||||||
auto& line_height_value_slot = style.m_property_values[to_underlying(CSS::PropertyID::LineHeight)];
|
auto& line_height_value_slot = style.m_property_values[to_underlying(CSS::PropertyID::LineHeight)];
|
||||||
if (line_height_value_slot && line_height_value_slot->is_percentage()) {
|
if (line_height_value_slot && line_height_value_slot->is_percentage()) {
|
||||||
line_height_value_slot = TRY(LengthStyleValue::create(
|
line_height_value_slot = TRY(LengthStyleValue::create(
|
||||||
Length::make_px(font_size * line_height_value_slot->as_percentage().percentage().as_fraction())));
|
Length::make_px(font_size * static_cast<double>(line_height_value_slot->as_percentage().percentage().as_fraction()))));
|
||||||
}
|
}
|
||||||
|
|
||||||
auto line_height = style.line_height(viewport_rect(), font_metrics, m_root_element_font_metrics);
|
auto line_height = style.line_height(viewport_rect(), font_metrics, m_root_element_font_metrics);
|
||||||
|
|
|
@ -536,7 +536,7 @@ void CalculatedStyleValue::CalculationResult::multiply_by(CalculationResult cons
|
||||||
},
|
},
|
||||||
[&](Length const& length) {
|
[&](Length const& length) {
|
||||||
VERIFY(layout_node);
|
VERIFY(layout_node);
|
||||||
m_value = Length::make_px(length.to_px(*layout_node) * other.m_value.get<Number>().value());
|
m_value = Length::make_px(length.to_px(*layout_node) * static_cast<double>(other.m_value.get<Number>().value()));
|
||||||
},
|
},
|
||||||
[&](Time const& time) {
|
[&](Time const& time) {
|
||||||
m_value = Time::make_seconds(time.to_seconds() * other.m_value.get<Number>().value());
|
m_value = Time::make_seconds(time.to_seconds() * other.m_value.get<Number>().value());
|
||||||
|
@ -569,7 +569,7 @@ void CalculatedStyleValue::CalculationResult::divide_by(CalculationResult const&
|
||||||
},
|
},
|
||||||
[&](Length const& length) {
|
[&](Length const& length) {
|
||||||
VERIFY(layout_node);
|
VERIFY(layout_node);
|
||||||
m_value = Length::make_px(length.to_px(*layout_node) / denominator);
|
m_value = Length::make_px(length.to_px(*layout_node) / static_cast<double>(denominator));
|
||||||
},
|
},
|
||||||
[&](Time const& time) {
|
[&](Time const& time) {
|
||||||
m_value = Time::make_seconds(time.to_seconds() / denominator);
|
m_value = Time::make_seconds(time.to_seconds() / denominator);
|
||||||
|
|
|
@ -30,7 +30,7 @@ Filter::DropShadow::Resolved Filter::DropShadow::resolved(Layout::Node const& no
|
||||||
return Resolved {
|
return Resolved {
|
||||||
offset_x.to_px(node).value(),
|
offset_x.to_px(node).value(),
|
||||||
offset_y.to_px(node).value(),
|
offset_y.to_px(node).value(),
|
||||||
radius.has_value() ? radius->to_px(node).value() : 0.0f,
|
radius.has_value() ? radius->to_px(node).value() : 0.0,
|
||||||
color.has_value() ? *color : node.computed_values().color()
|
color.has_value() ? *color : node.computed_values().color()
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -30,9 +30,9 @@ struct DropShadow {
|
||||||
Optional<Length> radius {};
|
Optional<Length> radius {};
|
||||||
Optional<Color> color {};
|
Optional<Color> color {};
|
||||||
struct Resolved {
|
struct Resolved {
|
||||||
float offset_x;
|
double offset_x;
|
||||||
float offset_y;
|
double offset_y;
|
||||||
float radius;
|
double radius;
|
||||||
Color color;
|
Color color;
|
||||||
};
|
};
|
||||||
Resolved resolved(Layout::Node const&) const;
|
Resolved resolved(Layout::Node const&) const;
|
||||||
|
|
|
@ -146,12 +146,12 @@ Gfx::FloatSize RadialGradientStyleValue::resolve_size(Layout::Node const& node,
|
||||||
},
|
},
|
||||||
[&](CircleSize const& circle_size) {
|
[&](CircleSize const& circle_size) {
|
||||||
auto radius = circle_size.radius.to_px(node);
|
auto radius = circle_size.radius.to_px(node);
|
||||||
return Gfx::FloatSize { radius, radius };
|
return Gfx::FloatSize { radius.value(), radius.value() };
|
||||||
},
|
},
|
||||||
[&](EllipseSize const& ellipse_size) {
|
[&](EllipseSize const& ellipse_size) {
|
||||||
auto radius_a = ellipse_size.radius_a.resolved(node, CSS::Length::make_px(size.width())).to_px(node);
|
auto radius_a = ellipse_size.radius_a.resolved(node, CSS::Length::make_px(size.width())).to_px(node);
|
||||||
auto radius_b = ellipse_size.radius_b.resolved(node, CSS::Length::make_px(size.height())).to_px(node);
|
auto radius_b = ellipse_size.radius_b.resolved(node, CSS::Length::make_px(size.height())).to_px(node);
|
||||||
return Gfx::FloatSize { radius_a, radius_b };
|
return Gfx::FloatSize { radius_a.value(), radius_b.value() };
|
||||||
});
|
});
|
||||||
|
|
||||||
// Handle degenerate cases
|
// Handle degenerate cases
|
||||||
|
@ -187,8 +187,8 @@ Gfx::FloatSize RadialGradientStyleValue::resolve_size(Layout::Node const& node,
|
||||||
void RadialGradientStyleValue::resolve_for_size(Layout::Node const& node, CSSPixelSize paint_size) const
|
void RadialGradientStyleValue::resolve_for_size(Layout::Node const& node, CSSPixelSize paint_size) const
|
||||||
{
|
{
|
||||||
CSSPixelRect gradient_box { { 0, 0 }, paint_size };
|
CSSPixelRect gradient_box { { 0, 0 }, paint_size };
|
||||||
auto center = m_properties.position.resolved(node, gradient_box).to_type<float>();
|
auto center = m_properties.position.resolved(node, gradient_box).to_type<double>().to_type<float>();
|
||||||
auto gradient_size = resolve_size(node, center, gradient_box.to_type<float>());
|
auto gradient_size = resolve_size(node, center, gradient_box.to_type<double>().to_type<float>());
|
||||||
if (m_resolved.has_value() && m_resolved->gradient_size == gradient_size)
|
if (m_resolved.has_value() && m_resolved->gradient_size == gradient_size)
|
||||||
return;
|
return;
|
||||||
m_resolved = ResolvedData {
|
m_resolved = ResolvedData {
|
||||||
|
|
|
@ -1811,7 +1811,7 @@ void Document::run_the_resize_steps()
|
||||||
if (!browsing_context())
|
if (!browsing_context())
|
||||||
return;
|
return;
|
||||||
|
|
||||||
auto viewport_size = browsing_context()->viewport_rect().size().to_type<float>().to_type<int>();
|
auto viewport_size = browsing_context()->viewport_rect().size().to_type<double>().to_type<float>().to_type<int>();
|
||||||
if (m_last_viewport_size == viewport_size)
|
if (m_last_viewport_size == viewport_size)
|
||||||
return;
|
return;
|
||||||
m_last_viewport_size = viewport_size;
|
m_last_viewport_size = viewport_size;
|
||||||
|
|
|
@ -709,7 +709,7 @@ JS::NonnullGCPtr<Geometry::DOMRect> Element::get_bounding_client_rect() const
|
||||||
VERIFY(document().browsing_context());
|
VERIFY(document().browsing_context());
|
||||||
auto viewport_offset = document().browsing_context()->viewport_scroll_offset();
|
auto viewport_offset = document().browsing_context()->viewport_scroll_offset();
|
||||||
|
|
||||||
return Geometry::DOMRect::create(realm(), paintable_box->absolute_rect().translated(-viewport_offset.x(), -viewport_offset.y()).to_type<float>()).release_value_but_fixme_should_propagate_errors();
|
return Geometry::DOMRect::create(realm(), paintable_box->absolute_rect().translated(-viewport_offset.x(), -viewport_offset.y()).to_type<double>().to_type<float>()).release_value_but_fixme_should_propagate_errors();
|
||||||
}
|
}
|
||||||
|
|
||||||
// https://drafts.csswg.org/cssom-view/#dom-element-getclientrects
|
// https://drafts.csswg.org/cssom-view/#dom-element-getclientrects
|
||||||
|
|
|
@ -338,7 +338,7 @@ SourceSet SourceSet::create(DOM::Document const& document, String default_source
|
||||||
bool contains_image_source_with_width_descriptor = false;
|
bool contains_image_source_with_width_descriptor = false;
|
||||||
for (auto& source : source_set.m_sources) {
|
for (auto& source : source_set.m_sources) {
|
||||||
if (source.descriptor.has<ImageSource::PixelDensityDescriptorValue>()) {
|
if (source.descriptor.has<ImageSource::PixelDensityDescriptorValue>()) {
|
||||||
if (source.descriptor.get<ImageSource::PixelDensityDescriptorValue>().value == 1.0f)
|
if (source.descriptor.get<ImageSource::PixelDensityDescriptorValue>().value == 1.0)
|
||||||
contains_image_source_with_pixel_density_descriptor_value_of_1 = true;
|
contains_image_source_with_pixel_density_descriptor_value_of_1 = true;
|
||||||
}
|
}
|
||||||
if (source.descriptor.has<ImageSource::WidthDescriptorValue>())
|
if (source.descriptor.has<ImageSource::WidthDescriptorValue>())
|
||||||
|
|
|
@ -15,7 +15,7 @@ namespace Web::HTML {
|
||||||
// https://html.spec.whatwg.org/multipage/images.html#image-source
|
// https://html.spec.whatwg.org/multipage/images.html#image-source
|
||||||
struct ImageSource {
|
struct ImageSource {
|
||||||
struct PixelDensityDescriptorValue {
|
struct PixelDensityDescriptorValue {
|
||||||
float value { 0 };
|
double value { 0 };
|
||||||
};
|
};
|
||||||
|
|
||||||
struct WidthDescriptorValue {
|
struct WidthDescriptorValue {
|
||||||
|
@ -28,7 +28,7 @@ struct ImageSource {
|
||||||
|
|
||||||
struct ImageSourceAndPixelDensity {
|
struct ImageSourceAndPixelDensity {
|
||||||
ImageSource source;
|
ImageSource source;
|
||||||
float pixel_density { 1.0f };
|
double pixel_density { 1.0f };
|
||||||
};
|
};
|
||||||
|
|
||||||
// https://html.spec.whatwg.org/multipage/images.html#source-set
|
// https://html.spec.whatwg.org/multipage/images.html#source-set
|
||||||
|
|
|
@ -1077,7 +1077,7 @@ void Window::scroll(ScrollToOptions const& options)
|
||||||
// 1. If invoked with one argument, follow these substeps:
|
// 1. If invoked with one argument, follow these substeps:
|
||||||
|
|
||||||
// 1. Let options be the argument.
|
// 1. Let options be the argument.
|
||||||
auto viewport_rect = top_level_browsing_context.viewport_rect().to_type<float>();
|
auto viewport_rect = top_level_browsing_context.viewport_rect().to_type<double>().to_type<float>();
|
||||||
|
|
||||||
// 2. Let x be the value of the left dictionary member of options, if present, or the viewport’s current scroll
|
// 2. Let x be the value of the left dictionary member of options, if present, or the viewport’s current scroll
|
||||||
// position on the x axis otherwise.
|
// position on the x axis otherwise.
|
||||||
|
|
|
@ -994,7 +994,7 @@ void BlockFormattingContext::layout_list_item_marker(ListItemBox const& list_ite
|
||||||
marker_state.set_content_height(max(image_height, marker.font().pixel_size_rounded_up() + 1).value());
|
marker_state.set_content_height(max(image_height, marker.font().pixel_size_rounded_up() + 1).value());
|
||||||
|
|
||||||
marker_state.set_content_offset({ -(marker_state.content_width() + default_marker_width),
|
marker_state.set_content_offset({ -(marker_state.content_width() + default_marker_width),
|
||||||
max(CSSPixels(0.f), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2.f) });
|
max(CSSPixels(0), (CSSPixels(marker.line_height()) - marker_state.content_height()) / 2) });
|
||||||
|
|
||||||
if (marker_state.content_height() > list_item_state.content_height())
|
if (marker_state.content_height() > list_item_state.content_height())
|
||||||
list_item_state.set_content_height(marker_state.content_height());
|
list_item_state.set_content_height(marker_state.content_height());
|
||||||
|
|
|
@ -577,7 +577,7 @@ CSS::FlexBasisData FlexFormattingContext::used_flex_basis_for_item(FlexItem cons
|
||||||
return flex_basis;
|
return flex_basis;
|
||||||
}
|
}
|
||||||
|
|
||||||
CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, float aspect_ratio) const
|
CSSPixels FlexFormattingContext::calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, double aspect_ratio) const
|
||||||
{
|
{
|
||||||
if (is_row_layout())
|
if (is_row_layout())
|
||||||
return cross_size * aspect_ratio;
|
return cross_size * aspect_ratio;
|
||||||
|
@ -717,7 +717,7 @@ void FlexFormattingContext::determine_flex_base_size_and_hypothetical_main_size(
|
||||||
// The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
|
// The hypothetical main size is the item’s flex base size clamped according to its used min and max main sizes (and flooring the content box size at zero).
|
||||||
auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(item);
|
auto clamp_min = has_main_min_size(child_box) ? specified_main_min_size(child_box) : automatic_minimum_size(item);
|
||||||
auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
|
auto clamp_max = has_main_max_size(child_box) ? specified_main_max_size(child_box) : NumericLimits<float>::max();
|
||||||
item.hypothetical_main_size = max(CSSPixels(0.0f), css_clamp(item.flex_base_size, clamp_min, clamp_max));
|
item.hypothetical_main_size = max(CSSPixels(0), css_clamp(item.flex_base_size, clamp_min, clamp_max));
|
||||||
|
|
||||||
// NOTE: At this point, we set the hypothetical main size as the flex item's *temporary* main size.
|
// NOTE: At this point, we set the hypothetical main size as the flex item's *temporary* main size.
|
||||||
// The size may change again when we resolve flexible lengths, but this is necessary in order for
|
// The size may change again when we resolve flexible lengths, but this is necessary in order for
|
||||||
|
@ -1006,7 +1006,7 @@ void FlexFormattingContext::resolve_flexible_lengths_for_line(FlexLine& line)
|
||||||
for (auto& item : line.items) {
|
for (auto& item : line.items) {
|
||||||
if (item.frozen)
|
if (item.frozen)
|
||||||
continue;
|
continue;
|
||||||
float ratio = item.flex_factor.value() / sum_of_flex_factor_of_unfrozen_items;
|
double ratio = item.flex_factor.value() / sum_of_flex_factor_of_unfrozen_items;
|
||||||
// Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio.
|
// Set the item’s target main size to its flex base size plus a fraction of the remaining free space proportional to the ratio.
|
||||||
item.target_main_size = item.flex_base_size + (line.remaining_free_space * ratio);
|
item.target_main_size = item.flex_base_size + (line.remaining_free_space * ratio);
|
||||||
}
|
}
|
||||||
|
@ -1024,7 +1024,7 @@ void FlexFormattingContext::resolve_flexible_lengths_for_line(FlexLine& line)
|
||||||
if (item.frozen)
|
if (item.frozen)
|
||||||
continue;
|
continue;
|
||||||
// Find the ratio of the item’s scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line.
|
// Find the ratio of the item’s scaled flex shrink factor to the sum of the scaled flex shrink factors of all unfrozen items on the line.
|
||||||
float ratio = 1.0f;
|
double ratio = 1.0;
|
||||||
if (sum_of_scaled_flex_shrink_factors_of_all_unfrozen_items_on_line != 0)
|
if (sum_of_scaled_flex_shrink_factors_of_all_unfrozen_items_on_line != 0)
|
||||||
ratio = item.scaled_flex_shrink_factor / sum_of_scaled_flex_shrink_factors_of_all_unfrozen_items_on_line;
|
ratio = item.scaled_flex_shrink_factor / sum_of_scaled_flex_shrink_factors_of_all_unfrozen_items_on_line;
|
||||||
|
|
||||||
|
@ -1207,7 +1207,7 @@ void FlexFormattingContext::calculate_cross_size_of_each_flex_line()
|
||||||
}
|
}
|
||||||
|
|
||||||
// 3. The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
|
// 3. The used cross-size of the flex line is the largest of the numbers found in the previous two steps and zero.
|
||||||
flex_line.cross_size = max(CSSPixels(0.0f), largest_hypothetical_cross_size);
|
flex_line.cross_size = max(CSSPixels(0), largest_hypothetical_cross_size);
|
||||||
}
|
}
|
||||||
|
|
||||||
// If the flex container is single-line, then clamp the line’s cross-size to be within the container’s computed min and max cross sizes.
|
// If the flex container is single-line, then clamp the line’s cross-size to be within the container’s computed min and max cross sizes.
|
||||||
|
@ -1276,7 +1276,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
||||||
used_main_space += main_gap() * (flex_line.items.size() - 1);
|
used_main_space += main_gap() * (flex_line.items.size() - 1);
|
||||||
|
|
||||||
if (flex_line.remaining_free_space > 0) {
|
if (flex_line.remaining_free_space > 0) {
|
||||||
CSSPixels size_per_auto_margin = flex_line.remaining_free_space / (float)auto_margins;
|
CSSPixels size_per_auto_margin = flex_line.remaining_free_space / static_cast<double>(auto_margins);
|
||||||
for (auto& item : flex_line.items) {
|
for (auto& item : flex_line.items) {
|
||||||
if (item.margins.main_before_is_auto)
|
if (item.margins.main_before_is_auto)
|
||||||
set_main_axis_first_margin(item, size_per_auto_margin);
|
set_main_axis_first_margin(item, size_per_auto_margin);
|
||||||
|
@ -1317,7 +1317,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case CSS::JustifyContent::Center:
|
case CSS::JustifyContent::Center:
|
||||||
initial_offset = (inner_main_size(flex_container()) - used_main_space) / 2.0f;
|
initial_offset = (inner_main_size(flex_container()) - used_main_space) / 2.0;
|
||||||
if (is_direction_reverse()) {
|
if (is_direction_reverse()) {
|
||||||
initial_offset = inner_main_size(flex_container()) - initial_offset;
|
initial_offset = inner_main_size(flex_container()) - initial_offset;
|
||||||
}
|
}
|
||||||
|
@ -1327,7 +1327,7 @@ void FlexFormattingContext::distribute_any_remaining_free_space()
|
||||||
break;
|
break;
|
||||||
case CSS::JustifyContent::SpaceAround:
|
case CSS::JustifyContent::SpaceAround:
|
||||||
space_between_items = flex_line.remaining_free_space / number_of_items;
|
space_between_items = flex_line.remaining_free_space / number_of_items;
|
||||||
initial_offset = space_between_items / 2.0f;
|
initial_offset = space_between_items / 2.0;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -1443,7 +1443,7 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
|
||||||
// FIXME: Take better care of margins
|
// FIXME: Take better care of margins
|
||||||
for (auto& flex_line : m_flex_lines) {
|
for (auto& flex_line : m_flex_lines) {
|
||||||
for (auto& item : flex_line.items) {
|
for (auto& item : flex_line.items) {
|
||||||
CSSPixels half_line_size = flex_line.cross_size / 2.0f;
|
CSSPixels half_line_size = flex_line.cross_size / 2.0;
|
||||||
switch (alignment_for_item(item.box)) {
|
switch (alignment_for_item(item.box)) {
|
||||||
case CSS::AlignItems::Baseline:
|
case CSS::AlignItems::Baseline:
|
||||||
// FIXME: Implement this
|
// FIXME: Implement this
|
||||||
|
@ -1456,7 +1456,7 @@ void FlexFormattingContext::align_all_flex_items_along_the_cross_axis()
|
||||||
item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
|
item.cross_offset = half_line_size - item.cross_size.value() - item.margins.cross_after - item.borders.cross_after - item.padding.cross_after;
|
||||||
break;
|
break;
|
||||||
case CSS::AlignItems::Center:
|
case CSS::AlignItems::Center:
|
||||||
item.cross_offset = -(item.cross_size.value() / 2.0f);
|
item.cross_offset = -(item.cross_size.value() / 2.0);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
|
@ -1511,7 +1511,7 @@ void FlexFormattingContext::align_all_flex_lines()
|
||||||
if (is_single_line()) {
|
if (is_single_line()) {
|
||||||
// For single-line flex containers, we only need to center the line along the cross axis.
|
// For single-line flex containers, we only need to center the line along the cross axis.
|
||||||
auto& flex_line = m_flex_lines[0];
|
auto& flex_line = m_flex_lines[0];
|
||||||
CSSPixels center_of_line = cross_size_of_flex_container / 2.0f;
|
CSSPixels center_of_line = cross_size_of_flex_container / 2.0;
|
||||||
for (auto& item : flex_line.items) {
|
for (auto& item : flex_line.items) {
|
||||||
item.cross_offset += center_of_line;
|
item.cross_offset += center_of_line;
|
||||||
}
|
}
|
||||||
|
@ -1711,9 +1711,9 @@ CSSPixels FlexFormattingContext::calculate_intrinsic_main_size_of_flex_container
|
||||||
// and the chosen flex fraction, then clamp that result by the max main size floored by the min main size.
|
// and the chosen flex fraction, then clamp that result by the max main size floored by the min main size.
|
||||||
CSSPixels sum = 0;
|
CSSPixels sum = 0;
|
||||||
for (auto& item : flex_line.items) {
|
for (auto& item : flex_line.items) {
|
||||||
float product = 0;
|
double product = 0;
|
||||||
if (item.desired_flex_fraction > 0)
|
if (item.desired_flex_fraction > 0)
|
||||||
product = flex_line.chosen_flex_fraction * item.box->computed_values().flex_grow();
|
product = flex_line.chosen_flex_fraction * static_cast<double>(item.box->computed_values().flex_grow());
|
||||||
else if (item.desired_flex_fraction < 0)
|
else if (item.desired_flex_fraction < 0)
|
||||||
product = flex_line.chosen_flex_fraction * item.scaled_flex_shrink_factor;
|
product = flex_line.chosen_flex_fraction * item.scaled_flex_shrink_factor;
|
||||||
auto result = item.flex_base_size + product;
|
auto result = item.flex_base_size + product;
|
||||||
|
@ -2036,8 +2036,8 @@ void FlexFormattingContext::resolve_cross_axis_auto_margins()
|
||||||
if (outer_cross_size < line.cross_size) {
|
if (outer_cross_size < line.cross_size) {
|
||||||
CSSPixels remainder = line.cross_size - outer_cross_size;
|
CSSPixels remainder = line.cross_size - outer_cross_size;
|
||||||
if (item.margins.cross_before_is_auto && item.margins.cross_after_is_auto) {
|
if (item.margins.cross_before_is_auto && item.margins.cross_after_is_auto) {
|
||||||
item.margins.cross_before = remainder / 2.0f;
|
item.margins.cross_before = remainder / 2.0;
|
||||||
item.margins.cross_after = remainder / 2.0f;
|
item.margins.cross_after = remainder / 2.0;
|
||||||
} else if (item.margins.cross_before_is_auto) {
|
} else if (item.margins.cross_before_is_auto) {
|
||||||
item.margins.cross_before = remainder;
|
item.margins.cross_before = remainder;
|
||||||
} else {
|
} else {
|
||||||
|
@ -2110,13 +2110,13 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
|
||||||
cross_offset = half_line_size - inner_cross_size(box) - cross_margin_after - cross_border_after - cross_padding_after;
|
cross_offset = half_line_size - inner_cross_size(box) - cross_margin_after - cross_border_after - cross_padding_after;
|
||||||
break;
|
break;
|
||||||
case CSS::AlignItems::Center:
|
case CSS::AlignItems::Center:
|
||||||
cross_offset = -(inner_cross_size(box) / 2.0f);
|
cross_offset = -(inner_cross_size(box) / 2.0);
|
||||||
break;
|
break;
|
||||||
default:
|
default:
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
cross_offset += inner_cross_size(flex_container()) / 2.0f;
|
cross_offset += inner_cross_size(flex_container()) / 2.0;
|
||||||
|
|
||||||
// The main-axis edges of the static-position rectangle are where the margin edges of the child
|
// The main-axis edges of the static-position rectangle are where the margin edges of the child
|
||||||
// would be positioned if it were the sole flex item in the flex container,
|
// would be positioned if it were the sole flex item in the flex container,
|
||||||
|
@ -2161,7 +2161,7 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
|
||||||
break;
|
break;
|
||||||
case CSS::JustifyContent::Center:
|
case CSS::JustifyContent::Center:
|
||||||
case CSS::JustifyContent::SpaceAround:
|
case CSS::JustifyContent::SpaceAround:
|
||||||
main_offset = inner_main_size(flex_container()) / 2.0f - inner_main_size(box) / 2.0f;
|
main_offset = inner_main_size(flex_container()) / 2.0 - inner_main_size(box) / 2.0;
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2185,9 +2185,9 @@ CSSPixelPoint FlexFormattingContext::calculate_static_position(Box const& box) c
|
||||||
return static_position_offset + diff;
|
return static_position_offset + diff;
|
||||||
}
|
}
|
||||||
|
|
||||||
float FlexFormattingContext::FlexLine::sum_of_flex_factor_of_unfrozen_items() const
|
double FlexFormattingContext::FlexLine::sum_of_flex_factor_of_unfrozen_items() const
|
||||||
{
|
{
|
||||||
float sum = 0;
|
double sum = 0;
|
||||||
for (auto const& item : items) {
|
for (auto const& item : items) {
|
||||||
if (!item.frozen)
|
if (!item.frozen)
|
||||||
sum += item.flex_factor.value();
|
sum += item.flex_factor.value();
|
||||||
|
@ -2195,9 +2195,9 @@ float FlexFormattingContext::FlexLine::sum_of_flex_factor_of_unfrozen_items() co
|
||||||
return sum;
|
return sum;
|
||||||
}
|
}
|
||||||
|
|
||||||
float FlexFormattingContext::FlexLine::sum_of_scaled_flex_shrink_factor_of_unfrozen_items() const
|
double FlexFormattingContext::FlexLine::sum_of_scaled_flex_shrink_factor_of_unfrozen_items() const
|
||||||
{
|
{
|
||||||
float sum = 0;
|
double sum = 0;
|
||||||
for (auto const& item : items) {
|
for (auto const& item : items) {
|
||||||
if (!item.frozen)
|
if (!item.frozen)
|
||||||
sum += item.scaled_flex_shrink_factor;
|
sum += item.scaled_flex_shrink_factor;
|
||||||
|
|
|
@ -35,7 +35,7 @@ private:
|
||||||
[[nodiscard]] bool should_treat_cross_size_as_auto(Box const&) const;
|
[[nodiscard]] bool should_treat_cross_size_as_auto(Box const&) const;
|
||||||
|
|
||||||
[[nodiscard]] CSSPixels adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const&, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const;
|
[[nodiscard]] CSSPixels adjust_main_size_through_aspect_ratio_for_cross_size_min_max_constraints(Box const&, CSSPixels main_size, CSS::Size const& min_cross_size, CSS::Size const& max_cross_size) const;
|
||||||
[[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, float aspect_ratio) const;
|
[[nodiscard]] CSSPixels calculate_main_size_from_cross_size_and_aspect_ratio(CSSPixels cross_size, double aspect_ratio) const;
|
||||||
|
|
||||||
void dump_items() const;
|
void dump_items() const;
|
||||||
|
|
||||||
|
@ -61,9 +61,9 @@ private:
|
||||||
CSSPixels hypothetical_cross_size_with_margins() { return hypothetical_cross_size + margins.cross_before + margins.cross_after + borders.cross_after + borders.cross_before + padding.cross_after + padding.cross_before; }
|
CSSPixels hypothetical_cross_size_with_margins() { return hypothetical_cross_size + margins.cross_before + margins.cross_after + borders.cross_after + borders.cross_before + padding.cross_after + padding.cross_before; }
|
||||||
CSSPixels target_main_size { 0 };
|
CSSPixels target_main_size { 0 };
|
||||||
bool frozen { false };
|
bool frozen { false };
|
||||||
Optional<float> flex_factor {};
|
Optional<double> flex_factor {};
|
||||||
float scaled_flex_shrink_factor { 0 };
|
double scaled_flex_shrink_factor { 0 };
|
||||||
float desired_flex_fraction { 0 };
|
double desired_flex_fraction { 0 };
|
||||||
|
|
||||||
CSSPixels outer_hypothetical_main_size() const
|
CSSPixels outer_hypothetical_main_size() const
|
||||||
{
|
{
|
||||||
|
@ -109,10 +109,10 @@ private:
|
||||||
Vector<FlexItem&> items;
|
Vector<FlexItem&> items;
|
||||||
CSSPixels cross_size { 0 };
|
CSSPixels cross_size { 0 };
|
||||||
CSSPixels remaining_free_space { 0 };
|
CSSPixels remaining_free_space { 0 };
|
||||||
float chosen_flex_fraction { 0 };
|
double chosen_flex_fraction { 0 };
|
||||||
|
|
||||||
float sum_of_flex_factor_of_unfrozen_items() const;
|
double sum_of_flex_factor_of_unfrozen_items() const;
|
||||||
float sum_of_scaled_flex_shrink_factor_of_unfrozen_items() const;
|
double sum_of_scaled_flex_shrink_factor_of_unfrozen_items() const;
|
||||||
};
|
};
|
||||||
|
|
||||||
CSSPixels main_gap() const;
|
CSSPixels main_gap() const;
|
||||||
|
|
|
@ -391,7 +391,7 @@ CSSPixels FormattingContext::tentative_width_for_replaced_element(LayoutState co
|
||||||
// (used height) * (intrinsic ratio)
|
// (used height) * (intrinsic ratio)
|
||||||
if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio())
|
if ((computed_height.is_auto() && computed_width.is_auto() && !box.has_intrinsic_width() && box.has_intrinsic_height() && box.has_intrinsic_aspect_ratio())
|
||||||
|| (computed_width.is_auto() && !computed_height.is_auto() && box.has_intrinsic_aspect_ratio())) {
|
|| (computed_width.is_auto() && !computed_height.is_auto() && box.has_intrinsic_aspect_ratio())) {
|
||||||
return compute_height_for_replaced_element(state, box, available_space) * box.intrinsic_aspect_ratio().value();
|
return compute_height_for_replaced_element(state, box, available_space) * static_cast<double>(box.intrinsic_aspect_ratio().value());
|
||||||
}
|
}
|
||||||
|
|
||||||
// If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width,
|
// If 'height' and 'width' both have computed values of 'auto' and the element has an intrinsic ratio but no intrinsic height or width,
|
||||||
|
@ -486,7 +486,7 @@ CSSPixels FormattingContext::tentative_height_for_replaced_element(LayoutState c
|
||||||
//
|
//
|
||||||
// (used width) / (intrinsic ratio)
|
// (used width) / (intrinsic ratio)
|
||||||
if (computed_height.is_auto() && box.has_intrinsic_aspect_ratio())
|
if (computed_height.is_auto() && box.has_intrinsic_aspect_ratio())
|
||||||
return state.get(box).content_width() / box.intrinsic_aspect_ratio().value();
|
return state.get(box).content_width() / static_cast<double>(box.intrinsic_aspect_ratio().value());
|
||||||
|
|
||||||
// Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic height, then that intrinsic height is the used value of 'height'.
|
// Otherwise, if 'height' has a computed value of 'auto', and the element has an intrinsic height, then that intrinsic height is the used value of 'height'.
|
||||||
if (computed_height.is_auto() && box.has_intrinsic_height())
|
if (computed_height.is_auto() && box.has_intrinsic_height())
|
||||||
|
@ -1280,7 +1280,7 @@ CSSPixels FormattingContext::calculate_min_content_height(Layout::Box const& box
|
||||||
CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
|
CSSPixels FormattingContext::calculate_max_content_height(Layout::Box const& box, AvailableSize const& available_width) const
|
||||||
{
|
{
|
||||||
if (box.has_intrinsic_aspect_ratio() && available_width.is_definite())
|
if (box.has_intrinsic_aspect_ratio() && available_width.is_definite())
|
||||||
return available_width.to_px() / *box.intrinsic_aspect_ratio();
|
return available_width.to_px() / static_cast<double>(*box.intrinsic_aspect_ratio());
|
||||||
|
|
||||||
if (box.has_intrinsic_height())
|
if (box.has_intrinsic_height())
|
||||||
return *box.intrinsic_height();
|
return *box.intrinsic_height();
|
||||||
|
|
|
@ -751,7 +751,7 @@ void GridFormattingContext::resolve_intrinsic_track_sizes(AvailableSpace const&
|
||||||
// 5. If any track still has an infinite growth limit (because, for example, it had no items placed in
|
// 5. If any track still has an infinite growth limit (because, for example, it had no items placed in
|
||||||
// it or it is a flexible track), set its growth limit to its base size.
|
// it or it is a flexible track), set its growth limit to its base size.
|
||||||
for (auto& track : tracks_and_gaps) {
|
for (auto& track : tracks_and_gaps) {
|
||||||
if (track.growth_limit == INFINITY) {
|
if (!isfinite(track.growth_limit.value())) {
|
||||||
track.growth_limit = track.base_size;
|
track.growth_limit = track.base_size;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -774,7 +774,7 @@ void GridFormattingContext::distribute_extra_space_across_spanned_tracks_base_si
|
||||||
// 2. Distribute space up to limits:
|
// 2. Distribute space up to limits:
|
||||||
// FIXME: If a fixed-point type were used to represent CSS pixels, it would be possible to compare with 0
|
// FIXME: If a fixed-point type were used to represent CSS pixels, it would be possible to compare with 0
|
||||||
// instead of epsilon.
|
// instead of epsilon.
|
||||||
while (extra_space > NumericLimits<float>().epsilon()) {
|
while (extra_space > NumericLimits<double>().epsilon()) {
|
||||||
auto all_frozen = all_of(spanned_tracks, [](auto const& track) { return track.base_size_frozen; });
|
auto all_frozen = all_of(spanned_tracks, [](auto const& track) { return track.base_size_frozen; });
|
||||||
if (all_frozen)
|
if (all_frozen)
|
||||||
break;
|
break;
|
||||||
|
@ -816,7 +816,7 @@ void GridFormattingContext::distribute_extra_space_across_spanned_tracks_growth_
|
||||||
// 1. Find the space to distribute:
|
// 1. Find the space to distribute:
|
||||||
CSSPixels spanned_tracks_sizes_sum = 0;
|
CSSPixels spanned_tracks_sizes_sum = 0;
|
||||||
for (auto& track : spanned_tracks) {
|
for (auto& track : spanned_tracks) {
|
||||||
if (track.growth_limit != INFINITY) {
|
if (isfinite(track.growth_limit.value())) {
|
||||||
spanned_tracks_sizes_sum += track.growth_limit;
|
spanned_tracks_sizes_sum += track.growth_limit;
|
||||||
} else {
|
} else {
|
||||||
spanned_tracks_sizes_sum += track.base_size;
|
spanned_tracks_sizes_sum += track.base_size;
|
||||||
|
@ -830,7 +830,7 @@ void GridFormattingContext::distribute_extra_space_across_spanned_tracks_growth_
|
||||||
// 2. Distribute space up to limits:
|
// 2. Distribute space up to limits:
|
||||||
// FIXME: If a fixed-point type were used to represent CSS pixels, it would be possible to compare with 0
|
// FIXME: If a fixed-point type were used to represent CSS pixels, it would be possible to compare with 0
|
||||||
// instead of epsilon.
|
// instead of epsilon.
|
||||||
while (extra_space > NumericLimits<float>().epsilon()) {
|
while (extra_space > NumericLimits<double>().epsilon()) {
|
||||||
auto all_frozen = all_of(spanned_tracks, [](auto const& track) { return track.growth_limit_frozen; });
|
auto all_frozen = all_of(spanned_tracks, [](auto const& track) { return track.growth_limit_frozen; });
|
||||||
if (all_frozen)
|
if (all_frozen)
|
||||||
break;
|
break;
|
||||||
|
@ -957,7 +957,7 @@ void GridFormattingContext::increase_sizes_to_accommodate_spanning_items_crossin
|
||||||
}
|
}
|
||||||
distribute_extra_space_across_spanned_tracks_growth_limit(item_min_content_contribution, intrinsic_maximum_tracks);
|
distribute_extra_space_across_spanned_tracks_growth_limit(item_min_content_contribution, intrinsic_maximum_tracks);
|
||||||
for (auto& track : spanned_tracks) {
|
for (auto& track : spanned_tracks) {
|
||||||
if (track.growth_limit == INFINITY) {
|
if (!isfinite(track.growth_limit.value())) {
|
||||||
// If the affected size is an infinite growth limit, set it to the track’s base size plus the planned increase.
|
// If the affected size is an infinite growth limit, set it to the track’s base size plus the planned increase.
|
||||||
track.growth_limit = track.base_size + track.planned_increase;
|
track.growth_limit = track.base_size + track.planned_increase;
|
||||||
// Mark any tracks whose growth limit changed from infinite to finite in this step as infinitely growable
|
// Mark any tracks whose growth limit changed from infinite to finite in this step as infinitely growable
|
||||||
|
@ -982,7 +982,7 @@ void GridFormattingContext::increase_sizes_to_accommodate_spanning_items_crossin
|
||||||
auto item_max_content_contribution = calculate_max_content_contribution(item, dimension);
|
auto item_max_content_contribution = calculate_max_content_contribution(item, dimension);
|
||||||
distribute_extra_space_across_spanned_tracks_growth_limit(item_max_content_contribution, max_content_maximum_tracks);
|
distribute_extra_space_across_spanned_tracks_growth_limit(item_max_content_contribution, max_content_maximum_tracks);
|
||||||
for (auto& track : spanned_tracks) {
|
for (auto& track : spanned_tracks) {
|
||||||
if (track.growth_limit == INFINITY) {
|
if (!isfinite(track.growth_limit.value())) {
|
||||||
// If the affected size is an infinite growth limit, set it to the track’s base size plus the planned increase.
|
// If the affected size is an infinite growth limit, set it to the track’s base size plus the planned increase.
|
||||||
track.growth_limit = track.base_size + track.planned_increase;
|
track.growth_limit = track.base_size + track.planned_increase;
|
||||||
} else {
|
} else {
|
||||||
|
@ -1058,7 +1058,7 @@ void GridFormattingContext::maximize_tracks(AvailableSpace const& available_spac
|
||||||
while (free_space_px > 0) {
|
while (free_space_px > 0) {
|
||||||
auto free_space_to_distribute_per_track = free_space_px / tracks.size();
|
auto free_space_to_distribute_per_track = free_space_px / tracks.size();
|
||||||
for (auto& track : tracks) {
|
for (auto& track : tracks) {
|
||||||
VERIFY(track.growth_limit != INFINITY);
|
VERIFY(isfinite(track.growth_limit.value()));
|
||||||
track.base_size = min(track.growth_limit, track.base_size + free_space_to_distribute_per_track);
|
track.base_size = min(track.growth_limit, track.base_size + free_space_to_distribute_per_track);
|
||||||
}
|
}
|
||||||
if (get_free_space_px() == free_space_px)
|
if (get_free_space_px() == free_space_px)
|
||||||
|
|
|
@ -18,7 +18,7 @@
|
||||||
|
|
||||||
namespace Web::Layout {
|
namespace Web::Layout {
|
||||||
|
|
||||||
constexpr float text_justification_threshold = 0.1;
|
constexpr double text_justification_threshold = 0.1;
|
||||||
|
|
||||||
InlineFormattingContext::InlineFormattingContext(LayoutState& state, BlockContainer const& containing_block, BlockFormattingContext& parent)
|
InlineFormattingContext::InlineFormattingContext(LayoutState& state, BlockContainer const& containing_block, BlockFormattingContext& parent)
|
||||||
: FormattingContext(Type::Inline, state, containing_block, &parent)
|
: FormattingContext(Type::Inline, state, containing_block, &parent)
|
||||||
|
@ -209,7 +209,7 @@ void InlineFormattingContext::apply_justification_to_fragments(CSS::TextJustify
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
CSSPixels justified_space_width = whitespace_count > 0 ? (excess_horizontal_space_including_whitespace / static_cast<float>(whitespace_count)) : 0;
|
CSSPixels justified_space_width = whitespace_count > 0 ? (excess_horizontal_space_including_whitespace / static_cast<double>(whitespace_count)) : 0;
|
||||||
|
|
||||||
// This is the amount that each fragment will be offset by. If a whitespace
|
// This is the amount that each fragment will be offset by. If a whitespace
|
||||||
// fragment is shorter than the justified space width, it increases to push
|
// fragment is shorter than the justified space width, it increases to push
|
||||||
|
|
|
@ -320,7 +320,7 @@ void LayoutState::UsedValues::set_node(NodeWithStyleAndBoxModelMetrics& node, Us
|
||||||
if (size.is_percentage()) {
|
if (size.is_percentage()) {
|
||||||
if (containing_block_has_definite_size) {
|
if (containing_block_has_definite_size) {
|
||||||
auto containing_block_size = width ? containing_block_used_values->content_width() : containing_block_used_values->content_height();
|
auto containing_block_size = width ? containing_block_used_values->content_width() : containing_block_used_values->content_height();
|
||||||
resolved_definite_size = adjust_for_box_sizing(containing_block_size * size.percentage().as_fraction(), size, width);
|
resolved_definite_size = adjust_for_box_sizing(containing_block_size * static_cast<double>(size.percentage().as_fraction()), size, width);
|
||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
return false;
|
return false;
|
||||||
|
|
|
@ -223,7 +223,7 @@ void LineBuilder::update_last_line()
|
||||||
if (length_percentage->is_length())
|
if (length_percentage->is_length())
|
||||||
fragment_baseline += length_percentage->length().to_px(fragment.layout_node());
|
fragment_baseline += length_percentage->length().to_px(fragment.layout_node());
|
||||||
else if (length_percentage->is_percentage())
|
else if (length_percentage->is_percentage())
|
||||||
fragment_baseline += length_percentage->percentage().as_fraction() * line_height;
|
fragment_baseline += static_cast<double>(length_percentage->percentage().as_fraction()) * line_height;
|
||||||
}
|
}
|
||||||
|
|
||||||
line_box_baseline = max(line_box_baseline, fragment_baseline);
|
line_box_baseline = max(line_box_baseline, fragment_baseline);
|
||||||
|
@ -277,7 +277,7 @@ void LineBuilder::update_last_line()
|
||||||
auto vertical_align_amount = length_percentage->length().to_px(fragment.layout_node());
|
auto vertical_align_amount = length_percentage->length().to_px(fragment.layout_node());
|
||||||
new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
|
new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
|
||||||
} else if (length_percentage->is_percentage()) {
|
} else if (length_percentage->is_percentage()) {
|
||||||
auto vertical_align_amount = length_percentage->percentage().as_fraction() * m_context.containing_block().line_height();
|
auto vertical_align_amount = static_cast<double>(length_percentage->percentage().as_fraction()) * m_context.containing_block().line_height();
|
||||||
new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
|
new_fragment_y = y_value_for_alignment(CSS::VerticalAlign::Baseline) - vertical_align_amount;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -305,7 +305,7 @@ void LineBuilder::update_last_line()
|
||||||
if (length_percentage->is_length())
|
if (length_percentage->is_length())
|
||||||
bottom_of_inline_box += length_percentage->length().to_px(fragment.layout_node());
|
bottom_of_inline_box += length_percentage->length().to_px(fragment.layout_node());
|
||||||
else if (length_percentage->is_percentage())
|
else if (length_percentage->is_percentage())
|
||||||
bottom_of_inline_box += length_percentage->percentage().as_fraction() * m_context.containing_block().line_height();
|
bottom_of_inline_box += static_cast<double>(length_percentage->percentage().as_fraction()) * m_context.containing_block().line_height();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -609,7 +609,7 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
|
||||||
if (border.line_style == CSS::LineStyle::None || border.line_style == CSS::LineStyle::Hidden) {
|
if (border.line_style == CSS::LineStyle::None || border.line_style == CSS::LineStyle::Hidden) {
|
||||||
border.width = 0;
|
border.width = 0;
|
||||||
} else {
|
} else {
|
||||||
auto resolve_border_width = [&]() {
|
auto resolve_border_width = [&]() -> double {
|
||||||
auto value = computed_style.property(width_property);
|
auto value = computed_style.property(width_property);
|
||||||
if (value->is_calculated())
|
if (value->is_calculated())
|
||||||
return value->as_calculated().resolve_length(*this)->to_px(*this).value();
|
return value->as_calculated().resolve_length(*this)->to_px(*this).value();
|
||||||
|
@ -619,11 +619,11 @@ void NodeWithStyle::apply_style(const CSS::StyleProperties& computed_style)
|
||||||
// https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-thin
|
// https://www.w3.org/TR/css-backgrounds-3/#valdef-line-width-thin
|
||||||
switch (value->to_identifier()) {
|
switch (value->to_identifier()) {
|
||||||
case CSS::ValueID::Thin:
|
case CSS::ValueID::Thin:
|
||||||
return 1.0f;
|
return 1.0;
|
||||||
case CSS::ValueID::Medium:
|
case CSS::ValueID::Medium:
|
||||||
return 3.0f;
|
return 3.0;
|
||||||
case CSS::ValueID::Thick:
|
case CSS::ValueID::Thick:
|
||||||
return 5.0f;
|
return 5.0;
|
||||||
default:
|
default:
|
||||||
VERIFY_NOT_REACHED();
|
VERIFY_NOT_REACHED();
|
||||||
}
|
}
|
||||||
|
|
|
@ -35,7 +35,7 @@ CSSPixels SVGFormattingContext::automatic_content_height() const
|
||||||
|
|
||||||
struct ViewBoxTransform {
|
struct ViewBoxTransform {
|
||||||
CSSPixelPoint offset;
|
CSSPixelPoint offset;
|
||||||
float scale_factor;
|
double scale_factor;
|
||||||
};
|
};
|
||||||
|
|
||||||
// https://svgwg.org/svg2-draft/coords.html#PreserveAspectRatioAttribute
|
// https://svgwg.org/svg2-draft/coords.html#PreserveAspectRatioAttribute
|
||||||
|
@ -156,7 +156,7 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
|
||||||
auto& path = dom_node.get_path();
|
auto& path = dom_node.get_path();
|
||||||
auto path_transform = dom_node.get_transform();
|
auto path_transform = dom_node.get_transform();
|
||||||
|
|
||||||
float viewbox_scale = 1;
|
double viewbox_scale = 1;
|
||||||
auto& maybe_view_box = svg_svg_element.view_box();
|
auto& maybe_view_box = svg_svg_element.view_box();
|
||||||
if (maybe_view_box.has_value()) {
|
if (maybe_view_box.has_value()) {
|
||||||
// FIXME: This should allow just one of width or height to be specified.
|
// FIXME: This should allow just one of width or height to be specified.
|
||||||
|
@ -172,13 +172,13 @@ void SVGFormattingContext::run(Box const& box, LayoutMode layout_mode, Available
|
||||||
// The initial value for preserveAspectRatio is xMidYMid meet.
|
// The initial value for preserveAspectRatio is xMidYMid meet.
|
||||||
auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
|
auto preserve_aspect_ratio = svg_svg_element.preserve_aspect_ratio().value_or(SVG::PreserveAspectRatio {});
|
||||||
auto viewbox_transform = scale_and_align_viewbox_content(preserve_aspect_ratio, view_box, { scale_width, scale_height }, svg_box_state);
|
auto viewbox_transform = scale_and_align_viewbox_content(preserve_aspect_ratio, view_box, { scale_width, scale_height }, svg_box_state);
|
||||||
path_transform = Gfx::AffineTransform {}.translate(viewbox_transform.offset.to_type<float>()).scale(viewbox_transform.scale_factor, viewbox_transform.scale_factor).translate({ -view_box.min_x, -view_box.min_y }).multiply(path_transform);
|
path_transform = Gfx::AffineTransform {}.translate(viewbox_transform.offset.to_type<double>().to_type<float>()).scale(viewbox_transform.scale_factor, viewbox_transform.scale_factor).translate({ -view_box.min_x, -view_box.min_y }).multiply(path_transform);
|
||||||
viewbox_scale = viewbox_transform.scale_factor;
|
viewbox_scale = viewbox_transform.scale_factor;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Stroke increases the path's size by stroke_width/2 per side.
|
// Stroke increases the path's size by stroke_width/2 per side.
|
||||||
auto path_bounding_box = path_transform.map(path.bounding_box()).to_type<CSSPixels>();
|
auto path_bounding_box = path_transform.map(path.bounding_box()).to_type<CSSPixels>();
|
||||||
CSSPixels stroke_width = geometry_box.dom_node().visible_stroke_width() * viewbox_scale;
|
CSSPixels stroke_width = static_cast<double>(geometry_box.dom_node().visible_stroke_width()) * viewbox_scale;
|
||||||
path_bounding_box.inflate(stroke_width, stroke_width);
|
path_bounding_box.inflate(stroke_width, stroke_width);
|
||||||
geometry_box_state.set_content_offset(path_bounding_box.top_left());
|
geometry_box_state.set_content_offset(path_bounding_box.top_left());
|
||||||
geometry_box_state.set_content_width(path_bounding_box.width());
|
geometry_box_state.set_content_width(path_bounding_box.width());
|
||||||
|
|
|
@ -30,8 +30,8 @@ Optional<Gfx::AffineTransform> SVGGeometryBox::layout_transform() const
|
||||||
auto& geometry_element = dom_node();
|
auto& geometry_element = dom_node();
|
||||||
auto transform = geometry_element.get_transform();
|
auto transform = geometry_element.get_transform();
|
||||||
auto* svg_box = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>();
|
auto* svg_box = geometry_element.first_ancestor_of_type<SVG::SVGSVGElement>();
|
||||||
float scaling = 1;
|
double scaling = 1;
|
||||||
auto origin = viewbox_origin().to_type<float>();
|
auto origin = viewbox_origin().to_type<double>().to_type<float>();
|
||||||
Gfx::FloatPoint paint_offset = {};
|
Gfx::FloatPoint paint_offset = {};
|
||||||
if (svg_box && svg_box->view_box().has_value()) {
|
if (svg_box && svg_box->view_box().has_value()) {
|
||||||
// Note: SVGFormattingContext has already done the scaling based on the viewbox,
|
// Note: SVGFormattingContext has already done the scaling based on the viewbox,
|
||||||
|
@ -45,9 +45,9 @@ Optional<Gfx::AffineTransform> SVGGeometryBox::layout_transform() const
|
||||||
return {};
|
return {};
|
||||||
auto scaled_width = paintable_box()->content_width().value();
|
auto scaled_width = paintable_box()->content_width().value();
|
||||||
auto scaled_height = paintable_box()->content_height().value();
|
auto scaled_height = paintable_box()->content_height().value();
|
||||||
scaling = min(scaled_width / original_bounding_box.width(), scaled_height / original_bounding_box.height());
|
scaling = min(scaled_width / static_cast<double>(original_bounding_box.width()), scaled_height / static_cast<double>(original_bounding_box.height()));
|
||||||
auto scaled_bounding_box = original_bounding_box.scaled(scaling, scaling);
|
auto scaled_bounding_box = original_bounding_box.scaled(scaling, scaling);
|
||||||
paint_offset = (paintable_box()->absolute_rect().location() - svg_box->paintable_box()->absolute_rect().location()).to_type<float>() - scaled_bounding_box.location();
|
paint_offset = (paintable_box()->absolute_rect().location() - svg_box->paintable_box()->absolute_rect().location()).to_type<double>().to_type<float>() - scaled_bounding_box.location();
|
||||||
}
|
}
|
||||||
return Gfx::AffineTransform {}.translate(paint_offset).scale(scaling, scaling).translate(-origin).multiply(transform);
|
return Gfx::AffineTransform {}.translate(paint_offset).scale(scaling, scaling).translate(-origin).multiply(transform);
|
||||||
}
|
}
|
||||||
|
|
|
@ -56,7 +56,7 @@ private:
|
||||||
CSSPixels min_width { 0 };
|
CSSPixels min_width { 0 };
|
||||||
CSSPixels max_width { 0 };
|
CSSPixels max_width { 0 };
|
||||||
CSSPixels used_width { 0 };
|
CSSPixels used_width { 0 };
|
||||||
float percentage_width { 0 };
|
double percentage_width { 0 };
|
||||||
};
|
};
|
||||||
|
|
||||||
struct Row {
|
struct Row {
|
||||||
|
|
|
@ -105,12 +105,11 @@ CSSPixelRect Page::device_to_css_rect(DevicePixelRect rect) const
|
||||||
DevicePixelRect Page::enclosing_device_rect(CSSPixelRect rect) const
|
DevicePixelRect Page::enclosing_device_rect(CSSPixelRect rect) const
|
||||||
{
|
{
|
||||||
auto scale = client().device_pixels_per_css_pixel();
|
auto scale = client().device_pixels_per_css_pixel();
|
||||||
return {
|
return DevicePixelRect(
|
||||||
floorf(rect.x().value() * scale),
|
floor(rect.x().value() * scale),
|
||||||
floorf(rect.y().value() * scale),
|
floor(rect.y().value() * scale),
|
||||||
ceilf(rect.width().value() * scale),
|
ceil(rect.width().value() * scale),
|
||||||
ceilf(rect.height().value() * scale)
|
ceil(rect.height().value() * scale));
|
||||||
};
|
|
||||||
}
|
}
|
||||||
|
|
||||||
DevicePixelRect Page::rounded_device_rect(CSSPixelRect rect) const
|
DevicePixelRect Page::rounded_device_rect(CSSPixelRect rect) const
|
||||||
|
|
|
@ -166,7 +166,7 @@ public:
|
||||||
virtual bool is_connection_open() const = 0;
|
virtual bool is_connection_open() const = 0;
|
||||||
virtual Gfx::Palette palette() const = 0;
|
virtual Gfx::Palette palette() const = 0;
|
||||||
virtual DevicePixelRect screen_rect() const = 0;
|
virtual DevicePixelRect screen_rect() const = 0;
|
||||||
virtual float device_pixels_per_css_pixel() const = 0;
|
virtual double device_pixels_per_css_pixel() const = 0;
|
||||||
virtual CSS::PreferredColorScheme preferred_color_scheme() const = 0;
|
virtual CSS::PreferredColorScheme preferred_color_scheme() const = 0;
|
||||||
virtual void paint(DevicePixelRect const&, Gfx::Bitmap&) = 0;
|
virtual void paint(DevicePixelRect const&, Gfx::Bitmap&) = 0;
|
||||||
virtual void page_did_change_title(DeprecatedString const&) { }
|
virtual void page_did_change_title(DeprecatedString const&) { }
|
||||||
|
|
|
@ -148,16 +148,16 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||||
CSSPixelRect image_rect;
|
CSSPixelRect image_rect;
|
||||||
switch (layer.size_type) {
|
switch (layer.size_type) {
|
||||||
case CSS::BackgroundSize::Contain: {
|
case CSS::BackgroundSize::Contain: {
|
||||||
float max_width_ratio = (background_positioning_area.width() / natural_image_width).value();
|
double max_width_ratio = (background_positioning_area.width() / natural_image_width).value();
|
||||||
float max_height_ratio = (background_positioning_area.height() / natural_image_height).value();
|
double max_height_ratio = (background_positioning_area.height() / natural_image_height).value();
|
||||||
float ratio = min(max_width_ratio, max_height_ratio);
|
double ratio = min(max_width_ratio, max_height_ratio);
|
||||||
image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
|
image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
case CSS::BackgroundSize::Cover: {
|
case CSS::BackgroundSize::Cover: {
|
||||||
float max_width_ratio = (background_positioning_area.width() / natural_image_width).value();
|
double max_width_ratio = (background_positioning_area.width() / natural_image_width).value();
|
||||||
float max_height_ratio = (background_positioning_area.height() / natural_image_height).value();
|
double max_height_ratio = (background_positioning_area.height() / natural_image_height).value();
|
||||||
float ratio = max(max_width_ratio, max_height_ratio);
|
double ratio = max(max_width_ratio, max_height_ratio);
|
||||||
image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
|
image_rect.set_size(natural_image_width * ratio, natural_image_height * ratio);
|
||||||
break;
|
break;
|
||||||
}
|
}
|
||||||
|
@ -253,7 +253,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||||
repeat_x = false;
|
repeat_x = false;
|
||||||
} else {
|
} else {
|
||||||
auto space = fmod(background_positioning_area.width(), image_rect.width());
|
auto space = fmod(background_positioning_area.width(), image_rect.width());
|
||||||
x_step = image_rect.width() + (space / (float)(whole_images - 1));
|
x_step = image_rect.width() + (space / static_cast<double>(whole_images - 1));
|
||||||
repeat_x = true;
|
repeat_x = true;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
@ -284,7 +284,7 @@ void paint_background(PaintContext& context, Layout::NodeWithStyleAndBoxModelMet
|
||||||
repeat_y = false;
|
repeat_y = false;
|
||||||
} else {
|
} else {
|
||||||
auto space = fmod(background_positioning_area.height(), image_rect.height());
|
auto space = fmod(background_positioning_area.height(), image_rect.height());
|
||||||
y_step = image_rect.height() + ((float)space / (float)(whole_images - 1));
|
y_step = image_rect.height() + (static_cast<double>(space) / static_cast<double>(whole_images - 1));
|
||||||
repeat_y = true;
|
repeat_y = true;
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
|
|
|
@ -33,14 +33,14 @@ BorderRadiiData normalized_border_radii_data(Layout::Node const& node, CSSPixelR
|
||||||
|
|
||||||
// Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
|
// Scale overlapping curves according to https://www.w3.org/TR/css-backgrounds-3/#corner-overlap
|
||||||
CSSPixels f = 1.0f;
|
CSSPixels f = 1.0f;
|
||||||
auto width_reciprocal = 1.0f / rect.width().value();
|
auto width_reciprocal = 1.0 / rect.width().value();
|
||||||
auto height_reciprocal = 1.0f / rect.height().value();
|
auto height_reciprocal = 1.0 / rect.height().value();
|
||||||
f = max(f, width_reciprocal * (top_left_radius_px.horizontal_radius + top_right_radius_px.horizontal_radius));
|
f = max(f, width_reciprocal * (top_left_radius_px.horizontal_radius + top_right_radius_px.horizontal_radius));
|
||||||
f = max(f, height_reciprocal * (top_right_radius_px.vertical_radius + bottom_right_radius_px.vertical_radius));
|
f = max(f, height_reciprocal * (top_right_radius_px.vertical_radius + bottom_right_radius_px.vertical_radius));
|
||||||
f = max(f, width_reciprocal * (bottom_left_radius_px.horizontal_radius + bottom_right_radius_px.horizontal_radius));
|
f = max(f, width_reciprocal * (bottom_left_radius_px.horizontal_radius + bottom_right_radius_px.horizontal_radius));
|
||||||
f = max(f, height_reciprocal * (top_left_radius_px.vertical_radius + bottom_left_radius_px.vertical_radius));
|
f = max(f, height_reciprocal * (top_left_radius_px.vertical_radius + bottom_left_radius_px.vertical_radius));
|
||||||
|
|
||||||
f = 1.0f / f.value();
|
f = 1.0 / f.value();
|
||||||
|
|
||||||
top_left_radius_px.horizontal_radius *= f;
|
top_left_radius_px.horizontal_radius *= f;
|
||||||
top_left_radius_px.vertical_radius *= f;
|
top_left_radius_px.vertical_radius *= f;
|
||||||
|
@ -149,8 +149,8 @@ void paint_border(PaintContext& context, BorderEdge edge, DevicePixelRect const&
|
||||||
|
|
||||||
auto draw_border = [&](auto const& border, auto const& radius, auto const& opposite_border, auto const& opposite_radius, auto p1_step_translate, auto p2_step_translate) {
|
auto draw_border = [&](auto const& border, auto const& radius, auto const& opposite_border, auto const& opposite_radius, auto p1_step_translate, auto p2_step_translate) {
|
||||||
auto [p1, p2] = points_for_edge(edge, rect);
|
auto [p1, p2] = points_for_edge(edge, rect);
|
||||||
auto p1_step = radius ? 0 : border.width / static_cast<float>(device_pixel_width.value());
|
auto p1_step = radius ? 0 : border.width / device_pixel_width.value();
|
||||||
auto p2_step = opposite_radius ? 0 : opposite_border.width / static_cast<float>(device_pixel_width.value());
|
auto p2_step = opposite_radius ? 0 : opposite_border.width / device_pixel_width.value();
|
||||||
for (DevicePixels i = 0; i < device_pixel_width; ++i) {
|
for (DevicePixels i = 0; i < device_pixel_width; ++i) {
|
||||||
draw_horizontal_or_vertical_line(p1, p2);
|
draw_horizontal_or_vertical_line(p1, p2);
|
||||||
p1_step_translate(p1, p1_step);
|
p1_step_translate(p1, p1_step);
|
||||||
|
|
|
@ -111,11 +111,11 @@ static ColorStopData resolve_color_stop_positions(auto const& color_stop_list, a
|
||||||
LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, CSSPixelSize gradient_size, CSS::LinearGradientStyleValue const& linear_gradient)
|
LinearGradientData resolve_linear_gradient_data(Layout::Node const& node, CSSPixelSize gradient_size, CSS::LinearGradientStyleValue const& linear_gradient)
|
||||||
{
|
{
|
||||||
auto gradient_angle = linear_gradient.angle_degrees(gradient_size);
|
auto gradient_angle = linear_gradient.angle_degrees(gradient_size);
|
||||||
auto gradient_length_px = Gfx::calculate_gradient_length(gradient_size, gradient_angle);
|
auto gradient_length_px = Gfx::calculate_gradient_length(gradient_size.to_type<double>().to_type<float>(), gradient_angle);
|
||||||
|
|
||||||
auto resolved_color_stops = resolve_color_stop_positions(
|
auto resolved_color_stops = resolve_color_stop_positions(
|
||||||
linear_gradient.color_stop_list(), [&](auto const& length_percentage) {
|
linear_gradient.color_stop_list(), [&](auto const& length_percentage) {
|
||||||
return length_percentage.to_px(node, gradient_length_px).value() / gradient_length_px;
|
return length_percentage.to_px(node, gradient_length_px).value() / static_cast<double>(gradient_length_px);
|
||||||
},
|
},
|
||||||
linear_gradient.is_repeating());
|
linear_gradient.is_repeating());
|
||||||
|
|
||||||
|
|
|
@ -32,10 +32,10 @@ void MarkerPaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
return;
|
return;
|
||||||
|
|
||||||
// FIXME: All this does is round to the nearest whole CSS pixel, but it's goofy.
|
// FIXME: All this does is round to the nearest whole CSS pixel, but it's goofy.
|
||||||
CSSPixelRect enclosing = absolute_rect().to_type<float>().to_rounded<float>().to_type<CSSPixels>();
|
CSSPixelRect enclosing = absolute_rect().to_type<double>().to_type<float>().to_rounded<float>().to_type<CSSPixels>();
|
||||||
auto device_enclosing = context.enclosing_device_rect(enclosing);
|
auto device_enclosing = context.enclosing_device_rect(enclosing);
|
||||||
|
|
||||||
CSSPixels marker_width = enclosing.height() / 2.0f;
|
CSSPixels marker_width = enclosing.height() / 2.0;
|
||||||
|
|
||||||
if (auto const* list_style_image = layout_box().list_style_image()) {
|
if (auto const* list_style_image = layout_box().list_style_image()) {
|
||||||
CSSPixelRect image_rect {
|
CSSPixelRect image_rect {
|
||||||
|
|
|
@ -10,7 +10,7 @@
|
||||||
|
|
||||||
namespace Web {
|
namespace Web {
|
||||||
|
|
||||||
PaintContext::PaintContext(Gfx::Painter& painter, Palette const& palette, float device_pixels_per_css_pixel)
|
PaintContext::PaintContext(Gfx::Painter& painter, Palette const& palette, double device_pixels_per_css_pixel)
|
||||||
: m_painter(painter)
|
: m_painter(painter)
|
||||||
, m_palette(palette)
|
, m_palette(palette)
|
||||||
, m_device_pixels_per_css_pixel(device_pixels_per_css_pixel)
|
, m_device_pixels_per_css_pixel(device_pixels_per_css_pixel)
|
||||||
|
|
|
@ -18,7 +18,7 @@ namespace Web {
|
||||||
|
|
||||||
class PaintContext {
|
class PaintContext {
|
||||||
public:
|
public:
|
||||||
PaintContext(Gfx::Painter& painter, Palette const& palette, float device_pixels_per_css_pixel);
|
PaintContext(Gfx::Painter& painter, Palette const& palette, double device_pixels_per_css_pixel);
|
||||||
|
|
||||||
Gfx::Painter& painter() const { return m_painter; }
|
Gfx::Painter& painter() const { return m_painter; }
|
||||||
Palette const& palette() const { return m_palette; }
|
Palette const& palette() const { return m_palette; }
|
||||||
|
@ -64,13 +64,13 @@ public:
|
||||||
return clone;
|
return clone;
|
||||||
}
|
}
|
||||||
|
|
||||||
float device_pixels_per_css_pixel() const { return m_device_pixels_per_css_pixel; }
|
double device_pixels_per_css_pixel() const { return m_device_pixels_per_css_pixel; }
|
||||||
|
|
||||||
private:
|
private:
|
||||||
Gfx::Painter& m_painter;
|
Gfx::Painter& m_painter;
|
||||||
Palette m_palette;
|
Palette m_palette;
|
||||||
Optional<SVGContext> m_svg_context;
|
Optional<SVGContext> m_svg_context;
|
||||||
float m_device_pixels_per_css_pixel;
|
double m_device_pixels_per_css_pixel { 0 };
|
||||||
DevicePixelRect m_device_viewport_rect;
|
DevicePixelRect m_device_viewport_rect;
|
||||||
bool m_should_show_line_box_borders { false };
|
bool m_should_show_line_box_borders { false };
|
||||||
bool m_focus { false };
|
bool m_focus { false };
|
||||||
|
|
|
@ -155,7 +155,7 @@ void PaintableBox::paint(PaintContext& context, PaintPhase phase) const
|
||||||
if (should_clip_rect) {
|
if (should_clip_rect) {
|
||||||
context.painter().save();
|
context.painter().save();
|
||||||
auto border_box = absolute_border_box_rect();
|
auto border_box = absolute_border_box_rect();
|
||||||
context.painter().add_clip_rect(context.rounded_device_rect(clip_rect.to_rect().resolved(Paintable::layout_node(), border_box.to_type<float>()).to_type<CSSPixels>()).to_type<int>());
|
context.painter().add_clip_rect(context.rounded_device_rect(clip_rect.to_rect().resolved(Paintable::layout_node(), border_box.to_type<double>()).to_type<CSSPixels>()).to_type<int>());
|
||||||
}
|
}
|
||||||
paint_backdrop_filter(context);
|
paint_backdrop_filter(context);
|
||||||
paint_background(context);
|
paint_background(context);
|
||||||
|
@ -434,7 +434,7 @@ static void paint_text_decoration(PaintContext& context, Gfx::Painter& painter,
|
||||||
CSSPixels css_line_thickness = [&] {
|
CSSPixels css_line_thickness = [&] {
|
||||||
CSS::Length computed_thickness = text_node.computed_values().text_decoration_thickness().resolved(text_node, CSS::Length(1, CSS::Length::Type::Em));
|
CSS::Length computed_thickness = text_node.computed_values().text_decoration_thickness().resolved(text_node, CSS::Length(1, CSS::Length::Type::Em));
|
||||||
if (computed_thickness.is_auto())
|
if (computed_thickness.is_auto())
|
||||||
return max(glyph_height * 0.1f, 1.f);
|
return max(glyph_height * 0.1, 1.);
|
||||||
|
|
||||||
return computed_thickness.to_px(text_node);
|
return computed_thickness.to_px(text_node);
|
||||||
}();
|
}();
|
||||||
|
|
|
@ -36,7 +36,7 @@ Optional<HitTestResult> SVGGeometryPaintable::hit_test(CSSPixelPoint position, H
|
||||||
if (auto transform = layout_box().layout_transform(); transform.has_value()) {
|
if (auto transform = layout_box().layout_transform(); transform.has_value()) {
|
||||||
auto transformed_bounding_box = transform->map_to_quad(
|
auto transformed_bounding_box = transform->map_to_quad(
|
||||||
const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().bounding_box());
|
const_cast<SVG::SVGGeometryElement&>(geometry_element).get_path().bounding_box());
|
||||||
if (!transformed_bounding_box.contains(position.to_type<float>()))
|
if (!transformed_bounding_box.contains(position.to_type<double>().to_type<float>()))
|
||||||
return {};
|
return {};
|
||||||
}
|
}
|
||||||
return result;
|
return result;
|
||||||
|
@ -92,7 +92,7 @@ void SVGGeometryPaintable::paint(PaintContext& context, PaintPhase phase) const
|
||||||
auto svg_viewport = [&] {
|
auto svg_viewport = [&] {
|
||||||
if (maybe_view_box.has_value())
|
if (maybe_view_box.has_value())
|
||||||
return Gfx::FloatRect { maybe_view_box->min_x, maybe_view_box->min_y, maybe_view_box->width, maybe_view_box->height };
|
return Gfx::FloatRect { maybe_view_box->min_x, maybe_view_box->min_y, maybe_view_box->width, maybe_view_box->height };
|
||||||
return Gfx::FloatRect { { 0, 0 }, svg_context.svg_element_size().to_type<float>() };
|
return Gfx::FloatRect { { 0, 0 }, svg_context.svg_element_size().to_type<double>().to_type<float>() };
|
||||||
}();
|
}();
|
||||||
|
|
||||||
SVG::SVGPaintContext paint_context {
|
SVG::SVGPaintContext paint_context {
|
||||||
|
|
|
@ -232,7 +232,7 @@ Gfx::FloatMatrix4x4 StackingContext::get_transformation_matrix(CSS::Transformati
|
||||||
auto count = transformation.values.size();
|
auto count = transformation.values.size();
|
||||||
auto value = [this, transformation](size_t index, Optional<CSS::Length const&> reference_length = {}) -> float {
|
auto value = [this, transformation](size_t index, Optional<CSS::Length const&> reference_length = {}) -> float {
|
||||||
return transformation.values[index].visit(
|
return transformation.values[index].visit(
|
||||||
[this, reference_length](CSS::LengthPercentage const& value) {
|
[this, reference_length](CSS::LengthPercentage const& value) -> float {
|
||||||
if (reference_length.has_value()) {
|
if (reference_length.has_value()) {
|
||||||
return value.resolved(m_box, reference_length.value()).to_px(m_box).value();
|
return value.resolved(m_box, reference_length.value()).to_px(m_box).value();
|
||||||
}
|
}
|
||||||
|
@ -430,7 +430,7 @@ Gfx::FloatPoint StackingContext::compute_transform_origin() const
|
||||||
auto reference_box = paintable_box().absolute_border_box_rect();
|
auto reference_box = paintable_box().absolute_border_box_rect();
|
||||||
auto x = reference_box.left() + style_value.x.to_px(m_box, reference_box.width());
|
auto x = reference_box.left() + style_value.x.to_px(m_box, reference_box.width());
|
||||||
auto y = reference_box.top() + style_value.y.to_px(m_box, reference_box.height());
|
auto y = reference_box.top() + style_value.y.to_px(m_box, reference_box.height());
|
||||||
return { x, y };
|
return { static_cast<float>(x.value()), static_cast<float>(y.value()) };
|
||||||
}
|
}
|
||||||
|
|
||||||
template<typename U, typename Callback>
|
template<typename U, typename Callback>
|
||||||
|
|
|
@ -378,7 +378,7 @@ VideoPaintable::DispatchEventOfSameName VideoPaintable::handle_mouseup(Badge<Eve
|
||||||
|
|
||||||
if (cached_layout_boxes.timeline_rect.has_value() && cached_layout_boxes.timeline_rect->contains(position)) {
|
if (cached_layout_boxes.timeline_rect.has_value() && cached_layout_boxes.timeline_rect->contains(position)) {
|
||||||
auto x_offset = position.x() - cached_layout_boxes.timeline_rect->x();
|
auto x_offset = position.x() - cached_layout_boxes.timeline_rect->x();
|
||||||
auto x_percentage = static_cast<float>(x_offset) / static_cast<float>(cached_layout_boxes.timeline_rect->width());
|
auto x_percentage = static_cast<double>(x_offset) / static_cast<double>(cached_layout_boxes.timeline_rect->width());
|
||||||
|
|
||||||
auto position = static_cast<double>(x_percentage) * video_element.duration();
|
auto position = static_cast<double>(x_percentage) * video_element.duration();
|
||||||
video_element.set_current_time(position);
|
video_element.set_current_time(position);
|
||||||
|
|
|
@ -48,7 +48,7 @@ constexpr DevicePixels operator%(DevicePixels left, T right) { return left.value
|
||||||
|
|
||||||
/// CSSPixels: A position or length in CSS "reference pixels", independent of zoom or screen DPI.
|
/// CSSPixels: A position or length in CSS "reference pixels", independent of zoom or screen DPI.
|
||||||
/// See https://www.w3.org/TR/css-values-3/#reference-pixel
|
/// See https://www.w3.org/TR/css-values-3/#reference-pixel
|
||||||
AK_TYPEDEF_DISTINCT_NUMERIC_GENERAL(float, CSSPixels, Arithmetic, CastToUnderlying, Comparison, Increment);
|
AK_TYPEDEF_DISTINCT_NUMERIC_GENERAL(double, CSSPixels, Arithmetic, CastToUnderlying, Comparison, Increment);
|
||||||
|
|
||||||
template<Arithmetic T>
|
template<Arithmetic T>
|
||||||
constexpr bool operator==(CSSPixels left, T right) { return left.value() == right; }
|
constexpr bool operator==(CSSPixels left, T right) { return left.value() == right; }
|
||||||
|
|
|
@ -34,7 +34,7 @@ public:
|
||||||
virtual bool is_connection_open() const override { return false; }
|
virtual bool is_connection_open() const override { return false; }
|
||||||
virtual Gfx::Palette palette() const override { return m_host_page.client().palette(); }
|
virtual Gfx::Palette palette() const override { return m_host_page.client().palette(); }
|
||||||
virtual DevicePixelRect screen_rect() const override { return {}; }
|
virtual DevicePixelRect screen_rect() const override { return {}; }
|
||||||
virtual float device_pixels_per_css_pixel() const override { return m_host_page.client().device_pixels_per_css_pixel(); }
|
virtual double device_pixels_per_css_pixel() const override { return m_host_page.client().device_pixels_per_css_pixel(); }
|
||||||
virtual CSS::PreferredColorScheme preferred_color_scheme() const override { return m_host_page.client().preferred_color_scheme(); }
|
virtual CSS::PreferredColorScheme preferred_color_scheme() const override { return m_host_page.client().preferred_color_scheme(); }
|
||||||
virtual void request_file(FileRequest) override { }
|
virtual void request_file(FileRequest) override { }
|
||||||
virtual void paint(DevicePixelRect const&, Gfx::Bitmap&) override { }
|
virtual void paint(DevicePixelRect const&, Gfx::Bitmap&) override { }
|
||||||
|
|
|
@ -185,7 +185,7 @@ Optional<float> SVGGraphicsElement::stroke_width() const
|
||||||
viewport_height = svg_svg_layout_node->computed_values().height().to_px(*svg_svg_layout_node, 0);
|
viewport_height = svg_svg_layout_node->computed_values().height().to_px(*svg_svg_layout_node, 0);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
auto scaled_viewport_size = (viewport_width + viewport_height) * 0.5f;
|
auto scaled_viewport_size = (viewport_width + viewport_height) * 0.5;
|
||||||
return width->to_px(*layout_node(), scaled_viewport_size).value();
|
return width->to_px(*layout_node(), scaled_viewport_size).value();
|
||||||
}
|
}
|
||||||
return {};
|
return {};
|
||||||
|
|
|
@ -12,10 +12,10 @@
|
||||||
namespace Web::SVG {
|
namespace Web::SVG {
|
||||||
|
|
||||||
struct ViewBox {
|
struct ViewBox {
|
||||||
float min_x { 0 };
|
double min_x { 0 };
|
||||||
float min_y { 0 };
|
double min_y { 0 };
|
||||||
float width { 0 };
|
double width { 0 };
|
||||||
float height { 0 };
|
double height { 0 };
|
||||||
};
|
};
|
||||||
|
|
||||||
Optional<ViewBox> try_parse_view_box(StringView);
|
Optional<ViewBox> try_parse_view_box(StringView);
|
||||||
|
|
|
@ -60,7 +60,7 @@ private:
|
||||||
virtual bool is_connection_open() const override;
|
virtual bool is_connection_open() const override;
|
||||||
virtual Gfx::Palette palette() const override;
|
virtual Gfx::Palette palette() const override;
|
||||||
virtual Web::DevicePixelRect screen_rect() const override { return m_screen_rect; }
|
virtual Web::DevicePixelRect screen_rect() const override { return m_screen_rect; }
|
||||||
virtual float device_pixels_per_css_pixel() const override { return m_device_pixels_per_css_pixel; }
|
virtual double device_pixels_per_css_pixel() const override { return m_device_pixels_per_css_pixel; }
|
||||||
virtual Web::CSS::PreferredColorScheme preferred_color_scheme() const override { return m_preferred_color_scheme; }
|
virtual Web::CSS::PreferredColorScheme preferred_color_scheme() const override { return m_preferred_color_scheme; }
|
||||||
virtual void page_did_invalidate(Web::CSSPixelRect const&) override;
|
virtual void page_did_invalidate(Web::CSSPixelRect const&) override;
|
||||||
virtual void page_did_change_selection() override;
|
virtual void page_did_change_selection() override;
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue