| New file |
|---|
| 0,0 → 1,79 |
|---|
| <html> |
| <head> |
| <title>dijit.getViewport() test</title> |
| <style type="text/css"> |
| @import "../../../dojo/resources/dojo.css"; |
| @import "../css/dijitTests.css"; |
| html, body { margin: 0px; padding: 0px; } |
| </style> |
| <script type="text/javascript" src="../../../dojo/dojo.js" |
| djConfig="isDebug: false, parseOnLoad: false"></script> |
| <script type="text/javascript" src="../_testCommon.js"></script> |
| |
| <script type="text/javascript"> |
| dojo.require("doh.runner"); |
| dojo.require("dijit.dijit"); |
| |
| function compute(){ |
| var d = dojo.marginBox(dojo.byId("documentBorder")), |
| v = dijit.getViewport(); |
| dojo.byId("results").innerHTML += |
| "Document is " + d.w + "px x " + d.h + "px" + |
| ", viewport is " + v.w + "px x " + v.h + "px" + |
| ", with scroll offset of (" + v.l + ", " + v.t + ")<br>"; |
| } |
| |
| function addText(){ |
| dojo.byId("results").innerHTML += "Adding text...<br><br>"; |
| var text=""; |
| for(var i=0;i<100;i++){ |
| text += "<span style='white-space: nowrap'>"; |
| for(var j=0;j<3;j++){ text += "Now is the time for all good men to come to the aid of their country."; } |
| text += "</span><br>"; |
| } |
| dojo.byId("documentBorder").innerHTML += text; |
| } |
| |
| dojo.addOnLoad(function(){ |
| doh.register("dijit._base.manager", |
| [ |
| function initial(t){ |
| console.log("calling compute"); |
| compute(); |
| console.log("called compute"); |
| var d = dojo.marginBox(dojo.byId("documentBorder")), |
| v = dijit.getViewport(); |
| doh.t(v.h > d.h); |
| }, |
| function expand(t){ |
| var v = dijit.getViewport(); |
| addText(); |
| compute(); |
| var v2 = dijit.getViewport(); |
| doh.t(v2.h <= v.h); |
| doh.t(v2.h+20 >= v.h); |
| } |
| ] |
| ); |
| doh.run(); |
| }); |
| |
| </script> |
| </head> |
| <body> |
| <div id="documentBorder" style="border: solid red 2px;"> |
| <h1>dijit.getViewport() test</h1> |
| <div style="padding: 10px; border: solid blue 1px;">padding div</div> |
| <button onclick="addText(); compute();">add text and compute size</button> |
| <button onclick="compute();">recompute size</button> |
| <ol> |
| <li>check results div below to see that before adding text, document is smaller than viewport |
| <li>after adding text, document should be bigger than viewport,and check that viewport size hasn't changed, |
| except maybe being a little bit smaller (about 15px) because of the size of the scrollbars |
| <li>resize browser window and click the "recompute size" button; reported viewport size should change |
| <li>scroll the window and click "recompute size" to see that the scroll position is taken into effect |
| </ol> |
| <div id=results style="border: 5px solid blue;"> |
| </div> |
| </body> |
| </html> |