tor-browser

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

mask-border-source-interpolation.html (1932B)

      1 <!DOCTYPE html>
      2 <meta charset="UTF-8">
      3 <title>mask-border-source interpolation</title>
      4 <link rel="help" href="https://drafts.fxtf.org/css-masking/#propdef-mask-border-source">
      5 <link rel="author" title="Tim Nguyen" href="https://github.com/nt1m">
      6 <meta name="assert" content="mask-border-source has discrete animation">
      7 
      8 <script src="/resources/testharness.js"></script>
      9 <script src="/resources/testharnessreport.js"></script>
     10 <script src="/css/support/interpolation-testcommon.js"></script>
     11 
     12 <style>
     13 .parent {
     14  mask-border-source: url(../support/green.png);
     15 }
     16 .target {
     17  width: 50px;
     18  height: 50px;
     19  background-color: black;
     20  display: inline-block;
     21  border: 5px solid aqua;
     22  mask-border-source: url(../support/blue_color.png);
     23  mask-border-slice: 10%;
     24 }
     25 .expected {
     26  background-color: green;
     27  margin-right: 2px;
     28 }
     29 </style>
     30 
     31 <body></body>
     32 
     33 <script>
     34 // initial
     35 test_no_interpolation({
     36  property: 'mask-border-source',
     37  from: 'initial',
     38  to: 'url(../support/orange_color.png)',
     39 });
     40 
     41 // inherit
     42 test_no_interpolation({
     43  property: 'mask-border-source',
     44  from: 'inherit',
     45  to: 'url(../support/orange_color.png)',
     46 });
     47 
     48 // unset
     49 test_no_interpolation({
     50  property: 'mask-border-source',
     51  from: 'unset',
     52  to: 'url(../support/orange_color.png)',
     53 });
     54 
     55 // None to image
     56 test_no_interpolation({
     57  property: 'mask-border-source',
     58  from: 'none',
     59  to: 'url(../support/orange_color.png)',
     60 });
     61 
     62 // Image to image
     63 test_no_interpolation({
     64  property: 'mask-border-source',
     65  from: 'url(../support/aqua_color.png)',
     66  to: 'url(../support/orange_color.png)',
     67 });
     68 
     69 // Image to gradient
     70 test_no_interpolation({
     71  property: 'mask-border-source',
     72  from: 'url(../support/aqua_color.png)',
     73  to: 'linear-gradient(45deg, blue, orange)',
     74 });
     75 
     76 // Gradient to gradient
     77 test_no_interpolation({
     78  property: 'mask-border-source',
     79  from: 'linear-gradient(-45deg, red, yellow)',
     80  to: 'linear-gradient(45deg, blue, orange)',
     81 });
     82 </script>
     83 </body>