From dadad8fc777f77b33a0154dc9129473b11607459 Mon Sep 17 00:00:00 2001
From: Titus <tituswormer@gmail.com>
Date: Sun, 26 May 2019 21:21:05 +0200
Subject: [PATCH] Add support for form elements

Closes GH-3.
Closes GH-50.
---
 index.js                                      |  14 ++
 lib/handlers/{data-list.js => dl.js}          |   0
 lib/handlers/index.js                         |  17 +-
 lib/handlers/input.js                         |  97 +++++++++
 lib/handlers/list-item.js                     |  20 +-
 lib/handlers/select.js                        |  25 +++
 lib/handlers/textarea.js                      |   9 +
 lib/util/find-selected-options.js             |  69 ++++++
 package.json                                  |   1 +
 test/fixtures/button/index.html               |  29 +++
 test/fixtures/button/index.json               |   3 +
 test/fixtures/button/index.md                 |  19 ++
 test/fixtures/datalist-input-option/index.md  |   2 +-
 test/fixtures/fieldset/index.html             |  53 +++++
 test/fixtures/fieldset/index.json             |   4 +
 test/fixtures/fieldset/index.md               |  45 ++++
 test/fixtures/form/index.html                 | 199 +++++++++++++++++
 test/fixtures/form/index.json                 |   4 +
 test/fixtures/form/index.md                   | 103 +++++++++
 test/fixtures/input/index.html                | 181 ++++++++++++++++
 test/fixtures/input/index.json                |   5 +
 test/fixtures/input/index.md                  | 201 ++++++++++++++++++
 test/fixtures/output/index.html               |   4 +-
 test/fixtures/output/index.md                 |   2 +-
 .../select-optgroup-option/index.html         |  43 +++-
 test/fixtures/select-optgroup-option/index.md |  12 +-
 test/fixtures/textarea/index.html             |  20 ++
 test/fixtures/textarea/index.json             |   5 +
 test/fixtures/textarea/index.md               |  11 +
 29 files changed, 1181 insertions(+), 16 deletions(-)
 rename lib/handlers/{data-list.js => dl.js} (100%)
 create mode 100644 lib/handlers/input.js
 create mode 100644 lib/handlers/select.js
 create mode 100644 lib/handlers/textarea.js
 create mode 100644 lib/util/find-selected-options.js
 create mode 100644 test/fixtures/button/index.html
 create mode 100644 test/fixtures/button/index.json
 create mode 100644 test/fixtures/button/index.md
 create mode 100644 test/fixtures/fieldset/index.html
 create mode 100644 test/fixtures/fieldset/index.json
 create mode 100644 test/fixtures/fieldset/index.md
 create mode 100644 test/fixtures/form/index.html
 create mode 100644 test/fixtures/form/index.json
 create mode 100644 test/fixtures/form/index.md
 create mode 100644 test/fixtures/input/index.html
 create mode 100644 test/fixtures/input/index.json
 create mode 100644 test/fixtures/input/index.md
 create mode 100644 test/fixtures/textarea/index.html
 create mode 100644 test/fixtures/textarea/index.json
 create mode 100644 test/fixtures/textarea/index.md

diff --git a/index.js b/index.js
index 085b713..ceba638 100644
--- a/index.js
+++ b/index.js
@@ -3,6 +3,7 @@
 module.exports = toMdast
 
 var minify = require('rehype-minify-whitespace')
+var visit = require('unist-util-visit')
 var xtend = require('xtend')
 var one = require('./lib/one')
 var handlers = require('./lib/handlers')
@@ -10,7 +11,9 @@ var handlers = require('./lib/handlers')
 function toMdast(tree, options) {
   var settings = options || {}
   var opts = {newlines: settings.newlines === true}
+  var byId = {}
 
+  h.nodeById = byId
   h.baseFound = false
   h.frozenBaseURL = null
 
@@ -18,6 +21,8 @@ function toMdast(tree, options) {
   h.augment = augment
   h.document = settings.document
 
+  visit(tree, onvisit)
+
   return one(h, minify(opts)(tree), null)
 
   function h(node, type, props, children) {
@@ -51,4 +56,13 @@ function toMdast(tree, options) {
 
     return right
   }
+
+  function onvisit(node) {
+    var props = node.properties || {}
+    var id = props.id
+
+    if (id && !(id in node)) {
+      byId[id] = node
+    }
+  }
 }
diff --git a/lib/handlers/data-list.js b/lib/handlers/dl.js
similarity index 100%
rename from lib/handlers/data-list.js
rename to lib/handlers/dl.js
diff --git a/lib/handlers/index.js b/lib/handlers/index.js
index fe40fdb..d995be6 100644
--- a/lib/handlers/index.js
+++ b/lib/handlers/index.js
@@ -8,13 +8,14 @@ var br = require('./break')
 var cell = require('./table-cell')
 var code = require('./code')
 var comment = require('./comment')
-var dataList = require('./data-list')
+var dl = require('./dl')
 var del = require('./delete')
 var emphasis = require('./emphasis')
 var heading = require('./heading')
 var iframe = require('./iframe')
 var image = require('./image')
 var inlineCode = require('./inline-code')
+var input = require('./input')
 var link = require('./link')
 var list = require('./list')
 var listItem = require('./list-item')
@@ -23,9 +24,11 @@ var paragraph = require('./paragraph')
 var quote = require('./q')
 var root = require('./root')
 var row = require('./table-row')
+var select = require('./select')
 var strong = require('./strong')
 var table = require('./table')
 var text = require('./text')
+var textarea = require('./textarea')
 var thematicBreak = require('./thematic-break')
 var wbr = require('./wbr')
 
@@ -49,7 +52,6 @@ exports.element = ignore
 exports.embed = ignore
 exports.frame = ignore
 exports.frameset = ignore
-exports.input = ignore
 exports.isindex = ignore
 exports.keygen = ignore
 exports.link = ignore
@@ -66,7 +68,6 @@ exports.optgroup = ignore
 exports.option = ignore
 exports.param = ignore
 exports.script = ignore
-exports.select = ignore
 exports.shadow = ignore
 exports.source = ignore
 exports.spacer = ignore
@@ -82,6 +83,7 @@ exports.bdi = all
 exports.bdo = all
 exports.big = all
 exports.blink = all
+exports.button = all
 exports.canvas = all
 exports.cite = all
 exports.data = all
@@ -89,6 +91,7 @@ exports.details = all
 exports.dfn = all
 exports.font = all
 exports.ins = all
+exports.label = all
 exports.marquee = all
 exports.meter = all
 exports.nobr = all
@@ -117,12 +120,15 @@ exports.aside = wrapped
 exports.body = wrapped
 exports.center = wrapped
 exports.div = wrapped
+exports.fieldset = wrapped
 exports.figcaption = wrapped
 exports.figure = wrapped
+exports.form = wrapped
 exports.footer = wrapped
 exports.header = wrapped
 exports.hgroup = wrapped
 exports.html = wrapped
+exports.legend = wrapped
 exports.main = wrapped
 exports.multicol = wrapped
 exports.nav = wrapped
@@ -137,7 +143,7 @@ exports.blockquote = blockquote
 exports.br = br
 exports.code = inlineCode
 exports.dir = list
-exports.dl = dataList
+exports.dl = dl
 exports.dt = listItem
 exports.dd = listItem
 exports.del = del
@@ -153,6 +159,7 @@ exports.i = emphasis
 exports.iframe = iframe
 exports.img = image
 exports.image = image
+exports.input = input
 exports.kbd = inlineCode
 exports.li = listItem
 exports.listing = code
@@ -164,11 +171,13 @@ exports.pre = code
 exports.q = quote
 exports.s = del
 exports.samp = inlineCode
+exports.select = select
 exports.strike = del
 exports.strong = strong
 exports.summary = paragraph
 exports.table = table
 exports.td = cell
+exports.textarea = textarea
 exports.th = cell
 exports.tr = row
 exports.tt = inlineCode
diff --git a/lib/handlers/input.js b/lib/handlers/input.js
new file mode 100644
index 0000000..a02f845
--- /dev/null
+++ b/lib/handlers/input.js
@@ -0,0 +1,97 @@
+'use strict'
+
+var repeat = require('repeat-string')
+var is = require('hast-util-is-element')
+var resolve = require('../util/resolve')
+var findSelectedOptions = require('../util/find-selected-options')
+
+module.exports = input
+
+// eslint-disable-next-line complexity
+function input(h, node) {
+  var byId = h.nodeById
+  var props = node.properties
+  var value = props.value || props.placeholder
+  var list = props.list
+  var type = props.type
+  var values = []
+  var length
+  var index
+  var results
+  var url
+  var text
+
+  if (props.disabled || props.type === 'hidden' || props.type === 'file') {
+    return
+  }
+
+  if (type === 'checkbox' || type === 'radio') {
+    return {type: 'text', value: '[' + (props.checked ? 'x' : ' ') + ']'}
+  }
+
+  if (type === 'image' && props.alt) {
+    values = [[props.alt]]
+  } else if (value) {
+    values = [[value]]
+  } else if (
+    list &&
+    type !== 'password' && // `list` is not supported on `password`
+    type !== 'file' && // …or `file`
+    type !== 'submit' && // …or `submit`
+    type !== 'reset' && // …or `reset`
+    type !== 'button' && // …or `button`
+    list in byId &&
+    is(byId[list], 'datalist')
+  ) {
+    values = findSelectedOptions(byId[list], props)
+  }
+
+  if (values.length === 0) {
+    return
+  }
+
+  // Passwords don’t support `list`.
+  if (type === 'password') {
+    values[0] = [repeat('•', values[0][0].length)]
+  }
+
+  // Images don’t support `list`.
+  if (type === 'image') {
+    return h(node, 'image', {
+      url: resolve(h, props.src),
+      title: props.title || null,
+      alt: values[0][0]
+    })
+  }
+
+  length = values.length
+  index = -1
+  results = []
+
+  if (type !== 'url' && type !== 'email') {
+    while (++index < length) {
+      value = values[index]
+      results.push(value[1] ? value[1] + ' (' + value[0] + ')' : value[0])
+    }
+
+    return h.augment(node, {type: 'text', value: results.join(', ')})
+  }
+
+  while (++index < length) {
+    value = values[index]
+    text = resolve(h, value[0])
+    url = type === 'email' ? 'mailto:' + text : text
+
+    results.push(
+      h(node, 'link', {title: null, url: url}, [
+        {type: 'text', value: value[1] || text}
+      ])
+    )
+
+    if (index !== length - 1) {
+      results.push({type: 'text', value: ', '})
+    }
+  }
+
+  return results
+}
diff --git a/lib/handlers/list-item.js b/lib/handlers/list-item.js
index 7160472..68e43e5 100644
--- a/lib/handlers/list-item.js
+++ b/lib/handlers/list-item.js
@@ -5,6 +5,7 @@ module.exports = listItem
 var is = require('hast-util-is-element')
 var wrapChildren = require('../util/wrap-children')
 
+// eslint-disable-next-line complexity
 function listItem(h, node) {
   var children = node.children
   var head = children[0]
@@ -21,7 +22,8 @@ function listItem(h, node) {
     if (
       checkbox &&
       is(checkbox, 'input') &&
-      checkbox.properties.type === 'checkbox'
+      (checkbox.properties.type === 'checkbox' ||
+        checkbox.properties.type === 'radio')
     ) {
       checked = Boolean(checkbox.properties.checked)
     }
@@ -29,9 +31,23 @@ function listItem(h, node) {
 
   content = wrapChildren(h, node)
 
-  // Remove initial spacing if we previously found a checkbox.
   if (checked !== null) {
     grandchildren = content[0] && content[0].children
+
+    // Remove text checkbox (enabled inputs are mapped to textual checkboxes).
+    head = grandchildren && grandchildren[0]
+
+    if (
+      head &&
+      head.type === 'text' &&
+      head.value.length === 3 &&
+      head.value.charAt(0) === '[' &&
+      head.value.charAt(2) === ']'
+    ) {
+      grandchildren.shift()
+    }
+
+    // Remove initial spacing if we previously found a checkbox.
     head = grandchildren && grandchildren[0]
 
     if (head && head.type === 'text' && head.value.charAt(0) === ' ') {
diff --git a/lib/handlers/select.js b/lib/handlers/select.js
new file mode 100644
index 0000000..dec6be8
--- /dev/null
+++ b/lib/handlers/select.js
@@ -0,0 +1,25 @@
+'use strict'
+
+var findSelectedOptions = require('../util/find-selected-options')
+
+module.exports = select
+
+function select(h, node) {
+  var values = findSelectedOptions(node)
+  var length = values.length
+  var index = -1
+  var results = []
+  var value
+
+  while (++index < length) {
+    value = values[index]
+    results.push(value[1] ? value[1] + ' (' + value[0] + ')' : value[0])
+  }
+
+  if (results.length !== 0) {
+    return h.augment(node, {
+      type: 'text',
+      value: results.join(', ')
+    })
+  }
+}
diff --git a/lib/handlers/textarea.js b/lib/handlers/textarea.js
new file mode 100644
index 0000000..39c29cc
--- /dev/null
+++ b/lib/handlers/textarea.js
@@ -0,0 +1,9 @@
+'use strict'
+
+var toText = require('hast-util-to-text')
+
+module.exports = textarea
+
+function textarea(h, node) {
+  return h.augment(node, {type: 'text', value: toText(node)})
+}
diff --git a/lib/util/find-selected-options.js b/lib/util/find-selected-options.js
new file mode 100644
index 0000000..6a90b4f
--- /dev/null
+++ b/lib/util/find-selected-options.js
@@ -0,0 +1,69 @@
+'use strict'
+
+var is = require('hast-util-is-element')
+var has = require('hast-util-has-property')
+var toText = require('hast-util-to-text')
+
+module.exports = findSelectedOptions
+
+function findSelectedOptions(node, properties) {
+  var props = properties || node.properties
+  var multiple = props.multiple
+  var size = Math.min(parseInt(props.size, 10), 0) || (multiple ? 4 : 1)
+  var options = findOptions(node)
+  var length = options.length
+  var index = -1
+  var selectedOptions = []
+  var values = []
+  var option
+  var list
+  var content
+  var label
+  var value
+
+  while (++index < length) {
+    option = options[index]
+
+    if (option.properties.selected) {
+      selectedOptions.push(option)
+    }
+  }
+
+  list = selectedOptions.length === 0 ? options : selectedOptions
+  options = list.slice(0, size)
+  length = options.length
+  index = -1
+
+  while (++index < length) {
+    option = options[index]
+    content = toText(option)
+    label = content || option.properties.label
+    value = option.properties.value || content
+
+    values.push([value, label === value ? null : label])
+  }
+
+  return values
+}
+
+function findOptions(node) {
+  var children = node.children
+  var length = children.length
+  var index = -1
+  var results = []
+  var child
+
+  while (++index < length) {
+    child = children[index]
+
+    if (is(child, 'option')) {
+      if (!has(child, 'disabled')) {
+        results.push(child)
+      }
+    } else if ('children' in child) {
+      results = results.concat(findOptions(child))
+    }
+  }
+
+  return results
+}
diff --git a/package.json b/package.json
index 344d7fd..1877775 100644
--- a/package.json
+++ b/package.json
@@ -29,6 +29,7 @@
     "mdast-util-phrasing": "^1.0.0",
     "mdast-util-to-string": "^1.0.4",
     "rehype-minify-whitespace": "^2.0.3",
+    "repeat-string": "^1.6.1",
     "trim-trailing-lines": "^1.1.0",
     "unist-util-visit": "^1.1.1",
     "xtend": "^4.0.1"
diff --git a/test/fixtures/button/index.html b/test/fixtures/button/index.html
new file mode 100644
index 0000000..a0ad624
--- /dev/null
+++ b/test/fixtures/button/index.html
@@ -0,0 +1,29 @@
+<!-- Typical button -->
+<p><button onclick="void 0" type=button>Show hint</button></p>
+
+<!-- Button without `type` (actually a submit button) -->
+<p><button onclick="void 0">Fire</button></p>
+
+<!-- Explicit and implicit submit buttons -->
+<form>
+  <button type=submit value=prev>← Back</button>
+  <button value=next>Next →</button>
+</form>
+
+<!-- Buttons in a menu -->
+<menu>
+  <li><button onclick=copy()><img src=copy.svg alt=Copy></button></li>
+  <li><button onclick=cut()><img src=cut.svg alt=Cut></button></li>
+</menu>
+
+<!-- Buttons with more images. -->
+<p>
+  <button name=rgb>
+    <img src=red alt=R><img src=green alt=G><img src=blue alt=B>
+  </button>
+</p>
+<p>
+  <button name=cmyk>
+    <img src=cyan alt=C><img src=magenta alt=M><img src=yellow alt=Y><img src=black alt=K>
+  </button>
+</p>
diff --git a/test/fixtures/button/index.json b/test/fixtures/button/index.json
new file mode 100644
index 0000000..a875830
--- /dev/null
+++ b/test/fixtures/button/index.json
@@ -0,0 +1,3 @@
+{
+  "fragment": true
+}
diff --git a/test/fixtures/button/index.md b/test/fixtures/button/index.md
new file mode 100644
index 0000000..030b294
--- /dev/null
+++ b/test/fixtures/button/index.md
@@ -0,0 +1,19 @@
+<!-- Typical button -->
+
+Show hint
+
+<!-- Button without `type` (actually a submit button) -->
+
+Fire
+
+<!-- Explicit and implicit submit buttons -->
+
+← Back Next →
+
+<!-- Buttons in a menu -->
+
+<!-- Buttons with more images. -->
+
+![R](red)![G](green)![B](blue)
+
+![C](cyan)![M](magenta)![Y](yellow)![K](black)
diff --git a/test/fixtures/datalist-input-option/index.md b/test/fixtures/datalist-input-option/index.md
index 59405bc..92a2c98 100644
--- a/test/fixtures/datalist-input-option/index.md
+++ b/test/fixtures/datalist-input-option/index.md
@@ -1 +1 @@
-Choose a browser from this list:·
+Choose a browser from this list: Chrome
diff --git a/test/fixtures/fieldset/index.html b/test/fixtures/fieldset/index.html
new file mode 100644
index 0000000..6f1e67f
--- /dev/null
+++ b/test/fixtures/fieldset/index.html
@@ -0,0 +1,53 @@
+<fieldset>
+  <legend>Display</legend>
+  <p><label><input type=radio name=c value=0 checked> Black on White</label>
+  <p><label><input type=radio name=c value=1> White on Black</label>
+  <p><label><input type=checkbox name=g> Use grayscale</label>
+  <p><label>Enhance contrast <input type=range name=e list=contrast min=0 max=100 value=0 step=1></label>
+  <datalist id=contrast>
+    <option label=Normal value=0>
+    <option label=Maximum value=100>
+  </datalist>
+</fieldset>
+
+<fieldset>
+  <legend>Destination</legend>
+  <p><label>Airport: <input type=text name=to list=airports></label></p>
+  <p><label>Departure time: <input type=datetime-local name=totime step=3600></label></p>
+</fieldset>
+<datalist id=airports>
+  <option value=ATL label=Atlanta>
+  <option value=MEM label=Memphis>
+  <option value=LHR label="London Heathrow">
+  <option value=LAX label="Los Angeles">
+  <option value=FRA label=Frankfurt>
+</datalist>
+
+<fieldset>
+  <legend>Did the movie pass the Bechdel test?</legend>
+  <p><label><input type=radio name=bechdel value=no-characters> No, there are not even two female characters in the movie. </label>
+  <p><label><input type=radio name=bechdel value=no-names> No, the female characters never talk to each other. </label>
+  <p><label><input type=radio name=bechdel value=no-topic> No, when female characters talk to each other it’s always about a male character. </label>
+  <p><label><input type=radio name=bechdel value=yes required> Yes. </label>
+  <p><label><input type=radio name=bechdel value=unknown> I don’t know. </label>
+</fieldset>
+
+<fieldset>
+  <legend>Mail Account</legend>
+  <p><label>Name: <input name=fullname placeholder="John Ratzenberger"></label></p>
+  <p><label>Address: <input type=email name=address placeholder=john@example.net></label></p>
+  <p><label>Password: <input type=password name=password></label></p>
+  <p><label>Description: <input name=desc placeholder="My Email Account"></label></p>
+</fieldset>
+
+<fieldset name=clubfields disabled>
+  <legend>
+    <label>
+      <input type=checkbox name=club onchange="form.clubfields.disabled = !checked">
+      Use Club Card
+    </label>
+  </legend>
+  <p><label>Name on card: <input name=clubname required></label></p>
+  <p><label>Card number: <input name=clubnum required pattern=[-0-9]+></label></p>
+  <p><label>Expiry date: <input name=clubexp type=month></label></p>
+</fieldset>
diff --git a/test/fixtures/fieldset/index.json b/test/fixtures/fieldset/index.json
new file mode 100644
index 0000000..8925b99
--- /dev/null
+++ b/test/fixtures/fieldset/index.json
@@ -0,0 +1,4 @@
+{
+  "fragment": true,
+  "tree": false
+}
diff --git a/test/fixtures/fieldset/index.md b/test/fixtures/fieldset/index.md
new file mode 100644
index 0000000..56df159
--- /dev/null
+++ b/test/fixtures/fieldset/index.md
@@ -0,0 +1,45 @@
+Display
+
+\[x] Black on White
+
+\[ ] White on Black
+
+\[ ] Use grayscale
+
+Enhance contrast 0
+
+Destination
+
+Airport: Atlanta (ATL)
+
+Departure time:·
+
+Did the movie pass the Bechdel test?
+
+\[ ] No, there are not even two female characters in the movie.
+
+\[ ] No, the female characters never talk to each other.
+
+\[ ] No, when female characters talk to each other it’s always about a male character.
+
+\[ ] Yes.
+
+\[ ] I don’t know.
+
+Mail Account
+
+Name: John Ratzenberger
+
+Address: [john@example.net](mailto:john@example.net)
+
+Password:·
+
+Description: My Email Account
+
+\[ ] Use Club Card
+
+Name on card:·
+
+Card number:·
+
+Expiry date:·
diff --git a/test/fixtures/form/index.html b/test/fixtures/form/index.html
new file mode 100644
index 0000000..6b47a50
--- /dev/null
+++ b/test/fixtures/form/index.html
@@ -0,0 +1,199 @@
+<form>
+  <p><label> <input type=radio name=payment-type value=cc> Credit Card</label></p>
+  <p><label>Name on card: <input name=cc1 autocomplete="section-cc cc-name" placeholder="Y. Name"></label>
+  <p><label>Card number: <input name=cc2 inputmode=numeric autocomplete="section-cc cc-number" placeholder="6331 1019 9999 0016"></label>
+  <p><label>Expiry Date: <input name=cc3 type=month autocomplete="section-cc cc-exp" placeholder=2020-02></label>
+  <p><label>Security Code: <input name=cc4 inputmode=numeric autocomplete="section-cc cc-csc" placeholder=246></label>
+</p>
+
+<form
+  method=post
+  enctype=application/x-www-form-urlencoded
+  action=https://pizza.example.com/order.cgi
+>
+  <p><label>Customer name: <input name=custname required autocomplete="shipping name"></label></p>
+  <p><label>Telephone: <input type=tel name=custtel autocomplete="shipping tel"></label></p>
+  <p><label>Buzzer code: <input name=custbuzz inputmode=numeric></label></p>
+  <p><label>E-mail address: <input type=email name=custemail autocomplete="shipping email"></label></p>
+  <fieldset>
+    <legend> Pizza Size </legend>
+    <p><label> <input type=radio name=size required value=small> Small </label></p>
+    <p><label> <input type=radio name=size required value=medium> Medium </label></p>
+    <p><label> <input type=radio name=size required value=large> Large </label></p>
+  </fieldset>
+  <fieldset>
+    <legend> Pizza Toppings </legend>
+    <p><label> <input type=checkbox name=topping value=bacon> Bacon </label></p>
+    <p><label> <input type=checkbox name=topping value=cheese> Extra Cheese </label></p>
+    <p><label> <input type=checkbox name=topping value=onion> Onion </label></p>
+    <p><label> <input type=checkbox name=topping value=mushroom> Mushroom </label></p>
+  </fieldset>
+  <p><label>Preferred delivery time: <input type=time min=11:00 max=21:00 step=900 name=delivery required></label></p>
+  <p><label>Delivery instructions: <textarea name=comments maxlength=1000></textarea></label></p>
+  <p><button>Submit order</button></p>
+</form>
+
+<form>
+  <input type=url name=location list=urls>
+  <datalist id=urls>
+    <option label="MIME: Format of Internet Message Bodies" value=https://tools.ietf.org/html/rfc2045>
+    <option label=HTML value=https://html.spec.whatwg.org/>
+    <option label=DOM value=https://dom.spec.whatwg.org/>
+    <option label=Fullscreen value=https://fullscreen.spec.whatwg.org/>
+    <option label="Media Session" value=https://mediasession.spec.whatwg.org/>
+    <option label="The Single UNIX Specification, Version 3" value=http://www.unix.org/version3/>
+  </datalist>
+</form>
+
+<form>
+  <input type=range min=-100 max=100 value=0 step=10 name=power list=powers>
+  <datalist id=powers>
+    <option value=0>
+    <option value=-30>
+    <option value=30>
+    <option value=++50>
+  </datalist>
+</form>
+
+<form>
+  <input name=x type=range min=100 max=700 step=9.09090909 value=509.090909>
+</form>
+
+<form>
+  <input type=range name=a list=a-values>
+  <datalist id=a-values>
+    <option value=10 label=Low>
+    <option value=90 label=High>
+  </datalist>
+</form>
+
+<form>
+  <input type=file accept=.doc,.docx,.xml,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document>
+</form>
+
+<form action=process.cgi>
+  <input type=image src=map.png name=where alt="Show location list">
+</form>
+
+<h1>Create new account</h1>
+<form
+  action=/newaccount
+  method=post
+  oninput="up2.setCustomValidity(up2.value != up.value ? 'Passwords do not match.' : '')"
+>
+  <p>
+    <label for=username>E-mail address:</label>
+    <input id=username type=email required name=un>
+  <p>
+    <label for=password1>Password:</label>
+    <input id=password1 type=password required name=up>
+  <p>
+    <label for=password2>Confirm password:</label>
+    <input id=password2 type=password name=up2>
+  <p>
+    <input type=submit value="Create account">
+</form>
+
+
+<form>
+  <label>Homepage: <input name=hp type=url list=hpurls></label>
+  <datalist id=hpurls>
+    <option value=https://www.google.com/ label=Google>
+    <option value=https://www.reddit.com/ label=Reddit>
+  </datalist>
+</form>
+
+<form>
+  <p>
+    <label>Enter a breed: <input name=breed list=breeds></label>
+    <datalist id=breeds>
+      <label>
+        or select one from the list:
+        <select name=breed>
+          <option value> (none selected)
+          <option>Abyssinian
+          <option>Alpaca
+          <!-- ... -->
+        </select>
+      </label>
+    </datalist>
+  </p>
+</form>
+
+<form>
+  <fieldset>
+    <legend>Mail Account</legend>
+    <p><label>Name: <input name=fullname placeholder="John Ratzenberger"></label></p>
+    <p><label>Address: <input type=email name=address placeholder=john@example.net></label></p>
+    <p><label>Password: <input type=password name=password></label></p>
+    <p><label>Description: <input type=text name=desc placeholder="My Email Account"></label></p>
+  </fieldset>
+</form>
+
+<form>
+  <input name=t1 type=tel placeholder="&#x202B; رقم الهاتف 1 &#x202E;">
+  <input name=t2 type=tel placeholder="&#x202B; رقم الهاتف 2 &#x202E;">
+</form>
+
+<form action=courseselector.dll method=get>
+  <p>Which course would you like to watch today?
+  <p>
+    <label>
+      Course:
+      <select name=c>
+        <optgroup label="8.01 Physics I: Classical Mechanics">
+          <option value=8.01.1>Lecture 01: Powers of Ten
+          <option value=8.01.2>Lecture 02: 1D Kinematics
+          <option value=8.01.3>Lecture 03: Vectors
+        <optgroup label="8.02 Electricity and Magnestism">
+          <option value=8.02.1>Lecture 01: What holds our world together?
+          <option value=8.02.2>Lecture 02: Electric Field
+          <option value=8.02.3>Lecture 03: Electric Flux
+        <optgroup label="8.03 Physics III: Vibrations and Waves">
+          <option value=8.03.1>Lecture 01: Periodic Phenomenon
+          <option value=8.03.2>Lecture 02: Beats
+          <option value=8.03.3>Lecture 03: Forced Oscillations with Damping
+      </select>
+    </label>
+  <p>
+    <input type=submit value="▶ Play">
+</form>
+
+<form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber">
+  <input id=a type=number step=any> +
+  <input id=b type=number step=any> =
+  <output id=o for="a b"></output>
+</form>
+
+<form action=addcomment.cgi method=post>
+ <p><label>Comment: <input type=text name=comment dirname=comment.dir required></label></p>
+ <p><button name=mode type=submit value=add>Post Comment</button></p>
+</form>
+
+<form method=get action=/search.cgi>
+ <p><label>Search terms: <input type=search name=q></label></p>
+ <p><input type=submit></p>
+</form>
+
+<form>
+  <input maxlength=256 name=q value autofocus>
+  <input type=submit value=Search>
+</form>
+
+<form>
+  <p><label>Account: <input name=ac autocomplete=off></label></p>
+  <p><label>PIN: <input type=password name=pin autocomplete=off></label></p>
+</form>
+
+<form>
+  <input type=hidden autocomplete=nickname value=TreePlate>
+  <input type=text autocomplete=nickname>
+</form>
+
+<form>
+  <details>
+   <summary><label for=fn>Name & Extension:</label></summary>
+   <p><input type=text id=fn name=fn value="Pillar Magazine.pdf">
+   <p><label><input type=checkbox name=ext checked> Hide extension</label>
+  </details>
+</form>
diff --git a/test/fixtures/form/index.json b/test/fixtures/form/index.json
new file mode 100644
index 0000000..8925b99
--- /dev/null
+++ b/test/fixtures/form/index.json
@@ -0,0 +1,4 @@
+{
+  "fragment": true,
+  "tree": false
+}
diff --git a/test/fixtures/form/index.md b/test/fixtures/form/index.md
new file mode 100644
index 0000000..5bcd010
--- /dev/null
+++ b/test/fixtures/form/index.md
@@ -0,0 +1,103 @@
+\[ ] Credit Card
+
+Name on card: Y. Name
+
+Card number: 6331 1019 9999 0016
+
+Expiry Date: 2020-02
+
+Security Code: 246
+
+Customer name:·
+
+Telephone:·
+
+Buzzer code:·
+
+E-mail address:·
+
+Pizza Size
+
+\[ ] Small
+
+\[ ] Medium
+
+\[ ] Large
+
+Pizza Toppings
+
+\[ ] Bacon
+
+\[ ] Extra Cheese
+
+\[ ] Onion
+
+\[ ] Mushroom
+
+Preferred delivery time:·
+
+Delivery instructions:·
+
+Submit order
+
+[MIME: Format of Internet Message Bodies](https://tools.ietf.org/html/rfc2045)
+
+0
+
+509.090909
+
+Low (10)
+
+![Show location list](map.png)
+
+# Create new account
+
+E-mail address:·
+
+Password:·
+
+Confirm password:·
+
+Create account
+
+Homepage: [Google](https://www.google.com/)
+
+Enter a breed: (none selected)
+
+Mail Account
+
+Name: John Ratzenberger
+
+Address: [john@example.net](mailto:john@example.net)
+
+Password:·
+
+Description: My Email Account
+
+‫ رقم الهاتف 1 ‮ ‫ رقم الهاتف 2 ‮
+
+Which course would you like to watch today?
+
+Course: Lecture 01: Powers of Ten (8.01.1)
+
+▶ Play
+
+ \+  =·
+
+Comment:·
+
+Post Comment
+
+Search terms:·
+
+ Search
+
+Account:·
+
+PIN:·
+
+Name & Extension:
+
+Pillar Magazine.pdf
+
+\[x] Hide extension
diff --git a/test/fixtures/input/index.html b/test/fixtures/input/index.html
new file mode 100644
index 0000000..97e8d80
--- /dev/null
+++ b/test/fixtures/input/index.html
@@ -0,0 +1,181 @@
+<!-- Text -->
+
+<p><label>Alpha: <input></label></p>
+<p><label>Bravo: <input type=text></label></p>
+<p><label>Charlie: <input value=Delta></label></p>
+<p><label>Echo: <input value=Foxtrot disabled></label></p>
+<p><label>Golf: <input list=a></label></p>
+<p><label>Hotel: <input list=a multiple></label></p>
+<p><label>India: <input list=a multiple size=123></label></p>
+<p><label>Juliett: <input maxlength=123></label></p>
+<p><label>Kilo: <input minlength=123></label></p>
+<p><label>Mike: <input name=november></label></p>
+<p><label>Oscar: <input pattern=\d+></label></p>
+<p><label>Papa: <input pattern=\d+ title="One or more digits"></label></p>
+<p><label>Romeo: <input placeholder=Québec></label></p>
+<p><label>Sierra: <input readonly></label></p>
+<p><label>Tango: <input required></label></p>
+<p><label>Uniform: <input size=123></label></p>
+<p><label>Whiskey: <input list=a size=123></label></p>
+<p><label>X-ray: <input title=Yankee></label></p>
+
+<!-- Hidden -->
+
+<p><label>Alpha: <input type=hidden></label></p>
+<p><label>Bravo: <input type=hidden value=Charlie></label></p>
+
+<!-- Search -->
+
+<p><label>Alpha: <input type=search></label></p>
+<p><label>Bravo: <input type=search value=Charlie></label></p>
+
+<!-- Telephone -->
+
+<p><label>Alpha: <input type=tel></label></p>
+<p><label>Bravo: <input type=tel value=Charlie></label></p>
+
+<!-- Password -->
+
+<p><label>Alpha: <input type=password></label></p>
+<p><label>Bravo: <input type=password value=Charlie></label></p>
+<p><label>Delta: <input type=password value=Echo list=a></label></p>
+<p><label>Foxtrot: <input type=password list=a></label></p>
+
+<!-- Date -->
+
+<p><label>Alpha: <input type=date></label></p>
+<p><label>Bravo: <input type=date value=2000-11-22></label></p>
+
+<!-- Month -->
+
+<p><label>Alpha: <input type=month></label></p>
+<p><label>Bravo: <input type=month value=2000-11></label></p>
+
+<!-- Week -->
+
+<p><label>Alpha: <input type=week></label></p>
+<p><label>Bravo: <input type=week value=2000-w1></label></p>
+
+<!-- Time -->
+
+<p><label>Alpha: <input type=time></label></p>
+<p><label>Bravo: <input type=time value=23:59></label></p>
+<p><label>Charlie: <input type=time value=23:59:59></label></p>
+<p><label>Delta: <input type=time value=23:59:59.999></label></p>
+
+<!-- Datetime-local -->
+
+<p><label>Alpha: <input type=datetime-local></label></p>
+<p><label>Bravo: <input type=datetime-local value=2000-11-22T23:59></label></p>
+
+<!-- Number -->
+
+<p><label>Alpha: <input type=number></label></p>
+<p><label>Bravo: <input type=number value=3></label></p>
+
+<!-- Range -->
+
+<p><label>Alpha: <input type=range></label></p>
+<p><label>Bravo: <input type=range value=3></label></p>
+
+<!-- Color -->
+
+<p><label>Alpha: <input type=color></label></p>
+<p><label>Bravo: <input type=color value=#000000></label></p>
+
+<!-- File -->
+
+<p><label>Alpha: <input type=file></label></p>
+<p><label>Bravo: <input type=file value=C:\fakepath\></label></p>
+
+<!-- URL -->
+
+<p><label>Alpha: <input type=url></label></p>
+<p><label>Bravo: <input type=url value=http://charlie.com></label></p>
+<p><label>Delta: <input type=url value=http://echo.com title=Foxtrot></label></p>
+<p><label>Golf: <input type=url list=b></label></p>
+<p><label>Hotel: <input type=url list=b multiple></label></p>
+
+<!-- Email -->
+
+<p><label>Alpha: <input type=email></label></p>
+<p><label>Bravo: <input type=email value=charlie@example.com></label></p>
+<p><label>Delta: <input type=email value=echo@example.com title=Foxtrot></label></p>
+<p><label>Golf: <input type=email list=c></label></p>
+<p><label>Hotel: <input type=email list=c multiple></label></p>
+
+<!-- Checkbox -->
+
+<p><label><input type=checkbox> Alpha</label></p>
+<p><label><input type=checkbox checked> Bravo</label></p>
+<p><label><input type=checkbox checked value=Charlie> Delta</label></p>
+
+<!-- Radio -->
+
+<p><label><input type=radio> Alpha</label></p>
+<p><label><input type=radio checked> Bravo</label></p>
+<p><label><input type=radio checked value=Charlie> Delta</label></p>
+
+<!-- Submit -->
+
+<p><label>Alpha: <input type=submit></label></p>
+<p><label>Bravo: <input type=submit value=Charlie></label></p>
+
+<!-- Reset -->
+
+<p><label>Alpha: <input type=reset></label></p>
+<p><label>Bravo: <input type=reset value=Charlie></label></p>
+
+<!-- Button -->
+
+<p><label>Alpha: <input type=button></label></p>
+<p><label>Bravo: <input type=button value=Charlie></label></p>
+
+<!-- Image -->
+
+<p><label>Alpha: <input type=image></label></p>
+<p><label>Bravo: <input type=image value=Charlie></label></p>
+<p><label>Delta: <input type=image value=Echo src=foxtrot.svg></label></p>
+<p><label>Golf: <input type=image value=Hotel src=india.svg title=Juliett></label></p>
+<p><label>Kilo: <input type=image value=Lima src=mike.svg title=November alt=Oscar></label></p>
+<p><label>Papa: <input type=image value=Québec src=romeo.svg alt=Sierra></label></p>
+<p><label>Tango: <input type=image src=uniform.svg alt=Whiskey></label></p>
+<p><label>X-ray: <input type=image src=yankee.svg></label></p>
+
+<!-- Data lists -->
+
+<datalist id=a>
+  <option value=B>
+  <option value=C label=D>
+  <option value=E label=F>G</option> <!-- Invalid content -->
+  <option label=H>I</option>
+  <option>J</option>
+  <option disabled>K</option>
+  <option selected>L</option>
+  <option selected disabled>M</option>
+  <option selected>N</option> <!-- Also selected -->
+</datalist>
+
+<datalist id=b>
+  <option value=https://a.com>
+  <option value=https://b.com label=D>
+  <option value=https://c.com label=F>G</option> <!-- Invalid content -->
+  <option label=H>https://i.com</option>
+  <option>https://j.com</option>
+  <option disabled>https://k.com</option>
+  <option selected>https://l.com</option>
+  <option selected disabled>https://m.com</option>
+  <option selected>https://n.com</option> <!-- Also selected -->
+</datalist>
+
+<datalist id=c>
+  <option value=a@example.com>
+  <option value=b@example.com label=D>
+  <option value=c@example.com label=F>G</option> <!-- Invalid content -->
+  <option label=H>i@example.com</option>
+  <option>j@example.com</option>
+  <option disabled>k@example.com</option>
+  <option selected>l@example.com</option>
+  <option selected disabled>m@example.com</option>
+  <option selected>n@example.com</option> <!-- Also selected -->
+</datalist>
diff --git a/test/fixtures/input/index.json b/test/fixtures/input/index.json
new file mode 100644
index 0000000..618d361
--- /dev/null
+++ b/test/fixtures/input/index.json
@@ -0,0 +1,5 @@
+{
+  "fragment": true,
+  "#": "Tree is false because of escaping for checkboxes and radios",
+  "tree": false
+}
diff --git a/test/fixtures/input/index.md b/test/fixtures/input/index.md
new file mode 100644
index 0000000..b53cff0
--- /dev/null
+++ b/test/fixtures/input/index.md
@@ -0,0 +1,201 @@
+<!-- Text -->
+
+Alpha:·
+
+Bravo:·
+
+Charlie: Delta
+
+Echo:·
+
+Golf: L
+
+Hotel: L, N
+
+India: L, N
+
+Juliett:·
+
+Kilo:·
+
+Mike:·
+
+Oscar:·
+
+Papa:·
+
+Romeo: Québec
+
+Sierra:·
+
+Tango:·
+
+Uniform:·
+
+Whiskey:·L
+
+X-ray:·
+
+<!-- Hidden -->
+
+Alpha:·
+
+Bravo:·
+
+<!-- Search -->
+
+Alpha:·
+
+Bravo: Charlie
+
+<!-- Telephone -->
+
+Alpha:·
+
+Bravo: Charlie
+
+<!-- Password -->
+
+Alpha:·
+
+Bravo: •••••••
+
+Delta: ••••
+
+Foxtrot:·
+
+<!-- Date -->
+
+Alpha:·
+
+Bravo: 2000-11-22
+
+<!-- Month -->
+
+Alpha:·
+
+Bravo: 2000-11
+
+<!-- Week -->
+
+Alpha:·
+
+Bravo: 2000-w1
+
+<!-- Time -->
+
+Alpha:·
+
+Bravo: 23:59
+
+Charlie: 23:59:59
+
+Delta: 23:59:59.999
+
+<!-- Datetime-local -->
+
+Alpha:·
+
+Bravo: 2000-11-22T23:59
+
+<!-- Number -->
+
+Alpha:·
+
+Bravo: 3
+
+<!-- Range -->
+
+Alpha:·
+
+Bravo: 3
+
+<!-- Color -->
+
+Alpha:·
+
+Bravo: #000000
+
+<!-- File -->
+
+Alpha:·
+
+Bravo:·
+
+<!-- URL -->
+
+Alpha:·
+
+Bravo: <http://charlie.com>
+
+Delta: <http://echo.com>
+
+Golf: <https://l.com>
+
+Hotel: <https://l.com>, <https://n.com>
+
+<!-- Email -->
+
+Alpha:·
+
+Bravo: [charlie@example.com](mailto:charlie@example.com)
+
+Delta: [echo@example.com](mailto:echo@example.com)
+
+Golf: [l@example.com](mailto:l@example.com)
+
+Hotel: [l@example.com](mailto:l@example.com), [n@example.com](mailto:n@example.com)
+
+<!-- Checkbox -->
+
+\[ ] Alpha
+
+\[x] Bravo
+
+\[x] Delta
+
+<!-- Radio -->
+
+\[ ] Alpha
+
+\[x] Bravo
+
+\[x] Delta
+
+<!-- Submit -->
+
+Alpha:·
+
+Bravo: Charlie
+
+<!-- Reset -->
+
+Alpha:·
+
+Bravo: Charlie
+
+<!-- Button -->
+
+Alpha:·
+
+Bravo: Charlie
+
+<!-- Image -->
+
+Alpha:·
+
+Bravo: ![Charlie](<>)
+
+Delta: ![Echo](foxtrot.svg)
+
+Golf: ![Hotel](india.svg "Juliett")
+
+Kilo: ![Oscar](mike.svg "November")
+
+Papa: ![Sierra](romeo.svg)
+
+Tango: ![Whiskey](uniform.svg)
+
+X-ray:·
+
+<!-- Data lists -->
diff --git a/test/fixtures/output/index.html b/test/fixtures/output/index.html
index b5e2b6e..4d4c159 100644
--- a/test/fixtures/output/index.html
+++ b/test/fixtures/output/index.html
@@ -1,4 +1,4 @@
 <p>
-  <input spellcheck="false" autofocus="" value="considerations">
-  Stem: <output>consider</output>
+  Value: <input spellcheck="false" autofocus="" value="considerations">
+  stems to: <output>consider</output>
 </p>
diff --git a/test/fixtures/output/index.md b/test/fixtures/output/index.md
index ad0319e..70ebcc2 100644
--- a/test/fixtures/output/index.md
+++ b/test/fixtures/output/index.md
@@ -1 +1 @@
-·Stem: consider
+Value: considerations stems to: consider
diff --git a/test/fixtures/select-optgroup-option/index.html b/test/fixtures/select-optgroup-option/index.html
index e2911cb..27a1096 100644
--- a/test/fixtures/select-optgroup-option/index.html
+++ b/test/fixtures/select-optgroup-option/index.html
@@ -17,10 +17,45 @@
 </p>
 
 <p>
-  And these:
+  This one:
+  <select multiple size="2">
+    <option>Value 1</option>
+    <option selected>Value 2</option>
+    <option>Value 3</option>
+  </select>
+</p>
+
+<p>
+  Or this:
+  <select size="2">
+    <option>Value 1</option>
+    <option selected>Value 2</option>
+    <option>Value 3</option>
+  </select>
+</p>
+
+<p>
+  Or this:
+  <select size="2">
+    <option>Value 1</option>
+    <option>Value 2</option>
+    <option>Value 3</option>
+  </select>
+</p>
+
+<p>
+  Or this:
+  <select multiple>
+    <option>Value 1</option>
+    <option selected>Value 2</option>
+    <option selected>Value 3</option>
+  </select>
+</p>
+
+<p>
+  Or this:
   <select>
-    <option value="value1">Value 1</option>
-    <option value="value2" selected>Value 2</option>
-    <option value="value3">Value 3</option>
+    <option disabled>Value 1</option>
+    <option disabled selected>Value 2</option>
   </select>
 </p>
diff --git a/test/fixtures/select-optgroup-option/index.md b/test/fixtures/select-optgroup-option/index.md
index b656cbb..9124d7f 100644
--- a/test/fixtures/select-optgroup-option/index.md
+++ b/test/fixtures/select-optgroup-option/index.md
@@ -1,3 +1,11 @@
-Check out these options:·
+Check out these options: Option 1.1
 
-And these:·
+This one: Value 2
+
+Or this: Value 2
+
+Or this: Value 1
+
+Or this: Value 2, Value 3
+
+Or this:·
diff --git a/test/fixtures/textarea/index.html b/test/fixtures/textarea/index.html
new file mode 100644
index 0000000..78ec9f5
--- /dev/null
+++ b/test/fixtures/textarea/index.html
@@ -0,0 +1,20 @@
+<p>
+  If you have any short comments, please let us know:
+  <textarea cols=80></textarea>
+</p>
+
+<p>
+  If you have any comments, please let us know:
+  <textarea cols=80>You rock!</textarea>
+</p>
+
+<p>
+  If you have any comments, please let us know:
+  <textarea cols=80>Dear Francine,
+
+They closed the parks this week, so we won’t be able to
+meet your there. Should we just have dinner?
+
+Love,
+Daddy</textarea>
+</p>
diff --git a/test/fixtures/textarea/index.json b/test/fixtures/textarea/index.json
new file mode 100644
index 0000000..cdb2b19
--- /dev/null
+++ b/test/fixtures/textarea/index.json
@@ -0,0 +1,5 @@
+{
+  "fragment": true,
+  "#": "TODO: `tree` is false because remark-stringify should escape blank lines in text so as not to generate separate paragraphs",
+  "tree": false
+}
diff --git a/test/fixtures/textarea/index.md b/test/fixtures/textarea/index.md
new file mode 100644
index 0000000..d580e26
--- /dev/null
+++ b/test/fixtures/textarea/index.md
@@ -0,0 +1,11 @@
+If you have any short comments, please let us know:·
+
+If you have any comments, please let us know: You rock!
+
+If you have any comments, please let us know: Dear Francine,
+
+They closed the parks this week, so we won’t be able to
+meet your there. Should we just have dinner?
+
+Love,
+Daddy