Skip to content

/ servo

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

layout: support tiled gradients #19554

Merged
merged 1 commit into from Dec 14, 2017
+353 −164
Merged

layout: support tiled gradients #19554

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter...
Filter file types
Jump to…
Jump to file
Failed to load files.

Always

Just for now

18 components/gfx/display_list/mod.rs
View file
Open in desktop
@@ -720,6 +720,15 @@ pub struct GradientDisplayItem {

/// Contains all gradient data. Included start, end point and color stops.
pub gradient: Gradient,

/// The size of a single gradient tile.
///
/// The gradient may fill an entire element background
/// but it can be composed from many smaller copys of
/// the same gradient.
///
/// Without tiles, the tile will be the same size as the background.
pub tile: Size2D<Au>,
}

/// Paints a radial gradient.
@@ -745,6 +754,15 @@ pub struct RadialGradientDisplayItem {

/// Contains all gradient data.
pub gradient: RadialGradient,

/// The size of a single gradient tile.
///
/// The gradient may fill an entire element background
/// but it can be composed from many smaller copys of
/// the same gradient.
///
/// Without tiles, the tile will be the same size as the background.
pub tile: Size2D<Au>,
}

/// A normal border, supporting CSS border styles.
320 components/layout/display_list_builder.rs
View file
Open in desktop

Large diffs are not rendered by default.

6 components/layout/webrender_helpers.rs
View file
Open in desktop
@@ -428,7 +428,6 @@ impl WebRenderDisplayItemConverter for DisplayItem {
builder.push_border(&self.prim_info(), widths, details);
}
DisplayItem::Gradient(ref item) => {
let rect = item.base.bounds;
let start_point = item.gradient.start_point.to_pointf();
let end_point = item.gradient.end_point.to_pointf();
let extend_mode = if item.gradient.repeating {
@@ -442,11 +441,10 @@ impl WebRenderDisplayItemConverter for DisplayItem {
extend_mode);
builder.push_gradient(&self.prim_info(),
gradient,
rect.size.to_sizef(),
item.tile.to_sizef(),
webrender_api::LayoutSize::zero());
}
DisplayItem::RadialGradient(ref item) => {
let rect = item.base.bounds;
let center = item.gradient.center.to_pointf();
let radius = item.gradient.radius.to_sizef();
let extend_mode = if item.gradient.repeating {
@@ -460,7 +458,7 @@ impl WebRenderDisplayItemConverter for DisplayItem {
extend_mode);
builder.push_radial_gradient(&self.prim_info(),
gradient,
rect.size.to_sizef(),
item.tile.to_sizef(),
webrender_api::LayoutSize::zero());
}
DisplayItem::Line(ref item) => {
50 tests/wpt/metadata/MANIFEST.json
View file
Open in desktop
{}
]
],
"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",
{}
]
],
"css/css-images/tiled-gradients-ref.html": [
[
{}
]
],
"css/css-images/tiled-radial-gradients-ref.html": [
[
{}
]
],
"css/css-lists/OWNERS": [
[
{}
"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
Open in desktop

This file was deleted.

29 tests/wpt/web-platform-tests/css/css-images/tiled-gradients-ref.html
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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
View file
Open in desktop
@@ -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>
ProTip! Use n and p to navigate between commits in a pull request.
You can’t perform that action at this time.