layout/reftests/table-background/border-collapse-table-cell-ref.html@7e26c7da4463 (annotated)
layout/reftests/table-background/border-collapse-table-cell-ref.html
Wed, 31 Dec 2014 06:55:50 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Wed, 31 Dec 2014 06:55:50 +0100
- changeset 2
- 7e26c7da4463
- permissions
- -rw-r--r--
Added tag UPSTREAM_283F7C6 for changeset ca08bd8f51b2
| 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 | /* |
| michael@0 | 14 | table { |
| michael@0 | 15 | margin: 0px 3px 2px 4px; |
| michael@0 | 16 | border-width: 4px 2px 8px 6px; |
| michael@0 | 17 | |
| michael@0 | 18 | height is 97px: |
| michael@0 | 19 | (2px of border outside height) |
| michael@0 | 20 | extra border width for top row: 0 |
| michael@0 | 21 | cell * 5: == 19px * 5 == 95px |
| michael@0 | 22 | border-top: 2px; |
| michael@0 | 23 | padding-top: 1px; |
| michael@0 | 24 | height: 10px; |
| michael@0 | 25 | padding-bottom: 4px; |
| michael@0 | 26 | border-bottom: 2px; |
| michael@0 | 27 | extra border width for top row: 2px |
| michael@0 | 28 | (4px of border outside height) |
| michael@0 | 29 | |
| michael@0 | 30 | width is 287px: |
| michael@0 | 31 | (3px of border outside width) |
| michael@0 | 32 | extra border width for left column: 2px |
| michael@0 | 33 | cell * 5: == 57px * 5 == 285px |
| michael@0 | 34 | border-left: 1px; |
| michael@0 | 35 | padding-left: 3px; |
| michael@0 | 36 | width: 50px; |
| michael@0 | 37 | padding-right: 2px; |
| michael@0 | 38 | border-right: 1px; |
| michael@0 | 39 | (1px of border outside width) |
| michael@0 | 40 | */ |
| michael@0 | 41 | |
| michael@0 | 42 | div { width: 57px; height: 19px; margin: 40px 118px 86px 123px; } |
| michael@0 | 43 | div.color { background-color: aqua; } |
| michael@0 | 44 | |
| michael@0 | 45 | div.imagetl, div.imagebr { |
| michael@0 | 46 | background-image: url(repeatable-diagonal-gradient-with-ticks.png); |
| michael@0 | 47 | } |
| michael@0 | 48 | |
| michael@0 | 49 | div.imagetl { background-position: 1px 2px; } |
| michael@0 | 50 | div.imagebr { background-position: 56px 17px; } |
| michael@0 | 51 | |
| michael@0 | 52 | </style> |
| michael@0 | 53 | </head> |
| michael@0 | 54 | <body> |
| michael@0 | 55 | |
| michael@0 | 56 | <div class="color"></div> |
| michael@0 | 57 | <div class="imagetl"></div> |
| michael@0 | 58 | <div class="imagebr"></div> |
| michael@0 | 59 | |
| michael@0 | 60 | </body> |
| michael@0 | 61 | </html> |
