tor-browser

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

auto-015.html (2620B)

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