LayoutTests/editing/pasteboard/drag-and-drop-inputimage-contenteditable.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../fast/js/resources/js-test-pre.js"></script>
   5 <style>
   6 #target {
   7     height: 200px;
   8     width: 220px;
   9     border: 5px solid blue;
  10 }
  11 </style>
  12 </head>
  13 <body onload="runTest()">
  14 <p id="description"></p>
  15 <div contenteditable=true id="target"></div>
  16 <div><input type="image" id="source" src="resources/apple.gif" itemprop="somedata" arbitrary="green" draggable=true></div>
  17 <div id="console"></div>
  18
  19 <script>
  20 description('This test verify dragging an image in the page keeps its attributes. To test manually, drag the image and drop it in the rect with a blue border.');
  21 var jsTestIsAsync = true;
  22 var target = document.getElementById('target');
  23
  24 function contentInserted() {
  25     shouldBe('target.getElementsByTagName("input").length', '1');
  26     shouldBe('target.getElementsByTagName("input")[0].attributes.length', '6');
  27     shouldBeEqualToString('target.getElementsByTagName("input")[0].id', 'source');
  28     shouldBeEqualToString('target.getElementsByTagName("input")[0].type', 'image');
  29     shouldBeTrue('target.getElementsByTagName("input")[0].draggable');
  30     shouldBeEqualToString('target.getElementsByTagName("input")[0].attributes["itemprop"].value', 'somedata');
  31     shouldBeEqualToString('target.getElementsByTagName("input")[0].attributes["arbitrary"].value', 'green');
  32
  33     finishJSTest();
  34 }
  35
  36 function runTest() {
  37     target.addEventListener('DOMNodeInserted', contentInserted, false);
  38     if (!window.testRunner)
  39         return;
  40
  41     testRunner.waitUntilDone();
  42
  43     e = document.getElementById("source");
  44     x = e.offsetLeft + e.offsetWidth / 2;
  45     y = e.offsetTop + e.offsetHeight / 2;
  46
  47     eventSender.mouseMoveTo(x, y);
  48     eventSender.mouseDown();
  49     eventSender.leapForward(100);
  50     e = document.getElementById("target");
  51     x = e.offsetLeft + e.offsetWidth / 2;
  52     y = e.offsetTop + e.offsetHeight / 2;
  53
  54     eventSender.mouseMoveTo(x, y);
  55     eventSender.mouseUp();
  56 }
  57 </script>
  58 <script src="../../fast/js/resources/js-test-post.js"></script>
  59 </body>
  60 </html>