writing-mode-vertical-rl-002.xht

mozilla-central/testing/web-platform/tests/css/css-writing-modes/writing-mode-vertical-rl-002.xht

Enable keyboard shortcuts

Source code

File a bug in Core :: Layout

Revision control

Copy as Markdown

Other Tools

Test Info:

This WPT test may be referenced by the following Test IDs:
- /css/css-writing-modes/writing-mode-vertical-rl-002.xht - WPT Dashboard Interop Dashboard

<?xml version="1.0" encoding="UTF-8" ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>CSS Test: writing-mode: vertical-rl - basic inline case</title>

    <link rel="author" title="Yoshifumi Kawai" href="mailto:kawai@est.co.jp" />

    <link rel="reviewer" title="Elika J. Etemad" href="http://fantasai.inkedblade.net/contact"/>

    <link rel="help" title="CSS3 Writing modes: 3.1. Block Flow Direction: the 'writing-mode' property" href="http://www.w3.org/TR/css-writing-modes-3/#propdef-writing-mode" />

    <link rel="match" href="reference/writing-mode-vertical-rl-002-ref.xht"/>

    <meta name="flags" content="ahem" />

    <meta content="This tests the block flow direction. The writing mode is vertical, and the block flow is right to left." />

    <link rel="stylesheet" type="text/css" href="/fonts/ahem.css" />

    <style type="text/css"><![CDATA[

div

            background: yellow;

            color: blue;

            font: 20px/1 Ahem;

            height: 6em;

            margin: 10px;

            width: 6em;

        #test

            writing-mode: vertical-rl;

    ]]></style>

</head>

<body>

    <p>The upper block is identical to the lower block including each character positions.</p>

    <div id="test">ab cd

e fg h

i jkl

mn o q

rs t

uv</div>

<div id="control">urmiea

vsn&nbsp;&nbsp;x

&nbsp;&nbsp;&nbsp;jf

&nbsp;tokgc

&nbsp;&nbsp;&nbsp;l d

&nbsp;&nbsp;q h</div>

</body>

</html>