tor-browser

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

background-position-y-interpolation.html (2056B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#background-position">
      4 <meta name="test" content="background-position-y supports animation">
      5 
      6 <script src="/resources/testharness.js"></script>
      7 <script src="/resources/testharnessreport.js"></script>
      8 <script src="/css/support/interpolation-testcommon.js"></script>
      9 
     10 <style>
     11 .parent {
     12  background-position-y: 60px;
     13 }
     14 
     15 .target {
     16  background-position-y: 40px;
     17 }
     18 </style>
     19 
     20 <body>
     21 <script>
     22 test_interpolation({
     23  property: 'background-position-y',
     24  from: neutralKeyframe,
     25  to: '80px',
     26 }, [
     27  {at: -0.25, expect: '30px'},
     28  {at: 0, expect:     '40px'},
     29  {at: 0.25, expect:  '50px'},
     30  {at: 0.5, expect:   '60px'},
     31  {at: 0.75, expect:  '70px'},
     32  {at: 1, expect:     '80px'},
     33  {at: 1.25, expect:  '90px'},
     34 ]);
     35 
     36 test_interpolation({
     37  property: 'background-position-y',
     38  from: 'initial',
     39  to: 'bottom',
     40 }, [
     41  {at: -0.25, expect: '-25%'},
     42  {at: 0, expect:     '0%'},
     43  {at: 0.25, expect:  '25%'},
     44  {at: 0.5, expect:   '50%'},
     45  {at: 0.75, expect:  '75%'},
     46  {at: 1, expect:     '100%'},
     47  {at: 1.25, expect:  '125%'},
     48 ]);
     49 
     50 test_interpolation({
     51  property: 'background-position-y',
     52  from: 'inherit',
     53  to: '80px',
     54 }, [
     55  {at: -0.25, expect: '55px'},
     56  {at: 0, expect:     '60px'},
     57  {at: 0.25, expect:  '65px'},
     58  {at: 0.5, expect:   '70px'},
     59  {at: 0.75, expect:  '75px'},
     60  {at: 1, expect:     '80px'},
     61  {at: 1.25, expect:  '85px'},
     62 ]);
     63 
     64 test_interpolation({
     65  property: 'background-position-y',
     66  from: '300px, 400px',
     67  to: '500px, 600px, 700px',
     68 }, [
     69  {at: -0.25, expect: '250px, 350px, 200px, 375px, 225px, 325px'},
     70  {at: 0, expect:     '300px, 400px, 300px, 400px, 300px, 400px'},
     71  {at: 0.25, expect:  '350px, 450px, 400px, 425px, 375px, 475px'},
     72  {at: 0.5, expect:   '400px, 500px, 500px, 450px, 450px, 550px'},
     73  {at: 0.75, expect:  '450px, 550px, 600px, 475px, 525px, 625px'},
     74  {at: 1, expect:     '500px, 600px, 700px, 500px, 600px, 700px'},
     75  {at: 1.25, expect:  '550px, 650px, 800px, 525px, 675px, 775px'},
     76 ]);
     77 </script>
     78 </body>