tor-browser

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

mask-image-interpolation.html (2473B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>mask-image-interpolation</title>
      4 <link rel="help" href="https://drafts.fxtf.org/css-masking-1/#the-mask-image">
      5 <meta name="assert" content="mask-image 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  mask-image: url(../resources/blue-20.png);
     14 }
     15 .target {
     16  width: 20px;
     17  height: 20px;
     18  display: inline-block;
     19  background-color: black;
     20  mask-image: url(../resources/stripes-20.png);
     21 }
     22 .expected {
     23  background-color: green;
     24  margin-right: 10px;
     25 }
     26 </style>
     27 
     28 <body>
     29 <script>
     30 // neutral
     31 test_no_interpolation({
     32  property: 'mask-image',
     33  from: neutralKeyframe,
     34  to: 'url(../resources/green-20.png)',
     35 });
     36 
     37 // initial
     38 test_no_interpolation({
     39  property: 'mask-image',
     40  from: 'initial',
     41  to: 'url(../resources/green-20.png)',
     42 });
     43 
     44 // inherit
     45 test_no_interpolation({
     46  property: 'mask-image',
     47  from: 'inherit',
     48  to: 'url(../resources/green-20.png)',
     49 });
     50 
     51 // unset
     52 test_no_interpolation({
     53  property: 'mask-image',
     54  from: 'unset',
     55  to: 'url(../resources/stripes-20.png)',
     56 });
     57 
     58 // Image to image
     59 test_no_interpolation({
     60  property: 'mask-image',
     61  from: 'url(../resources/stripes-20.png)',
     62  to: 'url(../resources/blue-20.png)',
     63 });
     64 
     65 //Image to gradient
     66 test_no_interpolation({
     67  property: 'mask-image',
     68  from: 'url(../resources/stripes-20.png)',
     69  to: 'linear-gradient(45deg, blue, transparent)'
     70 });
     71 
     72 // Keyword to image
     73 test_no_interpolation({
     74  property: 'mask-image',
     75  from: 'none',
     76  to: 'url(../resources/green-20.png)',
     77 });
     78 
     79 // Multiple to multiple
     80 var fromA = 'url(../resources/stripes-20.png)';
     81 var fromB = 'linear-gradient(-45deg, blue, transparent)';
     82 var toA = 'url(../resources/blue-20.png)';
     83 var toB = 'url(../resources/stripes-20.png)';
     84 var from = fromA + ', ' + fromB;
     85 var to = toA + ', ' + toB;
     86 test_no_interpolation({
     87  property: 'mask-image',
     88  from: from,
     89  to: to,
     90 });
     91 
     92 // Single to multiple
     93 from = 'url(../resources/blue-20.png)';
     94 toA = 'url(../resources/stripes-20.png)';
     95 toB = 'url(../resources/blue-20.png)';
     96 to = toA + ', ' + toB;
     97 test_no_interpolation({
     98  property: 'mask-image',
     99  from: from,
    100  to: to,
    101 });
    102 
    103 // Multiple mismatched types
    104 test_no_interpolation({
    105  property: 'mask-image',
    106  from: 'url(../resources/blue-20.png), none',
    107  to: 'url(../resources/stripes-20.png), url(../resources/blue-20.png)',
    108 });
    109 </script>
    110 </body>