ortho-htb-alongside-vrl-floats-010-ref.xht (2838B)
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 Reftest Reference</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 11 <meta content="image" name="flags" /> 12 13 <style type="text/css"><![CDATA[ 14 html 15 { 16 height: 100%; 17 } 18 19 /* 20 minimum used height of the document root element is 176px; 21 less than 176px will make the reference file no longer reliable. 22 23 36px : img#pass-fail-conditions-sentence's intrinsic height 24 + 25 4px : descender space below baseline 26 ========= 27 40px : 1st table (height: 25%) 28 multiplied by 29 4 30 ========= 31 160px : height of the 3 tables 32 + 33 8px : body's margin-top 34 + 35 8px : body's margin-bottom 36 ========= 37 176px 38 */ 39 40 body 41 { 42 height: calc(100% - 16px); 43 } 44 45 table 46 { 47 border-spacing: 0px; 48 height: 25%; 49 margin: 0px; 50 table-layout: fixed; 51 width: 100%; 52 } 53 54 td 55 { 56 padding: 0px; 57 vertical-align: top; 58 } 59 ]]></style> 60 </head> 61 62 <body> 63 64 <table id="first-table-top"> 65 66 <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col> 67 68 <tr> 69 <td></td> 70 <td style="background-color: fuchsia;"> </td> 71 <td style="background-color: olive;"> </td> 72 <td style="background-color: blue;"> </td> 73 <td style="padding-left: 16px; padding-right: 8px;"><img id="pass-fail-conditions-sentence" src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" alt="Image download support must be enabled" /> 74 <!-- 75 The image says: 76 Test passes if the orange rectangle 77 is below the blue rectangle. 78 --></td> 79 </tr> 80 81 </table> 82 83 84 85 <table id="second-table-middle"> 86 87 <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col> 88 89 <tr> 90 <td></td> 91 <td style="background-color: fuchsia;"></td> 92 <td style="background-color: olive;"> </td> 93 <td style="background-color: orange;"> </td> 94 <td></td> 95 </tr> 96 97 </table> 98 99 100 101 <table id="third-table-middle"> 102 103 <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col> 104 105 <tr> 106 <td></td> 107 <td style="background-color: fuchsia;"></td> 108 <td></td> 109 <td style="background-color: orange;"> </td> 110 <td></td> 111 </tr> 112 113 </table> 114 115 116 117 <table id="fourth-table-bottom"> 118 119 <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col> 120 121 <tr> 122 <td></td><td></td><td></td><td></td> 123 </tr> 124 125 </table> 126 127 </body> 128 </html>