зеркало из https://github.com/mozilla/gecko-dev.git
Bug 624647 reftests, part 3: Test 'object-fit' & 'object-position' properties with SVG images in various container elements. (no review because substantially similar to r+'d reftests part 1)
--HG-- rename : layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-png-tests.sh => layout/reftests/w3c-css/submitted/images3/support/generate-object-fit-svg-tests.sh
This commit is contained in:
Daniel Holbert
Родитель
fc26aa8e05
Коммит
d68a5662f6
|
|
@ -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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-001-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-002-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-002-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-002-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-002-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8-noSize.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-003-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-003-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-003-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-003-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16-noSize.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-004-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-004-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-004-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-004-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8-parDefault.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-005-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-005-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-005-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-005-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16-parDefault.svg");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-006-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-006-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-006-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-contain-svg-006-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-001-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-002-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-002-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-002-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-002-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8-noSize.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-003-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-003-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-003-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-003-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16-noSize.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-004-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-004-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-004-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-004-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8-parDefault.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-005-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-005-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-005-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-005-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16-parDefault.svg");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-006-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-006-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-006-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-cover-svg-006-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.svg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-001-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-001-ref.html">
|
||||
<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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.svg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-002-ref.html">
|
||||
<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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-002-ref.html">
|
||||
<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>
|
||||
|
|
@ -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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-002-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-002-ref.html">
|
||||
<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-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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8-noSize.svg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-003-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-003-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-003-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-003-ref.html">
|
||||
<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-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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16-noSize.svg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-004-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-004-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-004-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-004-ref.html">
|
||||
<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-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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8-parDefault.svg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-005-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-005-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-005-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-005-ref.html">
|
||||
<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-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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16-parDefault.svg");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-006-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-006-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-006-ref.html">
|
||||
<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-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,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 SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-fill-svg-006-ref.html">
|
||||
<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-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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-16x8.svg");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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: none' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-001-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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,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: none' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-001-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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,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: none' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-001-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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,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: none' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-001-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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,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 Reftest Reference</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<style type="text/css">
|
||||
.objectOuter {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
float: left;
|
||||
}
|
||||
.objectOuter > * {
|
||||
background-image: url("support/colors-8x16.svg");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { background-position: top right }
|
||||
.bl { background-position: bottom left }
|
||||
.tl { background-position: top 25% left 25% }
|
||||
.br { background-position: bottom 1px right 2px }
|
||||
|
||||
.tc { background-position: top 3px center }
|
||||
.cr { background-position: center right 25% }
|
||||
.default { background-position: 50% 50% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<div class="objectOuter"><div class="bigWide tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide br"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigWide default"></div></div>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<div class="objectOuter"><div class="bigTall tr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall bl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tl"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall br"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall tc"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall cr"></div></div>
|
||||
<div class="objectOuter"><div class="bigTall default"></div></div>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<div class="objectOuter"><div class="small tr"></div></div>
|
||||
<div class="objectOuter"><div class="small bl"></div></div>
|
||||
<div class="objectOuter"><div class="small tl"></div></div>
|
||||
<div class="objectOuter"><div class="small br"></div></div>
|
||||
<div class="objectOuter"><div class="small tc"></div></div>
|
||||
<div class="objectOuter"><div class="small cr"></div></div>
|
||||
<div class="objectOuter"><div class="small default"></div></div>
|
||||
<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: none' on embed element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-002-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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,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: none' on img element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-002-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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,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: none' on object element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-002-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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,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: none' on video element, with a SVG image and with various 'object-position' values</title>
|
||||
<link rel="author" title="Daniel Holbert" href="mailto:dholbert@mozilla.com">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#sizing">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-fit">
|
||||
<link rel="help" href="http://www.w3.org/TR/css3-images/#the-object-position">
|
||||
<link rel="match" href="object-fit-none-svg-002-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
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>
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче