Anforderungen  |   Konzepte  |   Entwurf  |   Entwicklung  |   Qualitätssicherung  |   Lebenszyklus  |   Steuerung
 
 
 
 


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;
}

h1div, p, spaniframe {
  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>

  <!-- floated element -->
  <div id="d2" style="float: left"></div>

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

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

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

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

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

  <!-- decimal CSS pixels -->
  <div id="decimal"></div>

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

p

"
></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
C=98 H=100 G=98

¤ Dauer der Verarbeitung: 0.1 Sekunden  (vorverarbeitet)  ¤

*© Formatika GbR, Deutschland






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.






                                                                                                                                                                                                                                                                                                                                                                                                     


Neuigkeiten

     Aktuelles
     Motto des Tages

Software

     Produkte
     Quellcodebibliothek

Aktivitäten

     Artikel über Sicherheit
     Anleitung zur Aktivierung von SSL

Muße

     Gedichte
     Musik
     Bilder

Jenseits des Üblichen ....

Besucherstatistik

Besucherstatistik

Monitoring

Montastic status badge