tor-browser

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

auto-008.html (3288B)

      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://html.spec.whatwg.org/multipage/webappapis.html#update-the-rendering">
      9 <link rel="help" href="https://drafts.csswg.org/resize-observer-1/#html-event-loop">
     10 <link rel="help" href="https://github.com/w3c/csswg-drafts/issues/7659">
     11 <meta name="assert" content="Tests that the last remembered size is set immediately before invoking ResizeObserver callbacks." />
     12 
     13 <style>
     14 .target {
     15  width: max-content;
     16  height: max-content;
     17  border: 1px solid;
     18 }
     19 .target::before {
     20  content: "";
     21  display: block;
     22  width: 100px;
     23  height: 50px;
     24 }
     25 .cis-auto .target {
     26  contain-intrinsic-size: auto 40px auto 20px;
     27 }
     28 .skip-contents {
     29  content-visibility: hidden;
     30 }
     31 </style>
     32 
     33 <div id="log"></div>
     34 
     35 <div class="target" id="target1"></div>
     36 <div class="target" id="target2"></div>
     37 <div class="target" id="target3"></div>
     38 
     39 <script src="/resources/testharness.js"></script>
     40 <script src="/resources/testharnessreport.js"></script>
     41 <script>
     42 function checkSize(target, expectedWidth, expectedHeight, msg) {
     43  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
     44  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
     45 }
     46 
     47 let step = 0;
     48 
     49 // Animation frame callbacks are invoked before ResizeObserver callbacks,
     50 // so the last remembered size shouldn't have been set yet.
     51 const test1 = async_test("requestAnimationFrame");
     52 const target1 = document.getElementById("target1");
     53 function step1(entries, ro) {
     54  assert_equals(++step, 1, "Step 1");
     55  target1.classList.add("skip-contents");
     56  checkSize(target1, 40, 20, "No last remembered size");
     57 }
     58 requestAnimationFrame(test1.step_func_done(step1));
     59 
     60 // The last remembered size should be set immediately before invoking
     61 // ResizeObserver callbacks, even if the ResizeObserver is created before
     62 // laying out an element that can record a last remembered size.
     63 const test2 = async_test("Early ResizeObserver");
     64 const target2 = document.getElementById("target2");
     65 function step2(entries, ro) {
     66  assert_equals(++step, 2, "Step 2");
     67  ro.disconnect();
     68  target2.classList.add("skip-contents");
     69  checkSize(target2, 100, 50, "Using last remembered size");
     70 }
     71 new ResizeObserver(test2.step_func_done(step2)).observe(target2);
     72 
     73 // Let elements record a last remembered size and force layout.
     74 document.body.classList.add("cis-auto");
     75 document.body.offsetLeft;
     76 
     77 // The last remembered size should also have been set in the callback of
     78 // a ResizeObserver creater after laying out an element that can record
     79 // a last remembered size.
     80 const test3 = async_test("Late ResizeObserver");
     81 const target3 = document.getElementById("target3");
     82 function step3(entries, ro) {
     83  assert_equals(++step, 3, "Step 3");
     84  ro.disconnect();
     85  target3.classList.add("skip-contents");
     86  checkSize(target3, 100, 50, "Using last remembered size");
     87 }
     88 new ResizeObserver(test3.step_func_done(step3)).observe(target3);
     89 </script>