Bug 1403871 Part 2: Add tests of getElementsWithFlex and getElementsWithGrid.
MozReview-Commit-ID: GwBlW6Qw3NZ
--- a/dom/base/test/chrome/chrome.ini
+++ b/dom/base/test/chrome/chrome.ini
@@ -58,16 +58,18 @@ support-files = ../file_bug357450.js
[test_bug884693.xul]
[test_bug914381.html]
[test_bug990812.xul]
[test_bug1063837.xul]
[test_bug1139964.xul]
[test_bug1209621.xul]
[test_bug1346936.html]
[test_cpows.xul]
+[test_getElementsWithFlex.html]
+[test_getElementsWithGrid.html]
[test_registerElement_content.xul]
[test_registerElement_ep.xul]
[test_domparsing.xul]
[test_fileconstructor.xul]
[test_nsITextInputProcessor.xul]
[test_range_getClientRectsAndTexts.html]
[test_title.xul]
support-files = file_title.xul
new file mode 100644
--- /dev/null
+++ b/dom/base/test/chrome/test_getElementsWithFlex.html
@@ -0,0 +1,105 @@
+<!doctype html>
+<html id="root" class="f">
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+.no-match {
+ display: block;
+}
+.f {
+ display: flex;
+}
+.fi {
+ display: inline-flex;
+}
+.w {
+ display: -webkit-box;
+}
+.wi {
+ display: -webkit-inline-box;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function testElementsAreInCollection(elements, collection) {
+ if (collection.length > 0) {
+ let c = 0;
+ let foundElement = collection[c];
+ for (let expectedElement of elements) {
+ let isMatching = (expectedElement.id == foundElement.id);
+ let test_function = (expectedElement.todo ? todo : ok);
+
+ test_function(isMatching, "Found " + expectedElement.message + ".");
+
+ // Only move to the next element in the collection if this one was a match.
+ if (isMatching) {
+ foundElement = collection[++c];
+ }
+ }
+ }
+}
+
+function runTests() {
+ let collection = document.documentElement.getElementsWithFlex();
+ let initialElementCount = collection.length;
+
+ // Check that the expected elements were returned.
+ // These are provided in order we expect them to appear.
+ // Has to end in a non-todo element in order for testing logic to work.
+ let initialElements = [
+ {id:"root", message:"root with display:flex"},
+ {id:"a", message:"'plain' flex container with display:flex"},
+ {id:"b", message:"display:inline-flex inside a flex container"},
+ {id:"c", message:"'plain' flex container with display:inline-flex"},
+ {id:"d", message:"flex container with visibility:hidden"},
+ {id:"e", message:"flex container inside a display:none element"},
+ {id:"f", message:"overflow:scroll flex container"},
+ {id:"g", message:"button as a flex container"},
+ {id:"h", message:"fieldset as a flex container"},
+ {id:"i", message:"'plain' flex container with display:-webkit-box"},
+ {id:"j", message:"'plain' flex container with display:-webkit-inline-box"},
+ ];
+
+ testElementsAreInCollection(initialElements, collection);
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+<div id="a" class="f">
+ <div class="no-match"></div>
+ <div id="b" class="fi"></div>
+</div>
+
+<div class="no-match"></div>
+
+<div id="c" class="fi"></div>
+
+<div id="d" class="f" style="visibility:hidden"></div>
+
+<div style="display:none"><div id="e" class="f"></div></div>
+
+<div class="no-match"></div>
+
+<div id="f" style="overflow:scroll" class="f"></div>
+
+<button id="g" class="f"></button>
+
+<fieldset id="h" class="f"></fieldset>
+
+<div id="i" class="w"></div>
+
+<div class="no-match"></div>
+
+<div id="j" class="wi"></div>
+
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/dom/base/test/chrome/test_getElementsWithGrid.html
@@ -0,0 +1,97 @@
+<!doctype html>
+<html id="root" class="g">
+<head>
+<meta charset="utf-8">
+<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+<style>
+.no-match {
+ display: block;
+}
+.g {
+ display: grid;
+}
+.s {
+ display: subgrid;
+}
+.gi {
+ display: inline-grid;
+}
+</style>
+
+<script>
+'use strict';
+
+SimpleTest.waitForExplicitFinish();
+
+function testElementsAreInCollection(elements, collection) {
+ if (collection.length > 0) {
+ let c = 0;
+ let foundElement = collection[c];
+ for (let expectedElement of elements) {
+ let isMatching = (expectedElement.id == foundElement.id);
+ let test_function = (expectedElement.todo ? todo : ok);
+
+ test_function(isMatching, "Found " + expectedElement.message + ".");
+
+ // Only move to the next element in the collection if this one was a match.
+ if (isMatching) {
+ foundElement = collection[++c];
+ }
+ }
+ }
+}
+
+function runTests() {
+ let collection = document.documentElement.getElementsWithGrid();
+ let initialElementCount = collection.length;
+
+ // Check that the expected elements were returned.
+ // These are provided in order we expect them to appear.
+ // Has to end in a non-todo element in order for testing logic to work.
+ let initialElements = [
+ {id:"root", message:"root with display:grid"},
+ {id:"a", message:"'plain' grid container with display:grid"},
+ {id:"b", message:"display:subgrid inside display:grid", todo:true},
+ {id:"c", message:"'plain' grid container with display:inline-grid"},
+ {id:"d", message:"display:subgrid inside display:inline-grid", todo:true},
+ {id:"e", message:"grid container with visibility:hidden"},
+ {id:"f", message:"grid container inside a display:none element"},
+ {id:"g", message:"overflow:scroll grid container"},
+ {id:"h", message:"button as a grid container"},
+ {id:"i", message:"fieldset as a grid container"},
+ ];
+
+ testElementsAreInCollection(initialElements, collection);
+
+ SimpleTest.finish();
+}
+</script>
+</head>
+<body onLoad="runTests();">
+
+<div id="a" class="g">
+ <div class="no-match"></div>
+ <div id="b" class="s"></div>
+</div>
+
+<div class="no-match"></div>
+
+<div id="c" class="gi">
+ <div id="d" class="s"></div>
+</div>
+
+<div id="e" class="g" style="visibility:hidden"></div>
+
+<div style="display:none"><div id="f" class="g"></div></div>
+
+<div class="no-match"></div>
+
+<div id="g" style="overflow:scroll" class="g"></div>
+
+<button id="h" class="g"></button>
+
+<fieldset id="i" class="g"></fieldset>
+
+</body>
+</html>