sizing-orthog-htb-in-vlr-023.xht (3721B)
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: sizing of orthogonal 'horizontal-tb' block with 'auto' inline size inside definite-sized 'vertical-lr' containing block</title> 8 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" /> 10 <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" /> 11 <link rel="match" href="sizing-orthog-htb-in-vlr-023-ref.xht" /> 12 13 <meta name="DC.date.created" content="2016-12-20T09:54:03+11:00" scheme="W3CDTF" /> 14 <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" /> 15 16 <meta name="assert" content="In this test, the inline size of the orthogonal block is 'auto' and its containing block's block size is '400px'. Since the width of the containing block is definite in this test, then constrain is the width of such containing block which is, in this test, 400px. This test presumes that the initial containing block's width is greater than 400px. In this test, we assume that the 50 characters long word is wider than the div#sized-400px-vlr-containing-block. Therefore, min-content is greater than constraint." /> 17 18 <!-- 19 20 shrink-to-fit formula min(max-content, max(min-content, constraint)) 21 22 max-content inline size: narrowest inline size needed to fit its contents 23 if none of the soft wrap opportunities within the box were taken. Eg: 24 max-content of "I am a text sentence." is "I am a text sentence." 25 https://www.w3.org/TR/css-sizing-3/#max-content-inline-size 26 27 min-content inline size of the box: longest word in a sentence or longest non-breakable 28 inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence." 29 is "sentence." 30 https://www.w3.org/TR/css-sizing-3/#min-content-inline-size 31 32 contraint: min(available space, initial containing block's size) 33 34 available space: this is either a measurement of its containing block 35 (if that is definite) or an infinite size (when it is indefinite). 36 https://drafts.csswg.org/css-sizing-4/#available 37 38 - - - - - - - - - - - - - 39 40 Inside this batch of 24 sizing-orthog-htb-in-vlr tests: 41 001-012 : body has 100px margin-left and 100px margin-right 42 013-024 : body has no horizontal margins 43 44 Inside each sub-batch of 12 tests: 45 001-006: containing block's width is 'auto' therefore indefinite 46 007-012: containing block's width is 400px therefore definite 47 48 Inside each sub-sub-batch of 6 tests: 49 001-003: containing block has 1 sentence before and after 50 004-006: containing block has no sentence before and no sentence after 51 52 Inside each sub-sub-sub-batch of 3 tests: 53 001: orthogonal block's width is 'auto' 54 002: orthogonal block's width is 'auto' and its min-content 55 inline size (1 very long word) is wider than constraint 56 003: orthogonal block's width is 'auto' its max-content inline-size 57 is narrower than max(min-content, constraint) 58 59 --> 60 61 <style type="text/css"><![CDATA[ 62 html 63 { 64 writing-mode: vertical-lr; 65 } 66 67 body 68 { 69 font-size: 16px; 70 line-height: 1.25; /* therefore, each line box is 20px tall */ 71 margin-left: 0px; 72 margin-right: 0px; 73 } 74 75 div#sized-400px-vlr-containing-block 76 { 77 width: 400px; 78 } 79 80 div#ortho-block-htb 81 { 82 border: blue solid 3px; 83 width: auto; 84 writing-mode: horizontal-tb; 85 } 86 ]]></style> 87 88 </head> 89 90 <body> 91 92 <div id="sized-400px-vlr-containing-block"> 93 94 <div id="ortho-block-htb">01020304050607080910111213141516171819202122232425</div> 95 96 </div> 97 98 </body> 99 </html>