tor-browser

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

auto-014.html (3149B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>contain-intrinsic-size: auto none</title>
      4 <link rel="author" title="Vladimir Levin" href="mailto:vmpstr@chromium.org">
      5 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#intrinsic-size-override">
      6 <meta name="assert" content="Tests that 'contain-intrinsic-size: auto none' respects the auto keyword">
      7 
      8 <style>
      9 #target {
     10  width: max-content;
     11  height: max-content;
     12 }
     13 .cis-auto {
     14  contain-intrinsic-size: auto none;
     15 }
     16 .skip-contents {
     17  content-visibility: hidden;
     18 }
     19 .size-100-50 {
     20  width: 100px;
     21  height: 50px;
     22 }
     23 .size-75-25 {
     24  width: 75px;
     25  height: 25px;
     26 }
     27 </style>
     28 
     29 <div id="log"></div>
     30 
     31 <div id="parent">
     32  <div id="target">
     33    <div id="contents"></div>
     34  </div>
     35 </div>
     36 
     37 <div id="multicol" style="width: max-content; column-count: 2; column-gap: 50px">
     38  <div style="width: 100px"></div>
     39 </div>
     40 
     41 <script src="/resources/testharness.js"></script>
     42 <script src="/resources/testharnessreport.js"></script>
     43 <script>
     44 const parent = document.getElementById("parent");
     45 const target = document.getElementById("target");
     46 const contents = document.getElementById("contents");
     47 const multicol = document.getElementById("multicol");
     48 
     49 function checkSize(expectedWidth, expectedHeight, msg) {
     50  assert_equals(target.clientWidth, expectedWidth, msg + " - clientWidth");
     51  assert_equals(target.clientHeight, expectedHeight, msg + " - clientHeight");
     52 }
     53 
     54 function nextRendering() {
     55  return new Promise(resolve => {
     56    requestAnimationFrame(() => requestAnimationFrame(() => resolve()));
     57  });
     58 }
     59 
     60 function cleanup() {
     61  parent.className = "";
     62  target.className = "";
     63  contents.className = "";
     64  checkSize(0, 0, "Sizing after cleanup");
     65 }
     66 
     67 promise_test(async function() {
     68  this.add_cleanup(cleanup);
     69  target.className = "cis-auto skip-contents";
     70  contents.classList.add("size-100-50");
     71  checkSize(0, 0, "Size containment with no last remembered size");
     72 
     73  target.classList.remove("skip-contents");
     74  checkSize(100, 50, "Sizing normally");
     75 
     76  await nextRendering();
     77  target.classList.add("skip-contents");
     78  checkSize(100, 50, "Using last remembered size");
     79 
     80  contents.classList.remove("size-100-50");
     81  contents.classList.add("size-75-25");
     82  checkSize(100, 50, "Still using last remembered size");
     83 
     84  target.classList.remove("skip-contents");
     85  checkSize(75, 25, "Sizing normally with different size");
     86 
     87  target.classList.add("skip-contents");
     88  checkSize(100, 50, "Going back to last remembered size");
     89 
     90  target.classList.remove("skip-contents");
     91  await nextRendering();
     92  target.classList.add("skip-contents");
     93  checkSize(75, 25, "Using the new last remembered size");
     94 }, "Basic usage");
     95 
     96 promise_test(async function() {
     97  multicol.className = "cis-auto skip-contents";
     98 
     99  assert_equals(multicol.clientWidth, 50, "initial multicolumn clientWidth");
    100 
    101  multicol.classList.remove("skip-contents");
    102 
    103  assert_equals(multicol.clientWidth, 250, "multicolumn clientWidth without content-visibility");
    104 
    105  await nextRendering();
    106 
    107  multicol.classList.add("skip-contents");
    108 
    109  assert_equals(multicol.clientWidth, 250, "multicolumn clientWidth last remembered size");
    110 }, "Multicol test");
    111 </script>