From 4989c5c79334c11e6b87c3b70043c00ced51a215 Mon Sep 17 00:00:00 2001 From: Psychpsyo Date: Sat, 3 May 2025 11:46:39 +0200 Subject: [PATCH] LibWeb: Add paint containment clipping The contain-paint-stacking-context-001a.html test has been removed for now because it has a 1px tall blue line at the top that should not be there. With paint containment, this line is removed only in the actual test case, but not in the reference. This is because of the font that we use in testing and happens in Chromium as well if the test is run with that font. --- .../LibWeb/Painting/ViewportPaintable.cpp | 20 +++++- .../reference/contain-paint-001-ref.html | 26 ++++++++ .../css/css-contain/contain-paint-001.html | 39 +++++++++++ .../contain-paint-stacking-context-001a.html | 66 ------------------- 4 files changed, 84 insertions(+), 67 deletions(-) create mode 100644 Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-001-ref.html create mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-001.html delete mode 100644 Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html diff --git a/Libraries/LibWeb/Painting/ViewportPaintable.cpp b/Libraries/LibWeb/Painting/ViewportPaintable.cpp index dc39da42a2b..f61012956a5 100644 --- a/Libraries/LibWeb/Painting/ViewportPaintable.cpp +++ b/Libraries/LibWeb/Painting/ViewportPaintable.cpp @@ -129,7 +129,8 @@ void ViewportPaintable::assign_clip_frames() auto overflow_y = paintable_box.computed_values().overflow_y(); // Note: Overflow may be clip on one axis and visible on the other. auto has_hidden_overflow = overflow_x != CSS::Overflow::Visible || overflow_y != CSS::Overflow::Visible; - if (has_hidden_overflow || paintable_box.get_clip_rect().has_value()) { + auto element = as_if(paintable_box.layout_node().dom_node()); + if (has_hidden_overflow || paintable_box.get_clip_rect().has_value() || (element && element->has_paint_containment())) { auto clip_frame = adopt_ref(*new ClipFrame()); clip_state.set(paintable_box, move(clip_frame)); } @@ -177,6 +178,23 @@ void ViewportPaintable::assign_clip_frames() clip_y = true; } + // https://drafts.csswg.org/css-contain-2/#paint-containment + // 1. The contents of the element including any ink or scrollable overflow must be clipped to the overflow clip + // edge of the paint containment box, taking corner clipping into account. This does not include the creation of + // any mechanism to access or indicate the presence of the clipped content; nor does it inhibit the creation of + // any such mechanism through other properties, such as overflow, resize, or text-overflow. + // NOTE: This clipping shape respects overflow-clip-margin, allowing an element with paint containment + // to still slightly overflow its normal bounds. + if (auto element = as_if(block->dom_node())) { + if (element->has_paint_containment()) { + // NOTE: Note: The behavior is described in this paragraph is equivalent to changing 'overflow-x: visible' into + // 'overflow-x: clip' and 'overflow-y: visible' into 'overflow-y: clip' at used value time, while leaving other + // values of 'overflow-x' and 'overflow-y' unchanged. + clip_x = true; + clip_y = true; + } + } + if (clip_x || clip_y) { // https://drafts.csswg.org/css-overflow-3/#corner-clipping // As mentioned in CSS Backgrounds 3 § 4.3 Corner Clipping, the clipping region established by overflow can be diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-001-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-001-ref.html new file mode 100644 index 00000000000..639fbb2248a --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-contain/reference/contain-paint-001-ref.html @@ -0,0 +1,26 @@ + + + + CSS-contain test: paint containment use the padding edge + + + + +

Test passes if there is a green square in a rounded blue box, and no red. +

diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-001.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-001.html new file mode 100644 index 00000000000..616cd8bc8e6 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-001.html @@ -0,0 +1,39 @@ + + + + CSS-contain test: paint containment use the padding edge + + + + + + + + +

Test passes if there is a green square in a rounded blue box, and no red. +

diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html deleted file mode 100644 index 6d81aa9bd34..00000000000 --- a/Tests/LibWeb/Ref/input/wpt-import/css/css-contain/contain-paint-stacking-context-001a.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - - CSS Test: 'contain: paint' with stacking contents. Z-index is defined only for siblings and children. - - - - - - - - -
-

-
- -
-
-

-
- -
-
-
- -
-

-
- -