LayoutTests/fast/regions/shape-inside/shape-inside-recursive-layout.html - Issue 159863002: Remove CSS regions support, keeping a bare minimum to support "region-based" multicol.

Side by Side Diff: LayoutTests/fast/regions/shape-inside/shape-inside-recursive-layout.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/shape-inside/shape-inside-on-second-region-inline-content-expected.html ('k') | LayoutTests/fast/regions/shape-inside/shape-inside-recursive-layout-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 lang="en">

3 <head>

4 <style>

5 .region, .content {

6 font: 50px/1 Ahem, sans-serif;

7 }

8 .region {

9 width: 100px;

10 height: 100px;

11 shape-inside: rectangle(0, 0, 100%, 100%);

12 }

13 .content * {

14 color: green;

15 width: 100px;

16 overflow-wrap: break-word;

17 }

18 .region.inline-block { -webkit-flow-from: inline-block-flow; }

19 .content.inline-block { -webkit-flow-into: inline-block-flow; }

20

21 .region.float { -webkit-flow-from: float-flow; }

22 .content.float { -webkit-flow-into: float-flow; }

23

24 .region.list { -webkit-flow-from: list-flow; }

25 .content.list { -webkit-flow-into: list-flow; }

26

27 .region.table { -webkit-flow-from: table-flow; }

28 .content.table { -webkit-flow-into: table-flow; }

29

30 .region.old-flexbox { -webkit-flow-from: old-flexbox-flow; }

31 .content.old-flexbox { -webkit-flow-into: old-flexbox-flow; }

32

33 .region.new-flexbox { -webkit-flow-from: new-flexbox-flow; }

34 .content.new-flexbox { -webkit-flow-into: new-flexbox-flow; }

35

36 .region.grid { -webkit-flow-from: grid-flow; }

37 .content.grid { -webkit-flow-into: grid-flow; }

38

39 .inline-block.content * {

40 display: inline-block;

41 }

42 .float.content * {

43 float: left;

44 }

45 .list.content ul {

46 margin: 0;

47 padding: 0;

48 display: inline-block;

49 list-style: none;

50 }

51 .table.content table {

52 display: inline-table;

53 border-collapse: collapse;

54 }

55 .table.content tr {

56 dispay: inline-table;

57 }

58 .table.content td, .table.content tr {

59 padding: 0; margin: 0;

60 }

61 .old-flexbox.content * {

62 display: -webkit-inline-box;

63 }

64 .new-flexbox.content * {

65 display: -webkit-inline-flex;

66 }

67 .grid.content * {

68 display: inline-grid;

69 grid-template-rows: 100px;

70 grid-template-columns: 100px;

71 }

72 .grid.content * {

73 grid-row-start: 1;

74 grid-column-start: 1;

75 }

76 </style>

77 </head>

78 <body>

79 <p>This test covers inline blocks and floats inside of regions with a shape- inside set.

80 It requires the Ahem font. For each test case, you should see a 2x2 green sq uare.</p>

81

82 <p>Inline blocks</p>

83 <div class='region inline-block'></div>

84 <div class='content inline-block'>

85 <div>xxxx</div>

86 </div>

87

88 <p>Floats</p>

89 <div class='region float'></div>

90 <div class='content float'>

91 <div>xxxx</div>

92 </div>

93

94 <p>Lists</p>

95 <div class='region list'></div>

96 <div class='content list'>

97 <ul>

98 <li>xx</li>

99 <li>xx</li>

100 </ul>

101 </div>

102

103 <p>Tables</p>

104 <div class='region table'></div>

105 <div class='content table'>

106 <table>

107 <tr><td>x</td><td>x</td></tr>

108 <tr><td>x</td><td>x</td></tr>

109 </table>

110 </div>

111

112 <p>Old FlexBox</p>

113 <div class='region old-flexbox'></div>

114 <div class='content old-flexbox'>

115 <div>xxxx</div>

116 </div>

117

118 <p>New FlexBox</p>

119 <div class='region new-flexbox'></div>

120 <div class='content new-flexbox'>

121 <div>xxxx</div>

122 </div>

123

124 <p>Grid</p>

125 <div class='region grid'></div>

126 <div class='content grid'>

127 <div>xxxx</div>

128 </div>

129 </body>

130 </html>

OLD	NEW