mirror of
https://github.com/servo/servo.git
synced 2025-06-19 22:59:03 +01:00
3938 lines
No EOL
210 KiB
HTML
3938 lines
No EOL
210 KiB
HTML
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
|
<html>
|
|
<head>
|
|
<title>Backgrounds - CSS Backgrounds and Borders Module Level 3 CR Test Suite</title>
|
|
<style type="text/css">
|
|
@import "http://www.w3.org/StyleSheets/TR/base.css";
|
|
@import "../indices.css";
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>CSS Backgrounds and Borders Module Level 3 CR Test Suite</h1>
|
|
<h2>Backgrounds (385 tests)</h2>
|
|
<table width="100%">
|
|
<col id="test-column">
|
|
<col id="refs-column">
|
|
<col id="flags-column">
|
|
<col id="info-column">
|
|
<thead>
|
|
<tr>
|
|
<th>Test</th>
|
|
<th><abbr title="Rendering References">Refs</abbr></th>
|
|
<th>Flags</th>
|
|
<th>Info</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="s3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#backgrounds">3 Backgrounds</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.1">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#layering">3.1 Layering Multiple Background Images</a></th></tr>
|
|
<!-- 3 tests -->
|
|
<tr id="background-010-3.1" class="image">
|
|
<td>
|
|
<a href="background-010.htm">background-010</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with (image color)
|
|
<ul class="assert">
|
|
<li>Background with (image color) sets the background of the element to the color specified (not shown) and tiles the image across the background.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background_properties_greater_than_images-3.1" class="primary">
|
|
<td><strong>
|
|
<a href="background_properties_greater_than_images.htm">background_properties_greater_than_images</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Number of background properties greater than number of background images
|
|
<ul class="assert">
|
|
<li>If the background properties values are greater than the number of background images, then the excess values are ignored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="scroll-positioned-multiple-background-images-3.1" class="primary dom image scroll">
|
|
<td><strong>
|
|
<a href="scroll-positioned-multiple-background-images.htm">scroll-positioned-multiple-background-images</a></strong></td>
|
|
<td><a href="reference/60x60-green-background.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr><abbr class="scroll" title="Only valid for continuous media">Scroll</abbr></td>
|
|
<td>Scroll multiple background images that are positioned
|
|
<ul class="assert">
|
|
<li>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.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.1.#layers">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.2">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-color">3.2 Base Color: the ‘background-color’ property</a></th></tr>
|
|
<!-- 3 tests -->
|
|
<tr id="background-color-border-box-3.2" class="primary">
|
|
<td><strong>
|
|
<a href="background-color-border-box.htm">background-color-border-box</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Background color clipped to 'border-box'
|
|
<ul class="assert">
|
|
<li>Background color is clipped according to the 'background-clip' value associated with the bottom-most background image.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background_color_padding_box-3.2" class="primary">
|
|
<td><strong>
|
|
<a href="background_color_padding_box.htm">background_color_padding_box</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Background color clipped to 'padding-box'
|
|
<ul class="assert">
|
|
<li>Background color is clipped according to the 'background-clip' value associated with the bottom-most background image.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="color-behind-images-3.2" class="primary">
|
|
<td><strong>
|
|
<a href="color-behind-images.htm">color-behind-images</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Background color is drawn behind images
|
|
<ul class="assert">
|
|
<li>Background color is drawn behind any number of background images.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.2.#background-color">
|
|
<!-- 1 tests -->
|
|
<tr id="background-color-applied-to-rounded-inline-element-3.2.#background-color" class="primary">
|
|
<td><strong>
|
|
<a href="background-color-applied-to-rounded-inline-element.htm">background-color-applied-to-rounded-inline-element</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Background-color' applied to a rounded inline element
|
|
<ul class="assert">
|
|
<li>'Background-color' is clipped according to the 'background-clip' property in an inline element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.2.#background-color0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.3">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-image">3.3 Image Sources: the ‘background-image’ property</a></th></tr>
|
|
<!-- 10 tests -->
|
|
<tr id="background-image-001-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="background-image-001.htm">background-image-001</a></strong></td>
|
|
<td><a href="reference/background-image-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Backgrounds: background-image div
|
|
<ul class="assert">
|
|
<li>Test checks that background-image displays raster image for div background.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-image-002-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="background-image-002.htm">background-image-002</a></strong></td>
|
|
<td><a href="reference/background-image-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Backgrounds: background-image layered background on div
|
|
<ul class="assert">
|
|
<li>Test checks that background-image displays layerd images in the correct order for div background.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-image-003-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="background-image-003.htm">background-image-003</a></strong></td>
|
|
<td><a href="reference/background-image-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Backgrounds: background-image <a>
|
|
<ul class="assert">
|
|
<li>Test checks that background-image displays raster image for <a> tag.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-image-004-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="background-image-004.htm">background-image-004</a></strong></td>
|
|
<td><a href="reference/background-image-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Backgrounds: background-image <a> layered images
|
|
<ul class="assert">
|
|
<li>Test checks that background-image displays multiple images in correct order on <a> tag.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-image-005-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="background-image-005.htm">background-image-005</a></strong></td>
|
|
<td><a href="reference/background-image-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Backgrounds: background-image p tag
|
|
<ul class="assert">
|
|
<li>Test checks that background-image displays raster image for p tag.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-image-006-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="background-image-006.htm">background-image-006</a></strong></td>
|
|
<td><a href="reference/background-image-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Backgrounds: background-image p layered images
|
|
<ul class="assert">
|
|
<li>Test checks that background-image displays multiple images in correct order on p tag.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-image-007-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="background-image-007.htm">background-image-007</a></strong></td>
|
|
<td><a href="reference/background-image-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS Backgrounds: background-image :first-letter layered images
|
|
<ul class="assert">
|
|
<li>Test checks that background-image displays multiple images in correct order on :first-letter selector.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-image-first-letter-3.3" class="ahem image">
|
|
<td>
|
|
<a href="background-image-first-letter.htm">background-image-first-letter</a></td>
|
|
<td><a href="reference/background-image-first-letter-ref.htm">=</a> </td>
|
|
<td><abbr class="ahem" title="Requires Ahem font">Ahem</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-image applicability to ::first-letter
|
|
<ul class="assert">
|
|
<li>background-image applicability to ::first-letter</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="none-as-image-layer-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="none-as-image-layer.htm">none-as-image-layer</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>None counts as an image layer
|
|
<ul class="assert">
|
|
<li>'Background-image: none' counts as an image layer but draws nothing.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="order-of-images-3.3" class="primary">
|
|
<td><strong>
|
|
<a href="order-of-images.htm">order-of-images</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Order of images
|
|
<ul class="assert">
|
|
<li>Background images are listed in order, with the first image being rendered on top of all the other images, and so on.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.3.#background-image">
|
|
<!-- 1 tests -->
|
|
<tr id="background-006-3.3.#background-image" class="image">
|
|
<td>
|
|
<a href="background-006.htm">background-006</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with (color image)
|
|
<ul class="assert">
|
|
<li>Background with (color image) sets the background of the element to the color specified (not shown) and places the image in its initial position.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.3.#ltbg-imagegt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.3.#none">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.4">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-repeat">3.4 Tiling Images: the ‘background-repeat’ property</a></th></tr>
|
|
<!-- 23 tests -->
|
|
<tr id="background-003-3.4" class="image">
|
|
<td>
|
|
<a href="background-003.htm">background-003</a></td>
|
|
<td><a href="reference/background-003-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with repeat
|
|
<ul class="assert">
|
|
<li>Background shorthand with repeat only sets its background-repeat subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-attachment' is set to 'scroll', 'background-position' is set to '0% 0%'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-007-3.4" class="">
|
|
<td>
|
|
<a href="background-007.htm">background-007</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (color repeat)
|
|
<ul class="assert">
|
|
<li>Background with (color repeat) sets the background of the element to the color specified. Repeat does nothing since there is no image.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-011-3.4" class="image">
|
|
<td>
|
|
<a href="background-011.htm">background-011</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with (image repeat)
|
|
<ul class="assert">
|
|
<li>Background with (image repeat) sets the background to the image specified, tiling it to cover the full width, but not height.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-014-3.4" class="">
|
|
<td>
|
|
<a href="background-014.htm">background-014</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (repeat color)
|
|
<ul class="assert">
|
|
<li>Background with (repeat color) sets the background of the element to the color specified. Repeat does nothing since there is no image.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-015-3.4" class="image">
|
|
<td>
|
|
<a href="background-015.htm">background-015</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with (repeat image)
|
|
<ul class="assert">
|
|
<li>Background with (repeat image) sets the background to the image specified, tiling it to cover the full width, but not height.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-016-3.4" class="">
|
|
<td>
|
|
<a href="background-016.htm">background-016</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (repeat attachment)
|
|
<ul class="assert">
|
|
<li>Background with (repeat attachment) does not affect the background since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-017-3.4" class="">
|
|
<td>
|
|
<a href="background-017.htm">background-017</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (repeat position)
|
|
<ul class="assert">
|
|
<li>Background with (repeat position) does not affect the background since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-no-repeat-3.4" class="image">
|
|
<td>
|
|
<a href="background-repeat-no-repeat.htm">background-repeat-no-repeat</a></td>
|
|
<td><a href="reference/background-repeat-no-repeat.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat:no-repeat
|
|
<ul class="assert">
|
|
<li>The image is placed once in the background positioning area and not repeated in any direction.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-repeat-x-3.4" class="image">
|
|
<td>
|
|
<a href="background-repeat-repeat-x.htm">background-repeat-repeat-x</a></td>
|
|
<td><a href="reference/background-repeat-repeat-x.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat:repeat-x
|
|
<ul class="assert">
|
|
<li>The image is repeated horizontally as often as needed to cover the background painting area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-repeat-y-3.4" class="image">
|
|
<td>
|
|
<a href="background-repeat-repeat-y.htm">background-repeat-repeat-y</a></td>
|
|
<td><a href="reference/background-repeat-repeat-y.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat:repeat-y
|
|
<ul class="assert">
|
|
<li>The image is repeated vertically as often as needed to cover the background painting area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-round-3.4" class="primary image">
|
|
<td><strong>
|
|
<a href="background-repeat-round.htm">background-repeat-round</a></strong></td>
|
|
<td><a href="reference/background-repeat-round.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat:round
|
|
<ul class="assert">
|
|
<li>The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-round-001-3.4" class="primary image">
|
|
<td><strong>
|
|
<a href="background-repeat-round-001.htm">background-repeat-round-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat - one round keyword value
|
|
<ul class="assert">
|
|
<li>Check if 'background-repeat' is 'round', then the width and height of the corresponding background image is rescaled so that they fit a whole number of times (2 in this test) in the background positioning area. Therefore the used width and height of the background image in this test should be 110px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-round-002-3.4" class="primary image">
|
|
<td><strong>
|
|
<a href="background-repeat-round-002.htm">background-repeat-round-002</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat: round basic support
|
|
<ul class="assert">
|
|
<li>The image is repeated as often as will fit within the background positioning area. If it doesn't fit a whole number of times, it is rescaled so that it does.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-round-roundup-3.4" class="primary image">
|
|
<td><strong>
|
|
<a href="background-repeat-round-roundup.htm">background-repeat-round-roundup</a></strong></td>
|
|
<td><a href="reference/background-repeat-round-roundup.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat:round, rounding up
|
|
<ul class="assert">
|
|
<li>The 'background-repeat: round' declaration must scale an image in one or more dimensions so it fits a whole number of times in the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-space-3.4" class="primary image">
|
|
<td><strong>
|
|
<a href="background-repeat-space.htm">background-repeat-space</a></strong></td>
|
|
<td><a href="reference/background-repeat-space.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-repeat:space
|
|
<ul class="assert">
|
|
<li>The 'background-repeat: space' declaration must space out images in one or more dimensions so they fit a whole number of times in the background positioning area. The first and last images in each row and column must sit along edge(s) of the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-repeat-space-padding-box-3.4" class="primary">
|
|
<td><strong>
|
|
<a href="background-repeat-space-padding-box.htm">background-repeat-space-padding-box</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Background-repeat: space' when background positioning area is 'padding-box'
|
|
<ul class="assert">
|
|
<li>When 'background-repeat: space' and background positioning area is set to 'padding-box' the image is repeated as often within the 'padding-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'padding-box'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-025-3.4" class="image">
|
|
<td>
|
|
<a href="background-size-025.htm">background-size-025</a></td>
|
|
<td><a href="reference/background-size-025-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size 'auto 61px' with background-repeat 'round'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-027-3.4" class="image">
|
|
<td>
|
|
<a href="background-size-027.htm">background-size-027</a></td>
|
|
<td><a href="reference/background-size-027-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '52px auto' with background-repeat 'repeat round'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-029-3.4" class="image">
|
|
<td>
|
|
<a href="background-size-029.htm">background-size-029</a></td>
|
|
<td><a href="reference/background-size-029-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '52px auto' with background-repeat 'round repeat'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-031-3.4" class="image">
|
|
<td>
|
|
<a href="background-size-031.htm">background-size-031</a></td>
|
|
<td><a href="reference/background-size-031-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '20% 30%' with background-repeat 'no-repeat round'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled to 20% (50px in this test) of the background area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background_repeat_space_border_box-3.4" class="primary">
|
|
<td><strong>
|
|
<a href="background_repeat_space_border_box.htm">background_repeat_space_border_box</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Background-repeat: space' when background positioning area is 'border-box'
|
|
<ul class="assert">
|
|
<li>When 'background-repeat: space' and background positioning area is set to 'border-box' the image is repeated as often within the 'border-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'border-box'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background_repeat_space_content_box-3.4" class="primary">
|
|
<td><strong>
|
|
<a href="background_repeat_space_content_box.htm">background_repeat_space_content_box</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Background-repeat: space' when background positioning area is 'content-box'
|
|
<ul class="assert">
|
|
<li>When 'background-repeat: space' and background positioning area is set to 'content-box' the image is repeated as often within the 'content-box' without being clipped, the images are spaced out to fill the area and the first and last images touch the edges of the 'content-box'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="ttwf-reftest-background-repeat-x-3.4" class="primary">
|
|
<td><strong>
|
|
<a href="ttwf-reftest-background-repeat-x.htm">ttwf-reftest-background-repeat-x</a></strong></td>
|
|
<td><a href="reference/ttwf-reftest-background-repeat-x-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>transform property with translate function
|
|
<ul class="assert">
|
|
<li>You should only see the img with two color render on the X directions.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.4.#background-painting-area0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#background-painting-area1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#background-painting-area2">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#background-positioning-area.">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#background-positioning-area0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#background-repeat">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#ltrepeat-stylegt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#no-repeat">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#repeat">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#repeat-x">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#repeat-y">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#round">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.4.#space">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.5">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-attachment">3.5 Affixing Images: the ‘background-attachment’ property</a></th></tr>
|
|
<!-- 30 tests -->
|
|
<tr id="attachment-local-clipping-color-1-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-color-1.htm">attachment-local-clipping-color-1</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-color-1-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: border-box; color}
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-color-2-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-color-2.htm">attachment-local-clipping-color-2</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-color-1-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: padding-box; color}
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-color-3-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-color-3.htm">attachment-local-clipping-color-3</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-color-3-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: content-box; color}
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-color-4-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-color-4.htm">attachment-local-clipping-color-4</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-color-4-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: border-box; color}; border-radius
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-color-5-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-color-5.htm">attachment-local-clipping-color-5</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-color-4-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: padding-box; color}; border-radius
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-color-6-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-color-6.htm">attachment-local-clipping-color-6</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-color-6-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: content-box; color}; border-radius
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-image-1-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-image-1.htm">attachment-local-clipping-image-1</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-image-1-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: border-box; image}
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-image-2-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-image-2.htm">attachment-local-clipping-image-2</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-image-1-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: padding-box; image}
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-image-3-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-image-3.htm">attachment-local-clipping-image-3</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-image-3-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: content-box; image}
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-image-4-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-image-4.htm">attachment-local-clipping-image-4</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-image-4-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: border-box; image}; border-radius
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-image-5-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-image-5.htm">attachment-local-clipping-image-5</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-image-4-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: padding-box; image}; border-radius
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-clipping-image-6-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-clipping-image-6.htm">attachment-local-clipping-image-6</a></strong></td>
|
|
<td><a href="reference/attachment-local-clipping-image-6-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; clip: content-box; image}; border-radius
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-positioning-2-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-positioning-2.htm">attachment-local-positioning-2</a></strong></td>
|
|
<td><a href="reference/attachment-local-positioning-2-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-attachment: local; positioning area
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-positioning-3-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-positioning-3.htm">attachment-local-positioning-3</a></strong></td>
|
|
<td><a href="reference/attachment-local-positioning-3-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-attachment: local; positioning area with dir=rtl
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-positioning-4-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-positioning-4.htm">attachment-local-positioning-4</a></strong></td>
|
|
<td><a href="reference/attachment-local-positioning-4-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-attachment: local; positioning area with dir=rtl, top left
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-local-positioning-5-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-local-positioning-5.htm">attachment-local-positioning-5</a></strong></td>
|
|
<td><a href="reference/attachment-local-positioning-5-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-{attachment: local; origin: content-box}; positioning area
|
|
</td>
|
|
</tr>
|
|
<tr id="attachment-scroll-positioning-1-3.5" class="primary dom">
|
|
<td><strong>
|
|
<a href="attachment-scroll-positioning-1.htm">attachment-scroll-positioning-1</a></strong></td>
|
|
<td><a href="reference/attachment-scroll-positioning-1-ref.htm">=</a> </td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr></td>
|
|
<td>background-attachment: scroll; positioning area
|
|
</td>
|
|
</tr>
|
|
<tr id="background-004-3.5" class="">
|
|
<td>
|
|
<a href="background-004.htm">background-004</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with attachment
|
|
<ul class="assert">
|
|
<li>Background shorthand with attachment only sets its background-attachment subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-repeat' is set to 'repeat', 'background-position' is set to '0% 0%.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-005-3.5" class="">
|
|
<td>
|
|
<a href="background-005.htm">background-005</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with position
|
|
<ul class="assert">
|
|
<li>Background shorthand with position only sets its background-position subproperty. In such case, the other background subproperties are set to their initial values: 'background-image' is set to 'none', 'background-color' is set to transparent, 'background-repeat' is set to 'repeat', 'background-attchment' is set to 'scroll'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-008-3.5" class="">
|
|
<td>
|
|
<a href="background-008.htm">background-008</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (color attachment)
|
|
<ul class="assert">
|
|
<li>Background with (color attachment) sets the background of the element to the color specified. Attachment does nothing since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-012-3.5" class="image interact">
|
|
<td>
|
|
<a href="background-012.htm">background-012</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
|
<td>Background with (image attachment)
|
|
<ul class="assert">
|
|
<li>Background with (image attachment) sets the background to the image specified, tiling it to cover the full area, and the background scrolls with the box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-016-3.5" class="">
|
|
<td>
|
|
<a href="background-016.htm">background-016</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (repeat attachment)
|
|
<ul class="assert">
|
|
<li>Background with (repeat attachment) does not affect the background since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-018-3.5" class="">
|
|
<td>
|
|
<a href="background-018.htm">background-018</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (attachment color)
|
|
<ul class="assert">
|
|
<li>Background with (attachment color) sets the background of the element to the color specified. Attachment does nothing since there is no image.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-019-3.5" class="image interact">
|
|
<td>
|
|
<a href="background-019.htm">background-019</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
|
<td>Background with (attachment image)
|
|
<ul class="assert">
|
|
<li>Background with (attachment image) sets the background to the image specified, tiling it to cover the full area, and the background scrolls with the box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-020-3.5" class="">
|
|
<td>
|
|
<a href="background-020.htm">background-020</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (attachment repeat)
|
|
<ul class="assert">
|
|
<li>Background with (attachment repeat) does not affect the background since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-021-3.5" class="">
|
|
<td>
|
|
<a href="background-021.htm">background-021</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (attachment position)
|
|
<ul class="assert">
|
|
<li>Background with (attachment position) does not affect the background since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-025-3.5" class="">
|
|
<td>
|
|
<a href="background-025.htm">background-025</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (position attachment)
|
|
<ul class="assert">
|
|
<li>Background with (position attachment does not affect the background since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-attachment-fixed-3.5" class="primary interact">
|
|
<td><strong>
|
|
<a href="background-attachment-fixed.htm">background-attachment-fixed</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
|
<td>'Background-attachment' with value 'fixed'
|
|
<ul class="assert">
|
|
<li>If 'background-attachment' is given the value 'fixed,' then the background image remains fixed in relation to the user agent viewport when the viewport is scrolled.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-attachment-local-3.5" class="primary interact">
|
|
<td><strong>
|
|
<a href="background-attachment-local.htm">background-attachment-local</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="interact" title="Requires user interaction">Interact</abbr></td>
|
|
<td>'Background-attachment' with value 'local'
|
|
<ul class="assert">
|
|
<li>If 'background-attachment' is given the value 'local,' then the background image scrolls with the containing element's content when the element's content is scrolled</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-attachment-local-scrolling-3.5" class="primary">
|
|
<td><strong>
|
|
<a href="background-attachment-local-scrolling.htm">background-attachment-local-scrolling</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Scrolling when 'background-attachment: local'
|
|
<ul class="assert">
|
|
<li>If 'background-attachment: local' the background scrolls along with the element's contents (the UA may treat 'background-clip: border-box' as the same as 'background-clip: padding-box').</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.5.#background-attachment">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#background-painting-area3">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#fixed">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#fixed0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#local">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#local0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#ltattachmentgt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#scroll">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#scroll0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.5.#viewport">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.6">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.6">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-position">3.6 Positioning Images: the ‘background-position’ property</a></th></tr>
|
|
<!-- 4 tests -->
|
|
<tr id="background-013-3.6" class="image">
|
|
<td>
|
|
<a href="background-013.htm">background-013</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with (image position)
|
|
<ul class="assert">
|
|
<li>Background with (image position) sets the background to the image specified,, tiling it to cover the full area from the position specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-022-3.6" class="">
|
|
<td>
|
|
<a href="background-022.htm">background-022</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (position color)
|
|
<ul class="assert">
|
|
<li>Background with (position color) sets the background of the element to the color specified. Position does nothing since there is no image.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-023-3.6" class="image">
|
|
<td>
|
|
<a href="background-023.htm">background-023</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with (position image)
|
|
<ul class="assert">
|
|
<li>Background with (position image) sets the background to the image specified, tiling it to cover the full area from the position specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-024-3.6" class="">
|
|
<td>
|
|
<a href="background-024.htm">background-024</a></td>
|
|
<td><a href="reference/ref-nothing-below.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (position repeat)
|
|
<ul class="assert">
|
|
<li>Background with (position repeat) does not affect the background since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.6.#background-position">
|
|
<!-- 2 tests -->
|
|
<tr id="background-009-3.6.#background-position" class="">
|
|
<td>
|
|
<a href="background-009.htm">background-009</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with (color position)
|
|
<ul class="assert">
|
|
<li>Background with (color position) sets the background of the element to the color specified. Position does nothing since image is not set.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background_position_three_four_values-3.6.#background-position" class="primary">
|
|
<td><strong>
|
|
<a href="background_position_three_four_values.htm">background_position_three_four_values</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Background-position' with three and four values
|
|
<ul class="assert">
|
|
<li>If three or four values are given to 'background-position', then each percentage or length value represents an offset from the edge specified by the keyword.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.6.#background-positioning-area1">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.6.#bottom">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.6.#center">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.6.#left">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.6.#ltpositiongt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.6.#right">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.6.#top">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.7">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.7">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-clip">3.7 Painting Area: the ‘background-clip’ property</a></th></tr>
|
|
<!-- 33 tests -->
|
|
<tr id="background-clip-001-3.7" class="primary dom script">
|
|
<td><strong>
|
|
<a href="background-clip-001.htm">background-clip-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background-clip - initial and supported values
|
|
<ul class="assert">
|
|
<li>Check if background-clip initial value is border-box and supports values border-box, padding-box and content-box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-002-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-002.htm">background-clip-002</a></strong></td>
|
|
<td><a href="reference/background-clip-002-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip - initial value
|
|
<ul class="assert">
|
|
<li>Background-clip with initial value implies to paint the background within (clipped to) the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-003-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-003.htm">background-clip-003</a></strong></td>
|
|
<td><a href="reference/background-clip-002-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip - border-box keyword value
|
|
<ul class="assert">
|
|
<li>Background-clip with 'border-box' implies to paint the background within (clipped to) the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-004-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-004.htm">background-clip-004</a></strong></td>
|
|
<td><a href="reference/background-clip-004-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip - padding-box keyword value
|
|
<ul class="assert">
|
|
<li>Background-clip with 'padding-box' implies to paint the background within (clipped to) the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-005-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-005.htm">background-clip-005</a></strong></td>
|
|
<td><a href="reference/background-clip-005-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip - content-box keyword value
|
|
<ul class="assert">
|
|
<li>Background-clip with 'content-box' implies to paint the background within (clipped to) the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-006-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-006.htm">background-clip-006</a></strong></td>
|
|
<td><a href="reference/background-clip-005-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip - inherit keyword value
|
|
<ul class="assert">
|
|
<li>Background-clip with 'inherit' implies to inherit its parent element value to paint the background area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-007-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-007.htm">background-clip-007</a></strong></td>
|
|
<td><a href="reference/ref-if-there-is-no-red.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip: content-box with background-color
|
|
<ul class="assert">
|
|
<li>When 'background-clip' is set to 'content-box', then the background-color shines only through the content area; it does not shine through the padding area nor the border area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-008-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-008.htm">background-clip-008</a></strong></td>
|
|
<td><a href="reference/ref-if-there-is-no-red.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip: padding-box with background-color
|
|
<ul class="assert">
|
|
<li>When 'background-clip' is set to 'padding-box', then the background painting area is clipped at the edges of the padding of the element. In this test, the padding box is 0px tall and as wide as the body element; therefore, red should not be visible.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-009-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-009.htm">background-clip-009</a></strong></td>
|
|
<td><a href="reference/ref-filled-black-96px-square.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip: border-box with background-color
|
|
<ul class="assert">
|
|
<li>When 'background-clip' is set to 'border-box', then the background painting area is clipped at the edges of the borders of the element. In this test, the border box is 96px tall and 96px wide and is made from only the borders.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-010-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-010.htm">background-clip-010</a></strong></td>
|
|
<td><a href="reference/ref-if-there-is-no-red.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip - content-box with background-color
|
|
<ul class="assert">
|
|
<li>When 'background-clip' is set to 'content-box', then the background painting area is clipped at the edges of the content of the element. In this test, height is 'auto', therefore its used value is '0px'; width is 'auto', therefore its used value is as wide as the body element. So, the content box is 0px tall and as wide as the body element; therefore, red should not be visible.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-content-box-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-content-box.htm">background-clip-content-box</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>backgrond-clip_content-box
|
|
<ul class="assert">
|
|
<li>Test passes if the backgrond color is limited to the content only and border is blue dotted without red</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-content-box-001-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-content-box-001.htm">background-clip-content-box-001</a></strong></td>
|
|
<td><a href="reference/background-clip-content-box-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip Reference
|
|
<ul class="assert">
|
|
<li>background-clip with content-box means paint the background within the content box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-padding-box-with-border-radius-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip-padding-box-with-border-radius.htm">background-clip-padding-box-with-border-radius</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>background-clip: padding-box with border-radius
|
|
<ul class="assert">
|
|
<li>Backgrounds clipped to the padding box should follow the padding box curve, which should be equal to the outer border radius minus the corresponding border thickness.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip-root-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="background-clip-root.htm">background-clip-root</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip on root
|
|
<ul class="assert">
|
|
<li>The root element has a different background painting area, and thus the &acirc;&#8364;&#732;background-clip&acirc;&#8364;&#8482; property has no effect when specified on it.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-clip_padding-box-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-clip_padding-box.htm">background-clip_padding-box</a></strong></td>
|
|
<td><a href="reference/background_clip_padding-box.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-clip_border-box
|
|
<ul class="assert">
|
|
<li>Test passes if border is blue and dotted without red background</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-paint-order-001-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="background-paint-order-001.htm">background-paint-order-001</a></strong></td>
|
|
<td><a href="reference/background-paint-order-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background clip and border painting order
|
|
<ul class="assert">
|
|
<li>The background is painted behind the border.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-023-3.7" class="image">
|
|
<td>
|
|
<a href="background-size-023.htm">background-size-023</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '50% auto' with background-clip 'padding-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-024-3.7" class="image">
|
|
<td>
|
|
<a href="background-size-024.htm">background-size-024</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '100% 100%' with background-clip 'content-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 150px by 150px in this test), and then the background image is clipped to fit into the content area (it is 100px by 100px as background-clip is 'content-box').</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-box-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="border-box.htm">border-box</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:border-box
|
|
<ul class="assert">
|
|
<li>border-box : The background is painted within (clipped to) the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-box_with_position-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="border-box_with_position.htm">border-box_with_position</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:border-box & background-position
|
|
<ul class="assert">
|
|
<li>border-box : The background is painted within (clipped to) the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-box_with_radius-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="border-box_with_radius.htm">border-box_with_radius</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:border-box & border-radius
|
|
<ul class="assert">
|
|
<li>border-box : The background is painted within (clipped to) the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="border-box_with_size-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="border-box_with_size.htm">border-box_with_size</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:border-box & background-size
|
|
<ul class="assert">
|
|
<li>border-box : The background is painted within (clipped to) the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="content-box-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="content-box.htm">content-box</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:content-box
|
|
<ul class="assert">
|
|
<li>content-box : The background is painted within (clipped to) the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="content-box_with_position-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="content-box_with_position.htm">content-box_with_position</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:content-box & background-position
|
|
<ul class="assert">
|
|
<li>content-box : The background is painted within (clipped to) the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="content-box_with_radius-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="content-box_with_radius.htm">content-box_with_radius</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:content-box & border-radius
|
|
<ul class="assert">
|
|
<li>content-box : The background is painted within (clipped to) the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="content-box_with_size-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="content-box_with_size.htm">content-box_with_size</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:content-box & background-size
|
|
<ul class="assert">
|
|
<li>content-box : The background is painted within (clipped to) the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-clip-border-box-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-clip-border-box.htm">css3-background-clip-border-box</a></strong></td>
|
|
<td><a href="reference/css3-background-clip-border-box-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background clip property with value border-box
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-clip-content-box-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-clip-content-box.htm">css3-background-clip-content-box</a></strong></td>
|
|
<td><a href="reference/css3-background-clip-content-box-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background clip property with value content-box
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-clip-padding-box-3.7" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-clip-padding-box.htm">css3-background-clip-padding-box</a></strong></td>
|
|
<td><a href="reference/css3-background-clip-padding-box-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background clip property with value padding-box
|
|
</td>
|
|
</tr>
|
|
<tr id="padding-box-3.7" class="primary image">
|
|
<td><strong>
|
|
<a href="padding-box.htm">padding-box</a></strong></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="primary image">
|
|
<td><strong>
|
|
<a href="padding-box_with_position.htm">padding-box_with_position</a></strong></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="primary image">
|
|
<td><strong>
|
|
<a href="padding-box_with_radius.htm">padding-box_with_radius</a></strong></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="primary image">
|
|
<td><strong>
|
|
<a href="padding-box_with_size.htm">padding-box_with_size</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-clip:padding-box & background-size
|
|
<ul class="assert">
|
|
<li>padding-box : The background is painted within (clipped to) the padding box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.7.#background-clip">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.7.#background-painting-area">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.7.#border-box">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.7.#content-box">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.7.#ltboxgt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.7.#padding-box">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.8">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.8">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-origin">3.8 Positioning Area: the ‘background-origin’ property</a></th></tr>
|
|
<!-- 13 tests -->
|
|
<tr id="background-origin-001-3.8" class="primary dom script">
|
|
<td><strong>
|
|
<a href="background-origin-001.htm">background-origin-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background-origin - initial and supported values
|
|
<ul class="assert">
|
|
<li>Check if background-origin initial value is padding-box and supports values border-box, padding-box and content-box</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-origin-002-3.8" class="primary image">
|
|
<td><strong>
|
|
<a href="background-origin-002.htm">background-origin-002</a></strong></td>
|
|
<td><a href="reference/background-origin-002-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-origin - initial value
|
|
<ul class="assert">
|
|
<li>Background-origin with initial value implies to position the background relative to the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-origin-003-3.8" class="primary image">
|
|
<td><strong>
|
|
<a href="background-origin-003.htm">background-origin-003</a></strong></td>
|
|
<td><a href="reference/background-origin-002-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-origin - padding-box keyword value
|
|
<ul class="assert">
|
|
<li>Background-origin with 'padding-box' implies to position the background relative to the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-origin-004-3.8" class="primary image">
|
|
<td><strong>
|
|
<a href="background-origin-004.htm">background-origin-004</a></strong></td>
|
|
<td><a href="reference/background-origin-004-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-origin - border-box keyword value
|
|
<ul class="assert">
|
|
<li>Background-origin with 'border-box' implies to position the background relative to the border box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-origin-005-3.8" class="primary image">
|
|
<td><strong>
|
|
<a href="background-origin-005.htm">background-origin-005</a></strong></td>
|
|
<td><a href="reference/background-origin-005-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-origin - content-box keyword value
|
|
<ul class="assert">
|
|
<li>Background-origin with 'content-box' implies to position the background relative to the content box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-origin-006-3.8" class="primary image">
|
|
<td><strong>
|
|
<a href="background-origin-006.htm">background-origin-006</a></strong></td>
|
|
<td><a href="reference/background-origin-006-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-origin 'content-box' with background-attachment 'fixed'
|
|
<ul class="assert">
|
|
<li>Check if the 'background-attachment' value is 'fixed' that expecting 'background-origin' has no effect and the background positioning area is the initial containing block.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-origin-007-3.8" class="primary image">
|
|
<td><strong>
|
|
<a href="background-origin-007.htm">background-origin-007</a></strong></td>
|
|
<td><a href="reference/background-origin-007-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-origin 'border-box' with background-clip 'padding-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-clip' is 'padding-box', 'background-origin' is 'border-box', 'background-position' is 'top left' (the initial value), and the element has a non-zero border, that expecting the top and left of the background image will be clipped.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-origin-008-3.8" class="primary">
|
|
<td><strong>
|
|
<a href="background-origin-008.htm">background-origin-008</a></strong></td>
|
|
<td><a href="reference/background-origin-005-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-origin - inherit keyword value
|
|
<ul class="assert">
|
|
<li>Background-origin with 'inherit' implies to inherit its parent element value to position the background area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-021-3.8" class="image">
|
|
<td>
|
|
<a href="background-size-021.htm">background-size-021</a></td>
|
|
<td><a href="reference/background-size-021-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '100% 100%' with background-origin 'content-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 100px by 100px as background-origin is 'content-box'). In this test, the background-image should be scaled from 40px wide and 20px tall to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-022-3.8" class="image">
|
|
<td>
|
|
<a href="background-size-022.htm">background-size-022</a></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '50% auto' with background-origin 'border-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-origin-border-box-3.8" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-origin-border-box.htm">css3-background-origin-border-box</a></strong></td>
|
|
<td><a href="reference/css3-background-origin-border-box-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background origin property with value border-box
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-origin-content-box-3.8" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-origin-content-box.htm">css3-background-origin-content-box</a></strong></td>
|
|
<td><a href="reference/css3-background-origin-content-box-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background origin property with value content-box
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-origin-padding-box-3.8" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-origin-padding-box.htm">css3-background-origin-padding-box</a></strong></td>
|
|
<td><a href="reference/css3-background-origin-content-box-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background origin property with value content-box
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.8.#background-origin">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.8.#background-positioning-area">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.8.#border-box0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.8.#content-box0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.8.#padding-box0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.9">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.9">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background-size">3.9 Sizing Images: the ‘background-size’ property</a></th></tr>
|
|
<!-- 263 tests -->
|
|
<tr id="background-intrinsic-001-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-001.htm">background-intrinsic-001</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: No intrinsic size
|
|
<ul class="assert">
|
|
<li>A background image with no intrinsic size covers the entire padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-002-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-002.htm">background-intrinsic-002</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Width
|
|
<ul class="assert">
|
|
<li>A background image with only an intrinsic width covers its intrinsic width and the height of the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-003-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-003.htm">background-intrinsic-003</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Height
|
|
<ul class="assert">
|
|
<li>A background image with only an intrinsic height covers its intrinsic height and the width of the padding box.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-004-3.9" class="may svg">
|
|
<td>
|
|
<a href="background-intrinsic-004.htm">background-intrinsic-004</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Ratio (Match Heights)
|
|
<ul class="assert">
|
|
<li>A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-005-3.9" class="may svg">
|
|
<td>
|
|
<a href="background-intrinsic-005.htm">background-intrinsic-005</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="may" title="Behavior tested is preferred but optional">Optional</abbr><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Ratio (Match Widths)
|
|
<ul class="assert">
|
|
<li>A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-006-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-006.htm">background-intrinsic-006</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Percentage Width and Height
|
|
<ul class="assert">
|
|
<li>A background image with only an intrinsic ratio covers largest rectangle at that ratio that exceeds neither the height nor width of the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-007-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-007.htm">background-intrinsic-007</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Width and Ratio
|
|
<ul class="assert">
|
|
<li>A missing background image height is calculated from the width and the ratio.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-008-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-008.htm">background-intrinsic-008</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Height and Ratio
|
|
<ul class="assert">
|
|
<li>A missing background image width is calculated from the height and the ratio.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-009-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-009.htm">background-intrinsic-009</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Width and Height (Vector)
|
|
<ul class="assert">
|
|
<li>A background with an intrinsic width and height is drawn at that size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-intrinsic-010-3.9" class="svg">
|
|
<td>
|
|
<a href="background-intrinsic-010.htm">background-intrinsic-010</a></td>
|
|
<td><a href="reference/background-intrinsic-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>Background Intrinsic Sizes: Intrinsic Width and Height (Raster)
|
|
<ul class="assert">
|
|
<li>A background with an intrinsic width and height is drawn at that size.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-001-3.9" class="primary dom script">
|
|
<td><strong>
|
|
<a href="background-size-001.htm">background-size-001</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background-size - initial and supported values
|
|
<ul class="assert">
|
|
<li>Check if background-size initial value is auto and supports values auto, cover and contain</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-002-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-002.htm">background-size-002</a></strong></td>
|
|
<td><a href="reference/background-size-002-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - initial value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' with initial value implies to the intrinsic width and height of the image are to be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-003-3.9" class="primary">
|
|
<td><strong>
|
|
<a href="background-size-003.htm">background-size-003</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Value of 'auto' is used for y dimension in 'background-size'
|
|
<ul class="assert">
|
|
<li>An 'auto' value for y dimension in 'background-size' is resolved by using the image's intrinsic ratio and the size provided for the x dimension.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-005-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-005.htm">background-size-005</a></strong></td>
|
|
<td><a href="reference/background-size-002-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one auto keyword value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has only one value 'auto', then such value is the width of the correspoding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width and height of the background-size in this test should be 60px and 60px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-006-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-006.htm">background-size-006</a></strong></td>
|
|
<td><a href="reference/background-size-006-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <length> value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has only one length value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-007-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-007.htm">background-size-007</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <length> value at minimum
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '0px', minimum width of the positioning area in length, then such value is the width of the corresponding image and therefore the background image is not to be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-008-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-008.htm">background-size-008</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <length> value at maximum
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '100px', maximum width of the positioning area in length, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-009-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-009.htm">background-size-009</a></strong></td>
|
|
<td><a href="reference/background-size-006-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <percentage> value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has only one percentage value, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. A percentage is relative to the dimensions of the background positioning area. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 45px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-010-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-010.htm">background-size-010</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <percentage> value at minimum
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '0%', minimum width of the positioning area in percentage, then such value is the width of the corresponding image and therefore the background image is not to be displayed.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-011-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-011.htm">background-size-011</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <percentage> value at maximum
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '100%', maximum width of the positioning area in percentage, then such value is the width of the corresponding image and the second value (corresponding to the height of the background image) is assumed to be 'auto'. An 'auto' value for one dimension is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-012-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-012.htm">background-size-012</a></strong></td>
|
|
<td><a href="reference/background-size-002-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - two auto keyword values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has two values 'auto', then the intrinsic width and/or height of the image should be used. Therefore the used width and height of the background-size in this test should be 60px and 60px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-013-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-013.htm">background-size-013</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one auto keyword and one <length> values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has one 'auto' and one length values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used width of the background-size in this test should be 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-014-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-014.htm">background-size-014</a></strong></td>
|
|
<td><a href="reference/background-size-006-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one auto keyword and one <percentage> values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has one 'auto' and one percentage values, then the second value is the height of the corresponding background image and the first value (corresponding to the width of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. A percentage is relative to the dimensions of the background positioning area. Therefore the used width of the background-size in this test should be 45px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-015-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-015.htm">background-size-015</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <length> and one auto keyword values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has one length and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-016-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-016.htm">background-size-016</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - two <length> values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has two length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-017-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-017.htm">background-size-017</a></strong></td>
|
|
<td><a href="reference/background-size-006-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <length> and one <percentage> values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has one length and one percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-018-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-018.htm">background-size-018</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <percentage> and one auto keyword values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has one percentage and one auto values, then the first value is the width of the corresponding background image and the second value (corresponding to the height of the background image) is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension. Therefore the used height of the background-size in this test should be 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-019-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-019.htm">background-size-019</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - one <percentage> and one <length> values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has one percentage and one length values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 100px and 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-020-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-020.htm">background-size-020</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - two <percentage> values
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' has two percentage values, then such values are the width and height of the corresponding background image. Therefore the used width and height of the background-size in this test should be 45px and 45px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-021-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-021.htm">background-size-021</a></strong></td>
|
|
<td><a href="reference/background-size-021-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '100% 100%' with background-origin 'content-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 100px by 100px as background-origin is 'content-box'). In this test, the background-image should be scaled from 40px wide and 20px tall to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-022-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-022.htm">background-size-022</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '50% auto' with background-origin 'border-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 160px by 160px in this test) horizontally. Therefore the used width of the background-size in this test should be 80px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-023-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-023.htm">background-size-023</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '50% auto' with background-clip 'padding-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '50% auto', then it rescales the background image so that exactly two copies fit the background positioning area (it is 150px by 150px in this test) horizontally. Therefore the used width of the background-size in this test should be 75px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-024-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-024.htm">background-size-024</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '100% 100%' with background-clip 'content-box'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '100% 100%' that it rescales the background image independently in both dimensions to completely cover the background positioning area (it is 150px by 150px in this test), and then the background image is clipped to fit into the content area (it is 100px by 100px as background-clip is 'content-box').</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-025-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-025.htm">background-size-025</a></strong></td>
|
|
<td><a href="reference/background-size-025-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size 'auto 61px' with background-repeat 'round'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is 'auto 61px' and 'background-repeat' is 'round', then the height of the corresponding background image is rounded (70px in this test) so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled (70px in this test) to keep the original aspect ratio.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-026-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-026.htm">background-size-026</a></strong></td>
|
|
<td><a href="reference/background-size-026-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size 'auto' with background-repeat 'repeat'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is 'auto' and 'background-repeat' is 'repeat', that the background image is shown at its intrinsic size (98px wide by 99px tall in this test) and repeats in both horizontal and vertical to cover the background painting area (the same as background positioning area in this test).</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-027-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-027.htm">background-size-027</a></strong></td>
|
|
<td><a href="reference/background-size-027-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '52px auto' with background-repeat 'repeat round'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '52px auto' and 'background-repeat' is 'repeat round', then the width of the corresponding background image is 52px and then repeated while the height is first rescaled from 100px to 52px to keep the original image aspect ratio and then to 60px due to 'round'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-028-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-028.htm">background-size-028</a></strong></td>
|
|
<td><a href="reference/background-size-028-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '50px' with background-repeat 'repeat'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '50px' and 'background-repeat' is 'repeat', then the background image is shown with a width of 50px and its height is resolved by using the image's intrinsic ratio (in this test, the image's intrinsic ratio is 1:1) and (multiplied by) the size of the other dimension, and then it is repeated in both directions.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-029-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-029.htm">background-size-029</a></strong></td>
|
|
<td><a href="reference/background-size-029-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '52px auto' with background-repeat 'round repeat'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '52px auto' and 'background-repeat' is 'round repeat', then the width is first rescaled to from 100px to 52px and then rescaled to 60px due to 'round' and the height of the corresponding background image is rescaled from 100px to 60px (to keep the original image aspect ratio) and then repeated vertically.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-030-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-030.htm">background-size-030</a></strong></td>
|
|
<td><a href="reference/background-size-028-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '25% 25%' with background-repeat 'repeat'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '25% 25%' and 'background-repeat' is 'repeat', then the background image is shown with a width and height of 25% (in this test, 50px by 50px), and then it is repeated in both directions.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-031-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-031.htm">background-size-031</a></strong></td>
|
|
<td><a href="reference/background-size-031-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size '20% 30%' with background-repeat 'no-repeat round'
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is '20% 30%' and 'background-repeat' is 'no-repeat round', then the height of the corresponding background image is 50px so that it fits a whole number of times (3 in this test) in the background positioning area, and the width of the background image is rescaled to 20% (50px in this test) of the background area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-032-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-032.htm">background-size-032</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - applies to ::first-letter pseudo-element
|
|
<ul class="assert">
|
|
<li>Check if background-size is able to apply to the ::first-letter pseudo-element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-033-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-033.htm">background-size-033</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - applies to ::first-line pseudo-element
|
|
<ul class="assert">
|
|
<li>Check if background-size is able to apply to the ::first-line pseudo-element.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-034-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-034.htm">background-size-034</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - inherit keyword value
|
|
<ul class="assert">
|
|
<li>Check if background-size supports inherit keyword as its property value.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-035-3.9" class="primary">
|
|
<td><strong>
|
|
<a href="background-size-035.htm">background-size-035</a></strong></td>
|
|
<td><a href="reference/background-size-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background-size conflicts with background-attachment
|
|
<ul class="assert">
|
|
<li>The test passes if we can see the background-image is exactly same as above.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-applies-to-block-3.9" class="primary">
|
|
<td><strong>
|
|
<a href="background-size-applies-to-block.htm">background-size-applies-to-block</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>'Background-size' applied to element with a display of 'block'.
|
|
<ul class="assert">
|
|
<li>'Background-size' property applies to elements with 'display: block'.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-aspect-ratio-3.9" class="primary">
|
|
<td><strong>
|
|
<a href="background-size-aspect-ratio.htm">background-size-aspect-ratio</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Original aspect ratio of image is maintained when 'background-size: auto' and 'background-repeat: round'
|
|
<ul class="assert">
|
|
<li>If 'background-repeat' is 'round' for one dimension only and if 'background-size' is 'auto' in the other dimension, then the other dimension is sclaed so that the original aspect ratio is restored.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-contain-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-contain.htm">background-size-contain</a></strong></td>
|
|
<td><a href="reference/background-size-contain.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size:contain
|
|
<ul class="assert">
|
|
<li>The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-contain-001-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-contain-001.htm">background-size-contain-001</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - contain keyword value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-contain-002-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-contain-002.htm">background-size-contain-002</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - contain keyword value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is 'contain' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-cover-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-cover.htm">background-size-cover</a></strong></td>
|
|
<td><a href="reference/background-size-cover.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size:cover
|
|
<ul class="assert">
|
|
<li>The background image is scaled, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the background positioning area.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-cover-001-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-cover-001.htm">background-size-cover-001</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - cover keyword value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-cover-002-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-cover-002.htm">background-size-cover-002</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - cover keyword value
|
|
<ul class="assert">
|
|
<li>Check if 'background-size' is 'cover' that it scales the background-image, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. In this test, the background-image should be scaled to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-cover-contain-001-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-cover-contain-001.htm">background-size-cover-contain-001</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - cover value and contain value
|
|
<ul class="assert">
|
|
<li>When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-cover-contain-002-3.9" class="primary image">
|
|
<td><strong>
|
|
<a href="background-size-cover-contain-002.htm">background-size-cover-contain-002</a></strong></td>
|
|
<td><a href="reference/ref-filled-green-100px-square.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background-size - cover value and contain value
|
|
<ul class="assert">
|
|
<li>When 'background-size' is 'cover', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the smallest size such that both its width and its height can completely cover the background positioning area. When 'background-size' is 'contain', then the background-image is scaled, while preserving its intrinsic aspect ratio (it is 1:1 in this test), to the largest size such that both its width and its height can fit inside the background positioning area. In this test, the 2 background-images should be scaled to become 100px by 100px.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-001-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-001.htm">background-size-vector-001</a></strong></td>
|
|
<td><a href="reference/background-size-vector-001-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-002-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-002.htm">background-size-vector-002</a></strong></td>
|
|
<td><a href="reference/background-size-vector-001-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-003-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-003.htm">background-size-vector-003</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-004-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-004.htm">background-size-vector-004</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x192-aqua16x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-005-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-005.htm">background-size-vector-005</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-006-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-006.htm">background-size-vector-006</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x192-aqua16x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-007-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-007.htm">background-size-vector-007</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-008-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-008.htm">background-size-vector-008</a></strong></td>
|
|
<td><a href="reference/background-size-vector-008-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-009-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-009.htm">background-size-vector-009</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-010-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-010.htm">background-size-vector-010</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x192-aqua16x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-011-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-011.htm">background-size-vector-011</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-012-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-012.htm">background-size-vector-012</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x192-aqua16x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-013-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-013.htm">background-size-vector-013</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-014-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-014.htm">background-size-vector-014</a></strong></td>
|
|
<td><a href="reference/background-size-vector-008-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-015-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-015.htm">background-size-vector-015</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-016-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-016.htm">background-size-vector-016</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x192-aqua16x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-017-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-017.htm">background-size-vector-017</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x128-aqua16x128.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-018-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-018.htm">background-size-vector-018</a></strong></td>
|
|
<td><a href="reference/ref-t-lime16x192-aqua16x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 16px auto; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-019-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-019.htm">background-size-vector-019</a></strong></td>
|
|
<td><a href="reference/ref-t-lime8x16-aqua8x16.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-020-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-020.htm">background-size-vector-020</a></strong></td>
|
|
<td><a href="reference/ref-t-lime8x16-aqua8x16.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>tall background-size: auto; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-021-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-021.htm">background-size-vector-021</a></strong></td>
|
|
<td><a href="reference/background-size-vector-021-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-022-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-022.htm">background-size-vector-022</a></strong></td>
|
|
<td><a href="reference/background-size-vector-022-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-023-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-023.htm">background-size-vector-023</a></strong></td>
|
|
<td><a href="reference/background-size-vector-021-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-024-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-024.htm">background-size-vector-024</a></strong></td>
|
|
<td><a href="reference/background-size-vector-022-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-025-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-025.htm">background-size-vector-025</a></strong></td>
|
|
<td><a href="reference/ref-t-lime2x16-aqua2x16.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-026-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-026.htm">background-size-vector-026</a></strong></td>
|
|
<td><a href="reference/ref-t-lime128x16-aqua128x16.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-027-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-027.htm">background-size-vector-027</a></strong></td>
|
|
<td><a href="reference/ref-t-lime24x192-aqua24x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-028-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-028.htm">background-size-vector-028</a></strong></td>
|
|
<td><a href="reference/ref-t-lime128x192-aqua128x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="background-size-vector-029-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="background-size-vector-029.htm">background-size-vector-029</a></strong></td>
|
|
<td><a href="reference/ref-t-lime24x192-aqua24x192.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="box-shadow-003-3.9" class="primary">
|
|
<td><strong>
|
|
<a href="box-shadow-003.htm">box-shadow-003</a></strong></td>
|
|
<td></td>
|
|
<td></td>
|
|
<td>Layering of box shadows
|
|
<ul class="assert">
|
|
<li>Shadow effects are applied front to back, where the first shadow is on the top and the last shadow is on the bottom.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-size-001-3.9" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-size-001.htm">css3-background-size-001</a></strong></td>
|
|
<td><a href="reference/css3-background-size-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>background size property
|
|
</td>
|
|
</tr>
|
|
<tr id="css3-background-size-contain-3.9" class="primary">
|
|
<td><strong>
|
|
<a href="css3-background-size-contain.htm">css3-background-size-contain</a></strong></td>
|
|
<td><a href="reference/css3-background-size-contain-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>CSS3 background-size:contain
|
|
</td>
|
|
</tr>
|
|
<tr id="diagonal-percentage-vector-background-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="diagonal-percentage-vector-background.htm">diagonal-percentage-vector-background</a></strong></td>
|
|
<td><a href="reference/diagonal-percentage-vector-background-ref.htm">=</a> </td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto--omitted-width-percent-height.htm">tall--auto--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto--percent-width-nonpercent-height.htm">tall--auto--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto--percent-width-nonpercent-height-viewbox.htm">tall--auto--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto--percent-width-omitted-height.htm">tall--auto--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto--percent-width-omitted-height-viewbox.htm">tall--auto--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto--percent-width-percent-height.htm">tall--auto--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto--percent-width-percent-height-viewbox.htm">tall--auto--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--nonpercent-width-nonpercent-height.htm">tall--auto-32px--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.htm">tall--auto-32px--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--nonpercent-width-omitted-height.htm">tall--auto-32px--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--nonpercent-width-omitted-height-viewbox.htm">tall--auto-32px--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--nonpercent-width-percent-height.htm">tall--auto-32px--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--nonpercent-width-percent-height-viewbox.htm">tall--auto-32px--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--omitted-width-nonpercent-height.htm">tall--auto-32px--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--omitted-width-nonpercent-height-viewbox.htm">tall--auto-32px--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--omitted-width-omitted-height.htm">tall--auto-32px--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--omitted-width-omitted-height-viewbox.htm">tall--auto-32px--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--omitted-width-percent-height.htm">tall--auto-32px--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--omitted-width-percent-height-viewbox.htm">tall--auto-32px--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--percent-width-nonpercent-height.htm">tall--auto-32px--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--percent-width-nonpercent-height-viewbox.htm">tall--auto-32px--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--percent-width-omitted-height.htm">tall--auto-32px--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--percent-width-omitted-height-viewbox.htm">tall--auto-32px--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--percent-width-percent-height.htm">tall--auto-32px--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--auto-32px--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--auto-32px--percent-width-percent-height-viewbox.htm">tall--auto-32px--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--height.htm">tall--contain--height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--nonpercent-width-nonpercent-height.htm">tall--contain--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--nonpercent-width-nonpercent-height-viewbox.htm">tall--contain--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--nonpercent-width-omitted-height.htm">tall--contain--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--nonpercent-width-omitted-height-viewbox.htm">tall--contain--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--nonpercent-width-percent-height.htm">tall--contain--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--nonpercent-width-percent-height-viewbox.htm">tall--contain--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--omitted-width-nonpercent-height.htm">tall--contain--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--omitted-width-nonpercent-height-viewbox.htm">tall--contain--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--omitted-width-omitted-height.htm">tall--contain--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--omitted-width-omitted-height-viewbox.htm">tall--contain--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--omitted-width-percent-height.htm">tall--contain--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--omitted-width-percent-height-viewbox.htm">tall--contain--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--percent-width-nonpercent-height.htm">tall--contain--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--percent-width-nonpercent-height-viewbox.htm">tall--contain--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--percent-width-omitted-height.htm">tall--contain--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--percent-width-omitted-height-viewbox.htm">tall--contain--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--percent-width-percent-height.htm">tall--contain--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--percent-width-percent-height-viewbox.htm">tall--contain--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--contain--width-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--contain--width.htm">tall--contain--width</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--height.htm">tall--cover--height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-nonpercent-height.htm">tall--cover--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-nonpercent-height--crisp-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-nonpercent-height--crisp.htm">tall--cover--nonpercent-width-nonpercent-height--crisp</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-nonpercent-height-viewbox.htm">tall--cover--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.htm">tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-omitted-height.htm">tall--cover--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-omitted-height-viewbox.htm">tall--cover--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-percent-height.htm">tall--cover--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--nonpercent-width-percent-height-viewbox.htm">tall--cover--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--omitted-width-nonpercent-height.htm">tall--cover--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--omitted-width-nonpercent-height-viewbox.htm">tall--cover--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--omitted-width-omitted-height.htm">tall--cover--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--omitted-width-omitted-height-viewbox.htm">tall--cover--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--omitted-width-percent-height.htm">tall--cover--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--omitted-width-percent-height-viewbox.htm">tall--cover--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--percent-width-nonpercent-height.htm">tall--cover--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--percent-width-nonpercent-height-viewbox.htm">tall--cover--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--percent-width-omitted-height.htm">tall--cover--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--percent-width-omitted-height-viewbox.htm">tall--cover--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--percent-width-percent-height.htm">tall--cover--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--percent-width-percent-height-viewbox.htm">tall--cover--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="tall--cover--width-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="tall--cover--width.htm">tall--cover--width</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--nonpercent-width-nonpercent-height.htm">wide--12px-auto--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.htm">wide--12px-auto--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--nonpercent-width-omitted-height.htm">wide--12px-auto--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--nonpercent-width-omitted-height-viewbox.htm">wide--12px-auto--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--nonpercent-width-percent-height.htm">wide--12px-auto--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--nonpercent-width-percent-height-viewbox.htm">wide--12px-auto--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--omitted-width-nonpercent-height.htm">wide--12px-auto--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--omitted-width-nonpercent-height-viewbox.htm">wide--12px-auto--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--omitted-width-omitted-height.htm">wide--12px-auto--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--omitted-width-omitted-height-viewbox.htm">wide--12px-auto--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--omitted-width-percent-height.htm">wide--12px-auto--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--omitted-width-percent-height-viewbox.htm">wide--12px-auto--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--percent-width-nonpercent-height.htm">wide--12px-auto--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--percent-width-nonpercent-height-viewbox.htm">wide--12px-auto--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--percent-width-omitted-height.htm">wide--12px-auto--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--percent-width-omitted-height-viewbox.htm">wide--12px-auto--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--percent-width-percent-height.htm">wide--12px-auto--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--12px-auto--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--12px-auto--percent-width-percent-height-viewbox.htm">wide--12px-auto--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: 12px auto; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--nonpercent-width-nonpercent-height.htm">wide--auto--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--nonpercent-width-nonpercent-height-viewbox.htm">wide--auto--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--nonpercent-width-omitted-height.htm">wide--auto--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--nonpercent-width-omitted-height-viewbox.htm">wide--auto--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--nonpercent-width-percent-height.htm">wide--auto--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--nonpercent-width-percent-height-viewbox.htm">wide--auto--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--omitted-width-nonpercent-height.htm">wide--auto--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--omitted-width-nonpercent-height-viewbox.htm">wide--auto--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--omitted-width-omitted-height.htm">wide--auto--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--omitted-width-omitted-height-viewbox.htm">wide--auto--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--omitted-width-percent-height.htm">wide--auto--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--omitted-width-percent-height-viewbox.htm">wide--auto--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--percent-width-nonpercent-height.htm">wide--auto--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--percent-width-nonpercent-height-viewbox.htm">wide--auto--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--percent-width-omitted-height.htm">wide--auto--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--percent-width-omitted-height-viewbox.htm">wide--auto--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--percent-width-percent-height.htm">wide--auto--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto--percent-width-percent-height-viewbox.htm">wide--auto--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--nonpercent-width-nonpercent-height.htm">wide--auto-32px--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.htm">wide--auto-32px--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--nonpercent-width-omitted-height.htm">wide--auto-32px--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--nonpercent-width-omitted-height-viewbox.htm">wide--auto-32px--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--nonpercent-width-percent-height.htm">wide--auto-32px--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--nonpercent-width-percent-height-viewbox.htm">wide--auto-32px--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--omitted-width-nonpercent-height.htm">wide--auto-32px--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--omitted-width-nonpercent-height-viewbox.htm">wide--auto-32px--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--omitted-width-omitted-height.htm">wide--auto-32px--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--omitted-width-omitted-height-viewbox.htm">wide--auto-32px--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--omitted-width-percent-height.htm">wide--auto-32px--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--omitted-width-percent-height-viewbox.htm">wide--auto-32px--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--percent-width-nonpercent-height.htm">wide--auto-32px--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--percent-width-nonpercent-height-viewbox.htm">wide--auto-32px--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--percent-width-omitted-height.htm">wide--auto-32px--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--percent-width-omitted-height-viewbox.htm">wide--auto-32px--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--percent-width-percent-height.htm">wide--auto-32px--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--auto-32px--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--auto-32px--percent-width-percent-height-viewbox.htm">wide--auto-32px--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: auto 32px; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--height.htm">wide--contain--height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--nonpercent-width-nonpercent-height.htm">wide--contain--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--nonpercent-width-nonpercent-height-viewbox.htm">wide--contain--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--nonpercent-width-omitted-height.htm">wide--contain--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--nonpercent-width-omitted-height-viewbox.htm">wide--contain--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--nonpercent-width-percent-height.htm">wide--contain--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--nonpercent-width-percent-height-viewbox.htm">wide--contain--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--omitted-width-nonpercent-height.htm">wide--contain--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--omitted-width-nonpercent-height-viewbox.htm">wide--contain--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--omitted-width-omitted-height.htm">wide--contain--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--omitted-width-omitted-height-viewbox.htm">wide--contain--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--omitted-width-percent-height.htm">wide--contain--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--omitted-width-percent-height-viewbox.htm">wide--contain--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--percent-width-nonpercent-height.htm">wide--contain--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--percent-width-nonpercent-height-viewbox.htm">wide--contain--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--percent-width-omitted-height.htm">wide--contain--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--percent-width-omitted-height-viewbox.htm">wide--contain--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--percent-width-percent-height.htm">wide--contain--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--percent-width-percent-height-viewbox.htm">wide--contain--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--contain--width-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--contain--width.htm">wide--contain--width</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--height.htm">wide--cover--height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--nonpercent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--nonpercent-width-nonpercent-height.htm">wide--cover--nonpercent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--nonpercent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--nonpercent-width-nonpercent-height-viewbox.htm">wide--cover--nonpercent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--nonpercent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--nonpercent-width-omitted-height.htm">wide--cover--nonpercent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--nonpercent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--nonpercent-width-omitted-height-viewbox.htm">wide--cover--nonpercent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--nonpercent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--nonpercent-width-percent-height.htm">wide--cover--nonpercent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--nonpercent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--nonpercent-width-percent-height-viewbox.htm">wide--cover--nonpercent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for nonpercent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--omitted-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--omitted-width-nonpercent-height.htm">wide--cover--omitted-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--omitted-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--omitted-width-nonpercent-height-viewbox.htm">wide--cover--omitted-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--omitted-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--omitted-width-omitted-height.htm">wide--cover--omitted-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--omitted-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--omitted-width-omitted-height-viewbox.htm">wide--cover--omitted-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--omitted-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--omitted-width-percent-height.htm">wide--cover--omitted-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--omitted-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--omitted-width-percent-height-viewbox.htm">wide--cover--omitted-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--percent-width-nonpercent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--percent-width-nonpercent-height.htm">wide--cover--percent-width-nonpercent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-nonpercent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--percent-width-nonpercent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--percent-width-nonpercent-height-viewbox.htm">wide--cover--percent-width-nonpercent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-nonpercent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--percent-width-omitted-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--percent-width-omitted-height.htm">wide--cover--percent-width-omitted-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-omitted-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--percent-width-omitted-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--percent-width-omitted-height-viewbox.htm">wide--cover--percent-width-omitted-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-omitted-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--percent-width-percent-height-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--percent-width-percent-height.htm">wide--cover--percent-width-percent-height</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-percent-height.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--percent-width-percent-height-viewbox-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--percent-width-percent-height-viewbox.htm">wide--cover--percent-width-percent-height-viewbox</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for percent-width-percent-height-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="wide--cover--width-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="wide--cover--width.htm">wide--cover--width</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-height-ratio-5px-auto-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-height-ratio-5px-auto.htm">zero-height-ratio-5px-auto</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero height ratio, 5px auto
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-height-ratio-auto-5px-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-height-ratio-auto-5px.htm">zero-height-ratio-auto-5px</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero height ratio, auto 5px
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-height-ratio-auto-auto-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-height-ratio-auto-auto.htm">zero-height-ratio-auto-auto</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero height ratio, auto auto
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-height-ratio-contain-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-height-ratio-contain.htm">zero-height-ratio-contain</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero height ratio, contain
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-height-ratio-cover-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-height-ratio-cover.htm">zero-height-ratio-cover</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero height ratio, cover
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-ratio-no-dimensions-5px-auto-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-ratio-no-dimensions-5px-auto.htm">zero-ratio-no-dimensions-5px-auto</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero ratio, no dimensions, 5px auto
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-ratio-no-dimensions-auto-5px-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-ratio-no-dimensions-auto-5px.htm">zero-ratio-no-dimensions-auto-5px</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero ratio, no dimensions, auto 5px
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-ratio-no-dimensions-auto-auto-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-ratio-no-dimensions-auto-auto.htm">zero-ratio-no-dimensions-auto-auto</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero ratio, no dimensions, auto auto
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-ratio-no-dimensions-contain-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-ratio-no-dimensions-contain.htm">zero-ratio-no-dimensions-contain</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero ratio, no dimensions, contain
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-ratio-no-dimensions-cover-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-ratio-no-dimensions-cover.htm">zero-ratio-no-dimensions-cover</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero ratio, no dimensions, cover
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-width-ratio-5px-auto-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-width-ratio-5px-auto.htm">zero-width-ratio-5px-auto</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero height ratio, 5px auto
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-width-ratio-auto-5px-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-width-ratio-auto-5px.htm">zero-width-ratio-auto-5px</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero height ratio, auto 5px
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-width-ratio-auto-auto-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-width-ratio-auto-auto.htm">zero-width-ratio-auto-auto</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero width ratio, auto auto
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-width-ratio-contain-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-width-ratio-contain.htm">zero-width-ratio-contain</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero width ratio, contain
|
|
</td>
|
|
</tr>
|
|
<tr id="zero-width-ratio-cover-3.9" class="primary svg">
|
|
<td><strong>
|
|
<a href="zero-width-ratio-cover.htm">zero-width-ratio-cover</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="svg" title="Requires SVG support">SVG</abbr></td>
|
|
<td>zero width ratio, cover
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.9.#auto">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.9.#background-positioning-area.0">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.9.#background-size">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.9.#contain">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.9.#cover">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.9.#ltbg-sizegt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.10">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.10">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#the-background">3.10 Backgrounds Shorthand: the ‘background’ property</a></th></tr>
|
|
<!-- 8 tests -->
|
|
<tr id="background-001-3.10" class="">
|
|
<td>
|
|
<a href="background-001.htm">background-001</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td></td>
|
|
<td>Background with color
|
|
<ul class="assert">
|
|
<li>Background with color only sets the background of the element to the color specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-002-3.10" class="image">
|
|
<td>
|
|
<a href="background-002.htm">background-002</a></td>
|
|
<td><a href="reference/background-001-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>Background with an image
|
|
<ul class="assert">
|
|
<li>Background with image only sets the background of the element to the image specified.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-331-3.10" class="primary dom script">
|
|
<td><strong>
|
|
<a href="background-331.htm">background-331</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background shorthand - initial values
|
|
<ul class="assert">
|
|
<li>Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-332-3.10" class="primary dom image script">
|
|
<td><strong>
|
|
<a href="background-332.htm">background-332</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background shorthand - all values specified
|
|
<ul class="assert">
|
|
<li>Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-333-3.10" class="primary dom script">
|
|
<td><strong>
|
|
<a href="background-333.htm">background-333</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background shorthand - background-color 'red'
|
|
<ul class="assert">
|
|
<li>Check that given a valid declaration, for each layer the shorthand 'backgound' first sets the corresponding layer of each of 'background-image', 'background-position', 'background-size', 'background-repeat', 'background-origin', 'background-clip' and 'background-attachment' to that property's initial value, then assigns any explicit values specified for this layer in the declaration, and finally 'background-color' is set to the specified color, if any, else set to its initial value</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-334-3.10" class="primary image">
|
|
<td><strong>
|
|
<a href="background-334.htm">background-334</a></strong></td>
|
|
<td><a href="reference/background-334-ref.htm">=</a> </td>
|
|
<td><abbr class="image" title="Requires bitmap graphic support">Bitmaps</abbr></td>
|
|
<td>background shorthand - background-size '100% auto'
|
|
<ul class="assert">
|
|
<li>Background-size with '100% auto' implies to rescale the image horizontally so that it fills the background area width and to rescale the image vertically so that it fills the background area height.</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-335-3.10" class="primary dom script">
|
|
<td><strong>
|
|
<a href="background-335.htm">background-335</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background shorthand - only one <box> value
|
|
<ul class="assert">
|
|
<li>Check if one <box> value is present then it sets both 'background-origin' and 'background-clip' to that value</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
<tr id="background-336-3.10" class="primary dom script">
|
|
<td><strong>
|
|
<a href="background-336.htm">background-336</a></strong></td>
|
|
<td></td>
|
|
<td><abbr class="dom" title="Requires Document Object Model support">DOM/JS</abbr><abbr class="script" title="Executes tests in script">Script</abbr></td>
|
|
<td>background shorthand - two <box> values
|
|
<ul class="assert">
|
|
<li>Check if two <box> values are present, then the first sets 'background-origin' and the second 'background-clip'</li>
|
|
</ul>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
<tbody id="s3.10.#background">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.10.#ltbg-layergt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.10.#ltfinal-bg-layergt">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.11">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.11">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#special-backgrounds">3.11 Backgrounds of Special Elements</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.11.1">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.11.1">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#root-background">3.11.1 The Canvas Background and the Root Element</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.11.1.#background-painting-area4">
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.11.2">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.11.2">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#body-background">3.11.2 The Canvas Background and the HTML <body> Element</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
<tbody id="s3.11.3">
|
|
<tr><th colspan="4" scope="rowgroup">
|
|
<a href="#s3.11.3">+</a>
|
|
<a href="http://www.w3.org/TR/css3-background/#first-line-background">3.11.3 The ‘::first-line’ Pseudo-element‘s Background</a></th></tr>
|
|
<!-- 0 tests -->
|
|
</tbody>
|
|
</table>
|
|
|
|
</body>
|
|
</html> |