| Index: LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-025.xht
|
| diff --git a/LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-025.xht b/LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-025.xht
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..64999a28d145b631ec3739949e5dc2677e294b92
|
| --- /dev/null
|
| +++ b/LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-025.xht
|
| @@ -0,0 +1,92 @@
|
| +<!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: vertical align - 'negative percent (-20%)' (alphabetical baseline with horizontal layout)</title>
|
| + <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmail.com" />
|
| + <link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/css-writing-modes-3/#baseline-alignment" />
|
| + <link rel="help" title="10.8 Line height calculations: the 'line-height' and 'vertical-align' properties" href="http://www.w3.org/TR/CSS21/visudet.html#line-height" />
|
| + <link rel="match" href="vertical-alignment-025-ref.xht" />
|
| + <meta name="assert" content="This test checks the generation of text baseline with vertical align property. When 'writing-mode' is horizontal, then the alphabetical baseline is used as the dominant baseline." />
|
| + <meta name="flags" content="ahem image" />
|
| + <style type="text/css"><![CDATA[
|
| + div > p, p.control {
|
| + padding-bottom: 0.2em;
|
| + font: 40px/1 "Ahem";
|
| + background-color: orange;
|
| + }
|
| +
|
| + /* vertical-align */
|
| + img {
|
| + vertical-align: -20%;
|
| + }
|
| + img.line {
|
| + margin-left: -260px;
|
| + }
|
| +
|
| + /* writing-mode property */
|
| + .horizontal-tb {
|
| + -webkit-writing-mode: horizontal-tb;
|
| + }
|
| +
|
| + /* text-orientation property */
|
| + .mixed {
|
| + -webkit-text-orientation: mixed;
|
| + }
|
| + .upright {
|
| + -webkit-text-orientation: upright;
|
| + }
|
| + .sideways-right {
|
| + -webkit-text-orientation: sideways-right;
|
| + }
|
| + .sideways-left {
|
| + -webkit-text-orientation: sideways-left;
|
| + }
|
| + .sideways {
|
| + -webkit-text-orientation: sideways;
|
| + }
|
| + .use-glyph-orientation {
|
| + -webkit-text-orientation: use-glyph-orientation;
|
| + }
|
| + ]]></style>
|
| + </head>
|
| + <body>
|
| + <p>Test passes if ...</p>
|
| + <ol>
|
| + <li>the bottom of black stripe is touching a thin blue line in each 7 orange rectangles.</li>
|
| + <li>the bottom edge of yellow square is aligned to a thin blue line in each 7 orange rectangles and</li>
|
| + <li>all 7 orange rectangles are <strong>identical</strong>.</li>
|
| + </ol>
|
| +
|
| + <p class="control">CONTR
|
| + <img class="square" src="./support/yellow-square-59x59.png" alt="Image download support must be enabled" />
|
| + <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image download support must be enabled" />
|
| + </p>
|
| +
|
| + <div class="horizontal-tb">
|
| + <p class="mixed">MIXED
|
| + <img class="square" src="./support/yellow-square-horiz-redline-bottom-59x59.png" alt="Image download support must be enabled" />
|
| + <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image download support must be enabled" />
|
| + </p>
|
| + <p class="upright">UPRIG
|
| + <img class="square" src="./support/yellow-square-horiz-redline-bottom-59x59.png" alt="Image download support must be enabled" />
|
| + <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image download support must be enabled" />
|
| + </p>
|
| + <p class="sideways-right">SIDER
|
| + <img class="square" src="./support/yellow-square-horiz-redline-bottom-59x59.png" alt="Image download support must be enabled" />
|
| + <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image download support must be enabled" />
|
| + </p>
|
| + <p class="sideways-left">SIDEL
|
| + <img class="square" src="./support/yellow-square-horiz-redline-bottom-59x59.png" alt="Image download support must be enabled" />
|
| + <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image download support must be enabled" />
|
| + </p>
|
| + <p class="sideways">SIDEW
|
| + <img class="square" src="./support/yellow-square-horiz-redline-bottom-59x59.png" alt="Image download support must be enabled" />
|
| + <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image download support must be enabled" />
|
| + </p>
|
| + <p class="use-glyph-orientation">USEGL
|
| + <img class="square" src="./support/yellow-square-horiz-redline-bottom-59x59.png" alt="Image download support must be enabled" />
|
| + <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image download support must be enabled" />
|
| + </p>
|
| + </div>
|
| + </body>
|
| +</html>
|
|
|