Chromium Code Reviews
chromiumcodereview-hr@appspot.gserviceaccount.com (chromiumcodereview-hr) | Please choose your nickname with Settings | Help | Chromium Project | Gerrit Changes | Sign out
(151)

Issues Search
    My Issues | Starred     Open | Closed | All

Unified Diff: LayoutTests/scrollbars/scrollbar-pointer-events.html

Issue 68243009: Fix RenderBlock::nodeAtPoint() for scrollbars of hidden and pointer-events:none elements (Closed) Base URL: https://chromium.googlesource.com/chromium/blink.git@master
Patch Set: Test the effect of pointer-events:none on scrollbars Created 7 years, 1 month ago
Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.
Jump to:
View side-by-side diff with in-line comments
Download patch
« no previous file with comments | « no previous file | LayoutTests/scrollbars/scrollbar-pointer-events-expected.txt » ('j') | no next file with comments »
Expand Comments ('e') | Collapse Comments ('c') | Show Comments Hide Comments ('s')
Index: LayoutTests/scrollbars/scrollbar-pointer-events.html
diff --git a/LayoutTests/scrollbars/scrollbar-pointer-events.html b/LayoutTests/scrollbars/scrollbar-pointer-events.html
new file mode 100644
index 0000000000000000000000000000000000000000..677c597f66fcaf12e423d63c7d7695159973446c
--- /dev/null
+++ b/LayoutTests/scrollbars/scrollbar-pointer-events.html
@@ -0,0 +1,108 @@
+<!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>
« no previous file with comments | « no previous file | LayoutTests/scrollbars/scrollbar-pointer-events-expected.txt » ('j') | no next file with comments »

Powered by Google App Engine
This is Rietveld 408576698