tor-browser

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

contain-intrinsic-size-029.html (1938B)

      1 <!DOCTYPE html>
      2 <meta charset="utf8">
      3 <title>CSS contain-intrinsic-size: button</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://drafts.csswg.org/css-contain-2/#containment-size">
      7 <style>
      8 .test {
      9  contain: size;
     10  padding: 0;
     11  border: 5px solid;
     12 }
     13 .test::before {
     14  content: '';
     15  display: block;
     16  width: 40px;
     17  height: 20px;
     18 }
     19 .cis-none {
     20  contain-intrinsic-size: none none;
     21 }
     22 .cis-height {
     23  contain-intrinsic-size: none 50px;
     24 }
     25 .cis-width {
     26  contain-intrinsic-size: 100px none;
     27 }
     28 .cis-both {
     29  contain-intrinsic-size: 100px 50px;
     30 }
     31 .min-size {
     32  min-width: 30px;
     33  min-height: 15px;
     34 }
     35 </style>
     36 <script src="/resources/testharness.js"></script>
     37 <script src="/resources/testharnessreport.js"></script>
     38 <script src="/resources/check-layout-th.js"></script>
     39 
     40 <body onload="checkLayout('.test')">
     41  <div id="log"></div>
     42 
     43  <button class="test cis-none"
     44       data-expected-client-width="0" data-expected-client-height="0"></button>
     45  <button class="test cis-height"
     46       data-expected-client-width="0" data-expected-client-height="50"></button>
     47  <button class="test cis-width"
     48       data-expected-client-width="100" data-expected-client-height="0"></button>
     49  <button class="test cis-both"
     50       data-expected-client-width="100" data-expected-client-height="50"></button>
     51 
     52  <button class="test cis-none min-size"
     53       data-expected-client-width="20" data-expected-client-height="5"></button>
     54  <button class="test cis-height min-size"
     55       data-expected-client-width="20" data-expected-client-height="50"></button>
     56  <button class="test cis-width min-size"
     57       data-expected-client-width="100" data-expected-client-height="5"></button>
     58  <button class="test cis-both min-size"
     59       data-expected-client-width="100" data-expected-client-height="50"></button>
     60 </body>