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