tor-browser

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

interpolate-size-width-interpolation.html (2778B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>width interpolation with interpolate-size: allow-keywords</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-width">
      5 <link rel="help" href="https://drafts.csswg.org/css-values-5/#interpolate-size">
      6 
      7 <script src="/resources/testharness.js"></script>
      8 <script src="/resources/testharnessreport.js"></script>
      9 <script src="/css/support/interpolation-testcommon.js"></script>
     10 
     11 <style>
     12 :root {
     13  interpolate-size: allow-keywords;
     14 }
     15 .parent {
     16  width: 150px;
     17  overflow: visible;
     18 }
     19 .target {
     20  width: 50px;
     21  height: 10px;
     22 }
     23 .target::before {
     24  display: block;
     25  content: "";
     26  width: 100px;
     27  height: 50px;
     28 }
     29 </style>
     30 
     31 <body>
     32  <template id="target-template">
     33    <div class="container">
     34      <div class="target"></div>
     35    </div>
     36  </template>
     37 </body>
     38 
     39 <script>
     40 
     41 test_interpolation({
     42  property: 'width',
     43  from: 'initial', /* 150px */
     44  to: '50px',
     45 }, [
     46  {at: -0.3, expect: '180px'},
     47  {at: 0, expect: '150px'},
     48  {at: 0.3, expect: '120px'},
     49  {at: 0.6, expect: '90px'},
     50  {at: 1, expect: '50px'},
     51  {at: 1.5, expect: '0px'}
     52 ]);
     53 
     54 test_interpolation({
     55  property: 'width',
     56  from: 'unset', /* 150px */
     57  to: '50px',
     58 }, [
     59  {at: -0.3, expect: '180px'},
     60  {at: 0, expect: '150px'},
     61  {at: 0.3, expect: '120px'},
     62  {at: 0.6, expect: '90px'},
     63  {at: 1, expect: '50px'},
     64  {at: 1.5, expect: '0px'}
     65 ]);
     66 
     67 test_interpolation({
     68  property: 'width',
     69  from: 'auto', /* 150px */
     70  to: '50px',
     71 }, [
     72  {at: -0.3, expect: '180px'},
     73  {at: 0, expect: '150px'},
     74  {at: 0.3, expect: '120px'},
     75  {at: 0.6, expect: '90px'},
     76  {at: 1, expect: '50px'},
     77  {at: 1.5, expect: '0px'}
     78 ]);
     79 
     80 test_no_interpolation({
     81  property: 'width',
     82  from: 'auto',
     83  to: 'fit-content',
     84 });
     85 
     86 test_no_interpolation({
     87  property: 'width',
     88  from: 'stretch',
     89  to: 'auto',
     90 });
     91 
     92 test_interpolation({
     93  property: 'width',
     94  from: '200px',
     95  to: 'fit-content', /* 100px */
     96 }, [
     97  {at: -0.3, expect: '230px'},
     98  {at: 0, expect: '200px'},
     99  {at: 0.3, expect: '170px'},
    100  {at: 0.6, expect: '140px'},
    101  {at: 1, expect: '100px'},
    102  {at: 1.5, expect: '50px'}
    103 ]);
    104 
    105 test_no_interpolation({
    106  property: 'width',
    107  from: 'max-content',
    108  to: 'min-content',
    109 });
    110 
    111 test_interpolation({
    112  property: 'width',
    113  from: 'max-content', /* 100px */
    114  to: neutralKeyframe, /* 50px */
    115 }, [
    116  {at: -0.3, expect: '115px'},
    117  {at: 0, expect: '100px'},
    118  {at: 0.3, expect: '85px'},
    119  {at: 0.6, expect: '70px'},
    120  {at: 1, expect: '50px'},
    121  {at: 1.5, expect: '25px'}
    122 ]);
    123 
    124 test_interpolation({
    125  property: 'width',
    126  from: neutralKeyframe, /* 50px */
    127  to: 'min-content', /* 100px */
    128 }, [
    129  {at: -0.3, expect: '35px'},
    130  {at: 0, expect: '50px'},
    131  {at: 0.3, expect: '65px'},
    132  {at: 0.6, expect: '80px'},
    133  {at: 1, expect: '100px'},
    134  {at: 1.5, expect: '125px'}
    135 ]);
    136 
    137 </script>
    138 </body>