test_scroll_on_display_contents.html (6477B)
1 <!DOCTYPE HTML> 2 <html> 3 <!-- 4 https://bugzilla.mozilla.org/show_bug.cgi?id=1790253 5 --> 6 <head> 7 <meta charset="utf-8"> 8 <title>Test for Bug 1790253</title> 9 <script src="/tests/SimpleTest/SimpleTest.js"></script> 10 <script src="/tests/SimpleTest/paint_listener.js"></script> 11 <script src="/tests/gfx/layers/apz/test/mochitest/apz_test_utils.js"></script> 12 <script src="/tests/gfx/layers/apz/test/mochitest/apz_test_native_event_utils.js"></script> 13 <link rel="stylesheet" href="/tests/SimpleTest/test.css"/> 14 </head> 15 <body> 16 <a target="_blank" href="https://bugzilla.mozilla.org/show_bug.cgi?id=1790253">Mozilla Bug 1790253</a> 17 <p id="display"></p> 18 <style> 19 .container { 20 height: 200px; 21 width: 200px; 22 overflow: scroll; 23 background-color: gray; 24 } 25 </style> 26 <script> 27 SimpleTest.waitForExplicitFinish(); 28 29 document.addEventListener("DOMContentLoaded", async () => { 30 await testShadowRoot(); 31 await testShadowRootInDisplayContent(); 32 await testNestedShadowRoot(); 33 await testDisplayContent(); 34 await testNestedDisplayContent(); 35 36 SimpleTest.finish(); 37 }); 38 39 async function testShadowRoot() { 40 // Structure: 41 // <div class="container"> 42 // #ShadowRoot - Listener 43 // <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"> 44 45 const container = document.createElement("div"); 46 container.classList.add("container"); 47 container.attachShadow({ mode: "open" }); 48 container.shadowRoot.innerHTML = ` 49 <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"></div> 50 `; 51 52 container.shadowRoot.addEventListener("wheel", e => { e.preventDefault(); }); 53 54 document.body.append(container); 55 await doTest(container); 56 container.remove(); 57 } 58 59 async function testShadowRootInDisplayContent() { 60 // Structure: 61 // <div class="container"> 62 // <div style="display: contents"> 63 // #ShadowRoot - Listener 64 // <div style="display: contents"> 65 // <div style="display: contents"> 66 // <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"> 67 68 const container = document.createElement("div"); 69 container.classList.add("container"); 70 container.innerHTML = ` 71 <div style="display: contents"></div> 72 `; 73 const displayContent = container.querySelector("div"); 74 displayContent.attachShadow({ mode: "open" }); 75 displayContent.shadowRoot.innerHTML = ` 76 <div style="display: contents"> 77 <div style="display: contents"> 78 <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"></div> 79 </div> 80 </div> 81 `; 82 displayContent.shadowRoot.addEventListener("wheel", e => { e.preventDefault(); }); 83 84 document.body.append(container); 85 await doTest(container); 86 container.remove(); 87 } 88 89 async function testNestedShadowRoot() { 90 // Structure: 91 // <div class="container"> 92 // <div style="display: contents"> 93 // #ShadowRoot - Listener 94 // <div style="display: contents"> 95 // #ShadowRoot 96 // <div style="display: contents"> 97 // <div style="display: contents"> 98 // <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"> 99 100 const container = document.createElement("div"); 101 container.classList.add("container"); 102 container.innerHTML = ` 103 <div style="display: contents"></div> 104 `; 105 106 const firstDisplayContent = container.querySelector("div"); 107 firstDisplayContent.attachShadow({ mode: "open" }); 108 firstDisplayContent.shadowRoot.innerHTML = ` 109 <div style="display: contents"></div> 110 `; 111 firstDisplayContent.shadowRoot.addEventListener("wheel", e => { e.preventDefault(); }); 112 113 const secondDisplayContent = firstDisplayContent.shadowRoot.querySelector("div"); 114 secondDisplayContent.attachShadow({ mode: "open" }); 115 firstDisplayContent.shadowRoot.innerHTML = ` 116 <div style="display: contents"> 117 <div style="display: contents"> 118 <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"></div> 119 </div> 120 </div> 121 `; 122 123 document.body.append(container); 124 await doTest(container); 125 container.remove(); 126 } 127 128 async function testDisplayContent() { 129 // Structure: 130 // <div class="container"> 131 // <div style="display: contents"> - Listener 132 // <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"> 133 134 const container = document.createElement("div"); 135 container.classList.add("container"); 136 container.innerHTML = ` 137 <div style="display: contents"> 138 <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"></div> 139 </div> 140 `; 141 142 const displayContent = container.querySelector("div"); 143 displayContent.addEventListener("wheel", e => { e.preventDefault(); }); 144 145 document.body.append(container); 146 await doTest(container); 147 container.remove(); 148 } 149 150 async function testNestedDisplayContent() { 151 // Structure: 152 // <div class="container"> 153 // <div style="display: contents"> - Listener 154 // <div style="display: contents"> 155 // <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"> 156 157 const container = document.createElement("div"); 158 container.classList.add("container"); 159 container.innerHTML = ` 160 <div style="display: contents"> 161 <div style="display: contents"> 162 <div style="height: 300px; background: linear-gradient(#e66465, #9198e5);"></div> 163 </div> 164 </div> 165 `; 166 167 const displayContent = container.querySelector("div"); 168 displayContent.addEventListener("wheel", e => { e.preventDefault(); }); 169 170 document.body.append(container); 171 await doTest(container); 172 container.remove(); 173 } 174 175 async function doTest(target) { 176 await promiseAllPaintsDone(); 177 178 const previousScroll = target.scrollTop; 179 180 await promiseMoveMouseAndScrollWheelOver(target, 1, 1, false); 181 await promiseApzFlushedRepaints(); 182 183 is(previousScroll, target.scrollTop, "The target should not be scrolled"); 184 } 185 </script> 186 </body> 187 </html>