зеркало из https://github.com/mozilla/gecko-dev.git
Bug 624647 reftests, part 1: Test 'object-fit' & 'object-position' properties with a PNG image in various container elements. r=seth
This commit is contained in:
Daniel Holbert
Родитель
99c07151f7
Коммит
c0172f049e
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: contain' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: contain;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: cover' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: cover;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on embed element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on img element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on object element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!DOCTYPE html>
|
||||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS Test: 'object-fit: fill' on video element, with a PNG image and with various 'object-position' values</title>
|
||||
<link 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: fill;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!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 PNG 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 PNG 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 PNG 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 PNG 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-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.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,77 @@
|
|||
<!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 PNG 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 PNG 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 PNG 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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 PNG 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-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: none;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.objectOuter > .small { background-size: contain; }
|
||||
.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,77 @@
|
|||
<!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: scale-down' on embed element, with a PNG 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-scale-down-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-16x8.png" class="bigWide tr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide bl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tl">
|
||||
<embed src="support/colors-16x8.png" class="bigWide br">
|
||||
<embed src="support/colors-16x8.png" class="bigWide tc">
|
||||
<embed src="support/colors-16x8.png" class="bigWide cr">
|
||||
<embed src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-16x8.png" class="bigTall tr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall bl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tl">
|
||||
<embed src="support/colors-16x8.png" class="bigTall br">
|
||||
<embed src="support/colors-16x8.png" class="bigTall tc">
|
||||
<embed src="support/colors-16x8.png" class="bigTall cr">
|
||||
<embed src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-16x8.png" class="small tr">
|
||||
<embed src="support/colors-16x8.png" class="small bl">
|
||||
<embed src="support/colors-16x8.png" class="small tl">
|
||||
<embed src="support/colors-16x8.png" class="small br">
|
||||
<embed src="support/colors-16x8.png" class="small tc">
|
||||
<embed src="support/colors-16x8.png" class="small cr">
|
||||
<embed src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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: scale-down' on img element, with a PNG 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-scale-down-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-16x8.png" class="bigWide tr">
|
||||
<img src="support/colors-16x8.png" class="bigWide bl">
|
||||
<img src="support/colors-16x8.png" class="bigWide tl">
|
||||
<img src="support/colors-16x8.png" class="bigWide br">
|
||||
<img src="support/colors-16x8.png" class="bigWide tc">
|
||||
<img src="support/colors-16x8.png" class="bigWide cr">
|
||||
<img src="support/colors-16x8.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-16x8.png" class="bigTall tr">
|
||||
<img src="support/colors-16x8.png" class="bigTall bl">
|
||||
<img src="support/colors-16x8.png" class="bigTall tl">
|
||||
<img src="support/colors-16x8.png" class="bigTall br">
|
||||
<img src="support/colors-16x8.png" class="bigTall tc">
|
||||
<img src="support/colors-16x8.png" class="bigTall cr">
|
||||
<img src="support/colors-16x8.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-16x8.png" class="small tr">
|
||||
<img src="support/colors-16x8.png" class="small bl">
|
||||
<img src="support/colors-16x8.png" class="small tl">
|
||||
<img src="support/colors-16x8.png" class="small br">
|
||||
<img src="support/colors-16x8.png" class="small tc">
|
||||
<img src="support/colors-16x8.png" class="small cr">
|
||||
<img src="support/colors-16x8.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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: scale-down' on object element, with a PNG 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-scale-down-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-16x8.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-16x8.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall br"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-16x8.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-16x8.png" class="small tr"></object>
|
||||
<object data="support/colors-16x8.png" class="small bl"></object>
|
||||
<object data="support/colors-16x8.png" class="small tl"></object>
|
||||
<object data="support/colors-16x8.png" class="small br"></object>
|
||||
<object data="support/colors-16x8.png" class="small tc"></object>
|
||||
<object data="support/colors-16x8.png" class="small cr"></object>
|
||||
<object data="support/colors-16x8.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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: scale-down' on video element, with a PNG 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-scale-down-png-001-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-16x8.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-16x8.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-16x8.png" class="small tr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small bl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tl"></video>
|
||||
<video poster="support/colors-16x8.png" class="small br"></video>
|
||||
<video poster="support/colors-16x8.png" class="small tc"></video>
|
||||
<video poster="support/colors-16x8.png" class="small cr"></video>
|
||||
<video poster="support/colors-16x8.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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.png");
|
||||
background-size: auto auto;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
.objectOuter > .small { background-size: contain; }
|
||||
.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,77 @@
|
|||
<!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: scale-down' on embed element, with a PNG 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-scale-down-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
embed {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<embed src="support/colors-8x16.png" class="bigWide tr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide bl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tl">
|
||||
<embed src="support/colors-8x16.png" class="bigWide br">
|
||||
<embed src="support/colors-8x16.png" class="bigWide tc">
|
||||
<embed src="support/colors-8x16.png" class="bigWide cr">
|
||||
<embed src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<embed src="support/colors-8x16.png" class="bigTall tr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall bl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tl">
|
||||
<embed src="support/colors-8x16.png" class="bigTall br">
|
||||
<embed src="support/colors-8x16.png" class="bigTall tc">
|
||||
<embed src="support/colors-8x16.png" class="bigTall cr">
|
||||
<embed src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<embed src="support/colors-8x16.png" class="small tr">
|
||||
<embed src="support/colors-8x16.png" class="small bl">
|
||||
<embed src="support/colors-8x16.png" class="small tl">
|
||||
<embed src="support/colors-8x16.png" class="small br">
|
||||
<embed src="support/colors-8x16.png" class="small tc">
|
||||
<embed src="support/colors-8x16.png" class="small cr">
|
||||
<embed src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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: scale-down' on img element, with a PNG 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-scale-down-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
img {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<img src="support/colors-8x16.png" class="bigWide tr">
|
||||
<img src="support/colors-8x16.png" class="bigWide bl">
|
||||
<img src="support/colors-8x16.png" class="bigWide tl">
|
||||
<img src="support/colors-8x16.png" class="bigWide br">
|
||||
<img src="support/colors-8x16.png" class="bigWide tc">
|
||||
<img src="support/colors-8x16.png" class="bigWide cr">
|
||||
<img src="support/colors-8x16.png" class="bigWide">
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<img src="support/colors-8x16.png" class="bigTall tr">
|
||||
<img src="support/colors-8x16.png" class="bigTall bl">
|
||||
<img src="support/colors-8x16.png" class="bigTall tl">
|
||||
<img src="support/colors-8x16.png" class="bigTall br">
|
||||
<img src="support/colors-8x16.png" class="bigTall tc">
|
||||
<img src="support/colors-8x16.png" class="bigTall cr">
|
||||
<img src="support/colors-8x16.png" class="bigTall">
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<img src="support/colors-8x16.png" class="small tr">
|
||||
<img src="support/colors-8x16.png" class="small bl">
|
||||
<img src="support/colors-8x16.png" class="small tl">
|
||||
<img src="support/colors-8x16.png" class="small br">
|
||||
<img src="support/colors-8x16.png" class="small tc">
|
||||
<img src="support/colors-8x16.png" class="small cr">
|
||||
<img src="support/colors-8x16.png" class="small">
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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: scale-down' on object element, with a PNG 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-scale-down-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
object {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<object data="support/colors-8x16.png" class="bigWide tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigWide"></object>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<object data="support/colors-8x16.png" class="bigTall tr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall bl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tl"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall br"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall tc"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall cr"></object>
|
||||
<object data="support/colors-8x16.png" class="bigTall"></object>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<object data="support/colors-8x16.png" class="small tr"></object>
|
||||
<object data="support/colors-8x16.png" class="small bl"></object>
|
||||
<object data="support/colors-8x16.png" class="small tl"></object>
|
||||
<object data="support/colors-8x16.png" class="small br"></object>
|
||||
<object data="support/colors-8x16.png" class="small tc"></object>
|
||||
<object data="support/colors-8x16.png" class="small cr"></object>
|
||||
<object data="support/colors-8x16.png" class="small"></object>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,77 @@
|
|||
<!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: scale-down' on video element, with a PNG 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-scale-down-png-002-ref.html">
|
||||
<style type="text/css">
|
||||
video {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: scale-down;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bigWide {
|
||||
width: 48px;
|
||||
height: 32px;
|
||||
}
|
||||
.bigTall {
|
||||
width: 32px;
|
||||
height: 48px;
|
||||
}
|
||||
.small {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
br { clear: both; }
|
||||
|
||||
.tr { object-position: top right }
|
||||
.bl { object-position: bottom left }
|
||||
.tl { object-position: top 25% left 25% }
|
||||
.br { object-position: bottom 1px right 2px }
|
||||
|
||||
.tc { object-position: top 3px center }
|
||||
.cr { object-position: center right 25% }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- big/wide: -->
|
||||
<video poster="support/colors-8x16.png" class="bigWide tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigWide"></video>
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<video poster="support/colors-8x16.png" class="bigTall tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall br"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="bigTall"></video>
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<video poster="support/colors-8x16.png" class="small tr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small bl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tl"></video>
|
||||
<video poster="support/colors-8x16.png" class="small br"></video>
|
||||
<video poster="support/colors-8x16.png" class="small tc"></video>
|
||||
<video poster="support/colors-8x16.png" class="small cr"></video>
|
||||
<video poster="support/colors-8x16.png" class="small"></video>
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
|
||||
# Tests for 'object-fit' / 'object-position' with a PNG image
|
||||
== object-fit-fill-png-001e.html object-fit-fill-png-001-ref.html
|
||||
== object-fit-fill-png-001i.html object-fit-fill-png-001-ref.html
|
||||
== object-fit-fill-png-001o.html object-fit-fill-png-001-ref.html
|
||||
== object-fit-fill-png-001p.html object-fit-fill-png-001-ref.html
|
||||
== object-fit-fill-png-002e.html object-fit-fill-png-002-ref.html
|
||||
== object-fit-fill-png-002i.html object-fit-fill-png-002-ref.html
|
||||
== object-fit-fill-png-002o.html object-fit-fill-png-002-ref.html
|
||||
== object-fit-fill-png-002p.html object-fit-fill-png-002-ref.html
|
||||
== object-fit-contain-png-001e.html object-fit-contain-png-001-ref.html
|
||||
== object-fit-contain-png-001i.html object-fit-contain-png-001-ref.html
|
||||
== object-fit-contain-png-001o.html object-fit-contain-png-001-ref.html
|
||||
== object-fit-contain-png-001p.html object-fit-contain-png-001-ref.html
|
||||
== object-fit-contain-png-002e.html object-fit-contain-png-002-ref.html
|
||||
== object-fit-contain-png-002i.html object-fit-contain-png-002-ref.html
|
||||
== object-fit-contain-png-002o.html object-fit-contain-png-002-ref.html
|
||||
== object-fit-contain-png-002p.html object-fit-contain-png-002-ref.html
|
||||
== object-fit-cover-png-001e.html object-fit-cover-png-001-ref.html
|
||||
== object-fit-cover-png-001i.html object-fit-cover-png-001-ref.html
|
||||
== object-fit-cover-png-001o.html object-fit-cover-png-001-ref.html
|
||||
== object-fit-cover-png-001p.html object-fit-cover-png-001-ref.html
|
||||
== object-fit-cover-png-002e.html object-fit-cover-png-002-ref.html
|
||||
== object-fit-cover-png-002i.html object-fit-cover-png-002-ref.html
|
||||
== object-fit-cover-png-002o.html object-fit-cover-png-002-ref.html
|
||||
== object-fit-cover-png-002p.html object-fit-cover-png-002-ref.html
|
||||
== object-fit-none-png-001e.html object-fit-none-png-001-ref.html
|
||||
== object-fit-none-png-001i.html object-fit-none-png-001-ref.html
|
||||
== object-fit-none-png-001o.html object-fit-none-png-001-ref.html
|
||||
== object-fit-none-png-001p.html object-fit-none-png-001-ref.html
|
||||
== object-fit-none-png-002e.html object-fit-none-png-002-ref.html
|
||||
== object-fit-none-png-002i.html object-fit-none-png-002-ref.html
|
||||
== object-fit-none-png-002o.html object-fit-none-png-002-ref.html
|
||||
== object-fit-none-png-002p.html object-fit-none-png-002-ref.html
|
||||
== object-fit-scale-down-png-001e.html object-fit-scale-down-png-001-ref.html
|
||||
== object-fit-scale-down-png-001i.html object-fit-scale-down-png-001-ref.html
|
||||
== object-fit-scale-down-png-001o.html object-fit-scale-down-png-001-ref.html
|
||||
== object-fit-scale-down-png-001p.html object-fit-scale-down-png-001-ref.html
|
||||
== object-fit-scale-down-png-002e.html object-fit-scale-down-png-002-ref.html
|
||||
== object-fit-scale-down-png-002i.html object-fit-scale-down-png-002-ref.html
|
||||
== object-fit-scale-down-png-002o.html object-fit-scale-down-png-002-ref.html
|
||||
== object-fit-scale-down-png-002p.html object-fit-scale-down-png-002-ref.html
|
||||
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 93 B |
Двоичный файл не отображается.
|
После Ширина: | Высота: | Размер: 92 B |
|
|
@ -0,0 +1,109 @@
|
|||
#!/bin/bash
|
||||
#
|
||||
# Any copyright is dedicated to the Public Domain.
|
||||
# http://creativecommons.org/publicdomain/zero/1.0/
|
||||
#
|
||||
# This is a script that I used to generate a suite of tests for the CSS
|
||||
# properties "object-fit" and "object-position", using a template testcase
|
||||
# file and reference case file.
|
||||
#
|
||||
# The reference case uses the "background-size" & "background-position"
|
||||
# equivalent of the tested "object-fit" / "object-position" values.
|
||||
# (One exception: since there is no "background-size" equivalent of
|
||||
# "object-fit: scale-down", we add an extra CSS rule for the "scale-down"
|
||||
# reference cases -- see REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
|
||||
|
||||
FILE_PATH="./"
|
||||
REFTEST_LIST_FILE="$FILE_PATH/reftest.list"
|
||||
|
||||
TEMPLATE_TESTCASE_FILENAME=$FILE_PATH/support/template-object-fit-test.html
|
||||
TEMPLATE_REFERENCE_FILENAME=$FILE_PATH/support/template-object-fit-ref.html
|
||||
|
||||
imageFileFormat="png"
|
||||
|
||||
# Array of image files to use for testing:
|
||||
imageFileArr=("support/colors-16x8.png" "support/colors-8x16.png")
|
||||
numImageFiles=${#imageFileArr[@]}
|
||||
|
||||
# Array of "object-fit" values, & of corresponding "background-size" values.
|
||||
# (Note: background-size has no equivalent for "object-fit: scale-down". We use
|
||||
# "auto auto" here, which is equivalent *some* of the time; and for the cases
|
||||
# where it's *not* equivalent, we use an extra CSS rule in the reference case.
|
||||
# See REPLACEME_SCALE_DOWN_EXTRA_RULE below.)
|
||||
objectFitArr=( "fill" "contain" "cover" "none" "scale-down" )
|
||||
backgroundSizeEquivArr=( "100% 100%" "contain" "cover" "auto auto" "auto auto" )
|
||||
numObjectFitVals=${#objectFitArr[@]}
|
||||
|
||||
# Array of tag-names for elements that we'd like to test:
|
||||
# (Also: array of a single-letter abbreviation for each element, an array of
|
||||
# the close tag for each element -- if a close tag is needed -- and an array
|
||||
# indicating the attribute that each element uses to specify its image source.)
|
||||
tagNameArr=( "embed" "img" "object" "video" )
|
||||
tagLetterArr=( "e" "i" "o" "p" )
|
||||
tagCloseTokenArr=( "" "" "</object>" "</video>" )
|
||||
tagSrcAttrArr=( "src" "src" "data" "poster" )
|
||||
numTags=${#tagNameArr[@]}
|
||||
|
||||
# FIRST: Add 'default-preferences' line to the top of our reftest manifest:
|
||||
echo "default-preferences test-pref(layout.css.object-fit-and-position.enabled,true)
|
||||
# Tests for 'object-fit' / 'object-position' with a PNG image" \
|
||||
>> $REFTEST_LIST_FILE
|
||||
|
||||
for ((i = 0; i < $numObjectFitVals; i++)); do
|
||||
objectFit=${objectFitArr[$i]}
|
||||
backgroundSizeEquiv=${backgroundSizeEquivArr[$i]}
|
||||
|
||||
# The reference case for "scale-down" needs an additional style rule, to
|
||||
# look like "object-fit: scale-down" on small objects. (This is necessary
|
||||
# because "background-size" doesn't have a value that exactly maps to
|
||||
# "object-fit: scale-down".)
|
||||
if [[ $objectFit == "scale-down" ]]; then
|
||||
scaledownRule=".objectOuter > .small { background-size: contain; }"
|
||||
scaledownSedCmd="s/REPLACEME_SCALE_DOWN_EXTRA_RULE/$scaledownRule/"
|
||||
else
|
||||
# (We're not testing "scale-down" in this generated file, so just delete
|
||||
# the template's placeholder line for a "scale-down"-specific CSS rule.)
|
||||
scaledownSedCmd="/REPLACEME_SCALE_DOWN_EXTRA_RULE/d"
|
||||
fi
|
||||
|
||||
for ((j = 0; j < $numImageFiles; j++)); do
|
||||
imageFile=${imageFileArr[$j]}
|
||||
let testNum=$j+1
|
||||
testNum="00$testNum" # zero-pad to 3 digits, per w3c convention
|
||||
|
||||
filenameStub="object-fit-$objectFit-$imageFileFormat-$testNum"
|
||||
|
||||
# Generate a reference case:
|
||||
filenameRef="$filenameStub-ref.html"
|
||||
echo Generating ${filenameRef}.
|
||||
cat $TEMPLATE_REFERENCE_FILENAME \
|
||||
| sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
|
||||
| sed "s/REPLACEME_BACKGROUND_SIZE_VAL/$backgroundSizeEquiv/" \
|
||||
| sed "$scaledownSedCmd" \
|
||||
> $FILE_PATH/$filenameRef;
|
||||
|
||||
# Generate a test for each of our tags:
|
||||
for ((k = 0; k < $numTags; k++)); do
|
||||
tagName=${tagNameArr[$k]}
|
||||
tagLetter=${tagLetterArr[$k]}
|
||||
tagCloseToken=${tagCloseTokenArr[$k]}
|
||||
tagSrcAttr=${tagSrcAttrArr[$k]}
|
||||
|
||||
filenameTest="$filenameStub$tagLetter.html"
|
||||
testTitle="'object-fit: $objectFit' on $tagName element, with a PNG image and with various 'object-position' values"
|
||||
echo Generating ${filenameTest}.
|
||||
cat $TEMPLATE_TESTCASE_FILENAME \
|
||||
| sed "s,REPLACEME_IMAGE_FILENAME,$imageFile," \
|
||||
| sed "s/REPLACEME_TEST_TITLE/$testTitle/" \
|
||||
| sed "s,REPLACEME_REFERENCE_FILENAME,$filenameRef," \
|
||||
| sed "s/REPLACEME_CONTAINER_TAG/$tagName/" \
|
||||
| sed "s,REPLACEME_CONTAINER_CLOSETAG,$tagCloseToken," \
|
||||
| sed "s/REPLACEME_SRC_ATTR/$tagSrcAttr/" \
|
||||
| sed "s/REPLACEME_OBJECT_FIT_VAL/$objectFit/" \
|
||||
> $FILE_PATH/$filenameTest
|
||||
|
||||
echo "== $filenameTest $filenameRef" \
|
||||
>> $REFTEST_LIST_FILE
|
||||
done
|
||||
done
|
||||
done
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
<!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("REPLACEME_IMAGE_FILENAME");
|
||||
background-size: REPLACEME_BACKGROUND_SIZE_VAL;
|
||||
background-repeat: no-repeat;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
}
|
||||
REPLACEME_SCALE_DOWN_EXTRA_RULE
|
||||
.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,77 @@
|
|||
<!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: REPLACEME_TEST_TITLE</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="REPLACEME_REFERENCE_FILENAME">
|
||||
<style type="text/css">
|
||||
REPLACEME_CONTAINER_TAG {
|
||||
border: 1px dashed gray;
|
||||
padding: 1px;
|
||||
object-fit: REPLACEME_OBJECT_FIT_VAL;
|
||||
image-rendering: -moz-crisp-edges;
|
||||
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: -->
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tr">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide bl">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tl">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide br">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide tc">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide cr">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigWide">REPLACEME_CONTAINER_CLOSETAG
|
||||
<br>
|
||||
<!-- big/tall: -->
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tr">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall bl">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tl">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall br">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall tc">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall cr">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="bigTall">REPLACEME_CONTAINER_CLOSETAG
|
||||
<br>
|
||||
<!-- small: -->
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tr">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small bl">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tl">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small br">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small tc">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small cr">REPLACEME_CONTAINER_CLOSETAG
|
||||
<REPLACEME_CONTAINER_TAG REPLACEME_SRC_ATTR="REPLACEME_IMAGE_FILENAME" class="small">REPLACEME_CONTAINER_CLOSETAG
|
||||
<br>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -26,7 +26,7 @@ include flexbox/reftest.list
|
|||
# include fonts3/reftest.list
|
||||
|
||||
# Image Values and Replaced Content Level 3
|
||||
# include images3/reftest.list
|
||||
include images3/reftest.list
|
||||
|
||||
# Media Queries Level 3
|
||||
# include mediaqueries3/reftest.list
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче