tor-browser

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

left-composition.html (2025B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>left composition</title>
      4 <link rel="help" href="https://drafts.csswg.org/css-position-3/#propdef-left">
      5 <meta name="assert" content="left support 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 <body>
     12 <script>
     13 test_composition({
     14  property: 'left',
     15  underlying: '50px',
     16  addFrom: '100px',
     17  addTo: '200px',
     18 }, [
     19  {at: -0.3, expect: '120px'},
     20  {at: 0, expect: '150px'},
     21  {at: 0.5, expect: '200px'},
     22  {at: 1, expect: '250px'},
     23  {at: 1.5, expect: '300px'},
     24 ]);
     25 
     26 test_composition({
     27  property: 'left',
     28  underlying: '100px',
     29  addFrom: '10px',
     30  addTo: '2px',
     31 }, [
     32  {at: -0.5, expect: '114px'},
     33  {at: 0, expect: '110px'},
     34  {at: 0.5, expect: '106px'},
     35  {at: 1, expect: '102px'},
     36  {at: 1.5, expect: '98px'},
     37 ]);
     38 
     39 test_composition({
     40  property: 'left',
     41  underlying: '10%',
     42  addFrom: '100px',
     43  addTo: '20%',
     44 }, [
     45  {at: -0.3, expect: 'calc(130px + 4%)'},
     46  {at: 0, expect: 'calc(100px + 10%)'},
     47  {at: 0.5, expect: 'calc(50px + 20%)'},
     48  {at: 1, expect: '30%'},
     49  {at: 1.5, expect: 'calc(-50px + 40%)'},
     50 ]);
     51 
     52 test_composition({
     53  property: 'left',
     54  underlying: '10%',
     55  addFrom: '100px',
     56  addTo: '-10%',
     57 }, [
     58  {at: -0.3, expect: 'calc(130px + 13%)'},
     59  {at: 0, expect: 'calc(100px + 10%)'},
     60  {at: 0.5, expect: 'calc(50px + 5%)'},
     61  {at: 1, expect: '0%'},
     62  {at: 1.5, expect: 'calc(-50px - 5%)'},
     63 ]);
     64 
     65 test_composition({
     66  property: 'left',
     67  underlying: '50px',
     68  addFrom: '100px',
     69  replaceTo: '200px',
     70 }, [
     71  {at: -0.3, expect: '135px'},
     72  {at: 0, expect: '150px'},
     73  {at: 0.5, expect: '175px'},
     74  {at: 1, expect: '200px'},
     75  {at: 1.5, expect: '225px'},
     76 ]);
     77 
     78 test_composition({
     79  property: 'left',
     80  underlying: '100px',
     81  addFrom: '100px',
     82  addTo: 'auto',
     83 }, [
     84  {at: -0.3, expect: '200px'},
     85  {at: 0, expect: '200px'},
     86  {at: 0.5, expect: 'auto'},
     87  {at: 1, expect: 'auto'},
     88  {at: 1.5, expect: 'auto'},
     89 ]);
     90 </script>
     91 </body>