Thu, 15 Jan 2015 15:55:04 +0100
Back out 97036ab72558 which inappropriately compared turds to third parties.
michael@0 | 1 | <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" |
michael@0 | 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
michael@0 | 3 | <html lang="en-US"> |
michael@0 | 4 | <head> |
michael@0 | 5 | <title>Table background tests</title> |
michael@0 | 6 | <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
michael@0 | 7 | <meta http-equiv="Content-Style-Type" content="text/css"> |
michael@0 | 8 | <style type="text/css"> |
michael@0 | 9 | |
michael@0 | 10 | html, body { margin: 0; padding: 0; border: 0; font-size: 16px; } |
michael@0 | 11 | body { padding: 15px; } |
michael@0 | 12 | |
michael@0 | 13 | .o { opacity: 0.5; } |
michael@0 | 14 | |
michael@0 | 15 | /* |
michael@0 | 16 | table { |
michael@0 | 17 | margin: 0px 3px 2px 4px; |
michael@0 | 18 | border-width: 4px 2px 8px 6px; |
michael@0 | 19 | |
michael@0 | 20 | height is 97px: |
michael@0 | 21 | (2px of border outside height) |
michael@0 | 22 | extra border width for top row: 0 |
michael@0 | 23 | cell * 5: == 19px * 5 == 95px |
michael@0 | 24 | border-top: 2px; |
michael@0 | 25 | padding-top: 1px; |
michael@0 | 26 | height: 10px; |
michael@0 | 27 | padding-bottom: 4px; |
michael@0 | 28 | border-bottom: 2px; |
michael@0 | 29 | extra border width for top row: 2px |
michael@0 | 30 | (4px of border outside height) |
michael@0 | 31 | |
michael@0 | 32 | width is 287px: |
michael@0 | 33 | (3px of border outside width) |
michael@0 | 34 | extra border width for left column: 2px |
michael@0 | 35 | cell * 5: == 57px * 5 == 285px |
michael@0 | 36 | border-left: 1px; |
michael@0 | 37 | padding-left: 3px; |
michael@0 | 38 | width: 50px; |
michael@0 | 39 | padding-right: 2px; |
michael@0 | 40 | border-right: 1px; |
michael@0 | 41 | (1px of border outside width) |
michael@0 | 42 | */ |
michael@0 | 43 | |
michael@0 | 44 | div { width: 171px; height: 97px; margin: 2px 61px 8px 66px; } |
michael@0 | 45 | div.color { background-color: aqua; } |
michael@0 | 46 | |
michael@0 | 47 | div.imagetl, div.imagebr { |
michael@0 | 48 | background-image: url(repeatable-diagonal-gradient-with-ticks.png); |
michael@0 | 49 | } |
michael@0 | 50 | |
michael@0 | 51 | div.imagetl { background-position: 0 0; } |
michael@0 | 52 | div.imagebr { background-position: 171px 97px; } |
michael@0 | 53 | |
michael@0 | 54 | </style> |
michael@0 | 55 | </head> |
michael@0 | 56 | <body> |
michael@0 | 57 | |
michael@0 | 58 | <div class="color o"></div> |
michael@0 | 59 | <div class="imagetl o"></div> |
michael@0 | 60 | <div class="imagebr"></div> |
michael@0 | 61 | |
michael@0 | 62 | </body> |
michael@0 | 63 | </html> |