document-util to use JSON attribute instead of multiple data-* attributes (#492)

* data-* to json

* update tests

* fix tests

* fix tests

* test fixes

* fix types

* fix types

1 files changed, 244 insertions, 202 deletions

diff --git a/test/data/html/document-util.html b/test/data/html/document-util.html
index d8ac012e..8e007392 100644
--- a/test/data/html/document-util.html
+++ b/test/data/html/document-util.html
@@ -15,183 +15,207 @@
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span"
-        data-caret-range-from-point-selector="span"
-        data-start-node-selector="span"
-        data-start-offset="0"
-        data-end-node-selector="span"
-        data-end-offset="0"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="真白「心配してくださって、ありがとございます」"
+        data-test-data='{
+            "elementFromPointSelector": "span",
+            "caretRangeFromPointSelector": "span",
+            "startNodeSelector": "span",
+            "startOffset": 0,
+            "endNodeSelector": "span",
+            "endOffset": 0,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "真白「心配してくださって、ありがとございます」"
+        }'
     >
         <span>真白「心配してくださって、ありがとございます」</span>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span"
-        data-caret-range-from-point-selector="span"
-        data-start-node-selector="span"
-        data-start-offset="5"
-        data-end-node-selector="span"
-        data-end-offset="5"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="心配してくださって、ありがとございます"
+        data-test-data='{
+            "elementFromPointSelector": "span",
+            "caretRangeFromPointSelector": "span",
+            "startNodeSelector": "span",
+            "startOffset": 5,
+            "endNodeSelector": "span",
+            "endOffset": 5,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "心配してくださって、ありがとございます"
+        }'
     >
         <span>真白「心配してくださって、ありがとございます」</span>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span"
-        data-caret-range-from-point-selector="span"
-        data-start-node-selector="span"
-        data-start-offset="16"
-        data-end-node-selector="span"
-        data-end-offset="16"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="心配して「くださって」、ありがと「ございます」"
+        data-test-data='{
+            "elementFromPointSelector": "span",
+            "caretRangeFromPointSelector": "span",
+            "startNodeSelector": "span",
+            "startOffset": 16,
+            "endNodeSelector": "span",
+            "endOffset": 16,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "心配して「くださって」、ありがと「ございます」"
+        }'
     >
         <span>真白「心配して「くださって」、ありがと「ございます」」</span>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span"
-        data-caret-range-from-point-selector="span"
-        data-start-node-selector="span"
-        data-start-offset="4"
-        data-end-node-selector="span"
-        data-end-offset="4"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="ありがとございます。"
+        data-test-data='{
+            "elementFromPointSelector": "span",
+            "caretRangeFromPointSelector": "span",
+            "startNodeSelector": "span",
+            "startOffset": 4,
+            "endNodeSelector": "span",
+            "endOffset": 4,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "ありがとございます。"
+        }'
     >
         <span>ありがとございます。ありがとございます。</span>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span"
-        data-caret-range-from-point-selector="span"
-        data-start-node-selector="span"
-        data-start-offset="14"
-        data-end-node-selector="span"
-        data-end-offset="14"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="ありがとございます。"
+        data-test-data='{
+            "elementFromPointSelector": "span",
+            "caretRangeFromPointSelector": "span",
+            "startNodeSelector": "span",
+            "startOffset": 14,
+            "endNodeSelector": "span",
+            "endOffset": 14,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "ありがとございます。"
+        }'
     >
         <span>ありがとございます。ありがとございます。</span>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span"
-        data-caret-range-from-point-selector="span"
-        data-start-node-selector="span"
-        data-start-offset="4"
-        data-end-node-selector="span"
-        data-end-offset="4"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="ありがとございます。！？"
+        data-test-data='{
+            "elementFromPointSelector": "span",
+            "caretRangeFromPointSelector": "span",
+            "startNodeSelector": "span",
+            "startOffset": 4,
+            "endNodeSelector": "span",
+            "endOffset": 4,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "ありがとございます。！？"
+        }'
     >
         <span>ありがとございます。！？ありがとございます。！？</span>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span"
-        data-caret-range-from-point-selector="span"
-        data-start-node-selector="span"
-        data-start-offset="4"
-        data-end-node-selector="span"
-        data-end-offset="4"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="ありがとございます！！！"
+        data-test-data='{
+            "elementFromPointSelector": "span",
+            "caretRangeFromPointSelector": "span",
+            "startNodeSelector": "span",
+            "startOffset": 4,
+            "endNodeSelector": "span",
+            "endOffset": 4,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "ありがとございます！！！"
+        }'
     >
         <span>ありがとございます！！！ありがとございます！！！</span>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="input"
-        data-caret-range-from-point-selector="input"
-        data-start-node-selector="input"
-        data-start-offset="0"
-        data-end-node-selector="input"
-        data-end-offset="0"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="真白「心配してくださって、ありがとございます」"
-        data-has-imposter="true"
+        data-test-data='{
+            "elementFromPointSelector": "input",
+            "caretRangeFromPointSelector": "input",
+            "startNodeSelector": "input",
+            "startOffset": 0,
+            "endNodeSelector": "input",
+            "endOffset": 0,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "真白「心配してくださって、ありがとございます」",
+            "hasImposter": true
+        }'
     >
         <input type="text" value="真白「心配してくださって、ありがとございます」" style="width: 100%; box-sizing: border-box; font-family: inherit; font-size: inherit; border: 1px solid #d8d8d8; padding: 0.2em;">
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="textarea"
-        data-caret-range-from-point-selector="textarea"
-        data-start-node-selector="textarea"
-        data-start-offset="0"
-        data-end-node-selector="textarea"
-        data-end-offset="0"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="100"
-        data-sentence="真白「心配してくださって、ありがとございます」"
-        data-has-imposter="true"
+        data-test-data='{
+            "elementFromPointSelector": "textarea",
+            "caretRangeFromPointSelector": "textarea",
+            "startNodeSelector": "textarea",
+            "startOffset": 0,
+            "endNodeSelector": "textarea",
+            "endOffset": 0,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 100,
+            "sentence": "真白「心配してくださって、ありがとございます」",
+            "hasImposter": true
+        }'
     >
         <textarea style="width: 100%; height: 3em; box-sizing: border-box; font-family: inherit; font-size: inherit; border: 1px solid #d8d8d8; padding: 0.2em;">真白「心配してくださって、ありがとございます」</textarea>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="button"
-        data-caret-range-from-point-selector="button"
-        data-start-node-selector="button"
-        data-start-offset="0"
-        data-end-node-selector="button"
-        data-end-offset="0"
-        data-result-type="TextSourceElement"
-        data-sentence-scan-extent="100"
-        data-sentence="よみたん"
+        data-test-data='{
+            "elementFromPointSelector": "button",
+            "caretRangeFromPointSelector": "button",
+            "startNodeSelector": "button",
+            "startOffset": 0,
+            "endNodeSelector": "button",
+            "endOffset": 0,
+            "resultType": "TextSourceElement",
+            "sentenceScanExtent": 100,
+            "sentence": "よみたん"
+        }'
     >
         <button type="button" style="width: 100%; box-sizing: border-box; font-family: inherit; font-size: inherit; border: 1px solid #d8d8d8; background-color: #f0f0f0; padding: 0.2em;">よみたん</button>
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="img"
-        data-caret-range-from-point-selector="img"
-        data-start-node-selector="img"
-        data-start-offset="0"
-        data-end-node-selector="img"
-        data-end-offset="0"
-        data-result-type="TextSourceElement"
-        data-sentence-scan-extent="100"
-        data-sentence="よみたん"
+        data-test-data='{
+            "elementFromPointSelector": "img",
+            "caretRangeFromPointSelector": "img",
+            "startNodeSelector": "img",
+            "startOffset": 0,
+            "endNodeSelector": "img",
+            "endOffset": 0,
+            "resultType": "TextSourceElement",
+            "sentenceScanExtent": 100,
+            "sentence": "よみたん"
+        }'
     >
         <img src="data:image/gif;base64,R0lGODdhAQABAIABAAAAAP///ywAAAAAAQABAAACAkQBADs=" alt="よみたん" title="よみたん" style="width: 70px; height: 70px; image-rendering: crisp-edges; image-rendering: pixelated; display: block;">
     </test-case>
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span:nth-of-type(3)"
-        data-caret-range-from-point-selector="span:nth-of-type(3)"
-        data-start-node-selector="span:nth-of-type(3)"
-        data-start-offset="0"
-        data-end-node-selector="span:nth-of-type(3)"
-        data-end-offset="0"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="22"
-        data-sentence="ありがとございます3"
-        data-terminate-at-newlines="true"
+        data-test-data='{
+            "elementFromPointSelector": "span:nth-of-type(3)",
+            "caretRangeFromPointSelector": "span:nth-of-type(3)",
+            "startNodeSelector": "span:nth-of-type(3)",
+            "startOffset": 0,
+            "endNodeSelector": "span:nth-of-type(3)",
+            "endOffset": 0,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 22,
+            "sentence": "ありがとございます3",
+            "terminateAtNewlines": true
+        }'
     >
 <span>ありがとございます1</span>
 <span>ありがとございます2</span>
@@ -202,16 +226,18 @@
 
     <test-case
         data-test-type="scan"
-        data-element-from-point-selector="span:nth-of-type(3)"
-        data-caret-range-from-point-selector="span:nth-of-type(3)"
-        data-start-node-selector="span:nth-of-type(3)"
-        data-start-offset="0"
-        data-end-node-selector="span:nth-of-type(3)"
-        data-end-offset="0"
-        data-result-type="TextSourceRange"
-        data-sentence-scan-extent="22"
-        data-sentence="ありがとございます1&#10;ありがとございます2&#10;ありがとございます3&#10;ありがとございます4"
-        data-terminate-at-newlines="false"
+        data-test-data='{
+            "elementFromPointSelector": "span:nth-of-type(3)",
+            "caretRangeFromPointSelector": "span:nth-of-type(3)",
+            "startNodeSelector": "span:nth-of-type(3)",
+            "startOffset": 0,
+            "endNodeSelector": "span:nth-of-type(3)",
+            "endOffset": 0,
+            "resultType": "TextSourceRange",
+            "sentenceScanExtent": 22,
+            "sentence": "ありがとございます1\nありがとございます2\nありがとございます3\nありがとございます4",
+            "terminateAtNewlines": false
+        }'
     >
 <span>ありがとございます1</span>
 <span>ありがとございます2</span>
@@ -221,27 +247,31 @@
     </test-case>
 
     <test-case
-        data-test-type="text-source-range-seek"
-        data-seek-node-selector="span:nth-of-type(1)"
-        data-seek-node-is-text="true"
-        data-seek-offset="0"
-        data-seek-length="149"
-        data-seek-direction="forward"
-        data-expected-result-node-selector="span:nth-of-type(1)"
-        data-expected-result-node-is-text="true"
-        data-expected-result-offset="149"
-        data-expected-result-content="
-        あいうえお
-        かきくけこ
-        さしすせそ
-        たちつてと
-        なにぬねの
-        はひふへほ
-        まみむめも
-        や&#x3000;ゆ&#x3000;よ
-        らりるれろ
-        わゐ&#x3000;ゑを
-        "
+    data-test-type="text-source-range-seek"
+        data-test-data='{
+            "seekNodeSelector": "span:nth-of-type(1)",
+            "seekNodeIsText": true,
+            "seekOffset": 0,
+            "seekLength": 149,
+            "seekDirection": "forward",
+            "expectedResultNodeSelector": "span:nth-of-type(1)",
+            "expectedResultNodeIsText": true,
+            "expectedResultOffset": 149,
+            "expectedResultContent": [
+                "",
+                "        あいうえお",
+                "        かきくけこ",
+                "        さしすせそ",
+                "        たちつてと",
+                "        なにぬねの",
+                "        はひふへほ",
+                "        まみむめも",
+                "        や　ゆ　よ",
+                "        らりるれろ",
+                "        わゐ　ゑを",
+                "        "
+            ]
+        }'  
     >
         <span>
         あいうえお
@@ -259,26 +289,30 @@
 
     <test-case
         data-test-type="text-source-range-seek"
-        data-seek-node-selector="span:nth-of-type(1)"
-        data-seek-node-is-text="true"
-        data-seek-offset="149"
-        data-seek-length="149"
-        data-seek-direction="backward"
-        data-expected-result-node-selector="span:nth-of-type(1)"
-        data-expected-result-node-is-text="true"
-        data-expected-result-offset="0"
-        data-expected-result-content="
-        あいうえお
-        かきくけこ
-        さしすせそ
-        たちつてと
-        なにぬねの
-        はひふへほ
-        まみむめも
-        や&#x3000;ゆ&#x3000;よ
-        らりるれろ
-        わゐ&#x3000;ゑを
-        "
+        data-test-data='{
+            "seekNodeSelector": "span:nth-of-type(1)",
+            "seekNodeIsText": true,
+            "seekOffset": 149,
+            "seekLength": 149,
+            "seekDirection": "backward",
+            "expectedResultNodeSelector": "span:nth-of-type(1)",
+            "expectedResultNodeIsText": true,
+            "expectedResultOffset": 0,
+            "expectedResultContent": [
+                "",
+                "        あいうえお",
+                "        かきくけこ",
+                "        さしすせそ",
+                "        たちつてと",
+                "        なにぬねの",
+                "        はひふへほ",
+                "        まみむめも",
+                "        や　ゆ　よ",
+                "        らりるれろ",
+                "        わゐ　ゑを",
+                "        "
+            ]
+        }'
     >
         <span>
         あいうえお
@@ -296,26 +330,30 @@
 
     <test-case
         data-test-type="text-source-range-seek"
-        data-seek-node-selector="span:nth-of-type(1)"
-        data-seek-node-is-text="true"
-        data-seek-offset="0"
-        data-seek-length="150"
-        data-seek-direction="forward"
-        data-expected-result-node-selector="span:nth-of-type(2)"
-        data-expected-result-node-is-text="true"
-        data-expected-result-offset="1"
-        data-expected-result-content="
-        あいうえお
-        かきくけこ
-        さしすせそ
-        たちつてと
-        なにぬねの
-        はひふへほ
-        まみむめも
-        や&#x3000;ゆ&#x3000;よ
-        らりるれろ
-        わゐ&#x3000;ゑを
-        t"
+        data-test-data='{
+            "seekNodeSelector": "span:nth-of-type(1)",
+            "seekNodeIsText": true,
+            "seekOffset": 0,
+            "seekLength": 150,
+            "seekDirection": "forward",
+            "expectedResultNodeSelector": "span:nth-of-type(2)",
+            "expectedResultNodeIsText": true,
+            "expectedResultOffset": 1,
+            "expectedResultContent": [
+                "",
+                "        あいうえお",
+                "        かきくけこ",
+                "        さしすせそ",
+                "        たちつてと",
+                "        なにぬねの",
+                "        はひふへほ",
+                "        まみむめも",
+                "        や　ゆ　よ",
+                "        らりるれろ",
+                "        わゐ　ゑを",
+                "        t"
+            ]
+        }'  
     >
         <span>
         あいうえお
@@ -333,26 +371,30 @@
 
     <test-case
         data-test-type="text-source-range-seek"
-        data-seek-node-selector="span:nth-of-type(2)"
-        data-seek-node-is-text="true"
-        data-seek-offset="1"
-        data-seek-length="150"
-        data-seek-direction="backward"
-        data-expected-result-node-selector="span:nth-of-type(1)"
-        data-expected-result-node-is-text="true"
-        data-expected-result-offset="0"
-        data-expected-result-content="
-        あいうえお
-        かきくけこ
-        さしすせそ
-        たちつてと
-        なにぬねの
-        はひふへほ
-        まみむめも
-        や&#x3000;ゆ&#x3000;よ
-        らりるれろ
-        わゐ&#x3000;ゑを
-        t"
+        data-test-data='{
+            "seekNodeSelector": "span:nth-of-type(2)",
+            "seekNodeIsText": true,
+            "seekOffset": 1,
+            "seekLength": 150,
+            "seekDirection": "bacward",
+            "expectedResultNodeSelector": "span:nth-of-type(1)",
+            "expectedResultNodeIsText": true,
+            "expectedResultOffset": 0,
+            "expectedResultContent": [
+                "",
+                "        あいうえお",
+                "        かきくけこ",
+                "        さしすせそ",
+                "        たちつてと",
+                "        なにぬねの",
+                "        はひふへほ",
+                "        まみむめも",
+                "        や　ゆ　よ",
+                "        らりるれろ",
+                "        わゐ　ゑを",
+                "        t"
+            ]
+        }'  
     >
         <span>
         あいうえお