background-image-print.html (1765B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>test-case.html</title> 6 <link rel="match" href="background-image-print-ref.html"> 7 <link rel="help" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1769429"> 8 <meta name="fuzzy" content="maxDifference=0-3;totalPixels=0-400"> 9 <style> 10 :root { 11 print-color-adjust: exact; 12 } 13 body { 14 font-family: century; 15 font-weight: bold; 16 color: black; 17 print-color-adjust: exact; 18 } 19 .tile { 20 width: 16px; 21 height: 16px; 22 background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGAAAABgCAYAAADimHc4AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH5gcMEDohgdlcwAAAAL1JREFUeNrt29ENgCAMRdFi2Ns6eR1CkxfjuQtAegJfsGZmKtmq7PKT3cBRAgBAAAAIAAABACAAAAQAgAAAEAAAAgBAAAAIAAABACAAAAQAgAAA0OP2+vkAwt8DnABXEAABACAAAAQAgAAAEAAAAgBAAAAIAAABACAAAAQAgAAAEAAAAgBAb7Tryj6Q7+7sBE4nwBUkAAAEAIAAABAAAAIAQAAACAAAAQAgAAAEAIAAABAAAAIAQAAACMDnuwGcQwlEUW+eJgAAAABJRU5ErkJggg=="); 23 background-repeat: no-repeat; 24 } 25 .white { background-position: -2px -2px } 26 .magenta { background-position: -34px -2px } 27 .lime { background-position: -66px -2px } 28 .cyan { background-position: -2px -34px } 29 .blue { background-position: -34px -34px } 30 .red { background-position: -66px -34px } 31 .green { background-position: -2px -66px } 32 .gray { background-position: -34px -66px } 33 .yellow { background-position: -66px -66px } 34 </style> 35 </head> 36 <body> 37 <div class="tile white"></div> 38 <div class="tile magenta"></div> 39 <div class="tile lime"></div> 40 <div class="tile cyan"></div> 41 <div class="tile blue"></div> 42 <div class="tile red"></div> 43 <div class="tile green"></div> 44 <div class="tile gray"></div> 45 <div class="tile yellow"></div> 46 </body> 47 </html>