LayoutTests/editing/pasteboard/drag-and-drop-image-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><img id="source" src="resources/apple.gif" alt="alt-text" itemprop="somedata" arbitrary="green"></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("img").length', '1');
  26     shouldBe('target.getElementsByTagName("img")[0].attributes.length', '5');
  27     shouldBeEqualToString('target.getElementsByTagName("img")[0].id', 'source');
  28     shouldBeEqualToString('target.getElementsByTagName("img")[0].alt', 'alt-text');
  29     shouldBeEqualToString('target.getElementsByTagName("img")[0].attributes["itemprop"].value', 'somedata');
  30     shouldBeEqualToString('target.getElementsByTagName("img")[0].attributes["arbitrary"].value', 'green');
  31
  32     finishJSTest();
  33 }
  34
  35 function runTest() {
  36     target.addEventListener('DOMNodeInserted', contentInserted, false);
  37     if (!window.testRunner)
  38         return;
  39
  40     testRunner.waitUntilDone();
  41
  42     e = document.getElementById("source");
  43     x = e.offsetLeft + e.offsetWidth / 2;
  44     y = e.offsetTop + e.offsetHeight / 2;
  45
  46     eventSender.mouseMoveTo(x, y);
  47     eventSender.mouseDown();
  48     eventSender.leapForward(100);
  49     e = document.getElementById("target");
  50     x = e.offsetLeft + e.offsetWidth / 2;
  51     y = e.offsetTop + e.offsetHeight / 2;
  52
  53     eventSender.mouseMoveTo(x, y);
  54     eventSender.mouseUp();
  55 }
  56 </script>
  57 <script src="../../fast/js/resources/js-test-post.js"></script>
  58 </body>
  59 </html>