LibGfx+LibWeb: Use harfbuzz for text shaping

This replaces glyph positioning system with harfbuzz's shaping
algorithm. Adding support for bidirectional encoded text.
This commit is contained in:
BenJilks 2024-08-13 17:05:43 +01:00 committed by Alexander Kalenik
parent 0d05ab2ad0
commit 0d63269cb7
Notes: github-actions[bot] 2024-08-16 20:29:29 +00:00
48 changed files with 365 additions and 333 deletions

View file

@ -18,7 +18,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <ul> at (135,45) content-size 340x0 children: inline
TextNode <#text>
BlockContainer <li> at (150,60) content-size 50x90 floating [BFC] children: inline
frag 0 from TextNode start: 0, length: 7, rect: [150,60 37.875x10] baseline: 8
frag 0 from TextNode start: 0, length: 7, rect: [150,60 37.890625x10] baseline: 8
"the way"
TextNode <#text>
TextNode <#text>
@ -26,7 +26,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (235,55) content-size 139.96875x0 children: inline
TextNode <#text>
BlockContainer <p> at (235,55) content-size 139.96875x10 children: inline
frag 0 from TextNode start: 0, length: 14, rect: [235,55 74.3125x10] baseline: 8
frag 0 from TextNode start: 0, length: 14, rect: [235,55 74.296875x10] baseline: 8
"the world ends"
TextNode <#text>
BlockContainer <(anonymous)> at (235,65) content-size 139.96875x0 children: inline
@ -36,14 +36,14 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <p> at (235,65) content-size 139.96875x19 children: inline
frag 0 from TextNode start: 1, length: 5, rect: [235,65 27.484375x19] baseline: 12.5
frag 0 from TextNode start: 1, length: 5, rect: [235,65 27.5x19] baseline: 12.5
"bang "
frag 1 from RadioButton start: 0, length: 0, rect: [262,65 12x12] baseline: 12
frag 1 from RadioButton start: 0, length: 0, rect: [263,65 12x12] baseline: 12
TextNode <#text>
RadioButton <input> at (262,65) content-size 12x12 inline-block children: not-inline
RadioButton <input> at (263,65) content-size 12x12 inline-block children: not-inline
TextNode <#text>
BlockContainer <p> at (235,84) content-size 139.96875x19 children: inline
frag 0 from TextNode start: 1, length: 8, rect: [235,84 45.15625x19] baseline: 12.5
frag 0 from TextNode start: 1, length: 8, rect: [235,84 45.171875x19] baseline: 12.5
"whimper "
frag 1 from RadioButton start: 0, length: 0, rect: [280,84 12x12] baseline: 12
TextNode <#text>
@ -53,9 +53,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
TextNode <#text>
BlockContainer <li> at (409.96875,60) content-size 50x90 floating [BFC] children: inline
frag 0 from TextNode start: 0, length: 6, rect: [409.96875,60 31.578125x10] baseline: 8
frag 0 from TextNode start: 0, length: 6, rect: [409.96875,60 31.59375x10] baseline: 8
"i grow"
frag 1 from TextNode start: 7, length: 3, rect: [409.96875,70 14.03125x10] baseline: 8
frag 1 from TextNode start: 7, length: 3, rect: [409.96875,70 14.015625x10] baseline: 8
"old"
TextNode <#text>
TextNode <#text>
@ -72,7 +72,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <address> at (280,195) content-size 50x20 children: inline
frag 0 from TextNode start: 0, length: 3, rect: [280,195 17.28125x10] baseline: 8
"bar"
frag 1 from TextNode start: 4, length: 6, rect: [280,205 30.21875x10] baseline: 8
frag 1 from TextNode start: 4, length: 6, rect: [280,205 30.234375x10] baseline: 8
"maids,"
TextNode <#text>
BlockContainer <(anonymous)> at (280,215) content-size 50x0 children: inline
@ -81,7 +81,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <h1> at (365,185) content-size 100x100 floating [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [365,185 56.421875x10] baseline: 8
"sing to me,"
frag 1 from TextNode start: 12, length: 12, rect: [365,195 65.4375x10] baseline: 8
frag 1 from TextNode start: 12, length: 12, rect: [365,195 65.46875x10] baseline: 8
"erbarme dich"
TextNode <#text>
TextNode <#text>
@ -89,28 +89,28 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (20,30) content-size 480x0 children: inline
TextNode <#text>
BlockContainer <p> at (20,335) content-size 480x65 children: inline
frag 0 from TextNode start: 1, length: 90, rect: [20,335 473.625x13] baseline: 9.5
frag 0 from TextNode start: 1, length: 90, rect: [20,335 473.6875x13] baseline: 9.5
"This is a nonsensical document, but syntactically valid HTML 4.0. All 100%-conformant CSS1"
frag 1 from TextNode start: 92, length: 74, rect: [20,348 396.96875x13] baseline: 9.5
"agents should be able to render the document elements above this paragraph"
frag 2 from TextNode start: 167, length: 43, rect: [20,361 207.890625x13] baseline: 9.5
frag 2 from TextNode start: 167, length: 43, rect: [20,361 207.9375x13] baseline: 9.5
"indistinguishably (to the pixel) from this "
frag 3 from TextNode start: 0, length: 31, rect: [331,361 159.671875x13] baseline: 9.5
" (except font rasterization and"
frag 4 from TextNode start: 32, length: 89, rect: [20,374 465.015625x13] baseline: 9.5
frag 4 from TextNode start: 32, length: 89, rect: [20,374 465.09375x13] baseline: 9.5
"form widgets). All discrepancies should be traceable to CSS1 implementation shortcomings."
frag 5 from TextNode start: 122, length: 67, rect: [20,387 345.546875x13] baseline: 9.5
frag 5 from TextNode start: 122, length: 67, rect: [20,387 345.59375x13] baseline: 9.5
"Once you have finished evaluating this test, you can return to the "
frag 6 from TextNode start: 0, length: 1, rect: [425,387 2.71875x13] baseline: 9.5
frag 6 from TextNode start: 0, length: 1, rect: [426,387 2.71875x13] baseline: 9.5
"."
TextNode <#text>
InlineNode <a>
frag 0 from TextNode start: 0, length: 20, rect: [228,361 103.015625x13] baseline: 9.5
frag 0 from TextNode start: 0, length: 20, rect: [228,361 103.03125x13] baseline: 9.5
"reference rendering,"
TextNode <#text>
TextNode <#text>
InlineNode <a>
frag 0 from TextNode start: 0, length: 11, rect: [366,387 59.890625x13] baseline: 9.5
frag 0 from TextNode start: 0, length: 11, rect: [366,387 59.90625x13] baseline: 9.5
"parent page"
TextNode <#text>
TextNode <#text>
@ -138,7 +138,7 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
InlinePaintable (InlineNode<FORM>)
PaintableWithLines (BlockContainer<P>) [235,65 139.96875x19]
TextPaintable (TextNode<#text>)
RadioButtonPaintable (RadioButton<INPUT>) [262,65 12x12]
RadioButtonPaintable (RadioButton<INPUT>) [263,65 12x12]
PaintableWithLines (BlockContainer<P>) [235,84 139.96875x19]
TextPaintable (TextNode<#text>)
RadioButtonPaintable (RadioButton<INPUT>) [280,84 12x12]

View file

@ -1,21 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x75 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x59 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 44.484375
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x55 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x55] baseline: 42.484375
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.703125x55] baseline: 44.484375
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.703125x55 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.703125x55 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.703125x55 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.703125x55] baseline: 42.484375
"See more games"
TextNode <#text>
BlockContainer <(anonymous)> at (9,9) content-size 422.640625x57 positioned [BFC] children: inline
BlockContainer <(anonymous)> at (9,9) content-size 422.703125x57 positioned [BFC] children: inline
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x75]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x59]
PaintableWithLines (BlockContainer<BUTTON>.button_button___eDCW) [8,8 424.640625x59]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x55]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x55]
PaintableWithLines (BlockContainer<BUTTON>.button_button___eDCW) [8,8 424.703125x59]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.703125x55]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.703125x55]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [9,9 422.640625x57]
PaintableWithLines (BlockContainer(anonymous)) [9,9 422.703125x57]

View file

@ -1,21 +1,21 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x75 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x59 children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.640625x55] baseline: 44.484375
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.640625x55 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 422.640625x57 positioned [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,10 414.703125x55] baseline: 44.484375
BlockContainer <button.button_button___eDCW> at (13,10) content-size 414.703125x55 positioned inline-block [BFC] children: not-inline
BlockContainer <(anonymous)> at (9,9) content-size 422.703125x57 positioned [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.640625x55 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.640625x55] baseline: 42.484375
BlockContainer <(anonymous)> at (13,10) content-size 414.703125x55 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 414.703125x55 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 14, rect: [13,10 414.703125x55] baseline: 42.484375
"See more games"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x75]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x59]
PaintableWithLines (BlockContainer<BUTTON>.button_button___eDCW) [8,8 424.640625x59]
PaintableWithLines (BlockContainer(anonymous)) [9,9 422.640625x57]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x55]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.640625x55]
PaintableWithLines (BlockContainer<BUTTON>.button_button___eDCW) [8,8 424.703125x59]
PaintableWithLines (BlockContainer(anonymous)) [9,9 422.703125x57]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.703125x55]
PaintableWithLines (BlockContainer(anonymous)) [13,10 414.703125x55]
TextPaintable (TextNode<#text>)

View file

@ -3,89 +3,89 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (252,10) content-size 538x400 children: inline
frag 0 from TextNode start: 1, length: 5, rect: [554,10 63.71875x22] baseline: 17
"Lorem"
frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.546875x22] baseline: 17
frag 1 from TextNode start: 6, length: 1, rect: [618,10 12.53125x22] baseline: 17
" "
frag 2 from TextNode start: 7, length: 5, rect: [630.546875,10 56.625x22] baseline: 17
frag 2 from TextNode start: 7, length: 5, rect: [630.53125,10 56.625x22] baseline: 17
"ipsum"
frag 3 from TextNode start: 12, length: 1, rect: [686.546875,10 12.546875x22] baseline: 17
frag 3 from TextNode start: 12, length: 1, rect: [686.53125,10 12.53125x22] baseline: 17
" "
frag 4 from TextNode start: 13, length: 5, rect: [699.09375,10 52.046875x22] baseline: 17
frag 4 from TextNode start: 13, length: 5, rect: [699.0625,10 52.0625x22] baseline: 17
"dolor"
frag 5 from TextNode start: 18, length: 1, rect: [751.09375,10 12.546875x22] baseline: 17
frag 5 from TextNode start: 18, length: 1, rect: [751.0625,10 12.53125x22] baseline: 17
" "
frag 6 from TextNode start: 19, length: 3, rect: [763.640625,10 25.953125x22] baseline: 17
frag 6 from TextNode start: 19, length: 3, rect: [763.59375,10 25.96875x22] baseline: 17
"sit"
frag 7 from TextNode start: 23, length: 5, rect: [554,32 52.71875x22] baseline: 17
frag 7 from TextNode start: 23, length: 5, rect: [554,32 52.734375x22] baseline: 17
"amet,"
frag 8 from TextNode start: 28, length: 1, rect: [607,32 62.21875x22] baseline: 17
frag 8 from TextNode start: 28, length: 1, rect: [607,32 62.1875x22] baseline: 17
" "
frag 9 from TextNode start: 29, length: 11, rect: [669.21875,32 121.0625x22] baseline: 17
frag 9 from TextNode start: 29, length: 11, rect: [669.1875,32 121.078125x22] baseline: 17
"consectetur"
frag 10 from TextNode start: 41, length: 10, rect: [554,54 94.65625x22] baseline: 17
frag 10 from TextNode start: 41, length: 10, rect: [554,54 94.671875x22] baseline: 17
"adipiscing"
frag 11 from TextNode start: 51, length: 1, rect: [649,54 105.4375x22] baseline: 17
frag 11 from TextNode start: 51, length: 1, rect: [649,54 105.40625x22] baseline: 17
" "
frag 12 from TextNode start: 52, length: 5, rect: [754.4375,54 35.90625x22] baseline: 17
frag 12 from TextNode start: 52, length: 5, rect: [754.40625,54 35.921875x22] baseline: 17
"elit."
frag 13 from TextNode start: 58, length: 11, rect: [554,76 123.3125x22] baseline: 17
frag 13 from TextNode start: 58, length: 11, rect: [554,76 123.375x22] baseline: 17
"Suspendisse"
frag 14 from TextNode start: 69, length: 1, rect: [677,76 101x22] baseline: 17
frag 14 from TextNode start: 69, length: 1, rect: [677,76 100.9375x22] baseline: 17
" "
frag 15 from TextNode start: 70, length: 1, rect: [778,76 11.6875x22] baseline: 17
frag 15 from TextNode start: 70, length: 1, rect: [777.9375,76 11.6875x22] baseline: 17
"a"
frag 16 from TextNode start: 72, length: 8, rect: [554,98 82.046875x22] baseline: 17
frag 16 from TextNode start: 72, length: 8, rect: [554,98 82.078125x22] baseline: 17
"placerat"
frag 17 from TextNode start: 80, length: 1, rect: [636,98 29.640625x22] baseline: 17
frag 17 from TextNode start: 80, length: 1, rect: [636,98 29.625x22] baseline: 17
" "
frag 18 from TextNode start: 81, length: 7, rect: [665.640625,98 73.875x22] baseline: 17
frag 18 from TextNode start: 81, length: 7, rect: [665.625,98 73.875x22] baseline: 17
"mauris,"
frag 19 from TextNode start: 88, length: 1, rect: [739.640625,98 29.640625x22] baseline: 17
frag 19 from TextNode start: 88, length: 1, rect: [739.625,98 29.625x22] baseline: 17
" "
frag 20 from TextNode start: 89, length: 2, rect: [769.28125,98 20.78125x22] baseline: 17
frag 20 from TextNode start: 89, length: 2, rect: [769.25,98 20.78125x22] baseline: 17
"ut"
frag 21 from TextNode start: 92, length: 9, rect: [554,120 101.28125x22] baseline: 17
frag 21 from TextNode start: 92, length: 9, rect: [554,120 101.3125x22] baseline: 17
"elementum"
frag 22 from TextNode start: 101, length: 1, rect: [655,120 10.4375x22] baseline: 17
frag 22 from TextNode start: 101, length: 1, rect: [655,120 10.421875x22] baseline: 17
" "
frag 23 from TextNode start: 102, length: 3, rect: [665.4375,120 26.390625x22] baseline: 17
frag 23 from TextNode start: 102, length: 3, rect: [665.421875,120 26.390625x22] baseline: 17
"mi."
frag 24 from TextNode start: 105, length: 1, rect: [692.4375,120 10.4375x22] baseline: 17
frag 24 from TextNode start: 105, length: 1, rect: [692.421875,120 10.421875x22] baseline: 17
" "
frag 25 from TextNode start: 106, length: 5, rect: [702.875,120 56.234375x22] baseline: 17
frag 25 from TextNode start: 106, length: 5, rect: [702.84375,120 56.234375x22] baseline: 17
"Morbi"
frag 26 from TextNode start: 111, length: 1, rect: [758.875,120 10.4375x22] baseline: 17
frag 26 from TextNode start: 111, length: 1, rect: [758.84375,120 10.421875x22] baseline: 17
" "
frag 27 from TextNode start: 112, length: 2, rect: [769.3125,120 20.78125x22] baseline: 17
frag 27 from TextNode start: 112, length: 2, rect: [769.265625,120 20.78125x22] baseline: 17
"ut"
frag 28 from TextNode start: 115, length: 8, rect: [554,142 78.765625x22] baseline: 17
frag 28 from TextNode start: 115, length: 8, rect: [554,142 78.78125x22] baseline: 17
"vehicula"
frag 29 from TextNode start: 123, length: 1, rect: [633,142 27.234375x22] baseline: 17
frag 29 from TextNode start: 123, length: 1, rect: [633,142 27.21875x22] baseline: 17
" "
frag 30 from TextNode start: 124, length: 6, rect: [660.234375,142 62.9375x22] baseline: 17
frag 30 from TextNode start: 124, length: 6, rect: [660.21875,142 62.9375x22] baseline: 17
"ipsum,"
frag 31 from TextNode start: 130, length: 1, rect: [723.234375,142 27.234375x22] baseline: 17
frag 31 from TextNode start: 130, length: 1, rect: [723.21875,142 27.21875x22] baseline: 17
" "
frag 32 from TextNode start: 131, length: 4, rect: [750.46875,142 39.828125x22] baseline: 17
frag 32 from TextNode start: 131, length: 4, rect: [750.4375,142 39.84375x22] baseline: 17
"eget"
frag 33 from TextNode start: 136, length: 8, rect: [554,164 82.046875x22] baseline: 17
frag 33 from TextNode start: 136, length: 8, rect: [554,164 82.078125x22] baseline: 17
"placerat"
frag 34 from TextNode start: 144, length: 1, rect: [636,164 11.734375x22] baseline: 17
frag 34 from TextNode start: 144, length: 1, rect: [636,164 11.6875x22] baseline: 17
" "
frag 35 from TextNode start: 145, length: 6, rect: [647.734375,164 61.875x22] baseline: 17
frag 35 from TextNode start: 145, length: 6, rect: [647.6875,164 61.890625x22] baseline: 17
"augue."
frag 36 from TextNode start: 151, length: 1, rect: [709.734375,164 11.734375x22] baseline: 17
frag 36 from TextNode start: 151, length: 1, rect: [709.6875,164 11.6875x22] baseline: 17
" "
frag 37 from TextNode start: 152, length: 7, rect: [721.46875,164 68.609375x22] baseline: 17
frag 37 from TextNode start: 152, length: 7, rect: [721.375,164 68.640625x22] baseline: 17
"Integer"
frag 38 from TextNode start: 160, length: 6, rect: [554,186 70.3125x22] baseline: 17
frag 38 from TextNode start: 160, length: 6, rect: [554,186 70.296875x22] baseline: 17
"rutrum"
frag 39 from TextNode start: 166, length: 1, rect: [624,186 21x22] baseline: 17
" "
frag 40 from TextNode start: 167, length: 4, rect: [645,186 35.09375x22] baseline: 17
frag 40 from TextNode start: 167, length: 4, rect: [645,186 35.109375x22] baseline: 17
"nisi"
frag 41 from TextNode start: 171, length: 1, rect: [680,186 21x22] baseline: 17
" "
frag 42 from TextNode start: 172, length: 4, rect: [701,186 39.828125x22] baseline: 17
frag 42 from TextNode start: 172, length: 4, rect: [701,186 39.84375x22] baseline: 17
"eget"
frag 43 from TextNode start: 176, length: 1, rect: [741,186 21x22] baseline: 17
" "
@ -99,83 +99,83 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
"eu"
frag 48 from TextNode start: 191, length: 1, rect: [367.578125,212 23.578125x22] baseline: 17
" "
frag 49 from TextNode start: 192, length: 8, rect: [391.15625,212 96.734375x22] baseline: 17
frag 49 from TextNode start: 192, length: 8, rect: [391.15625,212 96.75x22] baseline: 17
"accumsan"
frag 50 from TextNode start: 201, length: 4, rect: [252,234 43.875x22] baseline: 17
"enim"
frag 51 from TextNode start: 205, length: 1, rect: [296,234 37.90625x22] baseline: 17
frag 51 from TextNode start: 205, length: 1, rect: [296,234 37.875x22] baseline: 17
" "
frag 52 from TextNode start: 206, length: 10, rect: [333.90625,234 93.625x22] baseline: 17
frag 52 from TextNode start: 206, length: 10, rect: [333.875,234 93.65625x22] baseline: 17
"tristique."
frag 53 from TextNode start: 216, length: 1, rect: [427.90625,234 37.90625x22] baseline: 17
frag 53 from TextNode start: 216, length: 1, rect: [427.875,234 37.875x22] baseline: 17
" "
frag 54 from TextNode start: 217, length: 2, rect: [465.8125,234 22.6875x22] baseline: 17
frag 54 from TextNode start: 217, length: 2, rect: [465.75,234 22.703125x22] baseline: 17
"Ut"
frag 55 from TextNode start: 220, length: 8, rect: [252,256 80.015625x22] baseline: 17
frag 55 from TextNode start: 220, length: 8, rect: [252,256 80.046875x22] baseline: 17
"lobortis"
frag 56 from TextNode start: 228, length: 1, rect: [332,256 30.359375x22] baseline: 17
frag 56 from TextNode start: 228, length: 1, rect: [332,256 30.328125x22] baseline: 17
" "
frag 57 from TextNode start: 229, length: 5, rect: [362.359375,256 55.4375x22] baseline: 17
frag 57 from TextNode start: 229, length: 5, rect: [362.328125,256 55.4375x22] baseline: 17
"lorem"
frag 58 from TextNode start: 234, length: 1, rect: [417.359375,256 30.359375x22] baseline: 17
frag 58 from TextNode start: 234, length: 1, rect: [417.328125,256 30.328125x22] baseline: 17
" "
frag 59 from TextNode start: 235, length: 4, rect: [447.71875,256 39.828125x22] baseline: 17
frag 59 from TextNode start: 235, length: 4, rect: [447.65625,256 39.84375x22] baseline: 17
"eget"
frag 60 from TextNode start: 240, length: 3, rect: [252,278 31.15625x22] baseline: 17
frag 60 from TextNode start: 240, length: 3, rect: [252,278 31.171875x22] baseline: 17
"est"
frag 61 from TextNode start: 243, length: 1, rect: [283,278 16.53125x22] baseline: 17
frag 61 from TextNode start: 243, length: 1, rect: [283,278 16.5x22] baseline: 17
" "
frag 62 from TextNode start: 244, length: 9, rect: [299.53125,278 91.46875x22] baseline: 17
frag 62 from TextNode start: 244, length: 9, rect: [299.5,278 91.484375x22] baseline: 17
"vulputate"
frag 63 from TextNode start: 253, length: 1, rect: [391.53125,278 16.53125x22] baseline: 17
frag 63 from TextNode start: 253, length: 1, rect: [391.5,278 16.5x22] baseline: 17
" "
frag 64 from TextNode start: 254, length: 8, rect: [408.0625,278 80.296875x22] baseline: 17
frag 64 from TextNode start: 254, length: 8, rect: [408,278 80.34375x22] baseline: 17
"egestas."
frag 65 from TextNode start: 263, length: 7, rect: [252,300 68.609375x22] baseline: 17
frag 65 from TextNode start: 263, length: 7, rect: [252,300 68.640625x22] baseline: 17
"Integer"
frag 66 from TextNode start: 270, length: 1, rect: [321,300 16.4375x22] baseline: 17
frag 66 from TextNode start: 270, length: 1, rect: [321,300 16.390625x22] baseline: 17
" "
frag 67 from TextNode start: 271, length: 7, rect: [337.4375,300 71.328125x22] baseline: 17
frag 67 from TextNode start: 271, length: 7, rect: [337.390625,300 71.359375x22] baseline: 17
"laoreet"
frag 68 from TextNode start: 278, length: 1, rect: [408.4375,300 16.4375x22] baseline: 17
frag 68 from TextNode start: 278, length: 1, rect: [408.390625,300 16.390625x22] baseline: 17
" "
frag 69 from TextNode start: 279, length: 7, rect: [424.875,300 63.1875x22] baseline: 17
frag 69 from TextNode start: 279, length: 7, rect: [424.78125,300 63.203125x22] baseline: 17
"lacinia"
frag 70 from TextNode start: 287, length: 4, rect: [252,322 43.15625x22] baseline: 17
frag 70 from TextNode start: 287, length: 4, rect: [252,322 43.1875x22] baseline: 17
"ante"
frag 71 from TextNode start: 291, length: 1, rect: [295,322 16.6875x22] baseline: 17
frag 71 from TextNode start: 291, length: 1, rect: [295,322 16.640625x22] baseline: 17
" "
frag 72 from TextNode start: 292, length: 7, rect: [311.6875,322 74x22] baseline: 17
frag 72 from TextNode start: 292, length: 7, rect: [311.640625,322 74.046875x22] baseline: 17
"sodales"
frag 73 from TextNode start: 299, length: 1, rect: [385.6875,322 16.6875x22] baseline: 17
frag 73 from TextNode start: 299, length: 1, rect: [385.640625,322 16.640625x22] baseline: 17
" "
frag 74 from TextNode start: 300, length: 9, rect: [402.375,322 85.453125x22] baseline: 17
frag 74 from TextNode start: 300, length: 9, rect: [402.28125,322 85.484375x22] baseline: 17
"lobortis."
frag 75 from TextNode start: 310, length: 5, rect: [252,344 60.90625x22] baseline: 17
"Donec"
frag 76 from TextNode start: 315, length: 1, rect: [313,344 38.84375x22] baseline: 17
frag 76 from TextNode start: 315, length: 1, rect: [313,344 38.828125x22] baseline: 17
" "
frag 77 from TextNode start: 316, length: 1, rect: [351.84375,344 11.6875x22] baseline: 17
frag 77 from TextNode start: 316, length: 1, rect: [351.828125,344 11.6875x22] baseline: 17
"a"
frag 78 from TextNode start: 317, length: 1, rect: [363.84375,344 38.84375x22] baseline: 17
frag 78 from TextNode start: 317, length: 1, rect: [363.828125,344 38.828125x22] baseline: 17
" "
frag 79 from TextNode start: 318, length: 9, rect: [402.6875,344 85.71875x22] baseline: 17
frag 79 from TextNode start: 318, length: 9, rect: [402.65625,344 85.734375x22] baseline: 17
"tincidunt"
frag 80 from TextNode start: 328, length: 5, rect: [252,366 48.59375x22] baseline: 17
frag 80 from TextNode start: 328, length: 5, rect: [252,366 48.625x22] baseline: 17
"ante."
frag 81 from TextNode start: 333, length: 1, rect: [301,366 11.640625x22] baseline: 17
frag 81 from TextNode start: 333, length: 1, rect: [301,366 11.609375x22] baseline: 17
" "
frag 82 from TextNode start: 334, length: 9, rect: [312.640625,366 94.765625x22] baseline: 17
frag 82 from TextNode start: 334, length: 9, rect: [312.609375,366 94.8125x22] baseline: 17
"Phasellus"
frag 83 from TextNode start: 343, length: 1, rect: [406.640625,366 11.640625x22] baseline: 17
frag 83 from TextNode start: 343, length: 1, rect: [406.609375,366 11.609375x22] baseline: 17
" "
frag 84 from TextNode start: 344, length: 1, rect: [418.28125,366 11.6875x22] baseline: 17
frag 84 from TextNode start: 344, length: 1, rect: [418.21875,366 11.6875x22] baseline: 17
"a"
frag 85 from TextNode start: 345, length: 1, rect: [430.28125,366 11.640625x22] baseline: 17
frag 85 from TextNode start: 345, length: 1, rect: [430.21875,366 11.609375x22] baseline: 17
" "
frag 86 from TextNode start: 346, length: 4, rect: [441.921875,366 46.03125x22] baseline: 17
frag 86 from TextNode start: 346, length: 4, rect: [441.828125,366 46.03125x22] baseline: 17
"arcu"
frag 87 from TextNode start: 351, length: 7, rect: [252,388 70.546875x22] baseline: 17
frag 87 from TextNode start: 351, length: 7, rect: [252,388 70.5625x22] baseline: 17
"tortor."
BlockContainer <div.left> at (253,11) content-size 300x200 floating [BFC] children: not-inline
TextNode <#text>
@ -184,7 +184,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x602]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x602]
PaintableWithLines (BlockContainer<BODY>) [251,9 540x402] overflow: [252,10 538.34375x400]
PaintableWithLines (BlockContainer<BODY>) [251,9 540x402] overflow: [252,10 538.328125x400]
PaintableWithLines (BlockContainer<DIV>.left) [252,10 302x202]
PaintableWithLines (BlockContainer<DIV>.right) [488,212 302x202]
TextPaintable (TextNode<#text>)

View file

@ -1,41 +1,41 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x600 [BFC] children: not-inline
BlockContainer <body> at (252,10) content-size 538x400 children: inline
frag 0 from TextNode start: 1, length: 21, rect: [554,10 228.34375x22] baseline: 17
frag 0 from TextNode start: 1, length: 21, rect: [554,10 228.375x22] baseline: 17
"Lorem ipsum dolor sit"
frag 1 from TextNode start: 23, length: 17, rect: [554,32 183.78125x22] baseline: 17
frag 1 from TextNode start: 23, length: 17, rect: [554,32 183.8125x22] baseline: 17
"amet, consectetur"
frag 2 from TextNode start: 41, length: 16, rect: [554,54 140.5625x22] baseline: 17
frag 2 from TextNode start: 41, length: 16, rect: [554,54 140.59375x22] baseline: 17
"adipiscing elit."
frag 3 from TextNode start: 58, length: 13, rect: [554,76 145x22] baseline: 17
frag 3 from TextNode start: 58, length: 13, rect: [554,76 145.0625x22] baseline: 17
"Suspendisse a"
frag 4 from TextNode start: 72, length: 19, rect: [554,98 196.703125x22] baseline: 17
frag 4 from TextNode start: 72, length: 19, rect: [554,98 196.734375x22] baseline: 17
"placerat mauris, ut"
frag 5 from TextNode start: 92, length: 22, rect: [554,120 234.6875x22] baseline: 17
frag 5 from TextNode start: 92, length: 22, rect: [554,120 234.71875x22] baseline: 17
"elementum mi. Morbi ut"
frag 6 from TextNode start: 115, length: 20, rect: [554,142 201.53125x22] baseline: 17
frag 6 from TextNode start: 115, length: 20, rect: [554,142 201.5625x22] baseline: 17
"vehicula ipsum, eget"
frag 7 from TextNode start: 136, length: 23, rect: [554,164 232.53125x22] baseline: 17
frag 7 from TextNode start: 136, length: 23, rect: [554,164 232.609375x22] baseline: 17
"placerat augue. Integer"
frag 8 from TextNode start: 160, length: 20, rect: [554,186 202.96875x22] baseline: 17
frag 8 from TextNode start: 160, length: 20, rect: [554,186 202.984375x22] baseline: 17
"rutrum nisi eget dui"
frag 9 from TextNode start: 181, length: 19, rect: [252,212 208.828125x22] baseline: 17
frag 9 from TextNode start: 181, length: 19, rect: [252,212 208.84375x22] baseline: 17
"dictum, eu accumsan"
frag 10 from TextNode start: 201, length: 18, rect: [252,234 180.1875x22] baseline: 17
frag 10 from TextNode start: 201, length: 18, rect: [252,234 180.234375x22] baseline: 17
"enim tristique. Ut"
frag 11 from TextNode start: 220, length: 19, rect: [252,256 195.28125x22] baseline: 17
frag 11 from TextNode start: 220, length: 19, rect: [252,256 195.328125x22] baseline: 17
"lobortis lorem eget"
frag 12 from TextNode start: 240, length: 22, rect: [252,278 222.921875x22] baseline: 17
frag 12 from TextNode start: 240, length: 22, rect: [252,278 223x22] baseline: 17
"est vulputate egestas."
frag 13 from TextNode start: 263, length: 23, rect: [252,300 223.125x22] baseline: 17
frag 13 from TextNode start: 263, length: 23, rect: [252,300 223.203125x22] baseline: 17
"Integer laoreet lacinia"
frag 14 from TextNode start: 287, length: 22, rect: [252,322 222.609375x22] baseline: 17
frag 14 from TextNode start: 287, length: 22, rect: [252,322 222.71875x22] baseline: 17
"ante sodales lobortis."
frag 15 from TextNode start: 310, length: 17, rect: [252,344 178.3125x22] baseline: 17
frag 15 from TextNode start: 310, length: 17, rect: [252,344 178.328125x22] baseline: 17
"Donec a tincidunt"
frag 16 from TextNode start: 328, length: 22, rect: [252,366 231.078125x22] baseline: 17
frag 16 from TextNode start: 328, length: 22, rect: [252,366 231.15625x22] baseline: 17
"ante. Phasellus a arcu"
frag 17 from TextNode start: 351, length: 7, rect: [252,388 70.546875x22] baseline: 17
frag 17 from TextNode start: 351, length: 7, rect: [252,388 70.5625x22] baseline: 17
"tortor."
BlockContainer <div.left> at (253,11) content-size 300x200 floating [BFC] children: not-inline
TextNode <#text>

View file

@ -7,10 +7,10 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
frag 0 from TextNode start: 0, length: 12, rect: [12,12 69.734375x17] baseline: 13.296875
"floats!!!!!!"
TextNode <#text>
BlockContainer <div.float-left> at (12,31) content-size 232.71875x218 floating [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [12,31 232.71875x109] baseline: 84.484375
BlockContainer <div.float-left> at (12,31) content-size 232.734375x218 floating [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [12,31 232.734375x109] baseline: 84.484375
"float"
frag 1 from TextNode start: 6, length: 4, rect: [12,140 164.0625x109] baseline: 84.484375
frag 1 from TextNode start: 6, length: 4, rect: [12,140 164.078125x109] baseline: 84.484375
"left"
TextNode <#text>
@ -20,5 +20,5 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<DIV>.Layout-sidebar) [10,10 222x21]
PaintableWithLines (BlockContainer<DIV>.d-inline-block) [11,11 102x19]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<DIV>.float-left) [11,30 234.71875x220]
PaintableWithLines (BlockContainer<DIV>.float-left) [11,30 234.734375x220]
TextPaintable (TextNode<#text>)

View file

@ -5,17 +5,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <h1> at (12,45.5) content-size 498x332 positioned [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,46.5 496x330] baseline: 43.484375
BlockContainer <span> at (13,46.5) content-size 496x330 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 9, rect: [13,46.5 246.484375x55] baseline: 42.484375
frag 0 from TextNode start: 0, length: 9, rect: [13,46.5 246.515625x55] baseline: 42.484375
"Skew is a"
frag 1 from TextNode start: 10, length: 10, rect: [13,101.5 240.53125x55] baseline: 42.484375
frag 1 from TextNode start: 10, length: 10, rect: [13,101.5 240.5625x55] baseline: 42.484375
"web-first,"
frag 2 from TextNode start: 21, length: 14, rect: [13,156.5 377.9375x55] baseline: 42.484375
frag 2 from TextNode start: 21, length: 14, rect: [13,156.5 377.96875x55] baseline: 42.484375
"cross-platform"
frag 3 from TextNode start: 36, length: 11, rect: [13,211.5 314.015625x55] baseline: 42.484375
frag 3 from TextNode start: 36, length: 11, rect: [13,211.5 314.0625x55] baseline: 42.484375
"programming"
frag 4 from TextNode start: 48, length: 16, rect: [13,266.5 415.734375x55] baseline: 42.484375
frag 4 from TextNode start: 48, length: 16, rect: [13,266.5 415.765625x55] baseline: 42.484375
"language with an"
frag 5 from TextNode start: 65, length: 20, rect: [13,321.5 492.671875x55] baseline: 42.484375
frag 5 from TextNode start: 65, length: 20, rect: [13,321.5 492.734375x55] baseline: 42.484375
"optimizing compiler."
TextNode <#text>

View file

@ -3,11 +3,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (10,10) content-size 204x169 children: not-inline
BlockContainer <div.outer> at (11,11) content-size 202x167 children: not-inline
BlockContainer <div.inner> at (12,12) content-size 200x165 children: inline
frag 0 from TextNode start: 0, length: 4, rect: [12,12 88.765625x55] baseline: 42.484375
frag 0 from TextNode start: 0, length: 4, rect: [12,12 88.78125x55] baseline: 42.484375
"well"
frag 1 from TextNode start: 5, length: 5, rect: [12,67 115.140625x55] baseline: 42.484375
"hello"
frag 2 from TextNode start: 11, length: 7, rect: [12,122 173x55] baseline: 42.484375
frag 2 from TextNode start: 11, length: 7, rect: [12,122 173.03125x55] baseline: 42.484375
"friends"
TextNode <#text>

View file

@ -3,7 +3,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (10,10) content-size 604x59 children: not-inline
BlockContainer <div.outer> at (11,11) content-size 602x57 children: not-inline
BlockContainer <div.inner> at (12,12) content-size 600x55 children: inline
frag 0 from TextNode start: 0, length: 18, rect: [12,12 426.90625x55] baseline: 42.484375
frag 0 from TextNode start: 0, length: 18, rect: [12,12 426.953125x55] baseline: 42.484375
"well hello friends"
TextNode <#text>

View file

@ -1,16 +1,16 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x56 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x40 children: inline
frag 0 from Box start: 0, length: 0, rect: [28,28 49.71875x0] baseline: 26
Box <div.button> at (28,28) content-size 49.71875x0 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (28,17) content-size 49.71875x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [28,17 49.71875x22] baseline: 17
frag 0 from Box start: 0, length: 0, rect: [28,28 49.75x0] baseline: 26
Box <div.button> at (28,28) content-size 49.75x0 flex-container(row) [FFC] children: not-inline
BlockContainer <(anonymous)> at (28,17) content-size 49.75x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 5, rect: [28,17 49.75x22] baseline: 17
"Hello"
TextNode <#text>
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x56]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x40]
PaintableBox (Box<DIV>.button) [8,8 89.71875x40]
PaintableWithLines (BlockContainer(anonymous)) [28,17 49.71875x22]
PaintableBox (Box<DIV>.button) [8,8 89.75x40]
PaintableWithLines (BlockContainer(anonymous)) [28,17 49.75x22]
TextPaintable (TextNode<#text>)

View file

@ -34,7 +34,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (200,416) content-size 592x0 children: inline
TextNode <#text>
BlockContainer <div> at (301,417) content-size 100x100 children: inline
frag 0 from TextNode start: 0, length: 26, rect: [301,417 86.125x17] baseline: 13.296875
frag 0 from TextNode start: 0, length: 26, rect: [301,417 74.4375x17] baseline: 13.296875
"حسنًا ، مرحباً"
frag 1 from TextNode start: 27, length: 25, rect: [301,434 78.125x17] baseline: 13.296875
"أيها الأصدقاء"
@ -42,7 +42,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (200,518) content-size 592x0 children: inline
TextNode <#text>
BlockContainer <div> at (301,519) content-size 100x100 children: inline
frag 0 from TextNode start: 0, length: 26, rect: [301,519 86.125x17] baseline: 13.296875
frag 0 from TextNode start: 0, length: 26, rect: [301,519 74.4375x17] baseline: 13.296875
"حسنًا ، مرحباً"
frag 1 from TextNode start: 27, length: 25, rect: [301,536 78.125x17] baseline: 13.296875
"أيها الأصدقاء"
@ -50,7 +50,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (200,620) content-size 592x0 children: inline
TextNode <#text>
BlockContainer <div> at (401,621) content-size 100x100 children: inline
frag 0 from TextNode start: 0, length: 26, rect: [415,621 86.125x17] baseline: 13.296875
frag 0 from TextNode start: 0, length: 26, rect: [427,621 74.4375x17] baseline: 13.296875
"حسنًا ، مرحباً"
frag 1 from TextNode start: 27, length: 25, rect: [423,638 78.125x17] baseline: 13.296875
"أيها الأصدقاء"
@ -58,7 +58,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (200,722) content-size 592x0 children: inline
TextNode <#text>
BlockContainer <div> at (401,723) content-size 100x100 children: inline
frag 0 from TextNode start: 0, length: 26, rect: [415,723 86.125x17] baseline: 13.296875
frag 0 from TextNode start: 0, length: 26, rect: [427,723 74.4375x17] baseline: 13.296875
"حسنًا ، مرحباً"
frag 1 from TextNode start: 27, length: 25, rect: [423,740 78.125x17] baseline: 13.296875
"أيها الأصدقاء"
@ -87,9 +87,9 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600] overflow: [0,0 800x832]
PaintableWithLines (BlockContainer<DIV>) [300,518 102x102]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [200,620 592x0]
PaintableWithLines (BlockContainer<DIV>) [400,620 102x102] overflow: [401,621 100.125x100]
PaintableWithLines (BlockContainer<DIV>) [400,620 102x102] overflow: [401,621 100.4375x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [200,722 592x0]
PaintableWithLines (BlockContainer<DIV>) [400,722 102x102] overflow: [401,723 100.125x100]
PaintableWithLines (BlockContainer<DIV>) [400,722 102x102] overflow: [401,723 100.4375x100]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [200,824 592x0]

View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x125 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x109 children: inline
frag 0 from TextNode start: 0, length: 13, rect: [8,8 644.625x109] baseline: 84.484375
frag 0 from TextNode start: 0, length: 13, rect: [8,8 644.671875x109] baseline: 84.484375
"Hello friends"
TextNode <#text>

View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x600 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x55 children: inline
frag 0 from TextNode start: 0, length: 5, rect: [8,8 137.640625x55] baseline: 42.484375
frag 0 from TextNode start: 0, length: 5, rect: [8,8 137.65625x55] baseline: 42.484375
"Crazy"
TextNode <#text>

View file

@ -2,7 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x52 [BFC] children: not-inline
BlockContainer <body> at (10,10) content-size 780x34 children: not-inline
BlockContainer <div> at (11,11) content-size 778x32 children: inline
frag 0 from TextNode start: 0, length: 25, rect: [11,11 552.125x32] baseline: 28
frag 0 from TextNode start: 0, length: 25, rect: [11,11 552.21875x32] baseline: 28
"The Linux Kernel Archives"
TextNode <#text>

View file

@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <p> at (8,20) content-size 784x22 children: inline
TextNode <#text>
InlineNode <a>
frag 0 from TextNode start: 0, length: 15, rect: [18,20 163.890625x22] baseline: 17
frag 0 from TextNode start: 0, length: 15, rect: [18,20 163.9375x22] baseline: 17
"Should be green"
TextNode <#text>
TextNode <#text>

View file

@ -4,7 +4,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <p> at (8,20) content-size 784x22 children: inline
TextNode <#text>
InlineNode <a>
frag 0 from TextNode start: 0, length: 13, rect: [13,20 141.34375x22] baseline: 17
frag 0 from TextNode start: 0, length: 13, rect: [13,20 141.390625x22] baseline: 17
"Should be red"
TextNode <#text>
TextNode <#text>

View file

@ -17,7 +17,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
TextNode <#text>
BlockContainer <div> at (9,164) content-size 782x44 children: inline
InlineNode <a>
frag 0 from TextNode start: 0, length: 5, rect: [10,164 99.453125x44] baseline: 34
frag 0 from TextNode start: 0, length: 5, rect: [10,164 99.484375x44] baseline: 34
"Hello"
TextNode <#text>
BlockContainer <(anonymous)> at (8,209) content-size 784x0 children: inline

View file

@ -2,15 +2,15 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x334 [BFC] children: not-inline
Box <body.hero> at (2,2) content-size 600x332 flex-container(column) [FFC] children: not-inline
BlockContainer <div.header> at (102,3) content-size 400x330 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 11, rect: [102,3 340.484375x66] baseline: 50.984375
frag 0 from TextNode start: 0, length: 11, rect: [102,3 340.5x66] baseline: 50.984375
"This entire"
frag 1 from TextNode start: 12, length: 11, rect: [102,69 341.25x66] baseline: 50.984375
"text should"
frag 2 from TextNode start: 24, length: 8, rect: [102,135 274.15625x66] baseline: 50.984375
frag 2 from TextNode start: 24, length: 8, rect: [102,135 274.171875x66] baseline: 50.984375
"be on an"
frag 3 from TextNode start: 33, length: 6, rect: [102,201 204.078125x66] baseline: 50.984375
frag 3 from TextNode start: 33, length: 6, rect: [102,201 204.09375x66] baseline: 50.984375
"orange"
frag 4 from TextNode start: 40, length: 11, rect: [102,267 351.5625x66] baseline: 50.984375
frag 4 from TextNode start: 40, length: 11, rect: [102,267 351.59375x66] baseline: 50.984375
"background."
TextNode <#text>

View file

@ -3,19 +3,19 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (10,10) content-size 780x62 children: not-inline
Box <div.flex-container> at (11,11) content-size 778x60 flex-container(row) [FFC] children: not-inline
BlockContainer <div.flex-item> at (12,12) content-size 386x28 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 6, rect: [12,12 58.40625x22] baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [12,12 58.421875x22] baseline: 17
"Item 1"
TextNode <#text>
BlockContainer <div.flex-item> at (401,12) content-size 386x28 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 6, rect: [401,12 61.484375x22] baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [401,12 61.5x22] baseline: 17
"Item 2"
TextNode <#text>
BlockContainer <div.flex-item> at (12,42) content-size 386x28 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 6, rect: [12,42 61.84375x22] baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [12,42 61.859375x22] baseline: 17
"Item 3"
TextNode <#text>
BlockContainer <div.flex-item> at (401,42) content-size 386x28 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 6, rect: [401,42 60.15625x22] baseline: 17
frag 0 from TextNode start: 0, length: 6, rect: [401,42 60.171875x22] baseline: 17
"Item 4"
TextNode <#text>

View file

@ -1,7 +1,7 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x38 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x22 children: inline
frag 0 from TextNode start: 0, length: 35, rect: [8,8 362.609375x22] baseline: 17
frag 0 from TextNode start: 0, length: 35, rect: [8,8 362.75x22] baseline: 17
"This test passes if we don't crash."
TextNode <#text>

View file

@ -2,11 +2,11 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (1,1) content-size 798x66 [BFC] children: not-inline
Box <body> at (10,10) content-size 780x48 [GFC] children: not-inline
BlockContainer <div.foo> at (11,11) content-size 778x22 [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [11,11 33.9375x22] baseline: 17
frag 0 from TextNode start: 0, length: 3, rect: [11,11 33.953125x22] baseline: 17
"foo"
TextNode <#text>
BlockContainer <div.bar> at (11,35) content-size 778x22 [BFC] children: inline
frag 0 from TextNode start: 0, length: 3, rect: [11,35 34.546875x22] baseline: 17
frag 0 from TextNode start: 0, length: 3, rect: [11,35 34.5625x22] baseline: 17
"bar"
TextNode <#text>

View file

@ -5,7 +5,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <body> at (8,8) content-size 784x0 children: inline
TextNode <#text>
BlockContainer <h1> at (76.59375,103.765625) content-size 126x38 positioned [BFC] children: inline
frag 0 from TextNode start: 0, length: 4, rect: [116.59375,103.765625 46.53125x22] baseline: 17
frag 0 from TextNode start: 0, length: 4, rect: [116.59375,103.765625 46.546875x22] baseline: 17
"Test"
TextNode <#text>
TextNode <#text>

View file

@ -2,7 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x986 [BFC] children: not-inline
BlockContainer <body> at (8,70) content-size 784x908 children: not-inline
BlockContainer <p.min-inline-test> at (8,70) content-size 784x200 children: inline
frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.859375x76] baseline: 58.984375
frag 0 from TextNode start: 0, length: 2, rect: [8,70 85.875x76] baseline: 58.984375
"KK"
TextNode <#text>
BlockContainer <(anonymous)> at (8,340) content-size 784x76 children: inline
@ -10,7 +10,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BreakNode <br>
TextNode <#text>
BlockContainer <p.max-inline-test> at (8,486) content-size 100x76 children: inline
frag 0 from TextNode start: 0, length: 2, rect: [8,486 85.859375x76] baseline: 58.984375
frag 0 from TextNode start: 0, length: 2, rect: [8,486 85.875x76] baseline: 58.984375
"KK"
TextNode <#text>
BlockContainer <(anonymous)> at (8,632) content-size 784x76 children: inline
@ -18,7 +18,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BreakNode <br>
TextNode <#text>
BlockContainer <p.inline-size-test> at (8,778) content-size 400x200 children: inline
frag 0 from TextNode start: 0, length: 2, rect: [8,778 85.859375x76] baseline: 58.984375
frag 0 from TextNode start: 0, length: 2, rect: [8,778 85.875x76] baseline: 58.984375
"KK"
TextNode <#text>
BlockContainer <(anonymous)> at (8,1048) content-size 784x0 children: inline

View file

@ -4,9 +4,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <input.btn> at (13,10) content-size 290x296 children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 290x296 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,150) content-size 290x16 flex-item [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [37,150 242.4375x16] baseline: 12.5
BlockContainer <span> at (37,150) content-size 242.4375x16 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 31, rect: [37,150 242.4375x16] baseline: 12.5
frag 0 from BlockContainer start: 0, length: 0, rect: [37,150 242.5x16] baseline: 12.5
BlockContainer <span> at (37,150) content-size 242.5x16 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 31, rect: [37,150 242.5x16] baseline: 12.5
"Should be located in the center"
TextNode <#text>
BlockContainer <(anonymous)> at (8,308) content-size 784x0 children: inline
@ -18,6 +18,6 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<INPUT>.btn) [8,8 300x300]
PaintableWithLines (BlockContainer(anonymous)) [13,10 290x296]
PaintableWithLines (BlockContainer(anonymous)) [13,150 290x16]
PaintableWithLines (BlockContainer<SPAN>) [37,150 242.4375x16]
PaintableWithLines (BlockContainer<SPAN>) [37,150 242.5x16]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,308 784x0]

View file

@ -1,12 +1,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 <body> at (8,8) content-size 784x36 children: not-inline
BlockContainer <input.btn> at (13,10) content-size 195.734375x32 children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 195.734375x32 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,18) content-size 195.734375x16 flex-item [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,18 195.734375x16] baseline: 12.5
BlockContainer <span> at (13,18) content-size 195.734375x16 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 26, rect: [13,18 195.734375x16] baseline: 12.5
BlockContainer <input.btn> at (13,10) content-size 195.796875x32 children: not-inline
BlockContainer <(anonymous)> at (13,10) content-size 195.796875x32 flex-container(column) [FFC] children: not-inline
BlockContainer <(anonymous)> at (13,18) content-size 195.796875x16 flex-item [BFC] children: inline
frag 0 from BlockContainer start: 0, length: 0, rect: [13,18 195.796875x16] baseline: 12.5
BlockContainer <span> at (13,18) content-size 195.796875x16 inline-block [BFC] children: inline
frag 0 from TextNode start: 0, length: 26, rect: [13,18 195.796875x16] baseline: 12.5
"Width should shrink to fit"
TextNode <#text>
BlockContainer <(anonymous)> at (8,44) content-size 784x0 children: inline
@ -15,9 +15,9 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x600]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x36]
PaintableWithLines (BlockContainer<INPUT>.btn) [8,8 205.734375x36]
PaintableWithLines (BlockContainer(anonymous)) [13,10 195.734375x32]
PaintableWithLines (BlockContainer(anonymous)) [13,18 195.734375x16]
PaintableWithLines (BlockContainer<SPAN>) [13,18 195.734375x16]
PaintableWithLines (BlockContainer<INPUT>.btn) [8,8 205.796875x36]
PaintableWithLines (BlockContainer(anonymous)) [13,10 195.796875x32]
PaintableWithLines (BlockContainer(anonymous)) [13,18 195.796875x16]
PaintableWithLines (BlockContainer<SPAN>) [13,18 195.796875x16]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,44 784x0]

View file

@ -12,28 +12,28 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <input> at (9,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 196x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 4, rect: [11,10 40.171875x22] baseline: 17
frag 0 from TextNode start: 0, length: 4, rect: [11,10 40.1875x22] baseline: 17
"text"
TextNode <#text>
TextNode <#text>
BlockContainer <input> at (221,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (223,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (223,10) content-size 196x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.4375x22] baseline: 17
frag 0 from TextNode start: 0, length: 34, rect: [223,10 344.546875x22] baseline: 17
"This placeholder should be visible"
TextNode <#text>
TextNode <#text>
BlockContainer <input> at (433,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (435,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (435,10) content-size 196x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 4, rect: [435,10 40.171875x22] baseline: 17
frag 0 from TextNode start: 0, length: 4, rect: [435,10 40.1875x22] baseline: 17
"text"
TextNode <#text>
TextNode <#text>
BlockContainer <input#placeholder> at (9,35) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (11,36) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,36) content-size 196x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 40, rect: [11,36 407.71875x22] baseline: 17
frag 0 from TextNode start: 0, length: 40, rect: [11,36 407.859375x22] baseline: 17
"This placeholder should also be visisble"
TextNode <#text>
TextNode <#text>
@ -47,16 +47,16 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<DIV>) [11,10 196x22]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>) [220,8 202x26] overflow: [221,9 346.4375x25]
PaintableBox (Box<DIV>) [221,9 200x24] overflow: [221,9 346.4375x25]
PaintableWithLines (BlockContainer<DIV>) [223,10 196x22] overflow: [223,10 344.4375x22]
PaintableWithLines (BlockContainer<INPUT>) [220,8 202x26] overflow: [221,9 346.546875x25]
PaintableBox (Box<DIV>) [221,9 200x24] overflow: [221,9 346.546875x25]
PaintableWithLines (BlockContainer<DIV>) [223,10 196x22] overflow: [223,10 344.546875x22]
TextPaintable (TextNode<#text>)
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>) [432,8 202x26]
PaintableBox (Box<DIV>) [433,9 200x24]
PaintableWithLines (BlockContainer<DIV>) [435,10 196x22]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<INPUT>#placeholder) [8,34 202x26] overflow: [9,35 409.71875x25]
PaintableBox (Box<DIV>) [9,35 200x24] overflow: [9,35 409.71875x25]
PaintableWithLines (BlockContainer<DIV>) [11,36 196x22] overflow: [11,36 407.71875x22]
PaintableWithLines (BlockContainer<INPUT>#placeholder) [8,34 202x26] overflow: [9,35 409.859375x25]
PaintableBox (Box<DIV>) [9,35 200x24] overflow: [9,35 409.859375x25]
PaintableWithLines (BlockContainer<DIV>) [11,36 196x22] overflow: [11,36 407.859375x22]
TextPaintable (TextNode<#text>)

View file

@ -5,7 +5,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <input#foo> at (9,9) content-size 200x24 inline-block [BFC] children: not-inline
Box <div> at (11,10) content-size 196x22 flex-container(row) [FFC] children: not-inline
BlockContainer <div> at (11,10) content-size 196x22 flex-item [BFC] children: inline
frag 0 from TextNode start: 0, length: 4, rect: [11,10 62.171875x22] baseline: 17
frag 0 from TextNode start: 0, length: 4, rect: [11,10 62.1875x22] baseline: 17
"PASS"
TextNode <#text>
TextNode <#text>

View file

@ -2,7 +2,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x470 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x454 children: not-inline
BlockContainer <(anonymous)> at (8,8) content-size 784x22 children: inline
frag 0 from TextNode start: 0, length: 40, rect: [8,8 391.65625x22] baseline: 17
frag 0 from TextNode start: 0, length: 40, rect: [8,8 391.796875x22] baseline: 17
"Variable set by inline style of element:"
TextNode <#text>
BreakNode <br>
@ -12,7 +12,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (8,30) content-size 200x100 inline-block [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,130) content-size 784x66 children: inline
frag 0 from TextNode start: 1, length: 42, rect: [8,174 441.28125x22] baseline: 17
frag 0 from TextNode start: 1, length: 42, rect: [8,174 441.40625x22] baseline: 17
"Variable set by CSS rule matching element:"
TextNode <#text>
BreakNode <br>
@ -25,7 +25,7 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <(anonymous)> at (8,196) content-size 200x100 inline-block [BFC] children: inline
TextNode <#text>
BlockContainer <(anonymous)> at (8,296) content-size 784x66 children: inline
frag 0 from TextNode start: 1, length: 49, rect: [8,340 520.625x22] baseline: 17
frag 0 from TextNode start: 1, length: 49, rect: [8,340 520.765625x22] baseline: 17
"Variable set by CSS rule matching pseudo element:"
TextNode <#text>
BreakNode <br>

View file

@ -11,10 +11,10 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
SVGTextBox <text.heavy> at (141.28125,21.078125) content-size 148.234375x79.71875 children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.small> at (204,117.765625) content-size 34.59375x34.703125 children: inline
SVGTextBox <text.small> at (204,117.765625) content-size 34.578125x34.703125 children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.Rrrrr> at (243.1875,47.21875) content-size 519.34375x115.359375 children: inline
SVGTextBox <text.Rrrrr> at (243.1875,47.21875) content-size 519.484375x115.359375 children: inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
@ -25,5 +25,5 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 784x261.328125]
SVGPathPaintable (SVGTextBox<text>.small) [86.40625,65.5 48.109375x37.484375]
SVGPathPaintable (SVGTextBox<text>.heavy) [141.28125,21.078125 148.234375x79.71875]
SVGPathPaintable (SVGTextBox<text>.small) [204,117.765625 34.59375x34.703125]
SVGPathPaintable (SVGTextBox<text>.Rrrrr) [243.1875,47.21875 519.34375x115.359375]
SVGPathPaintable (SVGTextBox<text>.small) [204,117.765625 34.578125x34.703125]
SVGPathPaintable (SVGTextBox<text>.Rrrrr) [243.1875,47.21875 519.484375x115.359375]

View file

@ -11,10 +11,10 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
SVGTextBox <text.heavy> at (138.65625,43.953125) content-size 148.234375x79.71875 children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.small> at (187.65625,153.703125) content-size 34.59375x34.703125 children: inline
SVGTextBox <text.small> at (187.65625,153.703125) content-size 34.578125x34.703125 children: inline
TextNode <#text>
TextNode <#text>
SVGTextBox <text.Rrrrr> at (220.328125,83.15625) content-size 519.34375x115.359375 children: inline
SVGTextBox <text.Rrrrr> at (220.328125,83.15625) content-size 519.484375x115.359375 children: inline
TextNode <#text>
TextNode <#text>
TextNode <#text>
@ -25,5 +25,5 @@ ViewportPaintable (Viewport<#document>) [0,0 800x600]
SVGSVGPaintable (SVGSVGBox<svg>) [8,8 784x261.328125]
SVGPathPaintable (SVGTextBox<text>.small) [73.328125,88.359375 48.109375x37.484375]
SVGPathPaintable (SVGTextBox<text>.heavy) [138.65625,43.953125 148.234375x79.71875]
SVGPathPaintable (SVGTextBox<text>.small) [187.65625,153.703125 34.59375x34.703125]
SVGPathPaintable (SVGTextBox<text>.Rrrrr) [220.328125,83.15625 519.34375x115.359375]
SVGPathPaintable (SVGTextBox<text>.small) [187.65625,153.703125 34.578125x34.703125]
SVGPathPaintable (SVGTextBox<text>.Rrrrr) [220.328125,83.15625 519.484375x115.359375]

View file

@ -1,29 +1,29 @@
Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <html> at (0,0) content-size 800x114 [BFC] children: not-inline
BlockContainer <body> at (8,8) content-size 784x98 children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 615.53125x98 [BFC] children: not-inline
Box <table> at (9,9) content-size 613.53125x96 table-box [TFC] children: not-inline
TableWrapper <(anonymous)> at (8,8) content-size 615.65625x98 [BFC] children: not-inline
Box <table> at (9,9) content-size 613.65625x96 table-box [TFC] children: not-inline
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tbody> at (9,9) content-size 613.53125x96 table-row-group children: not-inline
Box <tr> at (9,9) content-size 613.53125x48 table-row children: not-inline
BlockContainer <td> at (11,11) content-size 349.84375x44 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 13, rect: [11,11 273.9375x44] baseline: 34
Box <tbody> at (9,9) content-size 613.65625x96 table-row-group children: not-inline
Box <tr> at (9,9) content-size 613.65625x48 table-row children: not-inline
BlockContainer <td> at (11,11) content-size 349.90625x44 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 13, rect: [11,11 273.984375x44] baseline: 34
"Text baseline"
TextNode <#text>
BlockContainer <td.small-text> at (364.84375,36.5) content-size 255.6875x11 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 12, rect: [364.84375,36.5 62.296875x11] baseline: 8.5
BlockContainer <td.small-text> at (364.90625,36.5) content-size 255.75x11 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 12, rect: [364.90625,36.5 62.28125x11] baseline: 8.5
"Smaller text"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
TextNode <#text>
Box <tr> at (9,57) content-size 613.53125x48 table-row children: not-inline
BlockContainer <td> at (11,59) content-size 349.84375x44 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 16, rect: [11,59 349.84375x44] baseline: 34
Box <tr> at (9,57) content-size 613.65625x48 table-row children: not-inline
BlockContainer <td> at (11,59) content-size 349.90625x44 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 16, rect: [11,59 349.90625x44] baseline: 34
"Another baseline"
TextNode <#text>
BlockContainer <td> at (364.84375,59) content-size 255.6875x44 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 12, rect: [364.84375,59 255.6875x44] baseline: 34
BlockContainer <td> at (364.90625,59) content-size 255.75x44 table-cell [BFC] children: inline
frag 0 from TextNode start: 0, length: 12, rect: [364.90625,59 255.75x44] baseline: 34
"Regular text"
TextNode <#text>
BlockContainer <(anonymous)> (not painted) children: inline
@ -34,17 +34,17 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
ViewportPaintable (Viewport<#document>) [0,0 800x600]
PaintableWithLines (BlockContainer<HTML>) [0,0 800x114]
PaintableWithLines (BlockContainer<BODY>) [8,8 784x98]
PaintableWithLines (TableWrapper(anonymous)) [8,8 615.53125x98]
PaintableBox (Box<TABLE>) [8,8 615.53125x98]
PaintableBox (Box<TBODY>) [9,9 613.53125x96]
PaintableBox (Box<TR>) [9,9 613.53125x48]
PaintableWithLines (BlockContainer<TD>) [9,9 353.84375x48]
PaintableWithLines (TableWrapper(anonymous)) [8,8 615.65625x98]
PaintableBox (Box<TABLE>) [8,8 615.65625x98]
PaintableBox (Box<TBODY>) [9,9 613.65625x96]
PaintableBox (Box<TR>) [9,9 613.65625x48]
PaintableWithLines (BlockContainer<TD>) [9,9 353.90625x48]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>.small-text) [362.84375,9 259.6875x48]
PaintableWithLines (BlockContainer<TD>.small-text) [362.90625,9 259.75x48]
TextPaintable (TextNode<#text>)
PaintableBox (Box<TR>) [9,57 613.53125x48]
PaintableWithLines (BlockContainer<TD>) [9,57 353.84375x48]
PaintableBox (Box<TR>) [9,57 613.65625x48]
PaintableWithLines (BlockContainer<TD>) [9,57 353.90625x48]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer<TD>) [362.84375,57 259.6875x48]
PaintableWithLines (BlockContainer<TD>) [362.90625,57 259.75x48]
TextPaintable (TextNode<#text>)
PaintableWithLines (BlockContainer(anonymous)) [8,106 784x0]

View file

@ -10,20 +10,20 @@ Viewport <#document> at (0,0) content-size 800x600 children: not-inline
BlockContainer <textarea> at (11,11) content-size 240x44 inline-block [BFC] children: not-inline
BlockContainer <div> at (11,11) content-size 240x22 children: not-inline
BlockContainer <div> at (11,11) content-size 240x22 children: inline
frag 0 from TextNode start: 0, length: 17, rect: [11,11 190.265625x22] baseline: 17
frag 0 from TextNode start: 0, length: 17, rect: [11,11 190.28125x22] baseline: 17
"Bonjour mon amis!"
TextNode <#text>
TextNode <#text>
BlockContainer <textarea> at (267,11) content-size 240x44 inline-block [BFC] children: not-inline
BlockContainer <div> at (267,11) content-size 240x22 children: not-inline
BlockContainer <div> at (267,11) content-size 240x22 children: inline
frag 0 from TextNode start: 0, length: 19, rect: [267,11 177.6875x22] baseline: 17
frag 0 from TextNode start: 0, length: 19, rect: [267,11 177.734375x22] baseline: 17
"Well hello friends!"
TextNode <#text>
BlockContainer <textarea> at (513,11) content-size 240x44 inline-block [BFC] children: not-inline
BlockContainer <div> at (513,11) content-size 240x22 children: not-inline
BlockContainer <div> at (513,11) content-size 240x22 children: inline
frag 0 from TextNode start: 0, length: 16, rect: [513,11 154.0625x22] baseline: 17
frag 0 from TextNode start: 0, length: 16, rect: [513,11 154.078125x22] baseline: 17
"Tja hej vänner!"
TextNode <#text>
TextNode <#text>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 268 KiB

After

Width:  |  Height:  |  Size: 268 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 674 KiB

After

Width:  |  Height:  |  Size: 674 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

After

Width:  |  Height:  |  Size: 18 KiB

View file

@ -70,7 +70,8 @@ set(SOURCES
serenity_lib(LibGfx gfx)
target_link_libraries(LibGfx PRIVATE LibCompress LibCore LibCrypto LibFileSystem LibRIFF LibTextCodec LibIPC LibUnicode LibURL ${SKIA_LIBRARIES})
find_package(harfbuzz REQUIRED)
target_link_libraries(LibGfx PRIVATE LibCompress LibCore LibCrypto LibFileSystem LibRIFF LibTextCodec LibIPC LibUnicode LibURL ${SKIA_LIBRARIES} harfbuzz)
set(generated_sources TIFFMetadata.h TIFFTagHandler.cpp)
list(TRANSFORM generated_sources PREPEND "ImageFormats/")

View file

@ -6,9 +6,16 @@
#include <LibGfx/Font/Font.h>
#include <LibGfx/Font/FontDatabase.h>
#include <harfbuzz/hb.h>
namespace Gfx {
Font::~Font()
{
if (m_harfbuzz_font)
hb_font_destroy(m_harfbuzz_font);
}
Font const& Font::bold_variant() const
{
if (m_bold_variant)
@ -19,4 +26,14 @@ Font const& Font::bold_variant() const
return *m_bold_variant;
}
hb_font_t* Font::harfbuzz_font() const
{
if (!m_harfbuzz_font) {
m_harfbuzz_font = hb_font_create(typeface().harfbuzz_typeface());
hb_font_set_scale(m_harfbuzz_font, pixel_size() * text_shaping_resolution, pixel_size() * text_shaping_resolution);
hb_font_set_ptem(m_harfbuzz_font, point_size());
}
return m_harfbuzz_font;
}
}

View file

@ -17,6 +17,8 @@
#include <LibGfx/Bitmap.h>
#include <LibGfx/Size.h>
struct hb_font_t;
namespace Gfx {
struct FontPixelMetrics {
@ -49,11 +51,13 @@ enum FontWidth {
UltraExpanded = 9
};
constexpr float text_shaping_resolution = 64;
class Typeface;
class Font : public RefCounted<Font> {
public:
virtual ~Font() {};
virtual ~Font();
virtual FontPixelMetrics pixel_metrics() const = 0;
@ -91,6 +95,7 @@ public:
virtual NonnullRefPtr<Font> with_size(float point_size) const = 0;
Font const& bold_variant() const;
hb_font_t* harfbuzz_font() const;
virtual bool has_color_bitmaps() const = 0;
@ -98,6 +103,7 @@ public:
private:
mutable RefPtr<Gfx::Font const> m_bold_variant;
mutable hb_font_t* m_harfbuzz_font { nullptr };
};
}

View file

@ -7,6 +7,7 @@
#define AK_DONT_REPLACE_STD
#include <core/SkTypeface.h>
#include <harfbuzz/hb.h>
#include <LibGfx/Font/ScaledFont.h>
#include <LibGfx/Font/Typeface.h>
@ -14,7 +15,14 @@
namespace Gfx {
Typeface::Typeface() = default;
Typeface::~Typeface() = default;
Typeface::~Typeface()
{
if (m_harfbuzz_face)
hb_face_destroy(m_harfbuzz_face);
if (m_harfbuzz_blob)
hb_blob_destroy(m_harfbuzz_blob);
}
NonnullRefPtr<ScaledFont> Typeface::scaled_font(float point_size) const
{
@ -32,4 +40,14 @@ NonnullRefPtr<ScaledFont> Typeface::scaled_font(float point_size) const
m_scaled_fonts.set(point_size, scaled_font);
return scaled_font;
}
hb_face_t* Typeface::harfbuzz_typeface() const
{
if (!m_harfbuzz_blob)
m_harfbuzz_blob = hb_blob_create(reinterpret_cast<char const*>(buffer().data()), buffer().size(), HB_MEMORY_MODE_READONLY, nullptr, [](void*) {});
if (!m_harfbuzz_face)
m_harfbuzz_face = hb_face_create(m_harfbuzz_blob, ttc_index());
return m_harfbuzz_face;
}
}

View file

@ -18,6 +18,8 @@
#define DEFAULT_DPI 96
class SkTypeface;
struct hb_blob_t;
struct hb_face_t;
namespace Gfx {
@ -65,6 +67,7 @@ public:
[[nodiscard]] NonnullRefPtr<ScaledFont> scaled_font(float point_size) const;
RefPtr<SkTypeface> const& skia_typeface() const;
hb_face_t* harfbuzz_typeface() const;
protected:
Typeface();
@ -75,6 +78,8 @@ protected:
private:
mutable HashMap<float, NonnullRefPtr<ScaledFont>> m_scaled_fonts;
mutable RefPtr<SkTypeface> m_skia_typeface;
mutable hb_blob_t* m_harfbuzz_blob { nullptr };
mutable hb_face_t* m_harfbuzz_face { nullptr };
};
}

View file

@ -168,12 +168,11 @@ void Path::text(Utf8View text, Font const& font)
auto& scaled_font = static_cast<ScaledFont const&>(font);
for_each_glyph_position(
last_point(), text, scaled_font, [&](DrawGlyphOrEmoji glyph_or_emoji) {
last_point(), text, scaled_font, [&](DrawGlyphOrEmoji const& glyph_or_emoji) {
if (glyph_or_emoji.has<DrawGlyph>()) {
auto& glyph = glyph_or_emoji.get<DrawGlyph>();
move_to(glyph.position);
auto glyph_id = scaled_font.glyph_id_for_code_point(glyph.code_point);
scaled_font.append_glyph_path_to(*this, glyph_id);
scaled_font.append_glyph_path_to(*this, glyph.glyph_id);
}
},
IncludeLeftBearing::Yes);
@ -214,7 +213,7 @@ Path Path::place_text_along(Utf8View text, Font const& font) const
if (!glyph)
return;
auto offset = glyph->position.x();
auto width = font.glyph_width(glyph->code_point);
auto width = scaled_font.glyph_metrics(glyph->glyph_id).advance_width;
auto start = next_point_for_offset(offset);
if (!start.has_value())
return;
@ -226,8 +225,7 @@ Path Path::place_text_along(Utf8View text, Font const& font) const
auto angle = AK::atan2(delta.y(), delta.x());
Gfx::Path glyph_path;
// Rotate the glyph then move it to start point.
auto glyph_id = scaled_font.glyph_id_for_code_point(glyph->code_point);
scaled_font.append_glyph_path_to(glyph_path, glyph_id);
scaled_font.append_glyph_path_to(glyph_path, glyph->glyph_id);
auto transform = Gfx::AffineTransform {}
.translate(*start)
.multiply(Gfx::AffineTransform {}.rotate_radians(angle))

View file

@ -7,51 +7,82 @@
#include "TextLayout.h"
#include "Font/Emoji.h"
#include <AK/Debug.h>
#include <LibUnicode/CharacterTypes.h>
#include <AK/TypeCasts.h>
#include <LibGfx/Font/ScaledFont.h>
#include <LibUnicode/Emoji.h>
#include <harfbuzz/hb.h>
namespace Gfx {
DrawGlyphOrEmoji prepare_draw_glyph_or_emoji(FloatPoint point, Utf8CodePointIterator& it, Font const& font)
static DrawGlyphOrEmoji construct_glyph_or_emoji(size_t index, FloatPoint const& position, Gfx::Font const& font, Span<hb_glyph_info_t const> glyph_info, Span<hb_glyph_info_t const> input_glyph_info)
{
u32 code_point = *it;
auto next_code_point = it.peek(1);
if (font.has_color_bitmaps()) {
auto cluster_start = glyph_info[index].cluster;
auto cluster_end = [&]() -> u32 {
if (index + 1 < glyph_info.size())
return glyph_info[index + 1].cluster;
return input_glyph_info.last().cluster + 1;
}();
ScopeGuard consume_variation_selector = [&, initial_it = it] {
// If we advanced the iterator to consume an emoji sequence, don't look for another variation selector.
if (initial_it != it)
return;
Vector<u32> cluster;
for (size_t j = 0; j < input_glyph_info.size(); ++j) {
auto const& glyph = input_glyph_info[j];
if (glyph.cluster >= cluster_end)
break;
if (glyph.cluster >= cluster_start)
cluster.append(glyph.codepoint);
}
// Otherwise, discard one code point if it's a variation selector.
if (next_code_point.has_value() && Unicode::code_point_has_variation_selector_property(*next_code_point))
++it;
};
// NOTE: We don't check for emoji
auto font_contains_glyph = font.contains_glyph(code_point);
auto check_for_emoji = !font.has_color_bitmaps() && Unicode::could_be_start_of_emoji_sequence(it, font_contains_glyph ? Unicode::SequenceType::EmojiPresentation : Unicode::SequenceType::Any);
// If the font contains the glyph, and we know it's not the start of an emoji, draw a text glyph.
if (font_contains_glyph && !check_for_emoji) {
return DrawGlyph {
.position = point,
.code_point = code_point,
};
}
// If we didn't find a text glyph, or have an emoji variation selector or regional indicator, try to draw an emoji glyph.
if (auto const* emoji = Emoji::emoji_for_code_point_iterator(it)) {
return DrawEmoji {
.position = point,
.emoji = emoji,
};
if (auto const* emoji = Emoji::emoji_for_code_points(cluster)) {
return DrawEmoji {
.position = position,
.emoji = emoji,
};
}
}
return DrawGlyph {
.position = point,
.code_point = code_point,
.position = position,
.glyph_id = glyph_info[index].codepoint,
};
}
void for_each_glyph_position(FloatPoint baseline_start, Utf8View string, Gfx::Font const& font, Function<void(DrawGlyphOrEmoji const&)> callback, IncludeLeftBearing include_left_bearing, Optional<float&> width)
{
hb_buffer_t* buffer = hb_buffer_create();
ScopeGuard destroy_buffer = [&]() { hb_buffer_destroy(buffer); };
hb_buffer_add_utf8(buffer, reinterpret_cast<char const*>(string.bytes()), string.byte_length(), 0, -1);
hb_buffer_guess_segment_properties(buffer);
u32 glyph_count;
auto* glyph_info = hb_buffer_get_glyph_infos(buffer, &glyph_count);
Vector<hb_glyph_info_t> const input_glyph_info({ glyph_info, glyph_count });
if (input_glyph_info.is_empty())
return;
auto* hb_font = font.harfbuzz_font();
hb_shape(hb_font, buffer, nullptr, 0);
glyph_info = hb_buffer_get_glyph_infos(buffer, &glyph_count);
auto* positions = hb_buffer_get_glyph_positions(buffer, &glyph_count);
FloatPoint point = baseline_start;
for (size_t i = 0; i < glyph_count; ++i) {
auto position = point
- FloatPoint { 0, font.pixel_metrics().ascent }
+ FloatPoint { positions[i].x_offset, positions[i].y_offset } / text_shaping_resolution;
if (include_left_bearing == IncludeLeftBearing::Yes) {
VERIFY(is<Gfx::ScaledFont>(font));
auto bearing = static_cast<Gfx::ScaledFont const&>(font).glyph_metrics(glyph_info[i].codepoint).left_side_bearing;
position += FloatPoint { bearing, 0 };
}
callback(construct_glyph_or_emoji(i, position, font, { glyph_info, glyph_count }, input_glyph_info.span()));
point += FloatPoint { positions[i].x_advance, positions[i].y_advance } / text_shaping_resolution;
}
if (width.has_value())
*width = point.x();
}
}

View file

@ -32,7 +32,7 @@ enum class IncludeLeftBearing {
struct DrawGlyph {
FloatPoint position;
u32 code_point;
u32 glyph_id;
void translate_by(FloatPoint const& delta)
{
@ -72,47 +72,6 @@ private:
NonnullRefPtr<Font> m_font;
};
Variant<DrawGlyph, DrawEmoji> prepare_draw_glyph_or_emoji(FloatPoint point, Utf8CodePointIterator& it, Font const& font);
template<typename Callback>
void for_each_glyph_position(FloatPoint baseline_start, Utf8View string, Gfx::Font const& font, Callback callback, IncludeLeftBearing include_left_bearing = IncludeLeftBearing::No, Optional<float&> width = {})
{
auto space_width = font.glyph_width(' ');
u32 last_code_point = 0;
auto point = baseline_start;
for (auto code_point_iterator = string.begin(); code_point_iterator != string.end(); ++code_point_iterator) {
auto it = code_point_iterator; // The callback function will advance the iterator, so create a copy for this lookup.
auto code_point = *code_point_iterator;
point.set_y(baseline_start.y() - font.pixel_metrics().ascent);
if (should_paint_as_space(code_point)) {
point.translate_by(space_width, 0);
last_code_point = code_point;
continue;
}
auto kerning = font.glyphs_horizontal_kerning(last_code_point, code_point);
if (kerning != 0.0f)
point.translate_by(kerning, 0);
auto glyph_width = font.glyph_or_emoji_width(it);
auto glyph_or_emoji = prepare_draw_glyph_or_emoji(point, code_point_iterator, font);
if (include_left_bearing == IncludeLeftBearing::Yes) {
if (glyph_or_emoji.has<DrawGlyph>())
glyph_or_emoji.get<DrawGlyph>().position += FloatPoint(font.glyph_left_bearing(code_point), 0);
}
callback(glyph_or_emoji);
point.translate_by(glyph_width, 0);
last_code_point = code_point;
}
if (width.has_value())
*width = point.x();
}
void for_each_glyph_position(FloatPoint baseline_start, Utf8View string, Gfx::Font const& font, Function<void(DrawGlyphOrEmoji const&)> callback, IncludeLeftBearing include_left_bearing = IncludeLeftBearing::No, Optional<float&> width = {});
}

View file

@ -375,7 +375,7 @@ void InlineFormattingContext::generate_line_boxes(LayoutMode layout_mode)
glyphs.remove(last_glyph_index - 1, remove_item_count);
glyphs.append(Gfx::DrawGlyph {
.position = last_glyph_position,
.code_point = ellipsis_codepoint });
.glyph_id = glyph_run->font().glyph_id_for_code_point(ellipsis_codepoint) });
}
}
}

View file

@ -200,7 +200,6 @@ Optional<InlineLevelIterator::Item> InlineLevelIterator::next_without_lookahead(
Gfx::for_each_glyph_position(
{ 0, 0 }, chunk.view, chunk.font, [&](Gfx::DrawGlyphOrEmoji const& glyph_or_emoji) {
glyph_run.append(glyph_or_emoji);
return IterationDecision::Continue;
},
Gfx::IncludeLeftBearing::No, glyph_run_width);

View file

@ -383,7 +383,6 @@ DisplayListPlayerSkia::SkiaSurface& DisplayListPlayerSkia::surface() const
void DisplayListPlayerSkia::draw_glyph_run(DrawGlyphRun const& command)
{
auto const& gfx_font = static_cast<Gfx::ScaledFont const&>(command.glyph_run->font());
auto const& gfx_typeface = gfx_font.typeface();
auto sk_font = gfx_font.skia_font(command.scale);
auto glyph_count = command.glyph_run->glyphs().size();
@ -401,8 +400,7 @@ void DisplayListPlayerSkia::draw_glyph_run(DrawGlyphRun const& command)
if (transformed_glyph.has<Gfx::DrawGlyph>()) {
auto& glyph = transformed_glyph.get<Gfx::DrawGlyph>();
auto const& point = glyph.position;
auto const& code_point = glyph.code_point;
glyphs.append(gfx_typeface.glyph_id_for_code_point(code_point));
glyphs.append(glyph.glyph_id);
positions.append(to_skia_point(point));
}
}

View file

@ -238,7 +238,6 @@ void DisplayListRecorder::draw_text(Gfx::IntRect const& rect, String raw_text, G
Gfx::for_each_glyph_position(
{ 0, 0 }, raw_text.code_points(), font, [&](Gfx::DrawGlyphOrEmoji const& glyph_or_emoji) {
glyph_run->append(glyph_or_emoji);
return IterationDecision::Continue;
},
Gfx::IncludeLeftBearing::No, glyph_run_width);

View file

@ -5,6 +5,7 @@
"name": "fontconfig",
"platform": "linux | freebsd | openbsd"
},
"harfbuzz",
"icu",
"libjpeg-turbo",
"libjxl",