|
1 <html> |
|
2 <script> |
|
3 window.onload = () => { |
|
4 window.opener.postMessage('ready', '*') |
|
5 } |
|
6 </script> |
|
7 <style> |
|
8 .inheritable-rule { |
|
9 font-size: 15px; |
|
10 } |
|
11 .uninheritable-rule { |
|
12 background-color: #f06; |
|
13 } |
|
14 @media screen { |
|
15 #mediaqueried { |
|
16 background-color: #f06; |
|
17 } |
|
18 } |
|
19 #svgcontent rect { |
|
20 fill: rgb(1,2,3); |
|
21 } |
|
22 </style> |
|
23 <link type="text/css" rel="stylesheet" href="inspector-styles-data.css"></link> |
|
24 <body> |
|
25 <h1>Style Actor Tests</h1> |
|
26 <!-- Inheritance checks --> |
|
27 <div id="inheritable-rule-uninheritable-style" class="inheritable-rule" style="background-color: purple"> |
|
28 <div id="inheritable-rule-inheritable-style" class="inheritable-rule" style="color: blue"> |
|
29 <div id="uninheritable-rule-uninheritable-style" class="uninheritable-rule" style="background-color: green"> |
|
30 <div id="uninheritable-rule-inheritable-style" class="uninheritable-rule" style="color: red"> |
|
31 <div id="test-node"> |
|
32 Here is the test node. |
|
33 </div> |
|
34 </div> |
|
35 </div> |
|
36 </div> |
|
37 </div> |
|
38 |
|
39 <!-- Computed checks --> |
|
40 <div id="computed-parent" class="external-rule inheritable-rule uninheritable-rule" style="color: red;"> |
|
41 <div id="computed-test-node" class="external-rule"> |
|
42 Here is the test node. |
|
43 </div> |
|
44 </div> |
|
45 |
|
46 <!-- Matched checks --> |
|
47 <div id="matched-parent" class="external-rule inheritable-rule uninheritable-rule" style="color: red;"> |
|
48 <div id="matched-test-node" style="font-size: 10px" class="external-rule"> |
|
49 Here is the test node. |
|
50 </div> |
|
51 </div> |
|
52 |
|
53 <div id="mediaqueried"> |
|
54 Screen mediaqueried. |
|
55 </div> |
|
56 |
|
57 <div id="svgcontent"> |
|
58 <svg><rect></rect></svg> |
|
59 </div> |
|
60 |
|
61 </body> |
|
62 </html> |