Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-08-04 21:20:23 +01:00
Code Issues Projects Releases Packages Wiki Activity

Correct edge case for background color clip

Browse source 
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.
This commit is contained in:
Pyfisch 2018-05-03 10:43:29 +02:00
parent eda59780e9
commit 46283af211
4 changed files with 66 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

11
components/layout/display_list/builder.rs
View file

@ -844,14 +844,17 @@ impl FragmentDisplayListBuilding for Fragment {
// http://dev.w3.org/csswg/css-backgrounds-3/#the-background-clip // http://dev.w3.org/csswg/css-backgrounds-3/#the-background-clip
let mut bounds = *absolute_bounds; let mut bounds = *absolute_bounds;
// This is the clip for the color (which is the last element in the bg array) // Quote from CSS Backgrounds and Borders Module Level 3:
// Background clips are never empty. //
let color_clip = &background.background_clip.0.last().unwrap(); // > 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`. // Adjust the clipping region as necessary to account for `border-radius`.
let mut border_radii = build_border_radius(absolute_bounds, style.get_border()); let mut border_radii = build_border_radius(absolute_bounds, style.get_border());
match **color_clip { match color_clip {
BackgroundClip::BorderBox => {}, BackgroundClip::BorderBox => {},
BackgroundClip::PaddingBox => { BackgroundClip::PaddingBox => {
let border = style.logical_border_width().to_physical(style.writing_mode); let border = style.logical_border_width().to_physical(style.writing_mode);

25
tests/wpt/metadata/MANIFEST.json
View file

@ -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": [
[ [
"/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": [ "css/css-backgrounds/reference/background-image-001-ref.html": [
[ [
{} {}
@ -489246,6 +489263,10 @@
"d638cc24e5598d10acfbf6d0c3a25552141a2ad5", "d638cc24e5598d10acfbf6d0c3a25552141a2ad5",
"visual" "visual"
], ],
"css/css-backgrounds/background-color-clip.html": [
"b0d788cd9f108a6453f1e044180a65874095849b",
"reftest"
],
"css/css-backgrounds/background-image-001.html": [ "css/css-backgrounds/background-image-001.html": [
"74731240922af8bd5626c1f74cd767ee3eb7d004", "74731240922af8bd5626c1f74cd767ee3eb7d004",
"reftest" "reftest"
@ -491806,6 +491827,10 @@
"8d6167560bb724cd2cabb59984821bb2569945c8", "8d6167560bb724cd2cabb59984821bb2569945c8",
"support" "support"
], ],
"css/css-backgrounds/reference/background-color-clip.html": [
"f2176cecd7630f9ef7f0e28820a1a9d029f47929",
"support"
],
"css/css-backgrounds/reference/background-image-001-ref.html": [ "css/css-backgrounds/reference/background-image-001-ref.html": [
"fc56e0b5195d622679934aaa4d9f2ae64d300957", "fc56e0b5195d622679934aaa4d9f2ae64d300957",
"support" "support"

19
tests/wpt/web-platform-tests/css/css-backgrounds/background-color-clip.html Normal file
View file

@ -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>

15
tests/wpt/web-platform-tests/css/css-backgrounds/reference/background-color-clip.html Normal file
View file

@ -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>