tor-browser

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

clip-interpolation.html (2811B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>clip interpolation</title>
      4 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#clip-property">
      5 <meta name="assert" content="clip 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 .container {
     13  width: 80px;
     14  height: 80px;
     15  background: black;
     16  display: inline-block;
     17  padding: 5px;
     18 }
     19 
     20 .container:nth-child(2n) {
     21  background: green;
     22 }
     23 
     24 .parent {
     25  clip: rect(100px, 0px, 100px, 0px);
     26 }
     27 
     28 .target {
     29  width: 80px;
     30  height: 80px;
     31  display: inline-block;
     32  position: absolute;
     33  background: white;
     34  clip: rect(0px, 100px, 0px, 100px);
     35 }
     36 </style>
     37 
     38 <body>
     39 <template id="target-template">
     40 <div class="container"><div class="target"></div></div>
     41 </template>
     42 <script>
     43 test_interpolation({
     44  property: 'clip',
     45  from: neutralKeyframe,
     46  to: 'rect(20px, 20px, 20px, 20px)',
     47 }, [
     48  {at: -1, expect: 'rect(-20px 180px -20px 180px)'},
     49  {at: 0, expect: 'rect(0px 100px 0px 100px)'},
     50  {at: 0.25, expect: 'rect(5px 80px 5px 80px)'},
     51  {at: 0.75, expect: 'rect(15px 40px 15px 40px)'},
     52  {at: 1, expect: 'rect(20px 20px 20px 20px)'},
     53  {at: 2, expect: 'rect(40px -60px 40px -60px)'},
     54 ]);
     55 
     56 test_no_interpolation({
     57  property: 'clip',
     58  from: 'initial',
     59  to: 'rect(20px, 20px, 20px, 20px)',
     60 });
     61 
     62 test_interpolation({
     63  property: 'clip',
     64  from: 'inherit',
     65  to: 'rect(20px, 20px, 20px, 20px)',
     66 }, [
     67  {at: -1, expect: 'rect(180px -20px 180px -20px)'},
     68  {at: 0, expect: 'rect(100px 0px 100px 0px)'},
     69  {at: 0.25, expect: 'rect(80px 5px 80px 5px)'},
     70  {at: 0.75, expect: 'rect(40px 15px 40px 15px)'},
     71  {at: 1, expect: 'rect(20px 20px 20px 20px)'},
     72  {at: 2, expect: 'rect(-60px 40px -60px 40px)'},
     73 ]);
     74 
     75 test_no_interpolation({
     76  property: 'clip',
     77  from: 'unset',
     78  to: 'rect(20px, 20px, 20px, 20px)',
     79 });
     80 
     81 test_interpolation({
     82  property: 'clip',
     83  from: 'rect(0px, 75px, 80px, 10px)',
     84  to: 'rect(0px, 100px, 90px, 5px)'
     85 }, [
     86  {at: -1, expect: 'rect(0px, 50px, 70px, 15px)'},
     87  {at: 0, expect: 'rect(0px, 75px, 80px, 10px)'},
     88  {at: 0.25, expect: 'rect(0px, 81.25px, 82.5px, 8.75px)'},
     89  {at: 0.75, expect: 'rect(0px, 93.75px, 87.5px, 6.25px)'},
     90  {at: 1, expect: 'rect(0px, 100px, 90px, 5px)'},
     91  {at: 2, expect: 'rect(0px, 125px, 100px, 0px)'},
     92 ]);
     93 
     94 test_no_interpolation({
     95  property: 'clip',
     96  from: 'rect(auto, auto, auto, 10px)',
     97  to: 'rect(20px, 50px, 50px, auto)'
     98 });
     99 
    100 test_no_interpolation({
    101  property: 'clip',
    102  from: 'rect(auto, 0px, auto, 10px)',
    103  to: 'rect(auto, 50px, 50px, auto)'
    104 });
    105 
    106 test_no_interpolation({
    107  property: 'clip',
    108  from: 'auto',
    109  to: 'rect(0px, 50px, 50px, 0px)'
    110 });
    111 
    112 test_no_interpolation({
    113  property: 'clip',
    114  from: 'rect(0px, 50px, 50px, 0px)',
    115  to: 'auto'
    116 });
    117 </script>