third_party/WebKit/LayoutTests/inspector/elements/shadow/shadow-host-display-modes-expected.txt

   1 CONSOLE WARNING: Calling Element.createShadowRoot() for an element which already hosts a shadow root is deprecated. See https://www.chromestatus.com/features/4668884095336448 for more details.
   2 Tests that distributed nodes and their updates are correctly shown in different shadow host display modes.
   3
   4 youngest distributed text
   5 oldest distributed text
   6 oldest distributed text
   7 oldest distributed text
   8 ========= Original ========
   9 - <div id="shadowHost">
  10       <div class="distributeMeToYoungest original">\n        youngest distributed text\n    </div>
  11       <div class="distributeMeToOldest original">\n        oldest distributed text\n    </div>
  12       <div class="distributeMeToInner original">\n        oldest distributed text\n    </div>
  13       <div class="distributeMeToInner original2">\n        oldest distributed text\n    </div>
  14   </div>
  15 ========= After shadow root created ========
  16 - <div id="shadowHost">
  17     - #shadow-root (open)
  18         - <div class="oldestShadowMain">
  19             - <content select=".distributeMeToOldest">
  20                   <div id="fallbackOldest"></div>
  21                   ↪ <div>
  22               </content>
  23           </div>
  24       <div class="distributeMeToYoungest original">\n        youngest distributed text\n    </div>
  25       <div class="distributeMeToOldest original">\n        oldest distributed text\n    </div>
  26       <div class="distributeMeToInner original">\n        oldest distributed text\n    </div>
  27       <div class="distributeMeToInner original2">\n        oldest distributed text\n    </div>
  28   </div>
  29 ========= After adding distributed node ========
  30 - <div id="shadowHost">
  31     - #shadow-root (open)
  32         - <div class="oldestShadowMain">
  33             - <content select=".distributeMeToOldest">
  34                   <div id="fallbackOldest"></div>
  35                   ↪ <div>
  36                   ↪ <div>
  37               </content>
  38           </div>
  39       <div class="distributeMeToYoungest original">\n        youngest distributed text\n    </div>
  40       <div class="distributeMeToOldest original">\n        oldest distributed text\n    </div>
  41       <div class="distributeMeToInner original">\n        oldest distributed text\n    </div>
  42       <div class="distributeMeToInner original2">\n        oldest distributed text\n    </div>
  43       <div class="distributeMeToOldest distributeMeAsWell_1"></div>
  44   </div>
  45 ========= After adding another distributed node ========
  46 - <div id="shadowHost">
  47     - #shadow-root (open)
  48         - <div class="oldestShadowMain">
  49             - <content select=".distributeMeToOldest">
  50                   <div id="fallbackOldest"></div>
  51                   ↪ <div>
  52                   ↪ <div>
  53                   ↪ <div>
  54               </content>
  55           </div>
  56       <div class="distributeMeToYoungest original">\n        youngest distributed text\n    </div>
  57       <div class="distributeMeToOldest original">\n        oldest distributed text\n    </div>
  58       <div class="distributeMeToInner original">\n        oldest distributed text\n    </div>
  59       <div class="distributeMeToInner original2">\n        oldest distributed text\n    </div>
  60       <div class="distributeMeToOldest distributeMeAsWell_1"></div>
  61       <div class="distributeMeToOldest distributeMeAsWell_2"></div>
  62   </div>
  63 ========= After adding youngest shadow root ========
  64 - <div id="shadowHost">
  65     - #shadow-root (open)
  66         - <div class="youngestShadowMain">
  67             - <shadow>
  68                   ↪ <div>
  69               </shadow>
  70             - <content select=".distributeMeToYoungest">
  71                   <div id="fallbackYoungest"></div>
  72                   ↪ <div>
  73               </content>
  74             - <div class="innerShadowHost">
  75                 - <content in-youngest-shadow-root select=".distributeMeToInner">
  76                       ↪ <div>
  77                       ↪ <div>
  78                   </content>
  79               </div>
  80           </div>
  81     - #shadow-root (open)
  82         - <div class="oldestShadowMain">
  83             - <content select=".distributeMeToOldest">
  84                   <div id="fallbackOldest"></div>
  85                   ↪ <div>
  86                   ↪ <div>
  87                   ↪ <div>
  88               </content>
  89           </div>
  90       <div class="distributeMeToYoungest original">\n        youngest distributed text\n    </div>
  91       <div class="distributeMeToOldest original">\n        oldest distributed text\n    </div>
  92       <div class="distributeMeToInner original">\n        oldest distributed text\n    </div>
  93       <div class="distributeMeToInner original2">\n        oldest distributed text\n    </div>
  94       <div class="distributeMeToOldest distributeMeAsWell_1"></div>
  95       <div class="distributeMeToOldest distributeMeAsWell_2"></div>
  96   </div>
  97 ========= After adding inner shadow root node ========
  98 - <div id="shadowHost">
  99     - #shadow-root (open)
 100         - <div class="youngestShadowMain">
 101             - <shadow>
 102                   ↪ <div>
 103               </shadow>
 104             - <content select=".distributeMeToYoungest">
 105                   <div id="fallbackYoungest"></div>
 106                   ↪ <div>
 107               </content>
 108             - <div class="innerShadowHost" id="innerShadowHost">
 109                 - #shadow-root (open)
 110                     - <div class="innerShadowMain">
 111                         - <content in-inner-shadow-root select=".distributeMeToInner">
 112                               ↪ <div>
 113                               ↪ <div>
 114                           </content>
 115                       </div>
 116                 - <content in-youngest-shadow-root select=".distributeMeToInner">
 117                       ↪ <div>
 118                       ↪ <div>
 119                   </content>
 120               </div>
 121           </div>
 122     - #shadow-root (open)
 123         - <div class="oldestShadowMain">
 124             - <content select=".distributeMeToOldest">
 125                   <div id="fallbackOldest"></div>
 126                   ↪ <div>
 127                   ↪ <div>
 128                   ↪ <div>
 129               </content>
 130           </div>
 131       <div class="distributeMeToYoungest original">\n        youngest distributed text\n    </div>
 132       <div class="distributeMeToOldest original">\n        oldest distributed text\n    </div>
 133       <div class="distributeMeToInner original">\n        oldest distributed text\n    </div>
 134       <div class="distributeMeToInner original2">\n        oldest distributed text\n    </div>
 135       <div class="distributeMeToOldest distributeMeAsWell_1"></div>
 136       <div class="distributeMeToOldest distributeMeAsWell_2"></div>
 137   </div>
 138