caption-methods.html (9962B)
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>Creating and deleting captions</title> 6 <link rel="author" title="Erika Navara" href="mailto:edoyle@microsoft.com"> 7 <link rel="help" href="https://html.spec.whatwg.org/multipage/#the-table-element" /> 8 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-table-createcaption" /> 9 <link rel="help" href="https://html.spec.whatwg.org/multipage/#dom-table-deletecaption" /> 10 <script src="/resources/testharness.js"></script> 11 <script src="/resources/testharnessreport.js"></script> 12 </head> 13 <body> 14 <div id="log"></div> 15 <table id="table0" style="display:none"> 16 </table> 17 <table id="table1" style="display:none"> 18 <caption id="caption1">caption</caption> 19 <tr> 20 <td>cell</td> 21 <td>cell</td> 22 </tr> 23 </table> 24 <table id="table2" style="display:none"> 25 <foo:caption>caption</foo:caption> 26 <tr> 27 <td>cell</td> 28 <td>cell</td> 29 </tr> 30 </table> 31 <table id="table3" style="display:none"> 32 <caption id="caption3">caption 3</caption> 33 <tr> 34 <td>cell</td> 35 <td>cell</td> 36 </tr> 37 </table> 38 <table id="table4" style="display:none"> 39 </table> 40 <table id="table5" style="display:none"> 41 </table> 42 <table id="table6" style="display:none"> 43 <caption id="caption6">caption 6</caption> 44 <tr> 45 <td>cell</td> 46 <td>cell</td> 47 </tr> 48 </table> 49 <table id="table7" style="display:none"> 50 <caption id="caption7">caption 7</caption> 51 <tbody id="tbody7"> 52 <tr> 53 <td>cell</td> 54 <td>cell</td> 55 </tr> 56 </tbody> 57 </table> 58 <table id="table10" style="display:none"> 59 <tbody> 60 <tr> 61 <td>cell</td> 62 <td>cell</td> 63 </tr> 64 </tbody> 65 <caption>caption 10</caption> 66 </table> 67 <table id="table11" style="display:none"> 68 <caption id="caption11">caption 11</caption> 69 </table> 70 <table id="table12" style="display:none"> 71 <caption>caption 1</caption> 72 <caption>caption 2</caption> 73 </table> 74 <table id="table13" style="display:none"> 75 </table> 76 <table id="table14" style="display:none"> 77 <tbody> 78 <tr> 79 <td>cell</td> 80 <td>cell</td> 81 </tr> 82 </tbody> 83 <caption id="caption14">caption 14</caption> 84 </table> 85 <script> 86 test(function () { 87 var table0 = document.getElementById('table0'); 88 var caption = document.createElementNS("foo", "caption"); 89 table0.appendChild(caption); 90 var table0FirstNode = table0.firstChild; 91 var testCaption = table0.createCaption(); 92 assert_not_equals(testCaption, table0FirstNode); 93 assert_equals(testCaption, table0.firstChild); 94 }, "createCaption method creates new caption if existing caption is not in html namespace") 95 96 test(function () { 97 var table1 = document.getElementById('table1'); 98 var testCaption = table1.createCaption(); 99 var table1FirstCaption = table1.caption; 100 assert_equals(testCaption, table1FirstCaption); 101 }, "createCaption method returns the first caption element child of the table") 102 103 test(function () { 104 var table2 = document.getElementById('table2'); 105 var test2Caption = table2.createCaption(); 106 var table2FirstNode = table2.firstChild; 107 assert_true(test2Caption instanceof HTMLTableCaptionElement); 108 assert_equals(table2FirstNode, test2Caption); 109 }, "createCaption method creates a new caption and inserts it as the first node of the table element") 110 111 test(function () { 112 var table = document.createElement('table'); 113 assert_equals(table.createCaption(), table.createCaption()); 114 }, "createCaption will not create new caption if one exists") 115 116 test(function () { 117 var table = document.createElementNS("http://www.w3.org/1999/xhtml", "foo:table") 118 var caption = table.createCaption(); 119 assert_equals(caption.prefix, null); 120 }, "createCaption will not copy table's prefix") 121 122 test(function () { 123 var table3 = document.getElementById('table3'); 124 assert_equals(table3.caption.textContent, "caption 3"); 125 table3.deleteCaption(); 126 assert_equals(table3.caption, null); 127 }, "deleteCaption method removes the first caption element child of the table element") 128 129 test(function () { 130 var table4 = document.getElementById('table4'); 131 var caption = document.createElementNS("foo", "caption"); 132 table4.appendChild(caption); 133 table4.deleteCaption(); 134 assert_equals(caption.parentNode, table4); 135 }, "deleteCaption method not remove caption that is not in html namespace") 136 137 test(function() { 138 var table5 = document.getElementById('table5'); 139 var caption = document.createElement('caption'); 140 caption.appendChild(table5) 141 142 // Node cannot be inserted at the specified point in the hierarchy 143 assert_throws_dom("HierarchyRequestError", function() { 144 table5.caption = caption; 145 }); 146 147 assert_not_equals(table5.caption, caption); 148 }, "Setting caption rethrows exception"); 149 150 test(function() { 151 var table6 = document.getElementById("table6"); 152 var caption = document.getElementById("caption6"); 153 assert_equals(table6.caption, caption); 154 155 var newCaption = document.createElement("caption"); 156 table6.caption = newCaption; 157 assert_equals(newCaption.parentNode, table6); 158 assert_equals(table6.firstChild, newCaption); 159 assert_equals(table6.caption, newCaption); 160 }, "Assigning a caption to table.caption") 161 162 test(function() { 163 var table7 = document.getElementById("table7"); 164 var caption = document.getElementById("caption7"); 165 assert_equals(table7.caption, caption); 166 167 table7.caption = null; 168 assert_equals(caption.parentNode, null); 169 assert_equals(table7.firstElementChild, document.getElementById("tbody7")); 170 assert_equals(table7.caption, null); 171 }, "Assigning null to table.caption") 172 173 test(function() { 174 var table8 = document.createElement("table"); 175 var caption = document.createElement("captİon"); 176 assert_throws_js(TypeError, function() { 177 table8.caption = caption; 178 }); 179 }, "Assigning a non-caption to table.caption") 180 181 test(function() { 182 var table9 = document.createElement("table"); 183 var caption = document.createElementNS("http://www.example.com", "caption"); 184 assert_throws_js(TypeError, function() { 185 table9.caption = caption; 186 }); 187 }, "Assigning a foreign caption to table.caption") 188 189 test(function() { 190 var table = document.createElement("table"); 191 var caption = document.createElement("caption"); 192 caption.innerHTML = "new caption"; 193 table.caption = caption; 194 195 assert_equals(caption.parentNode, table); 196 assert_equals(table.firstChild, caption); 197 assert_equals(table.caption.innerHTML, "new caption"); 198 }, "Set table.caption when the table doesn't already have a caption") 199 200 test(function() { 201 var table10 = document.getElementById("table10"); 202 var caption = document.createElement("caption"); 203 caption.innerHTML = "new caption"; 204 table10.caption = caption; 205 206 assert_equals(caption.parentNode, table10); 207 assert_equals(table10.firstChild, caption); 208 assert_equals(table10.caption.innerHTML, "new caption"); 209 210 var captions = table10.getElementsByTagName('caption'); 211 assert_equals(captions.length, 1); 212 }, "Set table.caption when the table has a caption child but with other siblings before it") 213 214 test(function() { 215 var table11 = document.getElementById("table11"); 216 var caption = document.createElement("caption"); 217 caption.innerHTML = "new caption"; 218 table11.caption = caption; 219 220 assert_equals(caption.parentNode, table11); 221 assert_equals(table11.firstChild, caption); 222 assert_equals(table11.caption.innerHTML, "new caption"); 223 224 var captions = table11.getElementsByTagName('caption'); 225 assert_equals(captions.length, 1); 226 }, "Set table.caption when the table has a caption descendant") 227 228 test(function() { 229 var table12 = document.getElementById("table12"); 230 var caption = document.createElement("caption"); 231 caption.innerHTML = "new caption"; 232 table12.caption = caption; 233 234 assert_equals(caption.parentNode, table12); 235 assert_equals(table12.firstChild, caption); 236 assert_equals(table12.caption.innerHTML, "new caption"); 237 238 var captions = table12.getElementsByTagName('caption'); 239 assert_equals(captions.length, 2); 240 assert_equals(captions[0].innerHTML, "new caption"); 241 assert_equals(captions[1].innerHTML, "caption 2"); 242 }, "Set table.caption when the table has two caption children") 243 244 promise_test(async t => { 245 var table13 = document.getElementById("table13"); 246 var iframe = document.createElement("iframe"); 247 iframe.srcdoc = '<table><caption id="caption13">caption 13</caption></table>'; 248 document.body.appendChild(iframe); 249 250 var iframeWatcher = new EventWatcher(t, iframe, "load"); 251 await iframeWatcher.wait_for("load"); 252 var caption = iframe.contentWindow.document.getElementById("caption13"); 253 table13.caption = caption; 254 255 assert_equals(caption.parentNode, table13); 256 assert_equals(table13.firstChild, caption); 257 assert_equals(table13.caption.innerHTML, "caption 13"); 258 259 var captions = table13.getElementsByTagName('caption'); 260 assert_equals(captions.length, 1); 261 }, "Assigning a caption has a different owner document to table.caption") 262 263 test(function() { 264 var table14 = document.getElementById("table14"); 265 var caption = document.getElementById("caption14"); 266 table14.caption = caption; 267 268 assert_equals(caption.parentNode, table14); 269 assert_equals(table14.firstChild, caption); 270 271 var captions = table14.getElementsByTagName('caption'); 272 assert_equals(captions.length, 1); 273 }, "Assigning the caption already in the table to table.caption") 274 </script> 275 </body> 276 </html>