tor-browser

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

anchor-in-scroller-with-left-side-scrollbar.html (3874B)

      1 <!DOCTYPE html>
      2 
      3 <title>Tests anchor positioning in a scroller with left-hand-side scrollbar</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/">
      5 <link rel="author" href="mailto:kiet.ho@apple.com">
      6 
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 
     10 <style>
     11    .containing-block {
     12        position: relative;
     13        height: 100px;
     14        width: 100px;
     15 
     16        overflow: scroll;
     17    }
     18 
     19    #containing-block-vertical-rl {
     20        writing-mode: vertical-rl;
     21    }
     22 
     23    .anchor {
     24        width: 20px;
     25        height: 20px;
     26        background: red;
     27 
     28        position: absolute;
     29        left: 50px;
     30        top: 50px;
     31    }
     32 
     33    #anchor-1 {
     34        anchor-name: --anchor1;
     35    }
     36 
     37    #anchor-2 {
     38        anchor-name: --anchor2;
     39    }
     40 
     41    .target-anchor-function {
     42        position: absolute;
     43        top: anchor(top);
     44        left: anchor(left);
     45        right: anchor(right);
     46        bottom: anchor(bottom);
     47 
     48        background: green;
     49    }
     50 
     51    #target-anchor-function-1 {
     52        position-anchor: --anchor1;
     53    }
     54 
     55    #target-anchor-function-2 {
     56        position-anchor: --anchor2;
     57    }
     58 
     59    .target-position-area {
     60        position: absolute;
     61        position-area: center center;
     62        width: 100%;
     63        height: 100%;
     64 
     65        background: blue;
     66    }
     67 
     68    #target-position-area-1 {
     69        position-anchor: --anchor1;
     70    }
     71 
     72    #target-position-area-2 {
     73        position-anchor: --anchor2;
     74    }
     75 </style>
     76 
     77 <div class="containing-block" dir="rtl">
     78    <!-- Long content to force scrollbar. -->
     79    <div style="height: 200px"></div>
     80 
     81    <div class="anchor" id="anchor-1"></div>
     82    <div class="target-anchor-function" id="target-anchor-function-1"></div>
     83    <div class="target-position-area" id="target-position-area-1"></div>
     84 </div>
     85 
     86 <div class="containing-block" id="containing-block-vertical-rl">
     87    <!-- Long content to force scrollbar. -->
     88    <div style="height: 200px; width: 20px"></div>
     89 
     90    <div class="anchor" id="anchor-2"></div>
     91    <div class="target-anchor-function" id="target-anchor-function-2"></div>
     92    <div class="target-position-area" id="target-position-area-2"></div>
     93 </div>
     94 
     95 <script>
     96    function getBoundingClientRectAsArray(element) {
     97        const rect = element.getBoundingClientRect();
     98        return [rect.left, rect.top, rect.right, rect.bottom];
     99    }
    100 
    101    test(() => {
    102        const anchor = document.getElementById("anchor-1");
    103        const targetAnchorFunction = document.getElementById("target-anchor-function-1");
    104 
    105        assert_array_equals(getBoundingClientRectAsArray(anchor), getBoundingClientRectAsArray(targetAnchorFunction));
    106    }, "anchor-positioned element using anchor() in horizontal, right-to-left scroller");
    107 
    108    test(() => {
    109        const anchor = document.getElementById("anchor-1");
    110        const targetPositionArea = document.getElementById("target-position-area-1");
    111 
    112        assert_array_equals(getBoundingClientRectAsArray(anchor), getBoundingClientRectAsArray(targetPositionArea));
    113    }, "anchor-positioned element using position-area in horizontal, right-to-left scroller");
    114 
    115    test(() => {
    116        const anchor = document.getElementById("anchor-2");
    117        const targetAnchorFunction = document.getElementById("target-anchor-function-2");
    118 
    119        assert_array_equals(getBoundingClientRectAsArray(anchor), getBoundingClientRectAsArray(targetAnchorFunction));
    120    }, "anchor-positioned element using anchor() in vertical-rl scroller");
    121 
    122    test(() => {
    123        const anchor = document.getElementById("anchor-2");
    124        const targetPositionArea = document.getElementById("target-position-area-2");
    125 
    126        assert_array_equals(getBoundingClientRectAsArray(anchor), getBoundingClientRectAsArray(targetPositionArea));
    127    }, "anchor-positioned element using position-area in vertical-rl scroller");
    128 </script>