mirror of
https://github.com/servo/servo.git
synced 2025-08-06 14:10:11 +01:00
Update CSS tests to revision 0698c2aa9ead844b6d7d10eafb096cb1118e13ef
This commit is contained in:
Ms2ger
parent
9aa1b1e408
commit
35c74aecc2
11290 changed files with 92400 additions and 49214 deletions
|
|
@ -23,37 +23,37 @@
|
|||
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");
|
||||
|
|
|
|||
|
|
@ -23,37 +23,37 @@
|
|||
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");
|
||||
|
|
|
|||
|
|
@ -23,37 +23,37 @@
|
|||
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");
|
||||
|
|
|
|||
|
|
@ -5,8 +5,8 @@
|
|||
<link href="http://www.intel.com" rel="author" title="Intel" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background" rel="help" title="3.10. Backgrounds Shorthand: the 'background' property" />
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-09 -->
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-334-review.html
|
||||
-->
|
||||
<link href="reference/background-334-ref.xht" rel="match" />
|
||||
<meta content="image" name="flags" />
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@
|
|||
<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");
|
||||
|
|
|
|||
|
|
@ -18,12 +18,12 @@
|
|||
<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");
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!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'
|
||||
CSS Test: 'Background-attachment' with value 'fixed'
|
||||
</title>
|
||||
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help" />
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
width: 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if the cat image does not move when the blue-bordered containing block or the viewport is scrolled.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -19,19 +19,19 @@
|
|||
</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
|
||||
<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>
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!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'
|
||||
CSS Test: 'Background-attachment' with value 'local'
|
||||
</title>
|
||||
<link href="mailto:job@twobanjos.com" rel="author" title="Melanie Archer" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-attachment" rel="help" />
|
||||
|
|
@ -19,11 +19,11 @@
|
|||
width: 250px;
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
Test passes if the image of the cat scrolls out of view when the blue-bordered containing block is scrolled.
|
||||
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.
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@
|
|||
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"),
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types" />
|
||||
<!--
|
||||
"
|
||||
all properties defined in this specification also accept
|
||||
all properties defined in this specification also accept
|
||||
the inherit keyword as their property value
|
||||
"
|
||||
CSS Backgrounds and Borders Module Level 3
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
|
||||
<meta charset="UTF-8" />
|
||||
|
||||
|
||||
<title>CSS Background and Borders Test: background-clip - content-box with background-color</title>
|
||||
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="author" title="Gérard Talbot" />
|
||||
|
|
@ -33,4 +33,5 @@
|
|||
<div></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
div{
|
||||
position:absolute;
|
||||
}
|
||||
|
||||
|
||||
#test{
|
||||
background-clip: content-box;
|
||||
border: 5px dotted blue;
|
||||
|
|
@ -32,6 +32,6 @@
|
|||
<div id="test"></div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Backgrounds and Borders Test: background-clip_border-box</title>
|
||||
<link href="dajiangxiaoyan@126.com" rel="author" title="Xiaoyan Jiang" />
|
||||
<link href="jinlongz@oupeng.com" rel="reviewer" title="Jinlong Zhang" />
|
||||
|
|
@ -7,7 +7,7 @@
|
|||
<link href="reference/background_clip_padding-box.xht" rel="match" />
|
||||
<meta content="Test passes if border is blue and dotted without red background" name="assert" />
|
||||
<style type="text/css">
|
||||
/* Positioned container allows for the self-describing statement to still
|
||||
/* Positioned container allows for the self-describing statement to still
|
||||
be visible in the case of failure */
|
||||
.container {
|
||||
position: absolute;
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
position: absolute;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
background-position: 30px 30px, 60px 60px, 90px 90px;
|
||||
background-color: black;
|
||||
}
|
||||
#parent
|
||||
#parent
|
||||
{
|
||||
width: 290px;
|
||||
background: red;
|
||||
|
|
|
|||
|
|
@ -13,7 +13,7 @@
|
|||
<style type="text/css">
|
||||
#content {
|
||||
color: transparent;
|
||||
font: 100px Ahem;
|
||||
font: 100px Ahem;
|
||||
}
|
||||
#content::first-letter {
|
||||
background-image: url("support/cat.png"); /* 98 w. by 99px h. */
|
||||
|
|
|
|||
|
|
@ -16,19 +16,19 @@
|
|||
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"),
|
||||
|
|
|
|||
|
|
@ -30,7 +30,7 @@
|
|||
border: transparent dotted 5px;
|
||||
height: 100px;
|
||||
padding: 25px;
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<link href="http://www.w3.org/TR/css3-background/#value-types" rel="help" title="2.2. Value Types" />
|
||||
<!--
|
||||
"
|
||||
all properties defined in this specification also accept
|
||||
all properties defined in this specification also accept
|
||||
the inherit keyword as their property value
|
||||
"
|
||||
CSS Backgrounds and Borders Module Level 3
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
background-repeat: round; /* round round */
|
||||
height: 220px;
|
||||
width: 220px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 220px wide by 220px tall.
|
||||
So, the height of the image is rounded to 110px, [220px / rounded (220px / 99px)]
|
||||
and the width of the image is rounded to 110px, [220px / rounded (220px / 98px)].
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
background-clip: padding-box;
|
||||
background-image: url("../support/red_space_pb.png");
|
||||
}
|
||||
#test
|
||||
#test
|
||||
{
|
||||
margin-top: -378px;
|
||||
width: 2.9in;
|
||||
|
|
|
|||
|
|
@ -16,115 +16,115 @@
|
|||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"auto", "background-size initial value");
|
||||
}, "background-size_initial");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "auto";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"auto", "background-size supporting value");
|
||||
}, "background-size_auto");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "cover";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"cover", "background-size supporting value");
|
||||
}, "background-size_cover");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "contain";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"contain", "background-size supporting value");
|
||||
}, "background-size_contain");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "0px";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"0px", "background-size supporting value");
|
||||
}, "background-size_length_zero");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "-0px";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"0px", "background-size supporting value");
|
||||
}, "background-size_length_negative_zero");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "+0px";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"0px", "background-size supporting value");
|
||||
}, "background-size_length_positive_zero");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "15px";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"15px", "background-size supporting value");
|
||||
}, "background-size_length_normal");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "0%";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"0%", "background-size supporting value");
|
||||
}, "background-size_percentage_min");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "50%";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"50%", "background-size supporting value");
|
||||
}, "background-size_percentage_normal");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "100%";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"100%", "background-size supporting value");
|
||||
}, "background-size_percentage_max");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "auto auto";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"auto auto", "background-size supporting value");
|
||||
}, "background-size_auto_auto");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "auto 15px";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"auto 15px", "background-size supporting value");
|
||||
}, "background-size_auto_length");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "auto 50%";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"auto 50%", "background-size supporting value");
|
||||
}, "background-size_auto_percentage");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "15px auto";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"15px auto", "background-size supporting value");
|
||||
}, "background-size_length_auto");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "15px 15px";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"15px 15px", "background-size supporting value");
|
||||
}, "background-size_length_length");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "15px 50%";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"15px 50%", "background-size supporting value");
|
||||
}, "background-size_length_percentage");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "50% auto";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"50% auto", "background-size supporting value");
|
||||
}, "background-size_percentage_auto");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "50% 15px";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
"50% 15px", "background-size supporting value");
|
||||
}, "background-size_percentage_length");
|
||||
|
||||
|
||||
document.getElementById("test").style.backgroundSize = "50% 50%";
|
||||
test(function() {
|
||||
assert_equals(getComputedStyle(document.getElementById("test"), null).getPropertyValue("background-size"),
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<!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: Value of 'auto' is used for y dimension in 'background-size'</title>
|
||||
<title>CSS Test: Value of 'auto' is used for y dimension in 'background-size'</title>
|
||||
<link href="http://www.microsoft.com/" rel="author" title="Microsoft" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" />
|
||||
<meta content="" name="flags" />
|
||||
|
|
@ -24,9 +24,9 @@
|
|||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<p>Test passes if there is no red visible on the page.</p>
|
||||
<div class="test"></div>
|
||||
<div class="reference"></div>
|
||||
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,8 +5,8 @@
|
|||
<link href="http://www.intel.com" rel="author" title="Intel" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property" />
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-09 -->
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-008-review.html
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-008-review.html
|
||||
-->
|
||||
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
|
||||
<meta content="image" name="flags" />
|
||||
|
|
|
|||
|
|
@ -23,10 +23,10 @@
|
|||
position: relative;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
background-size: 45% is relative to the background positioning area
|
||||
which is 100px by 100px in this test.
|
||||
which is 100px by 100px in this test.
|
||||
*/
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<title>CSS Backgrounds and Borders Test: background-size '100% 100%' with background-origin 'content-box'</title>
|
||||
<link href="http://www.intel.com" rel="author" title="Intel" />
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-09 -->
|
||||
<!--
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-021-review.html
|
||||
-->
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property" />
|
||||
|
|
@ -33,8 +33,8 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 100px wide by 100px tall.
|
||||
So, the image should be scaled to 100px by 100px.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -22,8 +22,8 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 160px wide by 160px tall.
|
||||
So, the image should be scaled to 80px by 80px (near),
|
||||
and repeated once in both horizontally and vertically.
|
||||
|
|
|
|||
|
|
@ -25,8 +25,8 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background painting area is 150px wide by 150px tall.
|
||||
So, the image should be scaled to 75px by 75px (near),
|
||||
and repeated once in both horizontally and vertically.
|
||||
|
|
|
|||
|
|
@ -28,8 +28,8 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 100px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 150px wide by 150px tall,
|
||||
and background painting area is 100px wide by 100px tall.
|
||||
So, the image should be scaled to 150px by 150px,
|
||||
|
|
|
|||
|
|
@ -13,20 +13,20 @@
|
|||
<style>
|
||||
div {
|
||||
background-color: red;
|
||||
background-image: url("support/100x100-blue-and-orange.png");
|
||||
background-image: url("support/100x100-blue-and-orange.png");
|
||||
background-repeat: round; /* round round */
|
||||
background-size: auto 61px;
|
||||
height: 210px;
|
||||
width: 210px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 210px wide by 210px tall.
|
||||
The set background size height is 61px. But because
|
||||
background repeat is round, then the background image
|
||||
is rescaled as follows:
|
||||
Newest height = 210px / (round [210px / 61px]);
|
||||
Newest height = 210px / (round [3.44]);
|
||||
Newest height = 210px / (3);
|
||||
Newest height = 210px / (3);
|
||||
Newest height = 70px;
|
||||
|
||||
The width is rescaled to 70px to keep the original aspect ratio.
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
background-size: auto; /* default */
|
||||
height: 198px;
|
||||
width: 196px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 196px wide by 198px tall.
|
||||
So, the image should be repeated twice in horizontal and vertical.
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -18,8 +18,8 @@
|
|||
background-size: 52px auto;
|
||||
height: 180px;
|
||||
width: 156px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 156px wide by 180px tall.
|
||||
The width of the background image is 52px.
|
||||
So, the height is rescaled to 52px to keep the original aspect ratio.
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
height is rescaled as following:
|
||||
Newest height = 180px / (round [180px / 52px]);
|
||||
Newest height = 180px / (round [3.46]);
|
||||
Newest height = 180px / (3);
|
||||
Newest height = 180px / (3);
|
||||
Newest height = 60px;
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-15 -->
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property" />
|
||||
<link href="reference/background-size-028-ref.xht" rel="match" />
|
||||
|
||||
|
||||
<meta content="image" name="flags" />
|
||||
<meta content="Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions." name="assert" />
|
||||
<style>
|
||||
|
|
@ -17,10 +17,10 @@
|
|||
background-size: 50px; /* 50px auto */
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 200px wide by 200px tall.
|
||||
So, the image should be rescaled to 50px by 50px and
|
||||
So, the image should be rescaled to 50px by 50px and
|
||||
then be repeated four times in horizontal and vertical directions.
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -18,18 +18,18 @@
|
|||
background-size: 52px auto;
|
||||
height: 180px;
|
||||
width: 180px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 180px wide by 180px tall.
|
||||
The width of the background image is 52px.
|
||||
But, because background-repeat is set to round repeat, the
|
||||
width is rescaled as following:
|
||||
Newest width = 180px / (round [180px / 52px]);
|
||||
Newest width = 180px / (round [3.46]);
|
||||
Newest width = 180px / (3);
|
||||
Newest width = 60px;
|
||||
Newest width = 180px / (3);
|
||||
Newest width = 60px;
|
||||
|
||||
Then the height is rescaled to from 100px to 60px to keep
|
||||
Then the height is rescaled to from 100px to 60px to keep
|
||||
the original aspect ratio.
|
||||
*/
|
||||
}
|
||||
|
|
|
|||
|
|
@ -17,8 +17,8 @@
|
|||
background-size: 25% 25%;
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 200px wide by 200px tall.
|
||||
So, the image should be rescaled to 50px by 50px
|
||||
and be repeated four times in horizontal and vertical.
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 150px;
|
||||
width: 50px;
|
||||
width: 50px;
|
||||
}
|
||||
#test-overlapping-square {
|
||||
background-image: url(support/100x100-blue-and-orange.png);
|
||||
|
|
@ -23,9 +23,9 @@
|
|||
bottom: 150px;
|
||||
height: 150px;
|
||||
position: relative;
|
||||
width: 250px;
|
||||
width: 250px;
|
||||
}
|
||||
/*
|
||||
/*
|
||||
Background positioning area is 250px wide by 150px tall.
|
||||
The width of the background image is 20% of 250px == 50px.
|
||||
The height is rescaled to 30% of 150px == 45px.
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
height is rescaled as following:
|
||||
Newest height = 150px / (round [150px / 45px]);
|
||||
Newest height = 150px / (round [3.33]);
|
||||
Newest height = 150px / (3);
|
||||
Newest height = 150px / (3);
|
||||
Newest height = 50px;
|
||||
*/
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
<meta content="image" name="flags" />
|
||||
<meta content="Check if background-size is able to apply to the ::first-letter pseudo-element." name="assert" />
|
||||
<style>
|
||||
div {color: white;}
|
||||
|
||||
div {color: white;}
|
||||
|
||||
div::first-letter {
|
||||
background-image: url(support/blue96x96.png);
|
||||
background-repeat: repeat no-repeat;
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@
|
|||
<meta content="image" name="flags" />
|
||||
<meta content="Check if background-size is able to apply to the ::first-line pseudo-element." name="assert" />
|
||||
<style>
|
||||
div {color: white;}
|
||||
|
||||
div {color: white;}
|
||||
|
||||
div::first-line {
|
||||
background-image: url(support/blue96x96.png);
|
||||
background-repeat: repeat no-repeat;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
#ref-overlapped-red {
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
#test-overlapping-green {
|
||||
background-image: url(support/50x50-green.png);
|
||||
|
|
@ -25,7 +25,7 @@
|
|||
bottom: 100px;
|
||||
height: 200px;
|
||||
position: relative;
|
||||
width: 400px;
|
||||
width: 400px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<meta content="" name="flags" />
|
||||
<meta content="If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored." name="assert" />
|
||||
<style type="text/css">
|
||||
.reference
|
||||
.reference
|
||||
{
|
||||
width: 1in;
|
||||
height: 1in;
|
||||
|
|
@ -40,4 +40,5 @@
|
|||
<div class="test1"></div>
|
||||
<div class="test2"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,9 +5,9 @@
|
|||
<title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title>
|
||||
|
||||
<link href="http://www.intel.com" rel="author" title="Intel" />
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-08 -->
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-001-review.html
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-08 -->
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-001-review.html
|
||||
-->
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" title="3.9. Sizing Images: the 'background-size' property" />
|
||||
<link href="reference/ref-filled-green-100px-square.xht" rel="match" />
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#test-overlapping-green
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 150px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 200px wide by 100px tall.
|
||||
So, the image should be scaled to 100px by 100px.
|
||||
*/
|
||||
|
|
@ -45,4 +45,5 @@
|
|||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<title>CSS Backgrounds and Borders Test: background-size - contain keyword value</title>
|
||||
|
||||
<link href="http://www.intel.com" rel="author" title="Intel" />
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-08 -->
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-08 -->
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-contain-002-review.html
|
||||
-->
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
{
|
||||
background-color: red;
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
div#test-overlapping-green
|
||||
|
|
@ -32,8 +32,8 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
|
||||
/*
|
||||
|
||||
/*
|
||||
Background positioning area is 100px wide by 200px tall.
|
||||
So, the image should be scaled to 100px by 100px.
|
||||
*/
|
||||
|
|
@ -45,4 +45,5 @@
|
|||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -5,7 +5,7 @@
|
|||
<title>CSS Backgrounds and Borders Test: background-size - cover keyword value</title>
|
||||
|
||||
<link href="http://www.intel.com" rel="author" title="Intel" />
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-08 -->
|
||||
<link href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" rel="reviewer" title="Gérard Talbot" /> <!-- 2012-11-08 -->
|
||||
<!--
|
||||
http://www.gtalbot.org/BrowserBugsSection/review/background-size-cover-001-review.html
|
||||
-->
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 50px;
|
||||
|
||||
/*
|
||||
Background positioning area to cover in this
|
||||
|
||||
/*
|
||||
Background positioning area to cover in this
|
||||
test is 100px wide by 50px tall.
|
||||
So, the image should be scaled to 100px by 100px.
|
||||
*/
|
||||
|
|
@ -47,4 +47,5 @@
|
|||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -33,9 +33,9 @@
|
|||
padding: 25px;
|
||||
position: relative;
|
||||
width: 0px;
|
||||
|
||||
/*
|
||||
Background positioning area to cover in this
|
||||
|
||||
/*
|
||||
Background positioning area to cover in this
|
||||
test is 50px wide by 100px tall.
|
||||
So, the image should be scaled to 100px by 100px.
|
||||
*/
|
||||
|
|
@ -47,4 +47,5 @@
|
|||
<div id="ref-overlapped-red"></div>
|
||||
<div id="test-overlapping-green"></div>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help" />
|
||||
<link href="reference/ref-t-lime16x192-aqua16x192.xht" rel="match" />
|
||||
|
||||
|
||||
<meta content="svg" name="flags" />
|
||||
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -10,16 +10,16 @@
|
|||
-->
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height-viewbox.svg</title>
|
||||
|
||||
|
||||
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help" />
|
||||
<link href="reference/background-size-vector-021-ref.xht" rel="match" />
|
||||
|
||||
|
||||
<meta content="svg" name="flags" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
|
|
|
|||
|
|
@ -10,15 +10,15 @@
|
|||
-->
|
||||
|
||||
<title>CSS Backgrounds and Borders Test: background-size: auto; for nonpercent-width-omitted-height.svg</title>
|
||||
|
||||
|
||||
<link href="http://whereswalden.com/" rel="author" title="Jeff Walden" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-background-size" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help" />
|
||||
<link href="reference/background-size-vector-022-ref.xht" rel="match" />
|
||||
|
||||
|
||||
<meta content="svg" name="flags" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help" />
|
||||
<link href="reference/background-size-vector-021-ref.xht" rel="match" />
|
||||
|
||||
|
||||
<meta content="svg" name="flags" />
|
||||
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help" />
|
||||
<link href="reference/background-size-vector-022-ref.xht" rel="match" />
|
||||
|
||||
|
||||
<meta content="svg" name="flags" />
|
||||
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -16,8 +16,8 @@
|
|||
<link href="http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute" rel="help" />
|
||||
<link href="http://www.w3.org/TR/SVG/coords.html#ViewBoxAttribute" rel="help" />
|
||||
<link href="reference/ref-t-lime24x192-aqua24x192.xht" rel="match" />
|
||||
|
||||
<link href="reference/ref-t-lime24x192-aqua24x192.xht" rel="match" />
|
||||
|
||||
<meta content="svg" name="flags" />
|
||||
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using 0 value</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify the border-bottom-left-radius property, when set with 0, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 25px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify if border-bottom-left-radius property set to one length value, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 25px;
|
||||
border-bottom-left-radius: 25px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,29 +43,29 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "25px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two length values: 40px 20px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-left-radius-004.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two length values, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 40px 20px;
|
||||
border-bottom-left-radius: 40px 20px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,29 +44,29 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
|
||||
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "40px 20px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using one percentage value: 20%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-left-radius-003.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to percentage value, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 20%;
|
||||
border-bottom-left-radius: 20%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,29 +44,29 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
|
||||
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two percentage values: 20% 30%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-left-radius-006.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two precentage value, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 20% 30%;
|
||||
border-bottom-left-radius: 20% 30%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20% 30%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 40px 30%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-left-radius-005.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different unit, works fine" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 40px 30%;
|
||||
border-bottom-left-radius: 40px 30%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "40px 30%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 20% 25px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-left-radius-009.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different unit, works fine" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 20% 25px;
|
||||
border-bottom-left-radius: 20% 25px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20% 25px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two values: 4em 30%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two values in different units, works fine" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 4em 30%;
|
||||
border-bottom-left-radius: 4em 30%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,28 +43,28 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "64px 30%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using "inherit"</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,25 +19,25 @@
|
|||
<link rel="match" href="border-bottom-left-radius-007.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify if inherit feature works, when assigned to border-bottom-left-radius" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
body
|
||||
{
|
||||
border-bottom-left-radius: 20% 25px;
|
||||
border-bottom-left-radius: 20% 25px;
|
||||
}
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-left-radius: inherit;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -48,28 +48,28 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20% 25px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 25px 0</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-left-radius: 25px 0;
|
||||
border-bottom-left-radius: 25px 0;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using one length value: 0 3em</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to one length value, works fine" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-left-radius: 0 3em;
|
||||
border-bottom-left-radius: 0 3em;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two length values: 0.5in 10mm</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two length values (with diferent units), works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 0.5in 10mm;
|
||||
border-bottom-left-radius: 0.5in 10mm;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,28 +43,28 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "48px 37px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two length values: 40pt 2pc</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-left-radius property set to two length values (with different units), works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-left-radius: 40pt 2pc;
|
||||
border-bottom-left-radius: 40pt 2pc;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,28 +43,28 @@
|
|||
<li>PASS if only bottom left corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "53px 32px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-left-radius using two length values: 50px -25px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify if one length value is negative in border-bottom-left-radius, then the corner is not rounded." />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-left-radius: 50px -25px;
|
||||
border-bottom-left-radius: 50px -25px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-left-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using 0 value</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property, when set with 0, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using one length value: 25px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with one length value, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 25px;
|
||||
border-bottom-right-radius: 25px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,28 +43,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "25px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two length values: 40px 20px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-right-radius-004.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with two length values, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 40px 20px;
|
||||
border-bottom-right-radius: 40px 20px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "40px 20px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using one percentage value: 20%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-right-radius-003.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with one percentage value, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 20%;
|
||||
border-bottom-right-radius: 20%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two percentage value: 20% 30%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-right-radius-006.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with two percentage value works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 20% 30%;
|
||||
border-bottom-right-radius: 20% 30%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20% 30%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two value: 40px 30%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-right-radius-005.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set to two value with different unit, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 40px 30%;
|
||||
border-bottom-right-radius: 40px 30%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "40px 30%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two value: 20% 25px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,21 +19,21 @@
|
|||
<link rel="match" href="border-bottom-right-radius-009.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set to two value with different unit, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 20% 25px;
|
||||
border-bottom-right-radius: 20% 25px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -44,28 +44,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20% 25px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two values: 4em 30%</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set to two values with different units, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 4em 30%;
|
||||
border-bottom-right-radius: 4em 30%;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,28 +43,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "64px 30%";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using "inherit"</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,25 +19,25 @@
|
|||
<link rel="match" href="border-bottom-right-radius-007.xht" />
|
||||
<meta name="flags" content="" />
|
||||
–––<meta name="assert" content="To verify if inherit feature works, when assigned to "borderbottomrightradius" property" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
body
|
||||
{
|
||||
border-bottom-right-radius: 20% 25px;
|
||||
border-bottom-right-radius: 20% 25px;
|
||||
}
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -48,28 +48,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "20% 25px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using one length value: 25px 0</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with one length value, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-right-radius: 25px 0;
|
||||
border-bottom-right-radius: 25px 0;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using one length value: 0 3em</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with one length value, works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-right-radius: 0 3em;
|
||||
border-bottom-right-radius: 0 3em;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,28 +47,28 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two length values: 0.5in 10mm</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with two values (with different units), works as expected" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 0.5in 10mm;
|
||||
border-bottom-right-radius: 0.5in 10mm;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,28 +43,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "48px 37px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two length values: 40pt 2pc</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -18,21 +18,21 @@
|
|||
<link rel="help" href="http://www.w3.org/TR/css3-background/#the-border-radius" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify border-bottom-right-radius property set with two values (with different units), works fine" />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
border-bottom-right-radius: 40pt 2pc;
|
||||
border-bottom-right-radius: 40pt 2pc;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -43,28 +43,28 @@
|
|||
<li>PASS if only bottom right corner is rounded.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "53px 32px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
<!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">
|
||||
<html xmlns="http://www.w3.org/1999/xhtml">
|
||||
<head>
|
||||
<title>CSS Test: Borders. Border-bottom-right-radius using two length values: 50px -25px</title>
|
||||
<style type="text/css">
|
||||
|
|
@ -19,24 +19,24 @@
|
|||
<link rel="match" href="reference/border-radius-001-ref.xht" />
|
||||
<meta name="flags" content="" />
|
||||
<meta name="assert" content="To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded." />
|
||||
<style type="text/css">
|
||||
<style type="text/css">
|
||||
/* <![CDATA[ */
|
||||
div
|
||||
div
|
||||
{
|
||||
border:2px solid #a1a1a1;
|
||||
border:2px solid #a1a1a1;
|
||||
background:#dddddd;
|
||||
width:200px;
|
||||
height: 100px;
|
||||
}
|
||||
#test
|
||||
{
|
||||
border-bottom-right-radius: 50px -25px;
|
||||
border-bottom-right-radius: 50px -25px;
|
||||
}
|
||||
/* ]]> */
|
||||
/* ]]> */
|
||||
</style>
|
||||
<!--
|
||||
<!--
|
||||
<script type="text/javascript" src="js/css3_test_helper.js"></script>
|
||||
-->
|
||||
-->
|
||||
</head>
|
||||
<body>
|
||||
<p>
|
||||
|
|
@ -47,29 +47,29 @@
|
|||
<li>PASS if the two boxes below are the same.</li>
|
||||
<li>FAIL if the output is not as expected.</li>
|
||||
</ul>
|
||||
|
||||
|
||||
<!-- PLACE TEST CONTENT FROM HERE -->
|
||||
<div id="test"></div>
|
||||
<p><br /></p>
|
||||
<div id="reference"></div>
|
||||
<!--
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
<script type="text/javascript">
|
||||
/* <![CDATA[ */
|
||||
var expectedBorderRadius = "0px";
|
||||
|
||||
|
||||
var testResult = check_CSS_property("border-bottom-right-radius", expectedBorderRadius);
|
||||
|
||||
|
||||
// if (testResult.pass)
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
// else
|
||||
/* This portion of the code has been removed to ensure that the test case is not automated */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
if (top.FrameEnabled) top.fnLog(testResult);
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
|
||||
/* ]]> */
|
||||
</script>
|
||||
-->
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
color : #ff9933;
|
||||
background-image : url("../support/css3.png");
|
||||
}
|
||||
|
||||
|
||||
.no-repeat {
|
||||
background-repeat : no-repeat;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<!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>
|
||||
<html xmlns="http://www.w3.org/1999/xhtml"><head>
|
||||
<title>CSS Backgrounds and Borders Test: border-clip_border-box</title>
|
||||
<link href="andong135@126.com" rel="author" title="Dong An" />
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-color" rel="help" />
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
}
|
||||
.triangle-up {
|
||||
height: 0;
|
||||
width: 0;
|
||||
width: 0;
|
||||
border: 50px solid #e5c3b2;
|
||||
border-color: transparent transparent #e5c3b2 transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -31,11 +31,11 @@
|
|||
/*
|
||||
Equivalent to this shorthand form (see border-image-018 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
|
||||
|
||||
or to this shorthand form (see border-image-019 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat;
|
||||
|
||||
or to this shorthand form (see border-image-020 test):
|
||||
or to this shorthand form (see border-image-020 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat;
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@
|
|||
|
||||
/*
|
||||
Equivalent to this shorthand form (see border-image-017 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
|
||||
or to this shorthand form (see border-image-019 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat;
|
||||
|
||||
or to this shorthand form (see border-image-020 test):
|
||||
or to this shorthand form (see border-image-020 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat;
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -30,12 +30,12 @@
|
|||
|
||||
/*
|
||||
Equivalent to this shorthand form (see border-image-017 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
|
||||
or to this shorthand form (see border-image-018 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
|
||||
or to this shorthand form (see border-image-020 test):
|
||||
or to this shorthand form (see border-image-020 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 1 1 1 1 / 0 repeat repeat;
|
||||
*/
|
||||
|
||||
|
|
|
|||
|
|
@ -30,11 +30,11 @@
|
|||
|
||||
/*
|
||||
Equivalent to this shorthand form (see border-image-017 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
|
||||
or to this shorthand form (see border-image-018 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5 10 15 20 / 15% 20% 35% 30% / 0 repeat repeat;
|
||||
|
||||
|
||||
or to this shorthand form (see border-image-019 test):
|
||||
border-image: url("support/outline-5px-10px-15px-20px-green.png") 5% 10% 15% 20% / 1 1 1 1 / 0 repeat repeat;
|
||||
*/
|
||||
|
|
|
|||
|
|
@ -5,14 +5,14 @@
|
|||
CSS Border and Background: border-image #1 border-image-source
|
||||
</title>
|
||||
<meta content="Basic support for the border-image-source property" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-source" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#test {
|
||||
background-color: #009900;
|
||||
border : 10px solid red;
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
|
||||
border-image-source: url(support/img-ref-1.png);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square is fully green without any red border.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #10 border-image-width
|
||||
</title>
|
||||
<meta content="Support for 4 values for the border-image-width property" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-width" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#test {
|
||||
border : 10px solid red;
|
||||
width : 20px;
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
|
||||
border-image-source: url(support/img-ref-1.png);
|
||||
border-image-slice : 10;
|
||||
border-image-width : 1px 5px 10px 15px;
|
||||
border-image-width : 1px 5px 10px 15px;
|
||||
}
|
||||
|
||||
#ref {
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
width : 15px;
|
||||
height : 20px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if both squares are identical.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #11 border-image-outset
|
||||
</title>
|
||||
<meta content="Basic support for the border-image-outset property" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-source" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#fail {
|
||||
background-color: red;
|
||||
padding : 9px;
|
||||
|
|
@ -27,15 +27,15 @@
|
|||
|
||||
border-image-source: url(support/img-ref-1.png);
|
||||
border-image-slice : 10;
|
||||
border-image-width : 10px;
|
||||
border-image-width : 10px;
|
||||
border-image-outset: 9px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square is green.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #12 border-image-outset
|
||||
</title>
|
||||
<meta content="The border-image-outset property should not trigger scroll" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-outset" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#fail {
|
||||
background-color: red;
|
||||
width : 42px;
|
||||
|
|
@ -27,15 +27,15 @@
|
|||
|
||||
border-image-source: url(support/img-ref-1.png);
|
||||
border-image-slice : 10;
|
||||
border-image-width : 10px;
|
||||
border-image-width : 10px;
|
||||
border-image-outset: 9px;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if there is <strong>no</strong> scrollbars around the square
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
CSS Border and Background: border-image #13 border-image-repeat
|
||||
</title>
|
||||
<meta content="Test for the border-image-repeat property with the value repeat" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#test {
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
border-image-slice : 10;
|
||||
border-image-repeat: repeat;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square has borders made of green dots.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
CSS Border and Background: border-image #14 border-image-repeat
|
||||
</title>
|
||||
<meta content="Test for the border-image-repeat property with the value round" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#test {
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
border-image-slice : 10;
|
||||
border-image-repeat: round;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square has borders made of plain green dots.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
CSS Border and Background: border-image #15 border-image-repeat
|
||||
</title>
|
||||
<meta content="Test for the border-image-repeat property with the value space" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#test {
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
border-image-slice : 10;
|
||||
border-image-repeat: space;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square has borders made of plain regular green dots.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,11 +5,11 @@
|
|||
CSS Border and Background: border-image #16 border-image-repeat
|
||||
</title>
|
||||
<meta content="Test for the border-image-repeat property with the value stretch" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#the-border-image-repeat" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#test {
|
||||
|
|
@ -21,12 +21,12 @@
|
|||
border-image-slice : 10;
|
||||
border-image-repeat: stretch;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the the corners are regular green dots and borders are single stretch dots.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #2 border-image-slice
|
||||
</title>
|
||||
<meta content="Basic support for the border-image-slice property" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#border-image-slice" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#fail {
|
||||
background-color: red;
|
||||
width : 60px;
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
border-image-source: url(support/img-ref-1.png);
|
||||
border-image-slice : 10;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square is fully green.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #3 border-image-slice
|
||||
</title>
|
||||
<meta content="Support for the fill keyword on the border-image-slice property" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#border-image-slice" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#fail {
|
||||
background-color: red;
|
||||
width : 60px;
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
border-image-source: url(support/img-ref-1.png);
|
||||
border-image-slice : 10 fill;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square is fully green.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #4 border-image-slice
|
||||
</title>
|
||||
<meta content="Support for percentage with the border-image-slice property" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#border-image-slice" rel="help" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
|
||||
#fail {
|
||||
background-color: red;
|
||||
width : 60px;
|
||||
|
|
@ -32,12 +32,12 @@
|
|||
border-image-source: url(support/img-ref-1.png);
|
||||
border-image-slice : 33%;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the square is fully green.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #5 border-image-slice
|
||||
</title>
|
||||
<meta content="Negative values for the the border-image-slice property should not be supported" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#border-image-slice" rel="help" />
|
||||
|
||||
<link href="support/reftest-border-image-5.png" rel="match" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#filler {
|
||||
|
|
@ -28,12 +28,12 @@
|
|||
border-image-source: url(support/img-ref-1.png);
|
||||
border-image-slice : -10;
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the green square have smaller green squares at its corners and <strong>no</strong> red.
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -5,13 +5,13 @@
|
|||
CSS Border and Background: border-image #6 border-image-slice
|
||||
</title>
|
||||
<meta content="The border-image-slice property default value is 100%" name="assert" />
|
||||
|
||||
|
||||
<link href="mailto:jeremie@patonnier.net" rel="author" title="Jérémie Patonnier" />
|
||||
|
||||
<link href="http://www.w3.org/TR/css3-background/#border-image-slice" rel="help" />
|
||||
|
||||
<link href="support/reftest-border-image-5.png" rel="match" />
|
||||
|
||||
|
||||
<style type="text/css">
|
||||
|
||||
#filler {
|
||||
|
|
@ -27,12 +27,12 @@
|
|||
|
||||
border-image-source: url(support/img-ref-1.png);
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
||||
<p>
|
||||
Pass if the green square have smaller green squares at its corners and <strong>no</strong> red borders.
|
||||
</p>
|
||||
|
|
|
|||
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