mirror of
https://github.com/servo/servo.git
synced 2025-08-07 06:25:32 +01:00
Auto merge of #19651 - pyfisch:background-placement, r=emilio
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:  <!-- 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
GitHub
commit
691bff86b6
24 changed files with 396 additions and 380 deletions
|
|
@ -96765,6 +96765,18 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html": [
|
||||
[
|
||||
"/css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html",
|
||||
[
|
||||
[
|
||||
"/css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-backgrounds/background-size-002.html": [
|
||||
[
|
||||
"/css/css-backgrounds/background-size-002.html",
|
||||
|
|
@ -228206,6 +228218,11 @@
|
|||
{}
|
||||
]
|
||||
],
|
||||
"css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html": [
|
||||
[
|
||||
{}
|
||||
]
|
||||
],
|
||||
"css/css-backgrounds/background-repeat/reference/support/rectangle-96x60.png": [
|
||||
[
|
||||
{}
|
||||
|
|
@ -463995,6 +464012,10 @@
|
|||
"0a631e1bd4a8b410edd28a51675207f591e04a55",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-backgrounds/background-repeat/gradient-repeat-spaced-with-borders.html": [
|
||||
"2880f6e6ab270572d9279d04ca196bfeae30a261",
|
||||
"reftest"
|
||||
],
|
||||
"css/css-backgrounds/background-repeat/reference/background-repeat-no-repeat.xht": [
|
||||
"3e5eecf9416348440b6d23dc7a817de5ed97ede7",
|
||||
"support"
|
||||
|
|
@ -464019,6 +464040,10 @@
|
|||
"0e0e06ed0f62fbcca2f5a087e807bf2ac74b1ad6",
|
||||
"support"
|
||||
],
|
||||
"css/css-backgrounds/background-repeat/reference/gradient-repeat-spaced-with-borders.html": [
|
||||
"b6e92428d5562a83424ef050f3c57dfc128a95a2",
|
||||
"support"
|
||||
],
|
||||
"css/css-backgrounds/background-repeat/reference/support/rectangle-96x60.png": [
|
||||
"36050bffda9382cfd978dc82a2f0244a535a6a46",
|
||||
"support"
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
[background-position-applies-to-009.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[background-position-applies-to-012.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[background-position-applies-to-013.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[background-position-applies-to-015.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[margin-shorthand-001.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[margin-shorthand-002.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[margin-shorthand-003.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[margin-shorthand-004.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[padding-shorthand-001.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[padding-shorthand-002.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[padding-shorthand-003.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[padding-shorthand-004.xht]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[background-334.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[background-origin-006.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[background-origin-007.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[background-size-021.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
[css3-background-size-contain.html]
|
||||
type: reftest
|
||||
expected: FAIL
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Add table
Add a link
Reference in a new issue