tor-browser

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

flex-item-compressible-001.html (4340B)

      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 row 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: flex;
     24    width: 300px;
     25    height: 40px;
     26    border: 1px solid black;
     27    margin-bottom: 5px;
     28  }
     29  .spacer {
     30    /* Just to occupy some space, so that the flex algorithm will try to shrink
     31       the <input> element below its percentage specified width. */
     32    flex: 0 0 200px;
     33    background: lightgray;
     34  }
     35  input {
     36    font: 20px/1 Ahem;
     37    background: lightblue;
     38    /* Get rid of native theming and UA default styles. */
     39    appearance: none;
     40    border: 0;
     41    padding: 0;
     42    margin: 0;
     43  }
     44  .test1 {
     45    width: 100%;
     46  }
     47  .test2 {
     48    width: calc(100%);
     49  }
     50  .test3 {
     51    width: calc(140px + 100%);
     52  }
     53  </style>
     54 
     55  <body onload="checkLayout('.flexbox')">
     56    <p>Test1: "width: 100%"</p>
     57    <div class="flexbox">
     58      <div class="spacer"></div>
     59      <input type="text"
     60             class="test1" data-expected-width="100">
     61    </div>
     62 
     63    <div class="flexbox">
     64      <div class="spacer"></div>
     65      <input type="range"
     66             class="test1" data-expected-width="100">
     67    </div>
     68 
     69    <div class="flexbox">
     70      <div class="spacer"></div>
     71      <input type="button" value="XXXXXXX"
     72             class="test1" data-expected-width="140">
     73    </div>
     74 
     75    <div class="flexbox">
     76      <div class="spacer"></div>
     77      <input type="submit" value="XXXXXXX"
     78             class="test1" data-expected-width="140">
     79    </div>
     80 
     81    <div class="flexbox">
     82      <div class="spacer"></div>
     83      <input type="reset" value="XXXXXXX"
     84             class="test1" data-expected-width="140">
     85    </div>
     86 
     87    <p>Test2: "width: calc(100%)"</p>
     88    <div class="flexbox">
     89      <div class="spacer"></div>
     90      <input type="text"
     91             class="test2" data-expected-width="100">
     92    </div>
     93 
     94    <div class="flexbox">
     95      <div class="spacer"></div>
     96      <input type="range"
     97             class="test2" data-expected-width="100">
     98    </div>
     99 
    100    <div class="flexbox">
    101      <div class="spacer"></div>
    102      <input type="button" value="XXXXXXX"
    103             class="test2" data-expected-width="140">
    104    </div>
    105 
    106    <div class="flexbox">
    107      <div class="spacer"></div>
    108      <input type="submit" value="XXXXXXX"
    109             class="test2" data-expected-width="140">
    110    </div>
    111 
    112    <div class="flexbox">
    113      <div class="spacer"></div>
    114      <input type="reset" value="XXXXXXX"
    115             class="test2" data-expected-width="140">
    116    </div>
    117 
    118    <p>Test3: "width: calc(140px + 100%)"</p>
    119    <div class="flexbox">
    120      <div class="spacer"></div>
    121      <input type="text"
    122             class="test3" data-expected-width="140">
    123    </div>
    124 
    125    <div class="flexbox">
    126      <div class="spacer"></div>
    127      <input type="range"
    128             class="test3" data-expected-width="140">
    129    </div>
    130 
    131    <div class="flexbox">
    132      <div class="spacer"></div>
    133      <input type="button" value="XXXXXXX"
    134             class="test3" data-expected-width="140">
    135    </div>
    136 
    137    <div class="flexbox">
    138      <div class="spacer"></div>
    139      <input type="submit" value="XXXXXXX"
    140             class="test3" data-expected-width="140">
    141    </div>
    142 
    143    <div class="flexbox">
    144      <div class="spacer"></div>
    145      <input type="reset" value="XXXXXXX"
    146             class="test3" data-expected-width="140">
    147    </div>
    148  </body>
    149 </html>