OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x
html1/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 'vertical-lr' block with '
auto' inline size inside definite-sized 'horizontal-tb' containing block</title> |
| 8 |
| 9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB
ugsSection/css21testsuite/" /> |
| 10 <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#auto-multico
l" title="7.3.2. Auto-sizing Block Containers in Orthogonal Flows" /> |
| 11 <link rel="match" href="sizing-orthog-vlr-in-htb-022-ref.xht" /> |
| 12 |
| 13 <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDT
F" /> |
| 14 <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CD
TF" /> |
| 15 |
| 16 <meta name="flags" content="" /> |
| 17 <meta name="assert" content="In this test, the inline size of the orthogonal b
lock is 'auto' and its containing block's block size is '400px'. Since the heigh
t of the containing block is definite in this test, then constrain is the height
of such containing block which is, in this test, 400px. This test presumes that
the initial containing block's height is greater than 400px." /> |
| 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 sen
tence." |
| 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-vlr-in-htb tests: |
| 42 001-012: body has 100px margin-top and 100px margin-bottom |
| 43 013-024: body has no vertical margins |
| 44 |
| 45 Inside each sub-batch of 12 tests: |
| 46 001-006: containing block's height is 'auto' therefore indefinite |
| 47 007-012: containing block's height 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 height is 'auto' |
| 55 002: orthogonal block's height is 'auto' and its min-content |
| 56 inline size is greater than containing-block's (definite) height (1 very long
word) |
| 57 003: orthogonal block's height is 'auto' its max-content inline-size |
| 58 is smaller than containing-block's height (short sentence) |
| 59 |
| 60 --> |
| 61 |
| 62 <style type="text/css"><![CDATA[ |
| 63 body |
| 64 { |
| 65 font-size: 16px; |
| 66 line-height: 1.25; /* therefore, each line box is 20px tall */ |
| 67 margin-bottom: 0px; |
| 68 margin-top: 0px; |
| 69 } |
| 70 |
| 71 div#sized-400px-htb-containing-block |
| 72 { |
| 73 height: 400px; |
| 74 } |
| 75 |
| 76 div#ortho-block-vlr |
| 77 { |
| 78 border: blue solid 3px; |
| 79 height: auto; |
| 80 writing-mode: vertical-lr; |
| 81 } |
| 82 ]]></style> |
| 83 |
| 84 </head> |
| 85 |
| 86 <body> |
| 87 |
| 88 <div id="sized-400px-htb-containing-block"> |
| 89 |
| 90 <div id="ortho-block-vlr">01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17
18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 4
4 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70
71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97
98 99 00</div> |
| 91 |
| 92 </div> |
| 93 |
| 94 </body> |
| 95 </html> |
OLD | NEW |