From 46283af2115c4b23fae348f347c52e079563ec61 Mon Sep 17 00:00:00 2001
From: Pyfisch <pyfisch@gmail.com>
Date: Thu, 3 May 2018 10:43:29 +0200
Subject: [PATCH] Correct edge case for background color clip

Use the color clip corresponding to the last background-image instead
of the last background-clip. (There may be more clips than images and
clips are repeated if there are less clips than images.)

Add a test.
---
 components/layout/display_list/builder.rs     | 11 +++++---
 tests/wpt/metadata/MANIFEST.json              | 25 +++++++++++++++++++
 .../background-color-clip.html                | 19 ++++++++++++++
 .../reference/background-color-clip.html      | 15 +++++++++++
 4 files changed, 66 insertions(+), 4 deletions(-)
 create mode 100644 tests/wpt/web-platform-tests/css/css-backgrounds/background-color-clip.html
 create mode 100644 tests/wpt/web-platform-tests/css/css-backgrounds/reference/background-color-clip.html

diff --git a/components/layout/display_list/builder.rs b/components/layout/display_list/builder.rs
index 1d36ab260521..35d3e176205e 100644
--- a/components/layout/display_list/builder.rs
+++ b/components/layout/display_list/builder.rs
@@ -844,14 +844,17 @@ impl FragmentDisplayListBuilding for Fragment {
         // http://dev.w3.org/csswg/css-backgrounds-3/#the-background-clip
         let mut bounds = *absolute_bounds;
 
-        // This is the clip for the color (which is the last element in the bg array)
-        // Background clips are never empty.
-        let color_clip = &background.background_clip.0.last().unwrap();
+        // Quote from CSS Backgrounds and Borders Module Level 3:
+        //
+        // > The background color is clipped according to the background-clip value associated
+        // > with the bottom-most background image layer.
+        let last_background_image_index = background.background_image.0.len() - 1;
+        let color_clip = get_cyclic(&background.background_clip.0, last_background_image_index);
 
         // Adjust the clipping region as necessary to account for `border-radius`.
         let mut border_radii = build_border_radius(absolute_bounds, style.get_border());
 
-        match **color_clip {
+        match color_clip {
             BackgroundClip::BorderBox => {},
             BackgroundClip::PaddingBox => {
                 let border = style.logical_border_width().to_physical(style.writing_mode);
diff --git a/tests/wpt/metadata/MANIFEST.json b/tests/wpt/metadata/MANIFEST.json
index 570ee11f310b..ac605e3f8f07 100644
--- a/tests/wpt/metadata/MANIFEST.json
+++ b/tests/wpt/metadata/MANIFEST.json
@@ -100291,6 +100291,18 @@
      {}
     ]
    ],
+   "css/css-backgrounds/background-color-clip.html": [
+    [
+     "/css/css-backgrounds/background-color-clip.html",
+     [
+      [
+       "/css/css-backgrounds/reference/background-color-clip.html",
+       "=="
+      ]
+     ],
+     {}
+    ]
+   ],
    "css/css-backgrounds/background-image-001.html": [
     [
      "/css/css-backgrounds/background-image-001.html",
@@ -238907,6 +238919,11 @@
      {}
     ]
    ],
+   "css/css-backgrounds/reference/background-color-clip.html": [
+    [
+     {}
+    ]
+   ],
    "css/css-backgrounds/reference/background-image-001-ref.html": [
     [
      {}
@@ -489246,6 +489263,10 @@
    "d638cc24e5598d10acfbf6d0c3a25552141a2ad5",
    "visual"
   ],
+  "css/css-backgrounds/background-color-clip.html": [
+   "b0d788cd9f108a6453f1e044180a65874095849b",
+   "reftest"
+  ],
   "css/css-backgrounds/background-image-001.html": [
    "74731240922af8bd5626c1f74cd767ee3eb7d004",
    "reftest"
@@ -491806,6 +491827,10 @@
    "8d6167560bb724cd2cabb59984821bb2569945c8",
    "support"
   ],
+  "css/css-backgrounds/reference/background-color-clip.html": [
+   "f2176cecd7630f9ef7f0e28820a1a9d029f47929",
+   "support"
+  ],
   "css/css-backgrounds/reference/background-image-001-ref.html": [
    "fc56e0b5195d622679934aaa4d9f2ae64d300957",
    "support"
diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/background-color-clip.html b/tests/wpt/web-platform-tests/css/css-backgrounds/background-color-clip.html
new file mode 100644
index 000000000000..961e161388d7
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-backgrounds/background-color-clip.html
@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Background Color Clip</title>
+<link rel="match" href="reference/background-color-clip.html">
+<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-color">
+<meta name="assert" content="Check that the background color is clipped according to the background-clip value associated with the bottom-most background image layer.">
+<style>
+    div {
+        width: 120px;
+        height: 100px;
+        background-color: green;
+        background-clip: border-box, content-box, border-box;
+        background-image: none, none;
+        border-style: solid;
+        border-width: 10px;
+        border-color: transparent;
+    }
+</style>
+<div></div>
\ No newline at end of file
diff --git a/tests/wpt/web-platform-tests/css/css-backgrounds/reference/background-color-clip.html b/tests/wpt/web-platform-tests/css/css-backgrounds/reference/background-color-clip.html
new file mode 100644
index 000000000000..18e80a92586f
--- /dev/null
+++ b/tests/wpt/web-platform-tests/css/css-backgrounds/reference/background-color-clip.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<title>Green Rectangle</title>
+<style>
+    div {
+        width: 120px;
+        height: 100px;
+        background-color: green;
+        background-clip: content-box;
+        border-style: solid;
+        border-width: 10px;
+        border-color: transparent;
+    }
+</style>
+<div></div>