src/third_party/WebKit/LayoutTests/fast/dom/shadow/shadow-contents-select.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <style>
   5 /* relative positioning ensures underlying RenderLayer */
   6 .container {
   7     position: relative;
   8 }
   9 </style>
  10 <script>
  11 function appendShadow(target, select) {
  12     var root = target.createShadowRoot();
  13
  14     var child0 = document.createElement("span");
  15     child0.innerHTML = "Hello,";
  16     root.appendChild(child0);
  17
  18     var content = document.createElement('content');
  19     content.setAttribute('select', select);
  20     root.appendChild(content);
  21
  22     var child1 = document.createElement("span");
  23     child1.innerHTML = "World.";
  24     root.appendChild(child1);
  25 }
  26
  27 function testSelectIsNull() {
  28     var target = document.createElement('div');
  29     target.innerHTML = "<span>content</span>";
  30
  31     appendShadow(target, "");
  32
  33     document.getElementById('container').appendChild(target);
  34 }
  35
  36 function testSelectIsId() {
  37     var target = document.createElement('div');
  38     target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span>";
  39
  40     appendShadow(target, "#foo");
  41
  42     document.getElementById('container').appendChild(target);
  43 }
  44
  45 function testSelectIsIdButNotMatched() {
  46     var target = document.createElement('div');
  47     target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span>";
  48
  49     appendShadow(target, "#foobar");
  50
  51     document.getElementById('container').appendChild(target);
  52 }
  53
  54 function testSelectIsIdButNotChild() {
  55     var target = document.createElement('div');
  56     target.innerHTML = "<span><span id='foo'>content</span><span id='azunyan'>peropero</span></span>";
  57
  58     appendShadow(target, "#foo");
  59
  60     document.getElementById('container').appendChild(target);
  61 }
  62
  63 function testSelectIsMultiId() {
  64     var target = document.createElement('div');
  65     target.innerHTML = "<span id='foo'>content</span><span id='azunyan'>peropero</span><span id='foo'>content</span>";
  66
  67     appendShadow(target, "#foo");
  68
  69     // All matched elements will be selected.
  70     document.getElementById('container').appendChild(target);
  71 }
  72
  73 function testSelectIsType() {
  74     var target = document.createElement('div');
  75     target.innerHTML = "<div>azunyan</div><span>content</span><div>peropero</div>";
  76
  77     appendShadow(target, "span");
  78
  79     document.getElementById('container').appendChild(target);
  80 }
  81
  82 function testSelectIsTypeWithAttribute() {
  83     var target = document.createElement('div');
  84     target.innerHTML = "<span>azunyan</span><span title='content'>content</span><span>peropero</span>";
  85
  86     appendShadow(target, "span[title='content']");
  87
  88     document.getElementById('container').appendChild(target);
  89 }
  90
  91 function testSelectIsTypeWithFirstOfType() {
  92     var target = document.createElement('div');
  93     target.innerHTML = "<div>azunyan</div><span>content</span><span>peropero</span>";
  94
  95     appendShadow(target, "span:first-of-type");
  96
  97     document.getElementById('container').appendChild(target);
  98 }
  99
 100 function testSelectIsTypeWithFirstOfType2() {
 101     var target = document.createElement('div');
 102     target.innerHTML = "<div><span>azunyan</span></div><span>content</span><span>peropero</span>";
 103
 104     appendShadow(target, "span:first-of-type");
 105
 106     document.getElementById('container').appendChild(target);
 107 }
 108
 109 function testSelectIsTypeWithLastOfType() {
 110     var target = document.createElement('div');
 111     target.innerHTML = "<span>azunyan</span><span>content</span><div>peropero</div>";
 112
 113     appendShadow(target, "span:last-of-type");
 114
 115     document.getElementById('container').appendChild(target);
 116 }
 117
 118 function testSelectIsDetails() {
 119     var target = document.createElement('div');
 120     target.innerHTML = "<details>content</details>";
 121
 122     appendShadow(target, "details");
 123
 124     document.getElementById('container').appendChild(target);
 125 }
 126
 127 function testSelectIsDetails2() {
 128     var target = document.createElement('div');
 129     target.innerHTML = "<details><summary>content</summary></details>";
 130
 131     appendShadow(target, "details");
 132
 133     document.getElementById('container').appendChild(target);
 134 }
 135
 136 function testSelectWhenDynamicallyChildrenChanged() {
 137     var target = document.createElement('div');
 138     target.innerHTML = "<span>content</span><span id='toberemoved'>anunyan peropero</span>";
 139
 140     appendShadow(target, "span");
 141
 142     document.getElementById('container').appendChild(target);
 143
 144     var elem = document.getElementById('toberemoved');
 145     elem.parentNode.removeChild(elem);
 146 }
 147
 148 var testFuncs = [
 149     testSelectIsNull,
 150     testSelectIsId,
 151     testSelectIsIdButNotMatched,
 152     testSelectIsIdButNotChild,
 153     testSelectIsMultiId,
 154     testSelectIsType,
 155     testSelectIsTypeWithAttribute,
 156     testSelectIsTypeWithFirstOfType,
 157     testSelectIsTypeWithFirstOfType2,
 158     testSelectIsTypeWithLastOfType,
 159     testSelectIsDetails,
 160     testSelectIsDetails2,
 161     testSelectWhenDynamicallyChildrenChanged,
 162 ]
 163
 164 function doTest() {
 165     for (var i = 0; i < testFuncs.length; ++i) {
 166        testFuncs[i]();
 167     }
 168 }
 169 </script>
 170 </head>
 171 <body onload="doTest()">
 172 <div id="container"></div>
 173 </body>
 174 </html>