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
|
<!doctype html>
<title>HTMLImageElement.prototype.naturalWidth/naturalHeight</title>
<script src="/resources/testharness.js"></script>
<script src="/resources/testharnessreport.js"></script>
<img src="resources/cat.jpg"
title="raster image" data-width="320" data-height="240">
<img src="resources/cat.jpg" width="10" height="10"
title="raster image with width/height attributes" data-width="320" data-height="240">
<img src="non-existent.jpg"
title="non existent image, no natural dimensions" data-width="0" data-height="0">
<img src="non-existent.jpg" width="10" height="10"
title="non existent image with width/height attributes, no natural dimensions" data-width="0" data-height="0">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'></svg>"
title="SVG image, no natural dimensions" data-width="0" data-height="0">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400'></svg>"
title="SVG image, width/height in pixels" data-width="500" data-height="400">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500'></svg>"
title="SVG image, width in pixels; height unspecified" data-width="500" data-height="0">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='100%'></svg>"
title="SVG image, width in pixels; percentage height" data-width="500" data-height="0">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='400' viewBox='0 0 800 600'></svg>"
title="SVG image, width/height in pixels; viewBox" data-width="500" data-height="400">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 600'></svg>"
title="SVG image, width/height unspecified; viewBox" data-width="0" data-height="0">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='400' viewBox='0 0 800 600'></svg>"
title="SVG image, width in pixels; height unspecified; viewBox" data-width="400" data-height="300">
<img src="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' height='300' viewBox='0 0 800 600'></svg>"
title="SVG image, width unspecified; height in pixels; viewBox" data-width="400" data-height="300">
<script>
setup({explicit_done:true});
onload = function() {
Array.from(document.images).forEach(img => {
test(function() {
const expectedWidth = parseFloat(img.dataset.width);
const expectedHeight = parseFloat(img.dataset.height);
assert_equals(img.naturalWidth, expectedWidth, 'naturalWidth');
assert_equals(img.naturalHeight, expectedHeight, 'naturalHeight');
}, `${document.title}, ${img.title}`);
});
done();
};
</script>
|
