LayoutTests/imported/csswg-test/css-writing-modes-3/inline-block-alignment-004.xht - Issue 1166693007: W3C Test: import web-platform-tests/html/webappapis

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/inline-block-alignment-004.xht

Issue 1166693007: W3C Test: import web-platform-tests/html/webappapis (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/W3CImportExpectations ('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