Document.html (7806B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Custom Elements: CEReactions on Document interface</title> 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 6 <meta name="assert" content="importNode and adoptNode of Document interface must have CEReactions"> 7 <meta name="help" content="https://dom.spec.whatwg.org/#document"> 8 <meta name="help" content="https://html.spec.whatwg.org/#document"> 9 <script src="/resources/testharness.js"></script> 10 <script src="/resources/testharnessreport.js"></script> 11 <script src="../resources/custom-elements-helpers.js"></script> 12 <script src="./resources/reactions.js"></script> 13 </head> 14 <body> 15 <div id="log"></div> 16 <script> 17 18 test_with_window(function (contentWindow, contentDocument) { 19 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 20 const instance = contentDocument.createElement('custom-element'); 21 assert_array_equals(element.takeLog().types(), ['constructed']); 22 23 const newDoc = contentDocument.implementation.createHTMLDocument(); 24 newDoc.importNode(instance); 25 26 assert_array_equals(element.takeLog().types(), []); 27 }, 'importNode on Document must not construct a new custom element when importing a custom element into a window-less document'); 28 29 test_with_window(function (contentWindow, contentDocument) { 30 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 31 const template = contentDocument.createElement('template'); 32 template.innerHTML = '<custom-element></custom-element>'; 33 assert_array_equals(element.takeLog().types(), []); 34 contentDocument.importNode(template.content, true); 35 assert_array_equals(element.takeLog().types(), ['constructed']); 36 }, 'importNode on Document must construct a new custom element when importing a custom element from a template'); 37 38 test_with_window(function (contentWindow, contentDocument) { 39 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 40 const instance = contentDocument.createElement('custom-element'); 41 assert_array_equals(element.takeLog().types(), ['constructed']); 42 43 const newDoc = contentDocument.implementation.createHTMLDocument(); 44 newDoc.adoptNode(instance); 45 46 const logEntries = element.takeLog(); 47 assert_array_equals(logEntries.types(), ['adopted']); 48 assert_equals(logEntries.last().oldDocument, contentDocument); 49 assert_equals(logEntries.last().newDocument, newDoc); 50 }, 'adoptNode on Document must enqueue an adopted reaction when importing a custom element'); 51 52 test_with_window(function (contentWindow, contentDocument) { 53 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 54 const instance = contentDocument.createElement('custom-element'); 55 56 const container = contentDocument.createElement('div'); 57 container.contentEditable = true; 58 container.appendChild(instance); 59 contentDocument.body.appendChild(container); 60 61 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 62 63 container.focus(); 64 contentDocument.getSelection().collapse(container, 1); 65 contentDocument.execCommand('delete', false, null); 66 67 assert_array_equals(element.takeLog().types(), ['disconnected']); 68 }, 'execCommand on Document must enqueue a disconnected reaction when deleting a custom element from a contenteditable element'); 69 70 test_with_window(function (contentWindow, contentDocument) { 71 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 72 73 contentDocument.title = ''; 74 const title = contentDocument.querySelector('title'); 75 const instance = contentDocument.createElement('custom-element'); 76 title.appendChild(instance); 77 instance.textContent = 'hello'; 78 79 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 80 assert_equals(title.innerHTML, '<custom-element>hello</custom-element>'); 81 82 title.text = 'world'; 83 assert_equals(title.innerHTML, 'world'); 84 assert_array_equals(element.takeLog().types(), ['disconnected']); 85 }, 'title on Document must enqueue disconnectedCallback when removing a custom element'); 86 87 test_with_window(function (contentWindow, contentDocument) { 88 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 89 90 const body = contentDocument.body; 91 body.innerHTML = '<custom-element>hello</custom-element>'; 92 93 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 94 assert_equals(body.innerHTML, '<custom-element>hello</custom-element>'); 95 96 contentDocument.body = contentDocument.createElement('body'); 97 assert_array_equals(element.takeLog().types(), ['disconnected']); 98 }, 'body on Document must enqueue disconnectedCallback when removing a custom element'); 99 100 test_with_window(function (contentWindow, contentDocument) { 101 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 102 103 const instance = contentDocument.createElement('custom-element'); 104 const body = contentDocument.createElement('body'); 105 body.appendChild(instance); 106 107 assert_array_equals(element.takeLog().types(), ['constructed']); 108 assert_equals(body.innerHTML, '<custom-element></custom-element>'); 109 110 contentDocument.body = body; 111 assert_array_equals(element.takeLog().types(), ['connected']); 112 }, 'body on Document must enqueue connectedCallback when inserting a custom element'); 113 114 test_with_window(function (contentWindow, contentDocument) { 115 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 116 contentDocument.body.innerHTML = '<custom-element></custom-element>'; 117 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 118 119 contentDocument.open(); 120 assert_array_equals(element.takeLog().types(), ['disconnected']); 121 }, 'open on Document must enqueue disconnectedCallback when removing a custom element'); 122 123 test_with_window(function (contentWindow, contentDocument) { 124 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 125 contentDocument.body.innerHTML = '<custom-element></custom-element>'; 126 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 127 128 contentDocument.write(''); 129 assert_array_equals(element.takeLog().types(), ['disconnected']); 130 }, 'write on Document must enqueue disconnectedCallback when removing a custom element'); 131 132 test_with_window(function (contentWindow, contentDocument) { 133 contentWindow.document.open(); 134 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 135 contentWindow.document.write('<custom-element></custom-element>'); 136 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 137 }, 'write on Document must enqueue connectedCallback after constructing a custom element'); 138 139 test_with_window(function (contentWindow, contentDocument) { 140 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 141 contentDocument.body.innerHTML = '<custom-element></custom-element>'; 142 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 143 144 contentDocument.writeln(''); 145 assert_array_equals(element.takeLog().types(), ['disconnected']); 146 }, 'writeln on Document must enqueue disconnectedCallback when removing a custom element'); 147 148 test_with_window(function (contentWindow) { 149 contentWindow.document.open(); 150 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 151 contentWindow.document.writeln('<custom-element></custom-element>'); 152 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 153 }, 'writeln on Document must enqueue connectedCallback after constructing a custom element'); 154 155 </script> 156 </body> 157 </html>