Add tests for HTMLAreaElement coords/shape and processing model

This makes local copies of:

 html/semantics/embedded-content/the-area-element/area-coords.html
 html/semantics/embedded-content/the-area-element/area-processing.html
 html/semantics/embedded-content/the-area-element/area-shape.html
 html/semantics/embedded-content/the-area-element/support/hit-test.js

in fast/html/ and adjust them so that they can run correctly in the
test runner. The adjustment amounts to referencing a different image
than the original, and doing so using a relative path, and putting
hit-test.js in the local resources/ directory in fast/html.

BUG=578125,578114,498120

Review URL: https://codereview.chromium.org/1618373002

Cr-Commit-Position: refs/heads/master@{#371246}

third_party/WebKit/LayoutTests/W3CImportExpectations

@@ -300,7 +300,8 @@ imported/web-platform-tests/html/semantics/embedded-content/media-elements/seeki
 imported/web-platform-tests/html/semantics/embedded-content/media-elements/track/track-element/track-api-texttracks.html [ Skip ]
 imported/web-platform-tests/html/semantics/embedded-content/media-elements/user-interface/muted.html [ Skip ]
 imported/web-platform-tests/html/semantics/embedded-content/media-elements/video_loop_base.html [ Skip ]
-imported/web-platform-tests/html/semantics/embedded-content/the-area-element/area-stringifier.html [ Skip ]
+// There are local copies in fast/html of area-{coords,shape,processing}.html from the following directory.
+imported/web-platform-tests/html/semantics/embedded-content/the-area-element [ Skip ]
 imported/web-platform-tests/html/semantics/embedded-content/the-canvas-element [ Skip ]
 imported/web-platform-tests/html/semantics/embedded-content/the-embed-element/embed-dimension.html [ Skip ]
 imported/web-platform-tests/html/semantics/embedded-content/the-embed-element/embed-represent-nothing-02.html [ Skip ]

third_party/WebKit/LayoutTests/fast/html/area-coords-expected.txt

+
+This is a testharness.js-based test.
+PASS COMMA: "2,2,10,10" (rect) 
+PASS SEMICOLON: "2;2;10;10" (rect) 
+PASS SPACE: "2 2 10 10" (rect) 
+PASS TAB: "2\t2\t10\t10" (rect) 
+PASS FORM FEED: "2\f2\f10\f10" (rect) 
+PASS LINE FEED: "2\n2\n10\n10" (rect) 
+PASS CARRIGAGE RETURN: "2\r2\r10\r10" (rect) 
+FAIL LINE TABULATION: "2\v2\v10\v10" (rect) assert_equals: elementFromPoint(3, 3) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="221010"></area>
+FAIL LINE NEXT: "2…2…10…10" (rect) assert_equals: elementFromPoint(3, 3) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="2…2…10…10"></area>
+FAIL EN QUAD: "2 2 10 10" (rect) assert_equals: elementFromPoint(3, 3) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="2 2 10 10"></area>
+FAIL abc between numbers: "2a2b20c20,2,10,10" (rect) assert_equals: elementFromPoint(11, 9) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="2a2b20c20,2,10,10"><...
+FAIL COLON between numbers: "2:2:20:20,2,10,10" (rect) assert_equals: elementFromPoint(11, 9) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="2:2:20:20,2,10,10"><...
+FAIL U+0000 between numbers: "2\02\020\020,2,10,10" (rect) assert_equals: elementFromPoint(11, 9) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="2\02\020\020,2,10,10"><...
+PASS leading COMMA: ",2,2,10,10" (rect) 
+PASS leading SPACE: " 2,2,10,10" (rect) 
+PASS leading SEMICOLON: ";2,2,10,10" (rect) 
+PASS trailing COMMA: "2,2,10," (rect) 
+PASS trailing SPACE: "2,2,10 " (rect) 
+PASS trailing SEMICOLON: "2,2,10;" (rect) 
+PASS PERCENT: "2%,2%,10%,10%" (rect) 
+PASS CSS units: "2in,2in,10cm,10cm" (rect) 
+FAIL float: "1.4,1.4,10,10" (rect) assert_equals: elementFromPoint(1, 3) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="1.4,1.4,10,10"></area>
+FAIL number starting with PERIOD: ".4,.4,10,10" (rect) assert_equals: elementFromPoint(0, 0) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords=".4,.4,10,10"></area>
+FAIL sci-not: "2,2,1e1,1e1" (rect) assert_equals: elementFromPoint(3, 3) expected Element node <area id="area" shape="rect" coords="2,2,1e1,1e1"></area> but got Element node <img src="resources/images/blue-border.png" usemap="#x" i...
+PASS leading/trailing garbage: "='2,2,10,10' " (rect) 
+PASS non-ascii garbage: "“2,2,10,10\"" (rect) 
+FAIL URL garbage with number: "2,2,10ls/spain/holidays/regions/10/Canary+Islands/Canary+Islands.html" (rect) assert_equals: elementFromPoint(3, 3) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="rect" coords="2,2,10ls/spain/holid...
+PASS consecutive COMMAs: "2,,10,10" (rect) 
+PASS consecutive SPACEs: "2  10,10" (rect) 
+PASS consecutive SEMICOLONs: "2;;10,10" (rect) 
+PASS several consecutive separators: ",,2;,;2,;,10 \t\r\n10;;" (rect) 
+PASS one too many numbers, trailing COMMA: "100,100,120,100,100,120,300," (poly) 
+Harness: the test ran to completion.
+

third_party/WebKit/LayoutTests/fast/html/area-coords.html

+<!doctype html>
+<meta charset=utf-8>
+<title>HTMLAreaElement coords parsing</title>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<style>
+ body { margin: 0 }
+</style>
+<img src=resources/images/blue-border.png usemap=#x id=img width=300 height=300>
+<map name=x><area id=area></map>
+<script src=resources/hit-test.js></script>
+<script>
+tests = [
+  {desc: 'COMMA', shape: 'rect', coords: "2,2,10,10", hit: hitRect},
+  {desc: 'SEMICOLON', shape: 'rect', coords: "2;2;10;10", hit: hitRect},
+  {desc: 'SPACE', shape: 'rect', coords: "2 2 10 10", hit: hitRect},
+  {desc: 'TAB', shape: 'rect', coords: "2\t2\t10\t10", hit: hitRect},
+  {desc: 'FORM FEED', shape: 'rect', coords: "2\f2\f10\f10", hit: hitRect},
+  {desc: 'LINE FEED', shape: 'rect', coords: "2\n2\n10\n10", hit: hitRect},
+  {desc: 'CARRIGAGE RETURN', shape: 'rect', coords: "2\r2\r10\r10", hit: hitRect},
+  {desc: 'LINE TABULATION', shape: 'rect', coords: "2\u000b2\u000b10\u000b10", hit: hitNone},
+  {desc: 'LINE NEXT', shape: 'rect', coords: "2\u00852\u008510\u008510", hit: hitNone},
+  {desc: 'EN QUAD', shape: 'rect', coords: "2\u20002\u200010\u200010", hit: hitNone},
+  {desc: 'abc between numbers', shape: 'rect', coords: "2a2b20c20,2,10,10", hit: hitRect},
+  {desc: 'COLON between numbers', shape: 'rect', coords: "2:2:20:20,2,10,10", hit: hitRect},
+  {desc: 'U+0000 between numbers', shape: 'rect', coords: "2\u00002\u000020\u000020,2,10,10", hit: hitRect},
+  {desc: 'leading COMMA', shape: 'rect', coords: ",2,2,10,10", hit: hitRect},
+  {desc: 'leading SPACE', shape: 'rect', coords: " 2,2,10,10", hit: hitRect},
+  {desc: 'leading SEMICOLON', shape: 'rect', coords: ";2,2,10,10", hit: hitRect},
+  {desc: 'trailing COMMA', shape: 'rect', coords: "2,2,10,", hit: hitNone},
+  {desc: 'trailing SPACE', shape: 'rect', coords: "2,2,10 ", hit: hitNone},
+  {desc: 'trailing SEMICOLON', shape: 'rect', coords: "2,2,10;", hit: hitNone},
+  {desc: 'PERCENT', shape: 'rect', coords: "2%,2%,10%,10%", hit: hitRect},
+  {desc: 'CSS units', shape: 'rect', coords: "2in,2in,10cm,10cm", hit: hitRect},
+  {desc: 'float', shape: 'rect', coords: "1.4,1.4,10,10", hit: hitRect},
+  {desc: 'number starting with PERIOD', shape: 'rect', coords: ".4,.4,10,10", hit: [[area, 1, 1], [img, 0, 0]]},
+  {desc: 'sci-not', shape: 'rect', coords: "2,2,1e1,1e1", hit: hitRect},
+  {desc: 'leading/trailing garbage', shape: 'rect', coords: "='2,2,10,10' ", hit: hitRect},
+  {desc: 'non-ascii garbage', shape: 'rect', coords: "“2,2,10,10\"", hit: hitRect},
+  {desc: 'URL garbage with number', shape: 'rect', coords: "2,2,10ls/spain/holidays/regions/10/Canary+Islands/Canary+Islands.html", hit: hitNone},
+  {desc: 'consecutive COMMAs', shape: 'rect', coords: "2,,10,10", hit: hitNone},
+  {desc: 'consecutive SPACEs', shape: 'rect', coords: "2  10,10", hit: hitNone},
+  {desc: 'consecutive SEMICOLONs', shape: 'rect', coords: "2;;10,10", hit: hitNone},
+  {desc: 'several consecutive separators', shape: 'rect', coords: ",,2;,;2,;,10 \t\r\n10;;", hit: hitRect},
+  {desc: 'one too many numbers, trailing COMMA', shape: 'poly', coords: "100,100,120,100,100,120,300,", hit: hitPoly},
+];
+</script>

third_party/WebKit/LayoutTests/fast/html/area-processing-expected.txt

+
+This is a testharness.js-based test.
+PASS too few numbers: "2,2,10" (rect) 
+PASS negative: "-10,-10,10,10" (rect) 
+PASS empty string: "" (rect) 
+PASS omitted coords: null (rect) 
+PASS first > third: "10,2,2,10" (rect) 
+PASS second > fourth: "2,10,10,2" (rect) 
+PASS first > third, second > fourth: "10,10,2,2" (rect) 
+PASS negative: "-10,-10,-10,-10" (default) 
+PASS too few numbers: "20,40" (circle) 
+FAIL negative radius: "20,40,-10" (circle) assert_equals: elementFromPoint(21, 41) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="circle" coords="20,40,-10"></area>
+PASS zero radius: "20,40,0" (circle) 
+PASS too few numbers: "100,100,120,100,100" (poly) 
+PASS one too many numbers: "100,100,120,100,100,120,300" (poly) 
+FAIL even-odd rule: "100,100,200,100,100,200,150,50,200,200" (poly) assert_equals: elementFromPoint(150, 125) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="poly" coords="100,100,200,100,100,...
+Harness: the test ran to completion.
+

third_party/WebKit/LayoutTests/fast/html/area-processing.html

+<!doctype html>
+<meta charset=utf-8>
+<title>HTMLAreaElement processing</title>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<style>
+ body { margin: 0 }
+</style>
+<img src=resources/images/blue-border.png usemap=#x id=img width=300 height=300>
+<map name=x><area id=area></map>
+<script src=resources/hit-test.js></script>
+<script>
+var tests = [
+  {desc: 'too few numbers', shape: 'rect', coords: "2,2,10", hit: hitNone},
+  {desc: 'negative', shape: 'rect', coords: "-10,-10,10,10", hit: [[area, 1, 1], [img, 299, 299]]},
+  {desc: 'empty string', shape: 'rect', coords: "", hit: hitNone},
+  {desc: 'omitted coords', shape: 'rect', coords: null, hit: hitNone},
+  {desc: 'first > third', shape: 'rect', coords: "10,2,2,10", hit: hitRect},
+  {desc: 'second > fourth', shape: 'rect', coords: "2,10,10,2", hit: hitRect},
+  {desc: 'first > third, second > fourth', shape: 'rect', coords: "10,10,2,2", hit: hitRect},
+
+  {desc: 'negative', shape: 'default', coords: "-10,-10,-10,-10", hit: hitAll},
+
+  {desc: 'too few numbers', shape: 'circle', coords: "20,40", hit: hitNone},
+  {desc: 'negative radius', shape: 'circle', coords: "20,40,-10", hit: hitNone},
+  {desc: 'zero radius', shape: 'circle', coords: "20,40,0", hit: hitNone},
+
+  {desc: 'too few numbers', shape: 'poly', coords: "100,100,120,100,100", hit: hitNone},
+  {desc: 'one too many numbers', shape: 'poly', coords: "100,100,120,100,100,120,300", hit: hitPoly},
+  {desc: 'even-odd rule', shape: 'poly', coords: "100,100,200,100,100,200,150,50,200,200", hit: hitStar},
+];
+</script>

third_party/WebKit/LayoutTests/fast/html/area-shape-expected.txt

+
+This is a testharness.js-based test.
+PASS missing value default: "2,2,10,10" (null) 
+FAIL missing value default: "20,40,10" (null) assert_equals: elementFromPoint(21, 41) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="null" coords="20,40,10"></area>
+PASS missing value default: null (null) 
+PASS invalid value default: "2,2,10,10" (foobar invalid) 
+PASS invalid value default: "2,2,10,10" () 
+PASS empty string: "" (default) 
+PASS omitted coords: null (DEFAULT) 
+PASS simple: "20,40,10" (circle) 
+PASS simple: "20,40,10" (circ) 
+PASS simple: "20,40,10" (CIRCLE) 
+PASS simple: "20,40,10" (CIRC) 
+FAIL LATIN CAPITAL LETTER I WITH DOT ABOVE: "20,40,10" (CİRCLE) assert_equals: elementFromPoint(21, 41) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="CİRCLE" coords="20,40,10"></area>
+FAIL LATIN SMALL LETTER DOTLESS I: "20,40,10" (cırcle) assert_equals: elementFromPoint(21, 41) expected Element node <img src="resources/images/blue-border.png" usemap="#x" i... but got Element node <area id="area" shape="cırcle" coords="20,40,10"></area>
+PASS simple: "100,100,120,100,100,120" (poly) 
+PASS simple: "100,100,120,100,100,120" (polygon) 
+Harness: the test ran to completion.
+

third_party/WebKit/LayoutTests/fast/html/area-shape.html

+<!doctype html>
+<meta charset=utf-8>
+<title>HTMLAreaElement shape</title>
+<script src=../../resources/testharness.js></script>
+<script src=../../resources/testharnessreport.js></script>
+<style>
+ body { margin: 0 }
+</style>
+<img src=resources/images/blue-border.png usemap=#x id=img width=300 height=300>
+<map name=x><area id=area></map>
+<script src=resources/hit-test.js></script>
+<script>
+var tests = [
+  {desc: 'missing value default', shape: null, coords: "2,2,10,10", hit: hitRect},
+  {desc: 'missing value default', shape: null, coords: "20,40,10", hit: hitNone},
+  {desc: 'missing value default', shape: null, coords: null, hit: hitNone},
+  {desc: 'invalid value default', shape: 'foobar invalid', coords: "2,2,10,10", hit: hitRect},
+  {desc: 'invalid value default', shape: '', coords: "2,2,10,10", hit: hitRect},
+
+  {desc: 'empty string', shape: 'default', coords: "", hit: hitAll},
+  {desc: 'omitted coords', shape: 'DEFAULT', coords: null, hit: hitAll},
+
+  {desc: 'simple', shape: 'circle', coords: "20,40,10", hit: hitCircle},
+  {desc: 'simple', shape: 'circ', coords: "20,40,10", hit: hitCircle},
+  {desc: 'simple', shape: 'CIRCLE', coords: "20,40,10", hit: hitCircle},
+  {desc: 'simple', shape: 'CIRC', coords: "20,40,10", hit: hitCircle},
+  {desc: 'LATIN CAPITAL LETTER I WITH DOT ABOVE', shape: 'C\u0130RCLE', coords: "20,40,10", hit: hitNone},
+  {desc: 'LATIN SMALL LETTER DOTLESS I', shape: 'c\u0131rcle', coords: "20,40,10", hit: hitNone},
+
+  {desc: 'simple', shape: 'poly', coords: "100,100,120,100,100,120", hit: hitPoly},
+  {desc: 'simple', shape: 'polygon', coords: "100,100,120,100,100,120", hit: hitPoly},
+];
+</script>

third_party/WebKit/LayoutTests/fast/html/resources/hit-test.js

+setup({explicit_done: true});
+
+var img = document.getElementById('img');
+var area = document.getElementById('area');
+
+var hitRect = [[area, 3, 3], [area, 9, 9], [img, 1, 3], [img, 3, 1], [img, 11, 9], [img, 9, 11], [img, 21, 41], [img, 101, 101]];
+var hitNone = [[img, 3, 3], [img, 9, 9], [img, 1, 3], [img, 3, 1], [img, 11, 9], [img, 9, 11], [img, 21, 41], [img, 101, 101]];
+var hitAll = [[area, 1, 1], [area, 1, 299], [area, 299, 1], [area, 299, 299], [area, 21, 41], [area, 101, 101]];
+var hitCircle = [[area, 11, 40], [area, 29, 40], [area, 20, 31], [area, 20, 49], [img, 12, 32], [img, 28, 48], [img, 101, 101]];
+var hitPoly = [[area, 101, 101], [area, 119, 101], [area, 101, 119], [img, 118, 118], [img, 3, 3], [img, 21, 41]];
+var hitStar = [[area, 101, 101], [area, 199, 101], [area, 150, 51], [img, 150, 125], [img, 3, 3], [img, 21, 41]];
+
+var tests;
+// The test file should have `tests` defined as follows:
+// tests = [
+// {desc: string, shape: string?, coords: string?, hit: [[element, x, y], ...]},
+// ...
+// ];
+
+onload = function() {
+  tests.forEach(function(t) {
+    test(function(t_obj) {
+      if (area.shape === null) {
+        area.removeAttribute('shape');
+      } else {
+        area.shape = t.shape;
+      }
+      if (area.coords === null) {
+        area.removeAttribute('coords');
+      } else {
+        area.coords = t.coords;
+      }
+      t.hit.forEach(function(arr) {
+        var expected = arr[0];
+        var x = arr[1];
+        var y = arr[2];
+        assert_equals(document.elementFromPoint(x, y), expected, 'elementFromPoint('+x+', '+y+')');
+      });
+    }, t.desc + ': ' + format_value(t.coords) + ' (' + t.shape + ')');
+  });
+  done();
+};