Update CSS tests to revision aac1cd51245c0c469325988a0446985a2f1e476c

This commit is contained in:
Ms2ger 2016-04-07 09:58:26 +02:00
parent 1a6245828a
commit 7deaeea707
540 changed files with 24009 additions and 6637 deletions

View file

@ -13,7 +13,7 @@
<body>
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
<h2>Backgrounds (381 tests)</h2>
<h2>Backgrounds (393 tests)</h2>
<table width="100%">
<col id="test-column">
<col id="refs-column">
@ -1168,9 +1168,9 @@
</ul>
</td>
</tr>
<tr id="border-box-3.7" class="image">
<tr id="clip-border-box-3.7" class="image">
<td>
<a href="border-box.htm">border-box</a></td>
<a href="clip-border-box.htm">clip-border-box</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:border-box
@ -1179,9 +1179,9 @@
</ul>
</td>
</tr>
<tr id="border-box_with_position-3.7" class="image">
<tr id="clip-border-box_with_position-3.7" class="image">
<td>
<a href="border-box_with_position.htm">border-box_with_position</a></td>
<a href="clip-border-box_with_position.htm">clip-border-box_with_position</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:border-box &amp; background-position
@ -1190,9 +1190,9 @@
</ul>
</td>
</tr>
<tr id="border-box_with_radius-3.7" class="image">
<tr id="clip-border-box_with_radius-3.7" class="image">
<td>
<a href="border-box_with_radius.htm">border-box_with_radius</a></td>
<a href="clip-border-box_with_radius.htm">clip-border-box_with_radius</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:border-box &amp; border-radius
@ -1201,9 +1201,9 @@
</ul>
</td>
</tr>
<tr id="border-box_with_size-3.7" class="image">
<tr id="clip-border-box_with_size-3.7" class="image">
<td>
<a href="border-box_with_size.htm">border-box_with_size</a></td>
<a href="clip-border-box_with_size.htm">clip-border-box_with_size</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:border-box &amp; background-size
@ -1212,9 +1212,9 @@
</ul>
</td>
</tr>
<tr id="content-box-3.7" class="image">
<tr id="clip-content-box-3.7" class="image">
<td>
<a href="content-box.htm">content-box</a></td>
<a href="clip-content-box.htm">clip-content-box</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:content-box
@ -1223,9 +1223,9 @@
</ul>
</td>
</tr>
<tr id="content-box_with_position-3.7" class="image">
<tr id="clip-content-box_with_position-3.7" class="image">
<td>
<a href="content-box_with_position.htm">content-box_with_position</a></td>
<a href="clip-content-box_with_position.htm">clip-content-box_with_position</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:content-box &amp; background-position
@ -1234,9 +1234,9 @@
</ul>
</td>
</tr>
<tr id="content-box_with_radius-3.7" class="image">
<tr id="clip-content-box_with_radius-3.7" class="image">
<td>
<a href="content-box_with_radius.htm">content-box_with_radius</a></td>
<a href="clip-content-box_with_radius.htm">clip-content-box_with_radius</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:content-box &amp; border-radius
@ -1245,9 +1245,9 @@
</ul>
</td>
</tr>
<tr id="content-box_with_size-3.7" class="image">
<tr id="clip-content-box_with_size-3.7" class="image">
<td>
<a href="content-box_with_size.htm">content-box_with_size</a></td>
<a href="clip-content-box_with_size.htm">clip-content-box_with_size</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:content-box &amp; background-size
@ -1256,6 +1256,50 @@
</ul>
</td>
</tr>
<tr id="clip-padding-box-3.7" class="image">
<td>
<a href="clip-padding-box.htm">clip-padding-box</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
<tr id="clip-padding-box_with_position-3.7" class="image">
<td>
<a href="clip-padding-box_with_position.htm">clip-padding-box_with_position</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box &amp; background-position
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
<tr id="clip-padding-box_with_radius-3.7" class="image">
<td>
<a href="clip-padding-box_with_radius.htm">clip-padding-box_with_radius</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box &amp; border-radius
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
<tr id="clip-padding-box_with_size-3.7" class="image">
<td>
<a href="clip-padding-box_with_size.htm">clip-padding-box_with_size</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box &amp; background-size
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
<tr id="css3-background-clip-border-box-3.7" class="">
<td>
<a href="css3-background-clip-border-box.htm">css3-background-clip-border-box</a></td>
@ -1280,50 +1324,6 @@
<td>background clip property with value padding-box
</td>
</tr>
<tr id="padding-box-3.7" class="image">
<td>
<a href="padding-box.htm">padding-box</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
<tr id="padding-box_with_position-3.7" class="image">
<td>
<a href="padding-box_with_position.htm">padding-box_with_position</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box &amp; background-position
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
<tr id="padding-box_with_radius-3.7" class="image">
<td>
<a href="padding-box_with_radius.htm">padding-box_with_radius</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box &amp; border-radius
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
<tr id="padding-box_with_size-3.7" class="image">
<td>
<a href="padding-box_with_size.htm">padding-box_with_size</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-clip:padding-box &amp; background-size
<ul class="assert">
<li>padding-box : The background is painted within (clipped to) the padding box</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.7.#background-clip">
<!-- 0 tests -->
@ -1347,7 +1347,7 @@
<tr><th colspan="4" scope="rowgroup">
<a href="#s3.8">+</a>
<a href="https://www.w3.org/TR/css3-background/#the-background-origin">3.8 Positioning Area: the &#8216;background-origin&#8217; property</a></th></tr>
<!-- 13 tests -->
<!-- 25 tests -->
<tr id="background-origin-001-3.8" class="dom script">
<td>
<a href="background-origin-001.htm">background-origin-001</a></td>
@ -1482,6 +1482,138 @@
<td>background origin property with value content-box
</td>
</tr>
<tr id="origin-border-box-3.8" class="image">
<td>
<a href="origin-border-box.htm">origin-border-box</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:border-box
<ul class="assert">
<li>border-box : The position is relative to the border box.</li>
</ul>
</td>
</tr>
<tr id="origin-border-box_with_position-3.8" class="image">
<td>
<a href="origin-border-box_with_position.htm">origin-border-box_with_position</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:border-box &amp; background-position
<ul class="assert">
<li>border-box : The position is relative to the border box.</li>
</ul>
</td>
</tr>
<tr id="origin-border-box_with_radius-3.8" class="image">
<td>
<a href="origin-border-box_with_radius.htm">origin-border-box_with_radius</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:border-box &amp; border-radius
<ul class="assert">
<li>border-box : The position is relative to the border box.</li>
</ul>
</td>
</tr>
<tr id="origin-border-box_with_size-3.8" class="image">
<td>
<a href="origin-border-box_with_size.htm">origin-border-box_with_size</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:border-box &amp; background-size
<ul class="assert">
<li>border-box : The position is relative to the border box.</li>
</ul>
</td>
</tr>
<tr id="origin-content-box-3.8" class="image">
<td>
<a href="origin-content-box.htm">origin-content-box</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:content-box
<ul class="assert">
<li>content-box : The position is relative to the content box.</li>
</ul>
</td>
</tr>
<tr id="origin-content-box_with_position-3.8" class="image">
<td>
<a href="origin-content-box_with_position.htm">origin-content-box_with_position</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:content-box &amp; background-position
<ul class="assert">
<li>content-box : The position is relative to the content box.</li>
</ul>
</td>
</tr>
<tr id="origin-content-box_with_radius-3.8" class="image">
<td>
<a href="origin-content-box_with_radius.htm">origin-content-box_with_radius</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:content-box &amp; border-radius
<ul class="assert">
<li>content-box : The position is relative to the content box.</li>
</ul>
</td>
</tr>
<tr id="origin-content-box_with_size-3.8" class="image">
<td>
<a href="origin-content-box_with_size.htm">origin-content-box_with_size</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:content-box &amp; background-size
<ul class="assert">
<li>content-box : The position is relative to the content box.</li>
</ul>
</td>
</tr>
<tr id="origin-padding-box-3.8" class="image">
<td>
<a href="origin-padding-box.htm">origin-padding-box</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:padding-box
<ul class="assert">
<li>padding-box : The position is relative to the padding box. (For single boxes &amp;#8216;0 0&amp;#8217; is the upper left corner of the padding edge, &amp;#8216;100% 100%&amp;#8217; is the lower right corner.)</li>
</ul>
</td>
</tr>
<tr id="origin-padding-box_with_position-3.8" class="image">
<td>
<a href="origin-padding-box_with_position.htm">origin-padding-box_with_position</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:padding-box &amp; background-position
<ul class="assert">
<li>padding-box : The position is relative to the padding box. (For single boxes &amp;acirc;&amp;#8364;&amp;#732;0 0&amp;acirc;&amp;#8364;&amp;#8482; is the upper left corner of the padding edge, &amp;acirc;&amp;#8364;&amp;#732;100% 100%&amp;acirc;&amp;#8364;&amp;#8482; is the lower right corner.)</li>
</ul>
</td>
</tr>
<tr id="origin-padding-box_with_radius-3.8" class="image">
<td>
<a href="origin-padding-box_with_radius.htm">origin-padding-box_with_radius</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:padding-box &amp; border-radius
<ul class="assert">
<li>padding-box : The position is relative to the padding box. (For single boxes &amp;acirc;&amp;#8364;&amp;#732;0 0&amp;acirc;&amp;#8364;&amp;#8482; is the upper left corner of the padding edge, &amp;acirc;&amp;#8364;&amp;#732;100% 100%&amp;acirc;&amp;#8364;&amp;#8482; is the lower right corner.)</li>
</ul>
</td>
</tr>
<tr id="origin-padding-box_with_size-3.8" class="image">
<td>
<a href="origin-padding-box_with_size.htm">origin-padding-box_with_size</a></td>
<td></td>
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
<td>background-origin:padding-box &amp; background-size
<ul class="assert">
<li>padding-box : The position is relative to the padding box. (For single boxes &amp;acirc;&amp;#8364;&amp;#732;0 0&amp;acirc;&amp;#8364;&amp;#8482; is the upper left corner of the padding edge, &amp;acirc;&amp;#8364;&amp;#732;100% 100%&amp;acirc;&amp;#8364;&amp;#8482; is the lower right corner.)</li>
</ul>
</td>
</tr>
</tbody>
<tbody id="s3.8.#background-origin">
<!-- 0 tests -->

View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Backgrounds Test: background-origin:border-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : border-box;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:border-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : border-box;
background-position: -15px -15px;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
When background-position is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin:
</div>
<div class="view case">
Test background-origin:
</div>
</div>
</body></html>

View file

@ -0,0 +1,72 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:border-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : border-box;
border-radius: 60px;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
When border-radius is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat" id="border-box">
Test background-origin:
</div>
<div class="view case" id="border-box">
Test background-origin:
</div>
</div>
</body></html>

View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:border-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="border-box : The position is relative to the border box." name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : border-box;
background-size : 50%;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area includes the area covered by border , and the area surrounded by border.<br>
When background-size is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat" id="border-box">
Test background-origin:
</div>
<div class="view case" id="border-box">
Test background-origin:
</div>
</div>
</body></html>

View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : content-box;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,73 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : content-box;
background-position: -15px -15px;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br>
When background-position is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : content-box;
border-radius: 60px;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br>
When border-radius is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,69 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:content-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="content-box : The position is relative to the content box." name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : content-box;
background-size : 50%;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the content-area(excludes padding-area ) of the DIV.<br>
When background-size is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,71 @@
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>CSS Backgrounds Test: background-origin:padding-box</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)" name="assert">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : padding-box;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:padding-box &amp; background-position</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)" name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : padding-box;
background-position: -15px -15px;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).<br>
When background-position is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:padding-box &amp; border-radius</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)" name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : padding-box;
border-radius: 60px;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).<br>
When border-radius is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html><head>
<title>CSS Backgrounds Test: background-origin:padding-box &amp; background-size</title>
<link href="mail:finscn@gmail.com" rel="author" title="finscn">
<link href="http://www.w3.org/TR/css3-background/#the-background-origin" rel="help">
<meta content="image" name="flags">
<meta content="padding-box : The position is relative to the padding box. (For single boxes 0 0 is the upper left corner of the padding edge, 100% 100% is the lower right corner.)" name="assert">
<meta charset="utf-8">
<style type="text/css">
.infomation {
padding : 10px;
font-size : 16pt;
margin : 5px;
}
.test-case {
padding : 5px;
margin : 5px;
}
.view {
border : 30px solid rgba(60,150,255,0.4);
width : 320px;
height : 240px;
padding : 30px;
margin : 10px;
font-size : 16pt;
color : #ff9933;
background-image : url("../support/css3.png");
}
.no-repeat {
background-repeat : no-repeat;
}
.case {
background-origin : padding-box;
background-size : 50%;
}
</style>
</head>
<body>
<div class="infomation">
Test Passed If : The background is painted. The paint area is the area covered by border(includes padding-area ).<br>
When background-size is enabled, the browser should paint the background correctly.
</div>
<div class="test-case">
<div class="view case no-repeat">
Test background-origin
</div>
<div class="view case">
Test background-origin
</div>
</div>
</body></html>

View file

@ -32,7 +32,7 @@
<tbody id="s3">
<tr><th><a href="chapter-3.htm">Chapter 3 -
Backgrounds</a></th>
<td>(381 Tests)</td></tr>
<td>(393 Tests)</td></tr>
</tbody>
<tbody id="s4">
<tr><th><a href="chapter-4.htm">Chapter 4 -