LayoutTests/fast/html/hidden-attr.html

   1 <!DOCTYPE html>\r
   2 <meta charset=utf8>\r
   3 <script src="../../fast/js/resources/js-test-pre.js"></script>\r
   4 \r
   5 <p id="description"></p>\r
   6 <div id="console">\r
   7 Tests that hidden in markup works:\r
   8 <div hidden><span class=fail>FAIL</span> - this line should not appear</div><div hidden=hidden><span class=fail>FAIL</span> - this line should not appear</div><div hidden=false><span class=fail>FAIL</span> - this line should not appear</div><p hidden><span class=fail>FAIL</span> - this line should not appear</p><span hidden><span class=fail>FAIL</span> - this line should not appear</span><img width=400px alt="FAIL - this should not appear" src="resources/xxx-missing.jpeg" hidden>\r
   9 \r
  10 Tests that dynamically adding/removing hidden works:\r
  11 <div hidden id=test1><span class=pass>PASS</span> - this line should appear<div id=test2><span class=fail>FAIL</span> - this line should not appear</div>\r
  12 </div>\r
  13 <script>\r
  14 description('Various tests for the hidden attribute.');\r
  15 \r
  16 document.getElementById("test1").removeAttribute("hidden");\r
  17 document.getElementById("test2").setAttribute("hidden", "");\r
  18 \r
  19 var testParent = document.createElement('div');\r
  20 document.body.appendChild(testParent);\r
  21 \r
  22 debug('Dynamic changing of hidden and effects on style:');\r
  23 testParent.innerHTML="<div id=test3 hidden>a</div><div id=test4>b</div>"\r
  24 var test3 = document.getElementById("test3");\r
  25 var test4 = document.getElementById("test4");\r
  26 \r
  27 shouldBe('getComputedStyle(test3, false).display', '"none"');\r
  28 test3.removeAttribute("hidden");\r
  29 debug('test3.removeAttribute("hidden")');\r
  30 shouldBe('getComputedStyle(test3, false).display', '"block"');\r
  31 \r
  32 shouldBe('getComputedStyle(test4, false).display', '"block"');\r
  33 test4.setAttribute("hidden", "");\r
  34 debug('test4.setAttribute("hidden", "")');\r
  35 shouldBe('getComputedStyle(test4, false).display', '"none"');\r
  36 \r
  37 </script>\r
  38 <script src="../../fast/js/resources/js-test-post.js"></script>\r
  39 </body>\r
  40 </html>\r