snapshot-containing-block-includes-scrollbar-gutter-ref.html (756B)
1 <!DOCTYPE html> 2 <html> 3 <title>View transitions: snapshot containing block includes scrollbar gutters (ref)</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:bokan@chromium.org"> 6 <style> 7 :root { 8 scrollbar-gutter: stable both-edges 9 } 10 #view-transition-mock { 11 position: fixed; 12 left: 0; 13 top: 0; 14 width: 100%; 15 height: 100%; 16 background-color: palegreen; 17 } 18 #target { 19 position: absolute; 20 top: 100px; 21 left: 0px; 22 width: 200px; 23 height: 200px; 24 background-color: limegreen; 25 } 26 </style> 27 <div id="view-transition-mock"> 28 <!-- 29 This box should be a scrollbar's width from the left edge and 30 exactly aligned with the light green background. 31 --> 32 <div id="target"> 33 </div> 34 </div>