new-content-captures-different-size-ref.html (700B)
1 <!DOCTYPE html> 2 <title>View transitions: capture elements with different size capture (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="author" href="mailto:vmpstr@chromium.org"> 5 <style> 6 .box { 7 color: red; 8 background: lightgreen; 9 width: 100px; 10 height: 100px; 11 contain: paint; 12 position: absolute; 13 font-size: 30pt; 14 } 15 #e1 { 16 clip-path: circle(30%); 17 top: 20px; 18 left: 20px; 19 } 20 #e2 { 21 clip-path: ellipse(70% 30%); 22 top: 160px; 23 left: 20px; 24 } 25 #e3 { 26 filter: blur(5px); 27 top: 300px; 28 left: 20px; 29 } 30 31 body { background: lightpink; } 32 </style> 33 <div id=e1 class=box>one</div> 34 <div id=e2 class=box>two</div> 35 <div id=e3 class=box>three</div>