tor-browser

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

mask-invalidation-1a.html (2336B)

      1 <!DOCTYPE html>
      2 <html class="reftest-wait">
      3  <head>
      4    <meta charset="utf-8">
      5    <title>CSS Masking: mask invalidation.</title>
      6    <style type="text/css">
      7      div.outer {
      8        background-color: purple;
      9        position: absolute;
     10        margin: 1px 2px 3px 4px;
     11        border: solid purple;
     12        width: 40px;
     13        height: 20px;
     14      }
     15 
     16      div.mask {
     17        mask-size: 100% 100%;
     18        mask-origin: border-box;
     19        mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg"><rect x="0" y="0"  width="100%" height="50%" fill="blue" fill-opacity="1"/><rect x="0" y="50%" width="100%" height="50%" fill="blue" fill-opacity="0"/></svg>');
     20      }
     21 
     22      #d1 {
     23        top: 10px;
     24        left: 10px;
     25        mask-clip: padding-box;
     26        border-width: 10px;
     27        padding: 0px;
     28      }
     29 
     30      #d2 {
     31        top: 10px;
     32        left: 110px;
     33        mask-clip: padding-box;
     34        border-width: 0px;
     35        padding: 10px;
     36      }
     37 
     38      #d3 {
     39        top: 15px;
     40        left: 215px;
     41        mask-clip: content-box;
     42        border-width: 10px;
     43        padding: 0px;
     44      }
     45    </style>
     46  </head>
     47  <body>
     48    <div id="d1" class="outer mask"></div>
     49    <div id="d2" class="outer mask"></div>
     50    <div id="d3" class="outer mask"></div>
     51    <script type="text/javascript">
     52      function invalidateMaskedElements()
     53      {
     54        // Shrink border area, thicken padding area. Keep ths size of this
     55        // division unchanged.
     56        document.getElementById("d1").style.borderWidth = "5px";
     57        document.getElementById("d1").style.padding = "5px";
     58 
     59        // Shrink padding area, thicken border area. Keep ths size of this
     60        // division unchanged.
     61        document.getElementById("d2").style.borderWidth = "5px";
     62        document.getElementById("d2").style.padding = "5px";
     63 
     64        // Shrink border area, thicken content area. Keep ths size of this
     65        // division unchanged.
     66        document.getElementById("d3").style.width = "50px";
     67        document.getElementById("d3").style.height = "30px";
     68        document.getElementById("d3").style.borderWidth = "0px";
     69 
     70        document.documentElement.removeAttribute("class");
     71      }
     72 
     73      document.addEventListener("MozReftestInvalidate",
     74                                invalidateMaskedElements);
     75    </script>
     76  </body>
     77 </html>