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

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-016.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/vertical-alignment-013-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-016-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 - 'negative length (-0.2em)' ( alphabetical 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-016-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 padding-bottom: 0.2em;

	14 font: 40px/1 "Ahem";

	15 background-color: orange;

	16 }

	17

	18 /* vertical-align */

	19 img {

	20 vertical-align: -0.2em;

	21 }

	22 img.line {

	23 margin-left: -260px;

	24 }

	25

	26 /* writing-mode property */

	27 .horizontal-tb {

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

	29 }

	30

	31 /* text-orientation property */

	32 .mixed {

	33 -webkit-text-orientation: mixed;

	34 }

	35 .upright {

	36 -webkit-text-orientation: upright;

	37 }

	38 .sideways-right {

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

	40 }

	41 .sideways-left {

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

	43 }

	44 .sideways {

	45 -webkit-text-orientation: sideways;

	46 }

	47 .use-glyph-orientation {

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

	49 }

	50 ]]></style>

	51 </head>

	52 <body>

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

	54 <ol>

	55 <li>the bottom of black stripe is touching a thin blue line in each 7 oran ge rectangles.</li>

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

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

	58 </ol>

	59

	60 <p class="control">CONTR

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

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

	63 </p>

	64

	65 <div class="horizontal-tb">

	66 <p class="mixed">MIXED

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

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

	69 </p>

	70 <p class="upright">UPRIG

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

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

	73 </p>

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

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

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

	77 </p>

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

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

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

	81 </p>

	82 <p class="sideways">SIDEW

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

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

	85 </p>

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

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

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

	89 </p>

	90 </div>

	91 </body>

	92 </html>

OLD	NEW