Understanding web specifications

Reading web standards and understanding the details is a skill. A simple statement about one element may imply more detail than is immediately apparent. It is also important not to invent details which are not explicitly documented.

Given a web page containing the following table:
```
  <table id="my-table">
    <caption>First caption</caption>
    <caption>Second caption</caption>
    <thead>
    …
  </table>
```
When the following code is run:
```
document.getElementById( 'my-table' ).deleteCaption();
```
What is the result?
- The first caption is removed
```
  <table id="my-table">
    <caption>Second caption</caption>
    <thead>
    …
  </table>
```
- The last caption is removed
```
  <table id="my-table">
    <caption>First caption</caption>
    <thead>
    …
  </table>
```
- All captions are removed
```
  <table id="my-table">
    <thead>
    …
  </table>
```
- No captions are removed. Tables are only allowed to have one caption so this is an error.
```
  <table id="my-table">
    <caption>First caption</caption>
    <caption>Second caption</caption>
    <thead>
    …
  </table>
```
The correct answer is the first caption is removed.
- The last caption would not be removed. The specification calls for the first caption to be removed.
- The specification states that the first caption will be removed. It does not mention any other captions. UAs must not do anything unless explicitly documented in the spec. The second caption will not be changed by deleteCaption().
- Although a table should not have more than one caption, nothing prevents authors from using more. Specifications need to go beyond what happens with valid markup and provide consistent advice for handling markup errors. In this case, the specification states that the first caption will be removed.
The deleteCaption() method must remove the first caption element child of the table element, if any.
Given a web page containing the following table:
```
  <table id="my-table">
    <thead>
    …
  </table>
```
When the following code is run:
```
document.getElementById( 'my-table' ).deleteCaption();
```
What is the result?
- Nothing happens
- DOMException NOT_FOUND_ERR is raised
The correct answer is nothing happens.
- There is no caption to remove. The specification states it must remove a caption “if any”—allowing for the possibility that a table may not have any caption elements.
- The NOT_FOUND_ERR comes from the removeChild() method in the DOM specification, but that does not apply here. It is important to not make assumptions based on similar features in other standards. If an exception were required, it would be documented in the specification.
The deleteCaption() method must remove the first caption element child of the table element, if any.
Given a web page containing the following table:
```
  <table id="my-table">
    <caption>My caption</caption>
    <thead>
    …
  </table>
```
When the following code is run:
```
var result = document.getElementById( 'my-table' ).deleteCaption();
```
What is the value of result?
- null
- the caption element that was removed
- true
- undefined
- void
The correct answer is undefined.
- Although the spec states void and you may guess that this translates to null, the Web IDL spec clarifies that undefined is the correct type to use where void is specified, rather than null.
- The DOM method removeChild() returns the element that was removed, but deleteCaption() is specified to return void. It is important to read the specification and not make assumptions based on behaviour specified for other contexts.
- The method does not return a boolean indicating whether or not it was successful. There is nothing in the specification to indicate a boolean would be expected.
- undefined is the correct way a browser will return void, as documented in the Web IDL specification.
- void is what the specification states is returned, but it is important to note that the specification is written in Web IDL. When the spec is implemented in a web browser, this method will be exposed via ECMAScript. ECMAScript does not have a void value. The equivalent of void in ECMAScript is undefined. This is documented in the Web IDL specification.
void deleteCaption();

Functions on platform objects that implement an operation whose IDL specifies a void return type must return the undefined value.
4.2.2. void — ECMAScript type mapping — Web IDL

Given a web page containing the following table:


  <table id="my-table">
    <thead>
    …
    <tbody>
      <tr>
        <td>
          <table>
            <caption>My caption</caption>
            …
  </table>

When the following code is run:

document.getElementById( 'my-table' ).deleteCaption();

What is the result?

The nested caption is removed


<table id="my-table">
  <thead>
  …
  <tbody>
    <tr>
      <td>
        <table>
          …
</table>

The nested caption is not removed


<table id="my-table">
  <thead>
  …
  <tbody>
    <tr>
      <td>
        <table>
          <caption>My caption</caption>
          …
</table>

The caption is not removed. The specification refers to child elements, not descendents.

The deleteCaption() method must remove the first caption element child of the table element, if any.

Given a web page containing the following table:
```
  <table id="my-table">
    <svg:caption xmlns:svg="http://www.w3.org/2000/svg">My caption</svg:caption>
    <thead>
    …
  </table>
```
When the following code is run:
```
document.getElementById( 'my-table' ).deleteCaption();
```
What is the result?
- The caption is removed
```
  <table id="my-table">
    <thead>
    …
  </table>
```
- The caption is not removed
```
  <table id="my-table">
    <svg:caption xmlns:svg="http://www.w3.org/2000/svg">My caption</svg:caption>
    <thead>
    …
  </table>
```
The svg:caption will not be removed. The deleteCaption() method relates specifically to the HTML table and caption elements and does not specify any action for other elements—including caption elements from a different namespace.

The deleteCaption() method must remove the first caption element child of the table element, if any.

Except where otherwise stated, all elements defined or mentioned in this specification are in the HTML namespace ("http://www.w3.org/1999/xhtml"), and all attributes defined or mentioned in this specification have no namespace.
2.1.2 XML — HTML Living Standard

Now that you've taken this quiz, try writing actual tests! Fork this codepen starter and have a go!