557 lines
18 KiB
HTML
557 lines
18 KiB
HTML
|
<!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"
|
||
|
|
djConfig="isDebug: true"></script>
|
||
|
|
<script type="text/javascript">
|
||
|
|
dojo.require("doh.runner");
|
||
|
|
|
||
|
|
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)&&(documendoh.frames[iframeNode.name])&&
|
||
|
|
(documendoh.frames[iframeNode.name].document)
|
||
|
|
) || null;
|
||
|
|
return doc;
|
||
|
|
}
|
||
|
|
|
||
|
|
dojo.addOnLoad(function(){
|
||
|
|
doh.register("t",
|
||
|
|
[
|
||
|
|
"doh.is(100, dojo.marginBox('sq100').w);",
|
||
|
|
"doh.is(100, dojo.marginBox('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(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 coordsBasic(t){
|
||
|
|
var pos = dojo.coords("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){
|
||
|
|
// coords is getting us the margin-box location, is
|
||
|
|
// this right?
|
||
|
|
var 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.coords("sq100border10", false);
|
||
|
|
doh.is(100, pos.x);
|
||
|
|
doh.is(400, pos.y);
|
||
|
|
},
|
||
|
|
function sq100nopos(t){
|
||
|
|
var pos = dojo.coords("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._setMarginBox(s, x, y, 100, 100);
|
||
|
|
dojo._setMarginBox(c, 0, 0, 500, 500);
|
||
|
|
s.scrollTop = 200;
|
||
|
|
var pos = dojo.coords(s, true);
|
||
|
|
doh.is(x, pos.x);
|
||
|
|
doh.is(y, pos.y);
|
||
|
|
},
|
||
|
|
"doh.is(1, dojo.style('sq100nopos', 'opacity'));",
|
||
|
|
"doh.is(0.1, dojo.style('sq100nopos', 'opacity', 0.1));",
|
||
|
|
"doh.is(0.8, dojo.style('sq100nopos', 'opacity', 0.8));",
|
||
|
|
function styleObject(){
|
||
|
|
dojo.style('sq100nopos', { 'opacity': 0.1 });
|
||
|
|
doh.is(0.1, dojo.style('sq100nopos', 'opacity'));
|
||
|
|
dojo.style('sq100nopos', { 'opacity': 0.8 });
|
||
|
|
doh.is(0.8, dojo.style('sq100nopos', 'opacity'));
|
||
|
|
},
|
||
|
|
"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 isDescendant(t){
|
||
|
|
doh.t(dojo.isDescendant("sq100", dojo.body()));
|
||
|
|
doh.t(dojo.isDescendant("sq100", dojo.doc));
|
||
|
|
doh.t(dojo.isDescendant("sq100", "sq100"));
|
||
|
|
doh.t(dojo.isDescendant(dojo.byId("sq100"), "sq100"));
|
||
|
|
doh.f(dojo.isDescendant("sq100", dojo.byId("sq100").firstChild));
|
||
|
|
doh.t(dojo.isDescendant(dojo.byId("sq100").firstChild, "sq100"));
|
||
|
|
},
|
||
|
|
function isDescendantIframe(t){
|
||
|
|
var bif = dojo.byId("blah");
|
||
|
|
getIframeDocument(bif).write("<html><body><div id='subDiv'></div></body></html>");
|
||
|
|
getIframeDocument(bif).close();
|
||
|
|
// this test barely makes sense. disabling it for now.
|
||
|
|
// doh.t(dojo.isDescendant(bif.contentDocument.getElementById("subDiv"), bif.parentNode));
|
||
|
|
var subDiv = getIframeDocument(bif).getElementById("subDiv");
|
||
|
|
doh.t(dojo.isDescendant(subDiv, subDiv));
|
||
|
|
doh.t(dojo.isDescendant(subDiv, subDiv.parentNode));
|
||
|
|
doh.f(dojo.isDescendant(subDiv.parentNode, subDiv));
|
||
|
|
|
||
|
|
},
|
||
|
|
function testClassFunctions(t){
|
||
|
|
var node = dojo.byId("sq100");
|
||
|
|
dojo.addClass(node, "a");
|
||
|
|
doh.is("a", node.className);
|
||
|
|
dojo.removeClass(node, "c");
|
||
|
|
doh.is("a", node.className);
|
||
|
|
t.assertTrue(dojo.hasClass(node, "a"));
|
||
|
|
t.assertFalse(dojo.hasClass(node, "b"));
|
||
|
|
dojo.addClass(node, "b");
|
||
|
|
doh.is("a b", node.className);
|
||
|
|
t.assertTrue(dojo.hasClass(node, "a"));
|
||
|
|
t.assertTrue(dojo.hasClass(node, "b"));
|
||
|
|
dojo.removeClass(node, "a");
|
||
|
|
doh.is("b", node.className);
|
||
|
|
t.assertFalse(dojo.hasClass(node, "a"));
|
||
|
|
t.assertTrue(dojo.hasClass(node, "b"));
|
||
|
|
dojo.toggleClass(node, "a");
|
||
|
|
doh.is("b a", node.className);
|
||
|
|
t.assertTrue(dojo.hasClass(node, "a"));
|
||
|
|
t.assertTrue(dojo.hasClass(node, "b"));
|
||
|
|
dojo.toggleClass(node, "a");
|
||
|
|
doh.is("b", node.className);
|
||
|
|
t.assertFalse(dojo.hasClass(node, "a"));
|
||
|
|
t.assertTrue(dojo.hasClass(node, "b"));
|
||
|
|
dojo.toggleClass(node, "b");
|
||
|
|
doh.is("", node.className);
|
||
|
|
t.assertFalse(dojo.hasClass(node, "a"));
|
||
|
|
t.assertFalse(dojo.hasClass(node, "b"));
|
||
|
|
dojo.removeClass(node, "c");
|
||
|
|
t.assertTrue(!node.className);
|
||
|
|
},
|
||
|
|
function getTypeInput(t){
|
||
|
|
doh.f(dojo.hasAttr(dojo.byId("input-no-type"), "type"));
|
||
|
|
doh.is("text", dojo.attr(dojo.byId("input-no-type"), "type"));
|
||
|
|
doh.t(dojo.hasAttr(dojo.byId("input-with-type"), "type"));
|
||
|
|
doh.is("checkbox", dojo.attr(dojo.byId("input-with-type"), "type"));
|
||
|
|
},
|
||
|
|
function getWithString(t){
|
||
|
|
doh.f(dojo.hasAttr("input-no-type", "type"));
|
||
|
|
doh.is("text", dojo.attr("input-no-type", "type"));
|
||
|
|
doh.t(dojo.hasAttr("input-with-type", "type"));
|
||
|
|
doh.is("checkbox", dojo.attr("input-with-type", "type"));
|
||
|
|
},
|
||
|
|
function attrId(t){
|
||
|
|
doh.t(dojo.hasAttr("div-no-tabindex", "id"));
|
||
|
|
doh.is("div-no-tabindex", dojo.attr("div-no-tabindex", "id"));
|
||
|
|
var div = document.createElement("div");
|
||
|
|
doh.f(dojo.hasAttr(div, "id"));
|
||
|
|
doh.is(null, dojo.attr(div, "id"));
|
||
|
|
dojo.attr(div, "id", "attrId1");
|
||
|
|
doh.t(dojo.hasAttr(div, "id"));
|
||
|
|
doh.is("attrId1", dojo.attr(div, "id"));
|
||
|
|
dojo.removeAttr(div, "id");
|
||
|
|
doh.f(dojo.hasAttr(div, "id"));
|
||
|
|
doh.is(null, dojo.attr(div, "id"));
|
||
|
|
},
|
||
|
|
function getTabindexDiv(t){
|
||
|
|
doh.f(dojo.hasAttr("div-no-tabindex", "tabindex"));
|
||
|
|
doh.is(null, dojo.attr("div-no-tabindex", "tabindex"));
|
||
|
|
doh.t(dojo.hasAttr("div-tabindex-minus-1", "tabindex"));
|
||
|
|
if(!dojo.isOpera){
|
||
|
|
// Opera (at least <= 9) does not support tabindex="-1"
|
||
|
|
doh.is(-1, dojo.attr("div-tabindex-minus-1", "tabindex"));
|
||
|
|
}
|
||
|
|
doh.t(dojo.hasAttr("div-tabindex-0", "tabindex"));
|
||
|
|
doh.is(0, dojo.attr("div-tabindex-0", "tabindex"));
|
||
|
|
doh.is(1, dojo.attr("div-tabindex-1", "tabindex"));
|
||
|
|
},
|
||
|
|
function getTabindexInput(t){
|
||
|
|
doh.f(dojo.hasAttr("input-no-tabindex", "tabindex"));
|
||
|
|
doh.is(null, dojo.attr("input-no-tabindex", "tabindex"));
|
||
|
|
doh.t(dojo.hasAttr("input-tabindex-minus-1", "tabindex"));
|
||
|
|
if(!dojo.isOpera){
|
||
|
|
// Opera (at least <= 9) does not support tabindex="-1"
|
||
|
|
doh.is(-1, dojo.attr("input-tabindex-minus-1", "tabindex"));
|
||
|
|
}
|
||
|
|
doh.t(dojo.hasAttr("input-tabindex-0", "tabindex"));
|
||
|
|
doh.is(0, dojo.attr("input-tabindex-0", "tabindex"));
|
||
|
|
doh.is(1, dojo.attr("input-tabindex-1", "tabindex"));
|
||
|
|
},
|
||
|
|
function setTabindexDiv(t){
|
||
|
|
var div = document.createElement("div");
|
||
|
|
doh.is(null, dojo.attr(div, "tabindex"));
|
||
|
|
dojo.attr(div, "tabindex", -1);
|
||
|
|
if(!dojo.isOpera){
|
||
|
|
// Opera (at least <= 9) does not support tabindex="-1"
|
||
|
|
doh.is(-1, dojo.attr(div, "tabindex"));
|
||
|
|
}
|
||
|
|
dojo.attr(div, "tabindex", 0);
|
||
|
|
doh.is(0, dojo.attr(div, "tabindex"));
|
||
|
|
dojo.attr(div, "tabindex", 1);
|
||
|
|
doh.is(1, dojo.attr(div, "tabindex"));
|
||
|
|
},
|
||
|
|
function setTabindexInput(t){
|
||
|
|
var input = document.createElement("input");
|
||
|
|
doh.is(null, dojo.attr(input, "tabindex"));
|
||
|
|
dojo.attr(input, "tabindex", -1);
|
||
|
|
if(!dojo.isOpera){
|
||
|
|
// Opera (at least <= 9) does not support tabindex="-1"
|
||
|
|
doh.is(-1, dojo.attr(input, "tabindex"));
|
||
|
|
}
|
||
|
|
dojo.attr(input, "tabindex", 0);
|
||
|
|
doh.is(0, dojo.attr(input, "tabindex"));
|
||
|
|
dojo.attr(input, "tabindex", 1);
|
||
|
|
doh.is(1, dojo.attr(input, "tabindex"));
|
||
|
|
},
|
||
|
|
function removeTabindexFromDiv(t){
|
||
|
|
var div = document.createElement("div");
|
||
|
|
dojo.attr(div, "tabindex", 1);
|
||
|
|
doh.is(1, dojo.attr(div, "tabindex"));
|
||
|
|
dojo.removeAttr(div, "tabindex");
|
||
|
|
doh.is(null, dojo.attr(div, "tabindex"));
|
||
|
|
},
|
||
|
|
function removeTabindexFromInput(t){
|
||
|
|
var input = document.createElement("input");
|
||
|
|
dojo.attr(input, "tabindex", 1);
|
||
|
|
doh.is(1, dojo.attr(input, "tabindex"));
|
||
|
|
dojo.removeAttr(input, "tabindex");
|
||
|
|
doh.is(null, dojo.attr(input, "tabindex"));
|
||
|
|
},
|
||
|
|
function attr_map(t){
|
||
|
|
var input = document.createElement("input");
|
||
|
|
var ctr= 0;
|
||
|
|
dojo.attr(input, {
|
||
|
|
"tabindex": 1,
|
||
|
|
"type": "text",
|
||
|
|
"onfocus": function(e){
|
||
|
|
ctr++;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
dojo.body().appendChild(input);
|
||
|
|
doh.is(1, dojo.attr(input, "tabindex"));
|
||
|
|
doh.is("text", dojo.attr(input, "type"));
|
||
|
|
doh.is(0, ctr);
|
||
|
|
var def = new doh.Deferred();
|
||
|
|
input.focus();
|
||
|
|
setTimeout(function(){
|
||
|
|
doh.is(1, ctr);
|
||
|
|
input.blur();
|
||
|
|
input.focus();
|
||
|
|
setTimeout(function(){
|
||
|
|
doh.is(2, ctr);
|
||
|
|
def.callback(true);
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
return def;
|
||
|
|
},
|
||
|
|
function attr_reconnect(t){
|
||
|
|
var input = document.createElement("input");
|
||
|
|
var ctr = 0;
|
||
|
|
dojo.attr(input, "type", "text");
|
||
|
|
dojo.attr(input, "onfocus", function(e){ ctr++; });
|
||
|
|
dojo.attr(input, "onfocus", function(e){ ctr++; });
|
||
|
|
dojo.attr(input, "onfocus", function(e){ ctr++; });
|
||
|
|
dojo.body().appendChild(input);
|
||
|
|
doh.is("text", dojo.attr(input, "type"));
|
||
|
|
doh.is(0, ctr);
|
||
|
|
var def = new doh.Deferred();
|
||
|
|
input.focus();
|
||
|
|
setTimeout(function(){
|
||
|
|
doh.is(1, ctr);
|
||
|
|
input.blur();
|
||
|
|
input.focus();
|
||
|
|
setTimeout(function(){
|
||
|
|
doh.is(2, ctr);
|
||
|
|
def.callback(true);
|
||
|
|
}, 10);
|
||
|
|
}, 10);
|
||
|
|
return def;
|
||
|
|
}
|
||
|
|
]
|
||
|
|
);
|
||
|
|
doh.run();
|
||
|
|
});
|
||
|
|
</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;
|
||
|
|
}
|
||
|
|
|
||
|
|
</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"></iframe>
|
||
|
|
|
||
|
|
<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">
|
||
|
|
</div>
|
||
|
|
</body>
|
||
|
|
</html>
|
||
|
|
|