Quelle 489127.html Sprache: HTML

products/Sources/formale Sprachen/C/Firefox/dom/tests/mochitest/chrome/489127.html

<!DOCTYPE HTML>
<title>nsIDOMWindowUtils::nodesFromRect test - bug 489127</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css">
<script>
  var SimpleTest = window.opener.SimpleTest;
  function ok() { window.opener.ok.apply(window.opener, arguments); }
  function done() { window.opener.done.apply(window.opener, arguments); }
  function info() { window.opener.info.apply(window.opener, arguments); }

  let e = {};

  let dwu = window.windowUtils;

  function check(x, y, top, right, bottom, left, onlyVisible, list, aListIsComplete = false, aOpacityThreshold = 1.0) {
    let nodes = dwu.nodesFromRect(x, y, top, right, bottom, left, /* aIgnoreRootScrollFrame = */ true, /* aFlushLayout = */ true, onlyVisible, aOpacityThreshold);

    if (!aListIsComplete) {
      list.push(e.body);
      list.push(e.html);
    }

    if (nodes.length != list.length) {
      ok(false, "Different number of nodes (" + nodes.length + " vs. " + list.length +
                ") for rect [" + x + "," + y + "], " +
                "[" + top + "," + right + "," + bottom + "," + left + "]");
      return;
    }

    for (var i = 0; i < nodes.length; i++) {
      if (nodes[i] != list[i]) {
        ok(false, `Unexpected node #${i} (${nodes[i].id} vs. ${list[i].id}) ` +
                  `[${x}, ${y}] [${top}, ${right}, ${bottom}, ${left}]`);
        return;
      }
    }
    ok(true, "All correct nodes found for rect "  +
             "[" + x + "," + y + "], " +
             "[" + top + "," + right + "," + bottom + "," + left + "]");
  }

  function doTest() {
    // Set up shortcut access to elements
    e.html = document.documentElement;
    ['h1', 'd1', 'd2', 'p1', 'p2', 'p3', 'p4', 'p5', 'p6', 'span',
     'a1', 'a2', 'a3', 'transf', 'iframe1', 'body', 'opacity', 'host'].forEach(function(a) {
      e[a] = document.getElementById(a);
    });

    let shadow = e.host.attachShadow({ mode: "open" });
    shadow.innerHTML = `
      <style>
      #host-inner { height: 100px; width: 100px; background-color: blue }
      </style>
      <div id="host-inner"></div>
    `;

    window.scrollTo(0, 0);

    // Top, Right, Bottom, Left directions:
    check(53, 71, 0,  0,  0,  0, false, []);
    check(53, 71, 10, 0,  0,  0, false, [e.h1]);
    check(53, 71, 0,  10, 0,  0, false, [e.p3]);
    check(53, 71, 0,  0,  10, 0, false, [e.d1]);
    check(152, 105, 0, 0, 0, 10, false, [e.d1]);
    check(152, 105, 10, 10, 10, 10, false, [e.p4, e.p3, e.d1]);

    // e.p1 is invisible and shouldn't appear:
    check(153,193,0,0,0,0,false,[e.p5]);
    check(153,193,0,20,0,20, false, [e.p5, e.d2]);

    // Precise pixel checks:
    check(144, 183, 0, 0, 0, 0, false, []);
    check(144, 183, 0, 0, 1, 0, false, [e.p5]);
    check(144, 183, 0, 0, 0, 1, false, [e.d2]);
    check(144, 183, 0, 0, 1, 1, false, [e.p5, e.d2]);
    check(77,  240, 0, 0, 0, 0, false, [e.p2]);
    check(77,  240, 1, 0, 0, 0, false, [e.p5, e.p2]);
    check(77,  240, 0, 0, 1, 0, false, [e.span, e.p2]);
    check(77,  240, 1, 0, 1, 0, false, [e.p5, e.span, e.p2]);

    // Expanding area checks:
    check(39, 212, 0,  0,  0,  0, false, []);
    check(39, 212, 10, 0,  0,  0, false, [e.d2]);
    check(39, 212, 0,  0,  10, 0, false, [e.p2]);
    check(39, 212, 10, 1,  30, 0, false, [e.d2, e.p2]);
    check(39, 212, 10, 5,  30, 0, false, [e.span, e.d2, e.p2]);
    check(39, 212, 10, 15, 30, 0, false, [e.p5, e.span, e.d2, e.p2]);

    // Elements inside iframe shouldn't be returned:
    check(15, 410, 0, 30, 50, 0, false, [e.iframe1]);

    // Area with links and text nodes:
    let [x1, y1] = getCenterFor(e.a1);
    let [x2, y2] = getCenterFor(e.a2);
    let [x3, y3] = getCenterFor(e.a3);
    let [xt, yt] = [(x2 + x1) / 2, y1]; //text node between a1 and a2

    check(x1, y1, 0, 0,       0,       0, false, [e.a1.firstChild, e.a1, e.p6]);
    check(x1, y1, 0, 0,       y3 - y1, 0, false, [e.a3.firstChild, e.a3, e.a1.firstChild, e.a1, e.p6]);
    check(x1, y1, 0, xt - x1, 0,       0, false, [e.p6.childNodes[1], e.a1.firstChild, e.a1, e.p6]);
    check(x1, y1, 0, x2 - x1, 0,       0, false, [e.a2.firstChild, e.a2, e.p6.childNodes[1], e.a1.firstChild, e.a1, e.p6]);
    check(x1, y1, 0, x2 - x1, y3 - y1, 0, false, [e.a3.firstChild, e.a3, e.a2.firstChild, e.a2, e.p6.childNodes[1], e.a1.firstChild, e.a1, e.p6]);

    // 2d transform:
    check(61, 671, 0, 0,  0,  0,  false, []);
    check(61, 671, 0, 30, 0,  10, false, [e.transf]);
    check(61, 671, 0, 30, 90, 10, false, [e.transf.firstChild, e.transf]);

    {
      info("opacity: with and without aVisibleOnly = true");
      let [x, y] = getCenterFor(e.opacity);
      check(x, y, 1, 1, 1, 1, false, [e.opacity]);
      check(x, y, 1, 1, 1, 1, true, []);
    }

    // Check elements behind opaque backgrounds of other elements don't show up
    // in the list when aVisibleOnly = true.
    {
      info("elements behind opaque backgrounds of other elements with aVisibleOnly=true");
      let container = document.getElementById('obscured-test');
      let fg = document.getElementById('obscured-test-foreground');
      let bg = document.getElementById('obscured-test-background');

      let [x, y] = getCenterFor(container);
      check(x, y, 1, 1, 1, 1, false, [fg, bg, container]);

      const kListIsComplete = true;

      check(x, y, 1, 1, 1, 1, true, [fg], kListIsComplete);
      check(x, y, 1, 1, 1, 1, true, [fg], kListIsComplete, 0.5);

      info("Occluded with different opacity thresholds, with background colors and opacity");
      fg.style.backgroundColor = "rgba(0, 255, 0, 0.5)";
      check(x, y, 1, 1, 1, 1, true, [fg], kListIsComplete, 0.4);
      check(x, y, 1, 1, 1, 1, true, [fg, bg], kListIsComplete, 0.6);

      fg.style.backgroundColor = "";
      fg.style.opacity = "0.5";

      check(x, y, 1, 1, 1, 1, true, [fg], kListIsComplete, 0.4);
      check(x, y, 1, 1, 1, 1, true, [fg, bg], kListIsComplete, 0.6);
    }

    {
      info("Shadow DOM retargeting");

      let [x, y] = getCenterFor(e.host);
      let inner = shadow.getElementById("host-inner");
      check(x, y, 1, 1, 1, 1, false, [inner, e.host]);
    }

    done();
  }

  function getCenterFor(element) {
    let rect = element.getBoundingClientRect();
    return [(rect.left + rect.right) / 2, (rect.top + rect.bottom) / 2];
  }

  addLoadEvent(doTest);
</script>
<style>
body {
  margin: 8px;
  padding: 0;
}

h1, div, p, span, iframe {
  display: block;
  width: 100px;
  height: 30px;
  border: 3px solid black;
  padding: 10px;
  margin: 10px;
}

span {
  display: inline-block;
}

#iframe1 {
  height: 100px;
  margin-top: 60px;
}

#p6 {
  height: 50px;
  margin-top: 30px;
}

#transf {
  margin-top: 60px;
  transform: rotate(-45deg);
}

#opacity {
  opacity: 0;
  margin-top: 60px;
}

#decimal {
  position: relative;
  left: 0.5px;
  top: 50.5px;
}

#obscured-test {
  position: relative;
  width: 500px;
  height: 500px;
}

#obscured-test-background {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 0;
  background: red;
}

#obscured-test-foreground {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
  background: green;
}
</style>
<body id="body">
  <h1 id="h1"></h1>
  <div id="d1"></div>

  
  <div id="d2" style="float: left"></div>

  
  <p id="p1" style="float: left; visibility: hidden"></p>

  <p id="p2" style="clear: left"><span id="span"></span></p>

  
  <p id="p3" style="position:absolute; top: 10px; left:50px; height:50px;"></p>

  
  <p id="p4" style="position: fixed; top: 30px; left: 150px; height: 50px; background-color: blue;"></p>

  
  <p id="p5" style="position:relative; top: -100px; left: 30px; margin-bottom: -70px; background-color: green"></p>

  
  <div id="decimal"></div>

  <iframe id="iframe1" src="data:text/html,

div

"></iframe>

  <p id="p6"><a href="#" id="a1">A</a> / <a href="#" id="a2">A</a><br/><a href="#" id="a3">A</a></p>

  <div id="transf">text</div>

  <div id="opacity">text</div>

  <div id="host"></div>

  <div id="obscured-test">
    <div id="obscured-test-background"></div>
    <div id="obscured-test-foreground"></div>
  </div>
</body>

Messung V0.5

¤ Dauer der Verarbeitung: 0.24 Sekunden (vorverarbeitet) ¤

Wurzel

Suchen

Beweissystem der NASA

Beweissystem Isabelle

NIST Cobol Testsuite

Cephes Mathematical Library

Wiener Entwicklungsmethode

Haftungshinweis

Die Informationen auf dieser Webseite wurden nach bestem Wissen sorgfältig zusammengestellt. Es wird jedoch weder Vollständigkeit, noch Richtigkeit, noch Qualität der bereit gestellten Informationen zugesichert.

Bemerkung:

Die farbliche Syntaxdarstellung und die Messung sind noch experimentell.