tor-browser

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

contain-intrinsic-size-009.html (2000B)

      1 <!doctype html>
      2 <meta charset="utf-8">
      3 <title>CSS contain-intrinsic-size: select multiple</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="contain-intrinsic-size sizes select multiple">
      7 
      8 <style>
      9 .cis-both {
     10  contain-intrinsic-size: 55px 66px;
     11 }
     12 
     13 .cis-width {
     14  contain-intrinsic-size: 55px none;
     15 }
     16 
     17 .cis-height {
     18  contain-intrinsic-size: none 66px;
     19 }
     20 
     21 select {
     22  padding: 0;
     23 }
     24 
     25 .test {
     26  contain: size;
     27  background: lightblue;
     28  border: 1px solid blue;
     29  margin: 5px;
     30 }
     31 </style>
     32 
     33 <!-- To measure the size of an empty <select> without size containment -->
     34 <select id="reference" multiple size="2"></select>
     35 
     36 <select multiple class="test cis-both"
     37 data-expected-client-width="55" data-expected-client-height="66"></select>
     38 <select multiple class="test cis-width"
     39 data-expected-client-width="55"></select>
     40 <select multiple class="test cis-height"
     41 data-expected-client-height="66"></select>
     42 
     43 <select multiple size="2" class="test cis-width"
     44 data-expected-client-width="55"></select>
     45 <select multiple size="2" class="test cis-height"
     46 data-expected-client-height="66"></select>
     47 
     48 <select multiple size="10" class="test cis-width"
     49 data-expected-client-width="55"></select>
     50 <select multiple size="10" class="test cis-height"
     51 data-expected-client-height="66"></select>
     52 
     53 <script src="/resources/testharness.js"></script>
     54 <script src="/resources/testharnessreport.js"></script>
     55 <script src="/resources/check-layout-th.js"></script>
     56 <script>
     57 const reference = document.getElementById("reference");
     58 const normalWidth = reference.clientWidth;
     59 for (let test of document.querySelectorAll(".test.cis-width")) {
     60  reference.size = test.size || 4;
     61  test.dataset.expectedClientHeight = reference.clientHeight;
     62 }
     63 for (let test of document.querySelectorAll(".test.cis-height")) {
     64  test.dataset.expectedClientWidth = normalWidth;
     65 }
     66 
     67 checkLayout('.test');
     68 </script>