float-shrink-to-fit-vrl-vlr-016.xht (3414B)
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: 'float' and 'shrink-to-fit' logical width (16 sub-tests)</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/#vertical-layout" title="7.1 Principles of Layout in Vertical Writing Modes" /> 11 <link rel="match" href="../reference/ref-filled-green-100px-square.xht" /> 12 13 <meta content="ahem" name="flags" /> 14 <meta content="This test checks that 'shrink-to-fit' rule (CSS2.1, §10.3.5) is applied onto logical width in vertical writing-modes. This test thoroughly checks systematically the 16 combinations of 'writing-mode: vertical-rl', 'writing-mode: vertical-lr', with 'float: left', with 'float: right' and with left and/or right border(s). Not tested here is 'padding-left' and 'padding-right'." name="assert" /> 15 16 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" /> 17 <style type="text/css"><![CDATA[ 18 div.test 19 { 20 background-color: red; 21 font: 100px/1 Ahem; /* computes to 100px/100px */ 22 } 23 24 div.floated-right 25 { 26 float: right; 27 } 28 29 div.floated-left 30 { 31 float: left; 32 } 33 34 div.vrl 35 { 36 writing-mode: vertical-rl; 37 } 38 39 div.vlr 40 { 41 writing-mode: vertical-lr; 42 } 43 44 div.left-border 45 { 46 border-left: red solid 1em; 47 } 48 49 div.right-border 50 { 51 border-right: red solid 1em; 52 } 53 54 div#reference-overlapped-green 55 { 56 background-color: green; 57 height: 100px; 58 position: relative; 59 width: 100px; 60 z-index: -1; 61 } 62 ]]></style> 63 </head> 64 65 <body> 66 67 <p>Test passes if there is a filled green square and <strong>no red</strong>.</p> 68 69 <div class="test floated-right vlr"> 70 <div class="left-border right-border"></div> 71 </div> 72 73 <div class="test floated-right vlr"> 74 <div class="left-border right-border"></div> 75 </div> 76 77 <div class="test floated-right vrl"> 78 <div class="left-border right-border"></div> 79 </div> 80 81 <div class="test floated-right vrl"> 82 <div class="left-border right-border"></div> 83 </div> 84 85 <div class="test floated-right vlr"> 86 <div class="left-border"></div> 87 </div> 88 89 <div class="test floated-right vlr"> 90 <div class="right-border"></div> 91 </div> 92 93 <div class="test floated-right vrl"> 94 <div class="left-border"></div> 95 </div> 96 97 <div class="test floated-right vrl"> 98 <div class="right-border"></div> 99 </div> 100 101 <div class="test floated-left vlr"> 102 <div class="left-border right-border"></div> 103 </div> 104 105 <div class="test floated-left vlr"> 106 <div class="left-border right-border"></div> 107 </div> 108 109 <div class="test floated-left vrl"> 110 <div class="left-border right-border"></div> 111 </div> 112 113 <div class="test floated-left vrl"> 114 <div class="left-border right-border"></div> 115 </div> 116 117 <div class="test floated-left vlr"> 118 <div class="left-border"></div> 119 </div> 120 121 <div class="test floated-left vlr"> 122 <div class="right-border"></div> 123 </div> 124 125 <div class="test floated-left vrl"> 126 <div class="left-border"></div> 127 </div> 128 129 <div class="test floated-left vrl"> 130 <div class="right-border"></div> 131 </div> 132 133 <div id="reference-overlapped-green"></div> 134 135 </body> 136 </html>