srl-alongside-vrl-floats.html (1741B)
1 <!DOCTYPE html> 2 <html> 3 <title>CSS Writing Modes Test: positioning of a sideways-rl block alongside vertical-rl floats</title> 4 5 <link rel="author" title="Ting-Yu Lin" href="mailto:tlin@mozilla.com"> 6 <link rel="author" title="Mozilla" href="https://www.mozilla.org/"> 7 <link rel="help" href="https://drafts.csswg.org/css-writing-modes/#block-flow" title="3.2. Block Flow Direction: the writing-mode property"> 8 <link rel="match" href="srl-alongside-vrl-floats-ref.html"> 9 10 <!-- This test is adapted from Gérard Talbot's "ortho-htb-alongside-vrl-floats-014.xht" --> 11 12 <meta content="image" name="flags"> 13 <meta content="This test verifies that the orange block box, which creates a new block formatting context, should flow next to the earliest float that offers sufficient space in the inline-direction." name="assert"> 14 15 <style> 16 html { 17 writing-mode: vertical-rl; 18 } 19 20 div { 21 block-size: 100px; 22 } 23 24 div#first-olive-float { 25 background-color: olive; 26 float: left; 27 inline-size: 50%; 28 } 29 30 div#second-blue-float-with-clear { 31 background-color: blue; 32 clear: left; 33 float: left; 34 inline-size: 25%; 35 } 36 37 div#orange-bfc { 38 background-color: orange; 39 inline-size: 75%; 40 writing-mode: sideways-rl; /* Same block direction as <html> */ 41 } 42 </style> 43 44 <body> 45 <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> 46 <!-- 47 The image says: 48 Test passes if the orange rectangle 49 is below the blue rectangle. 50 --> 51 52 <div id="first-olive-float"> </div> 53 <div id="second-blue-float-with-clear"> </div> 54 <div id="orange-bfc"> </div> 55 </body> 56 </html>