LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-025.xht - Issue 1188583004: update-w3c-deps import using blink 9d3793ee56e5bb1aa1eef078d848e1b0e6e4d355:

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

Issue 1188583004: update-w3c-deps import using blink 9d3793ee56e5bb1aa1eef078d848e1b0e6e4d355: (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: 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 | Annotate | Revision Log

« no previous file with comments | « LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-022-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-025-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 percent (-20%)' (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-025-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: -20%;

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