ortho-htb-alongside-vrl-floats-006-ref.xht (3040B)
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="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="background-color: fuchsia;"> </td> 74 <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" /> 75 <!-- 76 The image says: 77 Test passes if the orange rectangle 78 is below the blue rectangle. 79 --></td> 80 </tr> 81 82 </table> 83 84 85 86 <table id="second-table-middle"> 87 88 <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col> 89 90 <tr> 91 <td></td><td style="background-color: fuchsia;"></td><td style="background-color: olive;"> </td><td style="background-color: orange;"> </td><td style="background-color: fuchsia;"> </td><td></td> 92 </tr> 93 94 </table> 95 96 97 98 <table id="third-table-middle"> 99 100 <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col> 101 102 <tr> 103 <td></td><td style="background-color: fuchsia;"></td><td></td><td style="background-color: orange;"> </td><td style="background-color: fuchsia;"> </td><td></td> 104 </tr> 105 106 </table> 107 108 109 110 <table id="fourth-table-bottom"> 111 112 <col></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="100"></col><col width="324"></col> 113 114 <tr> 115 <td></td><td></td><td></td><td></td><td></td> 116 </tr> 117 118 </table> 119 120 </body> 121 </html>