Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,446 @@
|
||||
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Runtime development CSS Compiler emulation, via javascript.
|
||||
* This class provides an approximation to CSSCompiler's functionality by
|
||||
* hacking the live CSSOM.
|
||||
* This code is designed to be inserted in the DOM immediately after the last
|
||||
* style block in HEAD when in development mode, i.e. you are not using a
|
||||
* running instance of a CSS Compiler to pass your CSS through.
|
||||
*/
|
||||
|
||||
|
||||
goog.provide('goog.debug.DevCss');
|
||||
goog.provide('goog.debug.DevCss.UserAgent');
|
||||
|
||||
goog.require('goog.asserts');
|
||||
goog.require('goog.cssom');
|
||||
goog.require('goog.dom.classlist');
|
||||
goog.require('goog.events');
|
||||
goog.require('goog.events.EventType');
|
||||
goog.require('goog.string');
|
||||
goog.require('goog.userAgent');
|
||||
|
||||
|
||||
|
||||
/**
|
||||
* A class for solving development CSS issues/emulating the CSS Compiler.
|
||||
* @param {goog.debug.DevCss.UserAgent=} opt_userAgent The user agent, if not
|
||||
* passed in, will be determined using goog.userAgent.
|
||||
* @param {number|string=} opt_userAgentVersion The user agent's version.
|
||||
* If not passed in, will be determined using goog.userAgent.
|
||||
* @throws {Error} When userAgent detection fails.
|
||||
* @constructor
|
||||
* @final
|
||||
*/
|
||||
goog.debug.DevCss = function(opt_userAgent, opt_userAgentVersion) {
|
||||
if (!opt_userAgent) {
|
||||
// Walks through the known goog.userAgents.
|
||||
if (goog.userAgent.IE) {
|
||||
opt_userAgent = goog.debug.DevCss.UserAgent.IE;
|
||||
} else if (goog.userAgent.GECKO) {
|
||||
opt_userAgent = goog.debug.DevCss.UserAgent.GECKO;
|
||||
} else if (goog.userAgent.WEBKIT) {
|
||||
opt_userAgent = goog.debug.DevCss.UserAgent.WEBKIT;
|
||||
} else if (goog.userAgent.MOBILE) {
|
||||
opt_userAgent = goog.debug.DevCss.UserAgent.MOBILE;
|
||||
} else if (goog.userAgent.OPERA) {
|
||||
opt_userAgent = goog.debug.DevCss.UserAgent.OPERA;
|
||||
}
|
||||
}
|
||||
switch (opt_userAgent) {
|
||||
case goog.debug.DevCss.UserAgent.OPERA:
|
||||
case goog.debug.DevCss.UserAgent.IE:
|
||||
case goog.debug.DevCss.UserAgent.GECKO:
|
||||
case goog.debug.DevCss.UserAgent.FIREFOX:
|
||||
case goog.debug.DevCss.UserAgent.WEBKIT:
|
||||
case goog.debug.DevCss.UserAgent.SAFARI:
|
||||
case goog.debug.DevCss.UserAgent.MOBILE:
|
||||
break;
|
||||
default:
|
||||
throw Error('Could not determine the user agent from known UserAgents');
|
||||
}
|
||||
|
||||
/**
|
||||
* One of goog.debug.DevCss.UserAgent.
|
||||
* @type {string}
|
||||
* @private
|
||||
*/
|
||||
this.userAgent_ = opt_userAgent;
|
||||
|
||||
/**
|
||||
* @const @private
|
||||
*/
|
||||
this.userAgentTokens_ = {};
|
||||
|
||||
/**
|
||||
* @type {number|string}
|
||||
* @private
|
||||
*/
|
||||
this.userAgentVersion_ = opt_userAgentVersion || goog.userAgent.VERSION;
|
||||
this.generateUserAgentTokens_();
|
||||
|
||||
/**
|
||||
* @type {boolean}
|
||||
* @private
|
||||
*/
|
||||
this.isIe6OrLess_ = this.userAgent_ == goog.debug.DevCss.UserAgent.IE &&
|
||||
goog.string.compareVersions('7', this.userAgentVersion_) > 0;
|
||||
|
||||
if (this.isIe6OrLess_) {
|
||||
/**
|
||||
* @type {Array<{classNames,combinedClassName,els}>}
|
||||
* @private
|
||||
*/
|
||||
this.ie6CombinedMatches_ = [];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Rewrites the CSSOM as needed to activate any useragent-specific selectors.
|
||||
* @param {boolean=} opt_enableIe6ReadyHandler If true(the default), and the
|
||||
* userAgent is ie6, we set a document "ready" event handler to walk the DOM
|
||||
* and make combined selector className changes. Having this parameter also
|
||||
* aids unit testing.
|
||||
*/
|
||||
goog.debug.DevCss.prototype.activateBrowserSpecificCssRules = function(
|
||||
opt_enableIe6ReadyHandler) {
|
||||
var enableIe6EventHandler = goog.isDef(opt_enableIe6ReadyHandler) ?
|
||||
opt_enableIe6ReadyHandler : true;
|
||||
var cssRules = goog.cssom.getAllCssStyleRules();
|
||||
|
||||
for (var i = 0, cssRule; cssRule = cssRules[i]; i++) {
|
||||
this.replaceBrowserSpecificClassNames_(cssRule);
|
||||
}
|
||||
|
||||
// Since we may have manipulated the rules above, we'll have to do a
|
||||
// complete sweep again if we're in IE6. Luckily performance doesn't
|
||||
// matter for this tool.
|
||||
if (this.isIe6OrLess_) {
|
||||
cssRules = goog.cssom.getAllCssStyleRules();
|
||||
for (var i = 0, cssRule; cssRule = cssRules[i]; i++) {
|
||||
this.replaceIe6CombinedSelectors_(cssRule);
|
||||
}
|
||||
}
|
||||
|
||||
// Add an event listener for document ready to rewrite any necessary
|
||||
// combined classnames in IE6.
|
||||
if (this.isIe6OrLess_ && enableIe6EventHandler) {
|
||||
goog.events.listen(document, goog.events.EventType.LOAD, goog.bind(
|
||||
this.addIe6CombinedClassNames_, this));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* A list of possible user agent strings.
|
||||
* @enum {string}
|
||||
*/
|
||||
goog.debug.DevCss.UserAgent = {
|
||||
OPERA: 'OPERA',
|
||||
IE: 'IE',
|
||||
GECKO: 'GECKO',
|
||||
FIREFOX: 'GECKO',
|
||||
WEBKIT: 'WEBKIT',
|
||||
SAFARI: 'WEBKIT',
|
||||
MOBILE: 'MOBILE'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* A list of strings that may be used for matching in CSS files/development.
|
||||
* @enum {string}
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.CssToken_ = {
|
||||
USERAGENT: 'USERAGENT',
|
||||
SEPARATOR: '-',
|
||||
LESS_THAN: 'LT',
|
||||
GREATER_THAN: 'GT',
|
||||
LESS_THAN_OR_EQUAL: 'LTE',
|
||||
GREATER_THAN_OR_EQUAL: 'GTE',
|
||||
IE6_SELECTOR_TEXT: 'goog-ie6-selector',
|
||||
IE6_COMBINED_GLUE: '_'
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Generates user agent token match strings with comparison and version bits.
|
||||
* For example:
|
||||
* userAgentTokens_.ANY will be like 'GECKO'
|
||||
* userAgentTokens_.LESS_THAN will be like 'GECKO-LT3' etc...
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.prototype.generateUserAgentTokens_ = function() {
|
||||
this.userAgentTokens_.ANY = goog.debug.DevCss.CssToken_.USERAGENT +
|
||||
goog.debug.DevCss.CssToken_.SEPARATOR + this.userAgent_;
|
||||
this.userAgentTokens_.EQUALS = this.userAgentTokens_.ANY +
|
||||
goog.debug.DevCss.CssToken_.SEPARATOR;
|
||||
this.userAgentTokens_.LESS_THAN = this.userAgentTokens_.ANY +
|
||||
goog.debug.DevCss.CssToken_.SEPARATOR +
|
||||
goog.debug.DevCss.CssToken_.LESS_THAN;
|
||||
this.userAgentTokens_.LESS_THAN_OR_EQUAL = this.userAgentTokens_.ANY +
|
||||
goog.debug.DevCss.CssToken_.SEPARATOR +
|
||||
goog.debug.DevCss.CssToken_.LESS_THAN_OR_EQUAL;
|
||||
this.userAgentTokens_.GREATER_THAN = this.userAgentTokens_.ANY +
|
||||
goog.debug.DevCss.CssToken_.SEPARATOR +
|
||||
goog.debug.DevCss.CssToken_.GREATER_THAN;
|
||||
this.userAgentTokens_.GREATER_THAN_OR_EQUAL = this.userAgentTokens_.ANY +
|
||||
goog.debug.DevCss.CssToken_.SEPARATOR +
|
||||
goog.debug.DevCss.CssToken_.GREATER_THAN_OR_EQUAL;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Gets the version number bit from a selector matching userAgentToken.
|
||||
* @param {string} selectorText The selector text of a CSS rule.
|
||||
* @param {string} userAgentToken Includes the LTE/GTE bit to see if it matches.
|
||||
* @return {string|undefined} The version number.
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.prototype.getVersionNumberFromSelectorText_ = function(
|
||||
selectorText, userAgentToken) {
|
||||
var regex = new RegExp(userAgentToken + '([\\d\\.]+)');
|
||||
var matches = regex.exec(selectorText);
|
||||
if (matches && matches.length == 2) {
|
||||
return matches[1];
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Extracts a rule version from the selector text, and if it finds one, calls
|
||||
* compareVersions against it and the passed in token string to provide the
|
||||
* value needed to determine if we have a match or not.
|
||||
* @param {CSSRule} cssRule The rule to test against.
|
||||
* @param {string} token The match token to test against the rule.
|
||||
* @return {!Array|undefined} A tuple with the result of the compareVersions
|
||||
* call and the matched ruleVersion.
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.prototype.getRuleVersionAndCompare_ = function(cssRule,
|
||||
token) {
|
||||
if (!cssRule.selectorText.match(token)) {
|
||||
return;
|
||||
}
|
||||
var ruleVersion = this.getVersionNumberFromSelectorText_(
|
||||
cssRule.selectorText, token);
|
||||
if (!ruleVersion) {
|
||||
return;
|
||||
}
|
||||
|
||||
var comparison = goog.string.compareVersions(this.userAgentVersion_,
|
||||
ruleVersion);
|
||||
return [comparison, ruleVersion];
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Replaces a CSS selector if we have matches based on our useragent/version.
|
||||
* Example: With a selector like ".USERAGENT-IE-LTE6 .class { prop: value }" if
|
||||
* we are running IE6 we'll end up with ".class { prop: value }", thereby
|
||||
* "activating" the selector.
|
||||
* @param {CSSRule} cssRule The cssRule to potentially replace.
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.prototype.replaceBrowserSpecificClassNames_ = function(
|
||||
cssRule) {
|
||||
|
||||
// If we don't match the browser token, we can stop now.
|
||||
if (!cssRule.selectorText.match(this.userAgentTokens_.ANY)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// We know it will begin as a classname.
|
||||
var additionalRegexString;
|
||||
|
||||
// Tests "Less than or equals".
|
||||
var compared = this.getRuleVersionAndCompare_(cssRule,
|
||||
this.userAgentTokens_.LESS_THAN_OR_EQUAL);
|
||||
if (compared && compared.length) {
|
||||
if (compared[0] > 0) {
|
||||
return;
|
||||
}
|
||||
additionalRegexString = this.userAgentTokens_.LESS_THAN_OR_EQUAL +
|
||||
compared[1];
|
||||
}
|
||||
|
||||
// Tests "Less than".
|
||||
compared = this.getRuleVersionAndCompare_(cssRule,
|
||||
this.userAgentTokens_.LESS_THAN);
|
||||
if (compared && compared.length) {
|
||||
if (compared[0] > -1) {
|
||||
return;
|
||||
}
|
||||
additionalRegexString = this.userAgentTokens_.LESS_THAN + compared[1];
|
||||
}
|
||||
|
||||
// Tests "Greater than or equals".
|
||||
compared = this.getRuleVersionAndCompare_(cssRule,
|
||||
this.userAgentTokens_.GREATER_THAN_OR_EQUAL);
|
||||
if (compared && compared.length) {
|
||||
if (compared[0] < 0) {
|
||||
return;
|
||||
}
|
||||
additionalRegexString = this.userAgentTokens_.GREATER_THAN_OR_EQUAL +
|
||||
compared[1];
|
||||
}
|
||||
|
||||
// Tests "Greater than".
|
||||
compared = this.getRuleVersionAndCompare_(cssRule,
|
||||
this.userAgentTokens_.GREATER_THAN);
|
||||
if (compared && compared.length) {
|
||||
if (compared[0] < 1) {
|
||||
return;
|
||||
}
|
||||
additionalRegexString = this.userAgentTokens_.GREATER_THAN + compared[1];
|
||||
}
|
||||
|
||||
// Tests "Equals".
|
||||
compared = this.getRuleVersionAndCompare_(cssRule,
|
||||
this.userAgentTokens_.EQUALS);
|
||||
if (compared && compared.length) {
|
||||
if (compared[0] != 0) {
|
||||
return;
|
||||
}
|
||||
additionalRegexString = this.userAgentTokens_.EQUALS + compared[1];
|
||||
}
|
||||
|
||||
// If we got to here without generating the additionalRegexString, then
|
||||
// we did not match any of our comparison token strings, and we want a
|
||||
// general browser token replacement.
|
||||
if (!additionalRegexString) {
|
||||
additionalRegexString = this.userAgentTokens_.ANY;
|
||||
}
|
||||
|
||||
// We need to match at least a single whitespace character to know that
|
||||
// we are matching the entire useragent string token.
|
||||
var regexString = '\\.' + additionalRegexString + '\\s+';
|
||||
var re = new RegExp(regexString, 'g');
|
||||
|
||||
var currentCssText = goog.cssom.getCssTextFromCssRule(cssRule);
|
||||
|
||||
// Replacing the token with '' activates the selector for this useragent.
|
||||
var newCssText = currentCssText.replace(re, '');
|
||||
|
||||
if (newCssText != currentCssText) {
|
||||
goog.cssom.replaceCssRule(cssRule, newCssText);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Replaces IE6 combined selector rules with a workable development alternative.
|
||||
* IE6 actually parses .class1.class2 {} to simply .class2 {} which is nasty.
|
||||
* To fully support combined selectors in IE6 this function needs to be paired
|
||||
* with a call to replace the relevant DOM elements classNames as well.
|
||||
* @see {this.addIe6CombinedClassNames_}
|
||||
* @param {CSSRule} cssRule The rule to potentially fix.
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.prototype.replaceIe6CombinedSelectors_ = function(cssRule) {
|
||||
// This match only ever works in IE because other UA's won't have our
|
||||
// IE6_SELECTOR_TEXT in the cssText property.
|
||||
if (cssRule.style.cssText &&
|
||||
cssRule.style.cssText.match(
|
||||
goog.debug.DevCss.CssToken_.IE6_SELECTOR_TEXT)) {
|
||||
var cssText = goog.cssom.getCssTextFromCssRule(cssRule);
|
||||
var combinedSelectorText = this.getIe6CombinedSelectorText_(cssText);
|
||||
if (combinedSelectorText) {
|
||||
var newCssText = combinedSelectorText + '{' + cssRule.style.cssText + '}';
|
||||
goog.cssom.replaceCssRule(cssRule, newCssText);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Gets the appropriate new combined selector text for IE6.
|
||||
* Also adds an entry onto ie6CombinedMatches_ with relevant info for the
|
||||
* likely following call to walk the DOM and rewrite the class attribute.
|
||||
* Example: With a selector like
|
||||
* ".class2 { -goog-ie6-selector: .class1.class2; prop: value }".
|
||||
* this function will return:
|
||||
* ".class1_class2 { prop: value }".
|
||||
* @param {string} cssText The CSS selector text and css rule text combined.
|
||||
* @return {?string} The rewritten css rule text.
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.prototype.getIe6CombinedSelectorText_ = function(cssText) {
|
||||
var regex = new RegExp(goog.debug.DevCss.CssToken_.IE6_SELECTOR_TEXT +
|
||||
'\\s*:\\s*\\"([^\\"]+)\\"', 'gi');
|
||||
var matches = regex.exec(cssText);
|
||||
if (matches) {
|
||||
var combinedSelectorText = matches[1];
|
||||
// To aid in later fixing the DOM, we need to split up the possible
|
||||
// selector groups by commas.
|
||||
var groupedSelectors = combinedSelectorText.split(/\s*\,\s*/);
|
||||
for (var i = 0, selector; selector = groupedSelectors[i]; i++) {
|
||||
// Strips off the leading ".".
|
||||
var combinedClassName = selector.substr(1);
|
||||
var classNames = combinedClassName.split(
|
||||
goog.debug.DevCss.CssToken_.IE6_COMBINED_GLUE);
|
||||
var entry = {
|
||||
classNames: classNames,
|
||||
combinedClassName: combinedClassName,
|
||||
els: []
|
||||
};
|
||||
this.ie6CombinedMatches_.push(entry);
|
||||
}
|
||||
return combinedSelectorText;
|
||||
}
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Adds combined selectors with underscores to make them "work" in IE6.
|
||||
* @see {this.replaceIe6CombinedSelectors_}
|
||||
* @private
|
||||
*/
|
||||
goog.debug.DevCss.prototype.addIe6CombinedClassNames_ = function() {
|
||||
if (!this.ie6CombinedMatches_.length) {
|
||||
return;
|
||||
}
|
||||
var allEls = document.getElementsByTagName('*');
|
||||
var matches = [];
|
||||
// Match nodes for all classNames.
|
||||
for (var i = 0, classNameEntry; classNameEntry =
|
||||
this.ie6CombinedMatches_[i]; i++) {
|
||||
for (var j = 0, el; el = allEls[j]; j++) {
|
||||
var classNamesLength = classNameEntry.classNames.length;
|
||||
for (var k = 0, className; className = classNameEntry.classNames[k];
|
||||
k++) {
|
||||
if (!goog.dom.classlist.contains(goog.asserts.assert(el), className)) {
|
||||
break;
|
||||
}
|
||||
if (k == classNamesLength - 1) {
|
||||
classNameEntry.els.push(el);
|
||||
}
|
||||
}
|
||||
}
|
||||
// Walks over our matching nodes and fixes them.
|
||||
if (classNameEntry.els.length) {
|
||||
for (var j = 0, el; el = classNameEntry.els[j]; j++) {
|
||||
goog.asserts.assert(el);
|
||||
if (!goog.dom.classlist.contains(el,
|
||||
classNameEntry.combinedClassName)) {
|
||||
goog.dom.classlist.add(el, classNameEntry.combinedClassName);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
@@ -0,0 +1,160 @@
|
||||
<!DOCTYPE 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.debug.DevCssTest');
|
||||
</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">
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,216 @@
|
||||
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
goog.provide('goog.debug.DevCssTest');
|
||||
goog.setTestOnly('goog.debug.DevCssTest');
|
||||
|
||||
goog.require('goog.debug.DevCss');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
|
||||
var el;
|
||||
|
||||
function setUpPage() {
|
||||
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));
|
||||
}
|
||||
*/
|
||||
@@ -0,0 +1,26 @@
|
||||
// Copyright 2008 The Closure Library Authors. All Rights Reserved.
|
||||
//
|
||||
// Licensed under the Apache License, Version 2.0 (the "License");
|
||||
// you may not use this file except in compliance with the License.
|
||||
// You may obtain a copy of the License at
|
||||
//
|
||||
// http://www.apache.org/licenses/LICENSE-2.0
|
||||
//
|
||||
// Unless required by applicable law or agreed to in writing, software
|
||||
// distributed under the License is distributed on an "AS-IS" BASIS,
|
||||
// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
// See the License for the specific language governing permissions and
|
||||
// limitations under the License.
|
||||
|
||||
/**
|
||||
* @fileoverview Development CSS Compiler runtime execution.
|
||||
*/
|
||||
|
||||
goog.provide('goog.debug.devCssRunner');
|
||||
|
||||
goog.require('goog.debug.DevCss');
|
||||
|
||||
(function() {
|
||||
var devCssInstance = new goog.debug.DevCss();
|
||||
devCssInstance.activateBrowserSpecificCssRules();
|
||||
})();
|
||||
Reference in New Issue
Block a user