mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update CSS tests to revision aac1cd51245c0c469325988a0446985a2f1e476c
This commit is contained in:
parent
1a6245828a
commit
7deaeea707
540 changed files with 24009 additions and 6637 deletions
|
@ -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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 & 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 ‘background-origin’ 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 & 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 & 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 & 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 & 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 & 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 & 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 &#8216;0 0&#8217; is the upper left corner of the padding edge, &#8216;100% 100%&#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 & background-position
|
||||
<ul class="assert">
|
||||
<li>padding-box : The position is relative to the padding box. (For single boxes &acirc;&#8364;&#732;0 0&acirc;&#8364;&#8482; is the upper left corner of the padding edge, &acirc;&#8364;&#732;100% 100%&acirc;&#8364;&#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 & border-radius
|
||||
<ul class="assert">
|
||||
<li>padding-box : The position is relative to the padding box. (For single boxes &acirc;&#8364;&#732;0 0&acirc;&#8364;&#8482; is the upper left corner of the padding edge, &acirc;&#8364;&#732;100% 100%&acirc;&#8364;&#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 & background-size
|
||||
<ul class="assert">
|
||||
<li>padding-box : The position is relative to the padding box. (For single boxes &acirc;&#8364;&#732;0 0&acirc;&#8364;&#8482; is the upper left corner of the padding edge, &acirc;&#8364;&#732;100% 100%&acirc;&#8364;&#8482; is the lower right corner.)</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.8.#background-origin">
|
||||
<!-- 0 tests -->
|
||||
|
|
|
@ -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>
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:border-box & 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>
|
|
@ -0,0 +1,72 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:border-box & 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>
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:border-box & 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>
|
|
@ -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>
|
|
@ -0,0 +1,73 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:content-box & 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>
|
|
@ -0,0 +1,71 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:content-box & 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>
|
|
@ -0,0 +1,69 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:content-box & 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>
|
|
@ -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>
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:padding-box & 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>
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:padding-box & 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>
|
|
@ -0,0 +1,70 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Backgrounds Test: background-origin:padding-box & 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>
|
|
@ -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 -
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue