test_save_restore_custom_elements.html (2974B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1556358 5 --> 6 7 <head> 8 <title>Test for Bug 1556358</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" /> 11 </head> 12 13 <body> 14 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1556358">Mozilla Bug 1556358</a> 15 <p id="display"></p> 16 <div id="content"> 17 <iframe src="save_restore_custom_elements_sample.html"></iframe> 18 </div> 19 <script type="application/javascript"> 20 /** Test for Bug 1556358 */ 21 22 function formDataWith(...entries) { 23 const formData = new FormData(); 24 for (let [key, value] of entries) { 25 formData.append(key, value); 26 } 27 return formData; 28 } 29 30 const states = [ 31 "test state", 32 new File(["state"], "state.txt"), 33 formDataWith(["1", "state"], ["2", new Blob(["state_blob"])]), 34 null, 35 undefined, 36 ]; 37 const values = [ 38 "test value", 39 new File(["value"], "value.txt"), 40 formDataWith(["1", "value"], ["2", new Blob(["value_blob"])]), 41 "null state", 42 "both value and state", 43 ]; 44 45 add_task(async () => { 46 const frame = document.querySelector("iframe"); 47 const elementTags = ["c-e", "upgraded-ce"]; 48 49 // Set the custom element values. 50 for (const tags of elementTags) { 51 [...frame.contentDocument.querySelectorAll(tags)] 52 .forEach((e, i) => { 53 e.set(states[i], values[i]); 54 }); 55 } 56 57 await new Promise(resolve => { 58 frame.addEventListener("load", resolve); 59 frame.contentWindow.location.reload(); 60 }); 61 62 for (const tag of elementTags) { 63 // Retrieve the restored values. 64 const ceStates = 65 [...frame.contentDocument.querySelectorAll(tag)].map((e) => e.state); 66 is(ceStates.length, 5, "Should have 5 custom element states"); 67 68 const [restored, original] = [ceStates, states]; 69 is(restored[0], original[0], "Value should be restored"); 70 71 const file = restored[1]; 72 isnot(file, original[1], "Restored file object differs from original object."); 73 is(file.name, original[1].name, "File name should be restored"); 74 is(await file.text(), await original[1].text(), "File text should be restored"); 75 76 const formData = restored[2]; 77 isnot(formData, original[2], "Restored formdata object differs from original object."); 78 is(formData.get("1"), original[2].get("1"), "Form data string should be restored"); 79 is(await formData.get("2").text(), await original[2].get("2").text(), "Form data blob should be restored"); 80 81 isnot(restored[3], original[3], "Null values don't get restored"); 82 is(restored[3], undefined, "Null values don't get restored"); 83 84 is(restored[4], "both value and state", "Undefined state should be set to value"); 85 } 86 }); 87 </script> 88 </body> 89 90 </html>