mirror of
https://github.com/servo/servo.git
synced 2025-06-24 17:14: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
|
@ -23,7 +23,7 @@
|
||||||
to { width: 200vw; height: 200vh; }
|
to { width: 200vw; height: 200vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; height: 100%; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
|
|
|
@ -163,8 +163,8 @@ html/css-filters-animation-saturate.htm 1527b952f6a2421d3ff02ce50405d38d1cbb45b5
|
||||||
xhtml1/css-filters-animation-saturate.xht 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 ?
|
xhtml1/css-filters-animation-saturate.xht 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 ?
|
||||||
html/css-filters-animation-sepia.htm 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
html/css-filters-animation-sepia.htm 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
||||||
xhtml1/css-filters-animation-sepia.xht 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
xhtml1/css-filters-animation-sepia.xht 36a7316bfb518ea1cdefd38151449383c02b57a0 ?
|
||||||
html/vh-interpolate-pct.htm ceef2964c18d7fd3cab6f5923fa60a633ec97442 ?
|
html/vh-interpolate-pct.htm b3791c1f30e52dc8582b2081404c23d6c2a15292 ?
|
||||||
xhtml1/vh-interpolate-pct.xht ceef2964c18d7fd3cab6f5923fa60a633ec97442 ?
|
xhtml1/vh-interpolate-pct.xht b3791c1f30e52dc8582b2081404c23d6c2a15292 ?
|
||||||
html/vh-interpolate-px.htm ade4e7b3374856c99aa9515a936630f49c5c44fb ?
|
html/vh-interpolate-px.htm ade4e7b3374856c99aa9515a936630f49c5c44fb ?
|
||||||
xhtml1/vh-interpolate-px.xht ade4e7b3374856c99aa9515a936630f49c5c44fb ?
|
xhtml1/vh-interpolate-px.xht ade4e7b3374856c99aa9515a936630f49c5c44fb ?
|
||||||
html/vh-interpolate-vh.htm 9a46dd5fa51b77278d6d50f7c7f862592aea3413 ?
|
html/vh-interpolate-vh.htm 9a46dd5fa51b77278d6d50f7c7f862592aea3413 ?
|
||||||
|
|
|
@ -79,6 +79,6 @@ css-filters-animation-invert reference/css-filters-animation-invert-ref CSS Filt
|
||||||
css-filters-animation-opacity reference/css-filters-animation-opacity-ref CSS Filters Animation: Opacity http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-opacity,http://www.w3.org/TR/css3-animations/#animations c280f619d6a33d5953c6bde268ba7b0813467b70 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The black square should be gray
|
css-filters-animation-opacity reference/css-filters-animation-opacity-ref CSS Filters Animation: Opacity http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-opacity,http://www.w3.org/TR/css3-animations/#animations c280f619d6a33d5953c6bde268ba7b0813467b70 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The black square should be gray
|
||||||
css-filters-animation-saturate reference/css-filters-animation-saturate-ref CSS Filters Animation: Saturate http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-saturate,http://www.w3.org/TR/css3-animations/#animations 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be light-blue
|
css-filters-animation-saturate reference/css-filters-animation-saturate-ref CSS Filters Animation: Saturate http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-saturate,http://www.w3.org/TR/css3-animations/#animations 1527b952f6a2421d3ff02ce50405d38d1cbb45b5 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be light-blue
|
||||||
css-filters-animation-sepia reference/css-filters-animation-sepia-ref CSS Filters Animation: Sepia http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-sepia,http://www.w3.org/TR/css3-animations/#animations 36a7316bfb518ea1cdefd38151449383c02b57a0 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be half-sepia
|
css-filters-animation-sepia reference/css-filters-animation-sepia-ref CSS Filters Animation: Sepia http://www.w3.org/TR/filter-effects-1/#FilterProperty,http://www.w3.org/TR/filter-effects-1/#funcdef-sepia,http://www.w3.org/TR/css3-animations/#animations 36a7316bfb518ea1cdefd38151449383c02b57a0 `Gunther Brunner`<mailto:takeshimiya@gmail.com> The blue square should be half-sepia
|
||||||
vh-interpolate-pct reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations ceef2964c18d7fd3cab6f5923fa60a633ec97442 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
vh-interpolate-pct reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations b3791c1f30e52dc8582b2081404c23d6c2a15292 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
vh-interpolate-px reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations ade4e7b3374856c99aa9515a936630f49c5c44fb `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
vh-interpolate-px reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations ade4e7b3374856c99aa9515a936630f49c5c44fb `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 0px and 200vh is 100vh (respectively for vw)
|
||||||
vh-interpolate-vh reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations 9a46dd5fa51b77278d6d50f7c7f862592aea3413 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
vh-interpolate-vh reference/all-green Viewport units are interpolated correctly http://www.w3.org/TR/css3-values/#viewport-relative-lengths,http://www.w3.org/TR/css3-animations/#animations 9a46dd5fa51b77278d6d50f7c7f862592aea3413 `François REMY`<mailto:fremycompany.developer@yahoo.fr> The interpolated size mid-way between 75vh and 125vh is 100vh (respectively for vw)
|
||||||
|
|
|
@ -23,7 +23,7 @@
|
||||||
to { width: 200vw; height: 200vh; }
|
to { width: 200vw; height: 200vh; }
|
||||||
}
|
}
|
||||||
|
|
||||||
html, body { margin: 0px; padding: 0px; }
|
html, body { margin: 0px; padding: 0px; height: 100%; }
|
||||||
|
|
||||||
html { background: red; overflow: hidden; }
|
html { background: red; overflow: hidden; }
|
||||||
#outer { position: relative; background: green; }
|
#outer { position: relative; background: green; }
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
<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%">
|
<table width="100%">
|
||||||
<col id="test-column">
|
<col id="test-column">
|
||||||
<col id="refs-column">
|
<col id="refs-column">
|
||||||
|
@ -1168,9 +1168,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box-3.7" class="image">
|
<tr id="clip-border-box-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box.htm">border-box</a></td>
|
<a href="clip-border-box.htm">clip-border-box</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box
|
<td>background-clip:border-box
|
||||||
|
@ -1179,9 +1179,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_position-3.7" class="image">
|
<tr id="clip-border-box_with_position-3.7" class="image">
|
||||||
<td>
|
<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></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & background-position
|
<td>background-clip:border-box & background-position
|
||||||
|
@ -1190,9 +1190,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_radius-3.7" class="image">
|
<tr id="clip-border-box_with_radius-3.7" class="image">
|
||||||
<td>
|
<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></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & border-radius
|
<td>background-clip:border-box & border-radius
|
||||||
|
@ -1201,9 +1201,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_size-3.7" class="image">
|
<tr id="clip-border-box_with_size-3.7" class="image">
|
||||||
<td>
|
<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></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & background-size
|
<td>background-clip:border-box & background-size
|
||||||
|
@ -1212,9 +1212,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box-3.7" class="image">
|
<tr id="clip-content-box-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box.htm">content-box</a></td>
|
<a href="clip-content-box.htm">clip-content-box</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box
|
<td>background-clip:content-box
|
||||||
|
@ -1223,9 +1223,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_position-3.7" class="image">
|
<tr id="clip-content-box_with_position-3.7" class="image">
|
||||||
<td>
|
<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></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & background-position
|
<td>background-clip:content-box & background-position
|
||||||
|
@ -1234,9 +1234,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_radius-3.7" class="image">
|
<tr id="clip-content-box_with_radius-3.7" class="image">
|
||||||
<td>
|
<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></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & border-radius
|
<td>background-clip:content-box & border-radius
|
||||||
|
@ -1245,9 +1245,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_size-3.7" class="image">
|
<tr id="clip-content-box_with_size-3.7" class="image">
|
||||||
<td>
|
<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></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & background-size
|
<td>background-clip:content-box & background-size
|
||||||
|
@ -1256,6 +1256,50 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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="">
|
<tr id="css3-background-clip-border-box-3.7" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="css3-background-clip-border-box.htm">css3-background-clip-border-box</a></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>background clip property with value padding-box
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
||||||
<tbody id="s3.7.#background-clip">
|
<tbody id="s3.7.#background-clip">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
@ -1347,7 +1347,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.8">+</a>
|
<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>
|
<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">
|
<tr id="background-origin-001-3.8" class="dom script">
|
||||||
<td>
|
<td>
|
||||||
<a href="background-origin-001.htm">background-origin-001</a></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>background origin property with value content-box
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</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>
|
||||||
<tbody id="s3.8.#background-origin">
|
<tbody id="s3.8.#background-origin">
|
||||||
<!-- 0 tests -->
|
<!-- 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">
|
<tbody id="s3">
|
||||||
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
<tr><th><a href="chapter-3.htm">Chapter 3 -
|
||||||
Backgrounds</a></th>
|
Backgrounds</a></th>
|
||||||
<td>(381 Tests)</td></tr>
|
<td>(393 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
<tr><th><a href="chapter-4.htm">Chapter 4 -
|
||||||
|
|
|
@ -431,14 +431,6 @@ html4/border-bottom-right-radius-013.htm 033344f1f722b102330a32347d6655e2d6d2406
|
||||||
xhtml1/border-bottom-right-radius-013.xht 033344f1f722b102330a32347d6655e2d6d24067 ?
|
xhtml1/border-bottom-right-radius-013.xht 033344f1f722b102330a32347d6655e2d6d24067 ?
|
||||||
html4/border-bottom-right-radius-014.htm 344be3e376e814808318eebb489a61e4ca02409c ?
|
html4/border-bottom-right-radius-014.htm 344be3e376e814808318eebb489a61e4ca02409c ?
|
||||||
xhtml1/border-bottom-right-radius-014.xht 344be3e376e814808318eebb489a61e4ca02409c ?
|
xhtml1/border-bottom-right-radius-014.xht 344be3e376e814808318eebb489a61e4ca02409c ?
|
||||||
html4/border-box.htm e94f9369378951394fed22891b1fd01bafca039d ?
|
|
||||||
xhtml1/border-box.xht e94f9369378951394fed22891b1fd01bafca039d ?
|
|
||||||
html4/border-box_with_position.htm a3dc11dbc05b0b4b21dea6b725192f859b96c6bb ?
|
|
||||||
xhtml1/border-box_with_position.xht a3dc11dbc05b0b4b21dea6b725192f859b96c6bb ?
|
|
||||||
html4/border-box_with_radius.htm 00f7bc1670c0484c8b56f064bcc82d867e192b50 ?
|
|
||||||
xhtml1/border-box_with_radius.xht 00f7bc1670c0484c8b56f064bcc82d867e192b50 ?
|
|
||||||
html4/border-box_with_size.htm 279c25b383ffc1e60f889ea077f0979bf18d3ca8 ?
|
|
||||||
xhtml1/border-box_with_size.xht 279c25b383ffc1e60f889ea077f0979bf18d3ca8 ?
|
|
||||||
html4/border-color_transparent.htm b49637ff5a553ca66e7fba67e1a533c18c06fdda ?
|
html4/border-color_transparent.htm b49637ff5a553ca66e7fba67e1a533c18c06fdda ?
|
||||||
xhtml1/border-color_transparent.xht b49637ff5a553ca66e7fba67e1a533c18c06fdda ?
|
xhtml1/border-color_transparent.xht b49637ff5a553ca66e7fba67e1a533c18c06fdda ?
|
||||||
html4/border-image-017.htm d989efaaaf69da114fdf8d622cda3827d7b6048b ?
|
html4/border-image-017.htm d989efaaaf69da114fdf8d622cda3827d7b6048b ?
|
||||||
|
@ -693,16 +685,32 @@ html4/box-shadow-outset-without-border-radius.htm b1f52411881fa34bdc4a4e100f2d97
|
||||||
xhtml1/box-shadow-outset-without-border-radius.xht b1f52411881fa34bdc4a4e100f2d9792478bb8a6 ?
|
xhtml1/box-shadow-outset-without-border-radius.xht b1f52411881fa34bdc4a4e100f2d9792478bb8a6 ?
|
||||||
html4/box-shadow-syntax-001.htm adc70c5f810a3182f5aad7255f9dd7ec5d35f977 ?
|
html4/box-shadow-syntax-001.htm adc70c5f810a3182f5aad7255f9dd7ec5d35f977 ?
|
||||||
xhtml1/box-shadow-syntax-001.xht adc70c5f810a3182f5aad7255f9dd7ec5d35f977 ?
|
xhtml1/box-shadow-syntax-001.xht adc70c5f810a3182f5aad7255f9dd7ec5d35f977 ?
|
||||||
|
html4/clip-border-box.htm e94f9369378951394fed22891b1fd01bafca039d ?
|
||||||
|
xhtml1/clip-border-box.xht e94f9369378951394fed22891b1fd01bafca039d ?
|
||||||
|
html4/clip-border-box_with_position.htm a3dc11dbc05b0b4b21dea6b725192f859b96c6bb ?
|
||||||
|
xhtml1/clip-border-box_with_position.xht a3dc11dbc05b0b4b21dea6b725192f859b96c6bb ?
|
||||||
|
html4/clip-border-box_with_radius.htm 00f7bc1670c0484c8b56f064bcc82d867e192b50 ?
|
||||||
|
xhtml1/clip-border-box_with_radius.xht 00f7bc1670c0484c8b56f064bcc82d867e192b50 ?
|
||||||
|
html4/clip-border-box_with_size.htm 279c25b383ffc1e60f889ea077f0979bf18d3ca8 ?
|
||||||
|
xhtml1/clip-border-box_with_size.xht 279c25b383ffc1e60f889ea077f0979bf18d3ca8 ?
|
||||||
|
html4/clip-content-box.htm 930d3ca0bda1025eea22f22d8ec20d53c4a2175b ?
|
||||||
|
xhtml1/clip-content-box.xht 930d3ca0bda1025eea22f22d8ec20d53c4a2175b ?
|
||||||
|
html4/clip-content-box_with_position.htm 5ced35b8928414a87a38b80b3b3e937ae5b21c1e ?
|
||||||
|
xhtml1/clip-content-box_with_position.xht 5ced35b8928414a87a38b80b3b3e937ae5b21c1e ?
|
||||||
|
html4/clip-content-box_with_radius.htm 2f4c470675a768689216adb298cc46282ebc6f2f ?
|
||||||
|
xhtml1/clip-content-box_with_radius.xht 2f4c470675a768689216adb298cc46282ebc6f2f ?
|
||||||
|
html4/clip-content-box_with_size.htm 8c10fa095529249067aed2a490ce5effa695f546 ?
|
||||||
|
xhtml1/clip-content-box_with_size.xht 8c10fa095529249067aed2a490ce5effa695f546 ?
|
||||||
|
html4/clip-padding-box.htm 30c8e1826b34e6b2b132ee8e6c0765138d479761 ?
|
||||||
|
xhtml1/clip-padding-box.xht 30c8e1826b34e6b2b132ee8e6c0765138d479761 ?
|
||||||
|
html4/clip-padding-box_with_position.htm d207e5c29e417b86ead2cf93e6d4715075674f52 ?
|
||||||
|
xhtml1/clip-padding-box_with_position.xht d207e5c29e417b86ead2cf93e6d4715075674f52 ?
|
||||||
|
html4/clip-padding-box_with_radius.htm d3f47dae7fd8e1b0216994fad247e29fa9e90a93 ?
|
||||||
|
xhtml1/clip-padding-box_with_radius.xht d3f47dae7fd8e1b0216994fad247e29fa9e90a93 ?
|
||||||
|
html4/clip-padding-box_with_size.htm 02a4f955189fc9cabbd43cb29870f01b6628644b ?
|
||||||
|
xhtml1/clip-padding-box_with_size.xht 02a4f955189fc9cabbd43cb29870f01b6628644b ?
|
||||||
html4/color-behind-images.htm f0a536f5c70d50863079b17059b4bb1b94316f2f ?
|
html4/color-behind-images.htm f0a536f5c70d50863079b17059b4bb1b94316f2f ?
|
||||||
xhtml1/color-behind-images.xht f0a536f5c70d50863079b17059b4bb1b94316f2f ?
|
xhtml1/color-behind-images.xht f0a536f5c70d50863079b17059b4bb1b94316f2f ?
|
||||||
html4/content-box.htm 930d3ca0bda1025eea22f22d8ec20d53c4a2175b ?
|
|
||||||
xhtml1/content-box.xht 930d3ca0bda1025eea22f22d8ec20d53c4a2175b ?
|
|
||||||
html4/content-box_with_position.htm 5ced35b8928414a87a38b80b3b3e937ae5b21c1e ?
|
|
||||||
xhtml1/content-box_with_position.xht 5ced35b8928414a87a38b80b3b3e937ae5b21c1e ?
|
|
||||||
html4/content-box_with_radius.htm 2f4c470675a768689216adb298cc46282ebc6f2f ?
|
|
||||||
xhtml1/content-box_with_radius.xht 2f4c470675a768689216adb298cc46282ebc6f2f ?
|
|
||||||
html4/content-box_with_size.htm 8c10fa095529249067aed2a490ce5effa695f546 ?
|
|
||||||
xhtml1/content-box_with_size.xht 8c10fa095529249067aed2a490ce5effa695f546 ?
|
|
||||||
html4/css-border-radius-001.htm d028c67ed2dc8acc8b5b173d61a0ec37afd93876 ?
|
html4/css-border-radius-001.htm d028c67ed2dc8acc8b5b173d61a0ec37afd93876 ?
|
||||||
xhtml1/css-border-radius-001.xht d028c67ed2dc8acc8b5b173d61a0ec37afd93876 ?
|
xhtml1/css-border-radius-001.xht d028c67ed2dc8acc8b5b173d61a0ec37afd93876 ?
|
||||||
html4/css-border-radius-002.htm f9fa09eb62c25f262d3e33fbd9574c5eb8cf2b52 ?
|
html4/css-border-radius-002.htm f9fa09eb62c25f262d3e33fbd9574c5eb8cf2b52 ?
|
||||||
|
@ -743,14 +751,30 @@ html4/none-as-image-layer.htm 3c26f26e7017ddf4e3e5ec05eed3e1eb5eb4ab42 ?
|
||||||
xhtml1/none-as-image-layer.xht 3c26f26e7017ddf4e3e5ec05eed3e1eb5eb4ab42 ?
|
xhtml1/none-as-image-layer.xht 3c26f26e7017ddf4e3e5ec05eed3e1eb5eb4ab42 ?
|
||||||
html4/order-of-images.htm 4492b601c1313612451da01db8faa8d04828f558 ?
|
html4/order-of-images.htm 4492b601c1313612451da01db8faa8d04828f558 ?
|
||||||
xhtml1/order-of-images.xht 4492b601c1313612451da01db8faa8d04828f558 ?
|
xhtml1/order-of-images.xht 4492b601c1313612451da01db8faa8d04828f558 ?
|
||||||
html4/padding-box.htm 30c8e1826b34e6b2b132ee8e6c0765138d479761 ?
|
html4/origin-border-box.htm bf8c13bebca3503411c71f5216c7f87badbb7b00 ?
|
||||||
xhtml1/padding-box.xht 30c8e1826b34e6b2b132ee8e6c0765138d479761 ?
|
xhtml1/origin-border-box.xht bf8c13bebca3503411c71f5216c7f87badbb7b00 ?
|
||||||
html4/padding-box_with_position.htm d207e5c29e417b86ead2cf93e6d4715075674f52 ?
|
html4/origin-border-box_with_position.htm d86f6224ab5d6ca2cd94f12303f2797ca6a64979 ?
|
||||||
xhtml1/padding-box_with_position.xht d207e5c29e417b86ead2cf93e6d4715075674f52 ?
|
xhtml1/origin-border-box_with_position.xht d86f6224ab5d6ca2cd94f12303f2797ca6a64979 ?
|
||||||
html4/padding-box_with_radius.htm d3f47dae7fd8e1b0216994fad247e29fa9e90a93 ?
|
html4/origin-border-box_with_radius.htm 8620ce8bcd4c2321f8323f6d3cf6e27ebcad74d2 ?
|
||||||
xhtml1/padding-box_with_radius.xht d3f47dae7fd8e1b0216994fad247e29fa9e90a93 ?
|
xhtml1/origin-border-box_with_radius.xht 8620ce8bcd4c2321f8323f6d3cf6e27ebcad74d2 ?
|
||||||
html4/padding-box_with_size.htm 02a4f955189fc9cabbd43cb29870f01b6628644b ?
|
html4/origin-border-box_with_size.htm 97f4cc2e9d0d88759264280dfc3cdd0733490bae ?
|
||||||
xhtml1/padding-box_with_size.xht 02a4f955189fc9cabbd43cb29870f01b6628644b ?
|
xhtml1/origin-border-box_with_size.xht 97f4cc2e9d0d88759264280dfc3cdd0733490bae ?
|
||||||
|
html4/origin-content-box.htm 7988aefacbaa5637c6c10818ead6ece5efa43500 ?
|
||||||
|
xhtml1/origin-content-box.xht 7988aefacbaa5637c6c10818ead6ece5efa43500 ?
|
||||||
|
html4/origin-content-box_with_position.htm b80b9d7131ba56ce90c3ee671feef8cec0084b11 ?
|
||||||
|
xhtml1/origin-content-box_with_position.xht b80b9d7131ba56ce90c3ee671feef8cec0084b11 ?
|
||||||
|
html4/origin-content-box_with_radius.htm f9e5c53f3ed47f7f29bc25a86380f460e5a3b34c ?
|
||||||
|
xhtml1/origin-content-box_with_radius.xht f9e5c53f3ed47f7f29bc25a86380f460e5a3b34c ?
|
||||||
|
html4/origin-content-box_with_size.htm 9f11873b405cf76f6cf0182218a3fe73f1691b4d ?
|
||||||
|
xhtml1/origin-content-box_with_size.xht 9f11873b405cf76f6cf0182218a3fe73f1691b4d ?
|
||||||
|
html4/origin-padding-box.htm 88ed81d132c4eea13e35b33f81fb59c43b900089 ?
|
||||||
|
xhtml1/origin-padding-box.xht 88ed81d132c4eea13e35b33f81fb59c43b900089 ?
|
||||||
|
html4/origin-padding-box_with_position.htm 784c1ded55af7abac2e1c45e5f8cfbbe3d3ec788 ?
|
||||||
|
xhtml1/origin-padding-box_with_position.xht 784c1ded55af7abac2e1c45e5f8cfbbe3d3ec788 ?
|
||||||
|
html4/origin-padding-box_with_radius.htm 71a7bef86157c393a99035e3cd63bfd5a5bc0615 ?
|
||||||
|
xhtml1/origin-padding-box_with_radius.xht 71a7bef86157c393a99035e3cd63bfd5a5bc0615 ?
|
||||||
|
html4/origin-padding-box_with_size.htm 1c53596da91331bbe9cb94e21135a6893352a266 ?
|
||||||
|
xhtml1/origin-padding-box_with_size.xht 1c53596da91331bbe9cb94e21135a6893352a266 ?
|
||||||
html4/scroll-positioned-multiple-background-images.htm 9963b10722dbb38a5271823e94832f5ff151116a ?
|
html4/scroll-positioned-multiple-background-images.htm 9963b10722dbb38a5271823e94832f5ff151116a ?
|
||||||
xhtml1/scroll-positioned-multiple-background-images.xht 9963b10722dbb38a5271823e94832f5ff151116a ?
|
xhtml1/scroll-positioned-multiple-background-images.xht 9963b10722dbb38a5271823e94832f5ff151116a ?
|
||||||
html4/tall--auto--omitted-width-percent-height.htm 6772e61cb81749f6bdd8188a3c42d6106f0aba4a ?
|
html4/tall--auto--omitted-width-percent-height.htm 6772e61cb81749f6bdd8188a3c42d6106f0aba4a ?
|
||||||
|
|
|
@ -213,10 +213,6 @@ border-bottom-right-radius-011 reference/border-radius-001-ref Borders. Border-b
|
||||||
border-bottom-right-radius-012 Borders. Border-bottom-right-radius using two length values: 0.5in 10mm http://www.w3.org/TR/css3-background/#the-border-radius 1abe42ee07f3a8207c0e40ffe53aaee66f4a0b7a `Nokia`<http://www.nokia.com/> To verify border-bottom-right-radius property set with two values (with different units), works as expected
|
border-bottom-right-radius-012 Borders. Border-bottom-right-radius using two length values: 0.5in 10mm http://www.w3.org/TR/css3-background/#the-border-radius 1abe42ee07f3a8207c0e40ffe53aaee66f4a0b7a `Nokia`<http://www.nokia.com/> To verify border-bottom-right-radius property set with two values (with different units), works as expected
|
||||||
border-bottom-right-radius-013 Borders. Border-bottom-right-radius using two length values: 40pt 2pc http://www.w3.org/TR/css3-background/#the-border-radius 033344f1f722b102330a32347d6655e2d6d24067 `Nokia`<http://www.nokia.com/> To verify border-bottom-right-radius property set with two values (with different units), works fine
|
border-bottom-right-radius-013 Borders. Border-bottom-right-radius using two length values: 40pt 2pc http://www.w3.org/TR/css3-background/#the-border-radius 033344f1f722b102330a32347d6655e2d6d24067 `Nokia`<http://www.nokia.com/> To verify border-bottom-right-radius property set with two values (with different units), works fine
|
||||||
border-bottom-right-radius-014 reference/border-radius-001-ref Borders. Border-bottom-right-radius using two length values: 50px -25px http://www.w3.org/TR/css3-background/#the-border-radius 344be3e376e814808318eebb489a61e4ca02409c `Nokia`<http://www.nokia.com/> To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded.
|
border-bottom-right-radius-014 reference/border-radius-001-ref Borders. Border-bottom-right-radius using two length values: 50px -25px http://www.w3.org/TR/css3-background/#the-border-radius 344be3e376e814808318eebb489a61e4ca02409c `Nokia`<http://www.nokia.com/> To verify if one length value is negative in border-bottom-right-radius, then the corner is not rounded.
|
||||||
border-box background-clip:border-box image http://www.w3.org/TR/css3-background/#the-background-clip e94f9369378951394fed22891b1fd01bafca039d `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
|
||||||
border-box_with_position background-clip:border-box & background-position image http://www.w3.org/TR/css3-background/#the-background-clip a3dc11dbc05b0b4b21dea6b725192f859b96c6bb `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
|
||||||
border-box_with_radius background-clip:border-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-clip 00f7bc1670c0484c8b56f064bcc82d867e192b50 `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
|
||||||
border-box_with_size background-clip:border-box & background-size image http://www.w3.org/TR/css3-background/#the-background-clip 279c25b383ffc1e60f889ea077f0979bf18d3ca8 `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
|
||||||
border-color_transparent border-clip_border-box http://www.w3.org/TR/css3-background/#the-border-color b49637ff5a553ca66e7fba67e1a533c18c06fdda `Dong An`<andong135@126.com> Test transparent of border-color
|
border-color_transparent border-clip_border-box http://www.w3.org/TR/css3-background/#the-border-color b49637ff5a553ca66e7fba67e1a533c18c06fdda `Dong An`<andong135@126.com> Test transparent of border-color
|
||||||
border-image-017 reference/ref-filled-green-100px-square border-image shorthand - with border-image-slice <percentage> and border-image-width <percentage> image http://www.w3.org/TR/css3-background/#the-border-image d989efaaaf69da114fdf8d622cda3827d7b6048b `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
|
border-image-017 reference/ref-filled-green-100px-square border-image shorthand - with border-image-slice <percentage> and border-image-width <percentage> image http://www.w3.org/TR/css3-background/#the-border-image d989efaaaf69da114fdf8d622cda3827d7b6048b `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> Percentage values for 'border-image-slice' are relative to the size of the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
|
||||||
border-image-018 reference/ref-filled-green-100px-square border-image shorthand - with border-image-slice <number> and border-image-width <percentage> image http://www.w3.org/TR/css3-background/#the-border-image c7c3fbd31a77382c5eb0c92e98d0a4d5d659c41f `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
|
border-image-018 reference/ref-filled-green-100px-square border-image shorthand - with border-image-slice <number> and border-image-width <percentage> image http://www.w3.org/TR/css3-background/#the-border-image c7c3fbd31a77382c5eb0c92e98d0a4d5d659c41f `Gérard Talbot`<http://www.gtalbot.org/BrowserBugsSection/css21testsuite/> Number values for 'border-image-slice' are pixels in the image: the width of the image for the horizontal (left and right) offsets, the height for vertical (top and bottom) offsets. 'border-image-slice' specifies inward offsets from the top, right, bottom, and left edges (in that order) of the image. In this test, the image serving as 'border-image-source' is a 100px by 100px image which has 5px of green at the top, 10px of green on the right, 15px of green at the bottom and 20px of green at the left; the remaining center (which has a width of 70px and a height of 80px) is all red.
|
||||||
|
@ -344,11 +340,19 @@ box-shadow-inset-without-border-radius reference/box-shadow-inset-without-border
|
||||||
box-shadow-outset-spread-without-border-radius reference/box-shadow-outset-spread-without-border-radius box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow 58ab18a345d6bbdc4b80849e1b92d15fb8015904 `Zhang Xiaochong`<mailto:joy.xczhang@gmail.com> outset spread box-shadow should show shadow.
|
box-shadow-outset-spread-without-border-radius reference/box-shadow-outset-spread-without-border-radius box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow 58ab18a345d6bbdc4b80849e1b92d15fb8015904 `Zhang Xiaochong`<mailto:joy.xczhang@gmail.com> outset spread box-shadow should show shadow.
|
||||||
box-shadow-outset-without-border-radius reference/box-shadow-outset-without-border-radius box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow b1f52411881fa34bdc4a4e100f2d9792478bb8a6 `Zhang Xiaochong`<mailto:joy.xczhang@gmail.com> box-shadow should show shadow.
|
box-shadow-outset-without-border-radius reference/box-shadow-outset-without-border-radius box-shadow http://www.w3.org/TR/css3-background/#the-box-shadow b1f52411881fa34bdc4a4e100f2d9792478bb8a6 `Zhang Xiaochong`<mailto:joy.xczhang@gmail.com> box-shadow should show shadow.
|
||||||
box-shadow-syntax-001 Box Shadow Syntax: Reordering Components http://www.w3.org/TR/css3-background/#the-box-shadow adc70c5f810a3182f5aad7255f9dd7ec5d35f977 `Elika J. Etemad`<http://fantasai.inkedblade.net/contact> Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent.
|
box-shadow-syntax-001 Box Shadow Syntax: Reordering Components http://www.w3.org/TR/css3-background/#the-box-shadow adc70c5f810a3182f5aad7255f9dd7ec5d35f977 `Elika J. Etemad`<http://fantasai.inkedblade.net/contact> Box shadow color, inset, and length parameters can be mixed in any order, but lengths must stay adjacent.
|
||||||
|
clip-border-box background-clip:border-box image http://www.w3.org/TR/css3-background/#the-background-clip e94f9369378951394fed22891b1fd01bafca039d `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
||||||
|
clip-border-box_with_position background-clip:border-box & background-position image http://www.w3.org/TR/css3-background/#the-background-clip a3dc11dbc05b0b4b21dea6b725192f859b96c6bb `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
||||||
|
clip-border-box_with_radius background-clip:border-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-clip 00f7bc1670c0484c8b56f064bcc82d867e192b50 `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
||||||
|
clip-border-box_with_size background-clip:border-box & background-size image http://www.w3.org/TR/css3-background/#the-background-clip 279c25b383ffc1e60f889ea077f0979bf18d3ca8 `finscn`<mail:finscn@gmail.com> border-box : The background is painted within (clipped to) the border box.
|
||||||
|
clip-content-box background-clip:content-box image http://www.w3.org/TR/css3-background/#the-background-clip 930d3ca0bda1025eea22f22d8ec20d53c4a2175b `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
||||||
|
clip-content-box_with_position background-clip:content-box & background-position image http://www.w3.org/TR/css3-background/#the-background-clip 5ced35b8928414a87a38b80b3b3e937ae5b21c1e `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
||||||
|
clip-content-box_with_radius background-clip:content-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-clip 2f4c470675a768689216adb298cc46282ebc6f2f `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
||||||
|
clip-content-box_with_size background-clip:content-box & background-size image http://www.w3.org/TR/css3-background/#the-background-clip 8c10fa095529249067aed2a490ce5effa695f546 `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
||||||
|
clip-padding-box background-clip:padding-box image http://www.w3.org/TR/css3-background/#the-background-clip 30c8e1826b34e6b2b132ee8e6c0765138d479761 `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
||||||
|
clip-padding-box_with_position background-clip:padding-box & background-position image http://www.w3.org/TR/css3-background/#the-background-clip d207e5c29e417b86ead2cf93e6d4715075674f52 `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
||||||
|
clip-padding-box_with_radius background-clip:padding-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-clip d3f47dae7fd8e1b0216994fad247e29fa9e90a93 `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
||||||
|
clip-padding-box_with_size background-clip:padding-box & background-size image http://www.w3.org/TR/css3-background/#the-background-clip 02a4f955189fc9cabbd43cb29870f01b6628644b `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
||||||
color-behind-images Background color is drawn behind images http://www.w3.org/TR/css3-background/#the-background-color f0a536f5c70d50863079b17059b4bb1b94316f2f `Microsoft`<http://www.microsoft.com/> Background color is drawn behind any number of background images.
|
color-behind-images Background color is drawn behind images http://www.w3.org/TR/css3-background/#the-background-color f0a536f5c70d50863079b17059b4bb1b94316f2f `Microsoft`<http://www.microsoft.com/> Background color is drawn behind any number of background images.
|
||||||
content-box background-clip:content-box image http://www.w3.org/TR/css3-background/#the-background-clip 930d3ca0bda1025eea22f22d8ec20d53c4a2175b `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
|
||||||
content-box_with_position background-clip:content-box & background-position image http://www.w3.org/TR/css3-background/#the-background-clip 5ced35b8928414a87a38b80b3b3e937ae5b21c1e `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
|
||||||
content-box_with_radius background-clip:content-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-clip 2f4c470675a768689216adb298cc46282ebc6f2f `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
|
||||||
content-box_with_size background-clip:content-box & background-size image http://www.w3.org/TR/css3-background/#the-background-clip 8c10fa095529249067aed2a490ce5effa695f546 `finscn`<mail:finscn@gmail.com> content-box : The background is painted within (clipped to) the content box.
|
|
||||||
css-border-radius-001 reference/css-border-radius-ref-001 CSS border-radius Test http://www.w3.org/TR/css3-background/#the-border-radius d028c67ed2dc8acc8b5b173d61a0ec37afd93876 `tmd`<mailto:weisong4413@126.com>
|
css-border-radius-001 reference/css-border-radius-ref-001 CSS border-radius Test http://www.w3.org/TR/css3-background/#the-border-radius d028c67ed2dc8acc8b5b173d61a0ec37afd93876 `tmd`<mailto:weisong4413@126.com>
|
||||||
css-border-radius-002 reference/css-border-radius-ref-002 CSS border-radius Test http://www.w3.org/TR/css3-background/#the-border-radius f9fa09eb62c25f262d3e33fbd9574c5eb8cf2b52 `tmd`<mailto:weisong4413@126.com> if there is more then one graph and one color
|
css-border-radius-002 reference/css-border-radius-ref-002 CSS border-radius Test http://www.w3.org/TR/css3-background/#the-border-radius f9fa09eb62c25f262d3e33fbd9574c5eb8cf2b52 `tmd`<mailto:weisong4413@126.com> if there is more then one graph and one color
|
||||||
css-box-shadow-001 reference/css-box-shadow-ref-001 CSS box-shadow Test http://www.w3.org/TR/css3-background/#the-box-shadow,http://www.w3.org/TR/css3-background/#the-border-radius 5b797441df20c4cc70e3073544e2df1026946b69 `tmd`<mailto:weisong4413@126.com>
|
css-box-shadow-001 reference/css-box-shadow-ref-001 CSS box-shadow Test http://www.w3.org/TR/css3-background/#the-box-shadow,http://www.w3.org/TR/css3-background/#the-border-radius 5b797441df20c4cc70e3073544e2df1026946b69 `tmd`<mailto:weisong4413@126.com>
|
||||||
|
@ -369,10 +373,18 @@ css3-box-shadow reference/css3-box-shadow-ref the test passes if adding one or m
|
||||||
diagonal-percentage-vector-background reference/diagonal-percentage-vector-background-ref scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal svg http://www.w3.org/TR/css3-background/#the-background-size,http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing,http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute 181f4bf8b33ab85eaf3937a2f0f212eb5437fab3 `Jeff Walden`<http://whereswalden.com/>
|
diagonal-percentage-vector-background reference/diagonal-percentage-vector-background-ref scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal svg http://www.w3.org/TR/css3-background/#the-background-size,http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing,http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute 181f4bf8b33ab85eaf3937a2f0f212eb5437fab3 `Jeff Walden`<http://whereswalden.com/>
|
||||||
none-as-image-layer None counts as an image layer http://www.w3.org/TR/css3-background/#the-background-image 3c26f26e7017ddf4e3e5ec05eed3e1eb5eb4ab42 `Microsoft`<http://www.microsoft.com/> 'Background-image: none' counts as an image layer but draws nothing.
|
none-as-image-layer None counts as an image layer http://www.w3.org/TR/css3-background/#the-background-image 3c26f26e7017ddf4e3e5ec05eed3e1eb5eb4ab42 `Microsoft`<http://www.microsoft.com/> 'Background-image: none' counts as an image layer but draws nothing.
|
||||||
order-of-images Order of images http://www.w3.org/TR/css3-background/#the-background-image 4492b601c1313612451da01db8faa8d04828f558 `Microsoft`<http://www.microsoft.com/> Background images are listed in order, with the first image being rendered on top of all the other images, and so on.
|
order-of-images Order of images http://www.w3.org/TR/css3-background/#the-background-image 4492b601c1313612451da01db8faa8d04828f558 `Microsoft`<http://www.microsoft.com/> Background images are listed in order, with the first image being rendered on top of all the other images, and so on.
|
||||||
padding-box background-clip:padding-box image http://www.w3.org/TR/css3-background/#the-background-clip 30c8e1826b34e6b2b132ee8e6c0765138d479761 `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
origin-border-box background-origin:border-box image http://www.w3.org/TR/css3-background/#the-background-origin bf8c13bebca3503411c71f5216c7f87badbb7b00 `finscn`<mail:finscn@gmail.com> border-box : The position is relative to the border box.
|
||||||
padding-box_with_position background-clip:padding-box & background-position image http://www.w3.org/TR/css3-background/#the-background-clip d207e5c29e417b86ead2cf93e6d4715075674f52 `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
origin-border-box_with_position background-origin:border-box & background-position image http://www.w3.org/TR/css3-background/#the-background-origin d86f6224ab5d6ca2cd94f12303f2797ca6a64979 `finscn`<mail:finscn@gmail.com> border-box : The position is relative to the border box.
|
||||||
padding-box_with_radius background-clip:padding-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-clip d3f47dae7fd8e1b0216994fad247e29fa9e90a93 `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
origin-border-box_with_radius background-origin:border-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-origin 8620ce8bcd4c2321f8323f6d3cf6e27ebcad74d2 `finscn`<mail:finscn@gmail.com> border-box : The position is relative to the border box.
|
||||||
padding-box_with_size background-clip:padding-box & background-size image http://www.w3.org/TR/css3-background/#the-background-clip 02a4f955189fc9cabbd43cb29870f01b6628644b `finscn`<mail:finscn@gmail.com> padding-box : The background is painted within (clipped to) the padding box
|
origin-border-box_with_size background-origin:border-box & background-size image http://www.w3.org/TR/css3-background/#the-background-origin 97f4cc2e9d0d88759264280dfc3cdd0733490bae `finscn`<mail:finscn@gmail.com> border-box : The position is relative to the border box.
|
||||||
|
origin-content-box background-origin:content-box image http://www.w3.org/TR/css3-background/#the-background-origin 7988aefacbaa5637c6c10818ead6ece5efa43500 `finscn`<mail:finscn@gmail.com> content-box : The position is relative to the content box.
|
||||||
|
origin-content-box_with_position background-origin:content-box & background-position image http://www.w3.org/TR/css3-background/#the-background-origin b80b9d7131ba56ce90c3ee671feef8cec0084b11 `finscn`<mail:finscn@gmail.com> content-box : The position is relative to the content box.
|
||||||
|
origin-content-box_with_radius background-origin:content-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-origin f9e5c53f3ed47f7f29bc25a86380f460e5a3b34c `finscn`<mail:finscn@gmail.com> content-box : The position is relative to the content box.
|
||||||
|
origin-content-box_with_size background-origin:content-box & background-size image http://www.w3.org/TR/css3-background/#the-background-origin 9f11873b405cf76f6cf0182218a3fe73f1691b4d `finscn`<mail:finscn@gmail.com> content-box : The position is relative to the content box.
|
||||||
|
origin-padding-box background-origin:padding-box image http://www.w3.org/TR/css3-background/#the-background-origin 88ed81d132c4eea13e35b33f81fb59c43b900089 `finscn`<mail:finscn@gmail.com> 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.)
|
||||||
|
origin-padding-box_with_position background-origin:padding-box & background-position image http://www.w3.org/TR/css3-background/#the-background-origin 784c1ded55af7abac2e1c45e5f8cfbbe3d3ec788 `finscn`<mail:finscn@gmail.com> 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.)
|
||||||
|
origin-padding-box_with_radius background-origin:padding-box & border-radius image http://www.w3.org/TR/css3-background/#the-background-origin 71a7bef86157c393a99035e3cd63bfd5a5bc0615 `finscn`<mail:finscn@gmail.com> 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.)
|
||||||
|
origin-padding-box_with_size background-origin:padding-box & background-size image http://www.w3.org/TR/css3-background/#the-background-origin 1c53596da91331bbe9cb94e21135a6893352a266 `finscn`<mail:finscn@gmail.com> 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.)
|
||||||
scroll-positioned-multiple-background-images reference/60x60-green-background Scroll multiple background images that are positioned dom,image,scroll http://www.w3.org/TR/css3-background/#layering 9963b10722dbb38a5271823e94832f5ff151116a `Google`<http://www.google.com/> When multiple background images are positioned at (0px, 0px) and (0, 60px) of each 60px by 60px in a scrollable element, and the element is scrolled to (0, 60px), only the second image is shown.
|
scroll-positioned-multiple-background-images reference/60x60-green-background Scroll multiple background images that are positioned dom,image,scroll http://www.w3.org/TR/css3-background/#layering 9963b10722dbb38a5271823e94832f5ff151116a `Google`<http://www.google.com/> When multiple background images are positioned at (0px, 0px) and (0, 60px) of each 60px by 60px in a scrollable element, and the element is scrolled to (0, 60px), only the second image is shown.
|
||||||
tall--auto--omitted-width-percent-height background-size: auto; for omitted-width-percent-height.svg svg http://www.w3.org/TR/css3-background/#the-background-size,http://www.w3.org/TR/SVG/coords.html,http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing,http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute 6772e61cb81749f6bdd8188a3c42d6106f0aba4a `Jeff Walden`<http://whereswalden.com/>
|
tall--auto--omitted-width-percent-height background-size: auto; for omitted-width-percent-height.svg svg http://www.w3.org/TR/css3-background/#the-background-size,http://www.w3.org/TR/SVG/coords.html,http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing,http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute 6772e61cb81749f6bdd8188a3c42d6106f0aba4a `Jeff Walden`<http://whereswalden.com/>
|
||||||
tall--auto--percent-width-nonpercent-height background-size: auto; for percent-width-nonpercent-height.svg svg http://www.w3.org/TR/css3-background/#the-background-size,http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing,http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute f3c6bcf30bb2d6a3af78b9a841ca8176c37d7a4d `Jeff Walden`<http://whereswalden.com/>
|
tall--auto--percent-width-nonpercent-height background-size: auto; for percent-width-nonpercent-height.svg svg http://www.w3.org/TR/css3-background/#the-background-size,http://www.w3.org/TR/SVG/coords.html#IntrinsicSizing,http://www.w3.org/TR/SVG/coords.html#PreserveAspectRatioAttribute f3c6bcf30bb2d6a3af78b9a841ca8176c37d7a4d `Jeff Walden`<http://whereswalden.com/>
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
<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%">
|
<table width="100%">
|
||||||
<col id="test-column"></col>
|
<col id="test-column"></col>
|
||||||
<col id="refs-column"></col>
|
<col id="refs-column"></col>
|
||||||
|
@ -1168,9 +1168,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box-3.7" class="image">
|
<tr id="clip-border-box-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box.xht">border-box</a></td>
|
<a href="clip-border-box.xht">clip-border-box</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box
|
<td>background-clip:border-box
|
||||||
|
@ -1179,9 +1179,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_position-3.7" class="image">
|
<tr id="clip-border-box_with_position-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box_with_position.xht">border-box_with_position</a></td>
|
<a href="clip-border-box_with_position.xht">clip-border-box_with_position</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & background-position
|
<td>background-clip:border-box & background-position
|
||||||
|
@ -1190,9 +1190,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_radius-3.7" class="image">
|
<tr id="clip-border-box_with_radius-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box_with_radius.xht">border-box_with_radius</a></td>
|
<a href="clip-border-box_with_radius.xht">clip-border-box_with_radius</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & border-radius
|
<td>background-clip:border-box & border-radius
|
||||||
|
@ -1201,9 +1201,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_size-3.7" class="image">
|
<tr id="clip-border-box_with_size-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box_with_size.xht">border-box_with_size</a></td>
|
<a href="clip-border-box_with_size.xht">clip-border-box_with_size</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & background-size
|
<td>background-clip:border-box & background-size
|
||||||
|
@ -1212,9 +1212,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box-3.7" class="image">
|
<tr id="clip-content-box-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box.xht">content-box</a></td>
|
<a href="clip-content-box.xht">clip-content-box</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box
|
<td>background-clip:content-box
|
||||||
|
@ -1223,9 +1223,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_position-3.7" class="image">
|
<tr id="clip-content-box_with_position-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box_with_position.xht">content-box_with_position</a></td>
|
<a href="clip-content-box_with_position.xht">clip-content-box_with_position</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & background-position
|
<td>background-clip:content-box & background-position
|
||||||
|
@ -1234,9 +1234,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_radius-3.7" class="image">
|
<tr id="clip-content-box_with_radius-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box_with_radius.xht">content-box_with_radius</a></td>
|
<a href="clip-content-box_with_radius.xht">clip-content-box_with_radius</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & border-radius
|
<td>background-clip:content-box & border-radius
|
||||||
|
@ -1245,9 +1245,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_size-3.7" class="image">
|
<tr id="clip-content-box_with_size-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box_with_size.xht">content-box_with_size</a></td>
|
<a href="clip-content-box_with_size.xht">clip-content-box_with_size</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & background-size
|
<td>background-clip:content-box & background-size
|
||||||
|
@ -1256,6 +1256,50 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="clip-padding-box-3.7" class="image">
|
||||||
|
<td>
|
||||||
|
<a href="clip-padding-box.xht">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.xht">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.xht">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.xht">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="">
|
<tr id="css3-background-clip-border-box-3.7" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="css3-background-clip-border-box.xht">css3-background-clip-border-box</a></td>
|
<a href="css3-background-clip-border-box.xht">css3-background-clip-border-box</a></td>
|
||||||
|
@ -1280,50 +1324,6 @@
|
||||||
<td>background clip property with value padding-box
|
<td>background clip property with value padding-box
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="padding-box-3.7" class="image">
|
|
||||||
<td>
|
|
||||||
<a href="padding-box.xht">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.xht">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.xht">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.xht">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>
|
||||||
<tbody id="s3.7.#background-clip">
|
<tbody id="s3.7.#background-clip">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
@ -1347,7 +1347,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.8">+</a>
|
<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>
|
<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">
|
<tr id="background-origin-001-3.8" class="dom script">
|
||||||
<td>
|
<td>
|
||||||
<a href="background-origin-001.xht">background-origin-001</a></td>
|
<a href="background-origin-001.xht">background-origin-001</a></td>
|
||||||
|
@ -1482,6 +1482,138 @@
|
||||||
<td>background origin property with value content-box
|
<td>background origin property with value content-box
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="origin-border-box-3.8" class="image">
|
||||||
|
<td>
|
||||||
|
<a href="origin-border-box.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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>
|
||||||
<tbody id="s3.8.#background-origin">
|
<tbody id="s3.8.#background-origin">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
|
@ -0,0 +1,69 @@
|
||||||
|
<!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>
|
||||||
|
<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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>
|
||||||
|
<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 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 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 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 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 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 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">
|
<tbody id="s3">
|
||||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||||
Backgrounds</a></th>
|
Backgrounds</a></th>
|
||||||
<td>(381 Tests)</td></tr>
|
<td>(393 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
<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%">
|
<table width="100%">
|
||||||
<col id="test-column"></col>
|
<col id="test-column"></col>
|
||||||
<col id="refs-column"></col>
|
<col id="refs-column"></col>
|
||||||
|
@ -1168,9 +1168,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box-3.7" class="image">
|
<tr id="clip-border-box-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box.xht">border-box</a></td>
|
<a href="clip-border-box.xht">clip-border-box</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box
|
<td>background-clip:border-box
|
||||||
|
@ -1179,9 +1179,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_position-3.7" class="image">
|
<tr id="clip-border-box_with_position-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box_with_position.xht">border-box_with_position</a></td>
|
<a href="clip-border-box_with_position.xht">clip-border-box_with_position</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & background-position
|
<td>background-clip:border-box & background-position
|
||||||
|
@ -1190,9 +1190,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_radius-3.7" class="image">
|
<tr id="clip-border-box_with_radius-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box_with_radius.xht">border-box_with_radius</a></td>
|
<a href="clip-border-box_with_radius.xht">clip-border-box_with_radius</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & border-radius
|
<td>background-clip:border-box & border-radius
|
||||||
|
@ -1201,9 +1201,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="border-box_with_size-3.7" class="image">
|
<tr id="clip-border-box_with_size-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="border-box_with_size.xht">border-box_with_size</a></td>
|
<a href="clip-border-box_with_size.xht">clip-border-box_with_size</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:border-box & background-size
|
<td>background-clip:border-box & background-size
|
||||||
|
@ -1212,9 +1212,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box-3.7" class="image">
|
<tr id="clip-content-box-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box.xht">content-box</a></td>
|
<a href="clip-content-box.xht">clip-content-box</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box
|
<td>background-clip:content-box
|
||||||
|
@ -1223,9 +1223,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_position-3.7" class="image">
|
<tr id="clip-content-box_with_position-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box_with_position.xht">content-box_with_position</a></td>
|
<a href="clip-content-box_with_position.xht">clip-content-box_with_position</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & background-position
|
<td>background-clip:content-box & background-position
|
||||||
|
@ -1234,9 +1234,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_radius-3.7" class="image">
|
<tr id="clip-content-box_with_radius-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box_with_radius.xht">content-box_with_radius</a></td>
|
<a href="clip-content-box_with_radius.xht">clip-content-box_with_radius</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & border-radius
|
<td>background-clip:content-box & border-radius
|
||||||
|
@ -1245,9 +1245,9 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="content-box_with_size-3.7" class="image">
|
<tr id="clip-content-box_with_size-3.7" class="image">
|
||||||
<td>
|
<td>
|
||||||
<a href="content-box_with_size.xht">content-box_with_size</a></td>
|
<a href="clip-content-box_with_size.xht">clip-content-box_with_size</a></td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
||||||
<td>background-clip:content-box & background-size
|
<td>background-clip:content-box & background-size
|
||||||
|
@ -1256,6 +1256,50 @@
|
||||||
</ul>
|
</ul>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="clip-padding-box-3.7" class="image">
|
||||||
|
<td>
|
||||||
|
<a href="clip-padding-box.xht">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.xht">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.xht">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.xht">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="">
|
<tr id="css3-background-clip-border-box-3.7" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="css3-background-clip-border-box.xht">css3-background-clip-border-box</a></td>
|
<a href="css3-background-clip-border-box.xht">css3-background-clip-border-box</a></td>
|
||||||
|
@ -1280,50 +1324,6 @@
|
||||||
<td>background clip property with value padding-box
|
<td>background clip property with value padding-box
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="padding-box-3.7" class="image">
|
|
||||||
<td>
|
|
||||||
<a href="padding-box.xht">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.xht">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.xht">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.xht">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>
|
||||||
<tbody id="s3.7.#background-clip">
|
<tbody id="s3.7.#background-clip">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
@ -1347,7 +1347,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s3.8">+</a>
|
<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>
|
<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">
|
<tr id="background-origin-001-3.8" class="dom script">
|
||||||
<td>
|
<td>
|
||||||
<a href="background-origin-001.xht">background-origin-001</a></td>
|
<a href="background-origin-001.xht">background-origin-001</a></td>
|
||||||
|
@ -1482,6 +1482,138 @@
|
||||||
<td>background origin property with value content-box
|
<td>background origin property with value content-box
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr id="origin-border-box-3.8" class="image">
|
||||||
|
<td>
|
||||||
|
<a href="origin-border-box.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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.xht">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>
|
||||||
<tbody id="s3.8.#background-origin">
|
<tbody id="s3.8.#background-origin">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
|
@ -0,0 +1,69 @@
|
||||||
|
<!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>
|
||||||
|
<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 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 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 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 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 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 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 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 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 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 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 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 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 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 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 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>
|
||||||
|
<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 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 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 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 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 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 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">
|
<tbody id="s3">
|
||||||
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
<tr><th><a href="chapter-3.xht">Chapter 3 -
|
||||||
Backgrounds</a></th>
|
Backgrounds</a></th>
|
||||||
<td>(381 Tests)</td></tr>
|
<td>(393 Tests)</td></tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s4">
|
<tbody id="s4">
|
||||||
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
<tr><th><a href="chapter-4.xht">Chapter 4 -
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
||||||
<h2>Flex Items (72 tests)</h2>
|
<h2>Flex Items (71 tests)</h2>
|
||||||
<table width="100%">
|
<table width="100%">
|
||||||
<col id="test-column">
|
<col id="test-column">
|
||||||
<col id="refs-column">
|
<col id="refs-column">
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
<a href="#s4">+</a>
|
<a href="#s4">+</a>
|
||||||
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4 Flex Items</a></th></tr>
|
<a href="https://www.w3.org/TR/css-flexbox-1/#flex-items">4 Flex Items</a></th></tr>
|
||||||
<!-- 24 tests -->
|
<!-- 23 tests -->
|
||||||
<tr id="flex-flexitem-childmargin-4" class="">
|
<tr id="flex-flexitem-childmargin-4" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="flex-flexitem-childmargin.htm">flex-flexitem-childmargin</a></td>
|
<a href="flex-flexitem-childmargin.htm">flex-flexitem-childmargin</a></td>
|
||||||
|
@ -62,20 +62,12 @@
|
||||||
<td>Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering
|
<td>Testing that we gracefully handle cases where two anonymous flex items become adjacent due to "order" reordering
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="flexbox-table-fixup-001a-4" class="">
|
<tr id="flexbox-table-fixup-001-4" class="">
|
||||||
<td>
|
<td>
|
||||||
<a href="flexbox-table-fixup-001a.htm">flexbox-table-fixup-001a</a></td>
|
<a href="flexbox-table-fixup-001.htm">flexbox-table-fixup-001</a></td>
|
||||||
<td><a href="reference/flexbox-table-fixup-001-ref.htm">=</a> </td>
|
<td><a href="reference/flexbox-table-fixup-001-ref.htm">=</a> </td>
|
||||||
<td></td>
|
<td></td>
|
||||||
<td>Testing that table cells in a flex container get an anonymous table wrapper that forms the flex item
|
<td>Testing that table cells in a flex container get blockified and each form their own flex item
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
<tr id="flexbox-table-fixup-001b-4" class="">
|
|
||||||
<td>
|
|
||||||
<a href="flexbox-table-fixup-001b.htm">flexbox-table-fixup-001b</a></td>
|
|
||||||
<td><a href="reference/flexbox-table-fixup-001-ref.htm">=</a> </td>
|
|
||||||
<td></td>
|
|
||||||
<td>Testing that the 'flex' shorthand has no effect on table cells in a flex container, since they aren't flex items
|
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr id="flexbox-whitespace-handling-001a-4" class="">
|
<tr id="flexbox-whitespace-handling-001a-4" class="">
|
||||||
|
|
|
@ -13,7 +13,7 @@
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
<h1>CSS Flexible Box Layout Module Level 1 CR Test Suite</h1>
|
||||||
<h2>Flex Layout Algorithm (62 tests)</h2>
|
<h2>Flex Layout Algorithm (68 tests)</h2>
|
||||||
<table width="100%">
|
<table width="100%">
|
||||||
<col id="test-column">
|
<col id="test-column">
|
||||||
<col id="refs-column">
|
<col id="refs-column">
|
||||||
|
@ -517,7 +517,23 @@
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s9.2.#hypothetical-main-size">
|
<tbody id="s9.2.#hypothetical-main-size">
|
||||||
<!-- 0 tests -->
|
<!-- 2 tests -->
|
||||||
|
<tr id="flex-aspect-ratio-img-column-001-9.2.#hypothetical-main-size" class="primary">
|
||||||
|
<td><strong>
|
||||||
|
<a href="flex-aspect-ratio-img-column-001.htm">flex-aspect-ratio-img-column-001</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>Aspect ratio handling of images
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr id="flex-aspect-ratio-img-row-001-9.2.#hypothetical-main-size" class="primary">
|
||||||
|
<td><strong>
|
||||||
|
<a href="flex-aspect-ratio-img-row-001.htm">flex-aspect-ratio-img-row-001</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>Aspect ratio handling of images
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s9.3">
|
<tbody id="s9.3">
|
||||||
<tr><th colspan="4" scope="rowgroup">
|
<tr><th colspan="4" scope="rowgroup">
|
||||||
|
@ -613,7 +629,51 @@
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s9.4.#algo-cross-item">
|
<tbody id="s9.4.#algo-cross-item">
|
||||||
<!-- 0 tests -->
|
<!-- 4 tests -->
|
||||||
|
<tr id="flex-aspect-ratio-img-column-002-9.4.#algo-cross-item" class="primary">
|
||||||
|
<td><strong>
|
||||||
|
<a href="flex-aspect-ratio-img-column-002.htm">flex-aspect-ratio-img-column-002</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>Aspect ratio handling of images
|
||||||
|
<ul class="assert">
|
||||||
|
<li>Test that we compute the correct aspect-ratio based cross size when a height is specified</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr id="flex-aspect-ratio-img-column-003-9.4.#algo-cross-item" class="primary">
|
||||||
|
<td><strong>
|
||||||
|
<a href="flex-aspect-ratio-img-column-003.htm">flex-aspect-ratio-img-column-003</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>Aspect ratio handling of images
|
||||||
|
<ul class="assert">
|
||||||
|
<li>Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr id="flex-aspect-ratio-img-row-002-9.4.#algo-cross-item" class="primary">
|
||||||
|
<td><strong>
|
||||||
|
<a href="flex-aspect-ratio-img-row-002.htm">flex-aspect-ratio-img-row-002</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>Aspect ratio handling of images
|
||||||
|
<ul class="assert">
|
||||||
|
<li>Test that we compute the correct aspect-ratio based cross size when a width is specified</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
<tr id="flex-aspect-ratio-img-row-003-9.4.#algo-cross-item" class="primary">
|
||||||
|
<td><strong>
|
||||||
|
<a href="flex-aspect-ratio-img-row-003.htm">flex-aspect-ratio-img-row-003</a></strong></td>
|
||||||
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
||||||
|
<td></td>
|
||||||
|
<td>Aspect ratio handling of images
|
||||||
|
<ul class="assert">
|
||||||
|
<li>Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified</li>
|
||||||
|
</ul>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
<tbody id="s9.4.#algo-cross-line">
|
<tbody id="s9.4.#algo-cross-line">
|
||||||
<!-- 0 tests -->
|
<!-- 0 tests -->
|
||||||
|
|
|
@ -31,19 +31,19 @@
|
||||||
<body>
|
<body>
|
||||||
<p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p>
|
<p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="item">i</div>
|
<div class="item">u</div>
|
||||||
<div class="item">9</div>
|
<div class="item">9</div>
|
||||||
<div class="item">f</div>
|
<div class="item">f</div>
|
||||||
<div class="item">6</div>
|
<div class="item">6</div>
|
||||||
<div class="item">c</div>
|
<div class="item">c</div>
|
||||||
<div class="item">3</div>
|
<div class="item">3</div>
|
||||||
<div class="item">h</div>
|
<div class="item">t</div>
|
||||||
<div class="item">8</div>
|
<div class="item">8</div>
|
||||||
<div class="item">e</div>
|
<div class="item">e</div>
|
||||||
<div class="item">5</div>
|
<div class="item">5</div>
|
||||||
<div class="item">b</div>
|
<div class="item">b</div>
|
||||||
<div class="item">2</div>
|
<div class="item">2</div>
|
||||||
<div class="item">g</div>
|
<div class="item">s</div>
|
||||||
<div class="item">7</div>
|
<div class="item">7</div>
|
||||||
<div class="item">d</div>
|
<div class="item">d</div>
|
||||||
<div class="item">4</div>
|
<div class="item">4</div>
|
||||||
|
|
|
@ -31,19 +31,19 @@
|
||||||
<body>
|
<body>
|
||||||
<p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p>
|
<p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="item">g</div>
|
<div class="item">s</div>
|
||||||
<div class="item">7</div>
|
<div class="item">7</div>
|
||||||
<div class="item">d</div>
|
<div class="item">d</div>
|
||||||
<div class="item">4</div>
|
<div class="item">4</div>
|
||||||
<div class="item">a</div>
|
<div class="item">a</div>
|
||||||
<div class="item">1</div>
|
<div class="item">1</div>
|
||||||
<div class="item">h</div>
|
<div class="item">t</div>
|
||||||
<div class="item">8</div>
|
<div class="item">8</div>
|
||||||
<div class="item">e</div>
|
<div class="item">e</div>
|
||||||
<div class="item">5</div>
|
<div class="item">5</div>
|
||||||
<div class="item">b</div>
|
<div class="item">b</div>
|
||||||
<div class="item">2</div>
|
<div class="item">2</div>
|
||||||
<div class="item">i</div>
|
<div class="item">u</div>
|
||||||
<div class="item">9</div>
|
<div class="item">9</div>
|
||||||
<div class="item">f</div>
|
<div class="item">f</div>
|
||||||
<div class="item">6</div>
|
<div class="item">6</div>
|
||||||
|
|
|
@ -28,7 +28,7 @@
|
||||||
<body>
|
<body>
|
||||||
<p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p>
|
<p>The test passes if you see a tall green box with pairs of the digits 1-9 and a-i listed right to left in two columns.</p>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="item">ghi</div>
|
<div class="item">stu</div>
|
||||||
<div class="item">789</div>
|
<div class="item">789</div>
|
||||||
<div class="item">def</div>
|
<div class="item">def</div>
|
||||||
<div class="item">456</div>
|
<div class="item">456</div>
|
||||||
|
|
|
@ -36,19 +36,19 @@
|
||||||
<div class="item">6</div>
|
<div class="item">6</div>
|
||||||
<div class="item">f</div>
|
<div class="item">f</div>
|
||||||
<div class="item">9</div>
|
<div class="item">9</div>
|
||||||
<div class="item">i</div>
|
<div class="item">u</div>
|
||||||
<div class="item">2</div>
|
<div class="item">2</div>
|
||||||
<div class="item">b</div>
|
<div class="item">b</div>
|
||||||
<div class="item">5</div>
|
<div class="item">5</div>
|
||||||
<div class="item">e</div>
|
<div class="item">e</div>
|
||||||
<div class="item">8</div>
|
<div class="item">8</div>
|
||||||
<div class="item">h</div>
|
<div class="item">t</div>
|
||||||
<div class="item">1</div>
|
<div class="item">1</div>
|
||||||
<div class="item">a</div>
|
<div class="item">a</div>
|
||||||
<div class="item">4</div>
|
<div class="item">4</div>
|
||||||
<div class="item">d</div>
|
<div class="item">d</div>
|
||||||
<div class="item">7</div>
|
<div class="item">7</div>
|
||||||
<div class="item">g</div>
|
<div class="item">s</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -36,19 +36,19 @@
|
||||||
<div class="item">4</div>
|
<div class="item">4</div>
|
||||||
<div class="item">d</div>
|
<div class="item">d</div>
|
||||||
<div class="item">7</div>
|
<div class="item">7</div>
|
||||||
<div class="item">g</div>
|
<div class="item">s</div>
|
||||||
<div class="item">2</div>
|
<div class="item">2</div>
|
||||||
<div class="item">b</div>
|
<div class="item">b</div>
|
||||||
<div class="item">5</div>
|
<div class="item">5</div>
|
||||||
<div class="item">e</div>
|
<div class="item">e</div>
|
||||||
<div class="item">8</div>
|
<div class="item">8</div>
|
||||||
<div class="item">h</div>
|
<div class="item">t</div>
|
||||||
<div class="item">3</div>
|
<div class="item">3</div>
|
||||||
<div class="item">c</div>
|
<div class="item">c</div>
|
||||||
<div class="item">6</div>
|
<div class="item">6</div>
|
||||||
<div class="item">f</div>
|
<div class="item">f</div>
|
||||||
<div class="item">9</div>
|
<div class="item">9</div>
|
||||||
<div class="item">i</div>
|
<div class="item">u</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -33,7 +33,7 @@
|
||||||
<div class="item">456</div>
|
<div class="item">456</div>
|
||||||
<div class="item">def</div>
|
<div class="item">def</div>
|
||||||
<div class="item">789</div>
|
<div class="item">789</div>
|
||||||
<div class="item">ghi</div>
|
<div class="item">stu</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||||
|
<link href="http://www.google.com/" rel="author" title="Google Inc.">
|
||||||
|
<link href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" rel="help">
|
||||||
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
|
<style type="text/css">
|
||||||
|
#reference-overlapped-red {
|
||||||
|
position: absolute;
|
||||||
|
background-color: red;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#constrained-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex: none;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
|
||||||
|
<div id="reference-overlapped-red"></div>
|
||||||
|
<div id="constrained-flex">
|
||||||
|
<img src="support/200x200-green.png" id="test-flex-item-overlapping-green">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||||
|
<link href="http://www.google.com/" rel="author" title="Google Inc.">
|
||||||
|
<link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help">
|
||||||
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
|
<meta content="Test that we compute the correct aspect-ratio based cross size when a height is specified" name="assert">
|
||||||
|
<style type="text/css">
|
||||||
|
#reference-overlapped-red {
|
||||||
|
position: absolute;
|
||||||
|
background-color: red;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#constrained-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex: none;
|
||||||
|
height: 100px;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
|
||||||
|
<div id="reference-overlapped-red"></div>
|
||||||
|
<div id="constrained-flex">
|
||||||
|
<img src="support/200x200-green.png" id="test-flex-item-overlapping-green">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
|
@ -0,0 +1,41 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||||
|
<link href="http://www.google.com/" rel="author" title="Google Inc.">
|
||||||
|
<link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help">
|
||||||
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
|
<meta content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" name="assert">
|
||||||
|
<style type="text/css">
|
||||||
|
#reference-overlapped-red {
|
||||||
|
position: absolute;
|
||||||
|
background-color: red;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#constrained-flex {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex: none;
|
||||||
|
flex-basis: 100px;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
|
||||||
|
<div id="reference-overlapped-red"></div>
|
||||||
|
<div id="constrained-flex">
|
||||||
|
<img src="support/200x200-green.png" id="test-flex-item-overlapping-green">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
|
@ -0,0 +1,38 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||||
|
<link href="http://www.google.com/" rel="author" title="Google Inc.">
|
||||||
|
<link href="https://drafts.csswg.org/css-flexbox-1/#hypothetical-main-size" rel="help">
|
||||||
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
|
<style type="text/css">
|
||||||
|
#reference-overlapped-red {
|
||||||
|
position: absolute;
|
||||||
|
background-color: red;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#constrained-flex {
|
||||||
|
display: flex;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex: none;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
|
||||||
|
<div id="reference-overlapped-red"></div>
|
||||||
|
<div id="constrained-flex">
|
||||||
|
<img src="support/200x200-green.png" id="test-flex-item-overlapping-green">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||||
|
<link href="http://www.google.com/" rel="author" title="Google Inc.">
|
||||||
|
<link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help">
|
||||||
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
|
<meta content="Test that we compute the correct aspect-ratio based cross size when a width is specified" name="assert">
|
||||||
|
<style type="text/css">
|
||||||
|
#reference-overlapped-red {
|
||||||
|
position: absolute;
|
||||||
|
background-color: red;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#constrained-flex {
|
||||||
|
display: flex;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex: none;
|
||||||
|
width: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
|
||||||
|
<div id="reference-overlapped-red"></div>
|
||||||
|
<div id="constrained-flex">
|
||||||
|
<img src="support/200x200-green.png" id="test-flex-item-overlapping-green">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
|
@ -0,0 +1,39 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html><head>
|
||||||
|
<title>CSS Flexible Box Test: Aspect ratio handling of images</title>
|
||||||
|
<link href="http://www.google.com/" rel="author" title="Google Inc.">
|
||||||
|
<link href="https://drafts.csswg.org/css-flexbox-1/#algo-cross-item" rel="help">
|
||||||
|
<link href="reference/ref-filled-green-100px-square.htm" rel="match">
|
||||||
|
<meta content="Test that we compute the correct aspect-ratio based cross size when a flex-basis is specified" name="assert">
|
||||||
|
<style type="text/css">
|
||||||
|
#reference-overlapped-red {
|
||||||
|
position: absolute;
|
||||||
|
background-color: red;
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#constrained-flex {
|
||||||
|
display: flex;
|
||||||
|
width: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
min-width: 0;
|
||||||
|
min-height: 0;
|
||||||
|
flex: none;
|
||||||
|
flex-basis: 100px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
|
||||||
|
|
||||||
|
<div id="reference-overlapped-red"></div>
|
||||||
|
<div id="constrained-flex">
|
||||||
|
<img src="support/200x200-green.png" id="test-flex-item-overlapping-green">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body></html>
|
|
@ -3,13 +3,14 @@
|
||||||
Any copyright is dedicated to the Public Domain.
|
Any copyright is dedicated to the Public Domain.
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
http://creativecommons.org/publicdomain/zero/1.0/
|
||||||
--><!--
|
--><!--
|
||||||
Testcase with table parts inside of a flex container, triggering
|
Testcase with table parts inside of a flex container, which should *not*
|
||||||
table-fixup. We use justify-content:space-between to stick packing
|
trigger table-fixup. We use justify-content:space-between to stick packing
|
||||||
space between flex items, so that we can verify that e.g. a contiguous
|
space between flex items, so that we can verify that e.g. a contiguous
|
||||||
run of <td>s will end up in the same flex item (wrapped in a table).
|
run of <td>s will each be blockified & form its own flex item (instead of
|
||||||
|
being aggregated into a single table & single flex item).
|
||||||
--><html>
|
--><html>
|
||||||
<head>
|
<head>
|
||||||
<title>CSS Test: Testing that table cells in a flex container get an anonymous table wrapper that forms the flex item</title>
|
<title>CSS Test: Testing that table cells in a flex container get blockified and each form their own flex item</title>
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
|
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
|
||||||
<link rel="match" href="reference/flexbox-table-fixup-001-ref.htm">
|
<link rel="match" href="reference/flexbox-table-fixup-001-ref.htm">
|
||||||
|
@ -21,12 +22,10 @@
|
||||||
justify-content: space-around;
|
justify-content: space-around;
|
||||||
}
|
}
|
||||||
|
|
||||||
<!-- NOTE: table-fixup pads each td element by 1px on each side. We
|
|
||||||
override that for top & bottom, for simplicity. So the td makes us
|
|
||||||
generate a box that's 2px wider than its contents. -->
|
|
||||||
td {
|
td {
|
||||||
padding-top: 0px;
|
/* Remove any default padding for td elements, so we can compare them
|
||||||
padding-bottom: 0px;
|
easily against blocks in the reference case. */
|
||||||
|
padding: 0px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.a {
|
.a {
|
||||||
|
@ -46,16 +45,16 @@
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<!-- Just 2 adjacent table cells (they end up in the same table) -->
|
<!-- The adjacent table-parts in each example below should *not* be
|
||||||
|
grouped into the same flex item. -->
|
||||||
|
<!-- 2 adjacent table cells -->
|
||||||
<div class="flexbox"><td class="a">cell1</td><td class="b">cell2</td></div>
|
<div class="flexbox"><td class="a">cell1</td><td class="b">cell2</td></div>
|
||||||
|
|
||||||
<!-- Table cell followed by tbody (they end up in the same table) -->
|
<!-- Table cell followed by tbody -->
|
||||||
<div class="flexbox"><td class="a">cell1</td><tbody class="b">t</tbody></div>
|
<div class="flexbox"><td class="a">cell1</td><tbody class="b">t</tbody></div>
|
||||||
|
|
||||||
<!-- Empty table cell (ends up occupying 2px of width), followed by div,
|
<!-- Empty table cell (ends up occupying 2px of width), followed by
|
||||||
followed by nonempty table cell. (3 flex items). -->
|
nonempty table cell.-->
|
||||||
<!-- Note: We use "space-between" (instead of "space-around") here because
|
<div class="flexbox"><td></td><td class="b">cell1</td></div>
|
||||||
it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
|
|
||||||
<div class="flexbox" style="justify-content: space-between"><td></td><div class="c">div</div><td class="b">cell1</td></div>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
|
@ -1,69 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<!--
|
|
||||||
Any copyright is dedicated to the Public Domain.
|
|
||||||
http://creativecommons.org/publicdomain/zero/1.0/
|
|
||||||
--><!--
|
|
||||||
Testcase with table parts inside of a flex container, triggering
|
|
||||||
table-fixup. We use justify-content:space-between to stick packing
|
|
||||||
space between flex items, so that we can verify that e.g. a contiguous
|
|
||||||
run of <td>s will end up in the same flex item (wrapped in a table).
|
|
||||||
|
|
||||||
In this variant of the test, we also assign 'flex' values to the
|
|
||||||
table parts - these values should have no effect, since these children
|
|
||||||
don't themselves form flex items. The flex property _is_ honored on
|
|
||||||
the <div class="c">, though, because _its_ box _is_ a direct child of a
|
|
||||||
flexbox, so it _is_ a flex item.
|
|
||||||
--><html>
|
|
||||||
<head>
|
|
||||||
<title>CSS Test: Testing that the 'flex' shorthand has no effect on table cells in a flex container, since they aren't flex items</title>
|
|
||||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
|
||||||
<link rel="help" href="http://www.w3.org/TR/css-flexbox-1/#flex-items">
|
|
||||||
<link rel="match" href="reference/flexbox-table-fixup-001-ref.htm">
|
|
||||||
<style>
|
|
||||||
div.flexbox {
|
|
||||||
border: 1px dashed blue;
|
|
||||||
width: 200px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-around;
|
|
||||||
}
|
|
||||||
|
|
||||||
<!-- NOTE: table-fixup pads each td element by 1px on each side. We
|
|
||||||
override that for top & bottom, for simplicity. So the td makes us
|
|
||||||
generate a box that's 2px wider than its contents. -->
|
|
||||||
td {
|
|
||||||
padding-top: 0px;
|
|
||||||
padding-bottom: 0px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.a {
|
|
||||||
background: lightgreen;
|
|
||||||
width: 48px;
|
|
||||||
flex: 5 3 100px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.b {
|
|
||||||
background: yellow;
|
|
||||||
width: 48px;
|
|
||||||
flex: 1 2 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.c {
|
|
||||||
background: pink;
|
|
||||||
flex: 0 0 48px;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<!-- Just 2 adjacent table cells (they end up in the same table) -->
|
|
||||||
<div class="flexbox"><td class="a">cell1</td><td class="b">cell2</td></div>
|
|
||||||
|
|
||||||
<!-- Table cell followed by tbody (they end up in the same table) -->
|
|
||||||
<div class="flexbox"><td class="a">cell1</td><tbody class="b">t</tbody></div>
|
|
||||||
|
|
||||||
<!-- Empty table cell (ends up occupying 2px of width), followed by div,
|
|
||||||
followed by nonempty table cell. (3 flex items). -->
|
|
||||||
<!-- Note: We use "space-between" (instead of "space-around") here because
|
|
||||||
it makes the math cleaner. (100px split 2 ways instead of 3 ways.) -->
|
|
||||||
<div class="flexbox" style="justify-content: space-between"><td></td><div class="c">div</div><td class="b">cell1</td></div>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue