UNPKG

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

123 lines (107 loc) 5.13 kB
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"> <title>TabContainer BIDI DOH Test</title> <style> @import "../../../themes/claro/document.css"; @import "../../css/dijitTests.css"; </style> <!-- required: the default dijit theme: --> <link id="themeStyles" rel="stylesheet" href="../../../../dijit/themes/claro/claro.css"/> <!-- required: dojo.js --> <script type="text/javascript" src="../../../../dojo/dojo.js" data-dojo-config="async: true,isDebug: true, has: { 'dojo-bidi': true }"></script> <script type="text/javascript"> require([ "doh/runner", "dojo/dom", "dojo/parser", "dojo/query", "dijit/registry", "dijit/layout/TabContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function(doh, dom, parser, query, registry, TabContainer, ContentPane){ doh.register("parse", function(){ return parser.parse(); }); doh.register("tests._BidiSupport.layout.TabContainer.Bidi", [ { name: 'changing Tabs', runTest: function(){ var tc = registry.byId("tc1"); var cp = new ContentPane({ id: "newTab1", title: "Added Panel,RTL textDir !", content: "Added content pane with RTL textDir", textDir: "rtl" }); tc.addChild(cp); var t1 = registry.byId('t1'); t1.set('title', 'LTR panel,changed title!'); var tc1 = registry.byId("tc1"); children = tc1.getChildren(); children[1].set({ title: "Panel with no direction,changed title!" }); doh.is('ltr', query("#tc1_tablist_t1")[0].dir, "Pane have explicit LTR text direction"); doh.is('rtl', query("#tc1_tablist_t2")[0].dir, "Pane inherits RTL text direction from container"); doh.is('ltr', query("#tc1_tablist_t3")[0].dir, "Pane have explicit LTR text direction"); doh.is('rtl', query("#tc1_tablist_t4")[0].dir, "Pane inherits RTL text direction from container"); doh.is('rtl', query("#tc1_tablist_newTab1")[0].dir, "Added pane have explicit 'Auto' text direction"); doh.is('rtl', query("#tc3_tablist_three")[0].dir, "Pane have explicit RTL text direction"); doh.is('rtl', query("#tc3_tablist_four")[0].dir, "Pane have explicit RTL text direction"); } } ]); doh.register("testingMenu", { name: "Test menu", runTest: function(){ var menuBtn = registry.byId("tc1_tablist_menuBtn"); menuBtn.toggleDropDown(); var menu = registry.byId("tc1_menu"); doh.is('ltr', menu.getChildren()[0].textDirNode.dir, "Menu item should have LTR text direction"); doh.is('rtl', menu.getChildren()[1].textDirNode.dir, "Menu item should have RTL text direction 1"); doh.is('ltr', menu.getChildren()[2].textDirNode.dir, "Menu item should have LTR text direction 2"); doh.is('rtl', menu.getChildren()[3].textDirNode.dir, "Menu item should have RTL text direction 3"); menuBtn.closeDropDown(); } }); doh.register("log", function(){ dom.byId('failures').innerHTML = doh._failureCount; dom.byId('errors').innerHTML = doh._errorCount; }); doh.run(); }); </script> </head> <body class="claro"> <h1 class="testTitle">Bidi TabContainer tests</h1> <h2 class="testTitle">TabContainer with RTL text direction and changed tabs</h2> <div id="tc1" data-dojo-type="dijit/layout/TabContainer" data-dojo-props='textDir: "rtl", style:"width: 550px; height: 60px;" '> <div id="t1" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='textDir: "ltr", title:"tab1 @", selected:true'> Title of this LTR pane has been changed </div> <div id="t2" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"tab2 @", closable:true'> Title of this pane with no text direction specified (inherited) has been changed </div> <div id="t3" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='textDir: "ltr", title:"Explicit LTR!", closable:true'> Explicit LTR text direction of content pane </div> <div id="t4" data-dojo-type="dijit/layout/ContentPane" data-dojo-props='title:"Inherited RTL!", closable:true'> Inherited RTL text direction of content pane tab </div> </div> <br /> <h2 class="testTitle">TabContainer with RTL text direction</h2> <div id="tc3" data-dojo-type="dijit/layout/TabContainer" textDir="rtl" data-dojo-id="tc3" style="width: 300px; height:100px;"> <div data-dojo-type="dijit/layout/ContentPane" title="Explicit LTR!" textDir="ltr" data-dojo-id="one" id="one">Explicit LTR text direction of content pane</div> <div data-dojo-type="dijit/layout/ContentPane" title="Inherited RTL!" data-dojo-id="two" id="two">Inherited RTL text direction of content pane tab</div> <div data-dojo-type="dijit/layout/ContentPane" title="אExplicit AUTO!" data-dojo-id="three" id="three">Explicit 'auto' text direction of content pane</div> <div data-dojo-type="dijit/layout/ContentPane" title="Explicit RTL!" textDir="rtl" data-dojo-id="four" id="four">Explicit RTL text direction of content pane</div> </div> <br>Errors:&nbsp;<span id="errors">?</span> <br>Failures:&nbsp;<span id="failures">?</span> </body> </html>