LayoutTests/imported/csswg-test/css-writing-modes-3/inline-block-alignment-004.xht - Issue 1161223002: Import csswg-test/css-writing-modes-3/

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/inline-block-alignment-004.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/horizontal-rule-vrl-004-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/inline-block-alignment-004-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: inline-block alignment - inline-block without content (alphabetical alignment with horizontal layout)</title>

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

	6 <link rel="help" title="CSS3 Writing modes: 4.3. Atomic Inline Baseline" hre f="http://www.w3.org/TR/css-writing-modes-3/#replaced-baselines" />

	7 <link rel="help" title="CSS2.1 9.2.2 Inline-level elements and inline boxes" href="http://www.w3.org/TR/CSS21/visuren.html#inline-boxes" />

	8 <link rel="match" href="inline-block-alignment-004-ref.xht" />

	9 <meta name="assert" content="This test checks the generation of empty inline -block baseline. When 'writing-mode' is horizontal, then the alphabetical baseli ne is used as the dominant baseline." />

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

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

	12 div > p, div.control {

	13 font-size: 2em;

	14 background-color: orange;

	15 }

	16 img {

	17 margin-left: -300px;

	18 }

	19

	20 /* writing-mode property */

	21 .horizontal-tb {

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

	23 }

	24

	25 /* text-orientation property */

	26 .mixed {

	27 -webkit-text-orientation: mixed;

	28 }

	29 .upright {

	30 -webkit-text-orientation: upright;

	31 }

	32 .sideways-right {

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

	34 }

	35 .sideways-left {

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

	37 }

	38 .sideways {

	39 -webkit-text-orientation: sideways;

	40 }

	41 .use-glyph-orientation {

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

	43 }

	44

	45 /* inline-block */

	46 .inline-block {

	47 display: inline-block;

	48 }

	49 .descendant-block {

	50 display: block;

	51 height: 1em;

	52 background-color: yellow;

	53 padding-left: 1em;

	54 padding-right: 1em;

	55 }

	56 ]]></style>

	57 </head>

	58 <body>

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

	60 <ol>

	61 <li>the bottom of glyph 'L' and the bottom of yellow square is touching a thin blue line in each 7 orange rectangles and</li>

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

	63 </ol>

	64

	65 <div id="control">

	66 <p >LLLLL<span class="inline-block">

	67 <span class="descendant-block"></span>

	68 <span class="descendant-block"></span>

	69 </span>LLLLL<img src="support/blue-horiz-line-320x1.png" alt="Image down load support must be enabled" /></p>

	70 </div>

	71

	72 <div class="horizontal-tb">

	73 <p class="mixed">LLLLL<span class="inline-block">

	74 <span class="descendant-block"></span>

	75 <span class="descendant-block"></span>

	76 </span>LLLLL<img src="support/blue-horiz-line-320x1.png" alt="Image down load support must be enabled" /></p>

	77 <p class="upright">LLLLL<span class="inline-block">

	78 <span class="descendant-block"></span>

	79 <span class="descendant-block"></span>

	80 </span>LLLLL<img src="support/blue-horiz-line-320x1.png" alt="Image down load support must be enabled" /></p>

	81 <p class="sideways-right">LLLLL<span class="inline-block">

	82 <span class="descendant-block"></span>

	83 <span class="descendant-block"></span>

	84 </span>LLLLL<img src="support/blue-horiz-line-320x1.png" alt="Image down load support must be enabled" /></p>

	85 <p class="sideways-left">LLLLL<span class="inline-block">

	86 <span class="descendant-block"></span>

	87 <span class="descendant-block"></span>

	88 </span>LLLLL<img src="support/blue-horiz-line-320x1.png" alt="Image down load support must be enabled" /></p>

	89 <p class="sideways">LLLLL<span class="inline-block">

	90 <span class="descendant-block"></span>

	91 <span class="descendant-block"></span>

	92 </span>LLLLL<img src="support/blue-horiz-line-320x1.png" alt="Image down load support must be enabled" /></p>

	93 <p class="use-glyph-orientation">LLLLL<span class="inline-block">

	94 <span class="descendant-block"></span>

	95 <span class="descendant-block"></span>

	96 </span>LLLLL<img src="support/blue-horiz-line-320x1.png" alt="Image down load support must be enabled" /></p>

	97 </div>

	98 </body>

	99 </html>

OLD	NEW