| OLD | NEW |
| (Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 .covers { |
| 6 /*data URI of full green 97x43 PNG*/ |
| 7 background: red url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGEAAAA
rCAIAAADnp3H+AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREiYUszPbTwAAABl0RVh0Q29
tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABOSURBVGje7dAxAQAACAOgaXKj28DbAyJQmXBrBY4
cOXLkyJEjHDly5MiRI0eOcOTIkSNHjhzhyJEjR44cOXKEI0eOHDly5AhHjhw5emMB9PAA1iv0hcsAAAA
ASUVORK5CYII=") repeat; |
| 8 border: 5px solid gray; |
| 9 margin: 10px; |
| 10 } |
| 11 .containsWide { |
| 12 /*data URI of full green 110x49 PNG*/ |
| 13 background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAG4AA
AAxCAIAAAC04QuOAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREx4TOwqYIAAAABl0RVh0Q
29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAABXSURBVGje7dAxAQAACAOgaXKjW8LDAyJQmXCiF
ahUqRKVKlWqRKVKlahUqVIlKlWqRKVKlSpRqVIlKlWqVIlKlSpRqVKlSlSqVIlKlSpVolKlSlSqfGkBD
toA4vMqI7YAAAAASUVORK5CYII=") repeat-y; |
| 14 border: 5px solid gray; |
| 15 margin: 10px; |
| 16 } |
| 17 .containsTall { |
| 18 /*data URI of full green 50x22 PNG*/ |
| 19 background: white url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAA
AAWCAIAAAANYFjGAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AMREx8PNhD1LgAAABl0RVh0Q
29tbWVudABDcmVhdGVkIHdpdGggR0lNUFeBDhcAAAAqSURBVEjH7c4xAQAACAOgaXKjW8LDAxJQmTzUi
ZaWlpaWlpaWlpaW1pUFpt8ArH8g1RcAAAAASUVORK5CYII=") repeat-x; |
| 20 border: 5px solid gray; |
| 21 margin: 10px; |
| 22 } |
| 23 |
| 24 </style> |
| 25 </head> |
| 26 <body> |
| 27 <div class="covers" style="width: 120px; height: 50px;"></div> |
| 28 <div class="covers" style="width: 50px; height: 120px;"></div> |
| 29 <div class="containsWide" style="width: 150px; height: 49px;"></div> |
| 30 <div class="containsTall" style="width: 50px; height: 50px;"></div> |
| 31 </body> |
| OLD | NEW |