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. - - - - - - - - -
-

-
- -
-
-

-
- -
-
-
- -
-

-
- -