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

Auto merge of #19651 - pyfisch:background-placement, r=emilio

Browse source 
Unify background placement code

Merges the implementations for background-image placement
from gradients and images. Add missing parts and fix bugs.

Now supported are the CSS properties:

* background-attachment (except for local value, see #19650)
* background-clip
* background-origin
* background-position-x/y
* background-repeat
* background-size

It should be noted that backgrounds are not clipped to
rounded border corners.
(This was done before but worked only in simple cases)
See: #19649

This solves the following issues:
closes #19626
closes #16657
closes #19482 (examples from http://lea.verou.me/css3patterns/ are rendered perfectly but the round border is completely ignored now)
closes #19577

- `./mach build -d` does not report any errors
- `./mach test-tidy` does not report any errors

I enabled a few tests with the first commit but I have written about a dozen manual tests I will try to turn into ref tests either before or after this patch lands.

@bors-servo try

The relationship between the different inputs is visualized in this flowchart:
![flowchart-background](https://user-images.githubusercontent.com/2781017/34394430-5a06c72c-eb59-11e7-9d51-3d23e2215f07.png)

<!-- 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/19651)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2018-01-02 08:47:24 -06:00 • committed by GitHub
commit 691bff86b6
24 changed files with 396 additions and 380 deletions
Download patch file Download diff file Expand all files Collapse all files

18
tests/wpt/web-platform-tests/css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html Normal file
View file

@ -0,0 +1,18 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Tiled gradient with spaces is repeated behind the border.</title>
<link rel="match" href="reference/gradient-repeat-spaced-with-borders.html">
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#valdef-background-repeat-space">
<style>
#foo {
width: 65px;
height: 65px;
border: solid 35px transparent;
background: radial-gradient(transparent 50%, #36c 50%);
background-size: 30px 30px;
background-repeat: space;
}
</style>
<body>
<div id="foo"></div>
</body>

15
tests/wpt/web-platform-tests/css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html Normal file
View file

@ -0,0 +1,15 @@
<!DOCTYPE html>
<meta charset="utf-8">
<title>Spaced Gradient</title>
<style>
#foo {
width: calc(4 * 30px + 3 * 5px);
height: calc(4 * 30px + 3 * 5px);
background: radial-gradient(transparent 50%, #36c 50%);
background-size: 30px 30px;
background-repeat: space;
}
</style>
<body>
<div id="foo"></div>
</body>