| 1 | <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|---|
| 2 | "http://www.w3.org/TR/html4/strict.dtd"> |
|---|
| 3 | <html> |
|---|
| 4 | <head> |
|---|
| 5 | <title>dojo.window.getBox() test</title> |
|---|
| 6 | <style type="text/css"> |
|---|
| 7 | @import "../../../dojo/resources/dojo.css"; |
|---|
| 8 | html, body { margin: 0px; padding: 0px; } |
|---|
| 9 | </style> |
|---|
| 10 | <script type="text/javascript" src="../../../dojo/dojo.js" data-dojo-config="isDebug:true"></script> |
|---|
| 11 | |
|---|
| 12 | <script type="text/javascript"> |
|---|
| 13 | require(["doh", "dojo/dom", "dojo/dom-geometry", "dojo/window", "dojo/domReady!"], function(doh, dom, domGeom, winUtils){ |
|---|
| 14 | function compute(){ |
|---|
| 15 | var d = domGeom.getMarginBox(dom.byId("documentBorder")), |
|---|
| 16 | v = winUtils.getBox(); |
|---|
| 17 | dom.byId("results").innerHTML += |
|---|
| 18 | "Document is " + d.w + "px x " + d.h + "px" + |
|---|
| 19 | ", viewport is " + v.w + "px x " + v.h + "px" + |
|---|
| 20 | ", with scroll offset of (" + v.l + ", " + v.t + ")<br>"; |
|---|
| 21 | } |
|---|
| 22 | |
|---|
| 23 | function addText(){ |
|---|
| 24 | dom.byId("results").innerHTML += "Adding text...<br><br>"; |
|---|
| 25 | var text=[]; |
|---|
| 26 | for(var i=0;i<100;i++){ |
|---|
| 27 | text.push("<span style='white-space: nowrap'>"); |
|---|
| 28 | for(var j=0;j<3;j++){ text.push("Now is the time for all good men to come to the aid of their country."); } |
|---|
| 29 | text.push("</span><br>"); |
|---|
| 30 | } |
|---|
| 31 | dom.byId("documentBorder").innerHTML += text.join("\n"); |
|---|
| 32 | } |
|---|
| 33 | |
|---|
| 34 | doh.register("dojo.window.viewport", [ |
|---|
| 35 | function initial(t){ |
|---|
| 36 | console.log("calling compute"); |
|---|
| 37 | compute(); |
|---|
| 38 | console.log("called compute"); |
|---|
| 39 | var d = domGeom.getMarginBox(dom.byId("documentBorder")), |
|---|
| 40 | v = winUtils.getBox(); |
|---|
| 41 | doh.t(v.h > d.h, "test that viewport is bigger than document"); |
|---|
| 42 | console.log("v.h is " + v.h + " and d.h is " + d.h); |
|---|
| 43 | }, |
|---|
| 44 | function expand(t){ |
|---|
| 45 | var v = winUtils.getBox(); |
|---|
| 46 | console.log("calling addText"); |
|---|
| 47 | addText(); |
|---|
| 48 | compute(); |
|---|
| 49 | var v2 = winUtils.getBox(); |
|---|
| 50 | doh.t(v2.h <= v.h, "test that viewport didn't increase in size due to text added to document"); |
|---|
| 51 | doh.t(v2.h+20 >= v.h, "test that viewport didn't shrink, except for space taken by scrollbars"); |
|---|
| 52 | console.log("end"); |
|---|
| 53 | } |
|---|
| 54 | ]); |
|---|
| 55 | doh.run(); |
|---|
| 56 | }); |
|---|
| 57 | </script> |
|---|
| 58 | </head> |
|---|
| 59 | <body> |
|---|
| 60 | <div id="documentBorder" style="border: solid red 2px;"> |
|---|
| 61 | <h1>dojo.window.getBox() test</h1> |
|---|
| 62 | <div style="padding: 10px; border: solid blue 1px;">padding div</div> |
|---|
| 63 | <button onclick="addText(); compute();">add text and compute size</button> |
|---|
| 64 | <button onclick="compute();">recompute size</button> |
|---|
| 65 | <ol> |
|---|
| 66 | <li>check results div below to see that before adding text, document is smaller than viewport |
|---|
| 67 | <li>after adding text, document should be bigger than viewport,and check that viewport size hasn't changed, |
|---|
| 68 | except maybe being a little bit smaller (about 15px) because of the size of the scrollbars |
|---|
| 69 | <li>resize browser window and click the "recompute size" button; reported viewport size should change |
|---|
| 70 | <li>scroll the window and click "recompute size" to see that the scroll position is taken into effect |
|---|
| 71 | </ol> |
|---|
| 72 | <div id=results style="border: 5px solid blue;"></div> |
|---|
| 73 | </div> |
|---|
| 74 | </body> |
|---|
| 75 | </html> |
|---|
