third_party/WebKit/LayoutTests/images/drag-image-transformed-child.html - Issue 2784373004: [SPv2] Replay DragImages into PropertyTreeState of the enclosing stacking context

Side by Side Diff: third_party/WebKit/LayoutTests/images/drag-image-transformed-child.html

Issue 2784373004: [SPv2] Replay DragImages into PropertyTreeState of the enclosing stacking context (Closed)

Patch Set: Created 3 years, 8 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:

« no previous file with comments | « no previous file | third_party/WebKit/LayoutTests/images/drag-image-transformed-child-expected.png » ('j') | third_party/WebKit/LayoutTests/images/drag-image-transformed-parent.html » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
(Empty)
	1 <!DOCTYPE html>

	2 <style>

	3 #draggable {

	4 position: relative;

	5 width: 100px;

	6 height: 100px;

	7 -webkit-user-drag: element;

	8 }

	9

	10 #descendant-painting-sibling {

	11 position: relative;

	12 width: 100px;

	13 height: 100px;

	14 background: green;

	15 -webkit-user-drag: none;

	16 transform: translateX(50px);

	17 }

	18 </style>

	19 <div id="draggable">

	20 <div id="descendant-painting-sibling"></div>

	21 </div>

	22 This test passes if the generated drag image is a 100x100 green box, positioned

	23 with the transform.

	24 <script>

	25 function drag() {

	26 testRunner.dumpDragImage();

	27

	28 var image = document.getElementById('draggable');

	29 var startX = image.offsetLeft + image.offsetWidth / 2;
	wkorman 2017/03/31 18:21:51 Just validating the image, I expected this to mean Just validating the image, I expected this to mean basically: - move to center of box (50px from left/top) - click and move right and down 100px (so cursor now at (150, 150) from starting) - with transform of +50px in x applied, would = (200, 150) but the expected image looks like it's been shifted 50px to the right, and 0px down? chrishtr 2017/03/31 20:59:03 This is because I put a transform: translateX(50px Show quoted text On 2017/03/31 at 18:21:51, wkorman wrote: > Just validating the image, I expected this to mean basically: > - move to center of box (50px from left/top) > - click and move right and down 100px (so cursor now at (150, 150) from starting) > - with transform of +50px in x applied, would = (200, 150) > > but the expected image looks like it's been shifted 50px to the right, and 0px down? This is because I put a transform: translateX(50px) on the child. It's expected for it to be shifted by 50px. wkorman 2017/03/31 21:08:18 Yes, but I incorporated that into my third bullet, Show quoted text On 2017/03/31 20:59:03, chrishtr wrote: > On 2017/03/31 at 18:21:51, wkorman wrote: > > Just validating the image, I expected this to mean basically: > > - move to center of box (50px from left/top) > > - click and move right and down 100px (so cursor now at (150, 150) from > starting) > > - with transform of +50px in x applied, would = (200, 150) > > > > but the expected image looks like it's been shifted 50px to the right, and 0px > down? > > This is because I put a transform: translateX(50px) on the child. > It's expected for it to be shifted by 50px. Yes, but I incorporated that into my third bullet, but I still compute expected end position of the box as (200, 150). I haven't personally dumped drag images previously. I would expect (200, 150) would be the center of the dragged image? Which would put the top left at (100, 50), but in the image the green is at (50, 0). But I am sure I am just misinterpreting/computing somehow, please clarify. chrishtr 2017/03/31 21:18:00 Oh I see, sorry. The drag image is independent of Show quoted text On 2017/03/31 at 21:08:18, wkorman wrote: > On 2017/03/31 20:59:03, chrishtr wrote: > > On 2017/03/31 at 18:21:51, wkorman wrote: > > > Just validating the image, I expected this to mean basically: > > > - move to center of box (50px from left/top) > > > - click and move right and down 100px (so cursor now at (150, 150) from > > starting) > > > - with transform of +50px in x applied, would = (200, 150) > > > > > > but the expected image looks like it's been shifted 50px to the right, and 0px > > down? > > > > This is because I put a transform: translateX(50px) on the child. > > It's expected for it to be shifted by 50px. > > Yes, but I incorporated that into my third bullet, but I still compute expected end position of the box as (200, 150). I haven't personally dumped drag images previously. I would expect (200, 150) would be the center of the dragged image? Which would put the top left at (100, 50), but in the image the green is at (50, 0). > > But I am sure I am just misinterpreting/computing somehow, please clarify. Oh I see, sorry. The drag image is independent of how much you drag it. The image is sized according to the (stacking context ancestor of) the element which received the dragging request, positioned at the 0,0 of that ancestor, and painted down from there. This is why the green square is shifted 50px to the right, because we're painting the containing stacking context (which is the HTML/BODY element) and the green square is offset 50px from it.
	30 var startY = image.offsetTop + image.offsetHeight / 2;

	31 var positionX = startX + image.offsetWidth;

	32 var positionY = startY + image.offsetHeight;

	33

	34 eventSender.dragMode = true;

	35 eventSender.mouseMoveTo(startX, startY);

	36 eventSender.mouseDown();

	37 eventSender.mouseMoveTo(positionX, positionY);

	38 eventSender.mouseUp();

	39 }

	40

	41 if (!window.testRunner \|\| !window.eventSender) {

	42 document.write("This test does not work in manual mode.");

	43 } else {

	44 window.onload = drag;

	45 }

	46 </script>

OLD	NEW