stackoverflow-questions-704758.html

## stackoverflow-questions-704758.html
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <title>example</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
      /* uncomment this for the last test*/
      /* #example-para{display:none !important; visibility: hidden !important} */
    </style>
  </head>
  <body id="example">
    <div id="example-branding">
      <h2 id="example-heading"><a href="http://www.example.com">Example Site</a></h2>
      <p id="example-para">Example paragraph</p>
    </div>
    <script type="text/javascript" src="prototype.js"></script>
    <script type="text/javascript">

      var elem = $("example-para");
      var wrapper = $("example-branding");

      console.log("displayed wrapper, displayed elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      elem.hide();
      console.log("displayed wrapper, hidden elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      elem.show();
      wrapper.hide();
      console.log("hidden wrapper, shown elemm:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      wrapper.show();
      elem.setStyle({visibility:"hidden"});
      console.log("displayed wrapper, invisible elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      wrapper.setStyle({visibility:"hidden"});
      elem.setStyle({visibility:"visible"});
      console.log("invisible wrapper, visible elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      wrapper.setStyle({visibility:"visible"});
      elem.setStyle({textIndent:"-10000px"});
      console.log("visible wrapper, negative indented elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      elem.setStyle({textIndent:"0px"});
      wrapper.setStyle({textIndent:"-10000px"});
      console.log("negative indented wrapper, visible elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      wrapper.setStyle({textIndent:"0px"});
      elem.setStyle({position:"relative",left:"-10000px"})
      console.log("visible wrapper, negative positioned elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      elem.setStyle({position:"relative",left:"10000px"})
      console.log("visible wrapper, positive positioned elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      elem.setStyle({position:"static",display:"inline"})
      console.log("visible wrapper, inline elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility")
                 );
      elem.setStyle({display:"block", visibility:"visible"})
      console.log("hidden css with !important, displayed elem:" +
                  "\nviewportoffset() " + elem.viewportOffset() +
                  "\nvisible() " + elem.visible() +
                  "\ngetStyle('display') " + elem.getStyle("display") +
                  "\ngetStyle('visibility') " + elem.getStyle("visibility") +
                  "\ngetComputedStyle() \n"
                 );
      console.log(getComputedStyle(elem,null));
    </script>

<!--
Test results in Firebug console:

displayed wrapper, displayed elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible

displayed wrapper, hidden elem:
viewportoffset() 0,0
visible() false
getStyle('display') none
getStyle('visibility') visible

hidden wrapper, shown elemm:
viewportoffset() 0,0
visible() true
getStyle('display') block
getStyle('visibility') visible

displayed wrapper, invisible elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') hidden

invisible wrapper, visible elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible

visible wrapper, negative indented elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible

negative indented wrapper, visible elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible

visible wrapper, negative positioned elem:
viewportoffset() -9992,69
visible() true
getStyle('display') block
getStyle('visibility') visible

visible wrapper, positive positioned elem:
viewportoffset() 10008,69
visible() true
getStyle('display') block
getStyle('visibility') visible

visible wrapper, inline elem:
viewportoffset() 8,69
visible() true
getStyle('display') inline
getStyle('visibility') visible

//uncomment the style def for this test

hidden css with !important, displayed elem:
viewportoffset() 8,69
visible() true
getStyle('display') block
getStyle('visibility') visible
getComputedStyle() ComputedCSSStyleDeclaration position=static display=none visibility=hidden
-->

  </body>
</html>