sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
156 lines (139 loc) • 6.44 kB
HTML
<html>
<!--
Copyright 2008 The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<!--
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Closure Unit Tests - goog.ui.style.app.ButtonRenderer</title>
<script src="../../../base.js"></script>
<script>
goog.require('goog.dom');
goog.require('goog.testing.jsunit');
goog.require('goog.testing.ui.style');
goog.require('goog.ui.Button');
goog.require('goog.ui.style.app.ButtonRenderer');
goog.require('goog.userAgent');
</script>
</head>
<body>
<script>
var renderer = goog.ui.style.app.ButtonRenderer.getInstance()
var button;
// Write iFrame tag to load reference FastUI markup. Then, our tests will
// compare the generated markup to the reference markup.
var refPath = '../../../../../webutil/css/fastui/app/button_spec.html';
goog.testing.ui.style.writeReferenceFrame(refPath);
function setUp() {
button = new goog.ui.Button('Hello Generated', renderer);
button.setTooltip('Click for Generated');
}
function tearDown() {
if (button) {
button.dispose();
}
goog.dom.getElement('sandbox').innerHTML = '';
}
function testGeneratedButton() {
button.render(goog.dom.getElement('sandbox'));
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-resting');
assertEquals('Hello Generated', button.getContentElement().innerHTML);
assertEquals('Click for Generated',
button.getElement().getAttribute('title'));
}
function testButtonStates() {
button.render(goog.dom.getElement('sandbox'));
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-resting');
button.setState(goog.ui.Component.State.HOVER, true);
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-hover');
button.setState(goog.ui.Component.State.HOVER, false);
button.setState(goog.ui.Component.State.FOCUSED, true);
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-focused');
button.setState(goog.ui.Component.State.FOCUSED, false);
button.setState(goog.ui.Component.State.ACTIVE, true);
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-active');
button.setState(goog.ui.Component.State.ACTIVE, false);
button.setState(goog.ui.Component.State.DISABLED, true);
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-disabled');
}
function testDecoratedButton() {
button.decorate(goog.dom.getElement('button'));
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-resting');
assertEquals('Hello Decorated', button.getContentElement().innerHTML);
assertEquals('Click for Decorated',
button.getElement().getAttribute('title'));
}
function testDecoratedButtonBox() {
button.decorate(goog.dom.getElement('button-box'));
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-resting');
assertEquals('Hello Decorated Box',
button.getContentElement().innerHTML);
assertEquals('Click for Decorated Box',
button.getElement().getAttribute('title'));
}
/*
* This test demonstrates what happens when you put whitespace in a
* decorated button's content, and the decorated element 'hasBoxStructure'.
* Note that this behavior is different than when the element does not
* have box structure. Should this be fixed?
*/
function testDecoratedButtonBoxWithSpaceInContent() {
button.decorate(goog.dom.getElement('button-box-with-space-in-content'));
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-resting');
if (goog.userAgent.IE) {
assertEquals('Hello Decorated Box with space ',
button.getContentElement().innerHTML);
} else {
assertEquals('\n Hello Decorated Box with space\n ',
button.getContentElement().innerHTML);
}
}
function testExistingContentIsUsed() {
button.decorate(goog.dom.getElement('button-box-with-dom-content'));
goog.testing.ui.style.assertStructureMatchesReference(button.getElement(),
'normal-resting');
// Safari 3 adds style="-webkit-user-select" to the strong tag, so we
// can't simply look at the HTML.
var content = button.getContentElement();
assertEquals('Unexpected number of child nodes', 3,
content.childNodes.length);
assertEquals('Unexpected tag', 'STRONG',
content.childNodes[0].tagName);
assertEquals('Unexpected text content', 'Hello',
content.childNodes[0].innerHTML);
assertEquals('Unexpected tag', 'EM',
content.childNodes[2].tagName);
assertEquals('Unexpected text content', 'Box',
content.childNodes[2].innerHTML);
}
</script>
<div id="sandbox"></div>
<div id="button" title="Click for Decorated">
Hello Decorated
</div>
<!-- The component DOM must always be created without whitespace. -->
<div id="button-box" title="Click for Decorated Box" class="goog-button goog-button-base"><div class="goog-inline-block goog-button-base-outer-box"><div class="goog-inline-block goog-button-base-inner-box"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow"> </div><div class="goog-button-base-content">Hello Decorated Box</div></div></div></div></div>
<!-- The component DOM must always be created without whitespace. This
demonstrates what happens when the content has whitespace.
-->
<div id="button-box-with-space-in-content" class="goog-button goog-button-base"><div class="goog-inline-block goog-button-base-outer-box"><div class="goog-inline-block goog-button-base-inner-box"><div class="goog-button-base-pos"><div class="goog-button-base-top-shadow"> </div><div class="goog-button-base-content">
Hello Decorated Box with space
</div></div></div></div></div>
<div id="button-box-with-dom-content">
<strong>Hello</strong> <em>Box</em>
</div>
</body>
</html>