sku-pg
Version:
Skulpt is a Javascript implementation of Python 2.x. Python that runs in your browser!
366 lines (317 loc) • 13.2 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 - CSS Object Model helper</title>
<script src="../../base.js"></script>
<script>
goog.require('goog.testing.jsunit');
goog.require('goog.userAgent');
goog.require('goog.style');
goog.require('goog.cssom');
goog.require('goog.debug');
goog.require('goog.debug.DevCss');
</script>
<style>
@import "devcss_test_import_1.css";
.css-style-1 {
background-color: rgb(173,216,230); /* lightblue */
padding: 10px;
}
.css-style-2 {
display: block;
background-color: transparent;
margin-top: 1px;
margin-left: 1px;
padding: 10px;
}
.css-style-3 {
background-color: orange;
padding: 10px;
}
.compound1.compound2 {
-goog-ie6-selector: ".compound1_compound2";
background-color: rgb(255,192,203); /* aka pink */
}
.USERAGENT-OPERA .css-style-2,
.USERAGENT-GECKO .css-style-2,
.USERAGENT-MOBILE .css-style-2 {
background-color: rgb(255,192,203); /* aka pink */
}
.USERAGENT-OPERA .css-style-2,
.USERAGENT-WEBKIT-GTE255 .css-style-2,
.USERAGENT-MOBILE .css-style-2 {
margin-top: 20px;
}
.USERAGENT-OPERA .css-style-2,
.USERAGENT-WEBKIT-LTE200 .css-style-2,
.USERAGENT-MOBILE .css-style-2 {
margin-left: 15px;
}
.USERAGENT-GECKO #devcss-gecko-1,
.USERAGENT-GECKO #devcss-gecko-2 {
background-color: rgb(255,192,203); /* aka pink */
}
.USERAGENT-IE-8 #devcss-ie8-1,
.USERAGENT-IE-8 #devcss-ie8-2 {
background-color: rgb(255,192,203); /* aka pink */
}
#devcss-test-ie6 {
background-color: purple;
}
.USERAGENT-IE-6 #devcss-test-ie6 {
background-color: rgb(255,192,203); /* aka pink */
}
</style>
<style>
@import "devcss_test_import_2.css";
</style>
</head>
<body>
<div id="devcss-test-2" class="css-style-2">
<ul>
<li>
Should end up background-color:rgb(255, 192, 203) aka pink.
</li>
<li>
Should end up with margin-top: 20px; margin-left: 15px;
</li>
</ul>
</div>
<br><br>
<div id="devcss-test-ie6">
<ul>
<li>
Should end up background-color:rgb(255, 192, 203) aka pink, not black or purple.
</li>
</ul>
</div>
<!--
TODO(user): Re-enable if we ever come up with a way to make imports
work.
<div id="devcss-test-importfixer-1" class="css-style-3">
<ul>
<li>
Should end up yellow from the first import of
devcss_test_import_2.css, overriding the previous orange setting and
ignoring the second import of devcss_test_import_1.css which would set
it grey.
</li>
</ul>
</div>
<div id="devcss-test-importfixer-2" class="css-style-1">
<ul>
<li>
Should end up lightblue, which is a revert back to the setting in this
test file, after disabling the second import of
devcss_test_import_1.css
</li>
</ul>
</div>
-->
<br><br>
<div id="devcss-ie8-1">
This element should be pink for IE8.
</div>
<div id="devcss-ie8-2">
This element should also be pink for IE8.
</div>
<br><br>
<div id="devcss-gecko-1">
This element should be pink for Gecko.
</div>
<div id="devcss-gecko-2">
This element should also be pink for Gecko.
</div>
<br><br>
<div id="devcss-test-compound1" class="compound1">
This (class="compound1") should have no bg.
</div>
<div id="devcss-test-compound2" class="compound2">
This (class="compound2") should have no bg.
</div>
<div id="devcss-test-compound1-2"
class="compound1 compound2 compound1_compound2">
This (class="compound1 compound2 compound1_compound2") should have
a pink bg for IE6.
</div>
<br><br>
<input id="devcss-test-combined1" type="hidden" class="ie6-1 ie6-2">
<input id="devcss-test-combined2" type="hidden" class="ie6-3 ie6-1 ie6-2">
<input id="devcss-test-notcombined1" type="hidden" class="ie6-1">
<input id="devcss-test-notcombined2" type="hidden" class="ie6-2">
<input id="devcss-test-notcombined3" type="hidden" class="ie6-3">
<script type="text/javascript">
var el = document.getElementById('devcss-test-2');
// Since background color sometimes comes back like rgb(xxx, xxx, xxx)
// or rgb(xxx,xxx,xxx) depending on browser.
function spaceless(foo) {
return foo.replace(/\s/g, '')
}
function testGetIe6CombinedSelectorText() {
var devcssInstance = new goog.debug.DevCss();
devcssInstance.ie6CombinedMatches_ = [];
var css = '.class2 { -goog-ie6-selector:".class1_class2"; prop: val; }';
var newCss = devcssInstance.getIe6CombinedSelectorText_(css);
assertEquals('.class1_class2', newCss);
assertArrayEquals(['class1', 'class2'],
devcssInstance.ie6CombinedMatches_[0].classNames);
assertEquals('class1_class2',
devcssInstance.ie6CombinedMatches_[0].combinedClassName);
devcssInstance = new goog.debug.DevCss();
devcssInstance.ie6CombinedMatches_ = [];
css = '.class3 { prop: val; -goog-ie6-selector:".class1_class2_class3";' +
'prop: val; }';
newCss = devcssInstance.getIe6CombinedSelectorText_(css);
assertEquals('.class1_class2_class3', newCss);
assertArrayEquals(['class1', 'class2', 'class3'],
devcssInstance.ie6CombinedMatches_[0].classNames);
assertEquals('class1_class2_class3',
devcssInstance.ie6CombinedMatches_[0].combinedClassName);
devcssInstance = new goog.debug.DevCss();
devcssInstance.ie6CombinedMatches_ = [];
css = '.class3, .class5 {' +
'-goog-ie6-selector:".class1_class2_class3, .class4_class5";' +
'prop: val; }';
newCss = devcssInstance.getIe6CombinedSelectorText_(css);
assertEquals('.class1_class2_class3, .class4_class5', newCss);
assertArrayEquals(['class1', 'class2', 'class3'],
devcssInstance.ie6CombinedMatches_[0].classNames);
assertEquals('class1_class2_class3',
devcssInstance.ie6CombinedMatches_[0].combinedClassName);
assertArrayEquals(['class4', 'class5'],
devcssInstance.ie6CombinedMatches_[1].classNames);
assertEquals('class4_class5',
devcssInstance.ie6CombinedMatches_[1].combinedClassName);
}
function testAddIe6CombinedClassNames() {
var el_combined1 = document.getElementById('devcss-test-combined1');
var el_combined2 = document.getElementById('devcss-test-combined2');
var el_notcombined1 = document.getElementById('devcss-test-notcombined1');
var el_notcombined2 = document.getElementById('devcss-test-notcombined2');
var el_notcombined3 = document.getElementById('devcss-test-notcombined3');
var devcssInstance = new goog.debug.DevCss();
devcssInstance.ie6CombinedMatches_ = [
{
classNames: ['ie6-2', 'ie6-1'],
combinedClassName: 'ie6-1_ie6-2',
els: []
},
{
classNames: ['ie6-2', 'ie6-3', 'ie6-1'],
combinedClassName: 'ie6-1_ie6-2_ie6-3',
els: []
}];
devcssInstance.addIe6CombinedClassNames_();
assertEquals(-1, el_notcombined1.className.indexOf('ie6-1_ie6-2'));
assertEquals(-1, el_notcombined2.className.indexOf('ie6-1_ie6-2'));
assertEquals(-1, el_notcombined3.className.indexOf('ie6-1_ie6-2_ie6-3'));
assertTrue(el_combined1.className.indexOf('ie6-1_ie6-2') != -1);
assertTrue(el_combined2.className.indexOf('ie6-1_ie6-2_ie6-3') != -1);
}
function testActivateBrowserSpecificCssALL() {
// equals GECKO
var devcssInstance = new goog.debug.DevCss('GECKO');
devcssInstance.activateBrowserSpecificCssRules(false);
var backgroundColor = goog.style.getBackgroundColor(el);
assertEquals('rgb(255,192,203)', spaceless(backgroundColor));
// GECKO test case w/ two selectors joined by a commma.
var elGeckoOne = document.getElementById('devcss-gecko-1');
backgroundColor = goog.style.getBackgroundColor(elGeckoOne);
assertEquals('rgb(255,192,203)', spaceless(backgroundColor));
var elGeckoTwo = document.getElementById('devcss-gecko-2');
backgroundColor = goog.style.getBackgroundColor(elGeckoTwo);
assertEquals('rgb(255,192,203)', spaceless(backgroundColor));
}
function testActivateBrowserSpecificCssWithVersion() {
// equals IE 6
var devcssInstance = new goog.debug.DevCss('IE', '6');
devcssInstance.activateBrowserSpecificCssRules(false);
var elIe6 = document.getElementById('devcss-test-ie6');
var backgroundColor = goog.style.getBackgroundColor(elIe6);
assertEquals('rgb(255,192,203)', spaceless(backgroundColor));
// IE8 test case w/ two selectors joined by a commma.
var devCssInstanceTwo = new goog.debug.DevCss('IE', '8');
devCssInstanceTwo.activateBrowserSpecificCssRules(false);
var elIe8One = document.getElementById('devcss-ie8-1');
backgroundColor = goog.style.getBackgroundColor(elIe8One);
assertEquals('rgb(255,192,203)', spaceless(backgroundColor));
var elIe8Two = document.getElementById('devcss-ie8-2');
backgroundColor = goog.style.getBackgroundColor(elIe8Two);
assertEquals('rgb(255,192,203)', spaceless(backgroundColor));
}
function testActivateBrowserSpecificCssGteInvalid() {
// WEBKIT_GTE255
var marginBox = goog.style.getMarginBox(el);
assertEquals(1, marginBox.top); // should still be 1
var devcssInstance = new goog.debug.DevCss('WEBKIT', 254);
devcssInstance.activateBrowserSpecificCssRules(false);
var marginBox = goog.style.getMarginBox(el);
assertEquals(1, marginBox.top); // should still be 1
}
function testActivateBrowserSpecificCssGteValid() {
var devcssInstance = new goog.debug.DevCss('WEBKIT', 255);
devcssInstance.activateBrowserSpecificCssRules(false);
var marginBox = goog.style.getMarginBox(el);
assertEquals(20, marginBox.top);
}
function testActivateBrowserSpecificCssLteInvalid() {
// IE_LTE6
var marginBox = goog.style.getMarginBox(el);
assertEquals(1, marginBox.left); // should still be 1
var devcssInstance = new goog.debug.DevCss('WEBKIT', 202);
devcssInstance.activateBrowserSpecificCssRules(false);
var marginBox = goog.style.getMarginBox(el);
assertEquals(1, marginBox.left); // should still be 1
}
function testActivateBrowserSpecificCssLteValid() {
var devcssInstance = new goog.debug.DevCss('WEBKIT', 199);
devcssInstance.activateBrowserSpecificCssRules(false);
var marginBox = goog.style.getMarginBox(el);
assertEquals(15, marginBox.left);
}
function testReplaceIe6Selectors() {
var devcssInstance = new goog.debug.DevCss('IE', 6);
devcssInstance.activateBrowserSpecificCssRules(false);
// It should correctly be transparent, even in IE6.
var compound2El = document.getElementById('devcss-test-compound2');
var backgroundColor = spaceless(
goog.style.getBackgroundColor(compound2El));
assertTrue('Unexpected background color: ' + backgroundColor,
'transparent' == backgroundColor ||
'rgba(0,0,0,0)' == backgroundColor);
// And this one should have the combined selector working, even in
// IE6.
backgroundColor = goog.style.getBackgroundColor(
document.getElementById('devcss-test-compound1-2'));
assertEquals('rgb(255,192,203)', spaceless(backgroundColor));
}
/*
* TODO(user): Re-enable if we ever come up with a way to make imports
* work.
function testDisableDuplicateStyleSheetImports() {
var el1 = document.getElementById('devcss-test-importfixer-1');
var el2 = document.getElementById('devcss-test-importfixer-2');
var backgroundColor = goog.style.getBackgroundColor(el1);
assertEquals('rgb(255,255,0)', spaceless(backgroundColor));
var backgroundColor = goog.style.getBackgroundColor(el2);
assertEquals('rgb(255,0,0)', spaceless(backgroundColor));
// This should disable the second coming of devcss_test_import_1.css.
var devcssInstance = new goog.debug.DevCss();
devcssInstance.disableDuplicateStyleSheetImports();
var backgroundColor = goog.style.getBackgroundColor(el1);
assertEquals('rgb(255,255,0)', spaceless(backgroundColor));
var backgroundColor = goog.style.getBackgroundColor(el2);
assertEquals('rgb(173,216,230)', spaceless(backgroundColor));
}
*/
</script>
</body>
</html>