OLD | NEW |
| (Empty) |
1 <!DOCTYPE html> | |
2 <html> | |
3 <head> | |
4 <style> | |
5 .composited { | |
6 -webkit-transform: translateZ(0); | |
7 } | |
8 | |
9 .outer { | |
10 position: absolute; | |
11 width: 500px; | |
12 height: 300px; | |
13 top: 60px; | |
14 left: 100px; | |
15 background-color: yellow; | |
16 } | |
17 | |
18 .outlined { | |
19 outline: red auto thin; | |
20 width: 150px; | |
21 height: 50px; | |
22 background-color: lightgrey; | |
23 } | |
24 | |
25 .inner { | |
26 width: 80px; | |
27 height: 100px; | |
28 } | |
29 </style> | |
30 </head> | |
31 <body> | |
32 <!-- The focus ring parts for the sub-layers should be at correct position, | |
33 regardless whether the inner layer is composited. --> | |
34 <div class="composited outer"> | |
35 <div class="outlined"> | |
36 <div class="composited inner"></div> | |
37 </div> | |
38 </div> | |
39 </body> | |
40 </html> | |
41 | |
OLD | NEW |