src/third_party/WebKit/LayoutTests/w3c/web-platform-tests/html-templates/template-element/content-attribute.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4 <title>HTML Templates: Content attribute of template element is read-only</title>
   5 <meta name="author" title="Sergey G. Grekhov" href="mailto:sgrekhov@unipro.ru">
   6 <meta name="author" title="Aleksei Yu. Semenov" href="mailto:a.semenov@unipro.ru">
   7 <meta name="assert" content="Content attribute of template element is read-only">
   8 <link rel="help" href="http://www.w3.org/TR/2013/WD-html-templates-20130214/#template-element">
   9 <script src="../../../../resources/testharness.js"></script>
  10 <script src="../../../../resources/testharnessreport.js"></script>
  11 <script src='../testcommon.js'></script>
  12 <link rel="stylesheet" href="../../../../resources/testharness.css">
  13 </head>
  14 <body>
  15 <div id="log"></div>
  16 <script type="text/javascript">
  17
  18 test(function() {
  19     var doc = newHTMLDocument();
  20     var template = doc.createElement('template');
  21
  22     assert_readonly(template, 'content',
  23             'Content attribute of template element should be read-only');
  24
  25 }, 'Content attribute of template element is read-only. ' +
  26     'Test empty template');
  27
  28
  29 test(function() {
  30     var doc = newHTMLDocument();
  31     var template = doc.createElement('template');
  32     var el1 = doc.createElement('div');
  33     var el2 = doc.createElement('span');
  34     el1.appendChild(el2);
  35
  36     template.content.appendChild(el1);
  37
  38     assert_readonly(template, 'content',
  39             'Content attribute of template element should be read-only');
  40
  41 }, 'Content attribute of template element is read-only. ' +
  42     'Test not empty template populated by appendchild()');
  43
  44
  45 test(function() {
  46     var doc = newHTMLDocument();
  47     doc.body.innerHTML = '<template>Text<div>DIV</div></template>';
  48
  49     var template = doc.querySelector('template');
  50
  51     assert_readonly(template, 'content',
  52             'Content attribute of template element should be read-only');
  53
  54 }, 'Content attribute of template element is read-only. ' +
  55     'Test not empty template populated by innerHTML');
  56
  57
  58 test(function() {
  59     var doc = newHTMLDocument();
  60     doc.body.innerHTML = '<template id="template1" content="Some text as a content"></template>';
  61
  62     var template = doc.querySelector('#template1');
  63
  64     assert_readonly(template, 'content',
  65             'Content attribute of template element should be read-only');
  66
  67 }, 'Content attribute of template element is read-only. ' +
  68     'Test that custom content attribute named \'content\' doesn\'t ' +
  69     'make content IDL attribute writable');
  70
  71
  72 test(function() {
  73     var doc = newHTMLDocument();
  74     doc.body.innerHTML = '<template id="template1" content="<div id=div1>Div content</div>"></template>';
  75
  76     var template = doc.querySelector('#template1');
  77
  78     assert_readonly(template, 'content',
  79             'Content attribute of template element should be read-only');
  80
  81     assert_equals(template.content.childNodes.length, 0,
  82             'Content attribute of template element should be read-only');
  83
  84 }, 'Content attribute of template element is read-only. ' +
  85     'Test that custom content attribute named \'content\' doesn\'t ' +
  86     'affect content IDL attribute');
  87
  88
  89 testInIFrame('../resources/template-contents-attribute.html', function(context) {
  90     var doc = context.iframes[0].contentDocument;
  91
  92     var template = doc.body.querySelector('template');
  93
  94     assert_readonly(template, 'content',
  95             'Content attribute of template element should be read-only');
  96
  97 }, 'Content attribute of template element is read-only. '
  98     + 'Text value of content attribute of template tag should be ignored, '
  99     + 'when loading document from a file');
 100
 101
 102 testInIFrame('../resources/template-contents.html', function(context) {
 103     var doc = context.iframes[0].contentDocument;
 104
 105     var template = doc.body.querySelector('template');
 106
 107     assert_readonly(template, 'content',
 108             'Content attribute of template element should be read-only');
 109
 110 }, 'Content attribute of template element is read-only. '
 111     + 'Test content attribute of a document loaded from a file');
 112
 113 </script>
 114 </body>
 115 </html>