src/third_party/WebKit/LayoutTests/fast/dom/shadow/composed-shadow-tree-walker-shadow-reprojection.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <script src="../../../resources/js-test.js"></script>
   5 <script src="resources/shadow-dom.js"></script>
   6 </head>
   7 <body>
   8 <div id="console"></div>
   9 <div id="sandbox"></div>
  10 <script>
  11 description("Tests for Composed Shadow DOM Tree Traversal APIs. Can only run within DRT");
  12
  13 if (window.testRunner)
  14     testRunner.dumpAsText();
  15
  16 function testComposedShadowTree(node)
  17 {
  18     var sandbox = document.getElementById('sandbox');
  19     sandbox.innerHTML = '';
  20     sandbox.appendChild(node);
  21     document.body.offsetLeft;
  22     showComposedShadowTree(node);
  23 }
  24
  25 debug('Multiple shadow root without shadow element');
  26 testComposedShadowTree(
  27     createDOM('div', {'id': 'a'},
  28               createShadowRoot(createDOM('div', {'id': 'b'})),
  29               createShadowRoot(createDOM('div', {'id': 'c'}))));
  30
  31 debug('Multiple shadow root with shadow element');
  32 testComposedShadowTree(
  33     createDOM('div', {'id': 'a'},
  34               createShadowRoot(createDOM('div', {'id': 'b'})),
  35               createShadowRoot(createDOM('div', {'id': 'c'}),
  36                                createDOM('shadow', {'id': 'd'}),
  37                                createDOM('div', {'id': 'e'}))));
  38
  39 debug('Multiple shadow root with shadow element, case 2');
  40 testComposedShadowTree(
  41     createDOM('div', {'id': 'a'},
  42               createShadowRoot(createDOM('div', {'id': 'b'})),
  43               createShadowRoot(createDOM('div', {'id': 'c'}),
  44                                createDOM('shadow', {'id': 'd'}),
  45                                createDOM('div', {'id': 'e'})),
  46               createShadowRoot(createDOM('div', {'id': 'f'}),
  47                                createDOM('shadow', {'id': 'g'}),
  48                                createDOM('div', {'id': 'h'}))));
  49
  50 debug('shadow reprojection');
  51 testComposedShadowTree(
  52     createDOM('div', {'id': 'a'},
  53               createDOM('div', {'id': 'a-child'}),
  54               createShadowRoot(createDOM('div', {'id': 'b'},
  55                                          createDOM('shadow', {'id': 'c'}),
  56                                          createShadowRoot(createDOM('div', {'id': 'd'}),
  57                                                           createDOM('content', {'id': 'e'}),
  58                                                           createDOM('div', {'id': 'f'}))))));
  59
  60 debug('shadow reprojection, take 2');
  61 testComposedShadowTree(
  62     createDOM('div', {'id': 'a'},
  63               createDOM('div', {'id': 'b'}),
  64               createShadowRoot(createDOM('shadow', {'id': 'c'})),
  65               createShadowRoot(createDOM('div', {'id': 'd'},
  66                                          createDOM('shadow', {'id': 'e'}),
  67                                          createShadowRoot(createDOM('div', {'id': 'f'}),
  68                                                           createDOM('content', {'id': 'g'}),
  69                                                           createDOM('div', {'id': 'h'}))))));
  70
  71 debug('Ignore shadow fallback elements');
  72 testComposedShadowTree(
  73     createDOM('div', {'id': 'a'},
  74               createDOM('div', {'id': 'b'}),
  75               createShadowRoot(createDOM('div', {'id': 'c'}),
  76                                createDOM('shadow', {'id': 'd'},
  77                                          createDOM('div', {'id': 'e'})),
  78                                createDOM('shadow', {'id': 'f'},
  79                                          createDOM('div', {'id': 'g'})),
  80                                createDOM('div', {'id': 'h'})),
  81               createShadowRoot(createDOM('div', {'id': 'i'},
  82                                          createDOM('shadow', {'id': 'j'}),
  83                                          createShadowRoot(createDOM('div', {'id': 'k'}),
  84                                                           createDOM('content', {'id': 'l'}),
  85                                                           createDOM('div', {'id': 'm'}))))));
  86
  87 debug('with inactive insertion points')
  88 testComposedShadowTree(
  89     createDOM('div', {'id': 'a'},
  90               createDOM('content', {'id': 'b'},
  91                         createDOM('div', {'id': 'c'})),
  92               createDOM('shadow', {'id': 'd'},
  93                         createDOM('div', {'id': 'e'})),
  94               createShadowRoot(createDOM('div', {'id': 'f'}),
  95                                createDOM('content', {'id': 'g'},
  96                                          createDOM('content', {'id': 'h'}),
  97                                          createDOM('shadow', {'id': 'i'}),
  98                                          createDOM('div', {'id': 'j'})),
  99                                createDOM('content', {'id': 'k'},
 100                                          createDOM('content', {'id': 'l'}),
 101                                          createDOM('shadow', {'id': 'm'}),
 102                                          createDOM('div', {'id': 'n'})),
 103                                createDOM('shadow', {'id': 'o'},
 104                                          createDOM('content', {'id': 'p'}),
 105                                          createDOM('shadow', {'id': 'q'}),
 106                                          createDOM('div', {'id': 'r'}))),
 107               createShadowRoot(createDOM('div', {'id': 's'},
 108                                          createDOM('shadow', {'id': 't'}),
 109                                          createShadowRoot(createDOM('div', {'id': 'u'}),
 110                                                           createDOM('content', {'id': 'v'}),
 111                                                           createDOM('div', {'id': 'w'}))))));
 112
 113
 114 </script>
 115 </body>
 116 </html>