tor-browser

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

multicol-overflow-positioned-transform-001.html (2316B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <meta name="viewport" content="width=device-width,initial-scale=1">
      4 <title>CSS Multi-column: Scrollable Overflow Transform Dynamic Positioned Element</title>
      5 <link rel="author" titlae="Manuel Rego Casasnovas" href="mailto:rego@igalia.com">
      6 <link rel="help" href="https://drafts.csswg.org/css-multicol/" />
      7 <link rel="help" href="https://drafts.csswg.org/css-overflow-3/#scrollable" />
      8 <meta name="assert" content="Checks that changes on an element's transform contribute to the scrollable overflow on a positioned element in a multicol.">
      9 <script src="/resources/testharness.js"></script>
     10 <script src="/resources/testharnessreport.js"></script>
     11 <style>
     12  .container {
     13    position: absolute;
     14    width: 100px;
     15    height: 100px;
     16    overflow: auto;
     17    background: silver;
     18    border: solid thick;
     19  }
     20 
     21  .element {
     22    width: 50px;
     23    height: 50px;
     24    background: lime;
     25  }
     26 </style>
     27 
     28 <div style="column-count: 2;">
     29 
     30  <div style="position: relative;">
     31 
     32    <div id="container1" style="top: 0px;" class="container">
     33      <div id="element1" style="transform: translateX(20px);" class="element"></div>
     34    </div>
     35 
     36    <div id="container2" style="top: 150px;" class="container">
     37      <div id="element2" style="transform: translateY(30px);" class="element"></div>
     38    </div>
     39 
     40    <div id="container3" style="top: 300px;" class="container">
     41      <div id="element3" style="transform: translate(20px, 30px);" class="element"></div>
     42    </div>
     43 
     44  </div>
     45 
     46 </div>
     47 
     48 <script>
     49  test(() => {
     50    assert_equals(container1.scrollWidth, 100);
     51    element1.style.transform = "translateX(200px)";
     52    assert_equals(container1.scrollWidth, 250);
     53  }, "Check scrollWidth before and after transform chage");
     54 
     55  test(() => {
     56    assert_equals(container2.scrollHeight, 100);
     57    element2.style.transform = "translateY(300px)";
     58    assert_equals(container2.scrollHeight, 350);
     59  }, "Check scrollHeight before and after transform chage");
     60 
     61  test(() => {
     62    assert_equals(container3.scrollWidth, 100);
     63    assert_equals(container3.scrollHeight, 100);
     64    element3.style.transform = "translate(200px, 300px)";
     65    assert_equals(container3.scrollWidth, 250);
     66    assert_equals(container3.scrollHeight, 350);
     67  }, "Check scrollWidth and scrollHeight before and after transform chage");
     68 </script>