tor-browser

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

contain-intrinsic-size-031.html (2479B)

      1 <!DOCTYPE html>
      2 <meta charset="utf8">
      3 <title>CSS contain-intrinsic-size: multi-column containers</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-multicol-1/#the-multi-column-model">
      7 <style>
      8 .test {
      9  contain: size;
     10  display: inline-block;
     11  padding: 0;
     12  border: 5px solid;
     13  column-gap: 5px;
     14 }
     15 .columns-60px-1 {
     16  columns: 60px 1;
     17 }
     18 .columns-120px-1 {
     19  columns: 120px 1;
     20 }
     21 .columns-60px-2 {
     22  columns: 60px 2;
     23 }
     24 .cis-none {
     25  contain-intrinsic-size: none none;
     26 }
     27 .cis-height {
     28  contain-intrinsic-size: none 50px;
     29 }
     30 .cis-width {
     31  contain-intrinsic-size: 100px none;
     32 }
     33 .cis-both {
     34  contain-intrinsic-size: 100px 50px;
     35 }
     36 </style>
     37 
     38 <div id="log"></div>
     39 
     40 <div class="test columns-60px-1 cis-none"
     41     data-expected-client-width="60" data-expected-client-height="0"></div>
     42 <div class="test columns-60px-1 cis-height"
     43     data-expected-client-width="60" data-expected-client-height="50"></div>
     44 <div class="test columns-60px-1 cis-width"
     45     data-expected-client-width="100" data-expected-client-height="0"></div>
     46 <div class="test columns-60px-1 cis-both"
     47     data-expected-client-width="100" data-expected-client-height="50"></div>
     48 
     49 <div class="test columns-120px-1 cis-none"
     50     data-expected-client-width="120" data-expected-client-height="0"></div>
     51 <div class="test columns-120px-1 cis-height"
     52     data-expected-client-width="120" data-expected-client-height="50"></div>
     53 <div class="test columns-120px-1 cis-width"
     54     data-expected-client-width="100" data-expected-client-height="0"></div>
     55 <div class="test columns-120px-1 cis-both"
     56     data-expected-client-width="100" data-expected-client-height="50"></div>
     57 
     58 <div class="test columns-60px-2 cis-none"
     59     data-expected-client-width="125" data-expected-client-height="0"></div>
     60 <div class="test columns-60px-2 cis-height"
     61     data-expected-client-width="125" data-expected-client-height="50"></div>
     62 <div class="test columns-60px-2 cis-width"
     63     data-expected-client-width="100" data-expected-client-height="0"></div>
     64 <div class="test columns-60px-2 cis-both"
     65     data-expected-client-width="100" data-expected-client-height="50"></div>
     66 
     67 <script src="/resources/testharness.js"></script>
     68 <script src="/resources/testharnessreport.js"></script>
     69 <script src="/resources/check-layout-th.js"></script>
     70 <script>
     71 checkLayout(".test");
     72 </script>