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

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-007.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-004-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/vertical-alignment-007-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 - 'super' (alphabetical baseli ne 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-007-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="image" />

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

12 div > p, p.control {

13 font-size: 2em;

14 background-color: orange;

15 }

16

17 /* vertical-align */

18 img {

19 vertical-align: super;

20 }

21 img.line {

22 margin-left: -230px;

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 bottom of glyph 'L' is touching a thin blue line in each 7 orange rectangles and</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"><sup>LLLLLLLLLLLLL</sup>

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

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

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

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

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

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

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