Bug 778654 - Add test files; r?heycam
MozReview-Commit-ID: FYPgBmgBwyr
--- a/dom/svg/test/mochitest.ini
+++ b/dom/svg/test/mochitest.ini
@@ -81,16 +81,17 @@ skip-if = android_version == '18' # bug
[test_SVGStringList.xhtml]
[test_SVGStyleElement.xhtml]
[test_SVGTransformListAddition.xhtml]
[test_SVGTransformList.xhtml]
[test_SVGUnitTypes.html]
[test_SVGxxxListIndexing.xhtml]
[test_SVGxxxList.xhtml]
[test_switch.xhtml]
+[test_tabindex.html]
[test_tearoff_with_cc.html]
support-files = tearoff_with_cc_helper.html
[test_text_2.html]
[test_text_dirty.html]
[test_text.html]
[test_text_lengthAdjust.html]
[test_text_scaled.html]
[test_text_selection.html]
new file mode 100644
--- /dev/null
+++ b/dom/svg/test/test_tabindex.html
@@ -0,0 +1,68 @@
+<html xmlns="http://www.w3.org/1999/xhtml">
+<head>
+ <title>Test for SVG tabIndex - Bug 778654</title>
+ <link rel="stylesheet" type="text/css"
+ href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+
+ <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
+ <script type="application/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
+</head>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
+ <foreignObject id="f" x="0" y="0" width="200" height="60" tabindex="0">
+ <body xmlns="http://www.w3.org/1999/xhtml">
+ <p>Here is a paragraph that requires word wrap</p>
+ </body>
+ </foreignObject>
+ <rect id="r" x="0" y="70" width="100" height="100" fill="yellow" tabIndex="1"/>
+ <text id="t" x="0" y="200" tabindex="2">
+ This is SVG text
+ </text>
+</svg>
+<pre id="test">
+<script class="testbody" type="text/javascript">
+SimpleTest.waitForExplicitFinish();
+
+function main()
+{
+ var f = document.getElementById('f');
+ var r = document.getElementById('r');
+ var t = document.getElementById('t');
+
+ try {
+ // Step 1: Checking by assigning tabIndex
+ is(f.tabIndex, 0, "foreignObject initial tabIndex");
+ f.tabIndex = 1;
+ is(f.tabIndex, 1, "foreignObject tabIndex is set to 1");
+
+ is(r.tabIndex, 1, "rect initial tabIndex");
+ r.tabIndex = 2;
+ is(r.tabIndex, 2, "rect tabIndex is set to 2");
+
+ is(t.tabIndex, 2, "text initial tabIndex");
+ t.tabIndex = 3;
+ is(t.tabIndex, 3, "text is set to 3");
+
+ // Step 2: Checking by triggering TAB event
+ is(document.activeElement.tabIndex, -1, "In the beginning, the active element tabindex is -1");
+
+ synthesizeKey("VK_TAB", {});
+ is(document.activeElement.tabIndex, 1, "The active element tabindex is 1");
+
+ synthesizeKey("VK_TAB", {});
+ is(document.activeElement.tabIndex, 2, "The active element tabindex is 2");
+
+ synthesizeKey("VK_TAB", {});
+ is(document.activeElement.tabIndex, 3, "The active element tabindex is 3");
+ } catch(e) {
+ ok(false, "Got unexpected exception" + e);
+ }
+
+ SimpleTest.finish();
+}
+
+window.addEventListener("load", main, false);
+</script>
+</pre>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/outline-ref.html
@@ -0,0 +1,88 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
+ <g>
+ <rect id="rect" width="100" height="100" style="fill: yellow"/>
+ <text id="text" x="0" y="140" font-family="Verdana" font-size="20">
+ Hello world
+ </text>
+ <foreignObject id="foreignObject" x="0" y="160" width="200" height="60">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ Here is a paragraph that requires word wrap
+ </div>
+ </foreignObject>
+ <circle id="circle" cx="40" cy="275" r="40" style="fill: green"/>
+ <ellipse id="ellipse" cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>
+ <image id="image" x="0" y="450" height="100" width="100"/>
+ <line id="line" x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>
+ <path id="path" d="M50 600 L10 650 L90 650 Z"/>
+ <polygon id="polygon" points="300,50 350,0 400,50" style="fill: lime"/>
+ <polyline id="polyline" points="300,80 350,70 400,80" style="fill: none;stroke: black; stroke-width: 3"/>
+ <g transform="translate(300, 70)">
+ <circle id="gCircle" cx="50" cy="50" r="20" style="fill: blue"/>
+ </g>
+ <g transform="translate(300, 150)">
+ <circle id="ggCircle" cx="50" cy="50" r="20" style="fill: green"/>
+ <g>
+ <rect id="ggRect" x="15" y ="15" width="30" height="10" style="fill: blue"/>
+ </g>
+ </g>
+ <svg x="300" y="250">
+ <rect id="innerRect" x="30" y="10" height="50" width="50" style="fill: red"/>
+ </svg>
+ </g>
+</svg>
+<script>
+
+function createOutline(boundingRect) {
+ // Outline starts from a top-left shift pixel of the bounding rect
+ var left = boundingRect.left - 1;
+ var top = boundingRect.top - 1;
+ var right = boundingRect.right;
+ var bottom = boundingRect.bottom;
+ var width = boundingRect.width;
+ var height = boundingRect.height;
+
+ var lines = document.createElement("div");
+ var styles = 'border: 1px solid;'
+ + 'width: ' + width + 'px;'
+ + 'height: ' + height + 'px;'
+ + 'position: absolute;'
+ + 'top: ' + top + 'px;'
+ + 'left: ' + left + 'px;';
+
+ lines.setAttribute('style', styles);
+ document.body.appendChild(lines);
+}
+
+window.onload = function drawOutline() {
+ var elements = ['rect', 'foreignObject', 'circle',
+ 'ellipse', 'image', 'line', 'path',
+ 'polygon', 'polyline', 'text','gCircle',
+ 'innerRect'];
+ elements.forEach(id => {
+ var element = document.getElementById(id);
+ createOutline(element.getBoundingClientRect());
+ });
+
+ var ggRect = document.getElementById('ggRect');
+ var ggRectbbox = ggRect.getBoundingClientRect();
+ createOutline(ggRectbbox);
+
+ var ggCircle = document.getElementById('ggCircle');
+ var ggCirclebbox = ggCircle.getBoundingClientRect();
+
+ var ggbbox = {
+ left: ggRectbbox.left,
+ top: ggRectbbox.top,
+ right: ggCirclebbox.right,
+ bottom: ggCirclebbox.bottom
+ };
+ ggbbox.width = ggbbox.right - ggbbox.left;
+ ggbbox.height = ggbbox.bottom - ggbbox.top;
+ createOutline(ggbbox);
+}
+</script>
+</body>
+</html>
\ No newline at end of file
new file mode 100644
--- /dev/null
+++ b/layout/reftests/svg/outline.html
@@ -0,0 +1,52 @@
+<!DOCTYPE HTML>
+<html lang="en">
+<style>
+rect,
+text,
+foreignObject,
+circle,
+ellipse,
+image,
+line,
+path,
+polygon,
+polyline {
+ outline: 1px solid;
+}
+
+</style>
+<body>
+<svg xmlns="http://www.w3.org/2000/svg" overflow="visible">
+ <g>
+ <rect width="100" height="100" style="fill: yellow"/>
+ <text x="0" y="140" font-family="Verdana" font-size="20">
+ Hello world
+ </text>
+ <foreignObject x="0" y="160" width="200" height="60">
+ <div xmlns="http://www.w3.org/1999/xhtml">
+ Here is a paragraph that requires word wrap
+ </div>
+ </foreignObject>
+ <circle cx="40" cy="275" r="40" style="fill: green"/>
+ <ellipse cx="70" cy="380" rx="70" ry="50" style="fill: yellow"/>
+ <image x="0" y="450" height="100" width="100"/>
+ <line x1="0" y1="580" x2="100" y2="580" style="stroke: red; stroke-width: 2"/>
+ <path d="M50 600 L10 650 L90 650 Z"/>
+ <polygon points="300,50 350,0 400,50" style="fill: lime"/>
+ <polyline points="300,80 350,70 400,80" style="fill: none; stroke: black;stroke-width: 3"/>
+ <g transform="translate(300, 70)" style="outline: 1px solid">
+ <circle cx="50" cy="50" r="20" style="fill: blue; outline: 0px"/>
+ </g>
+ <g transform="translate(300, 150)" style="outline: 1px solid">
+ <circle cx="50" cy="50" r="20" style="fill: green; outline: 0px"/>
+ <g>
+ <rect x="15" y="15" width="30" height="10" style="fill: blue"/>
+ </g>
+ </g>
+ <svg x="300" y="250">
+ <rect x="30" y="10" height="50" width="50" style="fill: red"/>
+ </svg>
+ </g>
+</svg>
+</body>
+</html>
\ No newline at end of file
--- a/layout/reftests/svg/reftest.list
+++ b/layout/reftests/svg/reftest.list
@@ -241,16 +241,17 @@ random-if(gtkWidget) == objectBoundingBo
== objectBoundingBox-and-pattern-01c.svg objectBoundingBox-and-pattern-01-ref.svg
== objectBoundingBox-and-pattern-02.svg pass.svg
== objectBoundingBox-and-pattern-03.svg objectBoundingBox-and-pattern-03-ref.svg
== opacity-and-gradient-01.svg pass.svg
skip-if(d2d) fuzzy-if(cocoaWidget,1,99974) fuzzy-if(skiaContent,1,200000) == opacity-and-gradient-02.svg opacity-and-gradient-02-ref.svg
== opacity-and-pattern-01.svg pass.svg
fuzzy-if(skiaContent,1,10000) == opacity-and-transform-01.svg opacity-and-transform-01-ref.svg
fuzzy-if(Android,8,200) random-if((B2G&&browserIsRemote)||Mulet) == outer-svg-border-and-padding-01.svg outer-svg-border-and-padding-01-ref.svg # Initial mulet triage: parity with B2G/B2G Desktop
+== outline.html outline-ref.html
== overflow-on-outer-svg-01.svg overflow-on-outer-svg-01-ref.svg
== overflow-on-outer-svg-02a.xhtml overflow-on-outer-svg-02-ref.xhtml
== overflow-on-outer-svg-02b.xhtml overflow-on-outer-svg-02-ref.xhtml
== overflow-on-outer-svg-02c.xhtml overflow-on-outer-svg-02-ref.xhtml
== overflow-on-outer-svg-02d.xhtml overflow-on-outer-svg-02-ref.xhtml
== overflow-on-outer-svg-03a.xhtml overflow-on-outer-svg-03-ref.xhtml
== overflow-on-outer-svg-03b.xhtml overflow-on-outer-svg-03-ref.xhtml
pref(svg.paint-order.enabled,true) == paint-order-01.svg paint-order-01-ref.svg
