Quelle test_wheel_scroll.html Sprache: HTML

products/sources/formale Sprachen/C/Firefox/gfx/layers/apz/test/mochitest/test_wheel_scroll.html

<!DOCTYPE HTML>
<html>

<head>
  <title>Test for Bug 1013412 and 1168182</title>
  <script src="/tests/SimpleTest/SimpleTest.js"></script>
  <script src="/tests/SimpleTest/EventUtils.js"></script>
  <script src="/tests/SimpleTest/paint_listener.js"></script>
  <script type="application/javascript" src="apz_test_utils.js"></script>
  <script type="application/javascript" src="apz_test_native_event_utils.js"></script>
  <link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css"/>
  <style>
  #content {
    height: 800px;
    overflow: scroll;
  }

  #scroller {
    height: 2000px;
    background: repeating-linear-gradient(#EEE, #EEE 100px, #DDD 100px, #DDD 200px);
  }

  #scrollbox {
    margin-top: 200px;
    width: 500px;
    height: 500px;
    border-radius: 250px;
    box-shadow: inset 0 0 0 60px #555;
    background: #777;
  }

  #circle {
    position: relative;
    left: 240px;
    top: 20px;
    border: 10px solid white;
    border-radius: 10px;
    width: 0px;
    height: 0px;
    transform-origin: 10px 230px;
    will-change: transform;
  }
  </style>
</head>
<body>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1013412">Mozilla Bug 1013412</a>
<a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1168182">Mozilla Bug 1168182</a>
<p id="display"></p>
<div id="content">
  <p>Scrolling the page should be async, but scrolling over the dark circle should not scroll the page and instead rotate the white ball.</p>
  <div id="scroller">
   <div id="scrollbox">
    <div id="circle"></div>
   </div>
  </div>
</div>
<pre id="test">
<script type="application/javascript">

var rotation = 0;
var rotationAdjusted = false;

var incrementForMode = function(mode) {
  switch (mode) {
    case WheelEvent.DOM_DELTA_PIXEL: return 1;
    case WheelEvent.DOM_DELTA_LINE: return 15;
    case WheelEvent.DOM_DELTA_PAGE: return 400;
  }
  return 0;
};

document.getElementById("scrollbox").addEventListener("wheel", function(e) {
  rotation += e.deltaY * incrementForMode(e.deltaMode) * 0.2;
  document.getElementById("circle").style.transform = "rotate(" + rotation + "deg)";
  rotationAdjusted = true;
  e.preventDefault();
});

async function test() {
  var content = document.getElementById("content");
  // enough iterations that we would scroll to the bottom of 'content'
  for (let i = 0; i < 600 && content.scrollTop != content.scrollTopMax; i++) {
    await promiseNativeWheelAndWaitForWheelEvent(content, 100, 150, 0, -5);
  }
  is(content.scrollTop > 0, true, "We should have scrolled down somewhat");
  is(content.scrollTop, content.scrollTopMax, "We should have scrolled to the bottom of the scrollframe");
  is(rotationAdjusted, false, "The rotation should not have been adjusted");
}

SimpleTest.waitForExplicitFinish();

// If we allow smooth scrolling the "smooth" scrolling may cause the page to
// glide past the scrollbox (which is supposed to stop the scrolling) and so
// we might end up at the bottom of the page.
pushPrefs([["general.smoothScroll", false],
           ["mousewheel.transaction.timeout", 100000],
           ["dom.event.wheel-event-groups.enabled", true]])
.then(waitUntilApzStable)
.then(test)
.then(SimpleTest.finish, SimpleTest.finishWithFailure);

</script>
</pre>

</body>
</html>

Messung V0.5

¤ Dauer der Verarbeitung: 0.32 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.