Mirrors/servo
1
0
Fork 0
mirror of https://github.com/servo/servo.git synced 2025-10-04 02:29:12 +01:00
Code Issues Projects Releases Packages Wiki Activity

Auto merge of #19568 - pyfisch:background-origin-gradients1, r=mbrubeck

Browse source 
layout: background-origin attribute for gradients

Fixes the glitches mentioned in #19554.
Now gradient tiles are placed in the whole bounding box.

<!-- Please describe your changes on the following line: -->

---
<!-- Thank you for contributing to Servo! Please replace each `[ ]` by `[X]` when the step is complete, and replace `__` with appropriate data: -->
- [x] `./mach build -d` does not report any errors
- [X] `./mach test-tidy` does not report any errors

<!-- Either: -->
- [X] There are tests for these changes

<!-- Also, please make sure that "Allow edits from maintainers" checkbox is checked, so that we can help you if you get stuck somewhere along the way.-->

<!-- Pull requests that do not address these steps are welcome, but they will require additional verification as part of the review process. -->

<!-- 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/19568)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2017-12-15 15:54:59 -06:00 • committed by GitHub
commit dbfcb7bc39
8 changed files with 202 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -112737,6 +112737,18 @@
{}
]
],
"css/css-images/gradient-border-box.html": [
[
"/css/css-images/gradient-border-box.html",
[
[
"/css/css-images/gradient-border-box-ref.html",
"=="
]
],
{}
]
],
"css/css-images/gradient-button.html": [
[
"/css/css-images/gradient-button.html",
@ -112749,6 +112761,18 @@
{}
]
],
"css/css-images/gradient-content-box.html": [
[
"/css/css-images/gradient-content-box.html",
[
[
"/css/css-images/gradient-content-box-ref.html",
"=="
]
],
{}
]
],
"css/css-images/gradient-move-stops.html": [
[
"/css/css-images/gradient-move-stops.html",
@ -239550,11 +239574,21 @@
{}
]
],
"css/css-images/gradient-border-box-ref.html": [
[
{}
]
],
"css/css-images/gradient-button-ref.html": [
[
{}
]
],
"css/css-images/gradient-content-box-ref.html": [
[
{}
]
],
"css/css-images/gradient-move-stops-ref.html": [
[
{}
@ -481656,6 +481690,14 @@
"94471f5d29319241d0d25b8391430778f668ff4f",
"reftest"
],
"css/css-images/gradient-border-box-ref.html": [
"ccf241348a131e495269e8bcc108a0253fd3fc7e",
"support"
],
"css/css-images/gradient-border-box.html": [
"fe78a2c52e0a89e788edf339c0d8d75c9522ad5a",
"reftest"
],
"css/css-images/gradient-button-ref.html": [
"17a42eca5cfb86e29bfb5e20a65f0585d9727e30",
"support"
@ -481664,6 +481706,14 @@
"41dc276e1c60a3fbf7920f44b8032fc2b0d7114e",
"reftest"
],
"css/css-images/gradient-content-box-ref.html": [
"a030609470853d73ca1363840c4b94da6d49bb43",
"support"
],
"css/css-images/gradient-content-box.html": [
"5e74191a82ee45a5441d595c79b2a41b34748038",
"reftest"
],
"css/css-images/gradient-move-stops-ref.html": [
"bb2fca5aaeb7fe1abf30620695ad3fd832c0d089",
"support"

16
tests/wpt/web-platform-tests/css/css-images/gradient-border-box-ref.html Normal file
View file

@ -0,0 +1,16 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#x {
width: 280px;
height: 280px;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>

24
tests/wpt/web-platform-tests/css/css-images/gradient-border-box.html Normal file
View file

@ -0,0 +1,24 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient Background aligned to Content Box</title>
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin">
<link rel="match" href="gradient-border-box-ref.html">
<meta name="assert" content="The background-origin: border-box; statement is understood.">
<style>
#x {
background-origin: border-box;
width: 200px;
height: 200px;
border-style: solid;
border-width: 40px;
border-color: transparent;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>

19
tests/wpt/web-platform-tests/css/css-images/gradient-content-box-ref.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
#x {
width: 200px;
height: 200px;
border: 40px;
border-style: solid;
border-color: transparent;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-images/gradient-content-box.html Normal file
View file

@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Gradient Background aligned to Content Box</title>
<link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#the-background-origin">
<link rel="match" href="gradient-content-box-ref.html">
<meta name="assert" content="The background-origin: content-box; statement is understood.">
<style>
#x {
background-origin: content-box;
width: 200px;
height: 200px;
padding: 40px;
background-image: repeating-linear-gradient(to bottom right, white, black, white 30px);
}
</style>
</head>
<body>
<div id="x"></div>
</body>
</html>