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.
700 lines
25 KiB
700 lines
25 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>testing Core HTML/DOM/CSS/Style 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/sniff", "dojo/domReady!"], function(dojo, doh, has){ |
|
|
|
function getIframeDocument(/*DOMNode*/iframeNode){ |
|
//summary: Returns the document object associated with the iframe DOM Node argument. |
|
var doc = iframeNode.contentDocument || // W3 |
|
( |
|
(iframeNode.contentWindow)&&(iframeNode.contentWindow.document) |
|
) || // IE |
|
( |
|
(iframeNode.name)&&(document.frames[iframeNode.name])&& |
|
(documendoh.frames[iframeNode.name].document) |
|
) || null; |
|
return doc; |
|
} |
|
|
|
// IE gets confused by the iframe when you press Refresh so load them dynamically |
|
var iframe_div = dojo.byId('iframe_div'); |
|
dojo.addOnWindowUnload(function(){ |
|
iframe_div.innerHTML = 'unloading'; |
|
}); |
|
setTimeout(function(){ |
|
iframe_div.innerHTML = '<iframe src="absStrictIframe.html" name="iframe_strict" id="iframe_strict" \ |
|
style="border:3px solid black; padding:4px; margin:5px; background-color:black;" \ |
|
scrolling=yes allowtransparency=true></iframe>\ |
|
<iframe src="absQuirksIframe.html" name="iframe_quirks" id="iframe_quirks" \ |
|
style="border:3px solid black; padding:4px; margin:5px; background-color:black;" \ |
|
scrolling=yes allowtransparency=true></iframe>'; //'balanced |
|
}, 0); |
|
|
|
doh.register("t", |
|
[ |
|
"doh.is(100, dojo.marginBox('sq100').w);", |
|
"doh.is(100, dojo.marginBox('sq100').h);", |
|
"doh.is(100, dojo._getMarginSize('sq100').w);", |
|
"doh.is(100, dojo._getMarginSize('sq100').h);", |
|
|
|
"doh.is(120, dojo.marginBox('sq100margin10').w);", |
|
"doh.is(120, dojo.marginBox('sq100margin10').h);", |
|
"doh.is(100, dojo.contentBox('sq100margin10').w);", |
|
"doh.is(100, dojo.contentBox('sq100margin10').h);", |
|
|
|
"doh.is(140, dojo.marginBox('sq100margin10pad10').w);", |
|
"doh.is(140, dojo.marginBox('sq100margin10pad10').h);", |
|
"doh.is(140, dojo._getMarginSize('sq100margin10pad10').w);", |
|
"doh.is(140, dojo._getMarginSize('sq100margin10pad10').h);", |
|
|
|
"doh.is(120, dojo.marginBox('sq100pad10').w);", |
|
"doh.is(120, dojo.marginBox('sq100pad10').h);", |
|
|
|
"doh.is(110, dojo.marginBox('sq100ltpad10').w);", |
|
"doh.is(110, dojo.marginBox('sq100ltpad10').h);", |
|
"doh.is(100, dojo.contentBox('sq100ltpad10').w);", |
|
"doh.is(100, dojo.contentBox('sq100ltpad10').h);", |
|
|
|
"doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').w);", |
|
"doh.is(120, dojo.marginBox('sq100ltpad10rbmargin10').h);", |
|
|
|
"doh.is(120, dojo.marginBox('sq100border10').w);", |
|
"doh.is(120, dojo.marginBox('sq100border10').h);", |
|
"doh.is(100, dojo.contentBox('sq100border10').w);", |
|
"doh.is(100, dojo.contentBox('sq100border10').h);", |
|
|
|
"doh.is(140, dojo.marginBox('sq100border10margin10').w);", |
|
"doh.is(140, dojo.marginBox('sq100border10margin10').h);", |
|
"doh.is(100, dojo.contentBox('sq100border10margin10').w);", |
|
"doh.is(100, dojo.contentBox('sq100border10margin10').h);", |
|
|
|
"doh.is(160, dojo.marginBox('sq100border10margin10pad10').w);", |
|
"doh.is(160, dojo.marginBox('sq100border10margin10pad10').h);", |
|
"doh.is(100, dojo.contentBox('sq100border10margin10pad10').w);", |
|
"doh.is(100, dojo.contentBox('sq100border10margin10pad10').h);", |
|
|
|
// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge |
|
// "doh.is(100, dojo.marginBox('sq100nopos').w);", |
|
"doh.is(100, dojo.marginBox('sq100nopos').h);", |
|
|
|
"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).l);", |
|
"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).t);", |
|
"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).w);", |
|
"doh.is(10, dojo._getPadExtents(dojo.byId('sq100ltpad10rbmargin10')).h);", |
|
|
|
"doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).l);", |
|
"doh.is(0, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).t);", |
|
"doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).w);", |
|
"doh.is(10, dojo._getMarginExtents(dojo.byId('sq100ltpad10rbmargin10')).h);", |
|
|
|
"doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).l);", |
|
"doh.is(10, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).t);", |
|
"doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).w);", |
|
"doh.is(20, dojo._getBorderExtents(dojo.byId('sq100border10margin10pad10')).h);", |
|
|
|
"doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).l);", |
|
"doh.is(20, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).t);", |
|
"doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).w);", |
|
"doh.is(40, dojo._getPadBorderExtents(dojo.byId('sq100border10margin10pad10')).h);", |
|
|
|
function scrollUp(){ |
|
scrollTo(0, 0); |
|
}, |
|
|
|
function coordsBasic(t){ |
|
var pos = dojo.position("sq100", false); |
|
// console.debug(pos); |
|
doh.is(100, pos.x); |
|
doh.is(100, pos.y); |
|
doh.is(100, pos.w); |
|
doh.is(100, pos.h); |
|
}, |
|
function coordsMargin(t){ |
|
// position() is getting us the border-box location |
|
var pos = dojo.position("sq100margin10", false); |
|
doh.is(260, pos.x); |
|
doh.is(110, pos.y); |
|
doh.is(100, pos.w); |
|
doh.is(100, pos.h); |
|
pos = dojo.marginBox("sq100margin10"); |
|
doh.is(120, pos.w); |
|
doh.is(120, pos.h); |
|
// Though coords shouldn't be used, test it for backward compatibility. |
|
// coords returns the border-box location and margin-box size |
|
pos = dojo.coords("sq100margin10", false); |
|
doh.is(260, pos.x); |
|
doh.is(110, pos.y); |
|
doh.is(120, pos.w); |
|
doh.is(120, pos.h); |
|
}, |
|
function coordsBorder(t){ |
|
var pos = dojo.position("sq100border10", false); |
|
doh.is(100, pos.x); |
|
doh.is(400, pos.y); |
|
}, |
|
function sq100nopos(t){ |
|
var pos = dojo.position("sq100nopos", false); |
|
// console.debug(pos); |
|
doh.is(0, pos.x); |
|
doh.t(pos.y > 0); |
|
// FIXME: the 'correct' w is not 100 on Safari WebKit (2.0.4 [419.3]), the right-margin extends to the document edge |
|
// doh.is(100, pos.w); |
|
doh.is(100, pos.h); |
|
}, |
|
function coordsScrolled(t) { |
|
var s = document.createElement('div'); |
|
var c = document.createElement('div'); |
|
document.body.appendChild(s); |
|
s.appendChild(c); |
|
var x=257, y= 285; |
|
with (s.style) { |
|
position = 'absolute'; |
|
overflow = 'scroll'; |
|
border = "10px solid black"; |
|
} |
|
dojo.marginBox(s, {l: x, t: y, w: 100, h: 100}); |
|
dojo.marginBox(c, {l: 0, t: 0, w: 500, h: 500}); |
|
s.scrollTop = 200; |
|
var pos = dojo.position(s, true); |
|
doh.is(x, pos.x); |
|
doh.is(y, pos.y); |
|
}, |
|
{ |
|
name: "coordsIframe", |
|
timeout: 2000, |
|
runTest: function(){ |
|
var def = new doh.Deferred(); |
|
setTimeout(function(){ try{ |
|
var oldLtr = dojo._isBodyLtr(); |
|
var oldQuirks = has("quirks"); |
|
dojo.withGlobal(dojo.byId('iframe_quirks').win, function(){ |
|
doh.t(has("quirks"), "has('quirks') == true in quirks/iframe"); |
|
doh.f(dojo._isBodyLtr(), "isBodyLtr == false in RTL/iframe"); |
|
var pos = dojo.position('iframe_00_quirks'); |
|
doh.t(pos.x===0, "quirks iframe element x == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
doh.t(pos.y===0, "quirks iframe element y == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
doh.t(pos.w>0, "quirks iframe element w > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
doh.t(pos.h>0, "quirks iframe element h > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
}); |
|
dojo.withGlobal(dojo.byId('iframe_strict').win, function(){ |
|
doh.f(has("quirks"), "has('quirks') == false in strict/ifraee"); |
|
doh.f(dojo._isBodyLtr(), "isBodyLtr == false in RTL/iframe"); |
|
var pos = dojo.position('iframe_00_strict'); |
|
doh.t(pos.x===0, "strict iframe element x == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
doh.t(pos.y===0, "strict iframe element y == 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
doh.t(pos.w>0, "strict iframe element w > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
doh.t(pos.h>0, "strict iframe element h > 0 (x,y,w,h="+pos.x+","+pos.y+","+pos.w+","+pos.h+")"); |
|
}); |
|
doh.t(!oldLtr == !dojo._isBodyLtr(), "isBodyLtr restored after withGlobal"); |
|
doh.is(oldQuirks, has("quirks"), "has('quirks') restored after withGlobal"); |
|
def.callback(true); |
|
}catch(e){ def.errback(e); } }, 1000); |
|
return def; |
|
} |
|
}, |
|
"doh.is(1, dojo.style('sq100nopos', 'opacity'));", |
|
|
|
// never compare floating numbers directly! |
|
"doh.is((0.1).toFixed(4), Number(dojo.style('sq100nopos', 'opacity', 0.1)).toFixed(4));", |
|
"doh.is((0.8).toFixed(4), Number(dojo.style('sq100nopos', 'opacity', 0.8)).toFixed(4));", |
|
function styleObject(){ |
|
dojo.style('sq100nopos', { 'opacity': 0.1 }); |
|
doh.is((0.1).toFixed(4), Number(dojo.style('sq100nopos', 'opacity')).toFixed(4)); |
|
dojo.style('sq100nopos', { 'opacity': 0.8 }); |
|
doh.is((0.8).toFixed(4), Number(dojo.style('sq100nopos', 'opacity')).toFixed(4)); |
|
}, |
|
|
|
"doh.is('static', dojo.style('sq100nopos', 'position'));", |
|
function getBgcolor(t){ |
|
var bgc = dojo.style('sq100nopos', 'backgroundColor'); |
|
doh.t((bgc == "rgb(0, 0, 0)")||(bgc == "black")||(bgc == "#000000")); |
|
}, |
|
function testClassFunctions(t){ |
|
var node = dojo.byId("sq100"); |
|
dojo.removeClass(node); |
|
dojo.addClass(node, "a"); |
|
doh.is("a", node.className, "class is a"); |
|
dojo.removeClass(node, "c"); |
|
doh.is("a", node.className, "class is still a"); |
|
t.assertTrue(dojo.hasClass(node, "a"), "class is a, test for a"); |
|
t.assertFalse(dojo.hasClass(node, "b"), "class is a, test for b"); |
|
dojo.addClass(node, "b"); |
|
doh.is("a b", node.className, "class is a b"); |
|
t.assertTrue(dojo.hasClass(node, "a"), "class is a b, test for a"); |
|
t.assertTrue(dojo.hasClass(node, "b"), "class is a b, test for b"); |
|
dojo.removeClass(node, "a"); |
|
doh.is("b", node.className, "class is b"); |
|
t.assertFalse(dojo.hasClass(node, "a"), "class is b, test for a"); |
|
t.assertTrue(dojo.hasClass(node, "b"), "class is b, test for b"); |
|
dojo.toggleClass(node, "a"); |
|
doh.is("b a", node.className, "class is b a"); |
|
t.assertTrue(dojo.hasClass(node, "a"), "class is b a, test for a"); |
|
t.assertTrue(dojo.hasClass(node, "b"), "class is b a, test for b"); |
|
dojo.toggleClass(node, "a"); |
|
doh.is("b", node.className, "class is b (again)"); |
|
t.assertFalse(dojo.hasClass(node, "a"), "class is b (again), test for a"); |
|
t.assertTrue(dojo.hasClass(node, "b"), "class is b (again), test for b"); |
|
dojo.toggleClass(node, "b"); |
|
doh.is("", node.className, "class is blank"); |
|
t.assertFalse(dojo.hasClass(node, "a"), "class is blank, test for a"); |
|
t.assertFalse(dojo.hasClass(node, "b"), "class is blank, test for b"); |
|
dojo.removeClass(node, "c"); |
|
t.assertTrue(!node.className, "no class"); |
|
var acuWorked = true; |
|
try{ |
|
dojo.addClass(node); |
|
}catch(e){ |
|
acuWorked = false; |
|
} |
|
doh.is(true, acuWorked, "addClass handles undefined class"); |
|
dojo.addClass(node, "a"); |
|
dojo.replaceClass(node, "b", "a"); |
|
t.assertTrue(dojo.hasClass(node, "b"), "class is b after replacing a, test for b"); |
|
t.assertFalse(dojo.hasClass(node, "a"), "class is b after replacing a, test for not a"); |
|
|
|
dojo.replaceClass(node, "", "b"); |
|
t.assertFalse(dojo.hasClass(node, "b"), "class b should be removed, with no class added"); |
|
t.is("", node.className, "The className is empty"); |
|
|
|
dojo.addClass(node, "b a"); |
|
dojo.replaceClass(node, "c", ""); |
|
t.is("b a c", node.className, |
|
"The className is is 'b a c' after using an empty string in replaceClass"); |
|
|
|
t.f(dojo.hasClass(document, "ab"), "hasClass on document should not throw error"); |
|
}, |
|
function testAddRemoveClassMultiple(t){ |
|
var node = dojo.byId("sq100"); |
|
dojo.removeClass(node); |
|
dojo.addClass(node, "a"); |
|
t.is("a", node.className, "class is a"); |
|
dojo.addClass(node, "a b"); |
|
t.is("a b", node.className, "class is a b"); |
|
dojo.addClass(node, "b a"); |
|
t.is("a b", node.className, "class is still a b"); |
|
dojo.addClass(node, ["a", "c"]); |
|
t.is("a b c", node.className, "class is a b c"); |
|
dojo.removeClass(node, "c a"); |
|
t.is("b", node.className, "class is b"); |
|
dojo.removeClass(node); |
|
t.is("", node.className, "empty class"); |
|
dojo.addClass(node, " c b a "); |
|
t.is("c b a", node.className, "class is c b a"); |
|
dojo.removeClass(node, " c b "); |
|
t.is("a", node.className, "class is a"); |
|
dojo.removeClass(node, ["a", "c"]); |
|
t.is("", node.className, "empty class"); |
|
dojo.addClass(node, "a b"); |
|
dojo.replaceClass(node, "c", "a b"); |
|
t.is("c", node.className, "class is c"); |
|
dojo.replaceClass(node, ""); |
|
t.is("", node.className, "empty class"); |
|
node.className = ""; |
|
}, |
|
function attrInnerHtmlDiv(t){ |
|
var n = dojo.create("div", { |
|
innerHTML: "1<em>2</em>3" |
|
}, dojo.body()); |
|
doh.is("1<em>2</em>3", n.innerHTML.toLowerCase()); |
|
dojo.destroy(n); |
|
}, |
|
function attrInnerHtmlTable(t){ |
|
var n = dojo.create("table", { |
|
innerHTML: "<thead><tr><th>1st!</th></tr></thead><tbody></tbody>" |
|
}, dojo.body()); |
|
doh.is("<thead><tr><th>1st!</th></tr></thead><tbody></tbody>", |
|
n.innerHTML.toLowerCase().replace(/\s+/g, "")); |
|
dojo.destroy(n); |
|
}, |
|
function attr_map(t) { |
|
var input = document.createElement("input"); |
|
dojo.attr(input, { |
|
"class": "thinger blah", |
|
"tabIndex": 1, |
|
"type": "text" |
|
}); |
|
doh.t(dojo.hasClass(input, "thinger"), "hasClass of thinger"); |
|
doh.t(dojo.hasClass(input, "blah"), "hasClass of blah"); |
|
}, |
|
function attrSpecials() { |
|
var node = document.createElement("div"); |
|
dojo.body().appendChild(node); |
|
dojo.attr(node, { |
|
style: { |
|
opacity: 0.5, |
|
width: "30px", |
|
border: "1px solid black" |
|
} |
|
}); |
|
doh.is(0.5, dojo.style(node, "opacity")); |
|
doh.is(30, dojo.style(node, "width")); |
|
doh.is(1, dojo.style(node, "borderWidth")); |
|
|
|
}, |
|
function testIframeDestroy10095(t) { |
|
var iframeWin = dojo.byId('10095_iframe').win; |
|
doh.t(!iframeWin.document.getElementById('10095_textbox'), "reloaded iframe element destroyed"); |
|
}, |
|
function testGCSsvg(t){ |
|
var s = dojo.getComputedStyle(dojo.byId("rect1")); |
|
doh.t(typeof s != "undefined", "dojo.getComputedStyle succeeded on an svg shape"); |
|
} |
|
] |
|
); |
|
// test to make sure position() works with a variety of scrollbars |
|
dojo.forEach(["None", "Vert", "Both"], function(scroll){ |
|
dojo.forEach(["Quirks", "Strict"], function(doctype){ |
|
var id = "scrolling" + doctype + "Iframe" + scroll; |
|
doh.register(id, { |
|
name: "test_" + id, |
|
timeout: 4000, |
|
runTest: function(t){ |
|
var d = new doh.Deferred(), |
|
s = document.createElement('SPAN'); |
|
s.loaded = function(iframe){ |
|
// resultReady is called from inside the iframe |
|
iframe.resultReady = d.getTestCallback(function(){ |
|
t.is('EQUAL', iframe.testResult); |
|
}); |
|
iframe.runScrollingTest(iframe); |
|
}; |
|
s.innerHTML = '<iframe class="iframeTest" id="' + id + '" src="scrolling' + doctype + 'Iframe.html?ltr&' + scroll + '&large" frameborder="0" onload="this.parentNode.loaded(this)" style="background-color:gray;" allowtransparency></iframe>'; |
|
dojo.byId("iframeContainer").appendChild(s); |
|
return d; |
|
} |
|
}); |
|
}); |
|
}); |
|
|
|
doh.register("t", |
|
[ |
|
function emptySvg(t){ |
|
dojo.empty(dojo.byId("surface")); |
|
doh.f(!!dojo.byId("surface").firstChild, "svg firstChild"); |
|
}, |
|
function destroySvg(t){ |
|
dojo.destroy(dojo.byId("surface")); |
|
doh.f(!!dojo.byId("surface"), "svg byId"); |
|
}, |
|
function emptyObject(t){ |
|
dojo.empty(dojo.byId("objectToEmpty")); |
|
doh.f(!!dojo.byId("objectToEmpty").firstChild, "object firstChild"); |
|
}, |
|
function destroyObject(t){ |
|
dojo.destroy(dojo.byId("objectToEmpty")); |
|
doh.f(!!dojo.byId("objectToEmpty"), "object byId"); |
|
}, |
|
function destroyIframe(t){ |
|
dojo.destroy(dojo.byId("iframeToDestroy")); |
|
doh.f(!!dojo.byId("iframeToDestroy"), "iframe byId"); |
|
}, |
|
function destroyDivNotInDOM(t){ |
|
var p = dojo.byId("divToRemoveFromDOM"); |
|
var n = dojo.byId("divToDestroy"); |
|
p = p.parentNode.removeChild(p); |
|
doh.f(!!dojo.byId("divToRemoveFromDOM"), "div byId"); |
|
doh.t(!!p.firstChild, "div child 1"); |
|
doh.is(p.firstChild, n, "div 1st child"); |
|
doh.isNot(p.firstChild, p.lastChild, "div 1st child"); |
|
dojo.destroy(n); |
|
doh.t(!!p.firstChild, "div child 2"); |
|
doh.isNot(p.firstChild, n, "div 2nd child"); |
|
doh.is(p.firstChild, p.lastChild, "div 2nd child"); |
|
dojo.empty(p); |
|
doh.f(!!p.firstChild, "div child 3"); |
|
dojo.destroy(p); |
|
doh.t(true, "no exception thrown"); |
|
} |
|
/* |
|
// Make sure empty() doesn't disconnect grandchildren from children. |
|
// Uncomment when http://bugs.dojotoolkit.org/ticket/16957 is fixed. |
|
function emptyGrandchildren(){ |
|
var parent = dojo.byId("emptyParent"), |
|
child = dojo.byId("emptyChild"); |
|
|
|
dojo.empty("emptyParent"); |
|
|
|
doh.f(!!parent.firstChild, "parent's children removed"); |
|
doh.t(!!child.firstChild, "child's children remain"); |
|
} |
|
*/ |
|
] |
|
); |
|
|
|
doh.runOnLoad(); |
|
}); |
|
</script> |
|
<style type="text/css"> |
|
html, body { |
|
padding: 0px; |
|
margin: 0px; |
|
border: 0px; |
|
} |
|
|
|
#sq100 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 100px; |
|
top: 100px; |
|
width: 100px; |
|
height: 100px; |
|
border: 0px; |
|
padding: 0px; |
|
margin: 0px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100margin10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 250px; |
|
top: 100px; |
|
width: 100px; |
|
height: 100px; |
|
border: 0px; |
|
padding: 0px; |
|
margin: 10px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100margin10pad10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 400px; |
|
top: 100px; |
|
width: 100px; |
|
height: 100px; |
|
border: 0px; |
|
padding: 10px; |
|
margin: 10px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100pad10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 100px; |
|
top: 250px; |
|
width: 100px; |
|
height: 100px; |
|
border: 0px; |
|
padding: 10px; |
|
margin: 0px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100ltpad10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 250px; |
|
top: 250px; |
|
width: 100px; |
|
height: 100px; |
|
border: 0px; |
|
padding-left: 10px; |
|
padding-top: 10px; |
|
padding-right: 0px; |
|
padding-bottom: 0px; |
|
margin: 0px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100ltpad10rbmargin10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 400px; |
|
top: 250px; |
|
width: 100px; |
|
height: 100px; |
|
border: 0px; |
|
padding-left: 10px; |
|
padding-top: 10px; |
|
padding-right: 0px; |
|
padding-bottom: 0px; |
|
margin-left: 0px; |
|
margin-top: 0px; |
|
margin-right: 10px; |
|
margin-bottom: 10px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100border10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 100px; |
|
top: 400px; |
|
width: 100px; |
|
height: 100px; |
|
border: 10px solid yellow; |
|
padding: 0px; |
|
margin: 0px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100border10margin10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 250px; |
|
top: 400px; |
|
width: 100px; |
|
height: 100px; |
|
border: 10px solid yellow; |
|
padding: 0px; |
|
margin: 10px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100border10margin10pad10 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 400px; |
|
top: 400px; |
|
width: 100px; |
|
height: 100px; |
|
border: 10px solid yellow; |
|
padding: 10px; |
|
margin: 10px; |
|
overflow: hidden; |
|
} |
|
|
|
#sq100nopos { |
|
background-color: black; |
|
color: white; |
|
width: 100px; |
|
height: 100px; |
|
padding: 0px; |
|
margin: 0px; |
|
} |
|
|
|
#scrollingStrictIframe, |
|
#scrollingQuirksIframe { |
|
border: 10px solid black; |
|
} |
|
</style> |
|
</head> |
|
<body> |
|
<h1>testing Core HTML/DOM/CSS/Style utils</h1> |
|
<div id="sq100"> |
|
100px square, abs |
|
</div> |
|
<div id="sq100margin10"> |
|
100px square, abs, 10px margin |
|
</div> |
|
<div id="sq100margin10pad10"> |
|
100px square, abs, 10px margin, 10px padding |
|
</div> |
|
<div id="sq100pad10"> |
|
100px square, abs, 10px padding |
|
</div> |
|
<div id="sq100ltpad10"> |
|
100px square, abs, 10px left and top padding |
|
</div> |
|
<div id="sq100ltpad10rbmargin10"> |
|
100px square, abs, 10px left and top padding, 10px bottom and right margin |
|
</div> |
|
<div id="sq100border10"> |
|
100px square, abs, 10px yellow border |
|
</div> |
|
<div id="sq100border10margin10"> |
|
100px square, abs, 10px yellow border, 10px margin |
|
</div> |
|
<div id="sq100border10margin10pad10"> |
|
100px square, abs, 10px yellow border, 10px margin, 10px padding |
|
</div> |
|
<div id="sq100nopos"> |
|
100px square, no positioning |
|
</div> |
|
|
|
<iframe id="blah" name="blah" src="javascript:'<html><body><div id=subDiv></div></body></html>'"></iframe> |
|
|
|
<script type="text/javascript"> |
|
var reloaded = false; |
|
function iframe10095loaded() { |
|
require(["dojo", "dojo/domReady!"], function(dojo) { |
|
var iframeWin = dojo.byId('10095_iframe').win; |
|
dojo.withGlobal(iframeWin, function(){ dojo.destroy(dojo.byId('10095_textbox')) }); |
|
if(!reloaded){ |
|
reloaded = true; |
|
dojo.byId('10095_iframe').src=iframeWin.frameElement.src; |
|
} |
|
}); |
|
} |
|
</script> |
|
<iframe id="10095_iframe" style="display:none;" src="javascript:'<html><head><script>frameElement.win=window</script></head><body><input id=10095_textbox></body></html>'" onload="iframe10095loaded()"></iframe> |
|
|
|
<div id='iframe_div' style="position:absolute;top:0;left:500px;"></div> |
|
|
|
<div id="div-no-tabindex"></div> |
|
<div id="div-tabindex-minus-1" tabIndex="-1"></div> |
|
<div id="div-tabindex-0" tabIndex="0"></div> |
|
<div id="div-tabindex-1" tabIndex="1"></div> |
|
|
|
<div> |
|
<input id="input-no-type"> |
|
<input id="input-with-type" type="checkbox"> |
|
<input id="input-no-tabindex"> |
|
<input id="input-tabindex-minus-1" tabIndex="-1"> |
|
<input id="input-tabindex-0" tabIndex="0"> |
|
<input id="input-tabindex-1" tabIndex="1"> |
|
<input id="input-text-value" type="text" value="123"> |
|
<input id="input-no-disabled" type="text"> |
|
<input id="input-with-disabled" type="text" disabled> |
|
<input id="input-with-disabled-true" disabled="disabled"> |
|
</div> |
|
<div> |
|
<label id="label-no-for">label with no for </label><input type="text" id="label-test-input"> |
|
<label id="label-with-for" for="input-with-label">label with for </label><input type="text" id="input-with-label"> |
|
</div> |
|
|
|
<div id="iframeContainer"></div> |
|
|
|
<!-- SVG element to test dojo.getComputedStyle on IE9 (#14103) --> |
|
<!-- SVG element to test empty --> |
|
<svg id="surface" xmlns="http://www.w3.org/2000/svg" width="100px" height="100px" |
|
><rect id="rect1" fill="rgb(255, 0, 0)" x="0" y="0" width="80" height="60" ry="0" rx="0" fill-rule="evenodd" |
|
/></svg> |
|
|
|
<!-- OBJECT element to test empty --> |
|
<object width="500" height="500" id="objectToEmpty" data="data:application/x-silverlight," type="application/x-silverlight" |
|
><param name="background" value="transparent" |
|
/></object> |
|
|
|
<!-- Test that empty doesn't disconnect grandchildren from children --> |
|
<div id="emptyParent"> |
|
<div id="emptyChild"> |
|
<div id="emptyGrandchild">hello world</div> |
|
</div> |
|
</div> |
|
|
|
<!-- IFRAME element to test destroy --> |
|
<iframe id="iframeToDestroy" src="about:blank" |
|
><span></span |
|
></iframe> |
|
|
|
<!-- DIV element to test destroy of element not in the DOM --> |
|
<div id="divToRemoveFromDOM" |
|
><div id="divToDestroy"></div |
|
><div></div |
|
></div> |
|
</body> |
|
</html>
|
|
|