[Dojo-checkins] r1573 - in trunk: src tests
dojo-checkins at dojotoolkit.org
dojo-checkins at dojotoolkit.org
Wed Sep 21 01:29:06 PDT 2005
Author: sjmiles
Date: Wed Sep 21 01:29:04 2005
New Revision: 1573
Added:
trunk/tests/test_style_getBox.html
trunk/tests/test_style_metrics.html
trunk/tests/test_style_setBox.html
Modified:
trunk/src/style.js
Log:
Heavily modified style.js + new unit tests.
Modified: trunk/src/style.js
==============================================================================
--- trunk/src/style.js (original)
+++ trunk/src/style.js Wed Sep 21 01:29:04 2005
@@ -3,21 +3,32 @@
dojo.require("dojo.uri.Uri");
dojo.require("dojo.graphics.color");
-
// values: content-box, border-box
-dojo.style.getBoxSizing = function(node) {
- if(dojo.render.ie) {
- return document["compatMode"] != "BackCompat" ? "border-box" : "content-box";
- } else {
- if(arguments.length == 0) { node = document.documentElement; }
- var sizing = dojo.style.getStyle(node, "-moz-box-sizing")
- || dojo.style.getStyle(node, "box-sizing");
+dojo.style.boxSizing = {
+ marginBox: "margin-box",
+ borderBox: "border-box",
+ paddingBox: "padding-box",
+ contentBox: "content-box"
+};
+
+dojo.style.getBoxSizing = function(node)
+{
+ var cm = document["compatMode"];
+ if (cm == "BackCompat" || cm == "QuirksMode"){
+ return dojo.style.boxSizing.borderBox;
+ }else if (dojo.render.html.ie){
+ return dojo.style.boxSizing.contentBox;
+ }else{
+ if(arguments.length == 0){ node = document.documentElement; }
+ var sizing = dojo.style.getStyle(node, "-moz-box-sizing");
+ if(!sizing){ sizing = dojo.style.getStyle(node, "box-sizing"); }
+ return (sizing ? sizing : dojo.style.boxSizing.contentBox);
}
}
/*
-The following couple of function equate to the dimensions shown below
+The following several function use the dimensions shown below
+-------------------------+
| margin |
@@ -29,58 +40,181 @@
| | | | content | | | |
| | | +-------------+ | | |
| | +-|-------------|-+ | |
- | +---|-------------|---+ |
- +-|---|-------------|---|-+
- | | | | | |
- | | |<- content ->| | |
+ | +-|-|-------------|-|-+ |
+ +-|-|-|-------------|-|-|-+
+ | | | | | | | |
+ | | | |<- content ->| | | |
| |<------ inner ------>| |
|<-------- outer -------->|
-
+ +-------------------------+
+
+ * content-box
+
+ |m|b|p| |p|b|m|
+ | |<------ offset ----->| |
+ | | |<---- client --->| | |
+ | | | |<-- width -->| | | |
+
+ * border-box
+
+ |m|b|p| |p|b|m|
+ | |<------ offset ----->| |
+ | | |<---- client --->| | |
+ | |<------ width ------>| |
+*/
+
+/*
+ Notes:
+
+ General:
+ - Uncomputable values are returned as NaN.
+ - setOuterWidth/Height return *false* if the outer size could not be computed, otherwise *true*.
+ - I (sjmiles) know no way to find the calculated values for auto-margins.
+ - All values are floating point in 'px' units. If a non-zero computed style value is not specified in 'px', NaN is returned.
+
+ FF:
+ - styles specified as '0' (unitless 0) show computed as '0pt'.
+
+ IE:
+ - clientWidth/Height are unreliable (0 unless the object has 'layout').
+ - margins must be specified in px, or 0 (in any unit) for all sizing functions to work.
+ - padding can be empty or, if specified, must be in px, or 0 (in any unit) for all sizing functions to work.
+
+ Safari:
+ - Safari defaults padding values to 'auto'.
+
+ See the unit tests for listings of (un)computable values in a given browser.
+
*/
-dojo.style.getContentWidth = function (node) {
- // FIXME: clientWidth includes padding
- if (dojo.render.html.ie && node.clientWidth) { return node.clientWidth; }
- var match = dojo.style.getStyle(node, "width").match(/[0-9]+/);
- if (match) { return Number(match[0]); } else { return 0; }
+// FIXME: these work for most elements (e.g. DIV) but not all (e.g. TEXTAREA)
+
+dojo.style.isBorderBox = function(node)
+{
+ return (dojo.style.getBoxSizing(node) == dojo.style.boxSizing.borderBox);
+}
+
+dojo.style.getNumericStyle = function (element, cssSelector){
+ // FIXME: is regex inefficient vs. parseInt or some manual test?
+ var s = dojo.style.getComputedStyle(element, cssSelector);
+ if (s == ''){ return 0; }
+ if (dojo.lang.isUndefined(s)){ return NaN };
+ var match = s.match(/([\d.]+)([a-z]*)/);
+ if (!match || !match[1])
+ return NaN;
+ var n = Number(match[1]);
+ return (n == 0 || match[2]=='px' ? n : NaN);
+}
+
+dojo.style.getMarginWidth = function(node){
+ var left = dojo.style.getNumericStyle(node, "margin-left");
+ var right = dojo.style.getNumericStyle(node, "margin-right");
+ return left + right;
+}
+
+dojo.style.getBorderWidth = function(node){
+ if (node.clientWidth){
+ return node.offsetWidth - node.clientWidth;
+ }else{
+ var left = (dojo.style.getStyle(node, 'border-left-style') == 'none' ? 0 : dojo.style.getNumericStyle(node, "border-left-width"));
+ var right = (dojo.style.getStyle(node, 'border-right-style') == 'none' ? 0 : dojo.style.getNumericStyle(node, "border-right-width"));
+ return left + right;
+ }
+}
+
+dojo.style.getPaddingWidth = function(node){
+ var left = (dojo.style.getStyle(node, 'padding-left') == 'auto' ? 0 : dojo.style.getNumericStyle(node, "padding-left"));
+ var right = (dojo.style.getStyle(node, 'padding-right') == 'auto' ? 0 : dojo.style.getNumericStyle(node, "padding-right"));
+ return left + right;
+}
+
+dojo.style.getContentWidth = function (node){
+ return node.offsetWidth - dojo.style.getPaddingWidth(node) - dojo.style.getBorderWidth(node);
}
dojo.style.getInnerWidth = function (node){
return node.offsetWidth;
}
-this.getOuterWidth = function(node) {
- var leftMargin = Number(dojo.style.getStyle(node, "margin-left"));
- var rightMargin = Number(dojo.style.getStyle(node, "margin-left"));
- return dojo.style.getInnerWidth() + leftMargin + rightMargin;
+dojo.style.getOuterWidth = function (node){
+ return dojo.style.getInnerWidth(node) + dojo.style.getMarginWidth(node);
+}
+
+dojo.style.setOuterWidth = function (node, pxWidth){
+ if (!dojo.style.isBorderBox(node)){
+ pxWidth -= dojo.style.getPaddingWidth(node) + dojo.style.getBorderWidth(node);
+ }
+ pxWidth -= dojo.style.getMarginWidth(node);
+ if (!isNaN(pxWidth) && pxWidth > 0){
+ node.style.width = pxWidth + 'px';
+ return true;
+ }else return false;
+}
+
+dojo.style.getContentBoxWidth = dojo.style.getContentWidth;
+dojo.style.getBorderBoxWidth = dojo.style.getInnerWidth;
+dojo.style.getMarginBoxWidth = dojo.style.getOuterWidth;
+dojo.style.setMarginBoxWidth = dojo.style.setOuterWidth;
+
+dojo.style.getMarginHeight = function(node){
+ var top = dojo.style.getNumericStyle(node, "margin-top");
+ var bottom = dojo.style.getNumericStyle(node, "margin-bottom");
+ return top + bottom;
}
-dojo.style.getContentHeight = function (node) {
- // FIXME: clientHeight includes padding
- if (dojo.render.html.ie && node.clientHeight) { return node.clientHeight; }
- var match = dojo.style.getStyle(node, "height").match(/[0-9]+/);
- if (match) { return Number(match[0]); } else { return 0; }
+dojo.style.getBorderHeight = function(node){
+ if (node.clientHeight){
+ return node.offsetHeight- node.clientHeight;
+ }else{
+ var top = (dojo.style.getStyle(node, 'border-top-style') == 'none' ? 0 : dojo.style.getNumericStyle(node, "border-top-width"));
+ var bottom = (dojo.style.getStyle(node, 'border-bottom-style') == 'none' ? 0 : dojo.style.getNumericStyle(node, "border-bottom-width"));
+ return top + bottom;
+ }
+}
+
+dojo.style.getPaddingHeight = function(node){
+ var top = (dojo.style.getStyle(node, 'padding-top') == 'auto' ? 0 : dojo.style.getNumericStyle(node, "padding-top"));
+ var bottom = (dojo.style.getStyle(node, 'padding-bottom') == 'auto' ? 0 : dojo.style.getNumericStyle(node, "padding-bottom"));
+ return top + bottom;
+}
+
+dojo.style.getContentHeight = function (node){
+ return node.offsetHeight - dojo.style.getPaddingHeight(node) - dojo.style.getBorderHeight(node);
}
dojo.style.getInnerHeight = function (node){
return node.offsetHeight; // FIXME: does this work?
}
-this.getOuterHeight = function(node){
- var topMargin = Number(dojo.style.getStyle(node, "margin-top"));
- var bottomMargin = Number(dojo.style.getStyle(node, "margin-bottom"));
- return dojo.style.getInnerHeight() + topMargin + bottomMargin;
+dojo.style.getOuterHeight = function (node){
+ return dojo.style.getInnerHeight(node) + dojo.style.getMarginHeight(node);
+}
+
+dojo.style.setOuterHeight = function (node, pxHeight){
+ if (!dojo.style.isBorderBox(node)){
+ pxHeight -= dojo.style.getPaddingHeight(node) + dojo.style.getBorderHeight(node);
+ }
+ pxHeight -= dojo.style.getMarginHeight(node);
+ if (!isNaN(pxHeight) && pxHeight > 0){
+ node.style.height = pxHeight + 'px';
+ return true;
+ }else return false;
}
+dojo.style.getContentBoxHeight = dojo.style.getContentHeight;
+dojo.style.getBorderBoxHeight = dojo.style.getInnerHeight;
+dojo.style.getMarginBoxHeight = dojo.style.getOuterHeight;
+dojo.style.setMarginBoxHeight = dojo.style.setOuterHeight;
+
dojo.style.getTotalOffset = function (node, type){
var typeStr = (type=="top") ? "offsetTop" : "offsetLeft";
var alt = (type=="top") ? "y" : "x";
var ret = 0;
if(node["offsetParent"]){
+
// FIXME: this is known not to work sometimes on IE 5.x since nodes
// soemtimes need to be "tickled" before they will display their
// offset correctly
-
do {
ret += node[typeStr];
node = node.offsetParent;
@@ -104,7 +238,6 @@
dojo.style.getAbsoluteY = dojo.style.totalOffsetTop;
-
dojo.style.styleSheet = null;
// FIXME: this is a really basic stub for adding and removing cssRules, but
@@ -193,22 +326,24 @@
return color;
}
-dojo.style.getStyle = function (element, cssSelector) {
- var value = undefined, camelCased = dojo.style.toCamelCase(cssSelector);
- value = element.style[camelCased]; // dom-ish
- if(!value) {
- if(document.defaultView) { // gecko
- value = document.defaultView.getComputedStyle(element, "")
- .getPropertyValue(cssSelector);
- } else if(element.currentStyle) { // ie
- value = element.currentStyle[camelCased];
- } else if(element.style.getPropertyValue) { // dom spec
- value = element.style.getPropertyValue(cssSelector);
- }
+dojo.style.getComputedStyle = function (element, cssSelector, inValue) {
+ var value = inValue;
+ if(document.defaultView) { // gecko
+ value = document.defaultView.getComputedStyle(element, "").getPropertyValue(cssSelector);
+ } else if(element.currentStyle) { // ie
+ value = element.currentStyle[dojo.style.toCamelCase(cssSelector)];
+ } else if(element.style.getPropertyValue) { // dom spec
+ value = element.style.getPropertyValue(cssSelector);
}
return value;
}
+dojo.style.getStyle = function (element, cssSelector) {
+ var camelCased = dojo.style.toCamelCase(cssSelector);
+ var value = element.style[camelCased]; // dom-ish
+ return (value ? value : dojo.style.getComputedStyle(element, cssSelector, value));
+}
+
dojo.style.toCamelCase = function (selector) {
var arr = selector.split('-'), cc = arr[0];
for(var i = 1; i < arr.length; i++) {
Added: trunk/tests/test_style_getBox.html
==============================================================================
--- (empty file)
+++ trunk/tests/test_style_getBox.html Wed Sep 21 01:29:04 2005
@@ -0,0 +1,161 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+
+<title>Dojo: Test of style.js: test get[Margin|Border|Content]Box[Width|Height]</title>
+<script type="text/javascript"> djConfig = { isDebug: true }; </script>
+<script type="text/javascript" src="../dojo.js"></script>
+<script type="text/javascript">
+
+dojo.require("dojo.html");
+dojo.require("dojo.style");
+dojo.require("dojo.event");
+function $ (id) { return dojo.lang.isString(id) ? document.getElementById(id) : id; }
+
+</script>
+<style type="text/css">
+body { cursor: wait; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px; }
+h2, h3 { font-size: 1em; margin-top: 2.5em; } h3 { color: black; font-weight: normal; font-style: italic; }
+.test { border: 1px solid green; }
+.bar { background-color:#FFCCFF; height: 8px; overflow: hidden }
+.success { background-color:lightgreen; }
+.failure { background-color:#FFCECE; }
+#report { white-space: nowrap; font-family: "Courier New", Courier, mono; font-size: 11px; }
+</style>
+
+<!---------------------------------------------------------------------------->
+<h2><code>getBoxSizing</code></h2>
+
+For browsers that support box-sizing or -moz-box-sizing) styles (not IE).
+<p class="test" id="contentBox" style="border: 1px solid green"></p>
+<p class="test" id="borderBox" style="-moz-box-sizing: border-box; box-sizing: border-box;"></p>
+
+<script type="text/javascript">
+var contentBox = document.getElementById('contentBox');
+contentBox.innerHTML = 'ASSERT content-box == ' + dojo.style.getBoxSizing(contentBox);
+
+var borderBox = document.getElementById('borderBox');
+borderBox.innerHTML = 'ASSERT border-box == ' + dojo.style.getBoxSizing(borderBox);
+</script>
+
+<!---------------------------------------------------------------------------->
+<h2><code>get[content|inner|outer][Width|Height]</code></h2>
+
+<ul>
+ <li>Colored bars bracket test boxes to reveal exterior margins</li>
+ <li>NaN indicates a value that could not be calculated</li>
+ <li>Styles are all specified inline. Other tests should be run with other style specifications.</li>
+ <li>Test boxes are DIVs. Other tests should be run on other elements. </li>
+</ul>
+
+<h3>Test Report</h3>
+<pre>
+<div id="report"></div>
+</pre>
+<div id="pacify"><h1>Working...</h1></div>
+
+<h3>Test Boxes</h3>
+<div id="boxTests"></div>
+
+<script type="text/javascript">
+var sizes = [ '', 'width: auto; height: auto;', 'width: 450px; height: 80px;', 'width: 15em; height: 6em;' ];
+var margins = [ '', 'margin: 0;', 'margin: auto;', 'margin: 8px;', 'margin: 1em;' ];
+var paddings = [ '', 'padding: 8px;', 'padding: 1em;' ];
+var borders = [ '', 'border: 1px solid green;', 'border: 0.5em solid green' ];
+var boxes = [ '', '-moz-box-sizing: border-box; box-sizing: border-box;' ];
+
+var h = '';
+var styles = [ ];
+var results = [ ];
+var index = 0;
+
+for (bx in boxes)
+{
+ results.push('<h4>Test box-sizing: ' + (boxes[bx] ? boxes[bx] : '(none)') + '</h4>');
+ for (var bo in borders)
+ {
+ results.push('<h4>Test border: ' + (borders[bo] ? borders[bo] : '(none)') + '</h4>');
+ for (var pa in paddings)
+ {
+ results.push('<h4>Test padding: ' + (paddings[pa] ? paddings[pa] : '(none)') + '</h4>');
+ for (var si in sizes)
+ {
+ results.push('<h4>Test size: ' + (sizes[si] ? sizes[si] : '(none)') + '</h4>');
+ for (var ma in margins)
+ {
+ var style = [ paddings[pa], margins[ma], sizes[si], borders[bo], boxes[bx] ].join(' ');
+ styles.push(style);
+ h = '<div id="box-' + index + '" style="' + style + '">' + 'Box: ' + style + '</div>';
+ h = '<div class="bar"> </div>' + h + '<div class="bar"> </div>';
+ results.push(h);
+ index++;
+ }
+ }
+ }
+ }
+}
+
+var count = index;
+
+results.push(h);
+document.getElementById('boxTests').innerHTML = results.join('');
+
+window.setTimeout(processMetrics, 500);
+
+function reportHtml(inTest, inStyle, inFail)
+{
+ //return '<div class="' + (inFail ? 'failure' : 'success') + '">' + inTest + (inFail ? ' FAILED (returned NaN)' : ' succeeded') + ' for style ' + inStyle + '</div>';
+ return '<div>' + inTest + ' <span class="' + (inFail ? 'failure' : 'success') + '">' + (inFail ? 'FAILED (returned NaN)' : 'succeeded') + '</span> for style [' + inStyle + ']</div>';
+}
+
+function processMetrics()
+{
+ var boxes = new Array(count);
+ for (var i=0; i<index; i++){
+ boxes[i] = document.getElementById('box-' + i);
+ }
+ var results = [ ];
+ for (var i=0; i<index; i++) {
+ results.push(reportHtml('getMarginBox ', styles[i],
+ isNaN(dojo.style.getMarginBoxWidth(boxes[i])) || isNaN(dojo.style.getMarginBoxHeight(boxes[i]))));
+ results.push(reportHtml('getBorderBox ', styles[i],
+ isNaN(dojo.style.getBorderBoxWidth(boxes[i])) || isNaN(dojo.style.getBorderBoxHeight(boxes[i]))));
+ results.push(reportHtml('getContentBox', styles[i],
+ isNaN(dojo.style.getContentBoxWidth(boxes[i])) || isNaN(dojo.style.getContentBoxHeight(boxes[i]))));
+ }
+ document.getElementById('pacify').innerHTML = '';
+ document.getElementById('report').innerHTML = results.join('');
+ document.body.style.cursor = 'default';
+}
+
+function dumpMetrics(node)
+{
+ var metrics = [
+ 'content: ' + dojo.style.getContentWidth(node) + ', ' + dojo.style.getContentHeight(node),
+ 'inner: ' + dojo.style.getInnerWidth(node) + ', ' + dojo.style.getInnerHeight(node),
+ 'outer: ' + dojo.style.getOuterWidth(node) + ', ' + dojo.style.getOuterHeight(node)
+// ,'margin-left: ' + dojo.style.getComputedStyle(node, 'margin-left')
+// ,'getMarginWidth: ' + dojo.style.getMarginWidth(node)
+// ,'margin-top: ' + dojo.style.getStyle(node, 'margin-top')
+// ,'getMarginHeight: ' + dojo.style.getMarginHeight(node)
+// ,'padding-left: ' + dojo.style.getStyle(node, 'padding-left')
+// ,'padding-top: ' + dojo.style.getStyle(node, 'padding-top')
+// ,'getPaddingWidth: ' + dojo.style.getPaddingWidth(node)
+// ,'getPaddingHeight: ' + dojo.style.getPaddingHeight(node)
+// ,'border-left-width: ' + dojo.style.getStyle(node, 'border-left-width')
+// ,'border-top-width: ' + dojo.style.getStyle(node, 'border-top-width')
+// ,'border-top-style: ' + dojo.style.getStyle(node, 'border-top-style')
+// ,'getBorderWidth: ' + dojo.style.getBorderWidth(node)
+// ,'getBorderHeight: ' + dojo.style.getBorderHeight(node)
+// ,'offsetHeight: ' + node.offsetHeight
+// ,'clientHeight: ' + node.clientHeight
+// ,'scrollHeight: ' + node.scrollHeight
+// ,'offsetWidth: ' + node.offsetWidth,
+// 'clientWidth: ' + node.clientWidth,
+// 'paddingWidth: ' + dojo.style.getPaddingWidth(node)
+ ];
+ return '<pre>' + metrics.join('<br>') + '</pre>';
+}
+</script>
+
+</script>
+
Added: trunk/tests/test_style_metrics.html
==============================================================================
--- (empty file)
+++ trunk/tests/test_style_metrics.html Wed Sep 21 01:29:04 2005
@@ -0,0 +1,126 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+
+<title>Dojo: Test of style.js: dump getXXX[Width|Height] values</title>
+<script type="text/javascript"> djConfig = { isDebug: true }; </script>
+<script type="text/javascript" src="../dojo.js"></script>
+<script type="text/javascript">
+
+dojo.require("dojo.html");
+dojo.require("dojo.style");
+dojo.require("dojo.event");
+function $ (id) { return dojo.lang.isString(id) ? document.getElementById(id) : id; }
+
+</script>
+<style type="text/css">
+body { cursor: wait; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
+h2, h3 { font-size: 1em; margin-top: 2.5em; } h3 { color: black; font-weight: normal; font-style: italic; }
+.test { border: 1px solid green; }
+.bar { background-color:#FFCCFF; height: 8px; overflow: hidden }
+</style>
+
+<!---------------------------------------------------------------------------->
+<h2><code>getBoxSizing</code></h2>
+
+For browsers that support box-sizing or -moz-box-sizing) styles (not IE).
+<p class="test" id="contentBox" style="border: 1px solid green"></p>
+<p class="test" id="borderBox" style="-moz-box-sizing: border-box; box-sizing: border-box;"></p>
+
+<script type="text/javascript">
+var contentBox = document.getElementById('contentBox');
+contentBox.innerHTML = 'ASSERT content-box == ' + dojo.style.getBoxSizing(contentBox);
+var borderBox = document.getElementById('borderBox');
+borderBox.innerHTML = 'ASSERT border-box == ' + dojo.style.getBoxSizing(borderBox);
+</script>
+
+<!---------------------------------------------------------------------------->
+<h2><code>get[content|inner|outer][Width|Height]</code></h2>
+
+<ul>
+ <li>Colored bars bracket test boxes to reveal exterior margins</li>
+ <li>NaN indicates a value that could not be calculated</li>
+ <li>Styles are all specified inline. Other tests should be run with other style specifications.</li>
+ <li>Test boxes are DIVs. Other tests should be run on other elements. </li>
+</ul>
+
+<div id="boxTests"></div>
+
+<script type="text/javascript">
+var sizes = [ '', 'width: auto; height: auto;', 'width: 450px; height: 80px;', 'width: 15em; height: 6em;' ];
+var margins = [ '', 'margin: 0;', 'margin: auto;', 'margin: 8px;', 'margin: 1em;' ];
+var paddings = [ '', 'padding: 8px;', 'padding: 1em;' ];
+var borders = [ '', 'border: 1px solid green;', 'border: 0.5em solid green' ];
+var boxes = [ '', '-moz-box-sizing: border-box; box-sizing: border-box;' ];
+
+var h = '';
+var results = [ ];
+var index = 0;
+for (bx in boxes)
+{
+ results.push('<h4>Test box-sizing: ' + (boxes[bx] ? boxes[bx] : '(none)') + '</h4>');
+ for (var bo in borders)
+ {
+ results.push('<h4>Test border: ' + (borders[bo] ? borders[bo] : '(none)') + '</h4>');
+ for (var pa in paddings)
+ {
+ results.push('<h4>Test padding: ' + (paddings[pa] ? paddings[pa] : '(none)') + '</h4>');
+ for (var si in sizes)
+ {
+ results.push('<h4>Test size: ' + (sizes[si] ? sizes[si] : '(none)') + '</h4>');
+ for (var ma in margins)
+ {
+ //results.push('<h4>Test margins: ' + (margins[ma] ? margins[ma] : '(none)') + '</h4>');
+ var style = [ paddings[pa], margins[ma], sizes[si], borders[bo], boxes[bx] ].join(' ');
+ h = '<div id="box-' + index + '" style="' + style + '">' + 'Box: ' + style + '</div>';
+ h = '<div class="bar"> </div>' + h + '<div class="bar"> </div>';
+ h += '<div id="dump-' + index + '"></div><hr>';
+ results.push(h);
+ index++;
+ }
+ }
+ }
+ }
+}
+results.push(h);
+document.getElementById('boxTests').innerHTML = results.join('');
+
+window.setTimeout(processMetrics, 500);
+function processMetrics()
+{
+ for (var i=0; i<index; i++)
+ document.getElementById('dump-' + i).innerHTML = dumpMetrics(document.getElementById('box-' + i));
+ document.body.style.cursor = 'default';
+}
+
+function dumpMetrics(node)
+{
+ var metrics = [
+ 'content: ' + dojo.style.getContentWidth(node) + ', ' + dojo.style.getContentHeight(node),
+ 'inner: ' + dojo.style.getInnerWidth(node) + ', ' + dojo.style.getInnerHeight(node),
+ 'outer: ' + dojo.style.getOuterWidth(node) + ', ' + dojo.style.getOuterHeight(node)
+// ,'margin-left: ' + dojo.style.getComputedStyle(node, 'margin-left')
+// ,'getMarginWidth: ' + dojo.style.getMarginWidth(node)
+// ,'margin-top: ' + dojo.style.getStyle(node, 'margin-top')
+// ,'getMarginHeight: ' + dojo.style.getMarginHeight(node)
+// ,'padding-left: ' + dojo.style.getStyle(node, 'padding-left')
+// ,'padding-top: ' + dojo.style.getStyle(node, 'padding-top')
+// ,'getPaddingWidth: ' + dojo.style.getPaddingWidth(node)
+// ,'getPaddingHeight: ' + dojo.style.getPaddingHeight(node)
+// ,'border-left-width: ' + dojo.style.getStyle(node, 'border-left-width')
+// ,'border-top-width: ' + dojo.style.getStyle(node, 'border-top-width')
+// ,'border-top-style: ' + dojo.style.getStyle(node, 'border-top-style')
+// ,'getBorderWidth: ' + dojo.style.getBorderWidth(node)
+// ,'getBorderHeight: ' + dojo.style.getBorderHeight(node)
+// ,'offsetHeight: ' + node.offsetHeight
+// ,'clientHeight: ' + node.clientHeight
+// ,'scrollHeight: ' + node.scrollHeight
+// ,'offsetWidth: ' + node.offsetWidth,
+// 'clientWidth: ' + node.clientWidth,
+// 'paddingWidth: ' + dojo.style.getPaddingWidth(node)
+ ];
+ return '<pre>' + metrics.join('<br>') + '</pre>';
+}
+</script>
+
+</script>
+
Added: trunk/tests/test_style_setBox.html
==============================================================================
--- (empty file)
+++ trunk/tests/test_style_setBox.html Wed Sep 21 01:29:04 2005
@@ -0,0 +1,125 @@
+<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
+ "http://www.w3.org/TR/html4/strict.dtd">
+
+<title>Dojo: Test of style.js: test setMarginBox[Width|Height]</title>
+<script type="text/javascript"> djConfig = { isDebug: true }; </script>
+<script type="text/javascript" src="../dojo.js"></script>
+<script type="text/javascript">
+
+dojo.require("dojo.html");
+dojo.require("dojo.style");
+dojo.require("dojo.event");
+function $ (id) { return dojo.lang.isString(id) ? document.getElementById(id) : id; }
+
+</script>
+<style type="text/css">
+body { cursor: wait; font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 11px;}
+h2, h3 { font-size: 1em; margin-top: 2.5em; }
+h3 { color: black; font-weight: normal; font-style: italic; }
+.test { font-size: 8px; }
+.bar { background-color:#3C3CFF; height: 2px; overflow: hidden }
+.success { background-color:lightgreen; }
+.unknown { background-color:yellow; }
+.failure { background-color:#FFCECE; }
+#report { white-space: nowrap; }
+</style>
+
+<!---------------------------------------------------------------------------->
+<h2><code>setOuter[Width|Height]</code></h2>
+
+<ul>
+ <li>Colored bars bracket test boxes to reveal exterior margins</li>
+ <li>Styles are all specified inline. Other tests should be run with other style specifications.</li>
+ <li>Test boxes are DIVs. Other tests should be run on other elements. </li>
+</ul>
+<h3>Test Report</h3>
+<div id="report"></div>
+<div id="pacify"><h1>Working...</h1></div>
+
+<h3>Test Boxes</h3>
+<div id="boxTests"></div>
+
+<script type="text/javascript">
+var sizes = [ '', 'width: auto; height: auto;', 'width: 450px; height: 80px;', 'width: 20em; height: 10em;' ];
+var margins = [ '', 'margin: 0;', 'margin: auto;', 'margin: 8px;', 'margin: 1em;' ];
+var paddings = [ '', 'padding: 8px;', 'padding: 1em;' ];
+var borders = [ '', 'border: 1px solid green;', 'border: 0.5em solid green' ];
+var boxes = [ '', '-moz-box-sizing: border-box; box-sizing: border-box;' ];
+
+var h = '';
+var results = [ ];
+var styles = [ ];
+var index = 0;
+for (bx in boxes)
+{
+ results.push('<h4>Test box-sizing: ' + (boxes[bx] ? boxes[bx] : '(none)') + '</h4>');
+ for (var bo in borders)
+ {
+ results.push('<h4>Test border: ' + (borders[bo] ? borders[bo] : '(none)') + '</h4>');
+ for (var pa in paddings)
+ {
+ results.push('<h4>Test padding: ' + (paddings[pa] ? paddings[pa] : '(none)') + '</h4>');
+ for (var si in sizes)
+ {
+ results.push('<h4>Test size: ' + (sizes[si] ? sizes[si] : '(none)') + '</h4>');
+ for (var ma in margins)
+ {
+ //results.push('<h4>Test margins: ' + (margins[ma] ? margins[ma] : '(none)') + '</h4>');
+ var style = [ paddings[pa], margins[ma], sizes[si], borders[bo], boxes[bx] ].join(' ');
+ styles.push(style);
+ h = '<div class="test" id="box-' + index + '" style="' + style + '">' + 'Box: ' + style + '</div>';
+ h = '<div class="bar"> </div>' + h + '<div class="bar"> </div>';
+ h += '<div id="dump-' + index + '"></div><hr>';
+ results.push(h);
+ index++;
+ }
+ }
+ }
+ }
+}
+results.push(h);
+document.getElementById('boxTests').innerHTML = results.join('');
+
+window.setTimeout(processMetrics, 500);
+function processMetrics()
+{
+ var report = [ ];
+ var targetW = 200;
+ var targetH = 60;
+ for (var i=0; i<index; i++)
+ {
+ var dump = document.getElementById('dump-' + i);
+ var box = document.getElementById('box-' + i);
+ var ok = dojo.style.setMarginBoxWidth(box, targetW);
+ ok = ok && dojo.style.setMarginBoxHeight(box, targetH);
+ if (!ok) {
+ dump.className = 'failure';
+ dump.innerHTML = "Failed to set size.";
+ report.push('<span class="failure">FAILED:</span> could not set size for style [' + styles[i] + ']');
+ continue;
+ }
+ var w = dojo.style.getMarginBoxWidth(box);
+ var h = dojo.style.getMarginBoxHeight(box);
+ ok = !isNaN(w) && !isNaN(h);
+ if (!ok){
+ dump.className = 'unknown';
+ dump.innerHTML = "uknown result";
+ report.push('<span class="unknown">UNKNOWN<span> result for style [' + styles[i] + ']');
+ }else if (w == targetW && h == targetH) {
+ dump.className = 'success';
+ dump.innerHTML = "success";
+ report.push('<span class="success">Success:</span> for style [' + styles[i] + ']');
+ }else{
+ dump.className = 'failure';
+ dump.innerHTML = "Final size (" + w + ', ' + h + ") doesn't match target (" + targetW + ', ' + targetH + ')';
+ report.push('<span class="failure">FAILED:</span> final size (' + w + ', ' + h + ') doesn`t match target (' + targetW + ', ' + targetH + '): for style [' + styles[i] + ']');
+ }
+ }
+ document.getElementById('pacify').innerHTML = '';
+ document.getElementById('report').innerHTML = report.join('<br>');
+ document.body.style.cursor = 'default';
+}
+</script>
+
+</script>
+
More information about the Dojo-checkins
mailing list