Add m-esr52 at 52.6.0

author: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
committer: Matt A. Tobin <mattatobin@localhost.localdomain> 2018-02-02 04:16:08 -0500
commit: 5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree: 10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/cssom-view
parent: 49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download: UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz
UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip
9 files changed, 694 insertions, 0 deletions
diff --git a/testing/web-platform/tests/cssom-view/HTMLBody-ScrollArea_quirksmode.html b/testing/web-platform/tests/cssom-view/HTMLBody-ScrollArea_quirksmode.html
new file mode 100644
index 000000000..46fd5010e
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/HTMLBody-ScrollArea_quirksmode.html
@@ -0,0 +1,143 @@
+<html>
+<script src="/resources/testharness.js" type="text/javascript"></script>
+<script src="/resources/testharnessreport.js" type="text/javascript"></script>
+<style type="text/css">
+    body {
+        border:1px solid black;
+        width:200px;
+        height:40px;
+
+        padding-bottom:50px;
+        padding-right:40px;
+    }
+    #elemSimple {
+        background:yellow;
+        width:60px;
+        height:30px;
+    }
+    #elemOverflow {
+        background:yellow;
+        width:250px;
+        height:150px;
+    }
+</style>
+<body id="thebody">
+    <div id="thediv"></div>
+</body>
+<script>
+// Testing for html body element's scroll- x, y, width, height behaviour in quirks mode
+// https://drafts.csswg.org/cssom-view/#potentially-scrollable
+// https://drafts.csswg.org/cssom-view/#dom-element-scrollheight
+test(function() {
+    // can i get the div element?
+    var thediv = document.getElementById("thediv");
+    assert_equals(thediv.id, "thediv");
+    // can i get the body element?
+    var thebody = document.getElementById("thebody");
+    assert_equals(thebody.id, "thebody");
+}, "Ensure that body element is loaded.")
+
+test(function() {
+    document.body.style.overflowY = "hidden";
+    assert_equals(document.body.style.overflowY, "hidden", "Could not set document.body.style.overflowY to 'hidden'.");
+    document.body.style.overflowY = "scroll";
+    assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'.");
+    document.documentElement.style.overflowY = "scroll";
+    assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflow to 'scroll'.");
+}, "Ensure that style.overflowY can be set properly.")
+
+test(function() {
+    assert_equals(document.compatMode, "BackCompat", "Should be in quirks mode.");
+}, "document.compatMode should be BackCompat in quirks.")
+
+test(function() {
+    var thebody = document.getElementById("thebody");
+    assert_equals(thebody.id, "thebody");
+    assert_equals(document.scrollingElement, thebody,
+                  "scrollingElement in quirks mode should default to body element.");
+}, "document.scrollingElement should be body element in quirks.")
+
+test(function() {
+    document.documentElement.style.overflowY = "scroll";
+    assert_equals(document.documentElement.style.overflowY, "scroll", "Could not set document.documentElement.style.overflowY to 'scroll'.");
+
+    var thebody = document.getElementById("thebody");
+    assert_equals(thebody.id, "thebody");
+    thebody.style.overflowY="scroll";
+    assert_equals(document.body.style.overflowY, "scroll", "Could not set document.body.style.overflowY to 'scroll'.");
+    // Body and document now both have overflow != visible
+    // => body `potentially scrollable`
+
+    // In quirks, when body is not `potentially scrollable`
+    //    document.scrollingElment returns the body, otherwise null
+    // https://drafts.csswg.org/cssom-view/#dom-document-scrollingelement
+    assert_equals(document.scrollingElement, null,
+                  "In quirks, we would expect null here (because of potentially scrollable body)");
+}, "scrollingElement in quirks should be null when body is potentially scrollable.")
+
+test(function() {
+    document.documentElement.style.overflowY = "visible";
+    assert_equals(document.documentElement.style.overflowY, "visible");
+    assert_equals(document.scrollingElement, document.body);
+
+    document.documentElement.style.overflowY = "scroll";
+    assert_equals(document.documentElement.style.overflowY, "scroll");
+    document.body.style.overflowY = "visible";
+    assert_equals(document.body.style.overflowY, "visible");
+    assert_equals(document.scrollingElement, document.body);
+
+    document.documentElement.style.overflowY = "visible";
+    assert_equals(document.documentElement.style.overflowY, "visible");
+    assert_equals(document.scrollingElement, document.body);
+}, "scrollingElement in quirks should be body if any of document and body has a visible overflow.")
+
+// no overflow property set to `visible` => pot. scrollable
+test(function() {
+    document.body.style.overflowY = "scroll";
+    assert_equals(document.body.style.overflowY, "scroll");
+    document.documentElement.style.overflowY = "scroll";
+    assert_equals(document.documentElement.style.overflowY, "scroll");
+
+    assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run.");
+    assert_not_equals(document.body.scrollHeight, window.innerHeight);
+
+    var elem = document.getElementById("thediv");
+    elem.style.height = "170px";
+    assert_equals(elem.style.height, "170px");
+
+    oldScrollHeight =  document.body.scrollHeight;
+    elem.style.height = "190px";
+    assert_equals(elem.style.height, "190px");
+    assert_equals(document.body.scrollHeight, oldScrollHeight+20);
+}, "When body potentially scrollable, document.body.scrollHeight changes when changing the height of the body content in quirks.")
+
+// any use of `visible` => not potentially scrollable
+function testNotPotScrollable (document_overflow, body_overflow) {
+    document.body.style.overflowY = body_overflow;
+    assert_equals(document.body.style.overflowY, body_overflow);
+    document.documentElement.style.overflowY = document_overflow;
+    assert_equals(document.documentElement.style.overflowY, document_overflow);
+
+    assert_greater_than(window.innerHeight, 400, "Window not large enough for valid test run.");
+    assert_equals(document.body.scrollHeight, window.innerHeight);
+
+    var elem = document.getElementById("thediv");
+    elem.style.height = "170px";
+    assert_equals(elem.style.height, "170px");
+    assert_equals(window.innerHeight, document.body.scrollHeight);
+
+    oldScrollHeight =  document.body.scrollHeight;
+    elem.style.height = "190px";
+    assert_equals(elem.style.height, "190px");
+    assert_equals(window.innerHeight, document.body.scrollHeight);
+    assert_equals(document.body.scrollHeight, oldScrollHeight);
+}
+
+tests = [["visible", "scroll"], ["scroll", "visible"], ["visible", "visible"]];
+for (var i = 0; i < tests.length; i++) {
+    test( function () {
+        testNotPotScrollable (tests[i][0], tests[i][1]);
+    }, "When body not potentially scrollable, document.body.scrollHeight always equals window.innerHeight in quirks. (cond. "+tests[i][0]+", "+tests[i][1]+")")
+}
+</script>
+</html>
diff --git a/testing/web-platform/tests/cssom-view/OWNERS b/testing/web-platform/tests/cssom-view/OWNERS
new file mode 100644
index 000000000..cd9ff2eee
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/OWNERS
@@ -0,0 +1 @@
+@AutomatedTester
diff --git a/testing/web-platform/tests/cssom-view/elementFromPoint.html b/testing/web-platform/tests/cssom-view/elementFromPoint.html
new file mode 100644
index 000000000..3ae4a9dbf
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/elementFromPoint.html
@@ -0,0 +1,157 @@
+<!DOCTYPE html>
+<title>cssom-view - elementFromPoint</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .size {
+    width:100px;
+    height:100px;
+  }
+  .overlay {
+    position:absolute;
+    top:109px;
+    pointer-events:none;
+  }
+  .purple {
+    background-color: rebeccapurple;
+  }
+  .yellow {
+    background-color: yellow;
+  }
+  .teal {
+    background-color: teal;
+  }
+  .pink {
+    background-color: pink;
+  }
+</style>
+<body>
+  <div id='purple' class="size purple" >&nbsp;</div>
+  <div id='yellow' class="size yellow">&nbsp;</div>
+  <div id='teal' class="size overlay teal">&nbsp;</div>
+  <iframe id=iframe-1 src="iframe.html" style='display:none;position:absolute; left:300px;'></iframe>
+  <iframe id=iframe-2 src="iframe.html" width="" height=""></iframe>
+  <iframe id=iframe-3 width="" height=""></iframe>
+  <svg id=squiggle xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98">
+    <path stroke-dashoffset="0.00" stroke-dasharray="" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4.3" fill="none">
+    </path>
+  </svg>
+  <svg id=svg-transform width="180" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Now we add a text element and apply rotate and translate to both -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
+  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello WPT! </text>
+
+</svg>
+  <div id='pink' class='size pink' style='transform: translate(10px)'>&nbsp;</div>
+  <div id='anotherteal' class='size teal' style='pointer-events:none'>Another teal</div>
+  <img id="dinos" src="/images/blue-area.png" usemap="#dinos_map" border="0" width="364" height="126"/>
+  <map id="dinos_map" name="dinos_map">
+  <area id="rectG" shape="rect" coords="0,0,90,100" href="#" alt="area 1"/>
+  <area id="circleO" shape="circle" coords="120,60,30" href="#" alt="area 2"/>
+  <area id="polyLE" shape="poly" coords="280,0,310,0,360,30,360,90,280,90" href="#" alt="area 3"/>
+  <script>
+    setup({explicit_done:true});
+    window.onload = function () {
+      test(function () {
+              assert_equals(document.elementFromPoint(-1, -1), null,
+                "both co-ordinates passed in are negative so should have returned a null");
+              assert_equals(document.elementFromPoint(-1, -1), null,
+                "x co-ordinates passed in are negative so should have returned a null");
+              assert_equals(document.elementFromPoint(-1, -1), null,
+                "y co-ordinates passed in are negative so should have returned a null");
+                  }, "Negative co-ordinates");
+
+      test(function () {
+              var viewportX = window.innerWidth;
+              var viewportY = window.innerHeight;
+              assert_equals(document.elementFromPoint(viewportX + 100, 10), null,
+                "X co-ordinates larger than viewport");
+              assert_equals(document.elementFromPoint(10, viewportY + 100), null,
+                "Y co-ordinates larger than viewport");
+              assert_equals(document.elementFromPoint(viewportX + 100, viewportY + 100), null,
+                "X, Y co-ordinates larger than viewport");
+      }, "co-ordinates larger than the viewport");
+
+      test(function () {
+              var viewportX = window.frames[1].innerWidth;
+              var viewportY = window.frames[1].innerHeight;
+              var iframeRect = document.getElementById('iframe-2').getBoundingClientRect();
+              assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100, 10),
+                "X co-ordinates larger than viewport");
+              assert_equals(null, window.frames[1].document.elementFromPoint(10, iframeRect.bottom + viewportY + 100),
+                "Y co-ordinates larger than viewport");
+              assert_equals(null, window.frames[1].document.elementFromPoint(iframeRect.right + viewportX + 100,
+                                                                             iframeRect.bottom + viewportY + 100),
+                "X, Y co-ordinates larger than viewport");
+      }, "co-ordinates larger than the viewport from in iframe");
+
+      test(function () {
+              assert_equals(document.elementFromPoint(10, 10), document.getElementById('purple'),
+                "Should have returned the element with id `purple`");
+            }, "Return first element that is the target for hit testing");
+
+      test(function () {
+              assert_equals(document.elementFromPoint(10, 120), document.getElementById('yellow'),
+                "Should have returned the element with id `yellow` as element with `teal` has `pointer-events:none`");
+            }, "First element to get mouse events with pointer-events css");
+
+      test(function () {
+             var svg = document.getElementById('squiggle');
+             var svgRect = svg.getBoundingClientRect();
+             assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2),
+                                                     svgRect.top + Math.round(svgRect.height/2)),
+                           svg,
+                           "Should have returned the line SVG");
+      }, "SVG element at x,y");
+
+      test(function () {
+              var svg = document.getElementById('svg-transform');
+              var svgRect = svg.getBoundingClientRect();
+              assert_equals(document.elementFromPoint(svgRect.left + Math.round(svgRect.width/2),
+                                                      svgRect.top + Math.round(svgRect.height/2)),
+                            svg.querySelector("rect"),
+                            "Should have returned SVG with Hello WPT! that has a transform");
+
+              var pink = document.getElementById('pink');
+              var pinkRect = pink.getBoundingClientRect();
+              assert_equals(document.elementFromPoint(pinkRect.left + Math.round(pinkRect.width/2),
+                                                      pinkRect.top + Math.round(pinkRect.height/2)),
+                            pink,
+                            "Should have returned pink element that has a transform");
+
+      }, "transformed element at x,y");
+
+      test(function () {
+            var anotherteal = document.getElementById('anotherteal');
+            var anothertealRect = anotherteal.getBoundingClientRect();
+            assert_equals(document.elementFromPoint(anothertealRect.left + Math.round(anothertealRect.width/2),
+                                                    anothertealRect.top + Math.round(anothertealRect.height/2)),
+                          document.body,
+                          "Should have returned the root");
+
+            var doc = frames[2].document;
+            doc.removeChild(doc.documentElement);
+            assert_equals(doc.elementFromPoint(0, 0), null,
+                          "Should have returned null as no root element");
+      }, "no hit target at x,y");
+
+      test(function () {
+            var doc = document.implementation.createHTMLDocument('foo');
+            assert_equals(doc.elementFromPoint(0, 0), null,
+                          "Should have returned the documentElement for the document")
+      }, "No viewport available");
+
+      test(function () {
+          var area = document.getElementById('rectG');
+          var areaRect = area.getBoundingClientRect();
+          assert_equals(document.elementFromPoint(areaRect.left + Math.round(areaRect.width/2),
+                                                  areaRect.top + Math.round(areaRect.height/2)),
+                        area,
+                        "Should have returned the image element");
+      }, "Image Maps");
+      done();
+    }
+ </script>
diff --git a/testing/web-platform/tests/cssom-view/elementScroll.html b/testing/web-platform/tests/cssom-view/elementScroll.html
new file mode 100644
index 000000000..6227d6654
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/elementScroll.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>cssom-view - elementScroll</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+    section {
+        width: 300px;
+        height: 300px;
+        /*position: absolute;*/
+        top: 16px;
+        left: 16px;
+        border: inset gray 3px;
+        overflow: scroll;
+        background: white;
+    }
+
+    div {
+        width: 400px;
+    }
+
+</style>
+
+<section id="section">
+    <div>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies tortor eu augue eleifend malesuada. Duis id condimentum urna. Duis vulputate urna a dignissim sodales. Aenean et magna id dui rutrum suscipit. Etiam metus mauris, congue ac suscipit dapibus, mattis non neque. Donec porttitor eros sed mauris tristique, non condimentum augue feugiat. Suspendisse iaculis faucibus nunc at porttitor. Integer convallis enim in feugiat molestie. Ut eget tincidunt mi, vel malesuada lectus. Quisque fermentum neque a sapien interdum consectetur. Nam tincidunt leo sit amet tortor ornare, sit amet ultrices ante semper. Fusce malesuada mi vitae venenatis sagittis. Duis eget urna quam.
+
+    Sed lacinia aliquam tortor quis elementum. Cras vitae mauris erat. Vestibulum posuere justo et dolor condimentum feugiat. Sed at magna nunc. Suspendisse est nunc, ultrices sed enim lobortis, vulputate rutrum mauris. Fusce ultrices eget erat blandit porta. Sed eros nulla, tristique eget porta a, viverra vel velit. Praesent sit amet odio eleifend, tempor arcu ut, elementum tellus. Suspendisse lorem tortor, sodales eget nulla a, rhoncus lobortis magna. Phasellus purus ante, rhoncus a ipsum nec, condimentum lacinia purus. Cras lobortis posuere nisi, vitae dapibus ante feugiat et. Quisque ornare nisi quis erat congue viverra. Vestibulum a nunc odio.
+
+    Sed id venenatis tortor. Curabitur sit amet mauris eget mi semper rutrum vel et odio. Phasellus eu sapien in sem ultricies pretium eu sit amet magna. Nulla finibus nec lorem ac semper. Nulla eleifend eros id fringilla pellentesque. Proin eleifend, sem vel lobortis viverra, massa augue viverra felis, quis ultricies sapien ipsum at magna. Duis rutrum tempus lobortis. Aliquam quis nulla eget velit viverra pretium. Maecenas venenatis nec nisl at pulvinar. Duis in sodales lectus, ac porta augue.
+
+    Sed sed ante aliquam, rutrum nisl quis, fermentum tellus. Proin ac leo molestie, euismod mauris sed, consequat nunc. Vivamus ut leo a nunc pharetra accumsan a non lorem. Aliquam iaculis mattis augue, in eleifend est accumsan vel. Pellentesque efficitur pulvinar leo vel ornare. Pellentesque non fermentum enim, ut efficitur elit. Duis risus quam, congue vel nulla a, blandit egestas erat. Suspendisse at sodales dolor. Vivamus auctor, lorem et ultrices venenatis, erat ex mollis nisi, quis maximus libero quam a libero.
+
+    Curabitur elit lacus, bibendum non tempus a, bibendum sit amet ante. Mauris eget nibh quis leo rhoncus consequat. Integer iaculis sed sapien eu pellentesque. In aliquet elementum lorem, ut consequat elit ultrices id. Phasellus vestibulum ex ex, ac sagittis tortor convallis et. Curabitur placerat id lectus at aliquam. Morbi sed nisl sem. Nam sit amet arcu maximus, volutpat nisl ac, dignissim neque. Etiam nec efficitur libero. Quisque tristique pulvinar est, eget dictum ex vehicula non. Nam dignissim non felis a iaculis. Nullam vel dolor vitae libero aliquet congue. Donec mi eros, semper non lectus at, commodo ullamcorper ligula. Donec commodo, sem vel lacinia porttitor, elit orci maximus felis, eget eleifend est velit id lorem.
+    </div>
+</section>
+
+<script>
+    setup({explicit_done:true});
+    window.onload = function () {
+        var section = document.getElementById("section");
+
+        test(function () {
+            assert_equals(section.scrollTop, 0, "initial scrollTop should be 0");
+            assert_equals(section.scrollLeft, 0, "initial scrollLeft should be 0");
+
+            section.scrollTop  = 30;
+            section.scrollLeft = 40;
+
+            assert_equals(section.scrollTop, 30, "changed scrollTop should be 40");
+            assert_equals(section.scrollLeft, 40, "changed scrollLeft should be 40");
+        },  "Element scrollTop/Left getter/setter test");
+
+        test(function () {
+            section.scroll(50, 60);
+
+            assert_equals(section.scrollLeft, 50, "changed scrollLeft should be 60");
+            assert_equals(section.scrollTop, 60, "changed scrollTop should be 50");
+        },  "Element scroll test");
+
+        test(function () {
+            section.scrollTo(80, 70);
+
+            assert_equals(section.scrollLeft, 80, "changed scrollLeft should be 70");
+            assert_equals(section.scrollTop, 70, "changed scrollTop should be 80");
+        }, "Element scrollTo test");
+
+        test(function () {
+            var left = section.scrollLeft;
+            var top = section.scrollTop;
+
+            section.scrollBy(10, 20);
+
+            assert_equals(section.scrollLeft, left + 10, "increment of scrollLeft should be 10")
+            assert_equals(section.scrollTop, top + 20, "increment of scrollTop should be 20")
+        })
+
+        test(function () {
+            section.scrollTop  = 1000;
+            section.scrollLeft = 1000;
+
+            assert_equals(section.scrollTop, 636, "changed scrollTop should be 636");
+            assert_equals(section.scrollLeft, 100, "changed scrollLeft should be 100");
+
+        }, "Element scroll maximum test");
+
+        done();
+    };
+</script>
diff --git a/testing/web-platform/tests/cssom-view/elementsFromPoint.html b/testing/web-platform/tests/cssom-view/elementsFromPoint.html
new file mode 100644
index 000000000..4400f6aa9
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/elementsFromPoint.html
@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<title>cssom-view - elementsFromPoint</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<style>
+  .size {
+    width:100px;
+    height:100px;
+  }
+  .overlay {
+    position:absolute;
+    top:109px;
+    pointer-events:none;
+  }
+  .purple {
+    background-color: rebeccapurple;
+  }
+  .yellow {
+    background-color: yellow;
+  }
+  .teal {
+    background-color: teal;
+  }
+  .pink {
+    background-color: pink;
+  }
+</style>
+<body>
+  <div id='purple' class="size purple" >&nbsp;</div>
+  <div id='yellow' class="size yellow">&nbsp;</div>
+  <div id='teal' class="size overlay teal">&nbsp;</div>
+  <iframe id=iframe-1 src="iframe.html" style='display:none;position:absolute; left:300px;'></iframe>
+  <iframe id=iframe-2 src="iframe.html" width="" height=""></iframe>
+  <iframe id=iframe-3 width="" height=""></iframe>
+  <svg id=squiggle xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98">
+    <path stroke-dashoffset="0.00" stroke-dasharray="" d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" stroke="#000" stroke-width="4.3" fill="none">
+    </path>
+  </svg>
+  <svg id=svg-transform width="180" height="200"
+  xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink">
+
+  <!-- Now we add a text element and apply rotate and translate to both -->
+  <rect x="50" y="50" height="100" width="100" style="stroke:#000; fill: #0086B2" transform="translate(30) rotate(45 50 50)"></rect>
+  <text x="60" y="105" transform="translate(30) rotate(45 50 50)"> Hello WPT! </text>
+
+</svg>
+  <div id='pink' class='size pink' style='transform: translate(10px)'>&nbsp;</div>
+  <div id='anotherteal' class='size teal' style='pointer-events:none'>Another teal</div>
+  <script>
+    setup({explicit_done:true});
+    window.onload = function () {
+      test(function () {
+              assert_array_equals(document.elementsFromPoint(-1, -1), [],
+                "both co-ordinates passed in are negative so should have returned a []");
+              assert_array_equals(document.elementsFromPoint(-1, -1), [],
+                "x co-ordinates passed in are negative so should have returned a []");
+              assert_array_equals(document.elementsFromPoint(-1, -1), [],
+                "y co-ordinates passed in are negative so should have returned a []");
+                  }, "Negative co-ordinates");
+
+      test(function () {
+              var viewportX = window.innerWidth;
+              var viewportY = window.innerHeight;
+              assert_array_equals(document.elementsFromPoint(viewportX + 100, 10), [],
+                "X co-ordinates larger than viewport so should have returned a []");
+              assert_array_equals(document.elementsFromPoint(10, viewportY + 100), [],
+                "Y co-ordinates larger than viewport so should have returned a []");
+              assert_array_equals(document.elementsFromPoint(viewportX + 100, viewportY + 100), [],
+                "X, Y co-ordinates larger than viewport so should have returned a []");
+      }, "co-ordinates larger than the viewport");
+
+      test(function () {
+              var viewportX = window.frames[1].innerWidth;
+              var viewportY = window.frames[1].innerHeight;
+              var iframeRect = document.getElementById('iframe-2').getBoundingClientRect();
+              assert_array_equals([], window.frames[1].document.elementsFromPoint(iframeRect.right + viewportX + 100, 10),
+                "X co-ordinates larger than viewport so should have returned a []");
+              assert_array_equals([], window.frames[1].document.elementsFromPoint(10, iframeRect.bottom + viewportY + 100),
+                "Y co-ordinates larger than viewport so should have returned a []");
+              assert_array_equals([], window.frames[1].document.elementsFromPoint(iframeRect.right + viewportX + 100,
+                                                                                  iframeRect.bottom + viewportY + 100),
+                "X, Y co-ordinates larger than viewport so should have returned a []");
+      }, "co-ordinates larger than the viewport from in iframe");
+
+      test(function () {
+              assert_array_equals(document.elementsFromPoint(10, 10),
+                                  [document.getElementById('purple'), document.body, document.querySelector('html')],
+                                  "Should have returned a sequence with `[purple element, document.body, html]`");
+            }, "Return first element that is the target for hit testing");
+
+      test(function () {
+              assert_array_equals(document.elementsFromPoint(10, 120),
+                                  [document.getElementById('yellow'), document.body, document.querySelector('html')],
+                "Should have returned a sequence with `[yellow element, document.body, html]`");
+            }, "First element to get mouse events with pointer-events css");
+
+      test(function () {
+             var svg = document.getElementById('squiggle');
+             var svgRect = svg.getBoundingClientRect();
+             assert_array_equals(document.elementsFromPoint(svgRect.left + Math.round(svgRect.width/2),
+                                                            svgRect.top + Math.round(svgRect.height/2)),
+                           [svg, document.body, document.querySelector('html')],
+                           "Should have returned a sequence with [svg, body, html]");
+      }, "SVG element at x,y");
+
+      test(function () {
+              var svg = document.getElementById('svg-transform');
+              var svgRect = svg.getBoundingClientRect();
+              assert_array_equals(document.elementsFromPoint(svgRect.left + Math.round(svgRect.width/2),
+                                                             svgRect.top + Math.round(svgRect.height/2)),
+                            [svg.querySelector("rect"), svg, document.body, document.querySelector('html')],
+                            "Should have returned [svg rect, svg, body, html]");
+
+              var pink = document.getElementById('pink');
+              var pinkRect = pink.getBoundingClientRect();
+              assert_array_equals(document.elementsFromPoint(pinkRect.left + Math.round(pinkRect.width/2),
+                                                             pinkRect.top + Math.round(pinkRect.height/2)),
+                            [pink, document.body, document.querySelector('html')],
+                            "Should have returned a sequence with [pink, body, html]");
+
+      }, "transformed element at x,y");
+
+      test(function () {
+            var anotherteal = document.getElementById('anotherteal');
+            var anothertealRect = anotherteal.getBoundingClientRect();
+            assert_array_equals(document.elementsFromPoint(anothertealRect.left + Math.round(anothertealRect.width/2),
+                                                           anothertealRect.top + Math.round(anothertealRect.height/2)),
+                          [document.body, document.querySelector('html')],
+                          "Should have returned the sequence [body, html]");
+
+            var doc = frames[1].document;
+            assert_array_equals([doc.querySelector('html')], doc.elementsFromPoint(0, 100),
+                                "Should have returned the sequence [html]")
+
+            var doc = frames[2].document;
+            doc.removeChild(doc.documentElement);
+            assert_array_equals(doc.elementsFromPoint(0, 0), [],
+                          "Should have returned [] as no root element");
+
+      }, "no hit target at x,y");
+
+      test(function () {
+            var doc = document.implementation.createHTMLDocument('foo');
+            assert_array_equals(doc.elementsFromPoint(0, 0), [],
+                          "Should have returned []")
+      }, "No viewport available");
+      done();
+    }
+ </script>
diff --git a/testing/web-platform/tests/cssom-view/iframe.html b/testing/web-platform/tests/cssom-view/iframe.html
new file mode 100644
index 000000000..e4413a738
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/iframe.html
@@ -0,0 +1,4 @@
+<!DOCTYPE html>
+<style>
+  html, body { padding:9px; border:1px solid }
+</style>
diff --git a/testing/web-platform/tests/cssom-view/negativeMargins.html b/testing/web-platform/tests/cssom-view/negativeMargins.html
new file mode 100644
index 000000000..0616e8b49
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/negativeMargins.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>cssom-view - elementFromPoint and elementsFromPoint dealing with negative margins</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<body>
+<div id="outer" style="background:yellow">
+  <div id="inner" style="width:100px; height:100px; margin-bottom:-100px; background:lime;"></div>
+  Hello
+</div>
+<script>
+ setup({explicit_done:true});
+ window.onload = function () {
+   var outer = document.getElementById('outer');
+   var inner = document.getElementById('inner');
+   var outerRect = outer.getBoundingClientRect();
+   test(function () {
+     assert_equals(document.elementFromPoint(outerRect.left + 1,
+                                             outerRect.top + 1),
+                   outer,
+                   "elementFromPoint should get outer element");
+   });
+   test(function () {
+     assert_array_equals(document.elementsFromPoint(outerRect.left + 1,
+                                                    outerRect.top + 1),
+                         [inner, outer, document.body, document.querySelector('html')],
+                         "elementsFromPoint should get sequence [inner, outer, body, html]");
+   });
+   done();
+ };
+</script>
+</body>
diff --git a/testing/web-platform/tests/cssom-view/scrolling-no-browsing-context.html b/testing/web-platform/tests/cssom-view/scrolling-no-browsing-context.html
new file mode 100644
index 000000000..94357605b
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/scrolling-no-browsing-context.html
@@ -0,0 +1,33 @@
+<!doctype html>
+<meta charset="utf-8">
+<title>cssom-view scrolling-no-browsing-context</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script>
+setup({explicit_done:true});
+window.onload = function () {
+    test(function () {
+        var doc = document.implementation.createDocument("http://example.com/", "html", null);
+
+        var element = doc.createElement("tag")
+        assert_equals(element.scrollTop, 0, "scrollTop should be always 0");
+        assert_equals(element.scrollLeft, 0, "scrollLeft should be always 0");
+
+        element.scrollTop = 10;
+        element.scrollLeft = 10;
+        assert_equals(element.scrollTop, 0, "scrollTop should be always 0");
+        assert_equals(element.scrollLeft, 0, "scrollLeft should be always 0");
+
+        element.scroll(10, 10);
+        assert_equals(element.scrollTop, 0, "scrollTop should be always 0");
+        assert_equals(element.scrollLeft, 0, "scrollLeft should be always 0");
+
+        element.scrollTo(10, 10);
+        assert_equals(element.scrollTop, 0, "scrollTop should be always 0");
+        assert_equals(element.scrollLeft, 0, "scrollLeft should be always 0");
+
+    }, "Element get and set scrollTop, scrollLeft, scroll() and scrollTo() test");
+
+    done();
+};
+</script>
diff --git a/testing/web-platform/tests/cssom-view/scrollingElement.html b/testing/web-platform/tests/cssom-view/scrollingElement.html
new file mode 100644
index 000000000..abede49cf
--- /dev/null
+++ b/testing/web-platform/tests/cssom-view/scrollingElement.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<meta charset=utf-8>
+<title>cssom-view - scrollingElement</title>
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<iframe id="quirksframe"></iframe>
+<iframe id="nonquirksframe"></iframe>
+<div id="log"></div>
+<script>
+async_test(function() {
+  var quirksFrame = document.getElementById("quirksframe");
+  quirksFrame.onload = this.step_func(function() {
+    var quirksDoc = quirksFrame.contentDocument;
+    assert_equals(quirksDoc.compatMode, "BackCompat", "Should be in quirks mode.");
+    assert_not_equals(quirksDoc.body, null, "Should have a body element");
+
+    // Tests for quirks mode document.
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body,
+      "scrollingElement in quirks mode should default to body element.");
+
+    quirksDoc.documentElement.style.overflow = "scroll";
+    quirksDoc.body.style.overflow = "scroll";
+    assert_equals(quirksDoc.scrollingElement, null,
+      "scrollingElement in quirks mode should be null if overflow of body and root element isn't visible.");
+    quirksDoc.documentElement.style.overflow = "visible";
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body);
+    quirksDoc.documentElement.style.overflow = "scroll";
+    quirksDoc.body.style.overflow = "visible";
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body);
+    quirksDoc.documentElement.style.overflow = "visible";
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body);
+
+    quirksDoc.body.style.display = "none";
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body)
+    quirksDoc.body.style.display = "block";
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body);
+
+    quirksDoc.documentElement.appendChild(quirksDoc.createElement("body"));
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body);
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.getElementsByTagName("body")[0]);
+    quirksDoc.documentElement.removeChild(quirksDoc.documentElement.lastChild);
+    assert_equals(quirksDoc.scrollingElement, quirksDoc.body);
+
+    quirksDoc.documentElement.removeChild(quirksDoc.body);
+    assert_equals(quirksDoc.scrollingElement, null);
+    quirksDoc.documentElement.appendChild(quirksDoc.createElementNS("foobarNS", "body"));
+    assert_equals(quirksDoc.scrollingElement, null);
+
+    quirksDoc.removeChild(quirksDoc.documentElement);
+    assert_equals(quirksDoc.scrollingElement, null);
+
+    quirksDoc.appendChild(quirksDoc.createElementNS("foobarNS", "html"));
+    quirksDoc.documentElement.appendChild(quirksDoc.createElement("body"));
+    assert_equals(quirksDoc.scrollingElement, null);
+
+    quirksDoc.removeChild(quirksDoc.documentElement);
+    quirksDoc.appendChild(quirksDoc.createElement("body"));
+    assert_equals(quirksDoc.scrollingElement, null);
+  });
+  quirksFrame.src =
+    URL.createObjectURL(new Blob([""], { type: "text/html" }));
+}, "scrollingElement in quirks mode");
+
+async_test(function() {
+  var nonQuirksFrame = document.getElementById("nonquirksframe");
+  nonQuirksFrame.onload = this.step_func_done(function() {
+    var nonQuirksDoc = nonQuirksFrame.contentDocument;
+    assert_equals(nonQuirksDoc.compatMode, "CSS1Compat", "Should be in standards mode.");
+    assert_not_equals(nonQuirksDoc.body, null, "Should have a body element");
+
+    assert_equals(nonQuirksDoc.scrollingElement, nonQuirksDoc.documentElement,
+      "scrollingElement in standards mode should be the document element.");
+    nonQuirksDoc.documentElement.style.overflow = "scroll";
+    nonQuirksDoc.body.style.overflow = "scroll";
+    assert_equals(nonQuirksDoc.scrollingElement, nonQuirksDoc.documentElement);
+
+    nonQuirksDoc.removeChild(nonQuirksDoc.documentElement);
+    assert_equals(nonQuirksDoc.scrollingElement, null);
+    nonQuirksDoc.appendChild(nonQuirksDoc.createElement("foobar"));
+    assert_equals(nonQuirksDoc.scrollingElement.localName, "foobar");
+  });
+  nonQuirksFrame.src =
+    URL.createObjectURL(new Blob(["<!doctype html>"], { type: "text/html" }));
+}, "scrollingElement in no-quirks mode");
+</script>
author	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
committer	Matt A. Tobin <mattatobin@localhost.localdomain>	2018-02-02 04:16:08 -0500
commit	5f8de423f190bbb79a62f804151bc24824fa32d8 (patch)
tree	10027f336435511475e392454359edea8e25895d /testing/web-platform/tests/cssom-view
parent	49ee0794b5d912db1f95dce6eb52d781dc210db5 (diff)
download	UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.gz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.lz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.tar.xz UXP-5f8de423f190bbb79a62f804151bc24824fa32d8.zip