Add multiple backgrounds CSS reftest

This commit is contained in:
Manish Goregaokar 2016-08-22 14:49:56 +05:30
parent c55911905b
commit 12f272587e
5 changed files with 126 additions and 0 deletions

View file

@ -3564,6 +3564,30 @@
"url": "/_mozilla/css/mix_blend_mode_a.html" "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": [ "css/multiple_css_class_a.html": [
{ {
"path": "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" "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": [ "css/multiple_css_class_a.html": [
{ {
"path": "css/multiple_css_class_a.html", "path": "css/multiple_css_class_a.html",

Binary file not shown.

After

Width:  |  Height:  |  Size: 160 KiB

View 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>

View 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>

Binary file not shown.

After

Width:  |  Height:  |  Size: 36 KiB