background-attachment-local-inline-002.html (1582B)
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 an inline 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-inline-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 an inline 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 span#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 vertical-align: top; 41 } 42 </style> 43 44 <script> 45 46 document.documentElement.addEventListener("TestRendered", () => { 47 window.scroll(0, document.body.offsetHeight); 48 document.documentElement.classList.remove('reftest-wait'); 49 }); 50 51 </script> 52 53 <div>F</div> 54 55 <div><span id="test-passed">P</span></div>