mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Auto merge of #12945 - Manishearth:bgarray, r=SimonSapin
Support multiple backgrounds in both servo and stylo (Commits do not build individually, but split up for review) These patches make all of the background- properties accept multiple values, and add the layout code to display them. Still needs some cleanup, and some testing, but it seems to work. r? @SimonSapin <!-- 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/12945) <!-- Reviewable:end -->
This commit is contained in:
bors-servo
GitHub
commit
c5e81f8361
32 changed files with 806 additions and 440 deletions
|
|
@ -679,18 +679,44 @@ mod shorthand_serialization {
|
|||
*/
|
||||
|
||||
mod background {
|
||||
use style::properties::longhands::background_attachment::computed_value::T as Attachment;
|
||||
use style::properties::longhands::background_clip::computed_value::T as Clip;
|
||||
use style::properties::longhands::background_image::SpecifiedValue as ImageContainer;
|
||||
use style::properties::longhands::background_origin::computed_value::T as Origin;
|
||||
use style::properties::longhands::background_position::SpecifiedValue as PositionContainer;
|
||||
use style::properties::longhands::background_repeat::computed_value::T as Repeat;
|
||||
use style::properties::longhands::background_size::SpecifiedExplicitSize;
|
||||
use style::properties::longhands::background_size::SpecifiedValue as Size;
|
||||
use style::properties::longhands::background_attachment as attachment;
|
||||
use style::properties::longhands::background_clip as clip;
|
||||
use style::properties::longhands::background_image as image;
|
||||
use style::properties::longhands::background_origin as origin;
|
||||
use style::properties::longhands::background_position as position;
|
||||
use style::properties::longhands::background_repeat as repeat;
|
||||
use style::properties::longhands::background_size as size;
|
||||
use style::values::specified::Image;
|
||||
use style::values::specified::position::Position;
|
||||
use super::*;
|
||||
|
||||
macro_rules! single_vec_value_typedef {
|
||||
($name:ident, $path:expr) => {
|
||||
DeclaredValue::Value($name::SpecifiedValue(
|
||||
vec![$path]
|
||||
))
|
||||
};
|
||||
}
|
||||
macro_rules! single_vec_value {
|
||||
($name:ident, $path:expr) => {
|
||||
DeclaredValue::Value($name::SpecifiedValue(
|
||||
vec![$name::single_value::SpecifiedValue($path)]
|
||||
))
|
||||
};
|
||||
}
|
||||
macro_rules! single_vec_keyword_value {
|
||||
($name:ident, $kw:ident) => {
|
||||
DeclaredValue::Value($name::SpecifiedValue(
|
||||
vec![$name::single_value::SpecifiedValue::$kw]
|
||||
))
|
||||
};
|
||||
}
|
||||
macro_rules! single_vec_variant_value {
|
||||
($name:ident, $variant:expr) => {
|
||||
DeclaredValue::Value($name::SpecifiedValue(
|
||||
vec![$variant]
|
||||
))
|
||||
};
|
||||
}
|
||||
#[test]
|
||||
fn background_should_serialize_all_available_properties_when_specified() {
|
||||
let mut properties = Vec::new();
|
||||
|
|
@ -700,29 +726,31 @@ mod shorthand_serialization {
|
|||
authored: None
|
||||
});
|
||||
|
||||
let position = DeclaredValue::Value(
|
||||
let position = single_vec_value_typedef!(position,
|
||||
Position {
|
||||
horizontal: LengthOrPercentage::Length(Length::from_px(7f32)),
|
||||
vertical: LengthOrPercentage::Length(Length::from_px(4f32))
|
||||
}
|
||||
);
|
||||
|
||||
let repeat = DeclaredValue::Value(Repeat::repeat_x);
|
||||
let attachment = DeclaredValue::Value(Attachment::scroll);
|
||||
let repeat = single_vec_keyword_value!(repeat, repeat_x);
|
||||
let attachment = single_vec_keyword_value!(attachment, scroll);
|
||||
|
||||
let image = DeclaredValue::Value(ImageContainer(
|
||||
Some(Image::Url(Url::parse("http://servo/test.png").unwrap(), UrlExtraData {}))
|
||||
));
|
||||
let image = single_vec_value!(image,
|
||||
Some(Image::Url(Url::parse("http://servo/test.png").unwrap(),
|
||||
UrlExtraData {})));
|
||||
|
||||
let size = DeclaredValue::Value(
|
||||
Size::Explicit(SpecifiedExplicitSize {
|
||||
width: LengthOrPercentageOrAuto::Length(Length::from_px(70f32)),
|
||||
height: LengthOrPercentageOrAuto::Length(Length::from_px(50f32))
|
||||
}
|
||||
));
|
||||
let size = single_vec_variant_value!(size,
|
||||
size::single_value::SpecifiedValue::Explicit(
|
||||
size::single_value::SpecifiedExplicitSize {
|
||||
width: LengthOrPercentageOrAuto::Length(Length::from_px(70f32)),
|
||||
height: LengthOrPercentageOrAuto::Length(Length::from_px(50f32))
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
let origin = DeclaredValue::Value(Origin::border_box);
|
||||
let clip = DeclaredValue::Value(Clip::padding_box);
|
||||
let origin = single_vec_keyword_value!(origin, border_box);
|
||||
let clip = single_vec_keyword_value!(clip, padding_box);
|
||||
|
||||
properties.push(PropertyDeclaration::BackgroundColor(color));
|
||||
properties.push(PropertyDeclaration::BackgroundPosition(position));
|
||||
|
|
@ -751,29 +779,31 @@ mod shorthand_serialization {
|
|||
authored: None
|
||||
});
|
||||
|
||||
let position = DeclaredValue::Value(
|
||||
let position = single_vec_value_typedef!(position,
|
||||
Position {
|
||||
horizontal: LengthOrPercentage::Length(Length::from_px(7f32)),
|
||||
vertical: LengthOrPercentage::Length(Length::from_px(4f32))
|
||||
}
|
||||
);
|
||||
|
||||
let repeat = DeclaredValue::Value(Repeat::repeat_x);
|
||||
let attachment = DeclaredValue::Value(Attachment::scroll);
|
||||
let repeat = single_vec_keyword_value!(repeat, repeat_x);
|
||||
let attachment = single_vec_keyword_value!(attachment, scroll);
|
||||
|
||||
let image = DeclaredValue::Value(ImageContainer(
|
||||
Some(Image::Url(Url::parse("http://servo/test.png").unwrap(), UrlExtraData {}))
|
||||
));
|
||||
let image = single_vec_value!(image,
|
||||
Some(Image::Url(Url::parse("http://servo/test.png").unwrap(),
|
||||
UrlExtraData {})));
|
||||
|
||||
let size = DeclaredValue::Value(
|
||||
Size::Explicit(SpecifiedExplicitSize {
|
||||
width: LengthOrPercentageOrAuto::Length(Length::from_px(70f32)),
|
||||
height: LengthOrPercentageOrAuto::Length(Length::from_px(50f32))
|
||||
})
|
||||
let size = single_vec_variant_value!(size,
|
||||
size::single_value::SpecifiedValue::Explicit(
|
||||
size::single_value::SpecifiedExplicitSize {
|
||||
width: LengthOrPercentageOrAuto::Length(Length::from_px(70f32)),
|
||||
height: LengthOrPercentageOrAuto::Length(Length::from_px(50f32))
|
||||
}
|
||||
)
|
||||
);
|
||||
|
||||
let origin = DeclaredValue::Value(Origin::padding_box);
|
||||
let clip = DeclaredValue::Value(Clip::padding_box);
|
||||
let origin = single_vec_keyword_value!(origin, padding_box);
|
||||
let clip = single_vec_keyword_value!(clip, padding_box);
|
||||
|
||||
properties.push(PropertyDeclaration::BackgroundColor(color));
|
||||
properties.push(PropertyDeclaration::BackgroundPosition(position));
|
||||
|
|
@ -801,17 +831,17 @@ mod shorthand_serialization {
|
|||
authored: None
|
||||
});
|
||||
|
||||
let position = DeclaredValue::Value(
|
||||
let position = single_vec_value_typedef!(position,
|
||||
Position {
|
||||
horizontal: LengthOrPercentage::Length(Length::from_px(0f32)),
|
||||
vertical: LengthOrPercentage::Length(Length::from_px(0f32))
|
||||
}
|
||||
);
|
||||
|
||||
let repeat = DeclaredValue::Value(Repeat::repeat_x);
|
||||
let attachment = DeclaredValue::Value(Attachment::scroll);
|
||||
let repeat = single_vec_keyword_value!(repeat, repeat_x);
|
||||
let attachment = single_vec_keyword_value!(attachment, scroll);
|
||||
|
||||
let image = DeclaredValue::Value(ImageContainer(None));
|
||||
let image = single_vec_value!(image, None);
|
||||
|
||||
let size = DeclaredValue::Initial;
|
||||
|
||||
|
|
|
|||
|
|
@ -191,19 +191,40 @@ fn test_parse_stylesheet() {
|
|||
}
|
||||
)),
|
||||
Importance::Normal),
|
||||
(PropertyDeclaration::BackgroundPosition(DeclaredValue::Initial),
|
||||
(PropertyDeclaration::BackgroundPosition(DeclaredValue::Value(
|
||||
longhands::background_position::SpecifiedValue(
|
||||
vec![longhands::background_position::single_value
|
||||
::get_initial_specified_value()]))),
|
||||
Importance::Normal),
|
||||
(PropertyDeclaration::BackgroundRepeat(DeclaredValue::Initial),
|
||||
(PropertyDeclaration::BackgroundRepeat(DeclaredValue::Value(
|
||||
longhands::background_repeat::SpecifiedValue(
|
||||
vec![longhands::background_repeat::single_value
|
||||
::get_initial_specified_value()]))),
|
||||
Importance::Normal),
|
||||
(PropertyDeclaration::BackgroundAttachment(DeclaredValue::Initial),
|
||||
(PropertyDeclaration::BackgroundAttachment(DeclaredValue::Value(
|
||||
longhands::background_attachment::SpecifiedValue(
|
||||
vec![longhands::background_attachment::single_value
|
||||
::get_initial_specified_value()]))),
|
||||
Importance::Normal),
|
||||
(PropertyDeclaration::BackgroundImage(DeclaredValue::Initial),
|
||||
(PropertyDeclaration::BackgroundImage(DeclaredValue::Value(
|
||||
longhands::background_image::SpecifiedValue(
|
||||
vec![longhands::background_image::single_value
|
||||
::get_initial_specified_value()]))),
|
||||
Importance::Normal),
|
||||
(PropertyDeclaration::BackgroundSize(DeclaredValue::Initial),
|
||||
(PropertyDeclaration::BackgroundSize(DeclaredValue::Value(
|
||||
longhands::background_size::SpecifiedValue(
|
||||
vec![longhands::background_size::single_value
|
||||
::get_initial_specified_value()]))),
|
||||
Importance::Normal),
|
||||
(PropertyDeclaration::BackgroundOrigin(DeclaredValue::Initial),
|
||||
(PropertyDeclaration::BackgroundOrigin(DeclaredValue::Value(
|
||||
longhands::background_origin::SpecifiedValue(
|
||||
vec![longhands::background_origin::single_value
|
||||
::get_initial_specified_value()]))),
|
||||
Importance::Normal),
|
||||
(PropertyDeclaration::BackgroundClip(DeclaredValue::Initial),
|
||||
(PropertyDeclaration::BackgroundClip(DeclaredValue::Value(
|
||||
longhands::background_clip::SpecifiedValue(
|
||||
vec![longhands::background_clip::single_value
|
||||
::get_initial_specified_value()]))),
|
||||
Importance::Normal),
|
||||
]),
|
||||
important_count: 0,
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
[cssom-setProperty-shorthand.htm]
|
||||
type: testharness
|
||||
[shorthand font can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand border-top can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand border-right can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand border-bottom can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand border-left can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand border can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand list-style can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand outline can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand background can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand overflow can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
[shorthand border-radius can be set with setProperty]
|
||||
expected: FAIL
|
||||
|
||||
|
|
@ -3564,6 +3564,30 @@
|
|||
"url": "/_mozilla/css/mix_blend_mode_a.html"
|
||||
}
|
||||
],
|
||||
"css/multiple_backgrounds.html": [
|
||||
{
|
||||
"path": "css/multiple_backgrounds.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/multiple_backgrounds_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/multiple_backgrounds.html"
|
||||
}
|
||||
],
|
||||
"css/multiple_backgrounds_ref.html": [
|
||||
{
|
||||
"path": "css/multiple_backgrounds_ref.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/multiple_backgrounds_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/multiple_backgrounds_ref.html"
|
||||
}
|
||||
],
|
||||
"css/multiple_css_class_a.html": [
|
||||
{
|
||||
"path": "css/multiple_css_class_a.html",
|
||||
|
|
@ -12832,6 +12856,30 @@
|
|||
"url": "/_mozilla/css/mix_blend_mode_a.html"
|
||||
}
|
||||
],
|
||||
"css/multiple_backgrounds.html": [
|
||||
{
|
||||
"path": "css/multiple_backgrounds.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/multiple_backgrounds_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/multiple_backgrounds.html"
|
||||
}
|
||||
],
|
||||
"css/multiple_backgrounds_ref.html": [
|
||||
{
|
||||
"path": "css/multiple_backgrounds_ref.html",
|
||||
"references": [
|
||||
[
|
||||
"/_mozilla/css/multiple_backgrounds_ref.html",
|
||||
"=="
|
||||
]
|
||||
],
|
||||
"url": "/_mozilla/css/multiple_backgrounds_ref.html"
|
||||
}
|
||||
],
|
||||
"css/multiple_css_class_a.html": [
|
||||
{
|
||||
"path": "css/multiple_css_class_a.html",
|
||||
|
|
|
|||
BIN
tests/wpt/mozilla/tests/css/bubbles.png
Normal file
BIN
tests/wpt/mozilla/tests/css/bubbles.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 160 KiB |
31
tests/wpt/mozilla/tests/css/multiple_backgrounds.html
Normal file
31
tests/wpt/mozilla/tests/css/multiple_backgrounds.html
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="match" href="multiple_backgrounds_ref.html">
|
||||
<style type="text/css">
|
||||
/* Example from
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
|
||||
(Public domain)
|
||||
|
||||
bubbles.png is from the above MDN page, by Mozilla contributors,
|
||||
licensed under CC-BY-SA 2.5
|
||||
|
||||
Rust logo from https://www.rust-lang.org/logos/rust-logo-256x256.png,
|
||||
licensed as CC-BY-SA 4.0, owned by Mozilla
|
||||
*/
|
||||
#multibg {
|
||||
width: 700px;
|
||||
height: 400px;
|
||||
background: url(rust-logo-256x256.png) no-repeat bottom right / 256px 256px,
|
||||
url(bubbles.png) no-repeat left / 700px 100%,
|
||||
linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)) no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="multibg">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
47
tests/wpt/mozilla/tests/css/multiple_backgrounds_ref.html
Normal file
47
tests/wpt/mozilla/tests/css/multiple_backgrounds_ref.html
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title></title>
|
||||
<link rel="match" href="multiple_backgrounds_ref.html">
|
||||
<style type="text/css">
|
||||
/* Example from
|
||||
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Background_and_Borders/Using_CSS_multiple_backgrounds
|
||||
(Public domain)
|
||||
|
||||
bubbles.png is from the above MDN page, by Mozilla contributors,
|
||||
licensed under CC-BY-SA 2.5
|
||||
|
||||
Rust logo from https://www.rust-lang.org/logos/rust-logo-256x256.png,
|
||||
licensed as CC-BY-SA 4.0, owned by Mozilla
|
||||
*/
|
||||
#gradientbg {
|
||||
width: 700px;
|
||||
height: 400px;
|
||||
background: linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)) no-repeat;
|
||||
}
|
||||
#bubblesbg {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: url(bubbles.png) no-repeat left / 700px 100%;
|
||||
position: relative;
|
||||
}
|
||||
#rustbg {
|
||||
width: 256px;
|
||||
height: 256px;
|
||||
background: url(rust-logo-256x256.png) no-repeat left / 256px 256px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="gradientbg">
|
||||
<div id="bubblesbg">
|
||||
<div id="rustbg">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
BIN
tests/wpt/mozilla/tests/css/rust-logo-256x256.png
Normal file
BIN
tests/wpt/mozilla/tests/css/rust-logo-256x256.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 36 KiB |
Loading…
Add table
Add a link
Reference in a new issue