Webkit background image wrapping bug
| <?xml version="1.0" encoding="UTF-8"?> | |
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> | |
| <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> | |
| <head> | |
| <title>Webkit background image wrapping bug</title> | |
| <meta http-equiv="content-type" content="text/html; charset=utf-8" /> | |
| </head> | |
| <body> | |
| <br/> | |
| 50x40px div. background-image - 40x1 px, 37 top pixels transparent, 3 bottom pixes are red, green and blue from top to bottom. Followed by 50x40px div with background-color #888:<br/><br/> | |
| <div style="height: 40px; width: 50px; background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAoCAYAAAA/tpB3AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AkBBzkbnSohMwAAABVJREFUCNdjYBiq4D8U/WdgYPj/HwAqngX7pm+hDQAAAABJRU5ErkJggg==); background-repeat: repeat-x"></div> | |
| <div style="background-color: #888; height: 40px; width: 50px;"></div> | |
| <br/><br/> | |
| 50x40px div. background-image - 41x1 px, 37 top pixels transparent, 4 bottom pixes are red, green, blue and transparent from top to bottom. Followed by 50x40px div with background-color #888:<br/><br/> | |
| <div style="height: 40px; width: 50px; background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAApCAYAAAD06kPSAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AkBCAc5AtM8lwAAABpJREFUCNdjYBiq4D8U/WdgYPj/n4GBgYEBAEiFBfvr6TBeAAAAAElFTkSuQmCC); background-repeat: repeat-x; overflow: hidden;"></div> | |
| <div style="background-color: #888; height: 40px; width: 50px;"></div> | |
| <br/><br/> | |
| 50x40px div. background-image - 42x1 px, 37 top pixels transparent, 5 bottom pixes are red, green, blue, blue and transparent from top to bottom. Followed by 50x40px div with background-color #888:<br/><br/> | |
| <div style="height: 40px; width: 50px; background-image: url(data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAqCAYAAAByfjF8AAAABmJLR0QA7wBbAKGS/7leAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3AkBCgAmwx5zywAAABhJREFUCNdjYBiq4D8U/WdgYPj/nwkuDgBmgAX91T9F3wAAAABJRU5ErkJggg==); background-repeat: repeat-x; overflow: hidden;"></div> | |
| <div style="background-color: #888; height: 40px; width: 50px;"></div> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment