RGBCube/serenity
1
Fork 0
mirror of https://github.com/RGBCube/serenity synced 2025-07-26 02:07:35 +00:00
Code Issues Activity Actions

LibWeb: Paint inline-level and replaced elements on top of floats

Browse source 
This matches CSS 2.1 appendix E, and fixes an instance of red face
border on ACID2. :^)
This commit is contained in:
Andreas Kling 2022-02-14 16:39:45 +01:00
parent f2a917229a
commit f4625ed9de
2 changed files with 16 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

17
Userland/Libraries/LibWeb/Painting/StackingContext.cpp
View file

@ -1,5 +1,5 @@
/* /*
* Copyright (c) 2020, Andreas Kling <kling@serenityos.org> * Copyright (c) 2020-2022, Andreas Kling <kling@serenityos.org>
* *
* SPDX-License-Identifier: BSD-2-Clause * SPDX-License-Identifier: BSD-2-Clause
*/ */
@ -9,6 +9,7 @@
#include <LibGfx/Painter.h> #include <LibGfx/Painter.h>
#include <LibWeb/Layout/Box.h> #include <LibWeb/Layout/Box.h>
#include <LibWeb/Layout/InitialContainingBlock.h> #include <LibWeb/Layout/InitialContainingBlock.h>
#include <LibWeb/Layout/ReplacedBox.h>
#include <LibWeb/Painting/StackingContext.h> #include <LibWeb/Painting/StackingContext.h>
namespace Web::Layout { namespace Web::Layout {
@ -40,9 +41,10 @@ void StackingContext::paint_descendants(PaintContext& context, Node& box, Stacki
box.for_each_child([&](auto& child) { box.for_each_child([&](auto& child) {
if (child.establishes_stacking_context()) if (child.establishes_stacking_context())
return; return;
bool child_is_inline_or_replaced = child.is_inline() || is<ReplacedBox>(child);
switch (phase) { switch (phase) {
case StackingContextPaintPhase::BackgroundAndBorders: case StackingContextPaintPhase::BackgroundAndBorders:
if (!child.is_floating() && !child.is_positioned()) { if (!child_is_inline_or_replaced && !child.is_floating() && !child.is_positioned()) {
child.paint(context, PaintPhase::Background); child.paint(context, PaintPhase::Background);
child.paint(context, PaintPhase::Border); child.paint(context, PaintPhase::Border);
paint_descendants(context, child, phase); paint_descendants(context, child, phase);
@ -58,6 +60,16 @@ void StackingContext::paint_descendants(PaintContext& context, Node& box, Stacki
paint_descendants(context, child, phase); paint_descendants(context, child, phase);
} }
break; break;
case StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced:
if (!child.is_positioned()) {
if (child_is_inline_or_replaced) {
child.paint(context, PaintPhase::Background);
child.paint(context, PaintPhase::Border);
paint_descendants(context, child, StackingContextPaintPhase::BackgroundAndBorders);
}
paint_descendants(context, child, phase);
}
break;
case StackingContextPaintPhase::Foreground: case StackingContextPaintPhase::Foreground:
if (!child.is_positioned()) { if (!child.is_positioned()) {
child.paint(context, PaintPhase::Foreground); child.paint(context, PaintPhase::Foreground);
@ -94,6 +106,7 @@ void StackingContext::paint_internal(PaintContext& context)
// Draw the non-positioned floats (step 5) // Draw the non-positioned floats (step 5)
paint_descendants(context, m_box, StackingContextPaintPhase::Floats); paint_descendants(context, m_box, StackingContextPaintPhase::Floats);
// Draw inline content, replaced content, etc. (steps 6, 7) // Draw inline content, replaced content, etc. (steps 6, 7)
paint_descendants(context, m_box, StackingContextPaintPhase::BackgroundAndBordersForInlineLevelAndReplaced);
m_box.paint(context, PaintPhase::Foreground); m_box.paint(context, PaintPhase::Foreground);
paint_descendants(context, m_box, StackingContextPaintPhase::Foreground); paint_descendants(context, m_box, StackingContextPaintPhase::Foreground);
// Draw other positioned descendants (steps 8, 9) // Draw other positioned descendants (steps 8, 9)

1
Userland/Libraries/LibWeb/Painting/StackingContext.h
View file

@ -21,6 +21,7 @@ public:
enum class StackingContextPaintPhase { enum class StackingContextPaintPhase {
BackgroundAndBorders, BackgroundAndBorders,
Floats, Floats,
BackgroundAndBordersForInlineLevelAndReplaced,
Foreground, Foreground,
FocusAndOverlay, FocusAndOverlay,
}; };