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

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>

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>