break-inside-avoid-child.html (1407B)
1 <!DOCTYPE html> 2 <html class=reftest-wait> 3 <title>View transitions: break-inside: avoid child</title> 4 <link rel="help" href="https://www.w3.org/TR/css-view-transitions-1/"> 5 <link rel="author" href="mailto:vmpstr@chromium.org"> 6 <link rel="match" href="break-inside-avoid-child-ref.html"> 7 <meta name="fuzzy" content="maxDifference=0-5; totalPixels=0-1600"> 8 <script src="/common/reftest-wait.js"></script> 9 10 <style> 11 .old { 12 position: relative; 13 top: 300px; 14 left: 0; 15 background: lightblue; 16 } 17 .new { 18 position: relative; 19 top: 0; 20 left: 0; 21 background: green; 22 } 23 .columns { 24 columns: 2; 25 contain: layout; 26 border: 1px solid black; 27 view-transition-name: target; 28 } 29 30 .inner { 31 break-inside: avoid; 32 width: 300px; 33 height: 300px; 34 } 35 36 html::view-transition-group(root) { animation-duration: 300s; } 37 html::view-transition-old(target) { 38 animation: unset; 39 opacity: 1; 40 } 41 html::view-transition-new(target) { 42 animation: unset; 43 opacity: 0; 44 } 45 </style> 46 47 <div class="columns"> 48 <div id="inner" class="inner old"></div> 49 </div> 50 51 <script> 52 failIfNot(document.startViewTransition, "Missing document.startViewTransition"); 53 54 function runTest() { 55 let transition = document.startViewTransition(() => { 56 inner.classList.replace("old", "new"); 57 }); 58 transition.ready.then(() => requestAnimationFrame(takeScreenshot)); 59 } 60 61 onload = () => requestAnimationFrame(() => requestAnimationFrame(runTest)); 62 </script>