s72-border-spacing-002.xht (4984B)
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 5 <head> 6 7 <title>CSS Writing Modes Test: border-spacing - first value is specified and non-zero in 'vertical-rl' table</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-mapping" title="7.2 Dimension Mapping" /> 11 <link rel="help" href="http://www.w3.org/TR/2011/REC-CSS2-20110607/tables.html#separated-borders" title="17.6.1 The separated borders model" /> 12 <link rel="match" href="s72-border-spacing-002-ref.xht" /> 13 14 <!-- 15 To be replaced with 16 <link rel="match" href="border-spacing-wm-002-ref.xht" /> 17 --> 18 19 <meta content="ahem" name="flags" /> 20 <meta content="This test checks that first value of 'border-spacing' represents, from top to bottom, a) spacing between logical table right padding (physical table top padding) and rightmost cells and b) inter-column spacing and c) spacing between leftmost cells and logical table left padding (physical table bottom padding)." name="assert" /> 21 22 <link type="text/css" rel="stylesheet" href="support/ahem.css" /> 23 24 <style type="text/css"><![CDATA[ 25 table 26 { 27 border-spacing: 0.5em 0em; /* computes to logical horizontal border-spacing: 10px */ 28 font: 1.25em/1 Ahem; /* computes to 20px/20px */ 29 padding: 1.25em 0em; /* computes to padding-top: 25px and padding-bottom: 25px */ 30 -ah-writing-mode: vertical-rl; 31 -webkit-writing-mode: vertical-rl; 32 writing-mode: tb-rl; /* IE11 */ 33 writing-mode: vertical-rl; 34 } 35 36 td 37 { 38 height: 0.5em; 39 padding: 0em; 40 width: 1em; 41 } 42 43 /* 44 45 0px width of nth row 20px TOP 46 | | 47 =================================== 0x (0em) ||| 48 | table padding-top 25px (1.25em) | ||| 49 | with red background=color | \ ||| / 50 | with red background=color | \ / 51 | with red background=color | \ / 52 | with red background=color | v 53 =================================== 25px (1.25em) 54 |logical righ border-spacing: 10px| 55 | with red background=color | 56 =================================== 35px (1.75em) 57 | height of 1st td 10px (0.5em) | ||| 58 | with red background=color | ||| 59 =================================== 45px (2.25em) \ ||| / 60 |inter-column spacing 10px (0.5em)| \ / 61 | with red background=color | \ / 62 =================================== 55px (2.75em) v 63 | height of 2nd td 10px (0.5em) | 64 | with red background=color | 65 =================================== 65px (3.25em) 66 |logical left border-spacing: 10px| ||| 67 | with red background=color | ||| 68 =================================== 75px (3.75em) \ ||| / 69 |tble padding-bottom 25px (1.25em)| \ / 70 | with red background=color | \ / 71 | with red background=color | v 72 | with red background=color | 73 | with red background=color | 74 =================================== 100px (5em) BOTTOM 75 76 */ 77 78 div#reference-overlapping-green 79 { 80 background-color: green; 81 height: 6.25em; 82 position: absolute; 83 width: 6.25em; 84 } 85 86 div#reference-overlapped-red 87 { 88 background-color: red; 89 height: 6.25em; 90 position: absolute; 91 width: 6.25em; 92 z-index: -1; 93 } 94 95 table#test-overlapped-red 96 { 97 background-color: red; 98 } 99 100 table#test-overlapping-green 101 { 102 background-color: green; 103 } 104 ]]></style> 105 </head> 106 107 <body> 108 109 <p>Test passes if there is a filled green rectangle and <strong>no red</strong>.</p> 110 111 <div id="reference-overlapping-green"></div> 112 113 <table id="test-overlapped-red"> 114 115 <tr><td></td><td></td></tr> 116 117 <tr><td></td><td></td></tr> 118 119 <tr><td></td><td></td></tr> 120 121 <tr><td></td><td></td></tr> 122 123 <tr><td></td><td></td></tr> 124 125 </table> 126 127 <div id="reference-overlapped-red"></div> 128 129 <table id="test-overlapping-green"> 130 131 <tr><td></td><td></td></tr> 132 133 <tr><td></td><td></td></tr> 134 135 <tr><td></td><td></td></tr> 136 137 <tr><td></td><td></td></tr> 138 139 <tr><td></td><td></td></tr> 140 141 </table> 142 143 </body> 144 </html>