diff --git a/Libraries/LibWeb/Painting/ViewportPaintable.cpp b/Libraries/LibWeb/Painting/ViewportPaintable.cpp index 4bcf8f3ef81..dc39da42a2b 100644 --- a/Libraries/LibWeb/Painting/ViewportPaintable.cpp +++ b/Libraries/LibWeb/Painting/ViewportPaintable.cpp @@ -127,7 +127,8 @@ void ViewportPaintable::assign_clip_frames() for_each_in_subtree_of_type([&](auto const& paintable_box) { auto overflow_x = paintable_box.computed_values().overflow_x(); auto overflow_y = paintable_box.computed_values().overflow_y(); - auto has_hidden_overflow = overflow_x != CSS::Overflow::Visible && overflow_y != CSS::Overflow::Visible; + // 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 clip_frame = adopt_ref(*new ClipFrame()); clip_state.set(paintable_box, move(clip_frame)); @@ -166,14 +167,40 @@ void ViewportPaintable::assign_clip_frames() continue; } auto const& block_paintable_box = static_cast(*paintable); - auto block_overflow_x = block_paintable_box.computed_values().overflow_x(); - auto block_overflow_y = block_paintable_box.computed_values().overflow_y(); - if (block_overflow_x != CSS::Overflow::Visible && block_overflow_y != CSS::Overflow::Visible) { - auto rect = block_paintable_box.absolute_padding_box_rect(); - clip_frame.add_clip_rect(rect, block_paintable_box.normalized_border_radii_data(ShrinkRadiiForBorders::Yes), block_paintable_box.enclosing_scroll_frame()); + bool clip_x = paintable->computed_values().overflow_x() != CSS::Overflow::Visible; + bool clip_y = paintable->computed_values().overflow_y() != CSS::Overflow::Visible; + + auto clip_rect = block_paintable_box.overflow_clip_edge_rect(); + if (block_paintable_box.get_clip_rect().has_value()) { + clip_rect.intersect(block_paintable_box.get_clip_rect().value()); + clip_x = true; + clip_y = true; } - if (auto css_clip_property_rect = block_paintable_box.get_clip_rect(); css_clip_property_rect.has_value()) { - clip_frame.add_clip_rect(css_clip_property_rect.value(), {}, block_paintable_box.enclosing_scroll_frame()); + + 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 + // rounded: + if (clip_x && clip_y) { + // - When overflow-x and overflow-y compute to hidden, scroll, or auto, the clipping region is rounded + // based on the border radius, adjusted to the padding edge, as described in CSS Backgrounds 3 § 4.2 Corner + // Shaping. + // - When both overflow-x and overflow-y compute to clip, the clipping region is rounded as described in § 3.2 + // Expanding Clipping Bounds: the overflow-clip-margin property. + // FIXME: Implement overflow-clip-margin + clip_frame.add_clip_rect(clip_rect, block_paintable_box.normalized_border_radii_data(ShrinkRadiiForBorders::Yes), block_paintable_box.enclosing_scroll_frame()); + } else { + // - However, when one of overflow-x or overflow-y computes to clip and the other computes to visible, the + // clipping region is not rounded. + if (clip_x) { + clip_rect.set_top(0); + clip_rect.set_bottom(CSSPixels::max_integer_value); + } else { + clip_rect.set_left(0); + clip_rect.set_right(CSSPixels::max_integer_value); + } + clip_frame.add_clip_rect(clip_rect, {}, block_paintable_box.enclosing_scroll_frame()); + } } if (block->has_css_transform()) { break; diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-002-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-002-ref.html new file mode 100644 index 00000000000..19c901981d7 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-002-ref.html @@ -0,0 +1,35 @@ + + +Reference: overflow: clip can be combined with overflow: visible + + + +
+
+
+ + +
+
+
+ + +
+
+
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-003-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-003-ref.html new file mode 100644 index 00000000000..5de31068e2e --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-003-ref.html @@ -0,0 +1,61 @@ + + +Reference: overflow:clip can be combined with overflow:visible + + + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-004-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-004-ref.html new file mode 100644 index 00000000000..39e12445d40 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-004-ref.html @@ -0,0 +1,35 @@ + + +Reference: overflow: clip can be combined with overflow: visible + + + +
+
+
+ + +
+
+
+ + +
+
+
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-005-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-005-ref.html new file mode 100644 index 00000000000..09081e25039 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/clip-005-ref.html @@ -0,0 +1,36 @@ + + +Reference: overflow:clip doesn't affect the box' own outline + + + +
+
+
+ + +
+
+
+ + +
+
+
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-content-visual-overflow-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-content-visual-overflow-ref.html new file mode 100644 index 00000000000..378da736ecf --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-content-visual-overflow-ref.html @@ -0,0 +1,36 @@ + + +Overflow: verifies content visual overflow is shown + + + +
+
+
+
+
+ diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-x-visible-y-svg-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-x-visible-y-svg-ref.html new file mode 100644 index 00000000000..31e831d011d --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-x-visible-y-svg-ref.html @@ -0,0 +1,13 @@ + + +Overflow: can have different clip and visible value in x/y directions with svg + + + +
diff --git a/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-y-visible-x-svg-ref.html b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-y-visible-x-svg-ref.html new file mode 100644 index 00000000000..33b0a4d6ad4 --- /dev/null +++ b/Tests/LibWeb/Ref/expected/wpt-import/css/css-overflow/overflow-clip-y-visible-x-svg-ref.html @@ -0,0 +1,13 @@ + + +Overflow: can have different clip and visible value in x/y directions with svg + + + +
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-002.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-002.html new file mode 100644 index 00000000000..ed638b180f9 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-002.html @@ -0,0 +1,39 @@ + + +CSS Test: overflow:clip can be combined with overflow:visible + + + + + +
+
+
+ + +
+
+
+ + +
+
+
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-003.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-003.html new file mode 100644 index 00000000000..1ab1a37a783 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-003.html @@ -0,0 +1,63 @@ + + +CSS Test: overflow:clip can be combined with overflow:visible + + + + + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
+ + +
+
+
+
+
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-004.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-004.html new file mode 100644 index 00000000000..8e28788f74e --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-004.html @@ -0,0 +1,40 @@ + + +CSS Test: overflow:clip can be combined with overflow:visible + + + + + +
+
+
+ + +
+
+
+ + +
+
+
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-005.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-005.html new file mode 100644 index 00000000000..e6584fc90a2 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/clip-005.html @@ -0,0 +1,41 @@ + + +CSS Test: overflow:clip doesn't affect the box' own outline + + + + + +
+
+
+ + +
+
+
+ + +
+
+
diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-content-visual-overflow.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-content-visual-overflow.html new file mode 100644 index 00000000000..017d68c8a74 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-content-visual-overflow.html @@ -0,0 +1,37 @@ + + +Overflow: verifies content visual overflow is shown + + + + +
+
+
+
+
+
+
+ diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-x-visible-y-svg.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-x-visible-y-svg.html new file mode 100644 index 00000000000..cf5b04a9fa8 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-x-visible-y-svg.html @@ -0,0 +1,17 @@ + + +Overflow: can have different clip and visible value in x/y directions with svg + + + + + + + diff --git a/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-y-visible-x-svg.html b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-y-visible-x-svg.html new file mode 100644 index 00000000000..d356f4d7613 --- /dev/null +++ b/Tests/LibWeb/Ref/input/wpt-import/css/css-overflow/overflow-clip-y-visible-x-svg.html @@ -0,0 +1,17 @@ + + +Overflow: can have different clip and visible value in x/y directions with svg + + + + + + +