tor-browser

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

anchor-position-dynamic-003.html (2481B)

      1 <!DOCTYPE html>
      2 <title>Tests that anchor layout changes in another BFC cause relayout on the anchored element</title>
      3 <link rel="help" href="https://drafts.csswg.org/css-anchor-1/#propdef-anchor-name">
      4 <link rel="author" href="mailto:xiaochengh@chromium.org">
      5 <script src="/resources/testharness.js"></script>
      6 <script src="/resources/testharnessreport.js"></script>
      7 <script src="/resources/check-layout-th.js"></script>
      8 <script src="support/test-common.js"></script>
      9 <style>
     10 .containing-block {
     11  position: absolute;
     12 }
     13 .anchor {
     14  anchor-name: --a1;
     15  width: 50px;
     16  height: 70px;
     17  background: orange;
     18 }
     19 .after .anchor {
     20  width: 70px;
     21  height: 50px;
     22 }
     23 .target {
     24  position: absolute;
     25  left: anchor(--a1 right);
     26  top: anchor(--a1 bottom);
     27  width: anchor-size(--a1 width);
     28  height: anchor-size(--a1 height);
     29  background: green;
     30 }
     31 
     32 /* Various types of BFC as the containing block of the anchor */
     33 .float {
     34  float: left;
     35 }
     36 .table {
     37  display: table;
     38 }
     39 .inline-block {
     40  display: inline-block;
     41  vertical-align: bottom;
     42 }
     43 .contain {
     44  contain: layout;
     45 }
     46 .scroller {
     47  overflow: scroll;
     48  width: 20px;
     49  height: 20px;
     50 }
     51 </style>
     52 <body>
     53  <div class="containing-block">
     54    <div class="float">
     55      <div class="anchor"></div>
     56    </div>
     57    <div class="target"></div>
     58  </div>
     59 
     60  <div class="containing-block">
     61    <div class="table">
     62      <div class="anchor"></div>
     63    </div>
     64    <div class="target"></div>
     65  </div>
     66 
     67  <div class="containing-block">
     68    <div class="inline-block">
     69      <div class="anchor"></div>
     70    </div>
     71    <div class="target"></div>
     72  </div>
     73 
     74  <div class="containing-block">
     75    <div class="contain">
     76      <div class="anchor"></div>
     77    </div>
     78    <div class="target"></div>
     79  </div>
     80 
     81  <div class="containing-block">
     82    <div class="scroller">
     83      <div class="anchor"></div>
     84    </div>
     85    <div class="target"></div>
     86  </div>
     87 
     88 <script type="module">
     89 for (const element of document.getElementsByClassName('target')) {
     90  element.dataset.offsetX = '50';
     91  element.dataset.offsetY = '70';
     92  element.dataset.expectedWidth = '50';
     93  element.dataset.expectedHeight = '70';
     94 }
     95 await checkLayoutForAnchorPos('.target', false);
     96 
     97 document.body.classList.add('after');
     98 for (const element of document.getElementsByClassName('target')) {
     99  element.dataset.offsetX = '70';
    100  element.dataset.offsetY = '50';
    101  element.dataset.expectedWidth = '70';
    102  element.dataset.expectedHeight = '50';
    103 }
    104 await checkLayoutForAnchorPos('.after .target', true);
    105 </script>
    106 </body>