HTMLTableElement.html (9396B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>Custom Elements: CEReactions on HTMLTableElement interface</title> 5 <meta name="author" title="Ryosuke Niwa" href="mailto:rniwa@webkit.org"> 6 <meta name="assert" content="caption, deleteCaption, thead, deleteTHead, tFoot, deleteTFoot, and deleteRow of HTMLTableElement interface must have CEReactions"> 7 <meta name="help" content="https://dom.spec.whatwg.org/#node"> 8 <script src="/resources/testharness.js"></script> 9 <script src="/resources/testharnessreport.js"></script> 10 <script src="../resources/custom-elements-helpers.js"></script> 11 <script src="./resources/reactions.js"></script> 12 </head> 13 <body> 14 <div id="log"></div> 15 <script> 16 17 test_with_window(function (contentWindow, contentDocument) { 18 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 19 contentDocument.body.innerHTML = `<table></table>`; 20 const table = contentDocument.querySelector('table'); 21 22 const caption = contentDocument.createElement('caption'); 23 caption.innerHTML = '<custom-element>hello</custom-element>'; 24 25 assert_array_equals(element.takeLog().types(), ['constructed']); 26 assert_equals(caption.innerHTML, '<custom-element>hello</custom-element>'); 27 28 assert_equals(table.caption, null); 29 table.caption = caption; 30 assert_array_equals(element.takeLog().types(), ['connected']); 31 }, 'caption on HTMLTableElement must enqueue connectedCallback when inserting a custom element'); 32 33 test_with_window(function (contentWindow, contentDocument) { 34 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 35 contentDocument.body.innerHTML = `<table><caption><custom-element>hello</custom-element></caption></table>`; 36 const caption = contentDocument.querySelector('caption'); 37 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 38 assert_equals(caption.innerHTML, '<custom-element>hello</custom-element>'); 39 40 const table = contentDocument.querySelector('table'); 41 assert_equals(table.caption, caption); 42 const newCaption = contentDocument.createElement('caption'); 43 table.caption = newCaption; // Chrome doesn't support setting to null. 44 assert_equals(table.caption, newCaption); 45 assert_array_equals(element.takeLog().types(), ['disconnected']); 46 }, 'caption on HTMLTableElement must enqueue disconnectedCallback when removing a custom element'); 47 48 test_with_window(function (contentWindow, contentDocument) { 49 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 50 contentDocument.body.innerHTML = `<table><caption><custom-element>hello</custom-element></caption></table>`; 51 const caption = contentDocument.querySelector('caption'); 52 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 53 assert_equals(caption.innerHTML, '<custom-element>hello</custom-element>'); 54 55 const table = contentDocument.querySelector('table'); 56 assert_equals(table.caption, caption); 57 const newCaption = contentDocument.createElement('caption'); 58 table.deleteCaption(); 59 assert_equals(table.caption, null); 60 assert_array_equals(element.takeLog().types(), ['disconnected']); 61 }, 'deleteCaption() on HTMLTableElement must enqueue disconnectedCallback when removing a custom element'); 62 63 64 test_with_window(function (contentWindow, contentDocument) { 65 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 66 contentDocument.body.innerHTML = `<table></table>`; 67 const table = contentDocument.querySelector('table'); 68 69 const thead = contentDocument.createElement('thead'); 70 thead.innerHTML = '<tr><td><custom-element>hello</custom-element></td></tr>'; 71 72 assert_array_equals(element.takeLog().types(), ['constructed']); 73 assert_equals(thead.innerHTML, '<tr><td><custom-element>hello</custom-element></td></tr>'); 74 75 assert_equals(table.tHead, null); 76 table.tHead = thead; 77 assert_array_equals(element.takeLog().types(), ['connected']); 78 }, 'tHead on HTMLTableElement must enqueue connectedCallback when inserting a custom element'); 79 80 test_with_window(function (contentWindow, contentDocument) { 81 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 82 contentDocument.body.innerHTML = `<table><thead><tr><td><custom-element>hello</custom-element></td></tr></thead></table>`; 83 const thead = contentDocument.querySelector('thead'); 84 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 85 assert_equals(thead.innerHTML, '<tr><td><custom-element>hello</custom-element></td></tr>'); 86 87 const table = contentDocument.querySelector('table'); 88 assert_equals(table.tHead, thead); 89 const newThead = contentDocument.createElement('thead'); 90 table.tHead = newThead; // Chrome doesn't support setting to null. 91 assert_equals(table.tHead, newThead); 92 assert_array_equals(element.takeLog().types(), ['disconnected']); 93 }, 'tHead on HTMLTableElement must enqueue disconnectedCallback when removing a custom element'); 94 95 test_with_window(function (contentWindow, contentDocument) { 96 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 97 contentDocument.body.innerHTML = `<table><thead><tr><td><custom-element>hello</custom-element></td></tr></thead></table>`; 98 const thead = contentDocument.querySelector('thead'); 99 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 100 assert_equals(thead.innerHTML, '<tr><td><custom-element>hello</custom-element></td></tr>'); 101 102 const table = contentDocument.querySelector('table'); 103 assert_equals(table.tHead, thead); 104 table.deleteTHead(); 105 assert_equals(table.tHead, null); 106 assert_array_equals(element.takeLog().types(), ['disconnected']); 107 }, 'deleteTHead() on HTMLTableElement must enqueue disconnectedCallback when removing a custom element'); 108 109 110 test_with_window(function (contentWindow, contentDocument) { 111 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 112 contentDocument.body.innerHTML = `<table></table>`; 113 const table = contentDocument.querySelector('table'); 114 115 const tfoot = contentDocument.createElement('tfoot'); 116 tfoot.innerHTML = '<tr><td><custom-element>hello</custom-element></td></tr>'; 117 118 assert_array_equals(element.takeLog().types(), ['constructed']); 119 assert_equals(tfoot.innerHTML, '<tr><td><custom-element>hello</custom-element></td></tr>'); 120 121 assert_equals(table.tFoot, null); 122 table.tFoot = tfoot; 123 assert_array_equals(element.takeLog().types(), ['connected']); 124 }, 'tFoot on HTMLTableElement must enqueue connectedCallback when inserting a custom element'); 125 126 test_with_window(function (contentWindow, contentDocument) { 127 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 128 contentDocument.body.innerHTML = `<table><tfoot><tr><td><custom-element>hello</custom-element></td></tr></tfoot></table>`; 129 const tfoot = contentDocument.querySelector('tfoot'); 130 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 131 assert_equals(tfoot.innerHTML, '<tr><td><custom-element>hello</custom-element></td></tr>'); 132 133 const table = contentDocument.querySelector('table'); 134 assert_equals(table.tFoot, tfoot); 135 const newThead = contentDocument.createElement('tfoot'); 136 table.tFoot = newThead; // Chrome doesn't support setting to null. 137 assert_equals(table.tFoot, newThead); 138 assert_array_equals(element.takeLog().types(), ['disconnected']); 139 }, 'tFoot on HTMLTableElement must enqueue disconnectedCallback when removing a custom element'); 140 141 test_with_window(function (contentWindow, contentDocument) { 142 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 143 contentDocument.body.innerHTML = `<table><tfoot><tr><td><custom-element>hello</custom-element></td></tr></tfoot></table>`; 144 const tfoot = contentDocument.querySelector('tfoot'); 145 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 146 assert_equals(tfoot.innerHTML, '<tr><td><custom-element>hello</custom-element></td></tr>'); 147 148 const table = contentDocument.querySelector('table'); 149 assert_equals(table.tFoot, tfoot); 150 table.deleteTFoot(); 151 assert_equals(table.tFoot, null); 152 assert_array_equals(element.takeLog().types(), ['disconnected']); 153 }, 'deleteTFoot() on HTMLTableElement must enqueue disconnectedCallback when removing a custom element'); 154 155 156 test_with_window(function (contentWindow, contentDocument) { 157 const element = define_custom_element_in_window(contentWindow, 'custom-element', []); 158 contentDocument.body.innerHTML = `<table><tr><td><custom-element>hello</custom-element></td></tr></table>`; 159 const tr = contentDocument.querySelector('tr'); 160 assert_array_equals(element.takeLog().types(), ['constructed', 'connected']); 161 assert_equals(tr.innerHTML, '<td><custom-element>hello</custom-element></td>'); 162 163 const table = contentDocument.querySelector('table'); 164 assert_equals(table.rows.length, 1); 165 assert_equals(table.rows[0], tr); 166 table.deleteRow(0); 167 assert_equals(table.rows.length, 0); 168 assert_array_equals(element.takeLog().types(), ['disconnected']); 169 }, 'deleteRow() on HTMLTableElement must enqueue disconnectedCallback when removing a custom element'); 170 171 </script> 172 </body> 173 </html>