blob: 95c610564c4059280945e7690f85efc0cdb09ec1 [file] [log] [blame]
simon.fraser@apple.com7099b932014-11-09 19:42:17 +00001<!DOCTYPE html>
2<html>
3<head>
4<style>
5 .wrapper {
6 position: absolute;
7 clip: rect(0, 20px, 50px, 0);
8 background-color: gray;
9 width: 300px;
10 height: 250px;
11 margin: 5px;
12 border: 1px solid black;
13 -webkit-box-reflect: right 10px;
14 }
15
16 .wrapper.non-uniform {
17 clip: rect(0, 50px, 20px, 0);
18 }
19
20 .wrapper > .obscurer {
21 border-radius: 50%;
22 }
23 .non-uniform.wrapper > .obscurer {
24 border-top-left-radius: 300px 100px;
25 border-bottom-right-radius: 250px 10px;
26 }
27
28 .obscurer {
29 position: absolute;
30 width: 100%;
31 height: 100%;
32 background-color: green;
33 }
34
35 .composited {
36 -webkit-transform: translateZ(0);
37 }
38
39 .box {
40 position: absolute;
41 top: 100px;
42 left: 100px;
43 width: 100px;
44 height: 100px;
45 background-color: blue;
46 }
47</style>
48</head>
49<body>
50
51 <div class="wrapper">
52 <div class="composited box"></div>
53 <div class="obscurer"></div>
54 </div>
55
56 <div class="wrapper non-uniform" style="top: 100px;">
57 <div class="composited box"></div>
58 <div class="obscurer"></div>
59 </div>
60</body>
61</html>