Skip to main content

Browse the archive

https://github.com/web-platform-tests/wpt
26 December 2018, 22:31:15 UTC
Raw File
Tip revision: 4e59ec9e45875155334f1823e388edff3e339e08 authored by Cameron McCormack on 03 April 2018, 00:32:49 UTC
fix reftest-wait typo
Tip revision: 4e59ec9
sizing-orthog-vlr-in-htb-015.xht 
<!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: sizing of orthogonal 'vertical-lr' block with 'auto' inline size inside auto-sized 'horizontal-tb' containing block</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <link rel="help" href="https://www.w3.org/TR/css-writing-modes-3/#orthogonal-auto" />
  <link rel="match" href="sizing-orthog-vlr-in-htb-015-ref.xht" />

  <meta name="DC.date.created" content="2016-10-04T09:54:03+11:00" scheme="W3CDTF" />
  <meta name="DC.date.modified" content="2017-01-03T09:54:03+11:00" scheme="W3CDTF" />

  <meta name="flags" content="" />
  <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 height of the containing block is indefinite in this test, then constrain is the height of initial containing block which is, in this test, equal to the height of the viewport. In this test, the max-content will be smaller than the height of the initial containing block. Therefore the inline size of div#ortho-block-vlr will be its max-content." />

  <!--

  shrink-to-fit formula min(max-content, max(min-content, constraint))

  max-content inline size: narrowest inline size needed to fit its contents
  if none of the soft wrap opportunities within the box were taken. Eg:
  max-content of "I am a text sentence." is "I&nbsp;am&nbsp;a&nbsp;text&nbsp;sentence."
  https://www.w3.org/TR/css-sizing-3/#max-content-inline-size

  min-content inline size of the box: longest word in a sentence or longest non-breakable
  inline box (inline replaced or inline-block). Eg: min-content of "I am a text sentence."
  is "sentence."
  https://www.w3.org/TR/css-sizing-3/#min-content-inline-size

  contraint: min(available space, initial containing block's size)

  available space: this is either a measurement of its containing block
  (if that is definite) or an infinite size (when it is indefinite).
  https://drafts.csswg.org/css-sizing-4/#available

  - - - - - - - - - - - - -

  Inside this batch of 24 sizing-orthog-vlr-in-htb tests:
  001-012: body has 100px margin-top and 100px margin-bottom
  013-024: body has no vertical margins

  Inside each sub-batch of 12 tests:
  001-006: containing block's height is 'auto' therefore indefinite
  007-012: containing block's height is 400px therefore definite

  Inside each sub-sub-batch of 6 tests:
  001-003: containing block has 1 sentence before and after
  004-006: containing block has no sentence before and no sentence after

  Inside each sub-sub-sub-batch of 3 tests:
  001: orthogonal block's height is 'auto'
  002: orthogonal block's height is 'auto' and its min-content
  inline size is greater than containing-block's (definite) height (1 very long word)
  003: orthogonal block's height is 'auto' its max-content inline-size
  is smaller than containing-block's height (short sentence)

  -->

  <style type="text/css"><![CDATA[
  body
    {
      font-size: 16px;
      line-height: 1.25; /* therefore, each line box is 20px tall */
      margin-bottom: 0px;
      margin-top: 0px;
    }

  div#auto-sized-htb-containing-block
    {
      height: auto;
      /*
      'height: auto' causes the measurement of the orthogonal
      box's containing block to be indefinite
      */
    }

  div#ortho-block-vlr
    {
      border: blue solid 3px;
      height: auto;
      writing-mode: vertical-lr;
    }
  ]]></style>

 </head>

 <body>

  <div id="auto-sized-htb-containing-block">

    <p id="sentence-before">Sentence before.</p>

    <div id="ortho-block-vlr">123456789012345</div>

    <p id="sentence-after">Sentence after.</p>

  </div>

 </body>
</html>
back to top