tor-browser

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

auto-012.html (3069B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>Last remembered size</title>
      4 <link rel="author" title="Oriol Brufau" href="mailto:obrufau@igalia.com">
      5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#last-remembered">
      6 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
      7 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#content-visibility">
      8 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7807">
      9 <meta name="assert" content="Tests that content-visibility:auto, contain:size and contain-intrinsic-size:auto do not result in instable size." />
     10 
     11 <style>
     12 #target {
     13  content-visibility: auto;
     14  contain-intrinsic-size: auto 100px auto 101px;
     15  width: max-content;
     16  height: max-content;
     17  border: 1px solid;
     18 }
     19 #target::before {
     20  content: "";
     21  display: block;
     22  width: 50px;
     23  height: 51px;
     24 }
     25 </style>
     26 
     27 <div id="log"></div>
     28 
     29 <div id="spacer"></div>
     30 <div id="target"></div>
     31 
     32 <script src="/resources/testharness.js"></script>
     33 <script src="/resources/testharnessreport.js"></script>
     34 <script>
     35 const target = document.getElementById("target");
     36 const spacer = document.getElementById("spacer");
     37 
     38 function checkSize(expectedWidth, expectedHeight, msg) {
     39  test(function() {
     40    assert_equals(target.clientWidth, expectedWidth, "clientWidth");
     41    assert_equals(target.clientHeight, expectedHeight, "clientHeight");
     42  }, msg);
     43 }
     44 
     45 function nextRendering() {
     46  return new Promise(resolve => {
     47    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
     48  });
     49 }
     50 
     51 setup({explicit_done: true});
     52 
     53 (async function() {
     54  // Size normally.
     55  await nextRendering();
     56  checkSize(50, 51, "Sizing normally");
     57  await nextRendering();
     58 
     59  // The last remembered size is 50x51, but the element is not skipping
     60  // its contents, so the fallback size will be used instead.
     61  target.style.contain = "size";
     62  checkSize(100, 101, "Sizing with c-i-s fallback");
     63  await nextRendering();
     64 
     65  // The last remembered size is now 100x101, but still not using it.
     66  spacer.style.height = "10000vh";
     67  checkSize(100, 101, "Still sizing with c-i-s fallback");
     68  await nextRendering();
     69 
     70  // The element went off-screen, using last remembered size now.
     71  // It's important that this is the same as in previous step!
     72  checkSize(100, 101, "Sizing with last remembered size");
     73  await nextRendering();
     74 
     75  // Change the c-i-s fallback to prove last remembered size is used.
     76  target.style.containIntrinsicSize = "auto 150px auto 151px";
     77  checkSize(100, 101, "Still sizing with last remembered size");
     78 
     79  // Move the element on-screen. Switch to using c-i-s fallback, and
     80  // update the last remembered size.
     81  spacer.style.height = "0px";
     82  await nextRendering();
     83  checkSize(150, 151, "Sizing with new c-i-s fallback");
     84  await nextRendering();
     85 
     86  // Move off-screen again. Same size as in previous step!
     87  spacer.style.height = "10000vh";
     88  await nextRendering();
     89  target.style.containIntrinsicSize = "auto 200px auto 201px";
     90  checkSize(150, 151, "Sizing with new last remembered size");
     91 
     92  done();
     93 })();
     94 </script>