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
|
<!DOCTYPE HTML>
<html>
<!--
https://bugzilla.mozilla.org/show_bug.cgi?id=1556358
-->
<head>
<title>Test for Bug 1556358</title>
<script src="/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556358">Mozilla Bug 1556358</a>
<p id="display"></p>
<div id="content">
<iframe src="save_restore_custom_elements_sample.html"></iframe>
</div>
<script type="application/javascript">
/** Test for Bug 1556358 */
function formDataWith(...entries) {
const formData = new FormData();
for (let [key, value] of entries) {
formData.append(key, value);
}
return formData;
}
const states = [
"test state",
new File(["state"], "state.txt"),
formDataWith(["1", "state"], ["2", new Blob(["state_blob"])]),
null,
undefined,
];
const values = [
"test value",
new File(["value"], "value.txt"),
formDataWith(["1", "value"], ["2", new Blob(["value_blob"])]),
"null state",
"both value and state",
];
add_task(async () => {
const frame = document.querySelector("iframe");
const elementTags = ["c-e", "upgraded-ce"];
// Set the custom element values.
for (const tags of elementTags) {
[...frame.contentDocument.querySelectorAll(tags)]
.forEach((e, i) => {
e.set(states[i], values[i]);
});
}
await new Promise(resolve => {
frame.addEventListener("load", resolve);
frame.contentWindow.location.reload();
});
for (const tag of elementTags) {
// Retrieve the restored values.
const ceStates =
[...frame.contentDocument.querySelectorAll(tag)].map((e) => e.state);
is(ceStates.length, 5, "Should have 5 custom element states");
const [restored, original] = [ceStates, states];
is(restored[0], original[0], "Value should be restored");
const file = restored[1];
isnot(file, original[1], "Restored file object differs from original object.");
is(file.name, original[1].name, "File name should be restored");
is(await file.text(), await original[1].text(), "File text should be restored");
const formData = restored[2];
isnot(formData, original[2], "Restored formdata object differs from original object.");
is(formData.get("1"), original[2].get("1"), "Form data string should be restored");
is(await formData.get("2").text(), await original[2].get("2").text(), "Form data blob should be restored");
isnot(restored[3], original[3], "Null values don't get restored");
is(restored[3], undefined, "Null values don't get restored");
is(restored[4], "both value and state", "Undefined state should be set to value");
}
});
</script>
</body>
</html>
|
