vertical-scrollbar-in-rtl.html | Explore in Territory

<html dir=rtl style="-webkit-writing-mode:vertical-lr">
<script src="../../resources/js-test.js"></script>
<script src="../../resources/gesture-util.js"></script>
<script language="javascript">
window.jsTestIsAsync = true;

function log(str) {
  var li = document.createElement("li");
  li.appendChild(document.createTextNode(str));
  var console = document.getElementById("console");
  console.appendChild(li);
}

function assertEqual(message, actual, expected) {
  if (actual != expected) {
    log(`${message}: Failure, actual: ${actual}; expected: ${expected}`);
  } else {
    log(`${message}: Success`);
  }
}

function assertClose(message, actual, expected) {
  if ((actual >= expected && actual - expected < 5) ||
      (expected >= actual && expected - actual < 5)) {
    log(`${message}: Success`);
  } else {
    log(`${message}: Failure, actual: ${actual}; expected: ${expected}`);
  }
}

async function sendKeyAndWaitForScroll(key) {
  const scrollPromise = waitForScrollendEvent(document);
  eventSender.keyDown(key);
  return scrollPromise;
}

// Inline direction is bottom to top.
// Block direction is left to right.
// The origin (0, 0) remains in the top-right corner and thus vertical scrolling
// results in negative y values.
const expectedScrollX = 500;
const expectedScrollY = -1000;

window.onload = async function() {
  if (window.testRunner)
    testRunner.dumpAsText();

  assertEqual("original scroll y for RTL page ", window.scrollY, 0);

  // Test horizontal scroll.
  await waitForScrollReset(document.scrollingElement,
                           expectedScrollX, expectedScrollY);
  assertEqual("vertical scroll: ", window.scrollY, expectedScrollY);
  await raf();
  assertEqual("continuously call window.scrollY ", window.scrollY,
              expectedScrollY);

  // Test zooming wont reset scroll position.
  if (window.testRunner) {
    await waitForScrollReset(document.scrollingElement,
                             expectedScrollX, expectedScrollY);
    testRunner.zoomPageIn();
    await raf();
    testRunner.zoomPageOut();
    await raf();
    assertClose("zoom in and out preserve scroll position", window.scrollY,
                expectedScrollY);
  }

  // Test resize wont reset scroll position.
  const oldHeight = window.innerHeight;
  window.resizeTo(window.innerWidth, oldHeight - 100);
  await raf();
  await waitForScrollReset(document.scrollingElement,
                           expectedScrollX, expectedScrollY);
  window.resizeTo(window.innerWidth, oldHeight);
  await raf();
  assertEqual("resize preserves scroll position", window.scrollY,
              expectedScrollY);

  // Test HOME/END operation.
  if (window.eventSender) {
    // Pressing the 'Home' key jumps to the start of the line. With the
    // combination of writing mode and direction, this position at the bottom
    // of the document. Conversely, pressing 'End' jumps to the end of the line
    // which is at the top of the document.
    const isMac = navigator.platform.toUpperCase().indexOf('MAC') >= 0;
    // Mac keyboards typically don't have 'Home' and 'End' buttons, though Macs
    // can be used with non-Mac keyboards.
    async function testEnd() {
      await waitForScrollReset(document.scrollingElement,
                               expectedScrollX, expectedScrollY);
      await sendKeyAndWaitForScroll('End');
      assertEqual("End key scrolls to bottom", window.scrollY, 0);
    }
    async function testHome() {
      await waitForScrollReset(document.scrollingElement,
                               expectedScrollX, expectedScrollY);
      await sendKeyAndWaitForScroll('Home');
      assertEqual("Home key scrolls to top", window.scrollY, -3425);
    }
    await testHome();
    await testEnd();
  }

  function testSelectAll() {
    // Test select all selects all document content.
    window.resizeTo(500, 500);
    var div = document.getElementById("div");
    div.focus();
    document.execCommand("SelectAll");
    var selection = window.getSelection();
    assertEqual("selectAll selects all document",
                selection.toString().substring(0, div.innerHTML.length),
                div.innerHTML);

    finishJSTest();
  }

  testSelectAll();
}
</script>
<body>
  <div id="div" style="whitespace:nowrap; width: 1000px; height: 4000px; border: 1px solid red;">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</div>
  <ul id="console" dir=ltr></ul>
</body>
</html>
chromium/third_party/blink/web_tests/fast/dom/vertical-scrollbar-in-rtl.html
