summaryrefslogtreecommitdiffstats
path: root/layout/style/test/chrome/test_scrollbar_inline_size.html
blob: 31161a9caf633d8fc79ff4673e251e1a96e94bd2 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!DOCTYPE HTML>
<meta charset="utf-8">
<title>Test for env(scrollbar-inline-size)</title>
<script src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
<script src="chrome://mochikit/content/tests/SimpleTest/EventUtils.js"></script>
<link rel="stylesheet" href="chrome://global/skin"/>
<link rel="stylesheet" href="chrome://mochikit/content/tests/SimpleTest/test.css"/>
<div id="scroller" style="width: 100px; height: 100px; overflow: scroll"></div>
<div id="ref" style="width: env(scrollbar-inline-size, 1000px)"></div>
<script>
  SimpleTest.waitForExplicitFinish();
  async function runTest() {
    // We need to disable overlay scrollbars to measure the real scrollbar
    // size.
    await SpecialPowers.pushPrefEnv({
      set: [["ui.useOverlayScrollbars", 0]],
    });
    runOnce();

    info("with full zoom");
    SpecialPowers.setFullZoom(window, 2.0);

    runOnce();
  }

  function runOnce() {
    let scroller = document.getElementById("scroller");
    let ref = document.getElementById("ref");
    let scrollbarSize = scroller.getBoundingClientRect().width - scroller.clientWidth;
    ok(scrollbarSize > 0, "Should have a scrollbar");
    // clientWidth rounds, so we might see a bit of rounding error
    isfuzzy(ref.getBoundingClientRect().width, scrollbarSize, 1, "env() should match the scrollbar size");
  }

  runTest().then(SimpleTest.finish);
</script>