浏览代码

LibWeb: Compute inset for relative positioned inline-block

Emil Militzer 2 年之前
父节点
当前提交
a8d08357c9

+ 16 - 0
Tests/LibWeb/Layout/expected/block-and-inline/inline-box-positioned-with-top-left.txt

@@ -0,0 +1,16 @@
+Viewport <#document> at (0,0) content-size 800x600 children: not-inline
+  BlockContainer <html> at (0,0) content-size 800x36 children: not-inline
+    BlockContainer <body> at (8,8) content-size 784x20 children: inline
+      line 0 width: 352.34375, height: 20, bottom: 20, baseline: 13.53125
+        frag 0 from TextNode start: 0, length: 14, rect: [8,8 112.421875x17.46875]
+          "text text text"
+        frag 1 from BlockContainer start: 0, length: 0, rect: [120,8 110.375x20]
+        frag 2 from TextNode start: 0, length: 16, rect: [231,8 129.546875x17.46875]
+          "more inline text"
+      TextNode <#text>
+      BlockContainer <span.displaced_text> at (150,48) content-size 110.375x20 positioned inline-block children: inline
+        line 0 width: 110.375, height: 17.46875, bottom: 17.46875, baseline: 13.53125
+          frag 0 from TextNode start: 0, length: 14, rect: [150,48 110.375x17.46875]
+            "displaced text"
+        TextNode <#text>
+      TextNode <#text>

+ 14 - 0
Tests/LibWeb/Layout/input/block-and-inline/inline-box-positioned-with-top-left.html

@@ -0,0 +1,14 @@
+<style>
+    body {
+        font-family: 'SerenitySans';
+    }
+
+    .displaced_text {
+        height: 20px;
+        top: 40px;
+        left: 30px;
+        display: inline-block;
+        position: relative;
+    }
+
+</style>text text text<span class="displaced_text">displaced text</span>more inline text

+ 1 - 0
Userland/Libraries/LibWeb/Layout/InlineFormattingContext.cpp

@@ -256,6 +256,7 @@ void InlineFormattingContext::generate_line_boxes(LayoutMode layout_mode)
             break;
         case InlineLevelIterator::Item::Type::Element: {
             auto& box = verify_cast<Layout::Box>(*item.node);
+            compute_inset(box);
             line_builder.break_if_needed(item.border_box_width());
             line_builder.append_box(box, item.border_start + item.padding_start, item.padding_end + item.border_end, item.margin_start, item.margin_end);
             break;