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

layout: background-origin attribute for gradients

Browse source 
Fixes the glitches mentioned in #19554.
Now gradient tiles are placed in the whole bounding box.
This commit is contained in:
Pyfisch 2017-12-14 23:17:45 +01:00
parent 7897bd15d7
commit b0492f53af
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>