third_party/WebKit/LayoutTests/scrollbars/scrollbar-pointer-events.html - chromium/src - Git at Google

 <!DOCTYPE html>
 <html>
 <body>
 <p>Test the effect of pointer-events on overflow scrollbars.</p>

 <div id="result">FAIL: script didn't run to completion.</div>

 <div id="div1" style="position: absolute; top: 100px; width: 130px; height: 340px; background-color: SeaShell; overflow: none;">
     Div 1
 </div>
 <div id="div2" style="position: absolute; top: 120px; width: 100px; height: 300px; background-color: Salmon; overflow: auto; pointer-events: all; z-index: 1;">
 <div id="div2Content" style="width: 200%; height: 500px;">
     Div 2
 </div>
 </div>

 <div id="div3" style="position: absolute; top: 100px; left: 300px; width: 300px; height: 300px; background-color: PaleTurquoise; overflow: none;">
     Div 3
     <div id="div4" style="position: absolute; top: 30px; left: 30px; width: 240px; height: 240px; background-color: MediumTurquoise; overflow: auto; pointer-events: none;">
     <div id="div4Content" style="width: 200%; height: 200%;">
         Div 4
         <div id="div5" style="position: absolute; top: 30px; left: 30px; width: 180px; height: 180px; background-color: DarkSeaGreen; overflow: auto; pointer-events: all;">
         <div id="div5Content" style="width: 200%; height: 200%;">
             Div 5
         </div>
         </div>
     </div>
     </div>
 </div>

 <script>

     if (window.testRunner)
         testRunner.dumpAsText();

     var div1 = document.getElementById("div1");
     var div2 = document.getElementById("div2");

     // First sanity check points that should be within div2's vertical and horizontal scrollbars
     // when it has pointer-events:all.
     // Subtract 5px from the right (bottom) edge to get a point within the vertical (horizontal) scrollbar.
     var verticalPoint = [div2.offsetLeft + div2.offsetWidth - 5, div2.offsetTop + Math.floor(div2.offsetHeight / 2)];
     var horizontalPoint = [div2.offsetLeft + Math.floor(div2.offsetWidth / 2), div2.offsetTop + div2.offsetHeight - 5];
     var elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
     var elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
     if (elem.id != div2.id || elem2.id != div2.id) {
         document.getElementById("result").firstChild.data = "FAILURE: The element at points (" + verticalPoint + ") and (" + horizontalPoint + ") needs to be div2. You may need to turn on overflow scrollbars temporarily. (On Mac: Change the 'Show scroll bars' setting to 'Always'.)";
         throw "failure";
     }

     // Apply pointer-events:visible to div2.
     div2.style.pointerEvents = "visible";
     if (window.getComputedStyle(div2).visibility != "visible") {
         document.getElementById("result").firstChild.data = "FAILURE: div2 needs to be visible.";
         throw "failure";
     }
     elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
     elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
     if (elem.id != div2.id || elem2.id != div2.id) {
         document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:visible and visibility:visible applied to div2, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div2.";
         throw "failure";
     }

     // Hide div2 by applying visibility:hidden. Now when we hit test div2's scrollbars, we should
     // get div1 instead.
     // http://lists.w3.org/Archives/Public/www-style/2013Nov/0338.html
     div2.style.visibility = "hidden";
     elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
     elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
     if (elem.id != div1.id || elem2.id != div1.id) {
         document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:visible and visibility:hidden applied to div2, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div1.";
         throw "failure";
     }

     var div3 = document.getElementById("div3");
     var div4 = document.getElementById("div4");
     var div5 = document.getElementById("div5");

     // div4 has pointer-events:none and scrollbars. Overflow scrollbars of an element having
     // pointer-events:none do not participate in hit testing.
     // http://lists.w3.org/Archives/Public/www-style/2013Nov/0338.html
     var bcr = div4.getBoundingClientRect();
     verticalPoint = [Math.floor(bcr.right - 5), Math.floor(bcr.top + bcr.height / 2)];
     horizontalPoint = [Math.floor(bcr.left + bcr.width / 2), Math.floor(bcr.bottom - 5)];
     elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
     elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
     if (elem.id != div3.id || elem2.id != div3.id) {
         document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:none applied to div4, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div3.";
         throw "failure";
     }

     // However, descendants of pointer-events:none elements having pointer-events:all do
     // participate in hit testing.
     bcr = div5.getBoundingClientRect();
     verticalPoint = [Math.floor(bcr.right - 5), Math.floor(bcr.top + bcr.height / 2)];
     horizontalPoint = [Math.floor(bcr.left + bcr.width / 2), Math.floor(bcr.bottom - 5)];
     elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
     elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
     if (elem.id != div5.id || elem2.id != div5.id) {
         document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:all applied to div5, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div5 even though it is a descendant of a pointer-events:none element.";
         throw "failure";
     }

     document.getElementById("result").firstChild.data = "SUCCESS";

 </script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<body>
	<p>Test the effect of pointer-events on overflow scrollbars.</p>

	<div id="result">FAIL: script didn't run to completion.</div>

	<div id="div1" style="position: absolute; top: 100px; width: 130px; height: 340px; background-color: SeaShell; overflow: none;">
	Div 1
	</div>
	<div id="div2" style="position: absolute; top: 120px; width: 100px; height: 300px; background-color: Salmon; overflow: auto; pointer-events: all; z-index: 1;">
	<div id="div2Content" style="width: 200%; height: 500px;">
	Div 2
	</div>
	</div>

	<div id="div3" style="position: absolute; top: 100px; left: 300px; width: 300px; height: 300px; background-color: PaleTurquoise; overflow: none;">
	Div 3
	<div id="div4" style="position: absolute; top: 30px; left: 30px; width: 240px; height: 240px; background-color: MediumTurquoise; overflow: auto; pointer-events: none;">
	<div id="div4Content" style="width: 200%; height: 200%;">
	Div 4
	<div id="div5" style="position: absolute; top: 30px; left: 30px; width: 180px; height: 180px; background-color: DarkSeaGreen; overflow: auto; pointer-events: all;">
	<div id="div5Content" style="width: 200%; height: 200%;">
	Div 5
	</div>
	</div>
	</div>
	</div>
	</div>

	<script>

	if (window.testRunner)
	testRunner.dumpAsText();

	var div1 = document.getElementById("div1");
	var div2 = document.getElementById("div2");

	// First sanity check points that should be within div2's vertical and horizontal scrollbars
	// when it has pointer-events:all.
	// Subtract 5px from the right (bottom) edge to get a point within the vertical (horizontal) scrollbar.
	var verticalPoint = [div2.offsetLeft + div2.offsetWidth - 5, div2.offsetTop + Math.floor(div2.offsetHeight / 2)];
	var horizontalPoint = [div2.offsetLeft + Math.floor(div2.offsetWidth / 2), div2.offsetTop + div2.offsetHeight - 5];
	var elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
	var elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
	if (elem.id != div2.id \|\| elem2.id != div2.id) {
	document.getElementById("result").firstChild.data = "FAILURE: The element at points (" + verticalPoint + ") and (" + horizontalPoint + ") needs to be div2. You may need to turn on overflow scrollbars temporarily. (On Mac: Change the 'Show scroll bars' setting to 'Always'.)";
	throw "failure";
	}

	// Apply pointer-events:visible to div2.
	div2.style.pointerEvents = "visible";
	if (window.getComputedStyle(div2).visibility != "visible") {
	document.getElementById("result").firstChild.data = "FAILURE: div2 needs to be visible.";
	throw "failure";
	}
	elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
	elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
	if (elem.id != div2.id \|\| elem2.id != div2.id) {
	document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:visible and visibility:visible applied to div2, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div2.";
	throw "failure";
	}

	// Hide div2 by applying visibility:hidden. Now when we hit test div2's scrollbars, we should
	// get div1 instead.
	// http://lists.w3.org/Archives/Public/www-style/2013Nov/0338.html
	div2.style.visibility = "hidden";
	elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
	elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
	if (elem.id != div1.id \|\| elem2.id != div1.id) {
	document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:visible and visibility:hidden applied to div2, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div1.";
	throw "failure";
	}

	var div3 = document.getElementById("div3");
	var div4 = document.getElementById("div4");
	var div5 = document.getElementById("div5");

	// div4 has pointer-events:none and scrollbars. Overflow scrollbars of an element having
	// pointer-events:none do not participate in hit testing.
	// http://lists.w3.org/Archives/Public/www-style/2013Nov/0338.html
	var bcr = div4.getBoundingClientRect();
	verticalPoint = [Math.floor(bcr.right - 5), Math.floor(bcr.top + bcr.height / 2)];
	horizontalPoint = [Math.floor(bcr.left + bcr.width / 2), Math.floor(bcr.bottom - 5)];
	elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
	elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
	if (elem.id != div3.id \|\| elem2.id != div3.id) {
	document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:none applied to div4, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div3.";
	throw "failure";
	}

	// However, descendants of pointer-events:none elements having pointer-events:all do
	// participate in hit testing.
	bcr = div5.getBoundingClientRect();
	verticalPoint = [Math.floor(bcr.right - 5), Math.floor(bcr.top + bcr.height / 2)];
	horizontalPoint = [Math.floor(bcr.left + bcr.width / 2), Math.floor(bcr.bottom - 5)];
	elem = document.elementFromPoint(verticalPoint[0], verticalPoint[1]);
	elem2 = document.elementFromPoint(horizontalPoint[0], horizontalPoint[1]);
	if (elem.id != div5.id \|\| elem2.id != div5.id) {
	document.getElementById("result").firstChild.data = "FAILURE: With pointer-events:all applied to div5, (" + verticalPoint + ") and (" + horizontalPoint + ") should be div5 even though it is a descendant of a pointer-events:none element.";
	throw "failure";
	}

	document.getElementById("result").firstChild.data = "SUCCESS";

	</script>
	</body>
	</html>