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>