LayoutTests/fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-001.html - Issue 159863002: Remove CSS regions support, keeping a bare minimum to support "region-based" multicol.

Side by Side Diff: LayoutTests/fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-001.html

Issue 159863002: Remove CSS regions support, keeping a bare minimum to support "region-based" multicol. (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master

Patch Set: Created 6 years, 10 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/fast/regions/counters/extract-ordered-lists-in-regions-003-expected.html ('k') | LayoutTests/fast/regions/counters/extract-ordered-lists-in-regions-explicit-counters-001-expected.html » ('j') | Source/devtools/front_end/protocol_externs.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
	(Empty)
1 <!DOCTYPE html>

2 <html>

3 <head>

4 <title>CSS Test: flow-into on ordered lists that use a single CSS counte r and ::before for list numbering</title>

5 <link rel="author" title="Mihai Balan" href="mibalan@adobe.com">

6 <link rel="help" href="http://www.w3.org/TR/css3-regions/#properties-and -rules" />

7 <link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into- property" />

8 <link rel="stylesheet" type="text/css" href="../resources/font-smoothing -disabler.css">

9 <meta name="flags" content="">

10 <meta name="assert" content="The flow-into property can be applied to or dered lists. Multiple lists using a single counter displayed in generated conten t and extracted in a named flow should render in regions just as without regions .">

11 <style>

12 ol {

13 list-style-type: none;

14 counter-reset: items 0;

15 }

16 ol>li {

17 counter-increment: items;

18 }

19 li::before {

20 content: counter(items) ". ";

21 display: inline-block;

22 width: 1.5em;

23 margin-right: .3em;

24 text-align: right;

25 }

26

27 ol.double>li {

28 counter-increment: items 2;

29 }

30 ol.double>li::before {

31 content: counter(items, upper-latin) ". ";

32 }

33

34 ol.down-ten {

35 counter-reset: items 11;

36 }

37 ol.down-ten>li {

38 counter-increment: items -1;

39 }

40 ol.down-ten>li::before {

41 content: counter(items, upper-roman) ". ";

42 width: 2em;

43 }

44

45 #list1 {

46 -webkit-flow-into: flow1;

47 }

48 #list21, #list22 {

49 -webkit-flow-into: flow2;

50 }

51 #list31 {

52 -webkit-flow-into: flow3;

53 }

54

55 .region {

56 background-color: lightgray;

57 margin: 1em;

58 float: left;

59 width: 18em;

60 height: 15em;

61 }

62 #region1 {

63 -webkit-flow-from: flow1;

64 width: 12em;

65 }

66 #region2 {

67 -webkit-flow-from: flow2;

68 width: 12em;

69 }

70 #region3 {

71 -webkit-flow-from: flow3;

72 }

73 </style>

74 </head>

75 <body>

76 <p>The test passes if there are three gray rectangles as follows:<br>

77 1. the first one contains a numbered, 4 items list<br>

78 2. the second contains two numbered, 3 items lists – each list uses letters for numbering, starting with 'B.' and skipping every other letter (<em>e.g.</em> B, D, F)<br>

79 3. the last rectangle contains a descending numbered list: it's numb ered using roman numerals, starting at X (10), in decreasing order; after the se cond item there's an inner numbered list with 2 items, again descendingly number ed with roman numerals, starting at 10; finally, before the last item there's an other inner numbered list with 2 items, labeled with letters, more precisely, th e letters B and D</p>

80 <ol id="list1">

81 <li>First list, item 1</li>

82 <li>First list, item 2</li>

83 <li>First list, item 3</li>

84 <li>First list, item 4</li>

85 </ol>

86 <ol id="list21" class="double">

87 <li>List 2-1, item B</li>

88 <li>List 2-1, item D</li>

89 <li>List 2-1, item F</li>

90 </ol>

91 <ol id="list22" class="double" start="4">

92 <li>List 2-2, item B</li>

93 <li>List 2-2, item D</li>

94 <li>List 2-2, item F</li>

95 </ol>

96 <ol id="list31" class="down-ten">

97 <li>Outer list, item X</li>

98 <li>Outer list, item IX

99 <ol class="down-ten">

100 <li>Inner list 1, item X</li>

101 <li>Inner list 1, item IX</li>

102 </ol>

103 </li>

104 <li>Outer list, item VIII</li>

105 <li>Outer list, item VII</li>

106 <li>Outer list, item VI

107 <ol class="double">

108 <li>Inner list 2, item B</li>

109 <li>Inner list 2, item D</li>

110 </ol>

111 </li>

112 <li>Outer list, item V</li>

113 </ol>

114 <div class="region" id="region1"></div>

115 <div class="region" id="region2"></div>

116 <div class="region" id="region3"></div>

117 </body>

118 </html>

OLD	NEW