LayoutTests/fast/regions/region-styling/region-style-block-background-color2.html - Issue 159863002: Remove CSS regions support, keeping a bare minimum to support "region-based" multicol.

Side by Side Diff: LayoutTests/fast/regions/region-styling/region-style-block-background-color2.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/region-styling/region-style-block-background-color-expected.html ('k') | LayoutTests/fast/regions/region-styling/region-style-block-background-color2-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 <!--

4 Test for https://bugs.webkit.org/show_bug.cgi?id=71488 (Add support for back ground-color in region styling).

5 Test setting the background-color property using region styling for boxes.

6 You should not see any red background below.

7 -->

8 <head>

9 <style>

10 html { font: 16px/1.25 monospace; }

11 .regionTextBlock { background-color: red; }

12 .regionBox { width: 420px; height: 50px; }

13 .regionBox1 { width: 420px; height: 30px; }

14 .regionBox2 { width: 420px; height: 100px; }

15

16 #article1 { -webkit-flow-into: flow1; }

17 .region1 { -webkit-flow-from: flow1; }

18 @-webkit-region #region1 { #regionTextBlock1 { background-color: gre en; } }

19

20 .article2 { -webkit-flow-into: flow2; }

21 .region2 { -webkit-flow-from: flow2; }

22 #regionTextBlock2 { background-color: lime; width: 420px; }

23 @-webkit-region .region2 { #regionTextBlock2 { background-color: gre en; } }

24

25 #article3 { -webkit-flow-into: flow3; }

26 #region31, #region32 { -webkit-flow-from: flow3; }

27 @-webkit-region #region31 { #regionTextBlock4 { background-color: gr een; } }

28 @-webkit-region #region32 { #regionTextBlock3 { background-color: li me; } }

29

30 #article4 { -webkit-flow-into: flow4; }

31 #region41, #region42 { -webkit-flow-from: flow4; }

32 @-webkit-region #region41 { #regionTextBlock6 { background-color: gr een; } }

33 @-webkit-region #region42 { #regionTextBlock5 { background-color: li me; } }

34

35 #article5 { -webkit-flow-into: flow5; }

36 #region51, #region52 { -webkit-flow-from: flow5; }

37 @-webkit-region #region51 {

38 #regionTextBlock7 { background-color: green; }

39 #regionTextBlock8 { background-color: green; }

40 }

41 @-webkit-region #region52 { #regionTextBlock8 { background-color: li me; } }

42

43 #article6 { -webkit-flow-into: flow6; }

44 #region61, #region62 { -webkit-flow-from: flow6; }

45 @-webkit-region #region61 { #regionTextBlock9 { background-color: gr een; } }

46 @-webkit-region #region62 { #regionTextBlock10 { background-color: l ime; } }

47

48 #article7 { -webkit-flow-into: flow7; }

49 #region71, #region72 { -webkit-flow-from: flow7; }

50 @-webkit-region #region71 {

51 #regionTextBlock11 { background-color: green; }

52 #regionTextBlock12 { background-color: green; }

53 }

54 @-webkit-region #region72 { #regionTextBlock12 { background-color: l ime; } }

55 </style>

56 </head>

57 <body onload="runTests()">

58 <!-- Style paragraph in a new region -->

59 <div id="article1">

60 <div class="regionTextBlock" id="regionTextBlock1">Green background text styled in region1.</div>

61 </div>

62 <div id="region1" class="regionBox1"></div>

63

64 <!-- Paragraph styled in region, flow removed -->

65 <div class="article2">

66 <div class="regionTextBlock" id="regionTextBlock2">Lime background t ext styled out region2.</div>

67 </div>

68 <div class="region2 regionBox"></div>

69

70 <!-- Paragraphs styled in different regions.

71 The first para is removed and appended to the flow.

72 Both paragraphs will be styled again in the opposite regions.-->

73 <div id="article3">

74 <div class="regionTextBlock" id="regionTextBlock3">Lime background t ext styled in region32.</div>

75 <br>

76 <div class="regionTextBlock" id="regionTextBlock4">Green background text styled in region31.</div>

77 </div>

78 <div id="region31" class="regionBox"></div>

79 <div id="region32" class="regionBox1"></div>

80

81 <!-- Paragraph styled in first region. A new paragrash is inserted befor e in the flow,

82 pushing the first paragrash in the second region.-->

83 <div id="article4">

84 <div class="regionTextBlock" id="regionTextBlock5">Lime background t ext styled in region42.</div>

85 </div>

86 <div id="region41" class="regionBox"></div>

87 <div id="region42" class="regionBox1"></div>

88

89 <!-- Two paragraphs styled in different regions. After the first region height increases,

90 both paragraphs are placed and styled in the first region.-->

91 <div id="article5">

92 <div class="regionTextBlock" id="regionTextBlock7">Green background text styled in region51.</div>

93 <br>

94 <div class="regionTextBlock" id="regionTextBlock8">Green background text styled in region51.</div>

95 </div>

96 <div id="region51" class="regionBox"></div>

97 <div id="region52" class="regionBox1"></div>

98

99 <!-- Two paragraphs styled in the first region. After the first region h eight decreases,

100 the first paragraph is styled in the first region while the second parag raph is styled

101 in the second region.

102 -->

103 <div id="article6">

104 <div class="regionTextBlock" id="regionTextBlock9">Green background text styled in region61.</div>

105 <br>

106 <div class="regionTextBlock" id="regionTextBlock10">Lime background text styled in region62.</div>

107 </div>

108 <div id="region61" class="regionBox2"></div>

109 <div id="region62" class="regionBox1"></div>

110

111 <!-- Two paragraphs styled in the first region. The height of first regi on is

112 decreased/increased and in the end, the second paragraph ends up in the second region.-->

113 <div id="article7">

114 <div class="regionTextBlock" id="regionTextBlock11">Green background text styled in region71.</div>

115 <br>

116 <div class="regionTextBlock" id="regionTextBlock12">Lime background text styled in region72.</div>

117 </div>

118 <div id="region71" class="regionBox2"></div>

119 <div id="region72" class="regionBox1"></div>

120 <script>

121 if (window.testRunner)

122 window.testRunner.waitUntilDone();

123

124 function testFlow1()

125 {

126 var region1 = document.getElementById("region1");

127 region1.className = "region1 regionBox";

128 }

129

130 function testFlow2()

131 {

132 var article2 = document.getElementsByClassName("article2")[0];

133 article2.className = "";

134 var region2 = document.getElementsByClassName("region2 regionBox ")[0];

135 region2.className = "";

136 }

137

138 function testFlow3()

139 {

140 var d = document.getElementById("regionTextBlock3");

141 var parent = d.parentNode;

142 parent.removeChild(d);

143 parent.appendChild(d);

144 }

145

146 function testFlow4()

147 {

148 var d = document.getElementById("regionTextBlock5");

149 var d1 = document.createElement("div");

150 d1.innerHTML = "Green background text styled in region41.";

151 d1.className = "regionTextBlock";

152 d1.id = "regionTextBlock6";

153 d.parentNode.insertBefore(d1, d);

154

155 var lineBreak = document.createElement("br");

156 d.parentNode.insertBefore(lineBreak, d);

157 }

158

159 function testFlow5()

160 {

161 document.getElementById("region51").style.height = "100px";

162 document.getElementById("region52").style.height = "10px";

163 }

164

165 function testFlow6()

166 {

167 document.getElementById("region61").style.height = "50px";

168 }

169

170 function testFlow71()

171 {

172 document.getElementById("region71").style.height = "50px";

173 }

174

175 function testFlow72()

176 {

177 document.getElementById("region71").style.height = "100px";

178 }

179

180 function testFlow73()

181 {

182 document.getElementById("region71").style.height = "50px";

183 if (window.testRunner)

184 window.testRunner.notifyDone();

185 }

186

187 function runTests() {

188 testFlow1();

189 testFlow2();

190 testFlow3();

191 testFlow4();

192 testFlow5();

193 testFlow6();

194 testFlow71();

195 setTimeout(testFlow72, 100);

196 setTimeout(testFlow73, 200);

197 }

198 </script>

199 </body>

200 </html>

OLD	NEW