background-attachment-local-block-002.html (1640B)
1 <!DOCTYPE html> 2 3 <html class="reftest-wait"> 4 5 <meta charset="UTF-8"> 6 7 <title>CSS Backgrounds and Borders Test: 'background-attachment: local' applied on a block element</title> 8 9 <!-- 10 11 Created: November 25th 2023 12 13 Last modified: December 17th 2023 14 15 --> 16 17 <link rel="author" title="Gérard Talbot" href="http://www.gtalbot.org/BrowserBugsSection/css21testsuite/"> 18 <link rel="help" href="https://www.w3.org/TR/css-backgrounds-3/#background-attachment"> 19 <link rel="help" href="https://www.w3.org/TR/cssom-view-1/#dom-window-scroll"> 20 <link rel="match" href="reference/background-attachment-local-block-002-ref.html"> 21 <link rel="stylesheet" type="text/css" href="/fonts/ahem.css"> 22 23 <meta name="assert" content="This test checks the interaction between a block element with a 'background-attachment: local' background-image and the expected behavior of the scroll() method which applies to the viewport window."> 24 25 <style> 26 body 27 { 28 color: transparent; 29 font-family: Ahem; 30 font-size: 50vh; 31 height: 50vh; 32 line-height: 2; 33 margin: 0px; 34 } 35 36 div#test-passed 37 { 38 background-attachment: local; 39 background-image: linear-gradient(to bottom, blue 25%, orange 25% 50%, lime 50% 75%, purple 75% 100%); 40 } 41 </style> 42 43 <script> 44 45 document.documentElement.addEventListener("TestRendered", () => { 46 window.scroll(0, document.body.offsetHeight); 47 document.documentElement.classList.remove('reftest-wait'); 48 }); 49 50 </script> 51 52 <div>F</div> 53 54 <!-- 55 Having more than 1 character may trigger 56 unneedlessly an horizontal scrollbar 57 --> 58 59 <div id="test-passed">P</div>