LayoutTests/imported/csswg-test/css-writing-modes-3/percent-margin-vlr-003.xht - Issue 1188583004: update-w3c-deps import using blink 9d3793ee56e5bb1aa1eef078d848e1b0e6e4d355:

Side by Side Diff: LayoutTests/imported/csswg-test/css-writing-modes-3/percent-margin-vlr-003.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/inline-block-alignment-orthogonal-vrl-004-expected.xht ('k') | LayoutTests/imported/csswg-test/css-writing-modes-3/percent-margin-vlr-005.xht » ('j') | no next file with comments »
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">	1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/x html1/DTD/xhtml1-strict.dtd">

2	2

3 <html xmlns="http://www.w3.org/1999/xhtml">	3 <html xmlns="http://www.w3.org/1999/xhtml">

4	4

5 <head>	5 <head>

6	6

7 <title>CSS Writing Modes Test: margin percentage and 'vertical-lr'</title>	7 <title>CSS Writing Modes Test: margin percentage and 'vertical-lr' (orthogonal flow)</title>

8	8

9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB ugsSection/css21testsuite/" />	9 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserB ugsSection/css21testsuite/" />

10 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-map ping" title="7.2 Dimensional Mapping" />	10 <link rel="help" href="http://www.w3.org/TR/css-writing-modes-3/#dimension-map ping" title="7.2 Dimensional Mapping" />

11 <link rel="match" href="margin-vrl-002-ref.xht" />	11 <link rel="match" href="margin-vrl-002-ref.xht" />

12	12

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

14 <meta content="This test checks that percentages on the margin are calculated with respect to the width of the containing block if the 'writing-mode' of such containing block is 'horizontal-tb'. In this test, div.outer's computed 'writing -mode' value is 'horizontal-tb' and it is the div.inner's containing block." nam e="assert" />	14 <meta content="This test checks that percentages on the margin are calculated with respect to the width (inline-size) of the containing block if the 'writing- mode' of such containing block is 'horizontal-tb'. In this test, div.outer's com puted 'writing-mode' value is 'horizontal-tb' and it is the div.inner's containi ng block." name="assert" />

15	15

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

17 div.outer	17 div.outer

18 {	18 {

19 background-color: blue;	19 background-color: blue;

20 border: blue solid 3px;	20 border: blue solid 3px;

21 width: 200px;	21 width: 200px;

22 }	22 }

23	23

	24 div.inner

	25 {

	26 background-color: yellow;

	27 height: 50px;

	28 width: 50px;

	29 -webkit-writing-mode: vertical-lr;

	30 }

	31

	32 div.foo

	33 {

	34 margin-bottom: 2.5%; /* 5px ; collapses with hr's margin-top */

	35 margin-left: 50%; /* 100px */

	36 margin-right: 25%; /* 50px */

	37 margin-top: 10%; /* 20px */

	38 }

	39

24 hr	40 hr

25 {	41 {

26 background-color: transparent;	42 background-color: transparent;

27 border: transparent none 0px;	43 border: transparent none 0px;

28 height: 3px;	44 height: 3px;

29 margin: 0.5em auto;	45 margin: 0.5em auto;

30 }	46 }

31	47

32 div.inner

33 {

34 background-color: yellow;

35 height: 50px; /* necessary, otherwise div.inner blocks must grow as tall a s the height of viewport */

36 width: 50px;

37 }

38

39 div.foo

40 {

41 margin-bottom: 2.5%;

42 margin-left: 50%;

43 margin-right: 25%;

44 margin-top: 10%;

45 -webkit-writing-mode: vertical-lr;

46 }

47

48 div.bar	48 div.bar

49 {	49 {

50 margin-bottom: 10%;	50 margin-bottom: 10%; /* 20px */

51 margin-left: 25%;	51 margin-left: 25%; /* 50px */

52 margin-right: 50%;	52 margin-right: 50%; /* 100px */

53 margin-top: 2.5%;	53 margin-top: 2.5%; /* 5px ; collapses with hr's margin-bottom */

54 -webkit-writing-mode: vertical-lr;

55 }	54 }

56	55

57 div#reference	56 div#reference

58 {	57 {

59 margin-top: 1em;	58 margin-top: 1em;

60 }	59 }

61 ]]></style>	60 ]]></style>

62 </head>	61 </head>

63	62

64 <body>	63 <body>

65	64

66 <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>	65 <p>Test passes if there are 2 <strong>identical</strong> blue rectangles, each with 2 small yellow squares: the layout must be identical.</p>

67	66

68 <div class="outer">	67 <div class="outer">

69 <div class="inner foo"></div>	68 <div class="inner foo"></div>

70 <hr />	69 <hr />

71 <div class="inner bar"></div>	70 <div class="inner bar"></div>

72 </div>	71 </div>

73	72

74 <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" h eight="165" alt="Image download support must be enabled" /></div>	73 <div id="reference"><img src="support/blue-yellow-206w-165h.png" width="206" h eight="165" alt="Image download support must be enabled" /></div>

75	74

76 </body>	75 </body>

77 </html>	76 </html>

OLD	NEW