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