| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> |
| |
| <html xmlns="http://www.w3.org/1999/xhtml"> |
| |
| <head> |
| |
| <title>CSS Writing Modes Test: positioning of an orthogonal (horizontal-tb) block alongside vertical-rl floats</title> |
| |
| <link rel="author" title="GĂ©rard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> |
| <link rel="bookmark" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1283721" title="Bug 1283721: Incorrect positioning of orthogonal (horizontal-tb) block alongside vertical-rl floats" /> |
| <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" /> |
| <link rel="match" href="ortho-htb-alongside-vrl-floats-002-ref.xht" /> |
| |
| <!-- |
| The 'horizontal-tb' equivalent of this test is |
| http://www.gtalbot.org/BugzillaSection/Bug1283721-ortho-htb-alongside-vrl-floats-006htb.html |
| --> |
| |
| <meta content="image" name="flags" /> |
| <meta content="This test checks that non-positioned block boxes created after the float box flow vertically as if the float did not exist. In this test, the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient (logical width) space." name="assert" /> |
| <meta name="DC.date.created" content="2016-07-04T09:54:03+11:00" scheme="W3CDTF" /> |
| <meta name="DC.date.modified" content="2016-07-21T09:54:03+11:00" scheme="W3CDTF" /> |
| |
| <style type="text/css"><![CDATA[ |
| html |
| { |
| writing-mode: vertical-rl; |
| } |
| |
| /* |
| minimum used height of the document root element is 176px; |
| less than 176px will make the reference file no longer reliable. |
| |
| 36px : image intrinsic height |
| + |
| 4px : descender space below baseline |
| ========= |
| 40px : 1st table with 'height: 25%' |
| multiplied by |
| 4 |
| ========= |
| 160px : height of the 3 tables |
| + |
| 8px : body's margin-top |
| + |
| 8px : body's margin-bottom |
| ========= |
| 176px |
| */ |
| |
| div |
| { |
| width: 100px; |
| } |
| |
| div#first-blue-float |
| { |
| background-color: blue; |
| float: left; |
| height: 25%; |
| } |
| |
| div#second-olive-float-with-clear |
| { |
| background-color: olive; |
| clear: left; |
| float: left; |
| height: 50%; |
| } |
| |
| div#orange-horiz-tb |
| { |
| background-color: orange; |
| height: 75%; |
| writing-mode: horizontal-tb; |
| } |
| ]]></style> |
| |
| </head> |
| |
| <body> |
| |
| <p><img src="support/ortho-htb-alongside-vrl-floats-002-exp-res.png" width="300" height="36" alt="Image download support must be enabled" /></p> |
| |
| <!-- |
| The image says: |
| Test passes if the orange rectangle |
| is below the blue rectangle. |
| --> |
| |
| <div id="first-blue-float"> </div> |
| |
| <div id="second-olive-float-with-clear"> </div> |
| |
| <div id="orange-horiz-tb"> </div> |
| |
| </body> |
| </html> |