[CSSRegions] Add region styling test for region css rules specificity/position
[WebKit-https.git] / LayoutTests / fast / regions / region-style-rule-specificity-expected.html
1 <!doctype html>
2 <html>
3         <head>
4                 <style>
5                 body {
6                         font-family: monospace;
7                         font-size: 1em;
8                 }
9                 p {
10                         margin: 0;
11                         line-height: 1em;
12                 }
13                 .container {
14                         background-color: lightgray;
15                         width: 15em;
16                         height: 5em;
17                 }
18                 .light {
19                         background-color: lightgreen;
20                 }
21                 .lime {
22                         background-color: lime;
23                 }
24                 .green {
25                         background-color: green;
26                 }
27                 </style>
28         </head>
29         <body>
30                 <h1>Testing CSS selectors specificity/position is respected when using @region styling</h1>
31
32                 Selector specificity in @region rule
33                 <div class='container' id='r1'>
34                         <p class='light'>Plain paragraph</p>
35                         <p class='lime'>Styled with class</p>
36                         <p class='green'>Styled with ID</p>
37                 </div>
38                 Selector position in @region rule
39                 <div class='container' id='r2'>
40                         <p class='light'>Plain paragraph</p>
41                         <p class='lime'>Styled with class</p>
42                         <p class='green'>Styled with ID</p>
43                 </div>
44                 More specific selector in flowed content
45                 <div class='container' id='r3'>
46                         <p class='lime'>Class in content</p>
47                         <p class='lime'>ID in content</p>
48                         <p class='lime'>ID in content</p>
49                 </div>
50                 Style attribute in flowed content
51                 <div class='container' id='r4'>
52                         <p class='lime'>Element style in region</p>
53                         <p class='lime'>ID style in region</p>
54                         <p class='lime'>Class in region</p>
55                 </div>
56         </body>
57 </html>