src/third_party/WebKit/LayoutTests/fast/dom/shadow/content-element-move.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 /* relative positioning ensures underlying RenderLayer */
   6 .container {
   7     position: relative;
   8 }
   9
  10 .span {
  11     display: boxed-inline;
  12     margin: 2px;
  13     border: solid;
  14 }
  15 </style>
  16 <script src="../resources/shadow-test-driver.js"></script>
  17 <script>
  18 function testRemoveContent(callIfDone) {
  19     var root = document.createElement('div');
  20
  21     // Create light tree.
  22     root.innerHTML = "<span>LIGHT</span>";
  23
  24     // Create shadow tree.
  25     var content = createContentWithSelect('span', 'FALLBACK');
  26     var sr = root.createShadowRoot();
  27     sr.appendChild(createSpanWithText("BEFORE"));
  28     sr.appendChild(content);
  29     sr.appendChild(createSpanWithText("AFTER"));
  30
  31     document.getElementById('actual-container').appendChild(root);
  32
  33     var f = (function(root, content, callIfDone) {
  34         return function() {
  35             content.parentNode.removeChild(content);
  36             document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>AFTER</span></div>";
  37             callIfDone();
  38         };
  39     })(root, content, callIfDone);
  40
  41     setTimeout(f, 0);
  42 }
  43
  44 function testRemoveContentToRecalc1(callIfDone) {
  45     var root = document.createElement('div');
  46
  47     // Create light tree.
  48     root.innerHTML = "<span class='c1'>LIGHT 1</span><span>LIGHT 2</span>";
  49
  50     // Create shadow tree.
  51     var content1 = createContentWithSelect('.c1', 'FALLBACK');
  52     var content2 = createContentWithSelect('span', 'FALLBACK');
  53     var sr = root.createShadowRoot();
  54     sr.appendChild(createSpanWithText("BEFORE"));
  55     sr.appendChild(content1);
  56     sr.appendChild(createSpanWithText("MID"));
  57     sr.appendChild(content2);
  58     sr.appendChild(createSpanWithText("AFTER"));
  59
  60     document.getElementById('actual-container').appendChild(root);
  61
  62     var f = (function(root, content1, callIfDone) {
  63         return function() {
  64             content1.parentNode.removeChild(content1);
  65             document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>MID</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
  66             callIfDone();
  67         };
  68     })(root, content1, callIfDone);
  69
  70     setTimeout(f, 0);
  71 }
  72
  73 function testRemoveContentToRecalc2(callIfDone) {
  74     var root = document.createElement('div');
  75
  76     // Create light tree.
  77     root.innerHTML = "<span>LIGHT 1</span><span class='c1'>LIGHT 2</span>";
  78
  79     // Create shadow tree.
  80     var content1 = createContentWithSelect('.c1', 'FALLBACK');
  81     var content2 = createContentWithSelect('span', 'FALLBACK');
  82     var sr = root.createShadowRoot();
  83     sr.appendChild(createSpanWithText("BEFORE"));
  84     sr.appendChild(content1);
  85     sr.appendChild(createSpanWithText("MID"));
  86     sr.appendChild(content2);
  87     sr.appendChild(createSpanWithText("AFTER"));
  88
  89     document.getElementById('actual-container').appendChild(root);
  90
  91     var f = (function(root, content1, callIfDone) {
  92         return function() {
  93             content1.parentNode.removeChild(content1);
  94             document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>MID</span><span>LIGHT 1</span><span>LIGHT 2</span><span>AFTER</span></div>";
  95             callIfDone();
  96         };
  97     })(root, content1, callIfDone);
  98
  99     setTimeout(f, 0);
 100 }
 101
 102 function testRemoveContentAndRemoveLightChildren(callIfDone) {
 103     var root = document.createElement('div');
 104
 105     // Create light tree.
 106     root.innerHTML = "<span>LIGHT</span>";
 107
 108     // Create shadow tree.
 109     var content = createContentWithSelect('span');
 110     var sr = root.createShadowRoot();
 111     sr.appendChild(createSpanWithText("BEFORE"));
 112     sr.appendChild(content);
 113     sr.appendChild(createSpanWithText("AFTER"));
 114
 115     document.getElementById('actual-container').appendChild(root);
 116
 117     var f = (function(root, content, callIfDone) {
 118         return function() {
 119             content.parentNode.removeChild(content);
 120             removeAllChildren(root);
 121             document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>AFTER</span></div>";
 122             callIfDone();
 123         };
 124     })(root, content, callIfDone);
 125
 126     setTimeout(f, 0);
 127 }
 128
 129 function testAppendContent1(callIfDone) {
 130     var root = document.createElement('div');
 131
 132     // Create light tree.
 133     root.innerHTML = "<span>LIGHT</span>";
 134
 135     // Create shadow tree.
 136     var sr = root.createShadowRoot();
 137     sr.appendChild(createSpanWithText("BEFORE"));
 138     sr.appendChild(createSpanWithText("AFTER"));
 139
 140     document.getElementById('actual-container').appendChild(root);
 141
 142     var f = (function(root, callIfDone) {
 143         return function() {
 144             var content = createContentWithSelect('span', 'FALLBACK');
 145             var sr = root.shadowRoot;
 146             sr.insertBefore(content, sr.lastChild);
 147             document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><SPAN>LIGHT</span><span>AFTER</span></div>";
 148             callIfDone();
 149         };
 150     })(root, callIfDone);
 151
 152     setTimeout(f, 0);
 153 }
 154
 155 function testAppendContent2(callIfDone) {
 156     var root = document.createElement('div');
 157
 158     // Create light tree.
 159     root.innerHTML = "<span>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
 160
 161     // Create shadow tree.
 162     var sr = root.createShadowRoot();
 163     sr.appendChild(createSpanWithText("BEFORE"));
 164     sr.appendChild(createSpanWithText("AFTER"));
 165
 166     document.getElementById('actual-container').appendChild(root);
 167
 168     var f = (function(root, callIfDone) {
 169         return function() {
 170             var content1 = createContentWithSelect('.c2', 'FALLBACK');
 171             var content2 = createContentWithSelect('span', 'FALLBACK');
 172             var sr = root.shadowRoot;
 173             sr.insertBefore(content1, sr.lastChild);
 174             sr.insertBefore(content2, sr.lastChild);
 175             document.getElementById('expect-container').innerHTML = "<div><span>BEFORE</span><span>LIGHT 2</span><span>LIGHT 1</span><span>AFTER</span></div>";
 176             callIfDone();
 177         };
 178     })(root, callIfDone);
 179
 180     setTimeout(f, 0);
 181 }
 182
 183 function testAppendContent3(callIfDone) {
 184     var root = document.createElement('div');
 185
 186     // Create light tree.
 187     root.innerHTML = "<span>LIGHT 1</span><span class='c2'>LIGHT 2</span>";
 188
 189     // Create shadow tree.
 190     var sr = root.createShadowRoot();
 191     var mid = createSpanWithText("MID");
 192     sr.appendChild(createSpanWithText("BEFORE"));
 193     sr.appendChild(mid);
 194     sr.appendChild(createContentWithSelect('.c2', 'FALLBACK'));
 195     sr.appendChild(createSpanWithText("AFTER"));
 196
 197     document.getElementById('actual-container').appendChild(root);
 198
 199     var f = (function(root, mid, callIfDone) {
 200         return function() {
 201             var content = createContentWithSelect('span', 'FALLBACK');
 202             var sr = root.shadowRoot;
 203             sr.insertBefore(content, mid);
 204             document.getElementById('expect-container').innerHTML =
 205                 "<div><span>BEFORE</span><span>LIGHT 1</span><span>LIGHT 2</span><span>MID</span><span>FALLBACK</span><span>AFTER</span></div>";
 206             callIfDone();
 207         };
 208     })(root, mid, callIfDone);
 209
 210     setTimeout(f, 0);
 211 }
 212
 213 function testChangeOrderOfContent(callIfDone) {
 214     var root = document.createElement('div');
 215
 216     // Create light tree.
 217     root.innerHTML = "<span class='c1'>LIGHT 1</span><span>LIGHT 2</span>";
 218
 219     // Create shadow tree.
 220     var sr = root.createShadowRoot();
 221     var content1 = createContentWithSelect('.c1', 'FALLBACK');
 222     var content2 = createContentWithSelect('span', 'FALLBACK');
 223     sr.appendChild(createSpanWithText("BEFORE"));
 224     sr.appendChild(content1);
 225     sr.appendChild(content2);
 226     sr.appendChild(createSpanWithText("AFTER"));
 227
 228     document.getElementById('actual-container').appendChild(root);
 229
 230     var f = (function(root, content1, callIfDone) {
 231         return function() {
 232             var sr = root.shadowRoot;
 233             sr.removeChild(content1);
 234             sr.insertBefore(content1, sr.lastChild);
 235             document.getElementById('expect-container').innerHTML =
 236                 "<div><span>BEFORE</span><SPAN>LIGHT 1</span><span>LIGHT 2</span><span>FALLBACK</span><span>AFTER</span></div>";
 237             callIfDone();
 238         };
 239     })(root, content1, callIfDone);
 240
 241     setTimeout(f, 0);
 242 }
 243
 244 function testMoveLightChildOut(callIfDone) {
 245     var root = document.createElement('div');
 246
 247     // Create light tree.
 248     var n1 = document.createElement('div');
 249     n1.setAttribute('id', 'n1');
 250     n1.innerHTML = "<span id='light1'>LIGHT 1</span><span>LIGHT 2</span>";
 251     var n2 = document.createElement('div');
 252     n2.setAttribute('id', 'n2');
 253
 254     root.appendChild(n1);
 255     root.appendChild(n2);
 256
 257     // Create shadow tree in 'n1'
 258     var sr = n1.createShadowRoot();
 259     var content = createContentWithSelect('span', 'FALLBACK');
 260     sr.appendChild(createSpanWithText("BEFORE"));
 261     sr.appendChild(content);
 262     sr.appendChild(createSpanWithText("AFTER"));
 263
 264     document.getElementById('actual-container').appendChild(root);
 265
 266     var f = (function(root, n2, callIfDone) {
 267         return function() {
 268             var e = document.getElementById('light1');
 269             e.parentNode.removeChild(e);
 270             n2.appendChild(e);
 271
 272             document.getElementById('expect-container').innerHTML =
 273                 "<div><div><span>BEFORE</span><span>LIGHT 2</span><span>AFTER</span></div><div><span>LIGHT 1</span></div></div>"
 274             callIfDone();
 275         };
 276     })(root, n2, callIfDone);
 277
 278     setTimeout(f, 0);
 279 }
 280
 281 function testInsertBeforeFallback(callIfDone) {
 282     document.getElementById('expect-container').innerHTML =
 283         "<div><span>BEFORE</span><span>HOGE</span><span>FALLBACK</span><span>AFTER</span></div>";
 284
 285     var target = document.createElement('div');
 286     document.getElementById('actual-container').appendChild(target);
 287
 288     var span1 = document.createElement('span');
 289     var root = span1.createShadowRoot();
 290     root.appendChild(createContentWithText("FALLBACK"));
 291
 292     target.appendChild(createSpanWithText('BEFORE'));
 293     target.appendChild(span1);
 294     target.appendChild(createSpanWithText('AFTER'));
 295
 296     var f = (function(target, span1, callIfDone) { return function() {
 297         target.insertBefore(createSpanWithText('HOGE'), span1);
 298         callIfDone();
 299     };})(target, span1, callIfDone);
 300
 301     setTimeout(f, 0);
 302 }
 303
 304 var testFuncs = [
 305     testRemoveContent,
 306     testRemoveContentToRecalc1,
 307     testRemoveContentToRecalc2,
 308     testRemoveContentAndRemoveLightChildren,
 309     testAppendContent1,
 310     testAppendContent2,
 311     testAppendContent3,
 312     testChangeOrderOfContent,
 313     testMoveLightChildOut,
 314     testInsertBeforeFallback
 315 ];
 316
 317 </script>
 318 </head>
 319 <body onload="doTest(testFuncs)">
 320
 321 <div id="actual-container" class="container"></div>
 322 <div id="expect-container" class="container"></div>
 323 <pre id="console"></pre>
 324
 325 </body>
 326 </html>