third_party/WebKit/LayoutTests/editing/selection/mixed-editability-10.html

   1 <html>
   2 <head>
   3     <title>This tests the ability to place the caret in an editable div that contains only non editable content</title>
   4 </head>
   5 <body>
   6   <p>#1 DIV element with a non-editable element only <span style="color:red">align center</span>:</p>
   7   <div style="width:100px;background-color:#cee;text-align: center;" contenteditable="true" id="edit1">
   8     <span contenteditable="false" id="nonedit1">Hello</span>
   9   </div>
  10   <p>#2 DIV element with a non-editable element only <span style="color:red">align left</span>:</p>
  11   <div style="width:100px;background-color:#cee;" contenteditable="true" id="edit2"><span contenteditable="false" id="nonedit2">Hello</span></div>
  12   <p>#3 DIV element with a non-editable element only <span style="color:red">align right</span>:</p>
  13   <div style="width:100px;background-color:#cee;text-align: right;" contenteditable="true" id="edit3">
  14   <span contenteditable="false" id="nonedit3">Hello</span></div>
  15   <p>#4 DIV element with two non-editable element<span style="color:red">with padding</span>:</p>
  16   <div style="width:200px;background-color:#cee;" contenteditable="true" id="edit4">
  17       <span contenteditable="false">Hello </span>
  18       <span contenteditable="false" id="nonedit4">World</span>
  19   </div>
  20   <p>#5 DIV element empty</p>
  21   <div style="width:100px;background-color:#cee;text-align: center;" contenteditable="true" id="edit5">
  22   </div>
  23   <p>#6 non editable DIV element with an editable empty span element</p>
  24   <div id="nonedit6" style="width:100px;background-color:#cee;">
  25     Hello:&nbsp;<span id="edit6" contenteditable="true"> </span>
  26   </div>
  27   <ul id="console"></ul>
  28 </body>
  29 <script>
  30 function log(str) {
  31     var li = document.createElement("li");
  32     li.appendChild(document.createTextNode(str));
  33     var console = document.getElementById("console");
  34     console.appendChild(li);
  35 }
  36
  37 function caretCoordinates()
  38 {
  39     if (!window.textInputController)
  40         return { x: 0, y :0 };
  41     var caretRect = textInputController.firstRectForCharacterRange(textInputController.selectedRange()[0], 0);
  42     return { x: caretRect[0], y: caretRect[1] };
  43 }
  44
  45 function runTest(x, y, elem, offset, refpos) {
  46     eventSender.mouseMoveTo(x, y);
  47     eventSender.mouseDown();
  48     eventSender.mouseUp();
  49     eventSender.mouseDown();
  50     eventSender.mouseUp();
  51
  52     var selection = window.getSelection();
  53
  54     var anchorNode = selection.anchorNode;
  55     var anchorOffset = selection.anchorOffset;
  56
  57     var coord = caretCoordinates();
  58     var anchorString = "Anchor (" + anchorNode + ", " + anchorOffset + " caret[" + coord.x + "," + coord.y + "] refpos=" + refpos + ")";
  59     var anchorCorrect = anchorNode == elem && anchorOffset == offset && coord.x == refpos;
  60     if (anchorCorrect)
  61         log(anchorString + " is correct.");
  62     else
  63         log(anchorString + " is incorrect.");
  64 }
  65
  66 function automaticTest() {
  67     if (window.testRunner) {
  68         window.testRunner.dumpAsText();
  69
  70         var elem;
  71
  72         // the div has text-alignment center
  73         elem = document.getElementById("edit1");
  74         x = elem.offsetLeft + 10;
  75         y = elem.offsetTop + elem.offsetHeight / 2;
  76         runTest(x, y, elem, 0, document.getElementById("nonedit1").offsetLeft);
  77         x = elem.offsetLeft + elem.offsetWidth - 10;
  78         runTest(x, y, elem, 3, document.getElementById("nonedit1").offsetLeft + document.getElementById("nonedit1").offsetWidth);
  79
  80         // the div has text-alignment left
  81         elem = document.getElementById("edit2");
  82         x = elem.offsetLeft + elem.offsetWidth - 10;
  83         y = elem.offsetTop + elem.offsetHeight / 2;
  84         runTest(x, y, elem, 1, document.getElementById("nonedit2").offsetLeft + document.getElementById("nonedit2").offsetWidth);
  85         x = elem.offsetLeft;
  86         runTest(x, y, elem, 0, document.getElementById("nonedit2").offsetLeft);
  87
  88         // the div has text-alignment right
  89         elem = document.getElementById("edit3");
  90         x = elem.offsetLeft + 10;
  91         y = elem.offsetTop + elem.offsetHeight / 2;
  92         runTest(x, y, elem, 0, document.getElementById("nonedit3").offsetLeft);
  93
  94         // the div contains 2 non editable span
  95         elem = document.getElementById("edit4");
  96         x = document.getElementById("nonedit4").offsetLeft;
  97         y = elem.offsetTop + elem.offsetHeight / 2;
  98         runTest(x, y, elem, 3, document.getElementById("nonedit4").offsetLeft);
  99
 100         // the div is empty
 101         elem = document.getElementById("edit5");
 102         x = elem.offsetLeft;
 103         y = elem.offsetTop + elem.offsetHeight / 2;
 104         runTest(x, y, elem, 0, (elem.offsetLeft + elem.offsetWidth)/2 + 4);
 105
 106         // the div is non editable and contains an empty editable span
 107         elem = document.getElementById("edit6");
 108         x = document.getElementById("nonedit6").offsetLeft + document.getElementById("nonedit6").offsetWidth / 2;
 109         y = document.getElementById("nonedit6").offsetTop + document.getElementById("nonedit6").offsetHeight / 2;
 110         runTest(x, y, elem, 0, 0);
 111     }
 112 }
 113
 114 automaticTest();
 115 </script>
 116 </html>