tor-browser

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

max-width-interpolation.html (2195B)

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