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 fox 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 | |
15 #article1 { -webkit-flow-into: flow1; } | |
16 #region1 { -webkit-flow-from: flow1; } | |
17 @-webkit-region #region1 { #regionTextBlock1 { background-color: gre
en; } } | |
18 | |
19 #article2 { -webkit-flow-into: flow2; } | |
20 #region21, #region22 { -webkit-flow-from: flow2; } | |
21 @-webkit-region #region21 { #regionTextBlock2 { background-color: gr
een; } } | |
22 @-webkit-region #region22 { #regionTextBlock3 { background-color: li
me; } } | |
23 | |
24 #article3 { -webkit-flow-into: flow3; } | |
25 #region31, #region32 { -webkit-flow-from: flow3; } | |
26 @-webkit-region #region31 { #regionTextBlock4 { background-color: gr
een; } } | |
27 @-webkit-region #region32 { #regionTextBlock4 { background-color: li
me; } } | |
28 | |
29 #article41 { -webkit-flow-into: flow41; } | |
30 #region41 { -webkit-flow-from: flow41; } | |
31 #article42 { -webkit-flow-into: flow42; } | |
32 #region42 { -webkit-flow-from: flow42; } | |
33 @-webkit-region #region41 { | |
34 #regionTextBlock5 { background-color: green; } | |
35 #regionTextBlock6 { background-color: green; } | |
36 } | |
37 @-webkit-region #region42 { | |
38 #regionTextBlock7 { background-color: lime; } | |
39 #regionTextBlock8 { background-color: lime; } | |
40 } | |
41 | |
42 #article5 { -webkit-flow-into: flow5; } | |
43 #region5 { -webkit-flow-from: flow5; } | |
44 @-webkit-region #region5 { | |
45 #regionTextBlock9 { background-color: green; } | |
46 } | |
47 | |
48 #article6 { -webkit-flow-into: flow6; } | |
49 #region6 { -webkit-flow-from: flow6; } | |
50 @-webkit-region #region6 { #regionTextBlock10 { background-color: tr
ansparent; } } | |
51 | |
52 #article7 { -webkit-flow-into: flow7; } | |
53 #region71 { -webkit-flow-from: flow7; } | |
54 #region72 { -webkit-flow-from: flow7; } | |
55 #regionTextBlock11 { background-color: green; } | |
56 @-webkit-region #region71 { #regionTextBlock11 { background-color: t
ransparent; } } | |
57 </style> | |
58 </head> | |
59 <body class="body"> | |
60 <!-- Style a single paragraph in a single region --> | |
61 <div id="article1"> | |
62 <div class="regionTextBlock" id="regionTextBlock1">Green background
text styled in region1.</div> | |
63 </div> | |
64 <div id="region1" class="regionBox1"></div> | |
65 | |
66 <!-- Style separate paragraphs in different regions --> | |
67 <div id="article2"> | |
68 <div class="regionTextBlock" id="regionTextBlock2">Green background
text styled in region21.</div></br> | |
69 <div class="regionTextBlock" id="regionTextBlock3">Lime background t
ext styled in region22.</div> | |
70 </div> | |
71 <div id="region21" class="regionBox"></div> | |
72 <div id="region22" class="regionBox1"></div> | |
73 | |
74 <!-- Style a single paragraph in different regions --> | |
75 <div id="article3"> | |
76 <div class="regionTextBlock" id="regionTextBlock4">Green background
text styled in region31. Lime background text styled in region32. Lime backgroun
d text styled in region32. Green background text styled in region31.</div></br> | |
77 </div> | |
78 <div id="region31" class="regionBox1"></div> | |
79 <div id="region32" class="regionBox"></div> | |
80 <div id="region31" class="regionBox1"></div> | |
81 | |
82 <!-- Style paragraphs in alternate regions --> | |
83 <div id="article41"> | |
84 <div class="regionTextBlock" id="regionTextBlock5">Green background
text styled in region 41.</div></br> | |
85 <div class="regionTextBlock" id="regionTextBlock6">Green background
text styled in region 41.</div></br> | |
86 </div> | |
87 <div id="article42"> | |
88 <div class="regionTextBlock" id="regionTextBlock7">Lime background t
ext styled in region 42.</div></br> | |
89 <div class="regionTextBlock" id="regionTextBlock8">Lime background t
ext styled in region 42.</div></br> | |
90 </div> | |
91 <div id="region41" class="regionBox"></div> | |
92 <div id="region42" class="regionBox"></div> | |
93 <div id="region41" class="regionBox1"></div> | |
94 <div id="region42" class="regionBox1"></div> | |
95 | |
96 <!-- Style paragraph in region, text also styled. --> | |
97 <div id="article5"> | |
98 <div class="regionTextBlock" id="regionTextBlock9"><i><b>Green backg
round, styled text in region5.</b></i></div> | |
99 </div> | |
100 <div id="region5" class="regionBox1"></div> | |
101 | |
102 <!-- Style paragraph in region, transparent background. --> | |
103 <div id="article6"> | |
104 <div class="regionTextBlock" id="regionTextBlock10">Transparent back
ground text in region6.</b></i></div> | |
105 </div> | |
106 <div id="region6" class="regionBox1"></div> | |
107 | |
108 <!-- Style paragraph in two regions, first region resets background, sec
ond region should have background --> | |
109 <div id="article7"> | |
110 <div class="regionTextBlock" id="regionTextBlock11">Transparent back
ground text in region71. Green background text in region 72.</div> | |
111 </div> | |
112 <div id="region71" class="regionBox1"></div> | |
113 <div id="region72" class="regionBox1"></div> | |
114 </body> | |
115 </html> | |
OLD | NEW |