Auto merge of #20420 - pyfisch:corner-clipping, r=emilio

Move DL items from gfx to layout and implement corner clipping

Implement corner clipping.
Remove PixelFormat from WebrenderImageInfo.
Use WebRender text shadow.
Remove MallocSizeOf and Deserialize for DL items.

Closes #19649, closes #19680, closes #19802

<!-- 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 #__ (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/20420)
<!-- Reviewable:end -->

tests/unit/metrics/Cargo.toml

@@ -10,12 +10,11 @@ path = "lib.rs"
 doctest = false
 
 [dependencies]
-gfx = {path = "../../../components/gfx"}
 gfx_traits = {path = "../../../components/gfx_traits"}
 ipc-channel = "0.10"
+layout = {path = "../../../components/layout"}
 metrics = {path = "../../../components/metrics"}
 msg = {path = "../../../components/msg"}
-net_traits = {path = "../../../components/net_traits"}
 profile_traits = {path = "../../../components/profile_traits"}
 servo_url = {path = "../../../components/url"}
 time = "0.1.12"

tests/unit/metrics/lib.rs

@@ -4,12 +4,11 @@
 
 #![cfg(test)]
 
-extern crate gfx;
 extern crate gfx_traits;
 extern crate ipc_channel;
+extern crate layout;
 extern crate metrics;
 extern crate msg;
-extern crate net_traits;
 extern crate profile_traits;
 extern crate servo_url;
 extern crate time;

tests/unit/metrics/paint_time.rs

@@ -2,17 +2,15 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
-use gfx::display_list::{BaseDisplayItem, WebRenderImageInfo};
-use gfx::display_list::{DisplayItem, DisplayList, ImageDisplayItem};
 use gfx_traits::Epoch;
 use ipc_channel::ipc;
+use layout::display_list::items::{BaseDisplayItem, DisplayItem, DisplayList, ImageDisplayItem};
 use metrics::{PaintTimeMetrics, ProfilerMetadataFactory, ProgressiveWebMetric};
 use msg::constellation_msg::TEST_PIPELINE_ID;
-use net_traits::image::base::PixelFormat;
 use profile_traits::time::{ProfilerChan, TimerMetadata};
 use servo_url::ServoUrl;
 use time;
-use webrender_api::{ImageRendering, LayoutSize};
+use webrender_api::{ImageKey, ImageRendering, LayoutSize};
 
 struct DummyProfilerMetadataFactory {}
 impl ProfilerMetadataFactory for DummyProfilerMetadataFactory {
@@ -120,12 +118,7 @@ fn test_first_paint_setter() {
 fn test_first_contentful_paint_setter() {
     let image = DisplayItem::Image(Box::new(ImageDisplayItem {
         base: BaseDisplayItem::empty(),
-        webrender_image: WebRenderImageInfo {
-            width: 1,
-            height: 1,
-            format: PixelFormat::RGB8,
-            key: None,
-        },
+        id: ImageKey::DUMMY,
         stretch_size: LayoutSize::zero(),
         tile_spacing: LayoutSize::zero(),
         image_rendering: ImageRendering::Auto,

tests/wpt/metadata/MANIFEST.json

@@ -100555,6 +100555,18 @@
      {}
     ]
    ],
+   "css/css-backgrounds/background-rounded-image-clip.html": [
+    [
+     "/css/css-backgrounds/background-rounded-image-clip.html",
+     [
+      [
+       "/css/css-backgrounds/reference/background-rounded-image-clip.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-backgrounds/background-size-002.html": [
     [
      "/css/css-backgrounds/background-size-002.html",
@@ -238595,6 +238607,11 @@
      {}
     ]
    ],
+   "css/css-backgrounds/reference/background-rounded-image-clip.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-backgrounds/reference/background-size-002-ref.html": [
     [
      {}
@@ -488866,6 +488883,10 @@
    "36050bffda9382cfd978dc82a2f0244a535a6a46",
    "support"
   ],
+  "css/css-backgrounds/background-rounded-image-clip.html": [
+   "1f3a33ee141f0bf0186875d376bc95414db8dd18",
+   "reftest"
+  ],
   "css/css-backgrounds/background-size-001.html": [
    "7cf677bf25a1fcac569bd0accd28dd66e6060a1b",
    "testharness"
@@ -491242,6 +491263,10 @@
    "1141a4c270ace715755b9b8352dab9baffca27c4",
    "support"
   ],
+  "css/css-backgrounds/reference/background-rounded-image-clip.html": [
+   "0f98f9c82627977b11cde5f7c8ba536104cccdd2",
+   "support"
+  ],
   "css/css-backgrounds/reference/background-size-002-ref.html": [
    "33d8850f315bedabb7024031b091a14177034c1d",
    "support"

tests/wpt/web-platform-tests/css/css-backgrounds/background-rounded-image-clip.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Background Clip Follows Rounded Corner</title>
+<link rel="match" href="reference/background-rounded-image-clip.html">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#corner-clipping">
+<style>
+    html {
+        background-color: green;
+    }
+    #a {
+        top: 20px;
+        left: 20px;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-color: black;
+    }
+
+    #b {
+        position: absolute;
+        width: 300px;
+        height: 200px;
+        background-image: linear-gradient(green, green);
+        background-clip: content-box;
+        border-top-left-radius: 90px;
+        border-width: 10px;
+        border-style: solid;
+        border-color: transparent;
+    }
+</style>
+<div id="a"></div>
+<div id="b"></div>

tests/wpt/web-platform-tests/css/css-backgrounds/reference/background-rounded-image-clip.html

@@ -0,0 +1,17 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>Corner Clipped Background Color</title>
+<style>
+    html {
+        background-color: green;
+    }
+    #a {
+        top: 20px;
+        left: 20px;
+        position: absolute;
+        width: 20px;
+        height: 20px;
+        background-color: black;
+    }
+</style>
+<div id="a"></div>