tor-browser

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

contain-intrinsic-size-032.html (2388B)

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