third_party/WebKit/LayoutTests/editing/shadow/selection-of-shadowroot.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>selection-of-shadowroot</title>
   5 <script src="../../resources/js-test.js"></script>
   6 <script src="../../fast/dom/resources/event-sender-util.js"></script>
   7 <script src="../../fast/dom/resources/shadow-test-driver.js"></script>
   8 <script src="../../fast/dom/shadow/resources/shadow-dom-util.js"></script>
   9 </head>
  10 <body>
  11
  12 <div id="container"></div>
  13 <pre id="console"></pre>
  14
  15 <script>
  16 var treeScopes = new Array();
  17 treeScopes.push(document);
  18
  19 function indent(level) {
  20     var v = "";
  21     while (level--)
  22         v = v + "&nbsp;&nbsp;&nbsp;&nbsp;";
  23     return v;
  24 }
  25
  26 function createComplexShadowTree(container) {
  27     function createInnerShadowDOM(shadowRoot, id, name, indentLevel) {
  28         shadowRoot.innerHTML =
  29             "<div title='DIV1 IN " + name + "'>" + indent(indentLevel) + "DIV 1 (" + name + ")</div>" +
  30             "<div>" + indent(indentLevel) + "<div title='SHADOW HOST IN " + name + "'>DIV HOST (" + name + ")</div></div>" +
  31             "<div title='DIV2 IN " + name + "'>" + indent(indentLevel) + "DIV 2 (" + name + ")</div>" +
  32             "<shadow>SHADOW FALLBACK</shadow>" +
  33             "<div title='DIV3 IN " + name + "'>" + indent(indentLevel) + "DIV 3 (" + name + ")</div>";
  34
  35         var hostInShadowRoot = shadowRoot.firstChild.nextSibling;
  36         var nestedShadowRoot = hostInShadowRoot.createShadowRoot();
  37         nestedShadowRoot.title = 'NESTED SHADOW ROOT IN ' + name;
  38         treeScopes.push(nestedShadowRoot);
  39
  40         nestedShadowRoot.innerHTML =
  41             "<div title='DIV 1 IN NESTED SHADOW DOM OF " + name + "'>" + indent(indentLevel) + "DIV 1 IN NESTED SHADOW (" + name + ")</div>" +
  42             "<shadow>NESTED SHADOW FALLBACK</shadow>" +
  43             "<div id='" + id + "' title='DIV 2 IN NESTED SHADOW DOM OF " + name + "'>" + indent(indentLevel) + "DIV 2 IN NESTED SHADOW (" + name + ")</div>";
  44     }
  45
  46     container.innerHTML =
  47         "<div title='DIV BEFORE HOST ELEMENT'>BEFORE HOST</div>" +
  48         "<div><div title='HOST ELEMENT'>HOST</div></div>" +
  49         "<div title='DIV AFTER HOST ELEMENT'>AFTER HOST</div>";
  50
  51     var host = container.firstChild.nextSibling;
  52
  53     var olderShadowRoot = host.createShadowRoot();
  54     olderShadowRoot.title = 'OLDER SHADOW ROOT';
  55     treeScopes.push(olderShadowRoot);
  56
  57     var youngerShadowRoot = host.createShadowRoot();
  58     youngerShadowRoot.title = 'YOUNGER SHADOW ROOT';
  59     treeScopes.push(youngerShadowRoot);
  60
  61     createInnerShadowDOM(olderShadowRoot, 'older', 'OLDER SHADOW ROOT', 2);
  62     createInnerShadowDOM(youngerShadowRoot, 'younger', 'YOUNGER SHADOW ROOT', 1);
  63 }
  64
  65 var container = document.getElementById('container');
  66 createComplexShadowTree(container);
  67
  68 debug('In this test, we create a complex Shadow DOM and try to drag from a div in nested shadow root of older shadow root to a div in nested shadow root of younger shadow root. Then we get selection from the following TreeScopes:');
  69 for (var k = 0; k < treeScopes.length; ++k) {
  70     if (treeScopes[k] == document)
  71         debug(" * treeScopes[" + k + "] = document");
  72     else
  73         debug(" * treeScopes[" + k + "] = " + treeScopes[k].title);
  74 }
  75
  76 debug('and check selection.anchorNode, selection.focusNode, selection.baseNode, and selection.extentNode are null or in the same treescope.');
  77 debug('');
  78
  79 var older = getElementByIdConsideringShadowDOM(document, 'older');
  80 var younger = getElementByIdConsideringShadowDOM(document, 'younger');
  81 dragFromTo(older, younger);
  82
  83 debug('Dragged from (' + older.title + ') to (' + younger.title + ')');
  84 debug('');
  85
  86 debug("treeScopes[0] is document");
  87 shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().anchorNode)", "document");
  88 shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().focusNode)", "document");
  89 shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().baseNode)", "document");
  90 shouldBe("internals.treeScopeRootNode(treeScopes[0].getSelection().extentNode)", "document");
  91 debug('');
  92
  93 debug("treeScopes[1] is " + treeScopes[1].title);
  94 shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().anchorNode)", "treeScopes[1]");
  95 shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().focusNode)", "treeScopes[1]");
  96 shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().baseNode)", "treeScopes[1]");
  97 shouldBe("internals.treeScopeRootNode(treeScopes[1].getSelection().extentNode)", "treeScopes[1]");
  98 debug('');
  99
 100 debug("treeScopes[2] is " + treeScopes[2].title);
 101 debug('Since treeScope[2] is outside of selection start point, no node should not be taken.');
 102 shouldBe("treeScopes[2].getSelection().anchorNode", "null");
 103 shouldBe("treeScopes[2].getSelection().focusNode", "null");
 104 shouldBe("treeScopes[2].getSelection().baseNode", "null");
 105 shouldBe("treeScopes[2].getSelection().extentNode", "null");
 106 debug('');
 107
 108 debug("treeScopes[3] is " + treeScopes[3].title);
 109 shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().anchorNode)", "treeScopes[3]");
 110 shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().focusNode)", "treeScopes[3]");
 111 shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().baseNode)", "treeScopes[3]");
 112 shouldBe("internals.treeScopeRootNode(treeScopes[3].getSelection().extentNode)", "treeScopes[3]");
 113 debug('');
 114
 115 debug("treeScopes[4] is " + treeScopes[4].title);
 116 debug('Since treeScope[4] is outside of selection start point, no node should not be taken.');
 117 shouldBe("treeScopes[4].getSelection().anchorNode", "null");
 118 shouldBe("treeScopes[4].getSelection().focusNode", "null");
 119 shouldBe("treeScopes[4].getSelection().baseNode", "null");
 120 shouldBe("treeScopes[4].getSelection().extentNode", "null");
 121 debug('');
 122
 123 window.getSelection().removeAllRanges();
 124
 125 while (container.firstChild)
 126     container.removeChild(container.firstChild);
 127
 128 var successfullyParsed = true;
 129 </script>
 130 </body>
 131
 132 </html>