local-attachment-content-box-scroll.html (1548B)
1 <!doctype html> 2 <html class="reftest-wait"> 3 <title>CSS Backgrounds: local attachment content-box background scroll with padding</title> 4 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-attachment"> 5 <link rel="help" href="https://drafts.csswg.org/css-backgrounds-3/#the-background-clip"> 6 <link rel="match" href="local-attachment-content-box-scroll-ref.html"> 7 <script src="/common/reftest-wait.js"></script> 8 <script src="/common/rendering-utils.js"></script> 9 <style> 10 .container { 11 width: 100px; 12 height: 100px; 13 box-sizing: border-box; 14 overflow: hidden; 15 border: 1px solid black; 16 padding: 20px; 17 background-color: blue; 18 background-attachment: local; 19 background-clip: content-box; 20 display: none; 21 } 22 .content { 23 width: 400px; 24 height: 400px; 25 } 26 </style> 27 <div id="container1" class="container"> 28 <div class="content"></div> 29 </div> 30 <div id="container2" class="container"> 31 <div class="content"></div> 32 </div> 33 <div id="container3" class="container"> 34 <div class="content"></div> 35 </div> 36 <div id="container4" class="container"> 37 <div class="content"></div> 38 </div> 39 <script> 40 container1.style.display = 'block'; 41 container2.style.display = 'block'; 42 container2.scrollTo(40, 40); 43 container3.style.display = 'block'; 44 container3.scrollTo(260, 260); 45 container4.style.display = 'block'; 46 container4.scrollTo(400, 400); 47 waitForAtLeastOneFrame().then(() => { 48 container1.scrollTo(40, 40); 49 container2.scrollTo(0, 0); 50 container3.scrollTo(400, 400); 51 container4.scrollTo(260, 260); 52 takeScreenshot(); 53 }); 54 </script>