| <?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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment