tor-browser

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

clip-border-area.html (1272B)


      1 <!DOCTYPE html>
      2 <html>
      3 <head>
      4 <title>CSS Backgrounds Test:  background-clip:border-area</title>
      5 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-4/#background-clip">
      6 <link rel="match" href="clip-border-area-ref.html">
      7 <meta name="assert" content="border-area: The border area is filled with the background image">
      8 <meta name="fuzzy" content="maxDifference=0-130; totalPixels=0-1100">
      9 <style>
     10    .test {
     11        display: inline-block;
     12        margin: 20px;
     13        width: 300px;
     14        height: 150px;
     15        box-sizing: border-box;
     16        border: 50px solid transparent;
     17        background-clip: border-area;
     18        background-image: url(../resources/blue-100.png);
     19    }
     20 
     21    .rounded {
     22        border-radius: 40%;
     23    }
     24 
     25    .missing-border {
     26        border-right-style: hidden;
     27    }
     28 
     29    .double {
     30        border-style: double;
     31    }
     32 
     33    .inset {
     34        border-style: inset;
     35    }
     36 
     37    .complex {
     38        border-right-style: double;
     39        border-bottom-style: dashed;
     40        border-left-style: dotted;
     41    }
     42 </style>
     43 </head>
     44 <body>
     45 
     46 <div class="test"></div>
     47 <div class="test rounded"></div>
     48 <div class="test missing-border"></div>
     49 <div class="test double"></div>
     50 <div class="test inset"></div>
     51 <div class="test complex"></div>
     52 
     53 </body>
     54 </html>