Blitz - WPT: white-space-intrinsic-size-017.html

wpt / css / css-text / white-space / white-space-intrinsic-size-017.html

/css/css-text/white-space/white-space-intrinsic-size-017.html

<!DOCTYPE html>

  <meta charset="UTF-8">

  <title>CSS Text Test: max-content sizing and 'white-space: pre-wrap'</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/">
  <link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-property">
  <link rel="help" href="https://www.w3.org/TR/css-text-3/#white-space-phase-2">
  <link rel="help" href="https://www.w3.org/TR/css-sizing-3/#auto-box-sizes">
  <link rel="match" href="../../reference/ref-filled-green-100px-square.xht">
  <link rel="stylesheet" type="text/css" href="/fonts/ahem.css">

  <meta name="fuzzy" content="maxDifference=0-1; totalPixels=0-4400">
  <meta content="When 'white-space' is 'pre-wrap', preserved white spaces at the beginning and at the end of the line affect the intrinsic max-content size." name="assert">

  <style>
  div#wrapper
    {
      color: transparent;
      /*
      so that background colors can
      shine through the A, G, M, Z glyphs
      */
      font-family: Ahem;
      font-size: 25px;
      line-height: 1;
      width: 7em;
      /*
      'width: 7em' gives more inline-size
      than needed or required by each
      overlapping-test-green <div>s.
      If an implementation goes wrong
      and makes one of
      overlapping-test-green <div>s
      wider than 4em, then we will see
      red.
      */
    }

  div#overlapped-reference-red
    {
      background-color: red;
      height: 4em;
      position: absolute;
      width: 4em;
      z-index: -1;
    }

  div.overlapping-test-green
    {
      background: linear-gradient(to right, green 4em, red 3em);
      /*
      If one of the overlapping-test-green <div>s become wider
      than 4em, then we will see the part beyond 4em of this
      linear-gradient background which is red.
      https://www.w3.org/TR/css-images-3/#linear-gradients
      */
      float: left;
      /*
      [
      max-content inline size:
      The box's "ideal" size in the inline axis. Usually
      the narrowest inline size it could take while fitting
      around its contents if none of the soft wrap
      opportunities within the box were taken.
      ]
      https://www.w3.org/TR/css-sizing-3/#max-content-inline-size
      */
      white-space: pre-wrap;
    }
  </style>

  <p>Test passes if there is a filled green square and <strong>no red</strong>.

  <div id="wrapper">

    <div id="overlapped-reference-red"></div>

    <div class="overlapping-test-green">A   </div>

    <div class="overlapping-test-green"> G  </div>

    <div class="overlapping-test-green">  M </div>

    <div class="overlapping-test-green">   Z</div>

  </div>

/css/reference/ref-filled-green-100px-square.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 Reftest Reference</title>
  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <style type="text/css"><![CDATA[
  div
  {
  background-color: green;
  height: 100px;
  width: 100px;
  }
  ]]></style>
 </head>
 <body>
  <p>Test passes if there is a filled green square and <strong>no red</strong>.</p>
  <div></div>
 </body>
</html>