mirror of
https://github.com/RGBCube/serenity
synced 2025-07-25 16:07:47 +00:00
LibWeb: Paint inspection outline for InlineNodes :^)
This iterates the fragments of the containing block, and paints their outlines if they are descendants of the InlineNode. If multiple fragments are adjacent, eg: ```html <span><b>Well</b> hello <i>friends!</i></span> ``` ...then we get a double-thick outline between "Well", " hello " and "friends!", but we can come back to this after we implement non-rectangular outlines for the `outline` CSS property.
This commit is contained in:
parent
37f060b873
commit
226fe4b57d
2 changed files with 18 additions and 0 deletions
|
@ -5,6 +5,7 @@
|
|||
*/
|
||||
|
||||
#include <LibGfx/Painter.h>
|
||||
#include <LibWeb/DOM/Document.h>
|
||||
#include <LibWeb/DOM/Element.h>
|
||||
#include <LibWeb/Layout/BlockBox.h>
|
||||
#include <LibWeb/Layout/InlineFormattingContext.h>
|
||||
|
@ -48,4 +49,20 @@ void InlineNode::paint_fragment(PaintContext& context, const LineBoxFragment& fr
|
|||
}
|
||||
}
|
||||
|
||||
void InlineNode::paint(PaintContext& context, PaintPhase phase)
|
||||
{
|
||||
auto& painter = context.painter();
|
||||
|
||||
if (phase == PaintPhase::Foreground && document().inspected_node() == dom_node()) {
|
||||
// FIXME: This paints a double-thick border between adjacent fragments, where ideally there
|
||||
// would be none. Once we implement non-rectangular outlines for the `outline` CSS
|
||||
// property, we can use that here instead.
|
||||
containing_block()->for_each_fragment([&](auto& fragment) {
|
||||
if (is_inclusive_ancestor_of(fragment.layout_node()))
|
||||
painter.draw_rect(enclosing_int_rect(fragment.absolute_rect()), Color::Magenta);
|
||||
return IterationDecision::Continue;
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue