layout/reftests/table-background/border-collapse-table-ref.html

Fri, 16 Jan 2015 18:13:44 +0100

author
Michael Schloh von Bennewitz <michael@schloh.com>
date
Fri, 16 Jan 2015 18:13:44 +0100
branch
TOR_BUG_9701
changeset 14
925c144e1f1f
permissions
-rw-r--r--

Integrate suggestion from review to improve consistency with existing code.

     1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
     2 	"http://www.w3.org/TR/html4/strict.dtd">
     3 <html lang="en-US">
     4 <head>
     5 	<title>Table background tests</title>
     6 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     7 	<meta http-equiv="Content-Style-Type" content="text/css">
     8 	<style type="text/css">
    10 	html, body { margin: 0; padding: 0; border: 0; font-size: 16px; }
    11 	body { padding: 15px; }
    13 	/*
    14 	table { 
    15 		margin: 0px 3px 2px 4px;
    16 		border-width: 4px 2px 8px 6px;
    18 		height is 97px:
    19 		  (2px of border outside height)
    20 		  extra border width for top row: 0
    21 		  cell * 5: == 19px * 5 == 95px
    22 		    border-top: 2px;
    23 		    padding-top: 1px;
    24 		    height: 10px;
    25 		    padding-bottom: 4px;
    26 		    border-bottom: 2px;
    27 		  extra border width for top row: 2px
    28 		  (4px of border outside height)
    30 		width is 287px:
    31 		  (3px of border outside width)
    32 		  extra border width for left column: 2px
    33 		  cell * 5: == 57px * 5 == 285px
    34 		    border-left: 1px;
    35 		    padding-left: 3px;
    36 		    width: 50px;
    37 		    padding-right: 2px;
    38 		    border-right: 1px;
    39 		  (1px of border outside width)
    40     */
    42 	div { width: 291px; height: 103px; margin: 0px 3px 2px 4px; }
    43 	div.color { background-color: aqua; }
    45 	div.imagetl, div.imagebr {
    46 		background-image: url(repeatable-diagonal-gradient-with-ticks.png);
    47 	}
    49 	div.imagetl { background-position: 3px 2px;}
    50 	div.imagebr { background-position: 290px 99px;}
    52 	</style>
    53 </head>
    54 <body>
    56 <div class="color"></div>
    57 <div class="imagetl"></div>
    58 <div class="imagebr"></div>
    60 </body>
    61 </html>

mercurial