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
row-progression-slr-023.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: sideways-lr - table rows progression</title>

  <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/" />
  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-4/#writing-mode" title="3.1 Block Flow Direction: the writing-mode property" />
  <link rel="match" href="block-flow-direction-001-ref.xht" />

  <meta content="ahem" name="flags" />
  <meta content="This test checks that rows of a table element with in a 'sideways-lr' writing mode are laid out one after the other, rightwardedly, with the first beginning at the leftmost side of the table box; table rows are ordered from left to right meaning that the 1st row is the leftmost one and then the 2nd row is juxtaposed to its right-hand side, the 3rd row is juxtaposed to the 2nd row on its right-hand side, etc... Table cells and table columns in a table with writing-mode set to 'sideways-lr' are ordered according to inline flow direction, which is from bottom to top." name="assert" />

  <style type="text/css"><![CDATA[
  body
    {
      color: yellow;
      font: 20px/1 Ahem;
    }

  table
    {
      background-color: blue;
      border-spacing: 0em;
      border: blue solid 1em;
      height: 7em;
      writing-mode: sideways-lr;
    }

  td
    {
      padding-bottom: 0em;
      padding-left: 1em;
      padding-right: 0em;
      padding-top: 0em;
    }

  td.left-most-cell
    {
      padding-left: 0em;
    }
  ]]></style>
 </head>

 <body>

  <table>

<!-- The "P" -->
  <tr><td class="left-most-cell">AAA &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; </td><td class="left-most-cell">BB C D EE</td><td class="left-most-cell">FF &nbsp;G &nbsp;H JJ</td></tr>

<!-- The "A" -->
  <tr><td>KKK &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; LLL</td><td>MM N O QQ</td><td>RR &nbsp;S &nbsp;T UU</td></tr>

<!-- The left-most "S" -->
  <tr><td>V&nbsp;&nbsp; W&nbsp; X&nbsp; YYY</td><td>aa b c d</td><td>ee &nbsp;f &nbsp;g &nbsp;h</td></tr>

<!-- The right-most "S" -->
  <tr><td>j&nbsp;&nbsp; k&nbsp; m&nbsp; nnn</td><td>qq r s t</td><td>uu &nbsp;v &nbsp;w &nbsp;x</td></tr>

  </table>

 </body>
</html>
back to top