blob: dafadf2e58b7277f005d74b0d85076e84a33693a (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!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' and 'cover' on object element whose aspect ratio dynamically changes</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="match" href="object-fit-dyn-aspect-ratio-001-ref.html">
<style>
object {
margin: 1px;
float: left;
/* I'm just using 'object-position' for cosmetic reasons, so that the
painted areas are all snapped to top-left which makes reference case
more trivial. */
object-position: top left;
}
.cov { object-fit: cover; }
.con { object-fit: contain; }
.square {
width: 24px;
height: 24px;
}
.bigWide {
width: 48px;
height: 32px;
}
.bigTall {
width: 32px;
height: 48px;
}
.small {
width: 8px;
height: 8px;
}
br { clear: both; }
</style>
<script>
function go() {
for (let elem of document.getElementsByTagName("object")) {
var doc = elem.contentDocument;
/* These should all should select out a piece of the
bottom-right quadrant (the lime chunk): */
doc.documentElement.setAttribute("viewBox", "8 4 8 4");
}
}
</script>
</head>
<body onload="go()">
<object data="support/colors-16x8-parDefault.svg" class="square cov"></object>
<object data="support/colors-16x8-parDefault.svg" class="square con"></object>
<br>
<object data="support/colors-16x8-parDefault.svg" class="bigWide cov"></object>
<object data="support/colors-16x8-parDefault.svg" class="bigWide con"></object>
<br>
<object data="support/colors-16x8-parDefault.svg" class="bigTall cov"></object>
<object data="support/colors-16x8-parDefault.svg" class="bigTall con"></object>
<br>
<object data="support/colors-16x8-parDefault.svg" class="small cov"></object>
<object data="support/colors-16x8-parDefault.svg" class="small con"></object>
<br>
</body>
</html>
|
