Auto merge of #17712 - mrobinson:overflow-scroll-clip, r=emilio

Fix the size and position of overflow:scroll clip

The clip for overflow:scroll clip was not including the space for
padding, which could lead to some content being clipped when it
shouldn't. This changes fixes that issue.

A test is skipped because this fix also stops hiding a failure due to
mispositioned text.

Fixes #16576.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [x] `./mach test-tidy` does not report any errors
- [x] These changes fix #16576 (github issue number if applicable).

<!-- Either: -->
- [x] There are tests for these changes OR
- [ ] These changes do not require tests because _____

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- Reviewable:start -->
---
This change is [<img src="https://reviewable.io/review_button.svg" height="34" align="absmiddle" alt="Reviewable"/>](https://reviewable.io/reviews/servo/servo/17712)
<!-- Reviewable:end -->

components/layout/display_list_builder.rs

@@ -633,6 +633,18 @@ fn build_border_radius_for_inner_rect(outer_rect: &Rect<Au>,
     radii
 }
 
+fn build_inner_border_box_for_border_rect(border_box: &Rect<Au>,
+                                          style: &ServoComputedValues)
+                                          -> Rect<Au> {
+    let border_widths = style.logical_border_width().to_physical(style.writing_mode);
+    let mut inner_border_box = *border_box;
+    inner_border_box.origin.x += border_widths.left;
+    inner_border_box.origin.y += border_widths.top;
+    inner_border_box.size.width -= border_widths.right + border_widths.left;
+    inner_border_box.size.height -= border_widths.bottom + border_widths.top;
+    inner_border_box
+}
+
 fn convert_gradient_stops(gradient_items: &[GradientItem],
                           total_length: Au) -> Vec<GradientStop> {
     // Determine the position of each stop per CSS-IMAGES § 3.4.
@@ -2524,10 +2536,11 @@ impl BlockFlowDisplayListBuilding for BlockFlow {
             root_type = ScrollRootType::Clip;
         }
 
-        let mut clip = ClippingRegion::from_rect(&content_box);
+        let clip_rect = build_inner_border_box_for_border_rect(&border_box, &self.fragment.style);
+        let mut clip = ClippingRegion::from_rect(&clip_rect);
         let radii = build_border_radius_for_inner_rect(&border_box, &self.fragment.style);
         if !radii.is_square() {
-            clip.intersect_with_rounded_rect(&content_box, &radii)
+            clip.intersect_with_rounded_rect(&clip_rect, &radii)
         }
 
         let parent_id = self.scroll_root_id(state.layout_context.id);

tests/wpt/metadata-css/css-backgrounds-3_dev/html4/attachment-local-clipping-image-6.htm.ini

@@ -0,0 +1,3 @@
+[attachment-local-clipping-image-6.htm]
+  type: reftest
+  expected: FAIL

tests/wpt/mozilla/meta/MANIFEST.json

@@ -4199,6 +4199,18 @@
      {}
     ]
    ],
+   "css/overflow_hidden_clip.html": [
+    [
+     "/_mozilla/css/overflow_hidden_clip.html",
+     [
+      [
+       "/_mozilla/css/overflow_hidden_clip_ref.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/overflow_position_abs_inline_block.html": [
     [
      "/_mozilla/css/overflow_position_abs_inline_block.html",
@@ -9267,6 +9279,11 @@
      {}
     ]
    ],
+   "css/overflow_hidden_clip_ref.html": [
+    [
+     {}
+    ]
+   ],
    "css/overflow_position_abs_inline_block_ref.html": [
     [
      {}
@@ -24829,6 +24846,14 @@
    "f645ece68f6c7afe273daee4d1ec172c7d245632",
    "support"
   ],
+  "css/overflow_hidden_clip.html": [
+   "bd829a86a3afba8d50bd95877b01d8f291428319",
+   "reftest"
+  ],
+  "css/overflow_hidden_clip_ref.html": [
+   "1fb1cb37455ec869689beee8937e409e57422c73",
+   "support"
+  ],
   "css/overflow_position_abs_inline_block.html": [
    "7550f9c9f3e91635c15554d9ae21e172944054e6",
    "reftest"

tests/wpt/mozilla/tests/css/overflow_hidden_clip.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <title>Size of clip used for overflow:hidden</title>
+        <link rel="match" href="overflow_hidden_clip_ref.html">
+    </head>
+    <body>
+        <style>
+            #box {
+                background-color: black;
+                height: 50px;
+                overflow: hidden;
+                padding: 0 10px;
+                position: relative;
+                width: 30px;
+            }
+            #inside {
+                background-color: grey;
+                position: absolute;
+                right: 0px;
+                width: 25px;
+                height: 50px;
+            }
+        </style>
+        <div id="box">
+            <div id="inside">
+            </div>
+        </div>
+    </body>
+</html>

tests/wpt/mozilla/tests/css/overflow_hidden_clip_ref.html

@@ -0,0 +1,27 @@
+<!doctype html>
+<html>
+    <head>
+        <meta charset="utf-8">
+    </head>
+    <body>
+        <style>
+            #black {
+                background-color: black;
+                height: 50px;
+                position: relative;
+                width: 25px;
+            }
+            #grey {
+                background-color: grey;
+                position: relative;
+                width: 25px;
+                height: 50px;
+                left: 25px;
+                top: -50px;
+            }
+        </style>
+        <div id="black"></div>
+        <div id="grey"></div>
+        </div>
+    </body>
+</html>