<!DOCTYPE html><htmlclass=reftest-wait><title>View transitions: different width container should keep aspect ratio (by default)</title><linkrel="help"href="https://drafts.csswg.org/css-view-transitions-1/"><linkrel="author"href="mailto:vmpstr@chromium.org"><linkrel="match"href="intrinsic-aspect-ratio-ref.html"><scriptsrc="/common/reftest-wait.js"></script><style>.spacer{height:10px;}.box{width:100px;height:100px;contain:paint;background:blue;}#target1{view-transition-name:target1;}#target2{view-transition-name:target2;}#hidden{view-transition-name:hidden;width:10px;height:10px;visibility:hidden;contain:paint;}/* We're verifying what we capture, so just display the new contents for 5 minutes. */html::view-transition-group(*){animation-duration:300s;}html::view-transition-new(*){animation:unset;opacity:1;}html::view-transition-old(*){animation:unset;opacity:0;}html::view-transition-group(target1){animation:unset;width:50px;border:2pxsolidblack;}html::view-transition-group(target2){animation:unset;width:200px;border:2pxsolidblack;}/* hide the root so we show transition background to ensure we're in a transition */html::view-transition-group(root){animation:unset;opacity:0;}html::view-transition{background:lightpink;}</style><divid=target1class=box></div><divclass=spacer></div><divid=target2class=box></div><divid=hidden></div><script>failIfNot(document.startViewTransition,"Missing document.startViewTransition");asyncfunctionrunTest(){document.startViewTransition(()=>{requestAnimationFrame(()=>requestAnimationFrame(takeScreenshot));});}onload=()=>requestAnimationFrame(()=>requestAnimationFrame(runTest));</script>
