tor-browser

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

min-width-interpolation.html (2166B)

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