tor-browser

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

min-height-interpolation.html (2209B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>min-height interpolation</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-sizing-3/#propdef-min-height">
      5 <meta name="assert" content="min-height supports animation by computed value">
      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 .parent {
     13  min-height: 30px;
     14 }
     15 .target {
     16  width: 10px;
     17  height: 0px;
     18  background-color: black;
     19  display: inline-block;
     20  min-height: 10px;
     21 }
     22 .expected {
     23  background-color: green;
     24 }
     25 </style>
     26 
     27 <body></body>
     28 
     29 <script>
     30 test_interpolation({
     31  property: 'min-height',
     32  from: neutralKeyframe,
     33  to: '20px',
     34 }, [
     35  {at: -0.5, expect: '5px'},
     36  {at: 0, expect: '10px'},
     37  {at: 0.3, expect: '13px'},
     38  {at: 0.6, expect: '16px'},
     39  {at: 1, expect: '20px'},
     40  {at: 1.5, expect: '25px'},
     41 ]);
     42 
     43 test_no_interpolation({
     44  property: 'min-height',
     45  from: 'initial',
     46  to: '20px',
     47 });
     48 
     49 test_interpolation({
     50  property: 'min-height',
     51  from: 'inherit',
     52  to: '20px',
     53 }, [
     54  {at: -0.5, expect: '35px'},
     55  {at: 0, expect: '30px'},
     56  {at: 0.3, expect: '27px'},
     57  {at: 0.6, expect: '24px'},
     58  {at: 1, expect: '20px'},
     59  {at: 1.5, expect: '15px'},
     60 ]);
     61 
     62 test_no_interpolation({
     63  property: 'min-height',
     64  from: 'unset',
     65  to: '20px',
     66 });
     67 
     68 test_no_interpolation({
     69  property: 'min-height',
     70  from: 'auto',
     71  to: '20px',
     72 });
     73 
     74 test_interpolation({
     75  property: 'min-height',
     76  from: '0px',
     77  to: '100px',
     78 }, [
     79  {at: -0.5, expect: '0'}, // CSS min-height can't be negative.
     80  {at: 0, expect: '0'},
     81  {at: 0.3, expect: '30px'},
     82  {at: 0.6, expect: '60px'},
     83  {at: 1, expect: '100px'},
     84  {at: 1.5, expect: '150px'}
     85 ]);
     86 
     87 test_no_interpolation({
     88  property: 'min-height',
     89  from: 'auto',
     90  to: '0px',
     91 });
     92 
     93 test_no_interpolation({
     94  property: 'min-height',
     95  from: 'fit-content',
     96  to: 'min-content',
     97 });
     98 
     99 test_no_interpolation({
    100  property: 'min-height',
    101  from: 'max-content',
    102  to: 'stretch',
    103 });
    104 
    105 test_no_interpolation({
    106  property: 'min-height',
    107  from: 'fit-content',
    108  to: neutralKeyframe,
    109 });
    110 
    111 test_no_interpolation({
    112  property: 'min-height',
    113  from: neutralKeyframe,
    114  to: 'min-content',
    115 });
    116 
    117 </script>