background-position-subpixel-at-border.tentative.html (3132B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Backgrounds: Subpixel positions adjacent to the borders</title> 5 <link rel="author" title="Stephen Chenney" href="mailto:schenney@chromium.org"> 6 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-position"> 7 <link rel="match" href="reference/background-position-subpixel-at-border-ref.tentative.html"> 8 <style> 9 #no-repeat-y-bottom { 10 position: absolute; 11 top: 200.5px; 12 left: 8px; 13 width: 150px; 14 height: 37.5px; 15 border-width: 0px 0px 1.25px; 16 border-style: solid; 17 border-color: rgba(0,0,0,0.5); 18 border-bottom-color: transparent; 19 box-sizing: border-box; 20 background-color: lightgrey; 21 background-image: url("resources/green50x1.png"); 22 background-position: bottom -1.25px left 0px; 23 background-repeat: repeat-x; 24 padding: 2.5px 2.5px 1.25px 2.5px; 25 } 26 #no-repeat-y-top { 27 position: absolute; 28 top: 160.25px; 29 left: 8px; 30 width: 150px; 31 height: 37.5px; 32 border-width: 1.25px 0px 0px 0px; 33 border-style: solid; 34 border-color: rgba(0,0,0,0.5); 35 border-top-color: transparent; 36 box-sizing: border-box; 37 background-color: lightgrey; 38 background-image: url("resources/green50x1.png"); 39 background-position: top -1.25px left 0px; 40 background-repeat: repeat-x; 41 padding: 1.25px 2.5px 2.5px 2.5px; 42 } 43 #no-repeat-x-right { 44 position: absolute; 45 top: 8px; 46 left: 200.5px; 47 width: 37.5px; 48 height: 150px; 49 border-width: 0px 1.25px 0px 0px; 50 border-style: solid; 51 border-color: rgba(0,0,0,0.5); 52 border-right-color: transparent; 53 box-sizing: border-box; 54 background-color: lightgrey; 55 background-image: url("resources/green1x50.png"); 56 background-position: right -1.25px top 0px; 57 background-repeat: repeat-y; 58 padding: 2.5px 1.25px 2.5px 2.5px; 59 } 60 #no-repeat-x-left { 61 position: absolute; 62 top: 8px; 63 left: 160.25px; 64 width: 37.5px; 65 height: 150px; 66 border-width: 0px 0px 0px 1.25px; 67 border-style: solid; 68 border-color: rgba(0,0,0,0.5); 69 border-left-color: transparent; 70 box-sizing: border-box; 71 background-color: lightgrey; 72 background-image: url("resources/green1x50.png"); 73 background-position: left -1.25px top 0px; 74 background-repeat: repeat-y; 75 padding: 2.5px 2.5px 2.5px 1.25px; 76 } 77 </style> 78 </head> 79 <body> 80 <div id="no-repeat-y-top"> 81 </div> 82 <div id="no-repeat-y-bottom"> 83 </div> 84 <div id="no-repeat-x-right"> 85 </div> 86 <div id="no-repeat-x-left"> 87 </div> 88 </body> 89 </html>