tor-browser

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

floats.https.html (1621B)

      1 <!DOCTYPE html>
      2 <html class=reftest-wait>
      3 <link rel="help" href="https://drafts.css-houdini.org/css-layout-api/#interaction-sizing">
      4 <link rel="match" href="floats-ref.html">
      5 <meta name="assert" content="This test checks that if the layout() is a float, the flow layout respects the intrinsicSizes function." />
      6 
      7 <style>
      8 .test {
      9  background: red;
     10  border: solid 2px;
     11 }
     12 
     13 @supports (display: layout(test-layout)) {
     14  .test {
     15    display: layout(test-layout);
     16    background: green;
     17  }
     18 }
     19 
     20 .container-1 {
     21  height: 100px;
     22  width: 300px;
     23 }
     24 
     25 .container-2 {
     26  height: 50px;
     27  width: 50px;
     28 }
     29 
     30 .container-3 {
     31  height: 80px;
     32  width: 80px;
     33 }
     34 
     35 .left {
     36  float: left;
     37  writing-mode: horizontal-tb;
     38 }
     39 
     40 .right {
     41  float: right;
     42  writing-mode: vertical-rl;
     43 }
     44 
     45 </style>
     46 <script src="/common/reftest-wait.js"></script>
     47 <script src="/common/worklet-reftest.js"></script>
     48 
     49 
     50 <div class="container-1">
     51  <div class="left test" style="height: 100px"></div>
     52  <div class="right test" style="width: 100px"></div>
     53 </div>
     54 
     55 <div class="container-2">
     56  <div class="left test" style="height: 25px"></div>
     57  <div class="right test" style="width: 25px"></div>
     58 </div>
     59 
     60 <div class="container-3">
     61  <div class="left test" style="height: 25px"></div>
     62  <div class="right test" style="width: 25px"></div>
     63 </div>
     64 
     65 
     66 <script id="code" type="text/worklet">
     67 registerLayout('test-layout', class {
     68  async intrinsicSizes() {
     69    return { maxContentSize: 100, minContentSize: 50 };
     70  }
     71  async layout() {}
     72 });
     73 </script>
     74 
     75 <script>
     76 importWorkletAndTerminateTestAfterAsyncPaint(CSS.layoutWorklet, document.getElementById('code').textContent);
     77 </script>
     78 </html>