content-with-inline-child-ref.html (714B)
1 <!DOCTYPE html> 2 <title>View transitions: element with inline child (ref)</title> 3 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 4 <link rel="stylesheet" href="/fonts/ahem.css"> 5 <link rel="author" href="mailto:bokan@chromium.org"> 6 <style> 7 #target { 8 width: 100px; 9 height: 100px; 10 overflow-clip-margin: 500px; 11 contain: paint; 12 view-transition-name: target; 13 background-color: grey; 14 } 15 16 #child { 17 position: relative; 18 left: 100px; 19 top: 100px; 20 color: lightgreen; 21 background-color: darkgreen; 22 } 23 24 #innerchild { 25 position: relative; 26 left: 100px; 27 } 28 </style> 29 30 <div id="target" style="font: 25px/1 Ahem"> 31 <span id="child">INLINE<br><span id="innerchild">BOX</span></span> 32 </div>