tor-browser

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

auto-009.html (2345B)

      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/7529">
      9 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7516">
     10 <meta name="assert" content="Tests that the last remembered size is tracked independently for each axis." />
     11 
     12 <style>
     13 #target {
     14  width: max-content;
     15  height: max-content;
     16  border: 1px solid;
     17 }
     18 #target::before {
     19  content: "";
     20  display: block;
     21 }
     22 .content-100-50::before {
     23  width: 100px;
     24  height: 50px;
     25 }
     26 .content-skip {
     27  content-visibility: hidden;
     28 }
     29 .ciw-auto-2 {
     30  contain-intrinsic-width: auto 2px;
     31 }
     32 .ciw-auto-20 {
     33  contain-intrinsic-width: auto 20px;
     34 }
     35 .cih-auto-1 {
     36  contain-intrinsic-height: auto 1px;
     37 }
     38 .cih-auto-10 {
     39  contain-intrinsic-height: auto 10px;
     40 }
     41 </style>
     42 
     43 <div id="log"></div>
     44 
     45 <div id="target"></div>
     46 
     47 <script src="/resources/testharness.js"></script>
     48 <script src="/resources/testharnessreport.js"></script>
     49 <script>
     50 const target = document.getElementById("target");
     51 
     52 function checkSize(expectedWidth, expectedHeight, msg) {
     53  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
     54  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
     55 }
     56 
     57 function nextRendering() {
     58  return new Promise(resolve => {
     59    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
     60  });
     61 }
     62 
     63 promise_test(async function() {
     64  target.className = "content-100-50 ciw-auto-20";
     65  checkSize(100, 50, "Sizing normally");
     66 
     67  await nextRendering();
     68  target.className = "content-skip ciw-auto-2 cih-auto-1";
     69  checkSize(100, 1, "Using last remembered inline size");
     70 }, "Only recording last remembered inline size");
     71 
     72 promise_test(async function() {
     73  target.className = "content-100-50 cih-auto-10";
     74  checkSize(100, 50, "Sizing normally");
     75 
     76  await nextRendering();
     77  target.className = "content-skip ciw-auto-2 cih-auto-1";
     78  checkSize(2, 50, "Using last remembered block size");
     79 }, "Only recording last remembered block size");
     80 </script>