Blame dom/base/test/chrome/test_getElementsWithGrid.html

Packit f0b94e
Packit f0b94e
<html id="root" class="g">
Packit f0b94e
<head>
Packit f0b94e
<meta charset="utf-8">
Packit f0b94e
<script type="text/javascript" src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
Packit f0b94e
<link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css" />
Packit f0b94e
<style>
Packit f0b94e
.no-match {
Packit f0b94e
  display: block;
Packit f0b94e
}
Packit f0b94e
.g {
Packit f0b94e
  display: grid;
Packit f0b94e
}
Packit f0b94e
.s {
Packit f0b94e
  display: subgrid;
Packit f0b94e
}
Packit f0b94e
.gi {
Packit f0b94e
  display: inline-grid;
Packit f0b94e
}
Packit f0b94e
</style>
Packit f0b94e
Packit f0b94e
<script>
Packit f0b94e
'use strict';
Packit f0b94e
Packit f0b94e
SimpleTest.waitForExplicitFinish();
Packit f0b94e
Packit f0b94e
function testTargetsAreInElements(targets, elements) {
Packit f0b94e
  let c = 0;
Packit f0b94e
  for (let target of targets) {
Packit f0b94e
    if (c >= elements.length) {
Packit f0b94e
      ok(false, "We have more targets than elements found.");
Packit f0b94e
      break;
Packit f0b94e
    }
Packit f0b94e
    let element = elements[c];
Packit f0b94e
    let isMatching = (target.id == element.id);
Packit f0b94e
    let test_function = (target.todo ? todo : ok);
Packit f0b94e
Packit f0b94e
    test_function(isMatching, "Should find " + target.message + ".");
Packit f0b94e
Packit f0b94e
    // Only move to the next element in the elements if this one was a match.
Packit f0b94e
    // This handles the case of an unexpected element showing up, and prevents
Packit f0b94e
    // cascading errors in that case. If we've instead screwed up the target
Packit f0b94e
    // list, then we will get cascading errors.
Packit f0b94e
    if (isMatching) {
Packit f0b94e
      ++c;
Packit f0b94e
    }
Packit f0b94e
  }
Packit f0b94e
Packit f0b94e
  // Make sure we don't have any extra elements after going through all the targets.
Packit f0b94e
  is(c, elements.length, "We found more elements than we have targets.");
Packit f0b94e
}
Packit f0b94e
Packit f0b94e
function runTests() {
Packit f0b94e
  // Part 1: Look for all the grid elements starting from the document root.
Packit f0b94e
  let elementsFromRoot = document.documentElement.getElementsWithGrid();
Packit f0b94e
  is(elementsFromRoot.length, 8, "Found expected number of elements within document root.");
Packit f0b94e
Packit f0b94e
  // Check that the expected elements were returned.
Packit f0b94e
  // Targets are provided in order we expect them to appear.
Packit f0b94e
  // Has to end in a non-todo element in order for testing logic to work.
Packit f0b94e
  let targetsFromRoot = [
Packit f0b94e
    {id:"root", message:"root with display:grid"},
Packit f0b94e
    {id:"a", message:"'plain' grid container with display:grid"},
Packit f0b94e
    {id:"b", message:"display:subgrid inside display:grid (to be fixed in Bug 1240834)", todo:true},
Packit f0b94e
    {id:"c", message:"'plain' grid container with display:inline-grid"},
Packit f0b94e
    {id:"d", message:"display:subgrid inside display:inline-grid (to be fixed in Bug 1240834)", todo:true},
Packit f0b94e
    {id:"e", message:"grid container with visibility:hidden"},
Packit f0b94e
    {id:"f", message:"grid container inside a display:none element"},
Packit f0b94e
    {id:"g", message:"overflow:scroll grid container"},
Packit f0b94e
    {id:"h", message:"button as a grid container"},
Packit f0b94e
    {id:"i", message:"fieldset as a grid container"},
Packit f0b94e
  ];
Packit f0b94e
  testTargetsAreInElements(targetsFromRoot, elementsFromRoot);
Packit f0b94e
Packit f0b94e
Packit f0b94e
  // Part 2: Look for all the grid elements starting from a non-root element.
Packit f0b94e
  let elementsFromNonRoot = document.getElementById("a_non_root_element").getElementsWithGrid();
Packit f0b94e
  is(elementsFromNonRoot.length, 1, "Found expected number of elements from non-root element.");
Packit f0b94e
Packit f0b94e
  let targetsFromNonRoot = [
Packit f0b94e
    {id:"f", message:"grid container inside a display:none element (from non-root element)"},
Packit f0b94e
  ];
Packit f0b94e
  testTargetsAreInElements(targetsFromNonRoot, elementsFromNonRoot);
Packit f0b94e
Packit f0b94e
  SimpleTest.finish();
Packit f0b94e
}
Packit f0b94e
</script>
Packit f0b94e
</head>
Packit f0b94e
<body onLoad="runTests();">
Packit f0b94e
Packit f0b94e
Packit f0b94e
  
Packit f0b94e
  
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
  
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
Packit f0b94e
<button id="h" class="g"></button>
Packit f0b94e
Packit f0b94e
<fieldset id="i" class="g"></fieldset>
Packit f0b94e
Packit f0b94e
</body>
Packit f0b94e
</html>