src/third_party/WebKit/LayoutTests/imported/web-platform-tests/shadow-dom/html-elements-and-their-shadow-trees/test-001.html

   1 <!DOCTYPE html>
   2 <!--
   3 Distributed under both the W3C Test Suite License [1] and the W3C
   4 3-clause BSD License [2]. To contribute to a W3C Test Suite, see the
   5 policies and contribution forms [3].
   6
   7 [1] http://www.w3.org/Consortium/Legal/2008/04-testsuite-license
   8 [2] http://www.w3.org/Consortium/Legal/2008/03-bsd-license
   9 [3] http://www.w3.org/2004/10/27-testcases
  10  -->
  11 <html>
  12 <head>
  13 <title>Shadow DOM Test: A_09_00_01</title>
  14 <link rel="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
  15 <link rel="help" href="http://www.w3.org/TR/2013/WD-shadow-dom-20130514/#html-elements-and-their-shadow-trees">
  16 <meta name="assert" content="HTML Elements and Their Shadow Trees: If the element can have fallback content, UA should allow the shadow tree to contain at least one insertion point.">
  17 <script src="../../../../resources/testharness.js"></script>
  18 <script src="../../../../resources/testharnessreport.js"></script>
  19 <script src="../testcommon.js"></script>
  20 <link rel="stylesheet" href="../../../../resources/testharness.css">
  21 </head>
  22 <body>
  23 <div id="log"></div>
  24 <script>
  25 //test iframe
  26 test(unit(function (ctx) {
  27
  28         var d = newRenderedHTMLDocument(ctx);
  29
  30         // create element
  31     var el = d.createElement('iframe');
  32     d.body.appendChild(el);
  33
  34     el.innerHTML = '' +
  35         '<span id="shadow">This is a node that should be distributed</span>' +
  36         '<span id="flbk">This is a fallback content</span>';
  37
  38     var s = el.createShadowRoot();
  39     s.innerHTML = '<content select="#shadow"></content>';
  40
  41     assert_true(d.querySelector('#shadow').offsetTop > 0, 'Iframe should allow at least one insertion point');
  42     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
  43
  44 }), 'A_09_00_01_T01');
  45
  46
  47 //test object
  48 test(unit(function (ctx) {
  49
  50         var d = newRenderedHTMLDocument(ctx);
  51
  52         // create element
  53     var el = d.createElement('object');
  54     d.body.appendChild(el);
  55
  56     el.innerHTML = '' +
  57         '<span id="shadow">This is a node that should be distributed</span>' +
  58         '<span id="flbk">This is a fallback content</span>';
  59
  60     var s = el.createShadowRoot();
  61     s.innerHTML = '<content select="#shadow"></content>';
  62
  63     assert_true(d.querySelector('#shadow').offsetTop > 0, 'object should allow at least one insertion point');
  64     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
  65
  66 }), 'A_09_00_01_T02');
  67
  68
  69 //test video
  70 test(unit(function (ctx) {
  71
  72         var d = newRenderedHTMLDocument(ctx);
  73
  74         // create element
  75     var el = d.createElement('video');
  76     d.body.appendChild(el);
  77
  78     el.innerHTML = '' +
  79         '<span id="shadow">This is a node that should be distributed</span>' +
  80         '<span id="flbk">This is a fallback content</span>';
  81
  82     var s = el.createShadowRoot();
  83     s.innerHTML = '<content select="#shadow"></content>';
  84
  85     assert_true(d.querySelector('#shadow').offsetTop > 0, 'video should allow at least one insertion point');
  86     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
  87
  88 }), 'A_09_00_01_T03');
  89
  90
  91 //test audio
  92 test(unit(function (ctx) {
  93
  94         var d = newRenderedHTMLDocument(ctx);
  95
  96         // create element
  97     var el = d.createElement('audio');
  98     d.body.appendChild(el);
  99
 100     el.innerHTML = '' +
 101         '<span id="shadow">This is a node that should be distributed</span>' +
 102         '<span id="flbk">This is a fallback content</span>';
 103
 104     var s = el.createShadowRoot();
 105     s.innerHTML = '<content select="#shadow"></content>';
 106
 107     assert_true(d.querySelector('#shadow').offsetTop > 0, 'audio should allow at least one insertion point');
 108     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
 109
 110 }), 'A_09_00_01_T04');
 111
 112
 113 //test canvas
 114 test(unit(function (ctx) {
 115
 116         var d = newRenderedHTMLDocument(ctx);
 117
 118         // create element
 119     var el = d.createElement('canvas');
 120     d.body.appendChild(el);
 121
 122     el.innerHTML = '' +
 123         '<span id="shadow">This is a node that should be distributed</span>' +
 124         '<span id="flbk">This is a fallback content</span>';
 125
 126     var s = el.createShadowRoot();
 127     s.innerHTML = '<content select="#shadow"></content>';
 128
 129     assert_true(d.querySelector('#shadow').offsetTop > 0, 'canvas should allow at least one insertion point');
 130     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
 131
 132 }), 'A_09_00_01_T05');
 133
 134
 135 //test map
 136 test(unit(function (ctx) {
 137
 138         var d = newRenderedHTMLDocument(ctx);
 139
 140     var img = d.createElement('img');
 141     img.setAttribute('usemap', '#theMap');
 142     img.setAttribute('width', '20px');
 143     img.setAttribute('height', '20px');
 144     d.body.appendChild(img);
 145
 146
 147         // create element
 148     var el = d.createElement('map');
 149     el.setAttribute('name', 'theMap');
 150     d.body.appendChild(el);
 151
 152     el.innerHTML = '' +
 153                 '<span id="shadow">This is a node that should be distributed</span>' +
 154                 '<span id="flbk">This is a fallback content</span>';
 155
 156
 157     var s = el.createShadowRoot();
 158     s.innerHTML = '<content select="#shadow"></content>';
 159
 160     assert_true(d.querySelector('#shadow').offsetTop > 0, 'map should allow at least one insertion point');
 161     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
 162
 163 }), 'A_09_00_01_T06');
 164
 165
 166 //test textarea
 167 test(unit(function (ctx) {
 168
 169         var d = newRenderedHTMLDocument(ctx);
 170
 171         // create element
 172     var el = d.createElement('textarea');
 173     d.body.appendChild(el);
 174
 175     el.innerHTML = '' +
 176         '<span id="shadow">This is a node that should be distributed</span>' +
 177         '<span id="flbk">This is a fallback content</span>';
 178
 179     var s = el.createShadowRoot();
 180     s.innerHTML = '<content select="#shadow"></content>';
 181
 182     assert_true(d.querySelector('#shadow').offsetTop > 0, 'textarea should allow at least one insertion point');
 183     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
 184
 185 }), 'A_09_00_01_T07');
 186
 187
 188 //test progress
 189 test(unit(function (ctx) {
 190
 191         var d = newRenderedHTMLDocument(ctx);
 192
 193         // create element
 194     var el = d.createElement('progress');
 195     d.body.appendChild(el);
 196
 197     el.innerHTML = '' +
 198         '<span id="shadow">This is a node that should be distributed</span>' +
 199         '<span id="flbk">This is a fallback content</span>';
 200
 201     var s = el.createShadowRoot();
 202     s.innerHTML = '<content select="#shadow"></content>';
 203
 204     assert_true(d.querySelector('#shadow').offsetTop > 0, 'progress should allow at least one insertion point');
 205     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
 206
 207 }), 'A_09_00_01_T08');
 208
 209
 210 //test meter
 211 test(unit(function (ctx) {
 212
 213         var d = newRenderedHTMLDocument(ctx);
 214
 215         // create element
 216     var el = d.createElement('meter');
 217     d.body.appendChild(el);
 218
 219     el.innerHTML = '' +
 220         '<span id="shadow">This is a node that should be distributed</span>' +
 221         '<span id="flbk">This is a fallback content</span>';
 222
 223     var s = el.createShadowRoot();
 224     s.innerHTML = '<content select="#shadow"></content>';
 225
 226     assert_true(d.querySelector('#shadow').offsetTop > 0, 'meter should allow at least one insertion point');
 227     assert_equals(d.querySelector('#flbk').offsetTop, 0, 'Fallback content shouldn\'t be rendered');
 228
 229 }), 'A_09_00_01_T09');
 230 </script>
 231 </body>
 232 </html>