tor-browser

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

contain-intrinsic-size-033.html (3268B)

      1 <!DOCTYPE html>
      2 <meta charset="utf-8">
      3 <title>CIS + content-visibility:hidden and contain:size</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-sizing-4/#explicit-intrinsic-inner-size">
      5 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#size-containment">
      6 <link rel="help" href="https://drafts.csswg.org/css-contain-2/#using-cv-hidden">
      7 <meta name="assert"
      8    content="Tests that CIS + content-visibility:hidden should be same to CIS + contain:size" />
      9 
     10 <style>
     11    .test {
     12        width: max-content;
     13        height: max-content;
     14        border: 1px solid;
     15    }
     16 
     17    .test::before {
     18        content: "";
     19        display: block;
     20        width: 320px;
     21        height: 240px;
     22    }
     23 
     24    .contain-size {
     25        contain: size;
     26    }
     27 
     28    .ci-width {
     29        contain-intrinsic-width: 10px;
     30    }
     31 
     32    .ci-height {
     33        contain-intrinsic-height: 20px;
     34    }
     35 
     36    .ci-both {
     37        contain-intrinsic-size: 10px 20px;
     38    }
     39 
     40    .skip-contents .test {
     41        content-visibility: hidden;
     42    }
     43 
     44 </style>
     45 
     46 <div id="log"></div>
     47 
     48 <div id="tests">
     49 
     50    <div></div>
     51    <div class="scroll"></div>
     52    <div class="columns"></div>
     53    <div class="grid"></div>
     54    <div class="flex"></div>
     55    <fieldset></fieldset>
     56    <img src="resources/dice.png">
     57    <svg></svg>
     58    <canvas></canvas>
     59    <iframe></iframe>
     60    <video></video>
     61    <button></button>
     62    <select>
     63        <option>Lorem ipsum</option>
     64    </select>
     65    <select multiple>
     66        <option>Lorem ipsum</option>
     67    </select>
     68 
     69 </div>
     70 
     71 <script src="/resources/testharness.js"></script>
     72 <script src="/resources/testharnessreport.js"></script>
     73 <script src="/resources/check-layout-th.js"></script>
     74 <script>
     75 addEventListener("load", async function() {
     76  const wrapper = document.getElementById("tests");
     77  const tests = new DocumentFragment();
     78  for (let template of wrapper.children) {
     79    template.classList.add("test");
     80 
     81    const containIntrinsicWidthTest = template.cloneNode(true);
     82    const containIntrinsicHeightTest = template.cloneNode(true);
     83    const containIntrinsicSizeTest = template.cloneNode(true);
     84    containIntrinsicWidthTest.classList.add("ci-width");
     85    containIntrinsicHeightTest.classList.add("ci-height");
     86    containIntrinsicSizeTest.classList.add("ci-both");
     87 
     88    template.classList.add("contain-size");
     89    const containSizeWidth = template.clientWidth;
     90    const containSizeHeight = template.clientHeight;
     91    template.classList.add("ci-both");
     92    const CISWidth = template.clientWidth;;
     93    const CISHeight = template.clientHeight;
     94 
     95    containIntrinsicWidthTest.dataset.expectedClientWidth = CISWidth;
     96    containIntrinsicWidthTest.dataset.expectedClientHeight = containSizeHeight;
     97    containIntrinsicHeightTest.dataset.expectedClientWidth = containSizeWidth;
     98    containIntrinsicHeightTest.dataset.expectedClientHeight = CISHeight;
     99    containIntrinsicSizeTest.dataset.expectedClientWidth = CISWidth;
    100    containIntrinsicSizeTest.dataset.expectedClientHeight = CISHeight;
    101 
    102    tests.append(containIntrinsicWidthTest, containIntrinsicHeightTest, containIntrinsicSizeTest);
    103  }
    104  wrapper.textContent = "";
    105  wrapper.appendChild(tests);
    106 
    107  wrapper.classList.add("skip-contents");
    108  await new Promise(requestAnimationFrame);
    109  checkLayout(".test");
    110 });
    111 </script>