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
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
|
<!DOCTYPE html>
<html class="reftest-wait">
<head>
<meta charset="utf-8">
<title>CSS Images: image-orientation, CORS detection for SVG content</title>
<link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org">
<link rel="help" href="https://github.com/w3c/csswg-drafts/issues/5165">
<link rel="match" href="reference/image-orientation-none-cross-origin-svg-ref.html">
<script src="/common/get-host-info.sub.js"></script>
<script src="/common/reftest-wait.js"></script>
<script src="/common/rendering-utils.js"></script>
<style>
.image {
width: 40px;
height: 20px;
position: fixed;
}
</style>
<script>
function toCors(src) {
return src.replace(new URL(src).origin, get_host_info().HTTP_REMOTE_ORIGIN)
}
window.onload = () => {
const images = [
{
id_image: "cors_from_image",
id_foreign: "cors_from_foreign",
cors: true,
orientation: 'from-image',
shouldBeRotated: true,
left: '10px'
},
{
id_image: "cors_none_image",
id_foreign: "cors_none_foreign",
cors: true,
orientation: 'none',
shouldBeRotated: true,
left: '60px'
},
{
id_image: "same_from_image",
id_foreign: "same_from_foreign",
cors: false,
orientation: 'from-image',
shouldBeRotated: true,
left: '110px'
},
{
id_image: "same_none_image",
id_foreign: "same_none_foreign",
cors: false,
orientation: 'none',
shouldBeRotated: false,
left: '160px'
},
];
images.forEach(data => {
if (data.cors) {
image_src = document.getElementById("cors_img");
image = document.getElementById(data.id_image);
image.setAttribute("href", image_src.src);
foreign = document.getElementById(data.id_foreign);
foreign.src = image_src.src;
} else {
image_src = document.getElementById("same_img");
image = document.getElementById(data.id_image);
image.setAttribute("href", image_src.src);
foreign = document.getElementById(data.id_foreign);
foreign.src = image_src.src;
}
const canvas_svg_image = document.createElement('canvas');
canvas_svg_image.className = "image";
canvas_svg_image.width = canvas_svg_image.height = 1;
canvas_svg_image.style.left = data.left;
canvas_svg_image.style.top = "140px";
// The source of image-orientation preference for canvas drawImage
// is currently not standardized.
// See https://github.com/w3c/csswg-drafts/issues/4666
canvas_svg_image.style.imageOrientation = data.orientation;
document.body.appendChild(canvas_svg_image);
ctx = canvas_svg_image.getContext('2d');
sx = data.shouldBeRotated ? 80 : 0;
sy = data.shouldBeRotated ? 40 : 0;
ctx.drawImage(image, sx, sy, 1, 1, 0, 0, 1, 1);
const canvas_svg_foreign = document.createElement('canvas');
canvas_svg_foreign.className = "image";
canvas_svg_foreign.width = canvas_svg_foreign.height = 1;
canvas_svg_foreign.style.left = data.left;
canvas_svg_foreign.style.top = "170px";
canvas_svg_foreign.style.imageOrientation = data.orientation;
document.body.appendChild(canvas_svg_foreign);
ctx = canvas_svg_foreign.getContext('2d');
sx = data.shouldBeRotated ? 80 : 0;
sy = data.shouldBeRotated ? 40 : 0;
ctx.drawImage(foreign, sx, sy, 1, 1, 0, 0, 1, 1);
})
waitForAtLeastOneFrame().then(() => { takeScreenshot() });
}
</script>
</head>
<body>
<svg class="image" id="svg_cors_from" style="left: 10px; top: 50px; image-orientation: from-image;">
<image id="cors_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
</svg>
<!-- This should be functionally identical to a plain <img> element. We test it here to verify
that SVG foreign object correctly tracks the security origin for the image. -->
<svg class="image" style="left: 10px; top: 80px; image-orientation: from-image;">
<foreignObject x="-57" y="-27" width="100" height="50">
<img id="cors_from_foreign" src="support/exif-orientation-3-lr.jpg"></img>
</foreignObject>
</svg>
<!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
never be cross origin. This just tests that we don't crash or do other strange things. -->
<img class="image" id="img_cors_from" src="support/svg-with-image-rotated.svg" style="left: 10px; top: 110px; image-orientation: from-image;"/>
<svg class="image" style="left: 60px; top: 50px; image-orientation: none;">
<image id="cors_none_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
</svg>
<!-- This should be functionally identical to a plain <img> element. We test it here to verify
that SVG foreign object correctly tracks the security origin for the image. -->
<svg class="image" style="left: 60px; top: 80px; image-orientation: none;">
<foreignObject x="-57" y="-27" width="100" height="50">
<img id="cors_none_foreign" src="support/exif-orientation-3-lr.jpg"></img>
</foreignObject>
</svg>
<!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
never be cross origin. This just tests that we don't crash or do other strange things. -->
<img class="image" id="img_cors_none" src="support/svg-with-image-rotated.svg" style="left: 60px; top: 110px; image-orientation: none;"/>
<svg class="image" style="left: 110px; top: 50px; image-orientation: from-image;">
<image id="same_from_image" href="support/exif-orientation-3-lr.jpg" X="-57" Y="-27"></image>
</svg>
<!-- This should be functionally identical to a plain <img> element. We test it here to verify
that SVG foreign object correctly tracks the security origin for the image. -->
<svg class="image" style="left: 110px; top: 80px; image-orientation: from-image;">
<foreignObject x="-57" y="-27" width="100" height="50">
<img id="same_from_foreign" src="support/exif-orientation-3-lr.jpg"></img>
</foreignObject>
</svg>
<!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
never be cross origin. This just tests that we don't crash or do other strange things. -->
<img class="image" id="img_same_from" src="support/svg-with-image-rotated.svg" style="left: 110px; top: 110px; image-orientation: from-image;"/>
<svg class="image" style="left: 160px; top: 50px; image-orientation: none;">
<image id="same_none_image" href="support/exif-orientation-3-lr.jpg" X="0" Y="0"></image>
</svg>
<!-- This should be functionally identical to a plain <img> element. We test it here to verify
that SVG foreign object correctly tracks the security origin for the image. -->
<svg class="image" style="left: 160px; top: 80px; image-orientation: none;">
<foreignObject x="0" y="0" width="100" height="50">
<img id="same_none_foreign" src="support/exif-orientation-3-lr.jpg"></img>
</foreignObject>
</svg>
<!-- Note SVG-as-image requires any <image> elements to use (base64 encoded) data: URLs, that can
never be cross origin. This just tests that we don't crash or do other strange things. -->
<img class="image" id="img_same_none" src="support/svg-with-image-rotated.svg" style="left: 160px; top: 110px; image-orientation: none;"/>
<!-- This is the easiest way to get a cross origin url for SVG <image> -->
<script>
const img = document.createElement('img')
img.src = "support/exif-orientation-3-lr.jpg"
img.id = "same_img";
img.style.display = "none";
document.body.appendChild(img)
const imgCors = document.createElement('img')
imgCors.src = img.src
imgCors.src = toCors(imgCors.src)
imgCors.id = "cors_img";
imgCors.style.display = "none";
document.body.appendChild(imgCors)
</script>
</body>
</html>
|
