LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-013.xht - Issue 1161223002: Import csswg-test/css-writing-modes-3/

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-013.xht

Issue 1161223002: Import csswg-test/css-writing-modes-3/ (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Comments updated Created 5 years, 6 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

View unified diff | Download patch

« no previous file with comments | « LayoutTests/imported/csswg-test/css-writing-modes-3/text-orientation-script-001i.html ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-013-expected.xht » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">

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

	3 <head>

	4 <title>CSS Writing Modes Test: vertical align - 'positive length (0.8em)' (a lphabetical baseline with horizontal layout)</title>

	5 <link rel="author" title="Hajime Shiozawa" href="mailto:hajime.shiozawa@gmai l.com" />

	6 <link rel="help" title="4.4. Baseline Alignment" href="http://www.w3.org/TR/ css-writing-modes-3/#baseline-alignment" />

	7 <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" />

	8 <link rel="match" href="vertical-alignment-013-ref.xht" />

	9 <meta name="assert" content="This test checks the generation of text baselin e with vertical align property. When 'writing-mode' is horizontal, then the alph abetical baseline is used as the dominant baseline." />

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

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

	12 div > p, p.control {

	13 font: 40px/1 "Ahem";

	14 background-color: orange;

	15 }

	16

	17 /* vertical-align */

	18 img {

	19 vertical-align: 0.8em;

	20 }

	21 img.line {

	22 margin-left: -260px;

	23 }

	24

	25 /* writing-mode property */

	26 .horizontal-tb {

	27 -webkit-writing-mode: horizontal-tb;

	28 }

	29

	30 /* text-orientation property */

	31 .mixed {

	32 -webkit-text-orientation: mixed;

	33 }

	34 .upright {

	35 -webkit-text-orientation: upright;

	36 }

	37 .sideways-right {

	38 -webkit-text-orientation: sideways-right;

	39 }

	40 .sideways-left {

	41 -webkit-text-orientation: sideways-left;

	42 }

	43 .sideways {

	44 -webkit-text-orientation: sideways;

	45 }

	46 .use-glyph-orientation {

	47 -webkit-text-orientation: use-glyph-orientation;

	48 }

	49 ]]></style>

	50 </head>

	51 <body>

	52 <p>Test passes if ...</p>

	53 <ol>

	54 <li>the top of black stripe is touching a thin blue line in each 7 orange rectangles.</li>

	55 <li>the bottom edge of yellow square is aligned to a thin blue line in eac h 7 orange rectangles and</li>

	56 <li>all 7 orange rectangles are <strong>identical</strong>.</li>

	57 </ol>

	58

	59 <p class="control">CONTR

	60 <img class="square" src="./support/yellow-square-59x59.png" alt="Image dow nload support must be enabled" />

	61 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image dow nload support must be enabled" />

	62 </p>

	63

	64 <div class="horizontal-tb">

	65 <p class="mixed">MIXED

	66 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59 x59.png" alt="Image download support must be enabled" />

	67 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d ownload support must be enabled" />

	68 </p>

	69 <p class="upright">UPRIG

	70 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59 x59.png" alt="Image download support must be enabled" />

	71 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d ownload support must be enabled" />

	72 </p>

	73 <p class="sideways-right">SIDER

	74 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59 x59.png" alt="Image download support must be enabled" />

	75 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d ownload support must be enabled" />

	76 </p>

	77 <p class="sideways-left">SIDEL

	78 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59 x59.png" alt="Image download support must be enabled" />

	79 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d ownload support must be enabled" />

	80 </p>

	81 <p class="sideways">SIDEW

	82 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59 x59.png" alt="Image download support must be enabled" />

	83 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d ownload support must be enabled" />

	84 </p>

	85 <p class="use-glyph-orientation">USEGL

	86 <img class="square" src="./support/yellow-square-horiz-redline-bottom-59 x59.png" alt="Image download support must be enabled" />

	87 <img class="line" src="./support/blue-horiz-line-220x1.png" alt="Image d ownload support must be enabled" />

	88 </p>

	89 </div>

	90 </body>

	91 </html>

OLD	NEW