tor-browser

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

vertical-align-interpolation.html (2006B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>vertical-align interpolation</title>
      4 <link rel="help" href="https://www.w3.org/TR/CSS2/visudet.html#propdef-vertical-align">
      5 <meta name="assert" content="vertical-align supports animation">
      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  vertical-align: 100px;
     14 }
     15 .target {
     16  width: 100px;
     17  height: 100px;
     18  background-color: black;
     19  display: inline-block;
     20  vertical-align: 10px;
     21 }
     22 .expected {
     23  background-color: green;
     24 }
     25 </style>
     26 
     27 <body>
     28 <script>
     29 test_interpolation({
     30  property: 'vertical-align',
     31  from: neutralKeyframe,
     32  to: '40px',
     33 }, [
     34  {at: -0.5, expect: '-5px'},
     35  {at: 0, expect: '10px'},
     36  {at: 0.3, expect: '19px'},
     37  {at: 0.6, expect: '28px'},
     38  {at: 1, expect: '40px'},
     39  {at: 1.5, expect: '55px'},
     40 ]);
     41 
     42 test_no_interpolation({
     43  property: 'vertical-align',
     44  from: 'initial',
     45  to: '40px',
     46 });
     47 
     48 test_interpolation({
     49  property: 'vertical-align',
     50  from: 'inherit',
     51  to: '40px',
     52 }, [
     53  {at: -0.5, expect: '130px'},
     54  {at: 0, expect: '100px'},
     55  {at: 0.3, expect: '82px'},
     56  {at: 0.6, expect: '64px'},
     57  {at: 1, expect: '40px'},
     58  {at: 1.5, expect: '10px'},
     59 ]);
     60 
     61 test_no_interpolation({
     62  property: 'vertical-align',
     63  from: 'unset',
     64  to: '40px',
     65 });
     66 
     67 test_interpolation({
     68  property: 'vertical-align',
     69  from: '0px',
     70  to: '100px'
     71 }, [
     72  {at: -0.5, expect: '-50px'},
     73  {at: 0, expect: '0px'},
     74  {at: 0.3, expect: '30px'},
     75  {at: 0.6, expect: '60px'},
     76  {at: 1, expect: '100px'},
     77  {at: 1.5, expect: '150px'}
     78 ]);
     79 
     80 test_interpolation({
     81  property: 'vertical-align',
     82  from: '40px',
     83  to: '40%'
     84 }, [
     85  {at: -0.5, expect: 'calc(60px - 20%)'},
     86  {at: 0, expect: 'calc(40px + 0%)'},
     87  {at: 0.3, expect: 'calc(28px + 12%)'},
     88  {at: 1, expect: '40%'},
     89  {at: 1.5, expect: 'calc(-20px + 60%)'}
     90 ]);
     91 
     92 test_no_interpolation({
     93  property: 'vertical-align',
     94  from: 'super',
     95  to: '40%'
     96 });
     97 </script>
     98 </body>