fractional-box-with-overflow-children-old.html (1717B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: fractional box with overflow children -- old content</title> 4 <link rel="help" href="https://drafts.csswg.org/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="fractional-box-with-overflow-children-ref.html"> 7 <!-- subpixel differences are ok in this test (in highdpi), but channel difference 8 should not be perceptible --> 9 <meta name=fuzzy content="maxDifference=0-3; totalPixels=0-100"> 10 <script src="/common/reftest-wait.js"></script> 11 <style> 12 .box { 13 position: relative; 14 margin: 15px; 15 background: green; 16 width: 100.125px; 17 height: 50.875px; 18 } 19 .shift { 20 left: 0.4px; 21 } 22 .child1 { 23 position: absolute; 24 left: -2px; 25 width: 110px; 26 height: 25px; 27 background: darkgreen; 28 } 29 .child2 { 30 position: absolute; 31 top: -3px; 32 width: 50px; 33 height: 55px; 34 background: darkgreen; 35 } 36 html::view-transition-group(*) { animation-duration: 300s; } 37 html::view-transition-new(*) { animation: unset; opacity: 0; } 38 html::view-transition-old(*) { animation: unset; opacity: 1; } 39 html::view-transition-group(root) { animation: unset; opacity: 0; } 40 html::view-transition { background: lightpink; } 41 </style> 42 <div class="box" style="view-transition-name: one"><div class="child1"></div><div class="child2"></div></div> 43 <div class="box shift" style="view-transition-name: two"><div class="child1"></div><div class="child2"></div></div> 44 <script> 45 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 46 47 async function runTest() { 48 document.startViewTransition().ready.then(takeScreenshot); 49 } 50 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 51 </script>