wpt / css / css-writing-modes / svg-aliasing-001.html

Status: PASS | Duration: 9ms | Subtests: 1/1 | Open test on wpt.live | Open ref on wpt.live | wpt.fyi

TestRefTest SourceRef Source

/css/css-writing-modes/svg-aliasing-001.html

<!doctype html>
<meta charset="utf-8">
<title>SVG writing modes values parsed as aliases</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<link rel="help" href="https://drafts.csswg.org/css-writing-modes-3/#svg-writing-mode">
<link rel="match" href="reference/svg-aliasing-001-ref.html">
<meta name="assert" content="The legacy SVG writing mode values are parsed as simple aliases of the newer ones, and do not have side effects on bidi.">
<meta name="flags" content="may"> <!-- "may" because the support for these values is optional-->

<p>The test passes if you can see “1 2 3” 6 times below (without the quotation marks). If any of them is reversed (“3 2 1”) the test fails.</p>
<svg
   xmlns="http://www.w3.org/2000/svg"
   width="300"
   height="600">
<g style="direction: ltr">
  <text x="0" y="50" style="writing-mode: lr; fill: blue;">1 2 3</text>
  <text x="0" y="150" style="writing-mode: rl; fill: blue;">1 2 3</text>
</g>
<g>
  <text x="150" y="50" style="writing-mode: lr; fill: blue;">1 2 3</text>
  <text x="150" y="150" style="writing-mode: rl; fill: blue;">1 2 3</text>
</g>
<g style="direction: rtl">
  <text x="300" y="50" style="writing-mode: lr; fill: blue;">3 2 1</text>
  <text x="300" y="150" style="writing-mode: rl; fill: blue;">3 2 1</text>
</g>
</svg>

/css/css-writing-modes/reference/svg-aliasing-001-ref.html

<!doctype html>
<meta charset="utf-8">
<title>Writing modes test reference</title>
<link rel="author" title="Florian Rivoal" href="https://florian.rivoal.net/">
<p>The test passes if you can see “1 2 3” 6 times below (without the quotation marks). If any of them is reversed (“3 2 1”) the test fails.</p>
<svg
   xmlns="http://www.w3.org/2000/svg"
   width="300"
   height="600">
<g>
  <text x="0" y="50" style="fill: blue;">1 2 3</text>
  <text x="0" y="150" style="fill: blue;">1 2 3</text>
</g>
<g>
  <text x="150" y="50" style="fill: blue;">1 2 3</text>
  <text x="150" y="150" style="fill: blue;">1 2 3</text>
</g>
<g>
  <text x="300" y="50" style="direction: rtl; fill: blue;">3 2 1</text>
  <text x="300" y="150" style="direction: rtl; fill: blue;">3 2 1</text>
</g>
</svg>