tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

test_tree_13.html (2752B)

      1 <!-- This Source Code Form is subject to the terms of the Mozilla Public
      2   - License, v. 2.0. If a copy of the MPL was not distributed with this
      3   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
      4 <!DOCTYPE HTML>
      5 <html>
      6 <!--
      7 Test trees have the correct scroll position when they are resized.
      8 -->
      9 <head>
     10  <meta charset="utf-8">
     11  <title>Tree component test</title>
     12  <script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
     13  <link rel="stylesheet" type="text/css" href="chrome://mochikit/content/tests/SimpleTest/test.css">
     14  <style>
     15   .tree {
     16     height: 50px;
     17     overflow: auto;
     18     display: block;
     19   }
     20 
     21   .tree-node {
     22     font-size: 10px;
     23     height: 10px;
     24   }
     25  </style>
     26 </head>
     27 <body>
     28 <pre id="test">
     29 <script src="head.js" type="application/javascript"></script>
     30 <script type="application/javascript">
     31 
     32 "use strict";
     33 
     34 window.onload = async function() {
     35  try {
     36    const ReactDOM = browserRequire("devtools/client/shared/vendor/react-dom");
     37    const { createFactory } = browserRequire("devtools/client/shared/vendor/react");
     38    const { Simulate } =
     39      browserRequire("devtools/client/shared/vendor/react-dom-test-utils");
     40    const Tree = createFactory(
     41      browserRequire("devtools/client/shared/components/VirtualizedTree"));
     42    const ITEM_HEIGHT = 10;
     43 
     44    TEST_TREE.expanded = new Set("ABCDEFGHIJKLMNO".split(""));
     45 
     46    function renderTree(props) {
     47      const treeProps = {
     48        ...TEST_TREE_INTERFACE,
     49        itemHeight: ITEM_HEIGHT,
     50        onFocus: item => renderTree({ focused: item }),
     51        ...props
     52      };
     53      return ReactDOM.render(Tree(treeProps), document.body);
     54    }
     55 
     56    const tree = renderTree({ focused: "L" });
     57    const treeEl = tree.refs.tree;
     58 
     59    is(tree.state.scroll, 0, "Scroll position should be 0 by default");
     60    is(treeEl.scrollTop, 0, "Tree scrollTop should be 0 by default");
     61 
     62    info(`Focus on the next node and scroll by ${ITEM_HEIGHT}`);
     63    Simulate.keyDown(treeEl, { key: "ArrowDown" });
     64    await forceRender(tree);
     65 
     66    is(tree.state.scroll, ITEM_HEIGHT, `Scroll position should now be ${ITEM_HEIGHT}`);
     67    is(treeEl.scrollTop, ITEM_HEIGHT,
     68      `Tree scrollTop should now be ${ITEM_HEIGHT}`);
     69 
     70    info("Simulate window resize along with scroll back to top");
     71    treeEl.scrollTo({ left: 0, top: 0 });
     72    window.dispatchEvent(new Event("resize"));
     73    await forceRender(tree);
     74 
     75    is(tree.state.scroll, ITEM_HEIGHT,
     76      `Scroll position should remain at ${ITEM_HEIGHT}`);
     77    is(treeEl.scrollTop, ITEM_HEIGHT,
     78      `Tree scrollTop should remain at ${ITEM_HEIGHT}`);
     79  } catch (e) {
     80    ok(false, "Got an error: " + DevToolsUtils.safeErrorString(e));
     81  } finally {
     82    SimpleTest.finish();
     83  }
     84 };
     85 </script>
     86 </pre>
     87 </body>
     88 </html>