blob: 8fc37c04c2b84afde69f97787d7976c230d00e4a (
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
72
73
74
75
76
77
|
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Image srcset mutations</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<script type="application/javascript">
"use strict";
window.onload = function() {
// Smoke test, check picture working as expected
const t0 = document.querySelector("#test0 img");
ok(t0.currentSrc.endsWith("apng"), `t0: expected pass.apng, got '${t0.currentSrc}'`);
// Test that the apng is selected over bogus types.
const t1 = document.querySelector("#test1 img");
ok(t1.currentSrc.endsWith("apng"), `t1: expected pass.apng, got '${t1.currentSrc}'`);
// Test that tree order precedence applies
const t2 = document.querySelector("#test2 img");
ok(t2.currentSrc.endsWith("apng"), `t2: expected pass.apng, got '${t2.currentSrc}'`);
// Test that apng doesn't alway win
const t3 = document.querySelector("#test3 img");
ok(t3.currentSrc.endsWith("apng"), `t3: expected pass.apng, got '${t3.currentSrc}'`);
// Test dynamically constructed picture, where apng is selected over a bogus
// source or the img src attribute
const pic = document.createElement("picture");
pic.id = "test4";
const t4 = document.createElement("img");
const bogusSource = document.createElement("source");
bogusSource.type = "bogus/bogus";
bogusSource.srcset = "fail.png";
const legitSource = document.createElement("source");
legitSource.type = "image/apng";
legitSource.srcset = "pass.apng";
pic.appendChild(bogusSource);
pic.appendChild(legitSource);
pic.appendChild(t4);
t4.src = "fail.png";
document.body.appendChild(pic);
t4.onload = ()=>{
ok(t4.currentSrc.endsWith("apng"), `t4: Expected pass.apng, got '${t4.currentSrc}'`);
SimpleTest.finish();
}
};
SimpleTest.waitForExplicitFinish();
</script>
<body>
<picture id="test0">
<source>
<img src="pass.apng">
</picture>
<picture id="test1">
<source type="bogus/type" srcset="fail.png">
<source type="image/apng" srcset="pass.apng">
<source type="image/jpeg" srcset="fail.png">
<img src="fail-fallback">
</picture>
<picture id="test2">
<source type="image/png" srcset="pass.apng">
<source srcset="fail.png">
<source type="bogus/type" srcset="fail.png">
<img src="fail-fallback">
</picture>
<picture id="test3">
<source type="image/jpeg" srcset="pass.apng">
<source type="image/apng" srcset="fail.png">
<img src="fail-fallback">
</picture>
</body>
</html>
|
