tor-browser

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

shape-margin-interpolation.html (1885B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>shape-margin interpolation</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-shapes/#shape-margin-property">
      5 <meta name="assert" content="shape-margin 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  shape-margin: 30px;
     14 }
     15 .target {
     16  shape-margin: 10px;
     17 }
     18 </style>
     19 
     20 <body></body>
     21 
     22 <script>
     23 test_interpolation({
     24  property: 'shape-margin',
     25  from: neutralKeyframe,
     26  to: '20px',
     27 }, [
     28  {at: -0.3, expect: '7px'},
     29  {at: 0, expect: '10px'},
     30  {at: 0.3, expect: '13px'},
     31  {at: 0.6, expect: '16px'},
     32  {at: 1, expect: '20px'},
     33  {at: 1.5, expect: '25px'},
     34 ]);
     35 
     36 test_interpolation({
     37  property: 'shape-margin',
     38  from: 'initial',
     39  to: '20px',
     40 }, [
     41  {at: -0.3, expect: '0px'},
     42  {at: 0, expect: '0px'},
     43  {at: 0.3, expect: '6px'},
     44  {at: 0.6, expect: '12px'},
     45  {at: 1, expect: '20px'},
     46  {at: 1.5, expect: '30px'},
     47 ]);
     48 
     49 test_interpolation({
     50  property: 'shape-margin',
     51  from: 'inherit',
     52  to: '20px',
     53 }, [
     54  {at: -0.3, expect: '33px'},
     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_interpolation({
     63  property: 'shape-margin',
     64  from: 'unset',
     65  to: '20px',
     66 }, [
     67  {at: -0.3, expect: '0px'},
     68  {at: 0, expect: '0px'},
     69  {at: 0.3, expect: '6px'},
     70  {at: 0.6, expect: '12px'},
     71  {at: 1, expect: '20px'},
     72  {at: 1.5, expect: '30px'},
     73 ]);
     74 
     75 test_interpolation({
     76  property: 'shape-margin',
     77  from: '0px',
     78  to: '100px'
     79 }, [
     80  {at: -0.3, expect: '0px'}, // CSS shape-margin can't be negative.
     81  {at: 0, expect: '0px'},
     82  {at: 0.3, expect: '30px'},
     83  {at: 0.6, expect: '60px'},
     84  {at: 1, expect: '100px'},
     85  {at: 1.5, expect: '150px'},
     86 ]);
     87 </script>