mirror of
				https://github.com/LadybirdBrowser/ladybird.git
				synced 2025-10-30 21:01:00 +00:00 
			
		
		
		
	 1d65cf367f
			
		
	
	
		1d65cf367f
		
	
	
	
	
		
			
			Inline layout is now done by LayoutBlock. Blocks with inline children will split them into line boxes during layout. A LayoutBlock can have zero or more LineBox objects. Each LineBox represents one visual line. A LineBox can have any number of LineBoxFragment children. A fragment is an offset+length into a specific LayoutNode. To paint a LayoutBlock with inline children, we walk its line boxes, and walk their fragments, painting each fragment at a time by calling LineBoxFragment::render(), which in turn calls the LayoutNode via LayoutText::render_fragment(). Hit testing works similarly. This is very incomplete and has many bugs, but should make it easier for us to move forward with this code.
		
			
				
	
	
		
			167 lines
		
	
	
	
		
			6.1 KiB
		
	
	
	
		
			C++
		
	
	
	
	
	
			
		
		
	
	
			167 lines
		
	
	
	
		
			6.1 KiB
		
	
	
	
		
			C++
		
	
	
	
	
	
| #include <AK/Utf8View.h>
 | |
| #include <LibHTML/CSS/StyleSheet.h>
 | |
| #include <LibHTML/DOM/Document.h>
 | |
| #include <LibHTML/DOM/Element.h>
 | |
| #include <LibHTML/DOM/Text.h>
 | |
| #include <LibHTML/Dump.h>
 | |
| #include <LibHTML/Layout/LayoutBlock.h>
 | |
| #include <LibHTML/Layout/LayoutNode.h>
 | |
| #include <LibHTML/Layout/LayoutText.h>
 | |
| #include <stdio.h>
 | |
| 
 | |
| void dump_tree(const Node& node)
 | |
| {
 | |
|     static int indent = 0;
 | |
|     for (int i = 0; i < indent; ++i)
 | |
|         dbgprintf("  ");
 | |
|     if (node.is_document()) {
 | |
|         dbgprintf("*Document*\n");
 | |
|     } else if (node.is_element()) {
 | |
|         dbgprintf("<%s", static_cast<const Element&>(node).tag_name().characters());
 | |
|         static_cast<const Element&>(node).for_each_attribute([](auto& name, auto& value) {
 | |
|             dbgprintf(" %s=%s", name.characters(), value.characters());
 | |
|         });
 | |
|         dbgprintf(">\n");
 | |
|     } else if (node.is_text()) {
 | |
|         dbgprintf("\"%s\"\n", static_cast<const Text&>(node).data().characters());
 | |
|     }
 | |
|     ++indent;
 | |
|     if (node.is_parent_node()) {
 | |
|         static_cast<const ParentNode&>(node).for_each_child([](auto& child) {
 | |
|             dump_tree(child);
 | |
|         });
 | |
|     }
 | |
|     --indent;
 | |
| }
 | |
| 
 | |
| void dump_tree(const LayoutNode& layout_node)
 | |
| {
 | |
|     static int indent = 0;
 | |
|     for (int i = 0; i < indent; ++i)
 | |
|         dbgprintf("    ");
 | |
| 
 | |
|     String tag_name;
 | |
|     if (layout_node.is_anonymous())
 | |
|         tag_name = "(anonymous)";
 | |
|     else if (layout_node.node()->is_text())
 | |
|         tag_name = "#text";
 | |
|     else if (layout_node.node()->is_document())
 | |
|         tag_name = "#document";
 | |
|     else if (layout_node.node()->is_element())
 | |
|         tag_name = static_cast<const Element&>(*layout_node.node()).tag_name();
 | |
|     else
 | |
|         tag_name = "???";
 | |
| 
 | |
|     dbgprintf("%s {%s} at (%d,%d) size %dx%d",
 | |
|         layout_node.class_name(),
 | |
|         tag_name.characters(),
 | |
|         layout_node.rect().x(),
 | |
|         layout_node.rect().y(),
 | |
|         layout_node.rect().width(),
 | |
|         layout_node.rect().height());
 | |
| 
 | |
|     // Dump the horizontal box properties
 | |
|     dbgprintf(" [%d+%d+%d %d %d+%d+%d]",
 | |
|         layout_node.style().margin().left.to_px(),
 | |
|         layout_node.style().border().left.to_px(),
 | |
|         layout_node.style().padding().left.to_px(),
 | |
|         layout_node.rect().width(),
 | |
|         layout_node.style().padding().right.to_px(),
 | |
|         layout_node.style().border().right.to_px(),
 | |
|         layout_node.style().margin().right.to_px());
 | |
| 
 | |
|     // And the vertical box properties
 | |
|     dbgprintf(" [%d+%d+%d %d %d+%d+%d]",
 | |
|         layout_node.style().margin().top.to_px(),
 | |
|         layout_node.style().border().top.to_px(),
 | |
|         layout_node.style().padding().top.to_px(),
 | |
|         layout_node.rect().height(),
 | |
|         layout_node.style().padding().bottom.to_px(),
 | |
|         layout_node.style().border().bottom.to_px(),
 | |
|         layout_node.style().margin().bottom.to_px());
 | |
| 
 | |
|     dbgprintf("\n");
 | |
| 
 | |
|     if (layout_node.is_block() && static_cast<const LayoutBlock&>(layout_node).children_are_inline()) {
 | |
|         auto& block = static_cast<const LayoutBlock&>(layout_node);
 | |
|         for (int i = 0; i < indent; ++i)
 | |
|             dbgprintf("    ");
 | |
|         dbgprintf("  Line boxes (%d):\n", block.line_boxes().size());
 | |
|         for (int line_box_index = 0; line_box_index < block.line_boxes().size(); ++line_box_index) {
 | |
|             auto& line_box = block.line_boxes()[line_box_index];
 | |
|             for (int i = 0; i < indent; ++i)
 | |
|                 dbgprintf("    ");
 | |
|             dbgprintf("    [%d] width: %d\n", line_box_index, line_box.width());
 | |
|             for (int fragment_index = 0; fragment_index < line_box.fragments().size(); ++fragment_index) {
 | |
|                 auto& fragment = line_box.fragments()[fragment_index];
 | |
|                 for (int i = 0; i < indent; ++i)
 | |
|                     dbgprintf("    ");
 | |
|                 dbgprintf("      [%d] layout_node: %s{%p}, start: %d, length: %d, rect: %s\n",
 | |
|                     fragment_index,
 | |
|                     fragment.layout_node().class_name(),
 | |
|                     &fragment.layout_node(),
 | |
|                     fragment.start(),
 | |
|                     fragment.length(),
 | |
|                     fragment.rect().to_string().characters());
 | |
|                 if (fragment.layout_node().is_text()) {
 | |
|                     for (int i = 0; i < indent; ++i)
 | |
|                         dbgprintf("    ");
 | |
|                     auto& layout_text = static_cast<const LayoutText&>(fragment.layout_node());
 | |
|                     dbgprintf("        text: \"%s\"\n",
 | |
|                         String(Utf8View(layout_text.node().data()).substring_view(fragment.start(), fragment.length()).as_string()).characters());
 | |
|                 }
 | |
|             }
 | |
|         }
 | |
|     }
 | |
| 
 | |
|     layout_node.style_properties().for_each_property([&](auto& key, auto& value) {
 | |
|         for (int i = 0; i < indent; ++i)
 | |
|             dbgprintf("    ");
 | |
|         dbgprintf("  (%s: %s)\n", key.characters(), value.to_string().characters());
 | |
|     });
 | |
| 
 | |
|     ++indent;
 | |
|     layout_node.for_each_child([](auto& child) {
 | |
|         dump_tree(child);
 | |
|     });
 | |
|     --indent;
 | |
| }
 | |
| 
 | |
| void dump_rule(const StyleRule& rule)
 | |
| {
 | |
|     dbgprintf("Rule:\n");
 | |
|     for (auto& selector : rule.selectors()) {
 | |
|         dbgprintf("  Selector:\n");
 | |
|         for (auto& component : selector.components()) {
 | |
|             const char* type_description = "Unknown";
 | |
|             switch (component.type) {
 | |
|             case Selector::Component::Type::Invalid:
 | |
|                 type_description = "Invalid";
 | |
|                 break;
 | |
|             case Selector::Component::Type::Id:
 | |
|                 type_description = "Id";
 | |
|                 break;
 | |
|             case Selector::Component::Type::Class:
 | |
|                 type_description = "Class";
 | |
|                 break;
 | |
|             case Selector::Component::Type::TagName:
 | |
|                 type_description = "TagName";
 | |
|                 break;
 | |
|             }
 | |
|             dbgprintf("    %s:%s\n", type_description, component.value.characters());
 | |
|         }
 | |
|     }
 | |
|     dbgprintf("  Declarations:\n");
 | |
|     for (auto& property : rule.declaration().properties()) {
 | |
|         dbgprintf("    '%s': '%s'\n", property.name.characters(), property.value->to_string().characters());
 | |
|     }
 | |
| }
 | |
| 
 | |
| void dump_sheet(const StyleSheet& sheet)
 | |
| {
 | |
|     dbgprintf("StyleSheet{%p}: %d rule(s)\n", &sheet, sheet.rules().size());
 | |
| 
 | |
|     for (auto& rule : sheet.rules()) {
 | |
|         dump_rule(rule);
 | |
|     }
 | |
| }
 |