You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
204 lines
6.2 KiB
204 lines
6.2 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> |
|
<!-- |
|
we use a strict-mode DTD to ensure that the box model is the same for these |
|
basic tests |
|
--> |
|
<html> |
|
<head> |
|
<title> test html.js Box utils</title> |
|
<style type="text/css"> |
|
/*@import "../../resources/dojo.css";*/ |
|
</style> |
|
<script type="text/javascript" src="../../dojo.js" data-dojo-config="isDebug:true"></script> |
|
<script type="text/javascript"> |
|
require(["dojo", "doh", "dojo/domReady!"], function(dojo, doh){ |
|
|
|
var margin = '1px'; |
|
var border = '3px solid black'; |
|
var padding = '5px'; |
|
var defaultStyles = { |
|
height: '100px', |
|
width: '100px', |
|
position: 'absolute', |
|
backgroundColor: 'red' |
|
}; |
|
|
|
var defaultChildStyles = { |
|
height: '20px', |
|
width: '20px', |
|
backgroundColor: 'blue' |
|
}; |
|
|
|
var testStyles = [ |
|
{}, |
|
{margin: margin}, |
|
{border: border}, |
|
{padding: padding}, |
|
{margin: margin, border: border}, |
|
{margin: margin, padding: padding}, |
|
{border: border, padding: padding}, |
|
{margin: margin, border: border, padding: padding} |
|
]; |
|
|
|
|
|
function sameBox(inBox1, inBox2) { |
|
for (var i in inBox1) |
|
if (inBox1[i] != inBox2[i]) { |
|
console.log((arguments[2]||'box1') + '.' + i + ': ', inBox1[i], ' != ', (arguments[3]||'box2') + '.' + i + ': ', inBox2[i]); |
|
return false; |
|
} |
|
return true; |
|
} |
|
|
|
function reciprocalMarginBoxTest(inNode, inBox) { |
|
var s = inBox || dojo.marginBox(inNode); |
|
dojo.marginBox(inNode, s); |
|
var e = dojo.marginBox(inNode); |
|
return sameBox(s, e); |
|
} |
|
|
|
function fitTest(inParent, inChild) { |
|
var pcb = dojo.contentBox(inParent); |
|
return reciprocalMarginBoxTest(inChild, pcb); |
|
} |
|
|
|
function createStyledElement(inStyle, inParent, inElement, inNoDefault) { |
|
inStyle = inStyle||{}; |
|
if (!inNoDefault) { |
|
for (var i in defaultStyles) |
|
if (!inStyle[i]) |
|
inStyle[i] = defaultStyles[i]; |
|
} |
|
var n = document.createElement(inElement || 'div'); |
|
(inParent||document.body).appendChild(n); |
|
dojo.mixin(n.style, inStyle); |
|
return n; |
|
} |
|
|
|
var _testTopInc = 0; |
|
var _testTop = 150; |
|
var _testInitTop = 250; |
|
function styleIncTop(inStyle) { |
|
inStyle = dojo.mixin({}, inStyle||{}); |
|
inStyle.top = (_testInitTop + _testTop*_testTopInc) + 'px'; |
|
_testTopInc++; |
|
return inStyle; |
|
} |
|
|
|
function removeTestNode(inNode) { |
|
// leave nodes for inspection or don't return to delete them |
|
return; |
|
inNode = dojo.byId(inNode); |
|
inNode.parentNode.removeChild(inNode); |
|
_testTopInc--; |
|
} |
|
|
|
function testAndCallback(inTest, inAssert, inOk, inErr) { |
|
inTest.assertTrue(inAssert); |
|
if (inAssert) |
|
inOk&&inOk(); |
|
else |
|
inErr&&inErr(); |
|
} |
|
|
|
// args are (styles, parent, element name, no default) |
|
function mixCreateElementArgs(inMix, inArgs) { |
|
args = [{}]; |
|
if (inArgs&&inArgs[0]) |
|
dojo.mixin(args[0], inArgs[0]); |
|
if (inMix.length) |
|
dojo.mixin(args[0], inMix[0]||{}); |
|
// parent comes from source |
|
if (inMix.length > 1) |
|
args[1] = inMix[1]; |
|
args[2] = inArgs[2]; |
|
args[3] = inArgs[3]; |
|
return args; |
|
} |
|
|
|
function createStyledNodes(inArgs, inFunc) { |
|
for (var i=0, n; (s=testStyles[i]); i++) { |
|
n = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inArgs)); |
|
inFunc&&inFunc(n); |
|
} |
|
} |
|
|
|
function createStyledParentChild(inParentArgs, inChildArgs, inFunc) { |
|
for (var i=0, s, p, c; (s=testStyles[i]); i++) { |
|
p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs)); |
|
c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs)); |
|
inFunc&&inFunc(p, c); |
|
} |
|
} |
|
|
|
function createStyledParentChildren(inParentArgs, inChildArgs, inFunc) { |
|
for (var i=0, s, p; (s=testStyles[i]); i++) |
|
for (var j=0, sc, c, props; (sc=testStyles[j]); j++) { |
|
p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs)); |
|
c = createStyledElement.apply(this, mixCreateElementArgs([sc, p], inChildArgs)); |
|
inFunc&&inFunc(p, c); |
|
} |
|
|
|
for (var i=0, s, p, c; (s=testStyles[i]); i++) { |
|
p = createStyledElement.apply(this, mixCreateElementArgs([styleIncTop(s)], inParentArgs)); |
|
c = createStyledElement.apply(this, mixCreateElementArgs([{}, p], inChildArgs)); |
|
inFunc&&inFunc(p, c); |
|
} |
|
} |
|
|
|
|
|
function runFitTest(inTest, inParentStyles, inChildStyles) { |
|
createStyledParentChildren([inParentStyles], [inChildStyles], function(p, c) { |
|
testAndCallback(inTest, fitTest(p, c), function() {removeTestNode(p); }); |
|
}); |
|
} |
|
|
|
doh.register("t", |
|
[ |
|
function reciprocalTests(t) { |
|
createStyledNodes([], function(n) { |
|
testAndCallback(t, reciprocalMarginBoxTest(n), function() {removeTestNode(n); }); |
|
}); |
|
}, |
|
function fitTests(t) { |
|
runFitTest(t, null, dojo.mixin({}, defaultChildStyles)); |
|
}, |
|
function fitTestsOverflow(t) { |
|
runFitTest(t, null, dojo.mixin({overflow:'hidden'}, defaultChildStyles)); |
|
runFitTest(t, {overflow: 'hidden'}, dojo.mixin({}, defaultChildStyles)); |
|
runFitTest(t, {overflow: 'hidden'}, dojo.mixin({overflow:'hidden'}, defaultChildStyles)); |
|
}, |
|
function fitTestsFloat(t) { |
|
runFitTest(t, null, dojo.mixin({float: 'left'}, defaultChildStyles)); |
|
runFitTest(t, {float: 'left'}, dojo.mixin({}, defaultChildStyles)); |
|
runFitTest(t, {float: 'left'}, dojo.mixin({float: 'left'}, defaultChildStyles)); |
|
}, |
|
function reciprocalTestsInline(t) { |
|
createStyledParentChild([], [{}, null, 'span'], function(p, c) { |
|
c.innerHTML = 'Hello World'; |
|
testAndCallback(t, reciprocalMarginBoxTest(c), function() {removeTestNode(c); }); |
|
}); |
|
}, |
|
function reciprocalTestsButtonChild(t) { |
|
createStyledParentChild([], [{}, null, 'button'], function(p, c) { |
|
c.innerHTML = 'Hello World'; |
|
testAndCallback(t, reciprocalMarginBoxTest(c), function() {removeTestNode(c); }); |
|
}); |
|
} |
|
] |
|
); |
|
doh.runOnLoad(); |
|
}); |
|
</script> |
|
<style type="text/css"> |
|
html, body { |
|
padding: 0px; |
|
margin: 0px; |
|
border: 0px; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
</body> |
|
</html> |
|
|
|
|