LayoutTests/touchadjustment/nested-shadow-node.html - Issue 370843002: Allow touch adjustment to return Shadow DOM node.

Side by Side Diff: LayoutTests/touchadjustment/nested-shadow-node.html

Issue 370843002: Allow touch adjustment to return Shadow DOM node. (Closed) Base URL: svn://svn.chromium.org/blink/trunk

Patch Set: Add simple shadow dom test Created 6 years, 5 months 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 unified diff | Download patch | Annotate | Revision Log

OLD	NEW
1 <!DOCTYPE html>	1 <!DOCTYPE html>

2 <html>	2 <html>

3 <head>	3 <head>

4 <title>Touch Adjustment : Touch adjustment does not target shadow DOM elemen ts - bug 89556</title>	4 <title>Touch Adjustment : Touch adjustment does not target shadow DOM elemen ts - bug 89556</title>

5 <script src="../resources/js-test.js"></script>	5 <script src="../resources/js-test.js"></script>

	6 <script src="resources/touchadjustment.js"></script>

6 <style>	7 <style>

7 #targetDiv {	8 #targetDiv {

8 background: #00f;	9 background: #00f;

9 height: 100px;	10 height: 100px;

10 position: relative;	11 position: relative;

11 width: 100px;	12 width: 100px;

12 }	13 }

13 </style>	14 </style>

14	15

15 </head>	16 </head>

(...skipping 28 matching lines...) Expand all Loading...
44 shadowDiv.style.height = "20px";	45 shadowDiv.style.height = "20px";

45 shadowDiv.style.background = "#ff0";	46 shadowDiv.style.background = "#ff0";

46 shadowDiv.style.position = "absolute";	47 shadowDiv.style.position = "absolute";

47 shadowDiv.style.right = "10px";	48 shadowDiv.style.right = "10px";

48 shadowDiv.style.top = "10px";	49 shadowDiv.style.top = "10px";

49 shadowDiv.addEventListener('click', function() {}, false);	50 shadowDiv.addEventListener('click', function() {}, false);

50 root.appendChild(shadowDiv);	51 root.appendChild(shadowDiv);

51 }	52 }

52	53

53 function runTouchTests() {	54 function runTouchTests() {

54 element = document.getElementById("targetDiv");	55 element = document.getElementById("targetDiv");
	Zeeshan Qureshi 2014/07/05 03:18:31 This doesn't make sense to me. This should be the This doesn't make sense to me. This should be the shadowDiv as far as I can see. Rick Byers 2014/07/07 18:25:44 Shadow DOM provides an encapsulation boundary. sh Show quoted text On 2014/07/05 03:18:31, Zeeshan Qureshi wrote: > This doesn't make sense to me. This should be the shadowDiv as far as I can see. Shadow DOM provides an encapsulation boundary. shadowDiv is inside the shadow tree and so won't be directly accessible to the code here. This test is verifying that the fact that shadow DOM is used here is really an implementation detail the outside code is unaware of - the key property you need to maintain with your change here.
55 element.addEventListener('click', function() {}, false);	56 element.addEventListener('click', function() {}, false);

56 document.addEventListener('click', function() {}, false);	57 document.addEventListener('click', function() {}, false);

57	58

58 var pos = findAbsolutePosition(element);	59 var pos = findAbsolutePosition(element);

59 var x = pos.left;	60 var x = pos.left;

60 var y = pos.top;	61 var y = pos.top;

61 var width = element.clientWidth;	62 var width = element.clientWidth;

62 var height = element.clientHeight;	63 var height = element.clientHeight;

63 var midX = x + width / 2;	64 var midX = x + width / 2;

64 var midY = y + height / 2;	65 var midY = y + height / 2;

(...skipping 10 matching lines...) Expand all Loading...
75 testTouch(targetX, targetY + targetRadius + offset, padding, targetX, ta rgetY, targetRadius);	76 testTouch(targetX, targetY + targetRadius + offset, padding, targetX, ta rgetY, targetRadius);

76 testTouch(targetX, targetY - targetRadius - offset, padding, targetX, ta rgetY, targetRadius);	77 testTouch(targetX, targetY - targetRadius - offset, padding, targetX, ta rgetY, targetRadius);

77	78

78 // A touch in the center of targetDiv is sufficient distance from the sh adow-DOM element that the position should not snap.	79 // A touch in the center of targetDiv is sufficient distance from the sh adow-DOM element that the position should not snap.

79 testTouch(midX, midY, padding, midX, midY, 1);	80 testTouch(midX, midY, padding, midX, midY, 1);

80 }	81 }

81	82

82 function testTouch(touchX, touchY, padding, adjustedX, adjustedY, tolerance) {	83 function testTouch(touchX, touchY, padding, adjustedX, adjustedY, tolerance) {

83 var left = touchX - padding / 2;	84 var left = touchX - padding / 2;

84 var top = touchY - padding / 2;	85 var top = touchY - padding / 2;

85 adjustedNode = internals.touchNodeAdjustedToBestClickableNode(left, top, padding, padding, document);	86 adjustedNode = touchNodeAdjustedToBestClickableNode(left, top, padding, padding, document);

86 shouldBe('adjustedNode.id', 'element.id');	87 shouldBe('adjustedNode.id', 'element.id');

87 adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(left, top, padding, padding, document);	88 adjustedPoint = internals.touchPositionAdjustedToBestClickableNode(left, top, padding, padding, document);

88 shouldBeCloseTo('adjustedPoint.x', adjustedX, tolerance);	89 shouldBeCloseTo('adjustedPoint.x', adjustedX, tolerance);

89 shouldBeCloseTo('adjustedPoint.y', adjustedY, tolerance);	90 shouldBeCloseTo('adjustedPoint.y', adjustedY, tolerance);

90 }	91 }

91	92

92 function runTests()	93 function runTests()

93 {	94 {

94 if (window.testRunner && window.internals && internals.touchNodeAdjusted ToBestClickableNode) {	95 if (window.testRunner && window.internals && internals.touchNodeAdjusted ToBestClickableNode) {

95 description('Test the case where a clickable target contains a shado w-DOM element. The adjusted point should snap to the location of the shadow-DOM element if close enough to the original touch position.')	96 description('Test the case where a clickable target contains a shado w-DOM element. The adjusted point should snap to the location of the shadow-DOM element if close enough to the original touch position.')

96 addShadowDOM();	97 addShadowDOM();

97 runTouchTests();	98 runTouchTests();

98 }	99 }

99 }	100 }

100 runTests();	101 runTests();

101 </script>	102 </script>

102 </body>	103 </body>

103 </html>	104 </html>

OLD	NEW

« no previous file with comments | « no previous file | LayoutTests/touchadjustment/resources/touchadjustment.js » ('j') | LayoutTests/touchadjustment/resources/touchadjustment.js » ('J')