dijit
Version:
Dijit provides a complete collection of user interface controls based on Dojo, giving you the power to create web applications that are highly optimized for usability, performance, internationalization, accessibility, but above all deliver an incredible u
105 lines (94 loc) • 3.21 kB
HTML
<html lang="en">
<head>
<title>Editor StyleSheet Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="../boilerplate.js"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/parser",
"dojo/query",
"dijit/registry",
"dijit/Editor",
"dojo/NodeList-dom", // style()
"dojo/domReady!"
], function(doh, parser, query, registry){
var editor;
doh.register("setup", [
function parse(){
parser.parse();
editor = registry.byId("editor");
},
{
name: "wait for load",
timeout: 5000,
runTest: function(){
// Editor.onLoadDeferred doesn't seem good enough, editor.window is still unset
// after it fires
var d = new doh.Deferred();
console.log("initially, editor.window is", editor.window);
editor.onLoadDeferred.then(function(){
var handle = setInterval(function(){
if(editor.window){
clearInterval(handle);
d.callback(true);
}
}, 50);
});
return d;
}
}
]);
doh.register("stylesheets", [
{
name: "add sheet",
runTest: function(){
editor.addStyleSheet('test_editor.css');
// Wait for stylesheet to take effect and then check if <h1> has border.
// Not checking background color because it could be "red" or #FF0000 or rgb(...
var d = new doh.Deferred();
setTimeout(d.getTestCallback(function(){
var h1styles = query("h1", editor.window.document).style("borderTopStyle");
doh.is(1, h1styles.length, "found h1");
doh.is("solid", h1styles[0], "h1 border");
}), 250);
return d;
}
},
{
name: "remove sheet",
runTest: function(){
editor.removeStyleSheet('test_editor.css');
var h1styles = query("h1", editor.window.document).style("borderTopWidth");
// Wait for stylesheet removal to take effect and then check if <h1> has border.
// Not checking background color because it could be "red" or #FF0000 or rgb(...
// Not checking border-width because on IE it's 4px, but border-style is none
// (which means that there's really no border).
var d = new doh.Deferred();
setTimeout(d.getTestCallback(function(){
var h1styles = query("h1", editor.window.document).style("borderTopStyle");
doh.is(1, h1styles.length, "found h1");
doh.is("none", h1styles[0], "h1 border style");
}), 250);
return d;
}
}
]);
doh.run();
});
</script>
</head>
<body class="claro" role="main">
<script type="dojo/require">
registry: "dijit/registry"
</script>
<p>Turning on the stylesheet should make header red</p>
<div id="editor" data-dojo-type="dijit/Editor" aria-label="editor" data-dojo-props='name:"field"'>
<h1>Adding stylesheet should make my background red</h1>
<h2>I shouldn't change</h2>
</div>
<button id="addStyleSheet" onclick="registry.byId('editor').addStyleSheet('test_editor.css');">add stylesheet</button>
<button id="removeStyleSheet" onclick="registry.byId('editor').removeStyleSheet('test_editor.css');">remove stylesheet</button>
</body>
</html>