OLD | NEW |
1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
2 <html> | 2 <html> |
3 <head> | 3 <head> |
4 <script src="../../resources/run-after-display.js"></script> | 4 <script src="../../resources/run-after-display.js"></script> |
5 <style> | 5 <style> |
6 div { | 6 div { |
7 position: absolute; | 7 position: absolute; |
8 z-index: 1; | 8 z-index: 1; |
9 width: 100px; | 9 width: 100px; |
10 height: 100px; | 10 height: 100px; |
11 } | 11 } |
12 | 12 |
13 .composited { | 13 .composited { |
14 -webkit-transform: translatez(0); | 14 transform: translatez(0); |
15 } | 15 } |
16 | 16 |
17 .underneath { | 17 .underneath { |
18 top: 60px; | 18 top: 60px; |
19 left: 60px; | 19 left: 60px; |
20 background-color: gray; | 20 background-color: gray; |
21 } | 21 } |
22 | 22 |
23 .overlap1 { | 23 .overlap1 { |
24 top: 140px; | 24 top: 140px; |
25 left: 140px; | 25 left: 140px; |
26 background-color: blue; | 26 background-color: blue; |
27 } | 27 } |
28 | 28 |
29 .overlap2 { | 29 .overlap2 { |
30 top: 220px; | 30 top: 220px; |
31 left: 220px; | 31 left: 220px; |
32 background-color: lime; | 32 background-color: lime; |
33 } | 33 } |
34 | 34 |
35 .overlap3 { | 35 .overlap3 { |
36 top: 300px; | 36 top: 300px; |
37 left: 300px; | 37 left: 300px; |
38 background-color: magenta; | 38 background-color: magenta; |
39 } | 39 } |
40 | 40 |
41 div:hover { | 41 div:hover { |
42 background-color: green; | 42 background-color: green; |
43 -webkit-transform: none; | 43 transform: none; |
44 } | 44 } |
45 | 45 |
46 .green { | 46 .green { |
47 background-color: green; | 47 background-color: green; |
48 } | 48 } |
49 | 49 |
50 #testResults { | 50 #testResults { |
51 display: none; | 51 display: none; |
52 } | 52 } |
53 | 53 |
(...skipping 51 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
105 <pre id="Case1"></pre> | 105 <pre id="Case1"></pre> |
106 | 106 |
107 CASE 2, The original composited layer is no longer composited, which then al
so removes all squashing layers. The important point is that there should be an
appropriate repaint to the root GraphicsLayer: | 107 CASE 2, The original composited layer is no longer composited, which then al
so removes all squashing layers. The important point is that there should be an
appropriate repaint to the root GraphicsLayer: |
108 <pre id="Case2"></pre> | 108 <pre id="Case2"></pre> |
109 | 109 |
110 </div> | 110 </div> |
111 | 111 |
112 </body> | 112 </body> |
113 | 113 |
114 </html> | 114 </html> |
OLD | NEW |