mirror of
https://github.com/servo/servo.git
synced 2025-08-06 22:15:33 +01:00
Update CSS tests to revision 31d63cc79bd4c929ed582229e936d7b389f3e6ab
This commit is contained in:
James Graham
parent
1a81b18b9f
commit
2c9faf5363
91915 changed files with 5979820 additions and 0 deletions
51
tests/wpt/css-tests/css-images-3_dev/html/chapter-1.htm
Normal file
51
tests/wpt/css-tests/css-images-3_dev/html/chapter-1.htm
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Introduction - CSS Images 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 Images Module Level 3 CR Test Suite</h1>
|
||||
<h2>Introduction (0 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="s1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#intro">1 Introduction</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#placement">1.1 Module Interactions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#values">1.2 Values</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
51
tests/wpt/css-tests/css-images-3_dev/html/chapter-2.htm
Normal file
51
tests/wpt/css-tests/css-images-3_dev/html/chapter-2.htm
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Resolution Units: the <resolution> type - CSS Images 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 Images Module Level 3 CR Test Suite</h1>
|
||||
<h2>Resolution Units: the <resolution> type (0 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="s2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#resolution-units">2 Resolution Units: the <resolution> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#dpcm">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#dpi">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#dppx">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s2.#resolution-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
136
tests/wpt/css-tests/css-images-3_dev/html/chapter-3.htm
Normal file
136
tests/wpt/css-tests/css-images-3_dev/html/chapter-3.htm
Normal file
|
|
@ -0,0 +1,136 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Image Values: the <image> type - CSS Images 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 Images Module Level 3 CR Test Suite</h1>
|
||||
<h2>Image Values: the <image> type (5 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-images/#image-values">3 Image Values: the <image> type</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#image-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.#invalid-image">
|
||||
<!-- 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-images/#url-notation">3.1 Image References and Image Slices: the ‘<url>’ type and ‘url()’ notation</a></th></tr>
|
||||
<!-- 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-images/#image-notation">3.2 Image Fallbacks and Annotations: the ‘image()’ notation</a></th></tr>
|
||||
<!-- 5 tests -->
|
||||
<tr id="css-image-fallbacks-and-annotations-3.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="css-image-fallbacks-and-annotations.htm">css-image-fallbacks-and-annotations</a></strong></td>
|
||||
<td><a href="reference/css-image-fallbacks-and-annotations-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Image Fallbacks and Annotations: the &acirc;&#8364;&#732;image()&acirc;&#8364;&#8482; notation
|
||||
<ul class="assert">
|
||||
<li>When the image doesn't load, the background color is still there to ensure that the white text is readable.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-image-fallbacks-and-annotations002-3.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="css-image-fallbacks-and-annotations002.htm">css-image-fallbacks-and-annotations002</a></strong></td>
|
||||
<td><a href="reference/css-image-fallbacks-and-annotations-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Image Fallbacks and Annotations: the &acirc;&#8364;&#732;image()&acirc;&#8364;&#8482; notation
|
||||
<ul class="assert">
|
||||
<li>The &acirc;&#8364;&#732;image()&acirc;&#8364;&#8482; function load the image.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-image-fallbacks-and-annotations003-3.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="css-image-fallbacks-and-annotations003.htm">css-image-fallbacks-and-annotations003</a></strong></td>
|
||||
<td><a href="reference/css-image-fallbacks-and-annotations-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Image Fallbacks and Annotations: the &acirc;&#8364;&#732;image()&acirc;&#8364;&#8482; notation
|
||||
<ul class="assert">
|
||||
<li>The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-image-fallbacks-and-annotations004-3.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="css-image-fallbacks-and-annotations004.htm">css-image-fallbacks-and-annotations004</a></strong></td>
|
||||
<td><a href="reference/css-image-fallbacks-and-annotations-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Image Fallbacks and Annotations: the &acirc;&#8364;&#732;image()&acirc;&#8364;&#8482; notation
|
||||
<ul class="assert">
|
||||
<li>The rule below would tell the UA to load The first file if it can; failing that to load The second file.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
<tr id="css-image-fallbacks-and-annotations005-3.2" class="primary">
|
||||
<td><strong>
|
||||
<a href="css-image-fallbacks-and-annotations005.htm">css-image-fallbacks-and-annotations005</a></strong></td>
|
||||
<td><a href="reference/css-image-fallbacks-and-annotations-ref.htm">=</a> </td>
|
||||
<td></td>
|
||||
<td>CSS Image Fallbacks and Annotations: the &acirc;&#8364;&#732;image()&acirc;&#8364;&#8482; notation
|
||||
<ul class="assert">
|
||||
<li>The &acirc;&#8364;&#732;image()&acirc;&#8364;&#8482; function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody id="s3.2.#image-decl-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.#image-list-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#image-fragments">3.2.1 Image Fragments</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#image-fallbacks">3.2.2 Image Fallbacks</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s3.2.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s3.2.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#color-images">3.2.3 Solid-color Images</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
171
tests/wpt/css-tests/css-images-3_dev/html/chapter-4.htm
Normal file
171
tests/wpt/css-tests/css-images-3_dev/html/chapter-4.htm
Normal file
|
|
@ -0,0 +1,171 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Gradients - CSS Images 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 Images Module Level 3 CR Test Suite</h1>
|
||||
<h2>Gradients (0 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="s4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#gradients">4 Gradients</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#gradient-box">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.#gradient-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#linear-gradients">4.1 Linear Gradients: the ‘linear-gradient()’ notation</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#linear-gradient-syntax">4.1.1 linear-gradient() syntax</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#gradient-line">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#linear-gradient-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.1.#side-or-corner">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.1.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.1.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#linear-gradient-examples">4.1.2 Linear Gradient Examples</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#radial-gradients">4.2 Radial Gradients: the ‘radial-gradient()’ notation</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.#ending-shape">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#radial-gradient-syntax">4.2.1 radial-gradient() Syntax</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-closest-corner">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-closest-side">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-farthest-corner">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-farthest-side">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-gradient-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-position">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-shape">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-size">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-size-circle">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#radial-size-ellipse">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#shape">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.1.#size">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#radial-color-stops">4.2.2 Placing Color Stops</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.2.#gradient-ray">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#degenerate-radials">4.2.3 Degenerate Radial Gradients</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.2.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.2.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#radial-gradient-examples">4.2.4 Radial Gradient Examples</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#repeating-gradients">4.3 Repeating Gradients: the ‘repeating-linear-gradient()’ and ‘repeating-radial-gradient()’ notations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#find-the-average-color-of-a-gradient">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#repeating-linear-gradient-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.3.#repeating-radial-gradient-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s4.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#color-stop-syntax">4.4 Gradient Color-Stops</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s4.4.#color-stop-type">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
4675
tests/wpt/css-tests/css-images-3_dev/html/chapter-5.htm
Normal file
4675
tests/wpt/css-tests/css-images-3_dev/html/chapter-5.htm
Normal file
File diff suppressed because it is too large
Load diff
71
tests/wpt/css-tests/css-images-3_dev/html/chapter-6.htm
Normal file
71
tests/wpt/css-tests/css-images-3_dev/html/chapter-6.htm
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Image Processing - CSS Images 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 Images Module Level 3 CR Test Suite</h1>
|
||||
<h2>Image Processing (1 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="s6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#image-processing">6 Image Processing</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#the-image-resolution">6.1 Overriding Image Resolutions: the ‘image-resolution’ property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#image-resolution">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.1.#intrinsic-resolution">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s6.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#the-image-orientation">6.2 Orienting an Image on the Page: the ‘image-orientation’ property</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s6.2.#image-orientation">
|
||||
<!-- 1 tests -->
|
||||
<tr id="img-orient-012-6.2.#image-orientation" class="primary">
|
||||
<td><strong>
|
||||
<a href="img-orient-012.htm">img-orient-012</a></strong></td>
|
||||
<td></td>
|
||||
<td></td>
|
||||
<td>Image Orientation - Negative Values
|
||||
<ul class="assert">
|
||||
<li>A negative value for 'image-orientation' rotates the image to the left (in a counter-clockwise direction) by the given number of degrees.</li>
|
||||
</ul>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
153
tests/wpt/css-tests/css-images-3_dev/html/chapter-7.htm
Normal file
153
tests/wpt/css-tests/css-images-3_dev/html/chapter-7.htm
Normal file
|
|
@ -0,0 +1,153 @@
|
|||
|
||||
|
||||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
|
||||
<html>
|
||||
<head>
|
||||
<title>Conformance - CSS Images 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 Images Module Level 3 CR Test Suite</h1>
|
||||
<h2>Conformance (0 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="s7">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#conformance">7 Conformance</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.1">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.1">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#conventions">7.1 Document Conventions</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.2">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#conformance-classes">7.2 Conformance Classes</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#authoring-tool">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#renderer">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.2.#style-sheet">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.3">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.3">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#partial">7.3 Partial Implementations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.4">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.4">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#experimental">7.4 Experimental Implementations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.5">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.5">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#testing">7.5 Non-Experimental Implementations</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s7.6">
|
||||
<tr><th colspan="4" scope="rowgroup">
|
||||
<a href="#s7.6">+</a>
|
||||
<a href="http://www.w3.org/TR/css3-images/#cr-exit-criteria">7.6 CR Exit Criteria</a></th></tr>
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS1">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS21">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS3-2D-TRANSFORMS">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS3BG">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS3COLOR">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS3PAGE">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#CSS3VAL">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#MEDIA-FRAGS">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#MEDIAQ">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#RFC2119">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#SMIL10">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#SVG11">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#abstract">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#acknowledgments">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#changes">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#contents">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#longstatus-date">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#normative-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#other-references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#property-index">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#references">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
<tbody id="s.#status">
|
||||
<!-- 0 tests -->
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Image Fallbacks and Annotations: the ‘image()’ notation</title>
|
||||
<link href="mailto:yo9ega@aol.com" rel="author" title="Hirokazu Egashira">
|
||||
<link href="http://www.w3.org/TR/css3-images/#image-notation" rel="help">
|
||||
<link href="reference/css-image-fallbacks-and-annotations-ref.htm" rel="match">
|
||||
<meta content="When the image doesn't load, the background color is still there to ensure that the white text is readable." name="assert">
|
||||
<style type="text/css">
|
||||
.square{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
background: image("green.png", green);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if background is green and no red.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Image Fallbacks and Annotations: the ‘image()’ notation</title>
|
||||
<link href="mailto:yo9ega@aol.com" rel="author" title="Hirokazu Egashira">
|
||||
<link href="http://www.w3.org/TR/css3-images/#image-notation" rel="help">
|
||||
<link href="reference/css-image-fallbacks-and-annotations-ref.htm" rel="match">
|
||||
<meta content="The ‘image()’ function load the image." name="assert">
|
||||
<style type="text/css">
|
||||
.square{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
color: white;
|
||||
background-color: red;
|
||||
background-image: image("support/1x1-green.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if background is green and no red.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Image Fallbacks and Annotations: the ‘image()’ notation</title>
|
||||
<link href="mailto:yo9ega@aol.com" rel="author" title="Hirokazu Egashira">
|
||||
<link href="http://www.w3.org/TR/css3-images/#image-notation" rel="help">
|
||||
<link href="reference/css-image-fallbacks-and-annotations-ref.htm" rel="match">
|
||||
<meta content="The rule below would tell the UA to load The first file if it can; failing that to load The second file; failing that to display The third file." name="assert">
|
||||
<style type="text/css">
|
||||
.square{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
background-image: image("1x1-green.svg", "support/1x1-green.png","support/1x1-green.gif");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if background is green and no red.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Image Fallbacks and Annotations: the ‘image()’ notation</title>
|
||||
<link href="mailto:yo9ega@aol.com" rel="author" title="Hirokazu Egashira">
|
||||
<link href="http://www.w3.org/TR/css3-images/#image-notation" rel="help">
|
||||
<link href="reference/css-image-fallbacks-and-annotations-ref.htm" rel="match">
|
||||
<meta content="The rule below would tell the UA to load The first file if it can; failing that to load The second file." name="assert">
|
||||
<style type="text/css">
|
||||
.square{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
background-image: image("1x1-green.svg", "1x1-green.png", "support/1x1-green.gif");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if background is green and no red.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head>
|
||||
<title>CSS Image Fallbacks and Annotations: the ‘image()’ notation</title>
|
||||
<link href="mailto:yo9ega@aol.com" rel="author" title="Hirokazu Egashira">
|
||||
<link href="http://www.w3.org/TR/css3-images/#image-notation" rel="help">
|
||||
<link href="reference/css-image-fallbacks-and-annotations-ref.htm" rel="match">
|
||||
<meta content="The ‘image()’ function specifies only a color without any URLs, the function immediately falls back to representing a solid-color image of the chosen color." name="assert">
|
||||
<style type="text/css">
|
||||
.square{
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
background-color: red;
|
||||
background-image: image(rgba(0,0,255,0.5)), url("support/1x1-green.png");
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<p>Test passes if background is pale green and no green and no red.</p>
|
||||
<div class="square"></div>
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html>
|
||||
<html><head><title>CSS Basic User Interface Test: Cursor property, url value</title>
|
||||
<link href="mailto:chris@w3.org" rel="author" title="Chris Lilley">
|
||||
<link href="http://www.w3.org/TR/css3-ui/#cursor" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#default-object-size" rel="help">
|
||||
<meta content="interact image svg" name="flags">
|
||||
<meta charset="UTF-8">
|
||||
<meta content="Test checks that an SVG image with no fixed size is supported as a custom cursor at the default object size for cursor images." name="assert">
|
||||
<style>
|
||||
div.test{background: #D2B48C; border: 2px solid #555;
|
||||
cursor:url(support/cursors/woolly.svg) 41 32, help;
|
||||
width: 128px; height: 128px}
|
||||
</style>
|
||||
</head><body>
|
||||
<p>The test passes if, when moved inside the colored rectangle, the cursor looks like a sheep AND is not a sheep when outside.</p>
|
||||
<p>If inside the rectangle the cursor does not change, or looks like a help cursor, the test fails.</p>
|
||||
<div class="test"> </div>
|
||||
</body></html>
|
||||
20
tests/wpt/css-tests/css-images-3_dev/html/image-fit-001.htm
Normal file
20
tests/wpt/css-tests/css-images-3_dev/html/image-fit-001.htm
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Object Fit - initial value</title>
|
||||
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#object-fit">
|
||||
<meta name="assert" content="The initial value of the 'object-fit' property is 'fill'.">
|
||||
<style type="text/css">
|
||||
img {
|
||||
background: red;
|
||||
height: 100px;
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>A green block appears below. There must be no red on the page.</div>
|
||||
<div><img src="support/swatch-green.png" alt="Failed: image missing"></div>
|
||||
</body>
|
||||
</html>
|
||||
23
tests/wpt/css-tests/css-images-3_dev/html/image-fit-006.htm
Normal file
23
tests/wpt/css-tests/css-images-3_dev/html/image-fit-006.htm
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Object Fit - 'fill', explicit 'height'/'width'</title>
|
||||
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#object-fit">
|
||||
<meta name="assert" content="The 'fill' value of the 'object-fit' property does not affect the usual calculation of the used 'height' and 'width.">
|
||||
<meta name="assert" content="The 'fill' value of the 'image-scaling' property scales the content height and width independently so that the edges of the content just meet the edges of the box established by the used 'height' and 'width'.">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 5px solid blue;
|
||||
height: 50px;
|
||||
width: 100px;
|
||||
object-fit: fill;
|
||||
background: red;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>The image below should fill the blue border with no red between the border and the image.</div>
|
||||
<div><img src="support/intrinsic-size.jpg" alt="Failed: image missing"></div>
|
||||
</body>
|
||||
</html>
|
||||
18
tests/wpt/css-tests/css-images-3_dev/html/img-orient-012.htm
Normal file
18
tests/wpt/css-tests/css-images-3_dev/html/img-orient-012.htm
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
|
||||
<html>
|
||||
<head>
|
||||
<title>CSS Test: Image Orientation - Negative Values</title>
|
||||
<link rel="author" title="Tom Clancy" href="mailto:tclancy@revenution.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#image-orientation">
|
||||
<meta name="assert" content="A negative value for 'image-orientation' rotates the image to the left (in a counter-clockwise direction) by the given number of degrees. ">
|
||||
<style type="text/css">
|
||||
img.turn { image-orientation: -90deg; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div>
|
||||
<p>This arrow should appear sideways, with the tip of the arrow pointing left.</p>
|
||||
<img src="support/intrinsic-size.png" alt="FAIL: missing image" class="turn">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html class="reftest-wait"><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
canvas {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
<script>
|
||||
function drawImageToCanvases(imageURI) {
|
||||
var image = new Image();
|
||||
image.onload = function() {
|
||||
var canvasElems = document.getElementsByTagName("canvas");
|
||||
for (var i = 0; i < canvasElems.length; i++) {
|
||||
var ctx = canvasElems[i].getContext("2d");
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
image.src = imageURI;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="drawImageToCanvases('support/colors-16x8.png')">
|
||||
<!-- big/wide: -->
|
||||
<canvas width="16" class="bigWide tr" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide bl" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide tl" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide br" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide tc" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide cr" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide" height="8"></canvas>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<canvas width="16" class="bigTall tr" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall bl" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall tl" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall br" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall tc" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall cr" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall" height="8"></canvas>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<canvas width="16" class="small tr" height="8"></canvas>
|
||||
<canvas width="16" class="small bl" height="8"></canvas>
|
||||
<canvas width="16" class="small tl" height="8"></canvas>
|
||||
<canvas width="16" class="small br" height="8"></canvas>
|
||||
<canvas width="16" class="small tc" height="8"></canvas>
|
||||
<canvas width="16" class="small cr" height="8"></canvas>
|
||||
<canvas width="16" class="small" height="8"></canvas>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html class="reftest-wait"><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on canvas element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
canvas {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
<script>
|
||||
function drawImageToCanvases(imageURI) {
|
||||
var image = new Image();
|
||||
image.onload = function() {
|
||||
var canvasElems = document.getElementsByTagName("canvas");
|
||||
for (var i = 0; i < canvasElems.length; i++) {
|
||||
var ctx = canvasElems[i].getContext("2d");
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
image.src = imageURI;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="drawImageToCanvases('support/colors-8x16.png')">
|
||||
<!-- big/wide: -->
|
||||
<canvas width="8" class="bigWide tr" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide bl" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide tl" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide br" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide tc" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide cr" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide" height="16"></canvas>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<canvas width="8" class="bigTall tr" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall bl" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall tl" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall br" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall tc" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall cr" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall" height="16"></canvas>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<canvas width="8" class="small tr" height="16"></canvas>
|
||||
<canvas width="8" class="small bl" height="16"></canvas>
|
||||
<canvas width="8" class="small tl" height="16"></canvas>
|
||||
<canvas width="8" class="small br" height="16"></canvas>
|
||||
<canvas width="8" class="small tc" height="16"></canvas>
|
||||
<canvas width="8" class="small cr" height="16"></canvas>
|
||||
<canvas width="8" class="small" height="16"></canvas>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide br">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall br">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.svg" class="small tr">
|
||||
<embed src="support/colors-16x8.svg" class="small bl">
|
||||
<embed src="support/colors-16x8.svg" class="small tl">
|
||||
<embed src="support/colors-16x8.svg" class="small br">
|
||||
<embed src="support/colors-16x8.svg" class="small tc">
|
||||
<embed src="support/colors-16x8.svg" class="small cr">
|
||||
<embed src="support/colors-16x8.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.svg" class="bigWide tr">
|
||||
<img src="support/colors-16x8.svg" class="bigWide bl">
|
||||
<img src="support/colors-16x8.svg" class="bigWide tl">
|
||||
<img src="support/colors-16x8.svg" class="bigWide br">
|
||||
<img src="support/colors-16x8.svg" class="bigWide tc">
|
||||
<img src="support/colors-16x8.svg" class="bigWide cr">
|
||||
<img src="support/colors-16x8.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.svg" class="bigTall tr">
|
||||
<img src="support/colors-16x8.svg" class="bigTall bl">
|
||||
<img src="support/colors-16x8.svg" class="bigTall tl">
|
||||
<img src="support/colors-16x8.svg" class="bigTall br">
|
||||
<img src="support/colors-16x8.svg" class="bigTall tc">
|
||||
<img src="support/colors-16x8.svg" class="bigTall cr">
|
||||
<img src="support/colors-16x8.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.svg" class="small tr">
|
||||
<img src="support/colors-16x8.svg" class="small bl">
|
||||
<img src="support/colors-16x8.svg" class="small tl">
|
||||
<img src="support/colors-16x8.svg" class="small br">
|
||||
<img src="support/colors-16x8.svg" class="small tc">
|
||||
<img src="support/colors-16x8.svg" class="small cr">
|
||||
<img src="support/colors-16x8.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.svg" class="small tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="small bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="small tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="small br"></object>
|
||||
<object data="support/colors-16x8.svg" class="small tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="small cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.svg" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide br">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall br">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.svg" class="small tr">
|
||||
<embed src="support/colors-8x16.svg" class="small bl">
|
||||
<embed src="support/colors-8x16.svg" class="small tl">
|
||||
<embed src="support/colors-8x16.svg" class="small br">
|
||||
<embed src="support/colors-8x16.svg" class="small tc">
|
||||
<embed src="support/colors-8x16.svg" class="small cr">
|
||||
<embed src="support/colors-8x16.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.svg" class="bigWide tr">
|
||||
<img src="support/colors-8x16.svg" class="bigWide bl">
|
||||
<img src="support/colors-8x16.svg" class="bigWide tl">
|
||||
<img src="support/colors-8x16.svg" class="bigWide br">
|
||||
<img src="support/colors-8x16.svg" class="bigWide tc">
|
||||
<img src="support/colors-8x16.svg" class="bigWide cr">
|
||||
<img src="support/colors-8x16.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.svg" class="bigTall tr">
|
||||
<img src="support/colors-8x16.svg" class="bigTall bl">
|
||||
<img src="support/colors-8x16.svg" class="bigTall tl">
|
||||
<img src="support/colors-8x16.svg" class="bigTall br">
|
||||
<img src="support/colors-8x16.svg" class="bigTall tc">
|
||||
<img src="support/colors-8x16.svg" class="bigTall cr">
|
||||
<img src="support/colors-8x16.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.svg" class="small tr">
|
||||
<img src="support/colors-8x16.svg" class="small bl">
|
||||
<img src="support/colors-8x16.svg" class="small tl">
|
||||
<img src="support/colors-8x16.svg" class="small br">
|
||||
<img src="support/colors-8x16.svg" class="small tc">
|
||||
<img src="support/colors-8x16.svg" class="small cr">
|
||||
<img src="support/colors-8x16.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.svg" class="small tr"></object>
|
||||
<object data="support/colors-8x16.svg" class="small bl"></object>
|
||||
<object data="support/colors-8x16.svg" class="small tl"></object>
|
||||
<object data="support/colors-8x16.svg" class="small br"></object>
|
||||
<object data="support/colors-8x16.svg" class="small tc"></object>
|
||||
<object data="support/colors-8x16.svg" class="small cr"></object>
|
||||
<object data="support/colors-8x16.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.svg" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small br"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide br">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall br">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small tr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small bl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small tl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small br">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small tc">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small cr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide tr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide bl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide tl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide br">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide tc">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide cr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall tr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall bl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall tl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall br">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall tc">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall cr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8-noSize.svg" class="small tr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small bl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small tl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small br">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small tc">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small cr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8-noSize.svg" class="small tr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small bl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small tl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small br"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small tc"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small cr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small br"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide br">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall br">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small tr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small bl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small tl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small br">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small tc">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small cr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide tr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide bl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide tl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide br">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide tc">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide cr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall tr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall bl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall tl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall br">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall tc">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall cr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16-noSize.svg" class="small tr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small bl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small tl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small br">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small tc">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small cr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16-noSize.svg" class="small tr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small bl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small tl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small br"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small tc"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small cr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small br"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small tr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small bl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small tl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small br">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small tc">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small cr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide br">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall br">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small tr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small bl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small tl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small br">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small tc">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small cr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small br"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small tr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small bl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small tl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small br">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small tc">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small cr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide br">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall br">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small tr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small bl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small tl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small br">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small tc">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small cr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small br"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-contain-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html class="reftest-wait"><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
canvas {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
<script>
|
||||
function drawImageToCanvases(imageURI) {
|
||||
var image = new Image();
|
||||
image.onload = function() {
|
||||
var canvasElems = document.getElementsByTagName("canvas");
|
||||
for (var i = 0; i < canvasElems.length; i++) {
|
||||
var ctx = canvasElems[i].getContext("2d");
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
image.src = imageURI;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="drawImageToCanvases('support/colors-16x8.png')">
|
||||
<!-- big/wide: -->
|
||||
<canvas width="16" class="bigWide tr" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide bl" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide tl" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide br" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide tc" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide cr" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide" height="8"></canvas>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<canvas width="16" class="bigTall tr" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall bl" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall tl" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall br" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall tc" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall cr" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall" height="8"></canvas>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<canvas width="16" class="small tr" height="8"></canvas>
|
||||
<canvas width="16" class="small bl" height="8"></canvas>
|
||||
<canvas width="16" class="small tl" height="8"></canvas>
|
||||
<canvas width="16" class="small br" height="8"></canvas>
|
||||
<canvas width="16" class="small tc" height="8"></canvas>
|
||||
<canvas width="16" class="small cr" height="8"></canvas>
|
||||
<canvas width="16" class="small" height="8"></canvas>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html class="reftest-wait"><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on canvas element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
canvas {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
<script>
|
||||
function drawImageToCanvases(imageURI) {
|
||||
var image = new Image();
|
||||
image.onload = function() {
|
||||
var canvasElems = document.getElementsByTagName("canvas");
|
||||
for (var i = 0; i < canvasElems.length; i++) {
|
||||
var ctx = canvasElems[i].getContext("2d");
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
image.src = imageURI;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="drawImageToCanvases('support/colors-8x16.png')">
|
||||
<!-- big/wide: -->
|
||||
<canvas width="8" class="bigWide tr" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide bl" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide tl" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide br" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide tc" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide cr" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide" height="16"></canvas>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<canvas width="8" class="bigTall tr" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall bl" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall tl" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall br" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall tc" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall cr" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall" height="16"></canvas>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<canvas width="8" class="small tr" height="16"></canvas>
|
||||
<canvas width="8" class="small bl" height="16"></canvas>
|
||||
<canvas width="8" class="small tl" height="16"></canvas>
|
||||
<canvas width="8" class="small br" height="16"></canvas>
|
||||
<canvas width="8" class="small tc" height="16"></canvas>
|
||||
<canvas width="8" class="small cr" height="16"></canvas>
|
||||
<canvas width="8" class="small" height="16"></canvas>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide br">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall br">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.svg" class="small tr">
|
||||
<embed src="support/colors-16x8.svg" class="small bl">
|
||||
<embed src="support/colors-16x8.svg" class="small tl">
|
||||
<embed src="support/colors-16x8.svg" class="small br">
|
||||
<embed src="support/colors-16x8.svg" class="small tc">
|
||||
<embed src="support/colors-16x8.svg" class="small cr">
|
||||
<embed src="support/colors-16x8.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.svg" class="bigWide tr">
|
||||
<img src="support/colors-16x8.svg" class="bigWide bl">
|
||||
<img src="support/colors-16x8.svg" class="bigWide tl">
|
||||
<img src="support/colors-16x8.svg" class="bigWide br">
|
||||
<img src="support/colors-16x8.svg" class="bigWide tc">
|
||||
<img src="support/colors-16x8.svg" class="bigWide cr">
|
||||
<img src="support/colors-16x8.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.svg" class="bigTall tr">
|
||||
<img src="support/colors-16x8.svg" class="bigTall bl">
|
||||
<img src="support/colors-16x8.svg" class="bigTall tl">
|
||||
<img src="support/colors-16x8.svg" class="bigTall br">
|
||||
<img src="support/colors-16x8.svg" class="bigTall tc">
|
||||
<img src="support/colors-16x8.svg" class="bigTall cr">
|
||||
<img src="support/colors-16x8.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.svg" class="small tr">
|
||||
<img src="support/colors-16x8.svg" class="small bl">
|
||||
<img src="support/colors-16x8.svg" class="small tl">
|
||||
<img src="support/colors-16x8.svg" class="small br">
|
||||
<img src="support/colors-16x8.svg" class="small tc">
|
||||
<img src="support/colors-16x8.svg" class="small cr">
|
||||
<img src="support/colors-16x8.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.svg" class="small tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="small bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="small tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="small br"></object>
|
||||
<object data="support/colors-16x8.svg" class="small tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="small cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.svg" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide br">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall br">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.svg" class="small tr">
|
||||
<embed src="support/colors-8x16.svg" class="small bl">
|
||||
<embed src="support/colors-8x16.svg" class="small tl">
|
||||
<embed src="support/colors-8x16.svg" class="small br">
|
||||
<embed src="support/colors-8x16.svg" class="small tc">
|
||||
<embed src="support/colors-8x16.svg" class="small cr">
|
||||
<embed src="support/colors-8x16.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.svg" class="bigWide tr">
|
||||
<img src="support/colors-8x16.svg" class="bigWide bl">
|
||||
<img src="support/colors-8x16.svg" class="bigWide tl">
|
||||
<img src="support/colors-8x16.svg" class="bigWide br">
|
||||
<img src="support/colors-8x16.svg" class="bigWide tc">
|
||||
<img src="support/colors-8x16.svg" class="bigWide cr">
|
||||
<img src="support/colors-8x16.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.svg" class="bigTall tr">
|
||||
<img src="support/colors-8x16.svg" class="bigTall bl">
|
||||
<img src="support/colors-8x16.svg" class="bigTall tl">
|
||||
<img src="support/colors-8x16.svg" class="bigTall br">
|
||||
<img src="support/colors-8x16.svg" class="bigTall tc">
|
||||
<img src="support/colors-8x16.svg" class="bigTall cr">
|
||||
<img src="support/colors-8x16.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.svg" class="small tr">
|
||||
<img src="support/colors-8x16.svg" class="small bl">
|
||||
<img src="support/colors-8x16.svg" class="small tl">
|
||||
<img src="support/colors-8x16.svg" class="small br">
|
||||
<img src="support/colors-8x16.svg" class="small tc">
|
||||
<img src="support/colors-8x16.svg" class="small cr">
|
||||
<img src="support/colors-8x16.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.svg" class="small tr"></object>
|
||||
<object data="support/colors-8x16.svg" class="small bl"></object>
|
||||
<object data="support/colors-8x16.svg" class="small tl"></object>
|
||||
<object data="support/colors-8x16.svg" class="small br"></object>
|
||||
<object data="support/colors-8x16.svg" class="small tc"></object>
|
||||
<object data="support/colors-8x16.svg" class="small cr"></object>
|
||||
<object data="support/colors-8x16.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.svg" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small br"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide tr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide bl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide tl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide br">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide tc">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide cr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall tr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall bl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall tl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall br">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall tc">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall cr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small tr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small bl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small tl">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small br">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small tc">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small cr">
|
||||
<embed src="support/colors-16x8-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide tr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide bl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide tl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide br">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide tc">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide cr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall tr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall bl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall tl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall br">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall tc">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall cr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8-noSize.svg" class="small tr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small bl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small tl">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small br">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small tc">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small cr">
|
||||
<img src="support/colors-16x8-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8-noSize.svg" class="small tr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small bl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small tl"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small br"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small tc"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small cr"></object>
|
||||
<object data="support/colors-16x8-noSize.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-003-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small tr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small bl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small tl"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small br"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small tc"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small cr"></video>
|
||||
<video poster="support/colors-16x8-noSize.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide tr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide bl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide tl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide br">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide tc">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide cr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall tr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall bl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall tl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall br">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall tc">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall cr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small tr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small bl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small tl">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small br">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small tc">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small cr">
|
||||
<embed src="support/colors-8x16-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide tr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide bl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide tl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide br">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide tc">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide cr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall tr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall bl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall tl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall br">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall tc">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall cr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16-noSize.svg" class="small tr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small bl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small tl">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small br">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small tc">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small cr">
|
||||
<img src="support/colors-8x16-noSize.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16-noSize.svg" class="small tr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small bl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small tl"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small br"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small tc"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small cr"></object>
|
||||
<object data="support/colors-8x16-noSize.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-004-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small tr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small bl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small tl"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small br"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small tc"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small cr"></video>
|
||||
<video poster="support/colors-8x16-noSize.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide tr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide bl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide tl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide br">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide tc">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide cr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall tr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall bl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall tl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall br">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall tc">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall cr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small tr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small bl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small tl">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small br">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small tc">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small cr">
|
||||
<embed src="support/colors-16x8-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide tr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide bl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide tl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide br">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide tc">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide cr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall tr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall bl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall tl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall br">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall tc">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall cr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small tr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small bl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small tl">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small br">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small tc">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small cr">
|
||||
<img src="support/colors-16x8-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small tr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small bl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small tl"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small br"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small tc"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small cr"></object>
|
||||
<object data="support/colors-16x8-parDefault.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-005-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small tr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small bl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small tl"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small br"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small tc"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small cr"></video>
|
||||
<video poster="support/colors-16x8-parDefault.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide tr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide bl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide tl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide br">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide tc">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide cr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall tr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall bl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall tl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall br">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall tc">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall cr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small tr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small bl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small tl">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small br">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small tc">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small cr">
|
||||
<embed src="support/colors-8x16-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide tr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide bl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide tl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide br">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide tc">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide cr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall tr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall bl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall tl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall br">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall tc">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall cr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small tr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small bl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small tl">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small br">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small tc">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small cr">
|
||||
<img src="support/colors-8x16-parDefault.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small tr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small bl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small tl"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small br"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small tc"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small cr"></object>
|
||||
<object data="support/colors-8x16-parDefault.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-cover-svg-006-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small tr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small bl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small tl"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small br"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small tc"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small cr"></video>
|
||||
<video poster="support/colors-8x16-parDefault.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html class="reftest-wait"><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
canvas {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
<script>
|
||||
function drawImageToCanvases(imageURI) {
|
||||
var image = new Image();
|
||||
image.onload = function() {
|
||||
var canvasElems = document.getElementsByTagName("canvas");
|
||||
for (var i = 0; i < canvasElems.length; i++) {
|
||||
var ctx = canvasElems[i].getContext("2d");
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
image.src = imageURI;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="drawImageToCanvases('support/colors-16x8.png')">
|
||||
<!-- big/wide: -->
|
||||
<canvas width="16" class="bigWide tr" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide bl" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide tl" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide br" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide tc" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide cr" height="8"></canvas>
|
||||
<canvas width="16" class="bigWide" height="8"></canvas>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<canvas width="16" class="bigTall tr" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall bl" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall tl" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall br" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall tc" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall cr" height="8"></canvas>
|
||||
<canvas width="16" class="bigTall" height="8"></canvas>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<canvas width="16" class="small tr" height="8"></canvas>
|
||||
<canvas width="16" class="small bl" height="8"></canvas>
|
||||
<canvas width="16" class="small tl" height="8"></canvas>
|
||||
<canvas width="16" class="small br" height="8"></canvas>
|
||||
<canvas width="16" class="small tc" height="8"></canvas>
|
||||
<canvas width="16" class="small cr" height="8"></canvas>
|
||||
<canvas width="16" class="small" height="8"></canvas>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,90 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html class="reftest-wait"><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on canvas element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
canvas {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
<script>
|
||||
function drawImageToCanvases(imageURI) {
|
||||
var image = new Image();
|
||||
image.onload = function() {
|
||||
var canvasElems = document.getElementsByTagName("canvas");
|
||||
for (var i = 0; i < canvasElems.length; i++) {
|
||||
var ctx = canvasElems[i].getContext("2d");
|
||||
ctx.drawImage(image, 0, 0);
|
||||
}
|
||||
document.documentElement.removeAttribute("class");
|
||||
}
|
||||
image.src = imageURI;
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body onload="drawImageToCanvases('support/colors-8x16.png')">
|
||||
<!-- big/wide: -->
|
||||
<canvas width="8" class="bigWide tr" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide bl" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide tl" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide br" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide tc" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide cr" height="16"></canvas>
|
||||
<canvas width="8" class="bigWide" height="16"></canvas>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<canvas width="8" class="bigTall tr" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall bl" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall tl" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall br" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall tc" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall cr" height="16"></canvas>
|
||||
<canvas width="8" class="bigTall" height="16"></canvas>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<canvas width="8" class="small tr" height="16"></canvas>
|
||||
<canvas width="8" class="small bl" height="16"></canvas>
|
||||
<canvas width="8" class="small tl" height="16"></canvas>
|
||||
<canvas width="8" class="small br" height="16"></canvas>
|
||||
<canvas width="8" class="small tc" height="16"></canvas>
|
||||
<canvas width="8" class="small cr" height="16"></canvas>
|
||||
<canvas width="8" class="small" height="16"></canvas>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-png-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: pixelated;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide br">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall br">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.svg" class="small tr">
|
||||
<embed src="support/colors-16x8.svg" class="small bl">
|
||||
<embed src="support/colors-16x8.svg" class="small tl">
|
||||
<embed src="support/colors-16x8.svg" class="small br">
|
||||
<embed src="support/colors-16x8.svg" class="small tc">
|
||||
<embed src="support/colors-16x8.svg" class="small cr">
|
||||
<embed src="support/colors-16x8.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.svg" class="bigWide tr">
|
||||
<img src="support/colors-16x8.svg" class="bigWide bl">
|
||||
<img src="support/colors-16x8.svg" class="bigWide tl">
|
||||
<img src="support/colors-16x8.svg" class="bigWide br">
|
||||
<img src="support/colors-16x8.svg" class="bigWide tc">
|
||||
<img src="support/colors-16x8.svg" class="bigWide cr">
|
||||
<img src="support/colors-16x8.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.svg" class="bigTall tr">
|
||||
<img src="support/colors-16x8.svg" class="bigTall bl">
|
||||
<img src="support/colors-16x8.svg" class="bigTall tl">
|
||||
<img src="support/colors-16x8.svg" class="bigTall br">
|
||||
<img src="support/colors-16x8.svg" class="bigTall tc">
|
||||
<img src="support/colors-16x8.svg" class="bigTall cr">
|
||||
<img src="support/colors-16x8.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.svg" class="small tr">
|
||||
<img src="support/colors-16x8.svg" class="small bl">
|
||||
<img src="support/colors-16x8.svg" class="small tl">
|
||||
<img src="support/colors-16x8.svg" class="small br">
|
||||
<img src="support/colors-16x8.svg" class="small tc">
|
||||
<img src="support/colors-16x8.svg" class="small cr">
|
||||
<img src="support/colors-16x8.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.svg" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.svg" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.svg" class="small tr"></object>
|
||||
<object data="support/colors-16x8.svg" class="small bl"></object>
|
||||
<object data="support/colors-16x8.svg" class="small tl"></object>
|
||||
<object data="support/colors-16x8.svg" class="small br"></object>
|
||||
<object data="support/colors-16x8.svg" class="small tc"></object>
|
||||
<object data="support/colors-16x8.svg" class="small cr"></object>
|
||||
<object data="support/colors-16x8.svg" class="small"></object>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-svg-001-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.svg" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small br"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.svg" class="small"></video>
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide br">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall br">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.svg" class="small tr">
|
||||
<embed src="support/colors-8x16.svg" class="small bl">
|
||||
<embed src="support/colors-8x16.svg" class="small tl">
|
||||
<embed src="support/colors-8x16.svg" class="small br">
|
||||
<embed src="support/colors-8x16.svg" class="small tc">
|
||||
<embed src="support/colors-8x16.svg" class="small cr">
|
||||
<embed src="support/colors-8x16.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
|
|
@ -0,0 +1,75 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
--><html><head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link href="mailto:dholbert@mozilla.com" rel="author" title="Daniel Holbert">
|
||||
<link href="http://www.w3.org/TR/css3-images/#sizing" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-fit" rel="help">
|
||||
<link href="http://www.w3.org/TR/css3-images/#the-object-position" rel="help">
|
||||
<link href="reference/object-fit-fill-svg-002-ref.htm" rel="match">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.svg" class="bigWide tr">
|
||||
<img src="support/colors-8x16.svg" class="bigWide bl">
|
||||
<img src="support/colors-8x16.svg" class="bigWide tl">
|
||||
<img src="support/colors-8x16.svg" class="bigWide br">
|
||||
<img src="support/colors-8x16.svg" class="bigWide tc">
|
||||
<img src="support/colors-8x16.svg" class="bigWide cr">
|
||||
<img src="support/colors-8x16.svg" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.svg" class="bigTall tr">
|
||||
<img src="support/colors-8x16.svg" class="bigTall bl">
|
||||
<img src="support/colors-8x16.svg" class="bigTall tl">
|
||||
<img src="support/colors-8x16.svg" class="bigTall br">
|
||||
<img src="support/colors-8x16.svg" class="bigTall tc">
|
||||
<img src="support/colors-8x16.svg" class="bigTall cr">
|
||||
<img src="support/colors-8x16.svg" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.svg" class="small tr">
|
||||
<img src="support/colors-8x16.svg" class="small bl">
|
||||
<img src="support/colors-8x16.svg" class="small tl">
|
||||
<img src="support/colors-8x16.svg" class="small br">
|
||||
<img src="support/colors-8x16.svg" class="small tc">
|
||||
<img src="support/colors-8x16.svg" class="small cr">
|
||||
<img src="support/colors-8x16.svg" class="small">
|
||||
<br>
|
||||
|
||||
|
||||
</body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Add table
Add a link
Reference in a new issue