src/third_party/WebKit/LayoutTests/fast/dom/shadow/shadow-contents-fallback.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>
  17 function log(message) {
  18     document.getElementById('console').innerHTML += (message + "\n");
  19 }
  20
  21 function removeAllChildren(elem) {
  22     while (elem.firstChild)
  23         elem.removeChild(elem.firstChild);
  24 }
  25
  26 function cleanUp() {
  27     removeAllChildren(document.getElementById('actual-container'));
  28     removeAllChildren(document.getElementById('expect-container'));
  29 }
  30
  31 function removeContainerLines(text) {
  32     var lines = text.split('\n');
  33     lines.splice(0, 2);
  34     return lines.join('\n');
  35 }
  36
  37 function check() {
  38     var refContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('expect-container'));
  39     var refRenderTree = removeContainerLines(refContainerRenderTree);
  40
  41     var targetContainerRenderTree = internals.elementRenderTreeAsText(document.getElementById('actual-container'));
  42     var targetRenderTree = removeContainerLines(targetContainerRenderTree);
  43
  44     if (targetRenderTree == refRenderTree)
  45         log("PASS");
  46     else {
  47         log("FAIL");
  48         log("Expected: ");
  49         log(refRenderTree);
  50         log("Actual: ");
  51         log(targetRenderTree);
  52     }
  53
  54 }
  55
  56 function createSpanWithText(text) {
  57     var span = document.createElement('span');
  58     span.appendChild(document.createTextNode(text));
  59     return span;
  60 }
  61
  62 function appendShadow(target, select) {
  63     var root = target.createShadowRoot();
  64
  65     var content = document.createElement('content');
  66     content.setAttribute('select', select);
  67     content.appendChild(createSpanWithText("FALLBACK"));
  68
  69     root.appendChild(document.createTextNode("{SHADOW: "));
  70     root.appendChild(content);
  71     root.appendChild(document.createTextNode("}"));
  72 }
  73
  74 function appendShadowDeep(target, select) {
  75     var root = target.createShadowRoot();
  76
  77     var child = document.createElement("span");
  78     {
  79         var content = document.createElement('content');
  80         content.setAttribute('select', select);
  81         content.appendChild(createSpanWithText("FALLBACK"));
  82
  83         child.appendChild(document.createTextNode("{INNER: "));
  84         child.appendChild(content);
  85         child.appendChild(document.createTextNode("}"));
  86     }
  87
  88     root.appendChild(document.createTextNode("{SHADOW: "));
  89     root.appendChild(child);
  90     root.appendChild(document.createTextNode("}"));
  91 }
  92
  93 function testFallback() {
  94     var target = document.createElement('div');
  95     target.innerHTML = "<span>SELECTED</span>";
  96
  97     appendShadow(target, "#non-element");
  98
  99     document.getElementById('actual-container').appendChild(target);
 100     document.getElementById('expect-container').innerHTML =
 101         "<div>{SHADOW: <span>FALLBACK</span>}</div>";
 102 }
 103
 104 function testFallbackDeep() {
 105     var target = document.createElement('div');
 106     target.innerHTML = "<span>SELECTED</span>";
 107
 108     appendShadowDeep(target, "#non-element");
 109
 110     document.getElementById('actual-container').appendChild(target);
 111     document.getElementById('expect-container').innerHTML =
 112         "<div>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</div>";
 113 }
 114
 115 function testNonFallbackWithLightChildren() {
 116     var target = document.createElement('div');
 117     target.innerHTML = "<span id='selected-1'>SELECTED</span>";
 118
 119     appendShadow(target, "#selected-1");
 120
 121     document.getElementById('actual-container').appendChild(target);
 122     document.getElementById('expect-container').innerHTML =
 123         "<div>{SHADOW: <span>SELECTED</span>}</div>";
 124 }
 125
 126 function testNonFallbackDeepWithLightChildren() {
 127     var target = document.createElement('div');
 128     target.innerHTML = "<span id='selected-2'>SELECTED</span>";
 129
 130     appendShadowDeep(target, "#selected-2");
 131
 132     document.getElementById('actual-container').appendChild(target);
 133     document.getElementById('expect-container').innerHTML =
 134         "<div>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</div>";
 135 }
 136
 137 function testComplexFallback() {
 138     var target = document.createElement('div');
 139     appendShadow(target, '#complex-1');
 140
 141     var selectContent = document.createElement('span');
 142     selectContent.setAttribute('id', 'complex-1');
 143     {
 144         selectContent.appendChild(createSpanWithText('SELECTED'));
 145     }
 146     appendShadow(selectContent, 'span');
 147
 148     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 149     target.appendChild(selectContent);
 150     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 151
 152     document.getElementById('actual-container').appendChild(target);
 153     document.getElementById('expect-container').innerHTML =
 154         "<div>{SHADOW: <span>{SHADOW: <span>SELECTED</span>}</span>}</div>";
 155 }
 156
 157 function testComplexFallbackDeep() {
 158     var target = document.createElement('div');
 159     appendShadowDeep(target, '#complex-2');
 160
 161     var selectContent = document.createElement('span');
 162     selectContent.setAttribute('id', 'complex-2');
 163     {
 164         selectContent.appendChild(createSpanWithText('SELECTED'));
 165     }
 166     appendShadowDeep(selectContent, 'span');
 167
 168     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 169     target.appendChild(selectContent);
 170     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 171
 172     document.getElementById('actual-container').appendChild(target);
 173     document.getElementById('expect-container').innerHTML =
 174         "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>SELECTED</span>}</span>}</span>}</span>}</span></div>";
 175 }
 176
 177 function testComplexFallbackAgain() {
 178     var target = document.createElement('div');
 179     appendShadow(target, '#complex-3');
 180
 181     var selectContent = document.createElement('span');
 182     selectContent.setAttribute('id', 'complex-3');
 183     {
 184         selectContent.appendChild(createSpanWithText('SELECTED'));
 185     }
 186     appendShadow(selectContent, '#non-element');
 187
 188     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 189     target.appendChild(selectContent);
 190     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 191
 192     document.getElementById('actual-container').appendChild(target);
 193     document.getElementById('expect-container').innerHTML =
 194         "<div>{SHADOW: <span>{SHADOW: <span>FALLBACK</span>}</span>}</span></div>";
 195 }
 196
 197 function testComplexFallbackDeepAgain() {
 198     var target = document.createElement('div');
 199     appendShadowDeep(target, '#complex-4');
 200
 201     var selectContent = document.createElement('span');
 202     selectContent.setAttribute('id', 'complex-4');
 203     {
 204         selectContent.appendChild(createSpanWithText('SELECTED'));
 205     }
 206     appendShadowDeep(selectContent, '#non-element');
 207
 208     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 209     target.appendChild(selectContent);
 210     target.appendChild(document.createTextNode('[WONT SELECTED]'));
 211
 212     document.getElementById('actual-container').appendChild(target);
 213     document.getElementById('expect-container').innerHTML =
 214         "<div>{SHADOW: <span>{INNER: <span>{SHADOW: <span>{INNER: <span>FALLBACK</span>}</span>}</span>}</span>}</span></div>";
 215 }
 216
 217 function testContentkWithDisplayNone() {
 218     var target = document.createElement('div');
 219
 220     var span1 = createSpanWithText('NOT RENDERED');
 221     span1.style.display = 'none';
 222     var span2 = createSpanWithText('NOT RENDERED');
 223     span2.style.display = 'none';
 224     var span3 = createSpanWithText('NOT RENDERED');
 225     span3.style.display = 'none';
 226
 227     target.appendChild(span1);
 228     target.appendChild(createSpanWithText('S1'));
 229     target.appendChild(span2);
 230     target.appendChild(createSpanWithText('S2'));
 231     target.appendChild(span3);
 232
 233     var root = target.createShadowRoot();
 234     var content = document.createElement('content');
 235     content.setAttribute('select', 'span');
 236     content.appendChild(createSpanWithText('FALLBACK'));
 237
 238     var s = createSpanWithText('NOT RENDERED');
 239     s.style.display = 'none';
 240     root.appendChild(s);
 241     root.appendChild(document.createTextNode("{SHADOW: "));
 242     root.appendChild(content);
 243     root.appendChild(document.createTextNode("}"));
 244
 245     document.getElementById('actual-container').appendChild(target);
 246     document.getElementById('expect-container').innerHTML =
 247         "<div>{SHADOW: <span>S1</span><span>S2</span>}</div>";
 248 }
 249
 250 function testContentInContent() {
 251     var target = document.createElement('div');
 252     target.appendChild(createSpanWithText('S1'));
 253     target.appendChild(createSpanWithText('S2'));
 254
 255     var root = target.createShadowRoot();
 256     var content2 = document.createElement('content');
 257     content2.setAttribute('select', 'span');
 258     content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));
 259
 260     var content1 = document.createElement('content');
 261     content1.setAttribute('select', 'div');
 262     content1.appendChild(content2);
 263
 264     root.appendChild(document.createTextNode("{SHADOW: "));
 265     root.appendChild(content1);
 266     root.appendChild(document.createTextNode("}"));
 267
 268     document.getElementById('actual-container').appendChild(target);
 269     document.getElementById('expect-container').innerHTML =
 270         "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>";
 271 }
 272
 273 function testContentInContentFallback() {
 274     var target = document.createElement('div');
 275     target.appendChild(createSpanWithText('S1'));
 276     target.appendChild(createSpanWithText('S2'));
 277
 278     var root = target.createShadowRoot();
 279     var content2 = document.createElement('content');
 280     content2.setAttribute('select', 'div');
 281     content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));
 282
 283     var content1 = document.createElement('content');
 284     content1.setAttribute('select', 'div');
 285     content1.appendChild(content2);
 286
 287     root.appendChild(document.createTextNode("{SHADOW: "));
 288     root.appendChild(content1);
 289     root.appendChild(document.createTextNode("}"));
 290
 291     document.getElementById('actual-container').appendChild(target);
 292     document.getElementById('expect-container').innerHTML =
 293         "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>";
 294 }
 295
 296 function testContentInContentFallbackWithDisplayNone() {
 297     var target = document.createElement('div');
 298     target.appendChild(createSpanWithText('S1'));
 299     target.appendChild(createSpanWithText('S2'));
 300
 301     var root = target.createShadowRoot();
 302     var content2 = document.createElement('content');
 303     content2.setAttribute('select', 'div');
 304     content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));
 305
 306     var content1 = document.createElement('content');
 307     content1.setAttribute('select', 'div');
 308     content1.appendChild(content2);
 309
 310     var s = createSpanWithText('NOT RENDERED');
 311     s.style.display = 'none';
 312     root.appendChild(s);
 313     root.appendChild(document.createTextNode("{SHADOW: "));
 314     root.appendChild(content1);
 315     root.appendChild(document.createTextNode("}"));
 316
 317     document.getElementById('actual-container').appendChild(target);
 318     document.getElementById('expect-container').innerHTML =
 319         "<div>{SHADOW: <content><span>CONTENT 2 FALLBACK</span></content>}</div>";
 320 }
 321
 322 function testContentInContentFallbackDirect() {
 323     var target = document.createElement('div');
 324     target.appendChild(createSpanWithText('S1'));
 325     target.appendChild(createSpanWithText('S2'));
 326
 327     var root = target.createShadowRoot();
 328     var content2 = document.createElement('content');
 329     content2.setAttribute('select', 'div');
 330     content2.appendChild(createSpanWithText('CONTENT 2 FALLBACK'));
 331
 332     var content1 = document.createElement('content');
 333     content1.setAttribute('select', 'div');
 334     content1.appendChild(content2);
 335
 336     root.appendChild(content1);
 337
 338     document.getElementById('actual-container').appendChild(target);
 339     document.getElementById('expect-container').innerHTML =
 340         "<div><content><span>CONTENT 2 FALLBACK</span></content></div>";
 341 }
 342
 343 var testFuncs = [
 344     testFallback,
 345     testFallbackDeep,
 346     testNonFallbackWithLightChildren,
 347     testNonFallbackDeepWithLightChildren,
 348     testComplexFallback,
 349     testComplexFallbackDeep,
 350     testComplexFallbackAgain,
 351     testComplexFallbackDeepAgain,
 352     testContentkWithDisplayNone,
 353     testContentInContent,
 354     testContentInContentFallback,
 355     testContentInContentFallbackWithDisplayNone,
 356     testContentInContentFallbackDirect
 357 ];
 358
 359 function doTest() {
 360     testRunner.dumpAsText();
 361     cleanUp();
 362
 363     for (var i = 0; i < testFuncs.length; ++i) {
 364         testFuncs[i]();
 365         check();
 366         cleanUp();
 367     }
 368 }
 369 </script>
 370 </head>
 371 <body onload="doTest()">
 372
 373 <div id="actual-container" class="container"></div>
 374 <div id="expect-container" class="container"></div>
 375 <pre id="console"></pre>
 376
 377 </body>
 378 </html>