mirror of
https://github.com/servo/servo.git
synced 2025-08-23 14:25:33 +01:00
Update web-platform-tests to revision 58b72393db0bd273bb93268c33666cf893feb985
This commit is contained in:
Josh Matthews
parent
43a4f01647
commit
64e0a52537
12717 changed files with 59835 additions and 59820 deletions
5
tests/wpt/web-platform-tests/css/css-backgrounds/OWNERS
Normal file
5
tests/wpt/web-platform-tests/css/css-backgrounds/OWNERS
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
@chenxix
|
||||
@dbaron
|
||||
@bert-github
|
||||
@fantasai
|
||||
@bradkemper
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background shorthand - initial values</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value" />
|
||||
<style>
|
||||
#test {
|
||||
background: ;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var cs = getComputedStyle(document.getElementById("test"), null);
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-image"),
|
||||
"none", "background initial value for background-image");
|
||||
}, "background_initial_image");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-position"),
|
||||
"0% 0%", "background initial value for background-position");
|
||||
}, "background_initial_position");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-size"),
|
||||
"auto", "background initial value for background-size");
|
||||
}, "background_initial_size");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-repeat"),
|
||||
"repeat", "background initial value for background-repeat");
|
||||
}, "background_initial_repeat");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-attachment"),
|
||||
"scroll", "background initial value for background-attachment");
|
||||
}, "background_initial_attachment");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-origin"),
|
||||
"padding-box", "background initial value for background-origin");
|
||||
}, "background_initial_origin");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-clip"),
|
||||
"border-box", "background initial value for background-clip");
|
||||
}, "background_initial_clip");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-color"),
|
||||
"transparent", "background initial value for background-color");
|
||||
}, "background_initial_color");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background shorthand - all values specified</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" />
|
||||
<meta name="flags" content="dom image" />
|
||||
<meta name="assert" content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration" />
|
||||
<style>
|
||||
#test {
|
||||
background: url("support/60x60-green.png") 40% / 10em gray round fixed border-box;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var cs = getComputedStyle(document.getElementById("test"), null);
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-image"),
|
||||
"url(support/60x60-green.png)", "background specified value for background-image");
|
||||
}, "background_specified_image");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-position"),
|
||||
"40% 50%", "background specified value for background-position");
|
||||
}, "background_specified_position");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-size"),
|
||||
"10em 10em", "background specified value for background-size");
|
||||
}, "background_specified_size");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-repeat"),
|
||||
"round round", "background specified value for background-repeat");
|
||||
}, "background_specified_repeat");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-attachment"),
|
||||
"fixed", "background specified value for background-attachment");
|
||||
}, "background_specified_attachment");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-origin"),
|
||||
"border-box", "background specified value for background-origin");
|
||||
}, "background_specified_origin");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-clip"),
|
||||
"border-box", "background specified value for background-clip");
|
||||
}, "background_specified_clip");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-color"),
|
||||
"gray", "background specified value for background-color");
|
||||
}, "background_specified_color");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,64 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background shorthand - background-color 'red'</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration, and finally 'background-color' is set to the specified color, if any, else set to its initial value" />
|
||||
<style>
|
||||
#test {
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var cs = getComputedStyle(document.getElementById("test"), null);
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-image"),
|
||||
"none", "background initial value for background-image");
|
||||
}, "background_specified_color_image");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-position"),
|
||||
"0% 0%", "background initial value for background-position");
|
||||
}, "background_specified_color_position");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-size"),
|
||||
"auto", "background initial value for background-size");
|
||||
}, "background_specified_color_size");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-repeat"),
|
||||
"repeat", "background initial value for background-repeat");
|
||||
}, "background_specified_color_repeat");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-attachment"),
|
||||
"scroll", "background initial value for background-attachment");
|
||||
}, "background_specified_color_attachment");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-origin"),
|
||||
"padding-box", "background initial value for background-origin");
|
||||
}, "background_specified_color_origin");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-clip"),
|
||||
"border-box", "background initial value for background-clip");
|
||||
}, "background_specified_color_clip");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-color"),
|
||||
"red", "background specified value for background-color");
|
||||
}, "background_specified_color_color");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background shorthand - background-size '100% auto'</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" title="3.10. Backgrounds Shorthand: the 'background' property">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html
|
||||
-->
|
||||
<link rel="match" href="reference/background-334-ref.xht">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="Background-size with '100% auto' implies to rescale the image horizontally so that it fills the background area width and to rescale the image vertically so that it fills the background area height.">
|
||||
<style>
|
||||
#ref {
|
||||
background-color: red;
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
#test {
|
||||
background: #CCC url(support/60x60-green.png) top left / 100% auto no-repeat;
|
||||
border: black dotted 5px;
|
||||
bottom: 160px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square with gray background, black dotted borders and <strong>no red</strong>.</p>
|
||||
<div id="ref"></div>
|
||||
<div id="test"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background shorthand - only one <box> value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check if one <box> value is present then it sets both 'background-origin' and 'background-clip' to that value" />
|
||||
<style>
|
||||
#test {
|
||||
background: content-box;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var cs = getComputedStyle(document.getElementById("test"), null);
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-origin"),
|
||||
"content-box", "background specified value for background-origin");
|
||||
}, "background_specified_box_one_origin");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-clip"),
|
||||
"content-box", "background specified value for background-clip");
|
||||
}, "background_specified_box_one_clip");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background shorthand - two <box> values</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check if two <box> values are present, then the first sets 'background-origin' and the second 'background-clip'" />
|
||||
<style>
|
||||
#test {
|
||||
background: border-box padding-box;
|
||||
}
|
||||
</style>
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
var cs = getComputedStyle(document.getElementById("test"), null);
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-origin"),
|
||||
"border-box", "background specified value for background-origin");
|
||||
}, "background_specified_box_two_origin");
|
||||
|
||||
test(function() {
|
||||
assert_equals(cs.getPropertyValue("background-clip"),
|
||||
"padding-box", "background specified value for background-clip");
|
||||
}, "background_specified_box_two_clip");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: 'Background-attachment' with value 'fixed'
|
||||
</title>
|
||||
<link rel="author" title="Melanie Archer" href="mailto:job@twobanjos.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<meta name="flags" content="interact" />
|
||||
<meta name="assert" content="If 'background-attachment' is given the value 'fixed,' then the background image remains fixed in relation to the user agent viewport when the viewport is scrolled." />
|
||||
<style type="text/css">
|
||||
#test-container {
|
||||
background-attachment: fixed;
|
||||
background-position: 1em 5em;
|
||||
background-image: url("support/cat.png");
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid blue;
|
||||
height: 250px;
|
||||
overflow: scroll;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if the cat image does not move when the blue-bordered containing block or the viewport is scrolled.
|
||||
</p>
|
||||
<div id="test-container">
|
||||
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Scrolling when 'background-attachment: local'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="If 'background-attachment: local' the background scrolls along with the element's contents (the UA may treat 'background-clip: border-box' as the same as 'background-clip: padding-box')." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 2in;
|
||||
height: 2in;
|
||||
border: 50px double black;
|
||||
background-image: url("../support/cat.png");
|
||||
background-attachment: local;
|
||||
overflow: scroll;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if the images of all the cats scroll when the box is scrolled. (Presence of cats behind the double border is UA dependent). </p>
|
||||
<div>Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text Filler Text
|
||||
Filler Text Filler Text </div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>
|
||||
CSS Test: 'Background-attachment' with value 'local'
|
||||
</title>
|
||||
<link rel="author" title="Melanie Archer" href="mailto:job@twobanjos.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<meta name="flags" content="interact" />
|
||||
<meta name="assert" content="If 'background-attachment' is given the value 'local,' then the background image scrolls with the containing element's content when the element's content is scrolled" />
|
||||
<style type="text/css">
|
||||
#test-container {
|
||||
background-attachment: local;
|
||||
background-image: url("support/cat.png");
|
||||
background-repeat: no-repeat;
|
||||
border: 1px solid blue;
|
||||
height: 250px;
|
||||
overflow: scroll;
|
||||
padding: 100px 0 0;
|
||||
width: 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if the image of the cat scrolls out of view when the blue-bordered containing block is scrolled.
|
||||
</p>
|
||||
<div id="test-container">
|
||||
Cupcake ipsum dolor sit. Amet applicake bonbon chocolate cake ice cream. Bear claw tootsie roll cotton candy biscuit. Sweet roll chupa chups gingerbread sugar plum icing muffin biscuit. Chocolate cake wafer pastry tart macaroon danish topping ice cream. Jujubes liquorice candy canes faworki. Jujubes cake caramels faworki pie cake sweet roll. Tiramisu sesame snaps candy cheesecake brownie souffle biscuit. Danish chupa chups donut. Donut tart marshmallow biscuit lollipop chupa chups jelly beans faworki. Sugar plum wafer faworki marshmallow brownie ice cream cotton candy marshmallow marzipan. Cheesecake gummi bears cupcake sweet croissant cookie chocolate bar sweet roll. Halvah cupcake carrot cake souffle carrot cake chocolate cake pastry gummi bears muffin. Sweet roll candy gingerbread dessert tart. Pastry oat cake jelly beans.
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 156 B |
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
background: green padding-box;
|
||||
}
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: border-box; color}</title>
|
||||
<link rel="match" href="attachment-local-clipping-color-1-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
overflow: hidden;
|
||||
background: green local border-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: padding-box; color}</title>
|
||||
<link rel="match" href="attachment-local-clipping-color-1-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
overflow: hidden;
|
||||
background: green local padding-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 255px;
|
||||
padding: 25px 40px 0;
|
||||
border: 10px dashed;
|
||||
background: green content-box;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: content-box; color}</title>
|
||||
<link rel="match" href="attachment-local-clipping-color-3-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
overflow: hidden;
|
||||
background: green local content-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
border-radius: 50%;
|
||||
background: green padding-box;
|
||||
}
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: border-box; color}; border-radius</title>
|
||||
<link rel="match" href="attachment-local-clipping-color-4-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: green local border-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: padding-box; color}; border-radius</title>
|
||||
<link rel="match" href="attachment-local-clipping-color-4-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: green local padding-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#outer div {
|
||||
background: green;
|
||||
height: 500px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: content-box; color}; border-radius</title>
|
||||
<link rel="match" href="attachment-local-clipping-color-6-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: green local content-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
background: url(aqua-yellow-32x32.png) padding-box top -15px left 0;
|
||||
}
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: border-box; image}</title>
|
||||
<link rel="match" href="attachment-local-clipping-image-1-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
overflow: hidden;
|
||||
background: url(aqua-yellow-32x32.png) local;
|
||||
background-clip: border-box;
|
||||
background-origin: padding-box; /* Match the reference. */
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: padding-box; image}</title>
|
||||
<link rel="match" href="attachment-local-clipping-image-1-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
overflow: hidden;
|
||||
background: url(aqua-yellow-32x32.png) local padding-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 255px;
|
||||
padding: 25px 40px 0;
|
||||
border: 10px dashed;
|
||||
background: url(aqua-yellow-32x32.png) content-box;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: content-box; image}</title>
|
||||
<link rel="match" href="attachment-local-clipping-image-3-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px dashed;
|
||||
overflow: hidden;
|
||||
background: url(aqua-yellow-32x32.png) local content-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
border-radius: 50%;
|
||||
background: url(aqua-yellow-32x32.png) padding-box top -15px left 0;
|
||||
}
|
||||
p {
|
||||
margin-top: 5px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,33 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: border-box; image}; border-radius</title>
|
||||
<link rel="match" href="attachment-local-clipping-image-4-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: url(aqua-yellow-32x32.png) local;
|
||||
background-clip: border-box;
|
||||
background-origin: padding-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: padding-box; image}; border-radius</title>
|
||||
<link rel="match" href="attachment-local-clipping-image-4-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: url(aqua-yellow-32x32.png) local padding-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#outer div {
|
||||
background: url(aqua-yellow-32x32.png);
|
||||
height: 500px;
|
||||
margin-top: -15px;
|
||||
}
|
||||
p {
|
||||
margin-top: 0;
|
||||
padding-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; clip: content-box; image}; border-radius</title>
|
||||
<link rel="match" href="attachment-local-clipping-image-6-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
padding: 40px;
|
||||
border: 10px double;
|
||||
overflow: hidden;
|
||||
border-radius: 50%;
|
||||
background: url(aqua-yellow-32x32.png) local content-box;
|
||||
}
|
||||
#outer div {
|
||||
height: 500px;
|
||||
}
|
||||
p {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementById('outer').scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
border: solid;
|
||||
background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
div div {
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
}
|
||||
p {
|
||||
margin: 0 0 0 -40px;
|
||||
padding-top: 40px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-attachment: local; positioning area</title>
|
||||
<link rel="match" href="attachment-local-positioning-2-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
border: solid;
|
||||
/* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */
|
||||
/* With scrolling, effective position is 178px 278px */
|
||||
background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
div div {
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var outer = document.getElementById('outer');
|
||||
outer.scrollLeft = 40;
|
||||
outer.scrollTop = 60;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
border: solid;
|
||||
background: url(aqua-yellow-32x32.png) local no-repeat 178px 278px;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
div div {
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: 100px;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
top: -60px;
|
||||
left: -40px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-attachment: local; positioning area with dir=rtl</title>
|
||||
<link rel="match" href="attachment-local-positioning-3-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
border: solid;
|
||||
/* 100% 100% == (250px - 32px) (370px - 32px) == 218px 338px */
|
||||
/* With scrolling, effective position is 178px 278px */
|
||||
background: url(aqua-yellow-32x32.png) local no-repeat 100% 100%;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
div div {
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer dir=rtl>
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var outer = document.getElementById('outer');
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values.
|
||||
outer.scrollLeft = -10;
|
||||
outer.scrollTop = 60;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
#outer {
|
||||
border: solid;
|
||||
background: url(aqua-yellow-32x32.png) local no-repeat -10px -10px;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
div div {
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: 100px;
|
||||
text-align: right;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
left: -10px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer>
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-attachment: local; positioning area with dir=rtl, top left</title>
|
||||
<link rel="match" href="attachment-local-positioning-4-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
#outer {
|
||||
border: solid;
|
||||
/* With scrolling, effective position is -10px -10px */
|
||||
background: url(aqua-yellow-32x32.png) local no-repeat 0 0;
|
||||
overflow: hidden;
|
||||
width: 200px;
|
||||
height: 300px;
|
||||
}
|
||||
div div {
|
||||
width: 250px;
|
||||
height: 370px;
|
||||
}
|
||||
p {
|
||||
margin: 0;
|
||||
padding-top: 100px;
|
||||
}
|
||||
</style>
|
||||
<div id=outer dir=rtl>
|
||||
<div>
|
||||
<p>Lorem ipsum dolor sit amet</p>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
var outer = document.getElementById('outer');
|
||||
// See https://bugzilla.mozilla.org/show_bug.cgi?id=383026 for negative values.
|
||||
outer.scrollLeft = -40;
|
||||
outer.scrollTop = 10;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: local</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
div {
|
||||
background: url(aqua-yellow-32x32.png) no-repeat 30px 25px;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
padding-left: 30px;
|
||||
padding-top: 125px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-{attachment: local; origin: content-box}; positioning area</title>
|
||||
<link rel="match" href="attachment-local-positioning-5-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
div {
|
||||
background: url(aqua-yellow-32x32.png) local no-repeat content-box;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
padding: 40px 30px;
|
||||
}
|
||||
p {
|
||||
padding-top: 100px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementsByTagName('div')[0].scrollTop = 15;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!doctype html>
|
||||
<title>CSS Reftest Reference: background-attachment: scroll</title>
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<style>
|
||||
div {
|
||||
background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
padding-top: 40px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!doctype html>
|
||||
<title>CSS Test: background-attachment: scroll; positioning area</title>
|
||||
<link rel="match" href="attachment-scroll-positioning-1-ref.html" />
|
||||
<meta name="flags" content="dom" />
|
||||
<link rel="author" title="Simon Sapin" href="http://exyr.org/about/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-attachment" />
|
||||
<style>
|
||||
div {
|
||||
background: url(aqua-yellow-32x32.png) no-repeat 100px 100px;
|
||||
overflow: hidden;
|
||||
height: 200px;
|
||||
}
|
||||
p {
|
||||
padding-top: 100px;
|
||||
height: 500px;
|
||||
}
|
||||
</style>
|
||||
<div>
|
||||
<p>Test</p>
|
||||
</div>
|
||||
<script>
|
||||
document.getElementsByTagName('div')[0].scrollTop = 60;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
== attachment-scroll-positioning-1.html attachment-scroll-positioning-1-ref.html
|
||||
== attachment-local-positioning-1.html attachment-local-positioning-1-ref.html
|
||||
== attachment-local-positioning-2.html attachment-local-positioning-2-ref.html
|
||||
== attachment-local-positioning-3.html attachment-local-positioning-3-ref.html
|
||||
== attachment-local-positioning-4.html attachment-local-positioning-4-ref.html
|
||||
== attachment-local-positioning-5.html attachment-local-positioning-5-ref.html
|
||||
|
||||
== attachment-local-clipping-color-1.html attachment-local-clipping-color-1-ref.html
|
||||
== attachment-local-clipping-color-2.html attachment-local-clipping-color-1-ref.html # Same ref as the previous test.
|
||||
== attachment-local-clipping-color-3.html attachment-local-clipping-color-3-ref.html
|
||||
== attachment-local-clipping-color-4.html attachment-local-clipping-color-4-ref.html
|
||||
== attachment-local-clipping-color-5.html attachment-local-clipping-color-4-ref.html # Same ref as the previous test.
|
||||
fuzzy(50,500) == attachment-local-clipping-color-6.html attachment-local-clipping-color-6-ref.html
|
||||
|
||||
== attachment-local-clipping-image-1.html attachment-local-clipping-image-1-ref.html
|
||||
== attachment-local-clipping-image-2.html attachment-local-clipping-image-1-ref.html # Same ref as the previous test.
|
||||
== attachment-local-clipping-image-3.html attachment-local-clipping-image-3-ref.html
|
||||
== attachment-local-clipping-image-4.html attachment-local-clipping-image-4-ref.html
|
||||
== attachment-local-clipping-image-5.html attachment-local-clipping-image-4-ref.html # Same ref as the previous test.
|
||||
fuzzy(80,500) == attachment-local-clipping-image-6.html attachment-local-clipping-image-6-ref.html
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background-clip - initial and supported values</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check if background-clip initial value is border-box and supports values border-box, padding-box and content-box" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||
"border-box", "background-clip initial value");
|
||||
}, "background-clip_initial");
|
||||
|
||||
document.getElementById("test").style.backgroundClip = "border-box";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||
"border-box", "background-clip supporting value");
|
||||
}, "background-clip_border-box");
|
||||
|
||||
document.getElementById("test").style.backgroundClip = "padding-box";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||
"padding-box", "background-clip supporting value");
|
||||
}, "background-clip_padding-box");
|
||||
|
||||
document.getElementById("test").style.backgroundClip = "content-box";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-clip"),
|
||||
"content-box", "background-clip supporting value");
|
||||
}, "background-clip_content-box");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-clip - initial value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<link rel="match" href="reference/background-clip-002-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Background-clip with initial value implies to paint the background within (clipped to) the border box.">
|
||||
<style>
|
||||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-color: green;
|
||||
border: transparent dotted 5px;
|
||||
bottom: 160px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-clip - border-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<link rel="match" href="reference/background-clip-002-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Background-clip with 'border-box' implies to paint the background within (clipped to) the border box.">
|
||||
<style>
|
||||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 160px;
|
||||
width: 160px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-clip: border-box;
|
||||
background-color: green;
|
||||
border: transparent dotted 5px;
|
||||
bottom: 160px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-clip - padding-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<link rel="match" href="reference/background-clip-004-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Background-clip with 'padding-box' implies to paint the background within (clipped to) the padding box.">
|
||||
<style>
|
||||
#test-overlapped-red {
|
||||
background-clip: padding-box;
|
||||
background-color: red;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
#ref-overlapping-green {
|
||||
background-color: green;
|
||||
bottom: 155px;
|
||||
height: 150px;
|
||||
left: 5px;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test-overlapped-red"></div>
|
||||
<div id="ref-overlapping-green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-clip - content-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<link rel="match" href="reference/background-clip-005-ref.html">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Background-clip with 'content-box' implies to paint the background within (clipped to) the content box.">
|
||||
<style>
|
||||
#test-overlapped-red {
|
||||
background-clip: content-box;
|
||||
background-color: red;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
#ref-overlapping-green {
|
||||
background-color: green;
|
||||
bottom: 130px;
|
||||
height: 100px;
|
||||
left: 30px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="test-overlapped-red"></div>
|
||||
<div id="ref-overlapping-green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,51 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-clip - inherit keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<link rel="match" href="reference/background-clip-005-ref.html">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#value-types" title="2.2. Value Types">
|
||||
<!--
|
||||
"
|
||||
all properties defined in this specification also accept
|
||||
the inherit keyword as their property value
|
||||
"
|
||||
CSS Backgrounds and Borders Module Level 3
|
||||
2.2. Value Types
|
||||
http://www.w3.org/TR/css3-background/#value-types
|
||||
-->
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Background-clip with 'inherit' implies to inherit its parent element value to paint the background area.">
|
||||
<style>
|
||||
#container {
|
||||
background-clip: content-box;
|
||||
}
|
||||
#test-overlapped-red {
|
||||
background-clip: inherit;
|
||||
background-color: red;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
#ref-overlapping-green {
|
||||
background-color: green;
|
||||
bottom: 130px;
|
||||
height: 100px;
|
||||
left: 30px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test-overlapped-red"></div>
|
||||
<div id="ref-overlapping-green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background and Borders Test: background-clip: content-box with background-color</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
|
||||
<link rel="reviewer" title="Arron Eicholz" href="mailto:arronei@microsoft.com" /> <!-- 2012-10-27 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="When 'background-clip' is set to 'content-box', then the background-color shines only through the content area; it does not shine through the padding area nor the border area.">
|
||||
<link rel="match" href="reference/ref-if-there-is-no-red.xht">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-clip: content-box;
|
||||
background-color: red;
|
||||
height: auto;
|
||||
padding: 50px;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background and Borders Test: background-clip: padding-box with background-color</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-04-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="When 'background-clip' is set to 'padding-box', then the background painting area is clipped at the edges of the padding of the element. In this test, the padding box is 0px tall and as wide as the body element; therefore, red should not be visible.">
|
||||
<link rel="match" href="reference/ref-if-there-is-no-red.xht">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-clip: padding-box;
|
||||
background-color: red;
|
||||
border: transparent solid 50px;
|
||||
height: auto;
|
||||
padding: 0px;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Background and Borders Test: background-clip: border-box with background-color</title>
|
||||
<link rel="author" title="Julien Chaffraix" href="mailto:jchaffraix@webkit.org">
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> <!-- 2013-04-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<meta name="flags" content="">
|
||||
<meta content="When 'background-clip' is set to 'border-box', then the background painting area is clipped at the edges of the borders of the element. In this test, the border box is 96px tall and 96px wide and is made from only the borders." name="assert">
|
||||
<link rel="match" href="reference/ref-filled-black-96px-square.xht">
|
||||
<style>
|
||||
div
|
||||
{
|
||||
background-clip: border-box;
|
||||
background-color: black;
|
||||
border: transparent solid 48px;
|
||||
height: auto;
|
||||
width: 0px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled black square.</p>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
|
||||
<head>
|
||||
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>CSS Background and Borders Test: background-clip - content-box with background-color</title>
|
||||
|
||||
<link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" title="3.7. Painting Area: the 'background-clip' property">
|
||||
<link rel="match" href="reference/ref-if-there-is-no-red.xht">
|
||||
|
||||
<meta content="" name="flags">
|
||||
<meta content="When 'background-clip' is set to 'content-box', then the background painting area is clipped at the edges of the content of the element. In this test, height is 'auto', therefore its used value is '0px'; width is 'auto', therefore its used value is as wide as the body element. So, the content box is 0px tall and as wide as the body element; therefore, red should not be visible." name="assert">
|
||||
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
background-clip: content-box;
|
||||
background-color: red;
|
||||
border: transparent solid 20px;
|
||||
height: auto;
|
||||
padding: 30px;
|
||||
width: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is <strong>no red</strong>.</p>
|
||||
|
||||
<div></div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<style>
|
||||
.refSquare {
|
||||
margin: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: green;
|
||||
}
|
||||
</style>
|
||||
<p>There should be three green 30x30 px squares below.</p>
|
||||
<div>border-box</div>
|
||||
<div class="refSquare"></div>
|
||||
<div>padding-box</div>
|
||||
<div class="refSquare"></div>
|
||||
<duv>content-box</div>
|
||||
<div class="refSquare"></div>
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test Reference</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<p>There should be a green square below.</p>
|
||||
<div style="background-color:green;width:150px;height:150px"></div>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html>
|
||||
<html class="reftest-wait">
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: background-clip color background repaint</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="match" href="background-clip-color-repaint-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#the-background-clip">
|
||||
<style>
|
||||
#outer {
|
||||
width: 150px;
|
||||
height: 150px;
|
||||
background-color: red;
|
||||
}
|
||||
#inner {
|
||||
border: 30px dashed green;
|
||||
padding: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: green;
|
||||
background-clip: content-box;
|
||||
}
|
||||
</style>
|
||||
<p>There should be a green square below.</p>
|
||||
<div id="outer">
|
||||
<div id="inner"></div>
|
||||
</div>
|
||||
<script>
|
||||
requestAnimationFrame(function(){
|
||||
requestAnimationFrame(function(){
|
||||
inner.style.backgroundClip = "border-box";
|
||||
document.documentElement.classList.remove("reftest-wait");
|
||||
});
|
||||
});
|
||||
inner.style.backgroundClip = "border-box";
|
||||
</script>
|
||||
|
|
@ -0,0 +1,60 @@
|
|||
<!DOCTYPE html>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders: background-clip color backgrounds</title>
|
||||
<link rel="author" title="Rune Lillesveen" href="mailto:rune@opera.com">
|
||||
<link rel="match" href="background-clip-color-ref.html">
|
||||
<link rel="help" href="https://drafts.csswg.org/css-backgrounds/#the-background-clip">
|
||||
<style>
|
||||
#borderBoxHelper {
|
||||
margin: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: red;
|
||||
}
|
||||
#borderBox {
|
||||
border: 6px dashed green;
|
||||
padding: 6px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: green;
|
||||
background-clip: border-box;
|
||||
}
|
||||
#paddingBoxHelper {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: red;
|
||||
}
|
||||
#paddingBox {
|
||||
border: 10px dashed white;
|
||||
padding: 10px;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background-color: green;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
#contentBoxHelper {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: red;
|
||||
}
|
||||
#contentBox {
|
||||
padding: 10px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-color: green;
|
||||
background-clip: content-box;
|
||||
}
|
||||
</style>
|
||||
<p>There should be three green 30x30 px squares below.</p>
|
||||
<div>border-box</div>
|
||||
<div id="borderBoxHelper">
|
||||
<div id="borderBox"></div>
|
||||
</div>
|
||||
<div>padding-box</div>
|
||||
<div class="paddingBoxHelper">
|
||||
<div id="paddingBox"></div>
|
||||
</div>
|
||||
<div>content-box</div>
|
||||
<div class="contentgBoxHelper">
|
||||
<div id="contentBox"></div>
|
||||
</div>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background-clip Reference</title>
|
||||
<link rel="author" title="James Wang" href="mailto:wangjian@ucweb.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" />
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="background-clip with content-box means paint the background within the content box">
|
||||
|
||||
<link rel="match" href="reference/background-clip-content-box-ref.html">
|
||||
|
||||
<style type="text/css">
|
||||
* { padding: 0; margin: 0; }
|
||||
#test-color-blue {
|
||||
background-color: blue;
|
||||
height: 200px;
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
}
|
||||
#test-color-green {
|
||||
background-clip: content-box;
|
||||
background-color: rgba(0, 255, 0, 1);
|
||||
height: 180px;
|
||||
padding: 10px;
|
||||
position: absolute;
|
||||
width: 180px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test pass if the green box has a 10px width blue edge</p>
|
||||
<!-- background -->
|
||||
<div id="test-color-blue"></div>
|
||||
<div id="test-color-green"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
|
||||
<title>CSS Background and Borders Test:background-clip_content-box</title>
|
||||
<link rel="author" title="anping" href="mailto:zhuanping123@163.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" />
|
||||
<meta name="match" content="reference/reference.html" />
|
||||
<meta name="assert" content="Test passes if the background color is limited to the content only and border is blue dotted without red">
|
||||
|
||||
<style>
|
||||
div{
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
#test{
|
||||
background-clip: content-box;
|
||||
border: 5px dotted blue;
|
||||
height: 100px;
|
||||
left: 10px;
|
||||
padding: 10px;
|
||||
top: 10px;
|
||||
width: 100px;
|
||||
background-color:red;
|
||||
}
|
||||
</style>
|
||||
<head/>
|
||||
<body>
|
||||
<p>
|
||||
"Test passes if the background color is limited to the content only and border is blue dotted without red."
|
||||
</p>
|
||||
<div id="container">
|
||||
<div id="test"></div>
|
||||
</div>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,79 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
<head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-clip: padding-box with border-radius</title>
|
||||
<link rel="author" title="Lea Verou" href="http://lea.verou.me" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#corner-shaping" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness." />
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.container {
|
||||
position: relative;
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
margin: 10px;
|
||||
}
|
||||
|
||||
.ref {
|
||||
top: 10px;
|
||||
left: 10px;
|
||||
height: 140px;
|
||||
width: 140px;
|
||||
border-radius: 30px;
|
||||
}
|
||||
|
||||
.test {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
padding: 20px;
|
||||
border: 10px solid transparent;
|
||||
border-radius: 40px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.behind {
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.top {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
.ref.top {
|
||||
width: 144px;
|
||||
height: 144px;
|
||||
left: 8px;
|
||||
top: 8px;
|
||||
}
|
||||
|
||||
.test.top {
|
||||
width: 104px;
|
||||
height: 104px;
|
||||
left: -2px;
|
||||
top: -2px;
|
||||
}
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there are two filled green rounded squares and <strong>no red</strong>.</p>
|
||||
<div class="container">
|
||||
<div class="test behind"></div>
|
||||
<div class="ref top"></div>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="ref behind"></div>
|
||||
<div class="test top"></div>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!-- Submitted from TestTWF Paris -->
|
||||
|
||||
<head>
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-clip on root</title>
|
||||
<link rel="author" title="Lea Verou" href="http://lea.verou.me" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" />
|
||||
<meta name="flags" content="image" />
|
||||
<meta name="assert" content="The root element has a different background painting area, and thus the 'background-clip' property has no effect when specified on it." />
|
||||
<style>
|
||||
|
||||
html {
|
||||
padding: 20px;
|
||||
background: url('support/1x1-green.png'), red;
|
||||
background-clip: content-box, border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<p>Test passes if there is green and <strong>no red</strong>.</p>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:border-box</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : border-box;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:border-box & background-position</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : border-box;
|
||||
background-position: -15px -15px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
|
||||
When background-position is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip:
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip:
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:border-box & border-radius</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : border-box;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
|
||||
When border-radius is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div id="border-box" class="view case no-repeat" >
|
||||
Test background-clip:
|
||||
</div>
|
||||
|
||||
<div id="border-box" class="view case" >
|
||||
Test background-clip:
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:border-box & background-size</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The background is painted within (clipped to) the border box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : border-box;
|
||||
background-size : 50%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area includes the area covered by border , and the area surrounded by border.<br>
|
||||
When background-size is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div id="border-box" class="view case no-repeat" >
|
||||
Test background-clip:
|
||||
</div>
|
||||
|
||||
<div id="border-box" class="view case" >
|
||||
Test background-clip:
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:content-box</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : content-box;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:content-box & background-position</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : content-box;
|
||||
background-position: -15px -15px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
|
||||
When background-position is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:content-box & border-radius</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : content-box;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
|
||||
When border-radius is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,70 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:content-box & background-size</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="content-box : The background is painted within (clipped to) the content box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : content-box;
|
||||
background-size : 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the content-area(excludes padding-area ) of the DIV.<br>
|
||||
When background-size is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:padding-box</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : padding-box;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:padding-box & background-position</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : padding-box;
|
||||
background-position: -15px -15px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br>
|
||||
When background-position is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:padding-box & border-radius</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : padding-box;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br>
|
||||
When border-radius is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-clip:padding-box & background-size</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="padding-box : The background is painted within (clipped to) the padding box" >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-clip : padding-box;
|
||||
background-size : 50%;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is clipped. The clip area is the area covered by border(includes padding-area ).<br>
|
||||
When background-size is enabled, the browser should clip the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-clip
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
background-clip/border-box.html
|
||||
background-clip/border-box_with_position.html
|
||||
background-clip/border-box_with_radius.html
|
||||
background-clip/border-box_with_size.html
|
||||
background-clip/content-box.html
|
||||
background-clip/content-box_with_position.html
|
||||
background-clip/content-box_with_radius.html
|
||||
background-clip/content-box_with_size.html
|
||||
background-clip/padding-box.html
|
||||
background-clip/padding-box_with_position.html
|
||||
background-clip/padding-box_with_radius.html
|
||||
background-clip/padding-box_with_size.html
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background-clip_border-box</title>
|
||||
<link rel="author" title="Xiaoyan Jiang" href="mailto:dajiangxiaoyan@126.com">
|
||||
<link rel="reviewer" title="Jinlong Zhang" href="mailto:jinlongz@oupeng.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-clip">
|
||||
<link rel="match" href="reference/background_clip_padding-box.html">
|
||||
<meta name="assert" content="Test passes if border is blue and dotted without red background">
|
||||
<style type="text/css">
|
||||
/* Positioned container allows for the self-describing statement to still
|
||||
be visible in the case of failure */
|
||||
.container {
|
||||
position: absolute;
|
||||
}
|
||||
.test {
|
||||
background-color: red;
|
||||
height: 130px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 130px;
|
||||
border: blue dotted 5px ;
|
||||
position: absolute;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if border is blue and dotted without red background </p>
|
||||
<div class="container">
|
||||
<div class="test"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: 'Background-color' applied to a rounded inline element</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#background-color" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="'Background-color' is clipped according to the 'background-clip' property in an inline element." />
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
border-radius: 20px;
|
||||
background-color: orange;
|
||||
background-clip: border-box;
|
||||
color: orange;
|
||||
padding: 15px;
|
||||
display: inline;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is an orange box with rounded corners below.</p>
|
||||
<div>Filler Text</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Background color clipped to 'border-box'</title>
|
||||
<link rel="author" title="Microsoft" href="http://www.microsoft.com/" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-color" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="Background color is clipped according to the 'background-clip' value associated with the bottom-most background image." />
|
||||
<style type="text/css">
|
||||
#test
|
||||
{
|
||||
width: 250px;
|
||||
height: 250px;
|
||||
border: 10px dashed purple;
|
||||
padding: 10px;
|
||||
background-image: url("support/blue_color.png"), url("support/orange_color.png"), url("support/green_color.png");
|
||||
background-repeat: no-repeat;
|
||||
background-clip: padding-box, content-box, border-box;
|
||||
background-position: 30px 30px, 60px 60px, 90px 90px;
|
||||
background-color: black;
|
||||
}
|
||||
#parent
|
||||
{
|
||||
width: 290px;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if green is visible on the page and there is no red visible on the page.</p>
|
||||
<div id="parent">
|
||||
<div id="test"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Backgrounds: background-image div</title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="match" href="reference/background-image-001-ref.html">
|
||||
<meta name="assert" content="Test checks that background-image displays raster image for div background.">
|
||||
<style>
|
||||
.container {
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: url("support/green.png");
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Backgrounds: background-image layered background on div</title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="match" href="reference/background-image-001-ref.html">
|
||||
<meta name="assert" content="Test checks that background-image displays layerd images in the correct order for div background.">
|
||||
<style>
|
||||
.container {
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
background-image: url("support/green.png"), url("support/red.png");
|
||||
background-color: red;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<div class="container"></div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Backgrounds: background-image <a></title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="match" href="reference/background-image-001-ref.html">
|
||||
<meta name="assert" content="Test checks that background-image displays raster image for <a> tag.">
|
||||
<style>
|
||||
.container {
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
a {
|
||||
width:100px;
|
||||
height:100px;
|
||||
color:transparent;
|
||||
font-size: 50px;
|
||||
background-image: url("support/green.png");
|
||||
background-color: red;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<div class="container">
|
||||
<a href="#">x</a>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Backgrounds: background-image <a> layered images</title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="match" href="reference/background-image-001-ref.html">
|
||||
<meta name="assert" content="Test checks that background-image displays multiple images in correct order on <a> tag.">
|
||||
<style>
|
||||
.container {
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
a {
|
||||
width:100px;
|
||||
height:100px;
|
||||
color:transparent;
|
||||
font-size: 50px;
|
||||
background-image: url("support/green.png"), url("support/red.png");
|
||||
background-color: red;
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<div class="container">
|
||||
<a href="#">x</a>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Backgrounds: background-image p tag</title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="match" href="reference/background-image-001-ref.html">
|
||||
<meta name="assert" content="Test checks that background-image displays raster image for p tag.">
|
||||
<style>
|
||||
.container {
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container p {
|
||||
width:100px;
|
||||
height:100px;
|
||||
color:transparent;
|
||||
font-size: 50px;
|
||||
background-image: url("support/green.png");
|
||||
background-color: red;
|
||||
display: block;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<div class="container">
|
||||
<p>x</p>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Backgrounds: background-image p layered images</title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="match" href="reference/background-image-001-ref.html">
|
||||
<meta name="assert" content="Test checks that background-image displays multiple images in correct order on p tag.">
|
||||
<style>
|
||||
.container {
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container p {
|
||||
width:100px;
|
||||
height:100px;
|
||||
color:transparent;
|
||||
font-size: 50px;
|
||||
background-image: url("support/green.png"), url("support/red.png");
|
||||
background-color: red;
|
||||
display: block;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<div class="container">
|
||||
<p>x</p>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
<!DOCTYPE html>
|
||||
<title>CSS Backgrounds: background-image :first-letter layered images</title>
|
||||
<link rel="author" title="Justin Hill" href="http://www.justin-hill.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="match" href="reference/background-image-001-ref.html">
|
||||
<meta name="assert" content="Test checks that background-image displays multiple images in correct order on :first-letter selector.">
|
||||
<style>
|
||||
.container {
|
||||
top:50px;
|
||||
left:50px;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.container p:first-letter {
|
||||
width:100px;
|
||||
height:100px;
|
||||
color:transparent;
|
||||
font-size: 50px;
|
||||
background-image: url("support/green.png"), url("support/red.png");
|
||||
background-color: red;
|
||||
display: block;
|
||||
margin: 0px;
|
||||
}
|
||||
</style>
|
||||
<body>
|
||||
<p> Test passes if green image shows and no red visable.</p>
|
||||
<div class="container">
|
||||
<p>x</p>
|
||||
</div>
|
||||
</body>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: background-image applicability to ::first-letter</title>
|
||||
<link rel="author" title="Ethan Malasky" href="mailto:emalasky@adobe.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#placement">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-image">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/colors.html#background-properties">
|
||||
<link rel="help" href="http://www.w3.org/TR/CSS21/selector.html#first-letter">
|
||||
<link rel="match" href="reference/background-image-first-letter-ref.html">
|
||||
<link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact">
|
||||
<meta name="flags" content="ahem image">
|
||||
<meta name="assert" content="background-image applicability to ::first-letter">
|
||||
<style type="text/css">
|
||||
#content {
|
||||
color: transparent;
|
||||
font: 100px Ahem;
|
||||
}
|
||||
#content::first-letter {
|
||||
background-image: url("support/cat.png"); /* 98 w. by 99px h. */
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if cat image is visible.</p>
|
||||
<div id="content">X</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds and Borders Test: background-origin - initial and supported values</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com" />
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" />
|
||||
<meta name="flags" content="dom" />
|
||||
<meta name="assert" content="Check if background-origin initial value is padding-box and supports values border-box, padding-box and content-box" />
|
||||
<script src="/resources/testharness.js"></script>
|
||||
<script src="/resources/testharnessreport.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="log"></div>
|
||||
<div id="test"></div>
|
||||
<script>
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||
"padding-box", "background-origin initial value");
|
||||
}, "background-origin_initial");
|
||||
|
||||
document.getElementById("test").style.backgroundOrigin = "border-box";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||
"border-box", "background-origin supporting value");
|
||||
}, "background-origin_border-box");
|
||||
|
||||
document.getElementById("test").style.backgroundOrigin = "padding-box";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||
"padding-box", "background-origin supporting value");
|
||||
}, "background-origin_padding-box");
|
||||
|
||||
document.getElementById("test").style.backgroundOrigin = "content-box";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-origin"),
|
||||
"content-box", "background-origin supporting value");
|
||||
}, "background-origin_content-box");
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,40 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-origin - initial value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property">
|
||||
<link rel="match" href="reference/background-origin-002-ref.html">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="Background-origin with initial value implies to position the background relative to the padding box.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 60px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-image: url(support/60x60-green.png);
|
||||
background-repeat: no-repeat;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-origin - padding-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property">
|
||||
<link rel="match" href="reference/background-origin-002-ref.html">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="Background-origin with 'padding-box' implies to position the background relative to the padding box.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 60px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-image: url(support/60x60-green.png);
|
||||
background-origin: padding-box;
|
||||
background-repeat: no-repeat;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-origin - border-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property">
|
||||
<link rel="match" href="reference/background-origin-004-ref.html">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="Background-origin with 'border-box' implies to position the background relative to the border box.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-image: url(support/60x60-green.png);
|
||||
background-origin: border-box;
|
||||
background-repeat: no-repeat;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-origin - content-box keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property">
|
||||
<link rel="match" href="reference/background-origin-005-ref.html">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="Background-origin with 'content-box' implies to position the background relative to the content box.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 30px;
|
||||
top: 30px;
|
||||
width: 60px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-image: url(support/60x60-green.png);
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,44 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-origin 'content-box' with background-attachment 'fixed'</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property">
|
||||
<link rel="match" href="reference/background-origin-006-ref.html">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="Check if the 'background-attachment' value is 'fixed' that expecting 'background-origin' has no effect and the background positioning area is the initial containing block.">
|
||||
<style>
|
||||
html {
|
||||
padding-left: 170px;
|
||||
}
|
||||
div {
|
||||
left: 0px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
}
|
||||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
width: 60px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-attachment: fixed;
|
||||
background-image: url(support/60x60-green.png);
|
||||
background-origin: content-box;
|
||||
background-repeat: no-repeat;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square at the left of the page and <strong>no red</strong>.</p>
|
||||
<div id="ref-overlapped-red">
|
||||
<div id="test-overlapping-green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-origin 'border-box' with background-clip 'padding-box'</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property">
|
||||
<link rel="match" href="reference/background-origin-007-ref.html">
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="Check if 'background-clip' is 'padding-box', 'background-origin' is 'border-box', 'background-position' is 'top left' (the initial value), and the element has a non-zero border, that expecting the top and left of the background image will be clipped.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#ref-overlapping-green {
|
||||
background-color: green;
|
||||
height: 55px;
|
||||
left: 5px;
|
||||
top: 5px;
|
||||
width: 55px;
|
||||
}
|
||||
#test-overlapped-red {
|
||||
background-clip: padding-box;
|
||||
background-image: url(support/60x60-red.png);
|
||||
background-origin: border-box;
|
||||
background-position: top left;
|
||||
background-repeat: no-repeat;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="test-overlapped-red"></div>
|
||||
<div id="ref-overlapping-green"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds and Borders Test: background-origin - inherit keyword value</title>
|
||||
<link rel="author" title="Intel" href="http://www.intel.com">
|
||||
<link rel="reviewer" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> <!-- 2012-11-09 -->
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" title="3.8. Positioning Area: the 'background-origin' property">
|
||||
<link rel="match" href="reference/background-origin-005-ref.html">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#value-types" title="2.2. Value Types">
|
||||
<!--
|
||||
"
|
||||
all properties defined in this specification also accept
|
||||
the inherit keyword as their property value
|
||||
"
|
||||
CSS Backgrounds and Borders Module Level 3
|
||||
2.2. Value Types
|
||||
http://www.w3.org/TR/css3-background/#value-types
|
||||
-->
|
||||
|
||||
<meta name="flags" content="">
|
||||
<meta name="assert" content="Background-origin with 'inherit' implies to inherit its parent element value to position the background area.">
|
||||
<style>
|
||||
div {
|
||||
position: absolute;
|
||||
}
|
||||
#container {
|
||||
background-origin: content-box;
|
||||
}
|
||||
#ref {
|
||||
background-color: red;
|
||||
height: 60px;
|
||||
left: 30px;
|
||||
top: 30px;
|
||||
width: 60px;
|
||||
}
|
||||
#test {
|
||||
background-image: url(support/60x60-green.png);
|
||||
background-origin: inherit;
|
||||
background-repeat: no-repeat;
|
||||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||
<div id="container">
|
||||
<div id="ref"></div>
|
||||
<div id="test"></div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
background-origin/border-box.html
|
||||
background-origin/border-box_with_position.html
|
||||
background-origin/border-box_with_radius.html
|
||||
background-origin/border-box_with_size.html
|
||||
background-origin/content-box.html
|
||||
background-origin/content-box_with_position.html
|
||||
background-origin/content-box_with_radius.html
|
||||
background-origin/content-box_with_size.html
|
||||
background-origin/padding-box.html
|
||||
background-origin/padding-box_with_position.html
|
||||
background-origin/padding-box_with_radius.html
|
||||
background-origin/padding-box_with_size.html
|
||||
|
|
@ -0,0 +1,69 @@
|
|||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Backgrounds Test: background-origin:border-box</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The position is relative to the border box." >
|
||||
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-origin : border-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-origin:border-box & background-position</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The position is relative to the border box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-origin : border-box;
|
||||
background-position: -15px -15px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
|
||||
When background-position is enabled, the browser should paint the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-origin:
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-origin:
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,73 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-origin:border-box & border-radius</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The position is relative to the border box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-origin : border-box;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
|
||||
When border-radius is enabled, the browser should paint the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div id="border-box" class="view case no-repeat" >
|
||||
Test background-origin:
|
||||
</div>
|
||||
|
||||
<div id="border-box" class="view case" >
|
||||
Test background-origin:
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-origin:border-box & background-size</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="border-box : The position is relative to the border box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-origin : border-box;
|
||||
background-size : 50%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
|
||||
When background-size is enabled, the browser should paint the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div id="border-box" class="view case no-repeat" >
|
||||
Test background-origin:
|
||||
</div>
|
||||
|
||||
<div id="border-box" class="view case" >
|
||||
Test background-origin:
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-origin:content-box</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="content-box : The position is relative to the content box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-origin : content-box;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-origin:content-box & background-position</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="content-box : The position is relative to the content box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-origin : content-box;
|
||||
background-position: -15px -15px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
|
||||
|
||||
Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br>
|
||||
When background-position is enabled, the browser should paint the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,72 @@
|
|||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Backgrounds Test: background-origin:content-box & border-radius</title>
|
||||
<link rel="author" title="finscn" href="mailto:finscn@gmail.com" >
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-background-origin" >
|
||||
<meta name="flags" content="image">
|
||||
<meta name="assert" content="content-box : The position is relative to the content box." >
|
||||
|
||||
<meta charset="utf-8">
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
.infomation {
|
||||
padding : 10px;
|
||||
font-size : 16pt;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.test-case {
|
||||
padding : 5px;
|
||||
margin : 5px;
|
||||
}
|
||||
|
||||
.view {
|
||||
border : 30px solid rgba(60,150,255,0.4);
|
||||
width : 320px;
|
||||
height : 240px;
|
||||
padding : 30px;
|
||||
margin : 10px;
|
||||
font-size : 16pt;
|
||||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
||||
.case {
|
||||
background-origin : content-box;
|
||||
border-radius: 60px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<div class="infomation">
|
||||
Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br>
|
||||
When border-radius is enabled, the browser should paint the background correctly.
|
||||
</div>
|
||||
|
||||
<div class="test-case">
|
||||
|
||||
<div class="view case no-repeat" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
<div class="view case" >
|
||||
Test background-origin
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue