capture-with-visibility-mixed-descendants-ref.html (718B)
1 <!doctype html> 2 <html> 3 <title>View transitions: visibility hidden/visible descendants (ref)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 7 <style> 8 :root { 9 scrollbar-width: none; 10 } 11 body { 12 background: pink; 13 } 14 .target { 15 width: 100px; 16 height: 100px; 17 view-transition-name: target; 18 background: blue; 19 } 20 .invisible { 21 top: 200px; 22 left: 200px; 23 width: 500px; 24 height: 500px; 25 position: relative; 26 background: red; 27 visibility: hidden; 28 } 29 .visible { 30 background: green; 31 width: 10px; 32 height: 10px; 33 visibility: visible; 34 } 35 36 </style> 37 38 <div class=target> 39 <div class=invisible><div class=visible></div></div> 40 </div>