From 9dddd6b028777c39375c12257d8a8fd32d975a93 Mon Sep 17 00:00:00 2001 From: Aliaksandr Kalenik Date: Wed, 31 Jan 2024 05:25:12 +0100 Subject: [PATCH] LibWeb: Account for scroll offset in overflow clip rect calculation This change addresses an issue with overflow clipping in scenarios where `overflow: hidden` is applied to boxes nested within elements with `overflow: scroll`. Fixes https://github.com/SerenityOS/serenity/issues/22733 --- ...ains-boxes-with-hidden-overflow-1-ref.html | 76 ++++++++++++++++ ...ains-boxes-with-hidden-overflow-2-ref.html | 48 ++++++++++ ...contains-boxes-with-hidden-overflow-1.html | 91 +++++++++++++++++++ ...contains-boxes-with-hidden-overflow-2.html | 64 +++++++++++++ .../LibWeb/Painting/PaintableBox.cpp | 3 +- 5 files changed, 281 insertions(+), 1 deletion(-) create mode 100644 Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html create mode 100644 Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html create mode 100644 Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html create mode 100644 Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-2.html diff --git a/Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html b/Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html new file mode 100644 index 0000000000..5d35432875 --- /dev/null +++ b/Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-1-ref.html @@ -0,0 +1,76 @@ + +
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+
48
+
49
+
50
diff --git a/Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html b/Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html new file mode 100644 index 0000000000..c3b3fd2956 --- /dev/null +++ b/Tests/LibWeb/Ref/reference/scrollable-contains-boxes-with-hidden-overflow-2-ref.html @@ -0,0 +1,48 @@ +
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
diff --git a/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html b/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html new file mode 100644 index 0000000000..2701e6a7b2 --- /dev/null +++ b/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-1.html @@ -0,0 +1,91 @@ + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+
30
+
31
+
32
+
33
+
34
+
35
+
36
+
37
+
38
+
39
+
40
+
41
+
42
+
43
+
44
+
45
+
46
+
47
+
48
+
49
+
50
+ diff --git a/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-2.html b/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-2.html new file mode 100644 index 0000000000..518954a9aa --- /dev/null +++ b/Tests/LibWeb/Ref/scrollable-contains-boxes-with-hidden-overflow-2.html @@ -0,0 +1,64 @@ + + +
+
1
+
2
+
3
+
4
+
5
+
6
+
7
+
8
+
9
+
10
+
11
+
12
+
13
+
14
+
15
+
16
+
17
+
18
+
19
+
20
+
21
+
22
+
23
+
24
+
25
+
26
+
27
+
28
+
29
+ diff --git a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp index d9c31dac82..2e1667e56e 100644 --- a/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp +++ b/Userland/Libraries/LibWeb/Painting/PaintableBox.cpp @@ -128,6 +128,7 @@ CSSPixelRect PaintableBox::compute_absolute_padding_rect_with_css_transform_appl auto offset = block->paintable_box()->offset(); auto affine_transform = Gfx::extract_2d_affine_transform(block->paintable_box()->transform()); offset.translate_by(affine_transform.translation().to_type()); + offset.translate_by(-block->paintable_box()->scroll_offset()); rect.translate_by(offset); } auto affine_transform = Gfx::extract_2d_affine_transform(transform()); @@ -598,7 +599,7 @@ void PaintableWithLines::paint(PaintContext& context, PaintPhase phase) const bool should_clip_overflow = computed_values().overflow_x() != CSS::Overflow::Visible && computed_values().overflow_y() != CSS::Overflow::Visible; Optional corner_clip_id; - auto clip_box = context.rounded_device_rect(absolute_padding_box_rect()); + auto clip_box = context.rounded_device_rect(compute_absolute_padding_rect_with_css_transform_applied()); if (should_clip_overflow) { context.recording_painter().save();