tor-browser

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

flex-item-compressible-002.html (4432B)

      1 <!DOCTYPE html>
      2 <!--
      3     Any copyright is dedicated to the Public Domain.
      4     http://creativecommons.org/publicdomain/zero/1.0/
      5 -->
      6 <html>
      7  <meta charset="utf-8">
      8  <title>CSS Flexbox Test: Testing automatic minimun size of &lt;input&gt; flex items in a column flex container</title>
      9  <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com">
     10  <link rel="author" title="Mozilla" href="https://www.mozilla.org/">
     11  <link rel="help" href="https://drafts.csswg.org/css-flexbox-1/#min-size-auto">
     12  <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#replaced-percentage-min-contribution">
     13  <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#min-content-zero">
     14  <link rel="stylesheet" href="/fonts/ahem.css">
     15  <meta name="assert" content="This test verifies that an <input> flex item should resolve its percentage part of main size to zero when computing specified size suggestion.">
     16 
     17  <script src="/resources/testharness.js"></script>
     18  <script src="/resources/testharnessreport.js"></script>
     19  <script src="/resources/check-layout-th.js"></script>
     20 
     21  <style>
     22  .flexbox {
     23    display: inline-flex;
     24    flex-direction: column;
     25    width: 40px;
     26    height: 300px;
     27    border: 1px solid black;
     28    margin-bottom: 40px;
     29  }
     30  .spacer {
     31    /* Just to occupy some space, so that the flex algorithm will try to shrink
     32       the <input> element below its percentage specified height. */
     33    flex: 0 0 200px;
     34    background: lightgray;
     35  }
     36  input {
     37    writing-mode: vertical-lr;
     38    font: 20px/1 Ahem;
     39    background: lightblue;
     40    /* Get rid of native theming and UA default styles. */
     41    appearance: none;
     42    border: 0;
     43    padding: 0;
     44    margin: 0;
     45  }
     46  .test1 {
     47    height: 100%;
     48  }
     49  .test2 {
     50    height: calc(100%);
     51  }
     52  .test3 {
     53    height: calc(140px + 100%);
     54  }
     55  </style>
     56 
     57  <body onload="checkLayout('.flexbox')">
     58    <p>Test1: "height: 100%"</p>
     59    <div class="flexbox">
     60      <div class="spacer"></div>
     61      <input type="text"
     62             class="test1" data-expected-height="100">
     63    </div>
     64 
     65    <div class="flexbox">
     66      <div class="spacer"></div>
     67      <input type="range"
     68             class="test1" data-expected-height="100">
     69    </div>
     70 
     71    <div class="flexbox">
     72      <div class="spacer"></div>
     73      <input type="button" value="XXXXXXX"
     74             class="test1" data-expected-height="140">
     75    </div>
     76 
     77    <div class="flexbox">
     78      <div class="spacer"></div>
     79      <input type="submit" value="XXXXXXX"
     80             class="test1" data-expected-height="140">
     81    </div>
     82 
     83    <div class="flexbox">
     84      <div class="spacer"></div>
     85      <input type="reset" value="XXXXXXX"
     86             class="test1" data-expected-height="140">
     87    </div>
     88 
     89    <p>Test2: "height: calc(100%)"</p>
     90    <div class="flexbox">
     91      <div class="spacer"></div>
     92      <input type="text"
     93             class="test2" data-expected-height="100">
     94    </div>
     95 
     96    <div class="flexbox">
     97      <div class="spacer"></div>
     98      <input type="range"
     99             class="test2" data-expected-height="100">
    100    </div>
    101 
    102    <div class="flexbox">
    103      <div class="spacer"></div>
    104      <input type="button" value="XXXXXXX"
    105             class="test2" data-expected-height="140">
    106    </div>
    107 
    108    <div class="flexbox">
    109      <div class="spacer"></div>
    110      <input type="submit" value="XXXXXXX"
    111             class="test2" data-expected-height="140">
    112    </div>
    113 
    114    <div class="flexbox">
    115      <div class="spacer"></div>
    116      <input type="reset" value="XXXXXXX"
    117             class="test2" data-expected-height="140">
    118    </div>
    119 
    120    <p>Test3: "height: calc(140px + 100%)"</p>
    121    <div class="flexbox">
    122      <div class="spacer"></div>
    123      <input type="text"
    124             class="test3" data-expected-height="140">
    125    </div>
    126 
    127    <div class="flexbox">
    128      <div class="spacer"></div>
    129      <input type="range"
    130             class="test3" data-expected-height="140">
    131    </div>
    132 
    133    <div class="flexbox">
    134      <div class="spacer"></div>
    135      <input type="button" value="XXXXXXX"
    136             class="test3" data-expected-height="140">
    137    </div>
    138 
    139    <div class="flexbox">
    140      <div class="spacer"></div>
    141      <input type="submit" value="XXXXXXX"
    142             class="test3" data-expected-height="140">
    143    </div>
    144 
    145    <div class="flexbox">
    146      <div class="spacer"></div>
    147      <input type="reset" value="XXXXXXX"
    148             class="test3" data-expected-height="140">
    149    </div>
    150  </body>
    151 </html>