Bug 1245751 - Part 15: Add tests for a, script, mpath, and animate elements. draft
authorBoris Chiou <boris.chiou@gmail.com>
Mon, 08 Aug 2016 17:43:34 +0800
changeset 399956 c22ce5c4d086c113f8445e21a0c40f168146882f
parent 399955 e748ca17851fd372dfe122bec3aee22e8ede2134
child 528110 e78ce589039f2e6e3ec94df0af476d01b1289f82
push id26045
push userbmo:boris.chiou@gmail.com
push dateFri, 12 Aug 2016 12:18:34 +0000
bugs1245751
milestone51.0a1
Bug 1245751 - Part 15: Add tests for a, script, mpath, and animate elements. Extend the original test for <a> element in dom/svg/ and add some mochitests in svg/linking/scripted/. MozReview-Commit-ID: G7lszyUVMiU
dom/svg/test/a_href_helper_05.svg
dom/svg/test/a_href_helper_06.svg
dom/svg/test/a_href_helper_07.svg
dom/svg/test/mochitest.ini
dom/svg/test/test_a_href_01.xhtml
testing/web-platform/meta/MANIFEST.json
testing/web-platform/tests/svg/linking/scripted/href-animate-element.html
testing/web-platform/tests/svg/linking/scripted/href-mpath-element.html
testing/web-platform/tests/svg/linking/scripted/href-script-element.html
testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript.js
testing/web-platform/tests/svg/linking/scripted/testScripts/externalScriptFail.js
testing/web-platform/tests/svg/linking/scripted/testcommon.js
new file mode 100644
--- /dev/null
+++ b/dom/svg/test/a_href_helper_05.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <a id="a" href="a_href_destination.svg" xlink:href="a_href_fake_destination.svg">
+    <rect width="100%" height="100%"/>
+  </a>
+</svg>
new file mode 100644
--- /dev/null
+++ b/dom/svg/test/a_href_helper_06.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <a id="a" href="initial.svg">
+    <rect width="100%" height="100%"/>
+  </a>
+</svg>
new file mode 100644
--- /dev/null
+++ b/dom/svg/test/a_href_helper_07.svg
@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg">
+  <a id="a" href="initial.svg">
+    <set attributeName="href" to="a_href_destination.svg"/>
+    <rect width="100%" height="100%"/>
+  </a>
+</svg>
--- a/dom/svg/test/mochitest.ini
+++ b/dom/svg/test/mochitest.ini
@@ -1,15 +1,18 @@
 [DEFAULT]
 support-files =
   MutationEventChecker.js
   a_href_destination.svg
   a_href_helper_01.svg
   a_href_helper_02_03.svg
   a_href_helper_04.svg
+  a_href_helper_05.svg
+  a_href_helper_06.svg
+  a_href_helper_07.svg
   animated-svg-image-helper.html
   animated-svg-image-helper.svg
   bbox-helper.svg
   bounds-helper.svg
   dataTypes-helper.svg
   fragments-helper.svg
   getBBox-method-helper.svg
   getCTM-helper.svg
--- a/dom/svg/test/test_a_href_01.xhtml
+++ b/dom/svg/test/test_a_href_01.xhtml
@@ -1,27 +1,29 @@
 <html xmlns="http://www.w3.org/1999/xhtml">
 <!--
 https://bugzilla.mozilla.org/show_bug.cgi?id=620295
+https://bugzilla.mozilla.org/show_bug.cgi?id=1245751
 -->
 <head>
-  <title>Test that activating SVG 'a' elements navigate to their xlink:href</title>
+  <title>Test that activating SVG 'a' elements navigate to their xlink:href or href</title>
   <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
   <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
   <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css" />
 </head>
 <body>
 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=620295">Mozilla Bug 620295</a>
+<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1245751">Mozilla Bug 1245751</a>
 <p id="display"></p>
 <pre id="test">
 <script class="testbody" type="text/javascript"><![CDATA[
 
 SimpleTest.waitForExplicitFinish();
 
-var testCount = 4;
+var testCount = 7;
 var didWindowLoad = false;
 var frameLoadCount = 0;
 var navigationCount = 0;
 
 function endsWith(s1, s2) {
   s1 = String(s1);
   return s1.length >= s2.length && s1.substring(s1.length - s2.length) == s2;
 }
@@ -46,16 +48,22 @@ function doNavigation() {
   // Test clicking on an unmodified <a>.
   doNavigationTest(1, "a_href_helper_01.svg");
   // Test clicking on an <a> whose xlink:href is modified by assigning to href.baseVal.
   doNavigationTest(2, "a_href_helper_02_03.svg", function(a) { a.href.baseVal = "a_href_destination.svg"; });
   // Test clicking on an <a> whose xlink:href is modified by a setAttributeNS call.
   doNavigationTest(3, "a_href_helper_02_03.svg", function(a) { a.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:href", "a_href_destination.svg"); });
   // Test clicking on an <a> whose xlink:href is modified by animation.
   doNavigationTest(4, "a_href_helper_04.svg");
+  // Test clicking on an unmodified <a> with both href and xlink:href.
+  doNavigationTest(5, "a_href_helper_05.svg");
+  // Test clicking on an <a> whose href is modified by a setAttribute call.
+  doNavigationTest(6, "a_href_helper_06.svg", function(a) { a.setAttribute("href", "a_href_destination.svg"); });
+  // Test clicking on an <a> whose href is modified by animation.
+  doNavigationTest(7, "a_href_helper_07.svg");
 }
 
 function doNavigationTest(testNumber, initialHref, f) {
   var iframe = document.getElementById("iframe" + testNumber);
   var a = iframe.contentDocument.getElementById("a");
   ok(endsWith(iframe.contentWindow.location, initialHref), "Initial href of test " + testNumber);
   is("pointer", window.getComputedStyle(a).getPropertyValue("cursor"), "expected pointer cursor");
   iframe.onload = function() {
@@ -75,11 +83,14 @@ window.onload = windowLoaded;
 ]]></script>
 </pre>
 <div id="content" style="visibility: hidden">
 <!-- These must come after frameLoaded is defined -->
 <iframe id="iframe1" src="a_href_helper_01.svg" onload="frameLoaded()"></iframe>
 <iframe id="iframe2" src="a_href_helper_02_03.svg" onload="frameLoaded()"></iframe>
 <iframe id="iframe3" src="a_href_helper_02_03.svg" onload="frameLoaded()"></iframe>
 <iframe id="iframe4" src="a_href_helper_04.svg" onload="frameLoaded()"></iframe>
+<iframe id="iframe5" src="a_href_helper_05.svg" onload="frameLoaded()"></iframe>
+<iframe id="iframe6" src="a_href_helper_06.svg" onload="frameLoaded()"></iframe>
+<iframe id="iframe7" src="a_href_helper_07.svg" onload="frameLoaded()"></iframe>
 </div>
 </body>
 </html>
--- a/testing/web-platform/meta/MANIFEST.json
+++ b/testing/web-platform/meta/MANIFEST.json
@@ -37365,16 +37365,34 @@
           }
         ],
         "service-workers/service-worker/controller-on-disconnect.https.html": [
           {
             "path": "service-workers/service-worker/controller-on-disconnect.https.html",
             "url": "/service-workers/service-worker/controller-on-disconnect.https.html"
           }
         ],
+        "svg/linking/scripted/href-animate-element.html": [
+          {
+            "path": "svg/linking/scripted/href-animate-element.html",
+            "url": "/svg/linking/scripted/href-animate-element.html"
+          }
+        ],
+        "svg/linking/scripted/href-mpath-element.html": [
+          {
+            "path": "svg/linking/scripted/href-mpath-element.html",
+            "url": "/svg/linking/scripted/href-mpath-element.html"
+          }
+        ],
+        "svg/linking/scripted/href-script-element.html": [
+          {
+            "path": "svg/linking/scripted/href-script-element.html",
+            "url": "/svg/linking/scripted/href-script-element.html"
+          }
+        ],
         "web-animations/interfaces/DocumentTimeline/idlharness.html": [
           {
             "path": "web-animations/interfaces/DocumentTimeline/idlharness.html",
             "url": "/web-animations/interfaces/DocumentTimeline/idlharness.html"
           }
         ],
         "web-animations/timing-model/timelines/default-document-timeline.html": [
           {
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/linking/scripted/href-animate-element.html
@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Href - animate element tests</title>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<script src='testcommon.js'></script>
+<body>
+<div id='log'></div>
+<svg id='svg' width='100' height='100' viewBox='0 0 100 100'></svg>
+<script>
+'use strict';
+
+async_test(function(t) {
+  var svg = document.getElementById('svg');
+  var rect1 = createSVGElement(t, 'rect', svg,
+                               { 'width': '10px',
+                                 'height': '10px',
+                                 'id': 'rect1' });
+  var rect2 = createSVGElement(t, 'rect', svg,
+                               { 'width': '10px',
+                                 'height': '10px',
+                                 'id': 'rect2' });
+  var animate = createSVGElement(t, 'animate', svg,
+                                 { 'attributeName': 'x',
+                                   'from': '0',
+                                   'to': '100',
+                                   'dur': '10s' });
+  animate.setAttribute('href', '#rect1');
+  animate.setAttributeNS(XLINKNS, 'xlink:href', '#rect2');
+  assert_equals(animate.targetElement, rect1);
+
+  animate.addEventListener('begin', function() {
+    svg.pauseAnimations();
+    svg.setCurrentTime(5);
+    assert_equals(rect1.x.animVal.value, 50);
+    assert_equals(rect2.x.animVal.value, 0);
+
+    t.done();
+  }, false);
+}, 'Test for animate element when setting both href and xlink:href');
+
+async_test(function(t) {
+  var svg = document.getElementById('svg');
+  var rect1 = createSVGElement(t, 'rect', svg,
+                               { 'width': '10px',
+                                 'height': '10px',
+                                 'id': 'tRect1' });
+  var rect2 = createSVGElement(t, 'rect', svg,
+                               { 'width': '10px',
+                                 'height': '10px',
+                                 'id': 'tRect2' });
+  var transform = createSVGElement(t, 'animateTransform', svg,
+                                   { 'attributeName': 'transform',
+                                     'type': 'translate',
+                                     'from': '0',
+                                     'to': '100',
+                                     'dur': '10s' });
+
+  transform.setAttribute('href', '#tRect1');
+  transform.setAttributeNS(XLINKNS, 'xlink:href', '#tRect2');
+  assert_equals(transform.targetElement, rect1);
+
+  transform.addEventListener('begin', function() {
+    svg.pauseAnimations();
+    svg.setCurrentTime(5);
+    assert_equals(rect1.getCTM().e, 50);
+    assert_equals(rect2.getCTM().e, 0);
+
+    t.done();
+  }, false);
+}, 'Test for animateTransform element when setting both href and xlink:href');
+
+async_test(function(t) {
+  var svg = document.getElementById('svg');
+  var circle1 = createSVGElement(t, 'circle', svg,
+                                 { 'cx': '50',
+                                   'cy': '50',
+                                   'r': '40',
+                                   'id': 'circle1' });
+  var circle2 = createSVGElement(t, 'circle', svg,
+                                 { 'cx': '50',
+                                   'cy': '50',
+                                   'r': '40',
+                                   'id': 'circle2' });
+  var animate = createSVGElement(t, 'animate', svg,
+                                 { 'attributeName': 'cx',
+                                   'from': '50',
+                                   'to': '150',
+                                   'dur': '10s' });
+  animate.setAttribute('href', '#circle1');
+  animate.setAttributeNS(XLINKNS, 'xlink:href', '#circle2');
+  assert_equals(animate.targetElement, circle1);
+
+  animate.addEventListener('begin', function() {
+    svg.pauseAnimations();
+    svg.setCurrentTime(5);
+    assert_equals(circle1.cx.animVal.value, 100);
+    assert_equals(circle2.cx.animVal.value, 50);
+
+    animate.removeAttribute('href');
+    assert_equals(animate.targetElement, circle2);
+    assert_equals(circle1.cx.animVal.value, 50);
+    assert_equals(circle2.cx.animVal.value, 100);
+
+    t.done();
+  }, false);
+}, 'Test for animate element when removing href but we still have xlink:href');
+
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/linking/scripted/href-mpath-element.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Href - mpath element tests</title>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<script src='testcommon.js'></script>
+<body>
+<div id='log'></div>
+<svg id='svg' width='100' height='100' viewBox='0 0 100 100'></svg>
+<script>
+'use strict';
+
+async_test(function(t) {
+  var svg = document.getElementById('svg');
+  var path1 = createSVGElement(t, 'path', svg,
+                               { 'id': 'MyPath1', 'd': 'M 0,0 L 100,0' });
+  var path2 = createSVGElement(t, 'path', svg,
+                               { 'id': 'MyPath2', 'd': 'M 0,0 L 0,100' });
+  var rect = createSVGElement(t, 'rect', svg,
+                              { 'width': '10px', 'height': '10px' });
+  var animateMotion = createSVGElement(t, 'animateMotion', rect,
+                                       { 'dur': '10s' });
+  var mpath = createSVGElement(t, 'mpath', animateMotion);
+  mpath.setAttribute('href', '#MyPath1');
+  mpath.setAttributeNS(XLINKNS, 'xlink:href', '#MyPath2');
+  assert_equals(mpath.href.baseVal, '#MyPath1');
+
+  animateMotion.addEventListener('begin', function() {
+    svg.pauseAnimations();
+    svg.setCurrentTime(1);
+    var ctm = rect.getCTM();
+    assert_equals(ctm.e, 10);
+    assert_equals(ctm.f, 0);
+
+    svg.setCurrentTime(5);
+    ctm = rect.getCTM();
+    assert_equals(ctm.e, 50);
+    assert_equals(ctm.f, 0);
+
+    t.done();
+  }, false);
+}, 'Test for mpath when setting both href and xlink:href');
+
+async_test(function(t) {
+  var svg = document.getElementById('svg');
+  var path1 = createSVGElement(t, 'path', svg,
+                               { 'id': 'Path1', 'd': 'M 0,0 L 100,0' });
+  var path2 = createSVGElement(t, 'path', svg,
+                               { 'id': 'Path2', 'd': 'M 0,0 L 0,100' });
+  var rect = createSVGElement(t, 'rect', svg,
+                              { 'width': '10px', 'height': '10px' });
+  var animateMotion = createSVGElement(t, 'animateMotion', rect,
+                                       { 'dur': '10s' });
+  var mpath = createSVGElement(t, 'mpath', animateMotion);
+  mpath.setAttribute('href', '#Path1');
+  mpath.setAttributeNS(XLINKNS, 'xlink:href', '#Path2');
+
+  animateMotion.addEventListener('begin', function() {
+    svg.pauseAnimations();
+    svg.setCurrentTime(5);
+    var ctm = rect.getCTM();
+    assert_equals(ctm.e, 50);
+    assert_equals(ctm.f, 0);
+
+    mpath.removeAttribute('href');
+    assert_equals(mpath.href.baseVal, '#Path2');
+
+    ctm = rect.getCTM();
+    assert_equals(ctm.e, 0);
+    assert_equals(ctm.f, 50);
+
+    t.done();
+  }, false);
+}, 'Test for mpath when removing href but we still have xlink:href');
+
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/linking/scripted/href-script-element.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>Href - script element tests</title>
+<script src='/resources/testharness.js'></script>
+<script src='/resources/testharnessreport.js'></script>
+<script src='testcommon.js'></script>
+<body>
+<div id='log'></div>
+<svg id='svg' width='100' height='100' viewBox='0 0 100 100'>
+</svg>
+<script>
+'use strict';
+
+async_test(function(t) {
+  var svg = document.getElementById('svg');
+  var script = createSVGElement(t, 'script', svg);
+  svg.appendChild(script);
+
+  script.setAttribute('type', 'text/javascript');
+  script.setAttribute('href', 'testScripts/externalScript.js');
+  script.setAttributeNS(XLINKNS, 'xlink:href',
+                        'testScripts/externalScriptFail.js');
+  assert_equals(script.href.baseVal, 'testScripts/externalScript.js');
+
+  script.addEventListener('load', function() {
+    assert_equals(getAnswer(), 'Correct script',
+                  'Link to correct external script');
+    t.done();
+  }, false);
+}, "Test for external script when setting both href and xlink:href");
+
+</script>
+</body>
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScript.js
@@ -0,0 +1,3 @@
+function getAnswer() {
+  return "Correct script";
+}
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/linking/scripted/testScripts/externalScriptFail.js
@@ -0,0 +1,3 @@
+function getAnswer() {
+  return "Wrong script";
+}
new file mode 100644
--- /dev/null
+++ b/testing/web-platform/tests/svg/linking/scripted/testcommon.js
@@ -0,0 +1,30 @@
+/**
+ * The const var for SVG and xlink namespaces
+ */
+const SVGNS = 'http://www.w3.org/2000/svg';
+const XLINKNS = 'http://www.w3.org/1999/xlink';
+
+/**
+ * Appends a svg element to the parent.
+ *
+ * @param test The testharness.js Test object. If provided, this will be used
+ *             to register a cleanup callback to remove the div when the test
+ *             finishes.
+ * @param tag The element tag name.
+ * @param parent The parent element of this new created svg element.
+ * @param attrs  A dictionary object with attribute names and values to set on
+ *               the div.
+ */
+function createSVGElement(test, tag, parent, attrs) {
+  var elem = document.createElementNS(SVGNS, tag);
+  if (attrs) {
+    for (var attrName in attrs) {
+      elem.setAttribute(attrName, attrs[attrName]);
+    }
+  }
+  parent.appendChild(elem);
+  test.add_cleanup(function() {
+    elem.remove();
+  });
+  return elem;
+}