tor-browser

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

anchor-scope-dynamic.html (4467B)

      1 <!DOCTYPE html>
      2 <title>CSS Anchor Positioning: anchor-scope appearing/disappearing dynamically</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-position-1/#anchor-scope">
      4 <script src="/resources/testharness.js"></script>
      5 <script src="/resources/testharnessreport.js"></script>
      6 <style>
      7  .scope-all { anchor-scope: all; }
      8  .scope-a { anchor-scope: --a; }
      9  .scope-b { anchor-scope: --b; }
     10  .scope-ab { anchor-scope: --a, --b; }
     11 
     12  .anchor-a { anchor-name: --a; }
     13  .anchor-b { anchor-name: --b; }
     14  .anchor-a, .anchor-b {
     15    background: skyblue;
     16    height: 10px;
     17  }
     18 
     19  .anchored-a { position-anchor: --a; }
     20  .anchored-b { position-anchor: --b; }
     21  .anchored-a, .anchored-b {
     22    position: absolute;
     23    top: anchor(bottom);
     24    left: anchor(left);
     25    width: 5px;
     26    height: 5px;
     27    background: coral;
     28  }
     29 
     30  /* Containing block */
     31  main {
     32    position: relative;
     33    width: 100px;
     34    height: 100px;
     35    border: 1px solid black;
     36  }
     37 </style>
     38 <script>
     39  function inflate(t, template_element) {
     40    if (!template_element.hasAttribute('debug')) {
     41      t.add_cleanup(() => main.replaceChildren());
     42    }
     43    main.append(template_element.content.cloneNode(true));
     44  }
     45 </script>
     46 
     47 <main id=main>
     48 </main>
     49 
     50 <template id=test_scope_all_dynamic>
     51  <div class=anchor-a></div>
     52  <div class=anchor-a></div><!--A (after change)-->
     53  <div id=dynamic>
     54    <div class=anchor-a></div>
     55    <div class=anchor-a></div><!--A (initially)-->
     56  </div>
     57  <div class=anchored-a></div>
     58 </template>
     59 <script>
     60  test((t) => {
     61    inflate(t, test_scope_all_dynamic);
     62    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
     63    dynamic.style.anchorScope = 'all';
     64    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '20px');
     65    dynamic.style.anchorScope = '';
     66    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
     67  }, 'anchor-scope:all appearing dynamically');
     68 </script>
     69 
     70 <template id=test_scope_named_dynamic>
     71  <div class=anchor-a></div>
     72  <div class=anchor-a></div><!--A (after change)-->
     73  <div id=dynamic>
     74    <div class=anchor-a></div>
     75    <div class=anchor-a></div><!--A (initially)-->
     76  </div>
     77  <div class=anchored-a></div>
     78 </template>
     79 <script>
     80  test((t) => {
     81    inflate(t, test_scope_named_dynamic);
     82    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
     83    dynamic.style.anchorScope = '--a';
     84    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '20px');
     85    dynamic.style.anchorScope = '';
     86    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
     87  }, 'anchor-scope:--a appearing dynamically');
     88 </script>
     89 
     90 <template id=test_scope_named_unrelated_dynamic>
     91  <div class=anchor-a></div>
     92  <div class=anchor-a></div><!--A (after change)-->
     93  <div id=dynamic>
     94    <div class=anchor-a></div>
     95    <div class=anchor-a></div><!--A (initially)-->
     96  </div>
     97  <div class=anchored-a></div>
     98 </template>
     99 <script>
    100  test((t) => {
    101    inflate(t, test_scope_named_unrelated_dynamic);
    102    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
    103    dynamic.style.anchorScope = '--b';
    104    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
    105    dynamic.style.anchorScope = '';
    106    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
    107  }, 'anchor-scope:--b appearing dynamically (--b never referenced)');
    108 </script>
    109 
    110 <template id=test_scope_a_dynamic>
    111  <div class=anchor-b></div>
    112  <div class=anchor-a></div><!--A (after change)-->
    113  <div id=dynamic>
    114    <div class=anchor-b></div><!--B-->
    115    <div class=anchor-a></div><!--A (initially)-->
    116  </div>
    117  <div class=anchored-a></div>
    118  <div class=anchored-b></div>
    119 </template>
    120 <script>
    121  test((t) => {
    122    inflate(t, test_scope_a_dynamic);
    123    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
    124    assert_equals(getComputedStyle(main.querySelector('.anchored-b')).top, '30px');
    125    dynamic.style.anchorScope = '--a';
    126    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '20px');
    127    assert_equals(getComputedStyle(main.querySelector('.anchored-b')).top, '30px');
    128    dynamic.style.anchorScope = '';
    129    assert_equals(getComputedStyle(main.querySelector('.anchored-a')).top, '40px');
    130    assert_equals(getComputedStyle(main.querySelector('.anchored-b')).top, '30px');
    131  }, 'anchor-scope:--a appearing dynamically scopes only --a');
    132 </script>