| <!DOCTYPE html> |
| <title>View transitions: capture elements with different size capture (ref)</title> |
| <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> |
| <link rel="author" href="mailto:vmpstr@chromium.org"> |
| <style> |
| .box { |
| color: red; |
| background: lightblue; |
| width: 100px; |
| height: 100px; |
| contain: paint; |
| position: absolute; |
| font-size: 30pt; |
| } |
| #e1 { |
| clip-path: circle(30%); |
| top: 20px; |
| left: 20px; |
| } |
| #e2 { |
| clip-path: ellipse(70% 30%); |
| top: 160px; |
| left: 20px; |
| } |
| #e3 { |
| filter: blur(5px); |
| top: 300px; |
| left: 20px; |
| } |
| body { background: lightpink; } |
| </style> |
| <div id=e1 class=box>one</div> |
| <div id=e2 class=box>two</div> |
| <div id=e3 class=box>three</div> |
| |
