PageRenderTime 3ms CodeModel.GetById 34ms RepoModel.GetById 0ms app.codeStats 0ms

/html/semantics/tabular-data/the-table-element/caption-methods.html

https://gitlab.com/Spagnotti3/wpt
HTML | 276 lines | 243 code | 33 blank | 0 comment | 0 complexity | 48065bb83c55659e40745a79c2a7dd37 MD5 | raw file
  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. test(function () {
  96. var table1 = document.getElementById('table1');
  97. var testCaption = table1.createCaption();
  98. var table1FirstCaption = table1.caption;
  99. assert_equals(testCaption, table1FirstCaption);
  100. }, "createCaption method returns the first caption element child of the table")
  101. test(function () {
  102. var table2 = document.getElementById('table2');
  103. var test2Caption = table2.createCaption();
  104. var table2FirstNode = table2.firstChild;
  105. assert_true(test2Caption instanceof HTMLTableCaptionElement);
  106. assert_equals(table2FirstNode, test2Caption);
  107. }, "createCaption method creates a new caption and inserts it as the first node of the table element")
  108. test(function () {
  109. var table = document.createElement('table');
  110. assert_equals(table.createCaption(), table.createCaption());
  111. }, "createCaption will not create new caption if one exists")
  112. test(function () {
  113. var table = document.createElementNS("http://www.w3.org/1999/xhtml", "foo:table")
  114. var caption = table.createCaption();
  115. assert_equals(caption.prefix, null);
  116. }, "createCaption will not copy table's prefix")
  117. test(function () {
  118. var table3 = document.getElementById('table3');
  119. assert_equals(table3.caption.textContent, "caption 3");
  120. table3.deleteCaption();
  121. assert_equals(table3.caption, null);
  122. }, "deleteCaption method removes the first caption element child of the table element")
  123. test(function () {
  124. var table4 = document.getElementById('table4');
  125. var caption = document.createElementNS("foo", "caption");
  126. table4.appendChild(caption);
  127. table4.deleteCaption();
  128. assert_equals(caption.parentNode, table4);
  129. }, "deleteCaption method not remove caption that is not in html namespace")
  130. test(function() {
  131. var table5 = document.getElementById('table5');
  132. var caption = document.createElement('caption');
  133. caption.appendChild(table5)
  134. // Node cannot be inserted at the specified point in the hierarchy
  135. assert_throws_dom("HierarchyRequestError", function() {
  136. table5.caption = caption;
  137. });
  138. assert_not_equals(table5.caption, caption);
  139. }, "Setting caption rethrows exception");
  140. test(function() {
  141. var table6 = document.getElementById("table6");
  142. var caption = document.getElementById("caption6");
  143. assert_equals(table6.caption, caption);
  144. var newCaption = document.createElement("caption");
  145. table6.caption = newCaption;
  146. assert_equals(newCaption.parentNode, table6);
  147. assert_equals(table6.firstChild, newCaption);
  148. assert_equals(table6.caption, newCaption);
  149. }, "Assigning a caption to table.caption")
  150. test(function() {
  151. var table7 = document.getElementById("table7");
  152. var caption = document.getElementById("caption7");
  153. assert_equals(table7.caption, caption);
  154. table7.caption = null;
  155. assert_equals(caption.parentNode, null);
  156. assert_equals(table7.firstElementChild, document.getElementById("tbody7"));
  157. assert_equals(table7.caption, null);
  158. }, "Assigning null to table.caption")
  159. test(function() {
  160. var table8 = document.createElement("table");
  161. var caption = document.createElement("captÄ°on");
  162. assert_throws_js(TypeError, function() {
  163. table8.caption = caption;
  164. });
  165. }, "Assigning a non-caption to table.caption")
  166. test(function() {
  167. var table9 = document.createElement("table");
  168. var caption = document.createElementNS("http://www.example.com", "caption");
  169. assert_throws_js(TypeError, function() {
  170. table9.caption = caption;
  171. });
  172. }, "Assigning a foreign caption to table.caption")
  173. test(function() {
  174. var table = document.createElement("table");
  175. var caption = document.createElement("caption");
  176. caption.innerHTML = "new caption";
  177. table.caption = caption;
  178. assert_equals(caption.parentNode, table);
  179. assert_equals(table.firstChild, caption);
  180. assert_equals(table.caption.innerHTML, "new caption");
  181. }, "Set table.caption when the table doesn't already have a caption")
  182. test(function() {
  183. var table10 = document.getElementById("table10");
  184. var caption = document.createElement("caption");
  185. caption.innerHTML = "new caption";
  186. table10.caption = caption;
  187. assert_equals(caption.parentNode, table10);
  188. assert_equals(table10.firstChild, caption);
  189. assert_equals(table10.caption.innerHTML, "new caption");
  190. var captions = table10.getElementsByTagName('caption');
  191. assert_equals(captions.length, 1);
  192. }, "Set table.caption when the table has a caption child but with other siblings before it")
  193. test(function() {
  194. var table11 = document.getElementById("table11");
  195. var caption = document.createElement("caption");
  196. caption.innerHTML = "new caption";
  197. table11.caption = caption;
  198. assert_equals(caption.parentNode, table11);
  199. assert_equals(table11.firstChild, caption);
  200. assert_equals(table11.caption.innerHTML, "new caption");
  201. var captions = table11.getElementsByTagName('caption');
  202. assert_equals(captions.length, 1);
  203. }, "Set table.caption when the table has a caption descendant")
  204. test(function() {
  205. var table12 = document.getElementById("table12");
  206. var caption = document.createElement("caption");
  207. caption.innerHTML = "new caption";
  208. table12.caption = caption;
  209. assert_equals(caption.parentNode, table12);
  210. assert_equals(table12.firstChild, caption);
  211. assert_equals(table12.caption.innerHTML, "new caption");
  212. var captions = table12.getElementsByTagName('caption');
  213. assert_equals(captions.length, 2);
  214. assert_equals(captions[0].innerHTML, "new caption");
  215. assert_equals(captions[1].innerHTML, "caption 2");
  216. }, "Set table.caption when the table has two caption children")
  217. promise_test(async t => {
  218. var table13 = document.getElementById("table13");
  219. var iframe = document.createElement("iframe");
  220. iframe.srcdoc = '<table><caption id="caption13">caption 13</caption></table>';
  221. document.body.appendChild(iframe);
  222. var iframeWatcher = new EventWatcher(t, iframe, "load");
  223. await iframeWatcher.wait_for("load");
  224. var caption = iframe.contentWindow.document.getElementById("caption13");
  225. table13.caption = caption;
  226. assert_equals(caption.parentNode, table13);
  227. assert_equals(table13.firstChild, caption);
  228. assert_equals(table13.caption.innerHTML, "caption 13");
  229. var captions = table13.getElementsByTagName('caption');
  230. assert_equals(captions.length, 1);
  231. }, "Assigning a caption has a different owner document to table.caption")
  232. test(function() {
  233. var table14 = document.getElementById("table14");
  234. var caption = document.getElementById("caption14");
  235. table14.caption = caption;
  236. assert_equals(caption.parentNode, table14);
  237. assert_equals(table14.firstChild, caption);
  238. var captions = table14.getElementsByTagName('caption');
  239. assert_equals(captions.length, 1);
  240. }, "Assigning the caption already in the table to table.caption")
  241. </script>
  242. </body>
  243. </html>