1413073-ref.html (1039B)
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 5 <meta charset="utf-8"> 6 <title>The ASR for the opacity item is the root scroll frame instead of the subframe.</title> 7 8 <style> 9 10 .outer { 11 /* avoid event regions messing with our demonstration */ 12 pointer-events: none; 13 /* make sure the .outer opacity item has the root scroll frame as its ASR */ 14 background: rgba(0, 0, 0, 0.1); 15 } 16 17 .opacity { 18 opacity: 0.8; 19 } 20 21 .scrollFrameWrapper { 22 /* clips off .scrollFrame's scrollbar */ 23 margin: 100px; 24 overflow: hidden; 25 } 26 27 .scrollFrame { 28 height: 300px; 29 margin-right: -20px; 30 padding-right: 20px; 31 overflow: hidden; 32 } 33 34 .scrolledContents { 35 height: 1000px; 36 width: 200px; 37 border: 5px solid black; 38 pointer-events: auto; 39 } 40 41 </style> 42 43 </head><body> 44 45 <div class="opacity outer"> 46 <div class="opacity inner"> 47 <div class="scrollFrameWrapper"> 48 <div class="scrollFrame"> 49 <div class="scrolledContents"></div> 50 </div> 51 </div> 52 </div> 53 </div> 54 </body></html>