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

Auto merge of #19554 - pyfisch:tiled-gradients1, r=mbrubeck

Browse source 
layout: support tiled gradients

Use background-size, background-position properties to render
CSS gradients.

Some cleanup in display_list_builder.rs related to gradient
calculations.

Adds two wpt tests for tiled gradients.

Note: For now even gradients with background-repeat: no-repeat
are repeated. Sometimes the gradient is not repeated everywhere.

Resolves partially #19482. (See the mentioned website for example gradients with these features)
See also: #16657 and #10412

Some glitches can be seen in the attached file. I am unsure what the exact intended semantics of [`push_gradient`](https://doc.servo.org/webrender_api/struct.DisplayListBuilder.html#method.push_gradient) are and want to ask the webrender team before building in "workarounds" for the missing gradients.
![half-rhombes](https://user-images.githubusercontent.com/2781017/33958051-b16f964a-e043-11e7-8218-b28388e2cf8d.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/19554)
<!-- Reviewable:end -->
This commit is contained in:
bors-servo 2017-12-14 13:20:34 -06:00 • committed by GitHub
commit 6ee8e6a168
9 changed files with 353 additions and 164 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -112809,6 +112809,30 @@
{}
]
],
"css/css-images/tiled-gradients.html": [
[
"/css/css-images/tiled-gradients.html",
[
[
"/css/css-images/tiled-gradients-ref.html",
"=="
]
],
{}
]
],
"css/css-images/tiled-radial-gradients.html": [
[
"/css/css-images/tiled-radial-gradients.html",
[
[
"/css/css-images/tiled-radial-gradients-ref.html",
"=="
]
],
{}
]
],
"css/css-logical/cascading-001.html": [
[
"/css/css-logical/cascading-001.html",
@ -239776,6 +239800,16 @@
{}
]
],
"css/css-images/tiled-gradients-ref.html": [
[
{}
]
],
"css/css-images/tiled-radial-gradients-ref.html": [
[
{}
]
],
"css/css-lists/OWNERS": [
[
{}
@ -481858,6 +481892,22 @@
"078e1dd6dd61d36cec239ed75d02051f61fe60a5",
"support"
],
"css/css-images/tiled-gradients-ref.html": [
"47f9512fa5139fd9cdd66f0d191e8f71ad04317a",
"support"
],
"css/css-images/tiled-gradients.html": [
"fcc12e47fba2a938fca012e90fcfc6aa1877185e",
"reftest"
],
"css/css-images/tiled-radial-gradients-ref.html": [
"9033e28e4607cbcee67e37d97c2611a8ce5f19c4",
"support"
],
"css/css-images/tiled-radial-gradients.html": [
"4b4b4756c2f605ab4dca092775cc39b0705efda9",
"reftest"
],
"css/css-lists/OWNERS": [
"d9c8054b356c9273a054a83abeb9be0626c23921",
"support"

3
tests/wpt/metadata/css/css-variables/vars-background-shorthand-001.html.ini
View file

@ -1,3 +0,0 @@
[vars-background-shorthand-001.html]
type: reftest
expected: FAIL

29
tests/wpt/web-platform-tests/css/css-images/tiled-gradients-ref.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
.bar {
width: 400px;
height: 100px;
}
.box {
display: inline-block;
width: 100px;
height: 100px;
border: 0px;
background-image: linear-gradient(to bottom left, red 50%, transparent 50%);
}
</style>
</head>
<body>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
<div class="bar">
<div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div>
</div>
</body>
</html>

22
tests/wpt/web-platform-tests/css/css-images/tiled-gradients.html Normal file
View file

@ -0,0 +1,22 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Eight Red Triangles on White Ground (with gradients)</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
<meta name="assert" content="Gradients are correctly repeated.">
<link rel="match" href="tiled-gradients-ref.html">
<style>
#gradient {
width: 400px;
height: 200px;
background-size: 25% 50%;
background-image: linear-gradient(to bottom left, red 50%, transparent 50%);
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>

40
tests/wpt/web-platform-tests/css/css-images/tiled-radial-gradients-ref.html Normal file
View file

@ -0,0 +1,40 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
body {
margin: 0px;
}
#outer {
position: absolute;
width: 600px;
height: 200px;
background-color: aquamarine;
}
#left, #right {
position: absolute;
width: 300px;
height: 200px;
background-image: radial-gradient(closest-side, red 40%, transparent 40%)
}
#left {
left: 80px;
}
#right {
left: 380px;
}
</style>
</head>
<body>
<div id="outer">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>

29
tests/wpt/web-platform-tests/css/css-images/tiled-radial-gradients.html Normal file
View file

@ -0,0 +1,29 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Two Ellipses with Custom Placement (with gradients)</title>
<link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#propdef-background-size">
<meta name="assert" content="Gradients are correctly repeated.">
<link rel="match" href="tiled-radial-gradients-ref.html">
<style>
body {
margin: 0px;
}
#gradient {
position: absolute;
width: 600px;
height: 200px;
left: 0px;
margin: 0px;
background-color: aquamarine;
background-image: radial-gradient(closest-side, red 40%, transparent 40%);
background-size: 300px 200px;
background-position: 80px 0px;
}
</style>
</head>
<body>
<div id="gradient"></div>
</body>
</html>