| // 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)); |
| } |
| */ |