Skip to main content

Browse the archive

Raw File
text-decoration-sideways-vrl-004.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: 'text-decoration: overline' and 'text-orientation: sideways' in a 'vertical-rl' writing-mode</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-3/#line-mappings" title="7.5 Line-Relative Mappings" />
  <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#logical-to-physical" title="6.4 Abstract-to-Physical Mappings" />

  <meta name="flags" content="" />
  <meta content="This test checks that 'text-decoration: overline' generates a line on the righthand side of text when 'text-orientation' is set to 'sideways' in a 'vertical-rl' writing-mode." name="assert" />

  <style type="text/css"><![CDATA[
  div
    {
      color: blue;
      font: 2.5em/1.5 serif; /* computes to 40px/60px */
      text-decoration: overline;
      text-orientation: sideways;
      writing-mode: vertical-rl;
    }

  span
    {
      color: orange;
    }
  ]]></style>

 </head>

 <body>

  <p>Test passes if glyphs of the words "Text sample" are rotated 90° clockwise and if a vertical straight blue line is on their <strong>righthand side</strong>.</p>

  <div><span>Text sample</span></div>

 </body>
</html>
back to top