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.
148 lines
5.2 KiB
148 lines
5.2 KiB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" |
|
"http://www.w3.org/TR/html4/strict.dtd"> |
|
<html dir="rtl"> |
|
<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/domReady!"], function(dojo, doh){ |
|
|
|
doh.register("rtl", |
|
[ |
|
{ |
|
name: "coordsWithScrolling", |
|
timeout: 1000, |
|
runTest: function(t){ |
|
var d = new doh.Deferred(); |
|
setTimeout(d.getTestErrback(function(){ // allow browsers time to return the scroll point back to the last position |
|
scrollTo(100, 100); // scroll a little |
|
scrollBy(-50, -50); // net 50px horizontal movement: back-n-forth scrolling helps with different browsers |
|
setTimeout(d.getTestCallback(function(){ // time to scroll |
|
var pos = dojo.position('rect100', true); |
|
t.is(100, pos.y, "y pos should be 100 after vertical scroll"); |
|
t.is(100, pos.x, "x pos should be 100 after horizontal scroll"); |
|
}), 100); |
|
}), 100); |
|
return d; |
|
} |
|
}, |
|
|
|
{ |
|
name: "eventClientXY_IE", |
|
timeout: 2000, |
|
runTest: function(t){ |
|
var |
|
d = new doh.Deferred(), |
|
rect = dojo.byId("rect100"), |
|
handler = dojo.connect(rect.offsetParent, "onclick", null, |
|
d.getTestErrback(function(e){ |
|
// move the rectangle to the mouse point |
|
dojo.disconnect(handler); |
|
var scroll = dojo.docScroll(), |
|
pageX = (e.pageX || e.pageY) ? e.pageX : ((e.clientX || 0) + scroll.x), |
|
pageY = (e.pageX || e.pageY) ? e.pageY : ((e.clientY || 0) + scroll.y); |
|
rect.style.left = pageX + "px"; |
|
rect.style.top = pageY + "px"; |
|
setTimeout(d.getTestCallback(function(){ |
|
var rectPos = dojo.position(rect, true); |
|
t.is(pageX, rectPos.x, "pageX"); |
|
t.is(pageY, rectPos.y, "pageY"); |
|
}), 500); // time to move rect to cursor position |
|
}) |
|
); |
|
rect.scrollIntoView(); |
|
setTimeout(d.getTestErrback(function(){ |
|
if(!("dispatchEvent" in rect.offsetParent)){ |
|
rect.offsetParent.fireEvent('onclick'); // IE < 9 |
|
}else{ |
|
var clickEvent = rect.offsetParent.ownerDocument.createEvent("MouseEvent"); |
|
clickEvent.initMouseEvent("click", false, false, window, 0,0,0,60,60,0,0,0,0,0,null); |
|
rect.offsetParent.dispatchEvent(clickEvent); |
|
} |
|
}), 500); // time to finish any pre-scrolling |
|
return d; |
|
} |
|
}, |
|
|
|
{ |
|
name: "testScrolledPosition", |
|
timeout: 10000, |
|
runTest: function(t){ |
|
var d = new doh.Deferred(), |
|
control = dojo.doc.getElementById('control'); |
|
control.resultReady = d.getTestCallback(function(){ |
|
t.is("EQUAL", control.testResult); |
|
}); |
|
runScrollingTest(control); |
|
return d; |
|
} |
|
} |
|
] |
|
); |
|
|
|
// test to make sure position() works with a variety of scrollbars |
|
dojo.forEach(["None", "Horz", "Vert", "Both"], function(scroll){ |
|
dojo.forEach(["Quirks", "Strict"], function(doctype){ |
|
dojo.forEach(["Small", "Large"], function(size){ |
|
var id = "scrolling" + doctype + "Iframe" + scroll + size; |
|
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?rtl&' + scroll + '&' + size +'" frameborder="0" onload="this.parentNode.loaded(this)" style="background-color:gray;" allowtransparency></iframe>'; |
|
dojo.byId("iframeContainer").appendChild(s); |
|
return d; |
|
} |
|
}); |
|
}); |
|
}); |
|
}); |
|
|
|
doh.runOnLoad(); |
|
}); |
|
</script> |
|
<style type="text/css"> |
|
#rect100 { |
|
background-color: black; |
|
color: white; |
|
position: absolute; |
|
left: 100px; |
|
top: 100px; |
|
width: 100px; |
|
height: 100px; |
|
border: 0px; |
|
padding: 0px; |
|
margin: 0px; |
|
overflow: hidden; |
|
} |
|
|
|
.iframeTest { |
|
border: 5px solid black; |
|
} |
|
</style> |
|
</head> |
|
<body style="min-height:2000px;min-width:2000px;"> |
|
<h1>testing Core HTML/DOM/CSS/Style utils</h1> |
|
<div id="rect100"> |
|
100px rect, abs, |
|
mouse point is at top-left after the test "eventClientXY" |
|
</div> |
|
<div id="rect_vert" style="padding:100px;visibility:hidden;"><input disabled value="show vertical scrollbar" style="display:block;height:100%;"></div> |
|
<div id="rect_horz" style="padding:100px;visibility:hidden;"><input disabled value="show horizonal scrollbar" style="display:block;width:100%;"></div> |
|
<br> |
|
<script type="text/javascript" src="scrollingIframe.js"></script> |
|
<div id="iframeContainer"></div> |
|
</body> |
|
</html>
|
|
|