2603 lines
83 KiB
JavaScript
2603 lines
83 KiB
JavaScript
// Copyright 2011 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 Shared unit tests for styles.
|
|
*/
|
|
|
|
/** @suppress {extraProvide} */
|
|
goog.provide('goog.style_test');
|
|
|
|
goog.require('goog.array');
|
|
goog.require('goog.color');
|
|
goog.require('goog.dom');
|
|
goog.require('goog.events.BrowserEvent');
|
|
goog.require('goog.math.Box');
|
|
goog.require('goog.math.Coordinate');
|
|
goog.require('goog.math.Rect');
|
|
goog.require('goog.math.Size');
|
|
goog.require('goog.object');
|
|
goog.require('goog.string');
|
|
goog.require('goog.style');
|
|
goog.require('goog.testing.ExpectedFailures');
|
|
goog.require('goog.testing.PropertyReplacer');
|
|
goog.require('goog.testing.asserts');
|
|
goog.require('goog.testing.jsunit');
|
|
goog.require('goog.userAgent');
|
|
goog.require('goog.userAgent.product');
|
|
goog.require('goog.userAgent.product.isVersion');
|
|
goog.setTestOnly('goog.style_test');
|
|
|
|
// IE before version 6 will always be border box in compat mode.
|
|
var isBorderBox = goog.dom.isCss1CompatMode() ?
|
|
(goog.userAgent.IE && !goog.userAgent.isVersionOrHigher('6')) :
|
|
true;
|
|
var EPSILON = 2;
|
|
var expectedFailures = new goog.testing.ExpectedFailures();
|
|
var $ = goog.dom.getElement;
|
|
var propertyReplacer = new goog.testing.PropertyReplacer();
|
|
var UserAgents = {
|
|
GECKO: 'GECKO',
|
|
IE: 'IE',
|
|
OPERA: 'OPERA',
|
|
WEBKIT: 'WEBKIT'
|
|
};
|
|
|
|
|
|
function setUpPage() {
|
|
var viewportSize = goog.dom.getViewportSize();
|
|
// When the window is too short or not wide enough, some tests, especially
|
|
// those for off-screen elements, fail. Oddly, the most reliable
|
|
// indicator is a width of zero (which is of course erroneous), since
|
|
// height sometimes includes a scroll bar. We can make no assumptions on
|
|
// window size on the Selenium farm.
|
|
if (goog.userAgent.IE && viewportSize.width < 300) {
|
|
// Move to origin, since IE won't resize outside the screen.
|
|
window.moveTo(0, 0);
|
|
window.resizeTo(640, 480);
|
|
}
|
|
}
|
|
|
|
function setUp() {
|
|
window.scrollTo(0, 0);
|
|
}
|
|
|
|
function tearDown() {
|
|
expectedFailures.handleTearDown();
|
|
var testVisibleDiv2 = goog.dom.getElement('test-visible2');
|
|
testVisibleDiv2.setAttribute('style', '');
|
|
testVisibleDiv2.innerHTML = '';
|
|
var testViewport = goog.dom.getElement('test-viewport');
|
|
testViewport.setAttribute('style', '');
|
|
testViewport.innerHTML = '';
|
|
propertyReplacer.reset();
|
|
reinitializeUserAgent();
|
|
}
|
|
|
|
function testSetStyle() {
|
|
var el = $('span1');
|
|
goog.style.setStyle(el, 'textDecoration', 'underline');
|
|
assertEquals('Should be underline', 'underline', el.style.textDecoration);
|
|
}
|
|
|
|
function testSetStyleMap() {
|
|
var el = $('span6');
|
|
|
|
var styles = {
|
|
'background-color': 'blue',
|
|
'font-size': '100px',
|
|
textAlign: 'center'
|
|
};
|
|
|
|
goog.style.setStyle(el, styles);
|
|
|
|
var answers = {
|
|
backgroundColor: 'blue',
|
|
fontSize: '100px',
|
|
textAlign: 'center'
|
|
};
|
|
|
|
goog.object.forEach(answers, function(value, style) {
|
|
assertEquals('Should be ' + value, value, el.style[style]);
|
|
});
|
|
}
|
|
|
|
function testSetStyleWithNonCamelizedString() {
|
|
var el = $('span5');
|
|
goog.style.setStyle(el, 'text-decoration', 'underline');
|
|
assertEquals('Should be underline', 'underline', el.style.textDecoration);
|
|
}
|
|
|
|
function testGetStyle() {
|
|
var el = goog.dom.getElement('styleTest3');
|
|
goog.style.setStyle(el, 'width', '80px');
|
|
goog.style.setStyle(el, 'textDecoration', 'underline');
|
|
|
|
assertEquals('80px', goog.style.getStyle(el, 'width'));
|
|
assertEquals('underline', goog.style.getStyle(el, 'textDecoration'));
|
|
assertEquals('underline', goog.style.getStyle(el, 'text-decoration'));
|
|
// Non set properties are always empty strings.
|
|
assertEquals('', goog.style.getStyle(el, 'border'));
|
|
}
|
|
|
|
function testGetStyleMsFilter() {
|
|
// Element with -ms-filter style set.
|
|
var e = goog.dom.getElement('msFilter');
|
|
|
|
if (goog.userAgent.IE && goog.userAgent.isDocumentModeOrHigher(8)) {
|
|
// Only IE8 supports -ms-filter and returns it as value for the "filter"
|
|
// property. When in compatibility mode, -ms-filter is not supported
|
|
// and IE8 behaves as IE7 so the other case will apply.
|
|
assertEquals('alpha(opacity=0)', goog.style.getStyle(e, 'filter'));
|
|
} else {
|
|
// Any other browser does not support ms-filter so it returns empty string.
|
|
assertEquals('', goog.style.getStyle(e, 'filter'));
|
|
}
|
|
}
|
|
|
|
function testGetStyleFilter() {
|
|
// Element with filter style set.
|
|
var e = goog.dom.getElement('filter');
|
|
|
|
if (goog.userAgent.IE) {
|
|
// Filter supported.
|
|
assertEquals('alpha(opacity=0)', goog.style.getStyle(e, 'filter'));
|
|
} else {
|
|
assertEquals('', goog.style.getStyle(e, 'filter'));
|
|
}
|
|
}
|
|
|
|
function testGetComputedStyleMsFilter() {
|
|
// Element with -ms-filter style set.
|
|
var e = goog.dom.getElement('msFilter');
|
|
|
|
if (goog.userAgent.IE) {
|
|
// IE always returns empty string for computed styles.
|
|
assertEquals('', goog.style.getComputedStyle(e, 'filter'));
|
|
} else {
|
|
// Non IE returns 'none' for filter as it is an SVG property
|
|
assertEquals('none', goog.style.getComputedStyle(e, 'filter'));
|
|
}
|
|
}
|
|
|
|
function testGetComputedStyleFilter() {
|
|
// Element with filter style set.
|
|
var e = goog.dom.getElement('filter');
|
|
|
|
if (goog.userAgent.IE) {
|
|
// IE always returns empty string for computed styles.
|
|
assertEquals('', goog.style.getComputedStyle(e, 'filter'));
|
|
} else {
|
|
// Non IE returns 'none' for filter as it is an SVG property
|
|
assertEquals('none', goog.style.getComputedStyle(e, 'filter'));
|
|
}
|
|
}
|
|
|
|
function testGetComputedPosition() {
|
|
assertEquals('position not set', 'static',
|
|
goog.style.getComputedPosition($('position-unset')));
|
|
assertEquals('position:relative in style attribute', 'relative',
|
|
goog.style.getComputedPosition($('style-position-relative')));
|
|
if (goog.userAgent.IE && !goog.dom.isCss1CompatMode()) {
|
|
assertEquals('position:fixed in style attribute', 'static',
|
|
goog.style.getComputedPosition($('style-position-fixed')));
|
|
} else {
|
|
assertEquals('position:fixed in style attribute', 'fixed',
|
|
goog.style.getComputedPosition($('style-position-fixed')));
|
|
}
|
|
assertEquals('position:absolute in css', 'absolute',
|
|
goog.style.getComputedPosition($('css-position-absolute')));
|
|
}
|
|
|
|
function testGetComputedOverflowXAndY() {
|
|
assertEquals('overflow-x:scroll in style attribute', 'scroll',
|
|
goog.style.getComputedOverflowX($('style-overflow-scroll')));
|
|
assertEquals('overflow-y:scroll in style attribute', 'scroll',
|
|
goog.style.getComputedOverflowY($('style-overflow-scroll')));
|
|
assertEquals('overflow-x:hidden in css', 'hidden',
|
|
goog.style.getComputedOverflowX($('css-overflow-hidden')));
|
|
assertEquals('overflow-y:hidden in css', 'hidden',
|
|
goog.style.getComputedOverflowY($('css-overflow-hidden')));
|
|
}
|
|
|
|
function testGetComputedZIndex() {
|
|
assertEquals('z-index:200 in style attribute', '200',
|
|
'' + goog.style.getComputedZIndex($('style-z-index-200')));
|
|
assertEquals('z-index:200 in css', '200',
|
|
'' + goog.style.getComputedZIndex($('css-z-index-200')));
|
|
}
|
|
|
|
function testGetComputedTextAlign() {
|
|
assertEquals('text-align:right in style attribute', 'right',
|
|
goog.style.getComputedTextAlign($('style-text-align-right')));
|
|
assertEquals(
|
|
'text-align:right inherited from parent', 'right',
|
|
goog.style.getComputedTextAlign($('style-text-align-right-inner')));
|
|
assertEquals('text-align:center in css', 'center',
|
|
goog.style.getComputedTextAlign($('css-text-align-center')));
|
|
}
|
|
|
|
function testGetComputedCursor() {
|
|
assertEquals('cursor:move in style attribute', 'move',
|
|
goog.style.getComputedCursor($('style-cursor-move')));
|
|
assertEquals('cursor:move inherited from parent', 'move',
|
|
goog.style.getComputedCursor($('style-cursor-move-inner')));
|
|
assertEquals('cursor:poiner in css', 'pointer',
|
|
goog.style.getComputedCursor($('css-cursor-pointer')));
|
|
}
|
|
|
|
function testGetBackgroundColor() {
|
|
var dest = $('bgcolorDest');
|
|
|
|
for (var i = 0; $('bgcolorTest' + i); i++) {
|
|
var src = $('bgcolorTest' + i);
|
|
var bgColor = goog.style.getBackgroundColor(src);
|
|
|
|
dest.style.backgroundColor = bgColor;
|
|
assertEquals('Background colors should be equal',
|
|
goog.style.getBackgroundColor(src),
|
|
goog.style.getBackgroundColor(dest));
|
|
|
|
try {
|
|
// goog.color.parse throws a generic exception if handed input it
|
|
// doesn't understand.
|
|
var c = goog.color.parse(bgColor);
|
|
assertEquals('rgb(255,0,0)', goog.color.hexToRgbStyle(c.hex));
|
|
} catch (e) {
|
|
// Internet Explorer is unable to parse colors correctly after test 4.
|
|
// Other browsers may vary, but all should be able to handle straight
|
|
// hex input.
|
|
assertFalse('Should be able to parse color "' + bgColor + '"', i < 5);
|
|
}
|
|
}
|
|
}
|
|
|
|
function testSetPosition() {
|
|
var el = $('testEl');
|
|
|
|
goog.style.setPosition(el, 100, 100);
|
|
assertEquals('100px', el.style.left);
|
|
assertEquals('100px', el.style.top);
|
|
|
|
goog.style.setPosition(el, '50px', '25px');
|
|
assertEquals('50px', el.style.left);
|
|
assertEquals('25px', el.style.top);
|
|
|
|
goog.style.setPosition(el, '10ex', '25px');
|
|
assertEquals('10ex', el.style.left);
|
|
assertEquals('25px', el.style.top);
|
|
|
|
goog.style.setPosition(el, '10%', '25%');
|
|
assertEquals('10%', el.style.left);
|
|
assertEquals('25%', el.style.top);
|
|
|
|
// ignores stupid units
|
|
goog.style.setPosition(el, 0, 0);
|
|
// TODO(user): IE errors if you set these values. Should we make setStyle
|
|
// catch these? Or leave it up to the app. Fixing the tests for now.
|
|
//goog.style.setPosition(el, '10rainbows', '25rainbows');
|
|
assertEquals('0px', el.style.left);
|
|
assertEquals('0px', el.style.top);
|
|
|
|
|
|
goog.style.setPosition(el, new goog.math.Coordinate(20, 40));
|
|
assertEquals('20px', el.style.left);
|
|
assertEquals('40px', el.style.top);
|
|
}
|
|
|
|
function testGetClientPositionAbsPositionElement() {
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '100px';
|
|
div.style.top = '200px';
|
|
document.body.appendChild(div);
|
|
var pos = goog.style.getClientPosition(div);
|
|
assertEquals(100, pos.x);
|
|
assertEquals(200, pos.y);
|
|
}
|
|
|
|
function testGetClientPositionNestedElements() {
|
|
var innerDiv = goog.dom.createDom('DIV');
|
|
innerDiv.style.position = 'relative';
|
|
innerDiv.style.left = '-10px';
|
|
innerDiv.style.top = '-10px';
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '150px';
|
|
div.style.top = '250px';
|
|
div.appendChild(innerDiv);
|
|
document.body.appendChild(div);
|
|
var pos = goog.style.getClientPosition(innerDiv);
|
|
assertEquals(140, pos.x);
|
|
assertEquals(240, pos.y);
|
|
}
|
|
|
|
function testGetClientPositionOfOffscreenElement() {
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '2000px';
|
|
div.style.top = '2000px';
|
|
div.style.width = '10px';
|
|
div.style.height = '10px';
|
|
document.body.appendChild(div);
|
|
|
|
try {
|
|
window.scroll(0, 0);
|
|
var pos = goog.style.getClientPosition(div);
|
|
assertEquals(2000, pos.x);
|
|
assertEquals(2000, pos.y);
|
|
|
|
// The following tests do not work in Gecko 1.8 and below, due to an
|
|
// obscure off-by-one bug in goog.style.getPageOffset. Same for IE.
|
|
if (!goog.userAgent.IE &&
|
|
!(goog.userAgent.GECKO && !goog.userAgent.isVersionOrHigher('1.9'))) {
|
|
window.scroll(1, 1);
|
|
var pos = goog.style.getClientPosition(div);
|
|
assertEquals(1999, pos.x);
|
|
assertRoughlyEquals(1999, pos.y, 0.5);
|
|
|
|
window.scroll(2, 2);
|
|
pos = goog.style.getClientPosition(div);
|
|
assertEquals(1998, pos.x);
|
|
assertRoughlyEquals(1998, pos.y, 0.5);
|
|
|
|
window.scroll(100, 100);
|
|
pos = goog.style.getClientPosition(div);
|
|
assertEquals(1900, pos.x);
|
|
assertRoughlyEquals(1900, pos.y, 0.5);
|
|
}
|
|
}
|
|
finally {
|
|
window.scroll(0, 0);
|
|
document.body.removeChild(div);
|
|
}
|
|
}
|
|
|
|
function testGetClientPositionOfOrphanElement() {
|
|
var orphanElem = document.createElement('DIV');
|
|
var pos = goog.style.getClientPosition(orphanElem);
|
|
assertEquals(0, pos.x);
|
|
assertEquals(0, pos.y);
|
|
}
|
|
|
|
function testGetClientPositionEvent() {
|
|
var mockEvent = {};
|
|
mockEvent.clientX = 100;
|
|
mockEvent.clientY = 200;
|
|
var pos = goog.style.getClientPosition(mockEvent);
|
|
assertEquals(100, pos.x);
|
|
assertEquals(200, pos.y);
|
|
}
|
|
|
|
function testGetClientPositionTouchEvent() {
|
|
var mockTouchEvent = {};
|
|
|
|
mockTouchEvent.targetTouches = [{}];
|
|
mockTouchEvent.targetTouches[0].clientX = 100;
|
|
mockTouchEvent.targetTouches[0].clientY = 200;
|
|
|
|
mockTouchEvent.touches = [{}];
|
|
mockTouchEvent.touches[0].clientX = 100;
|
|
mockTouchEvent.touches[0].clientY = 200;
|
|
|
|
var pos = goog.style.getClientPosition(mockTouchEvent);
|
|
assertEquals(100, pos.x);
|
|
assertEquals(200, pos.y);
|
|
}
|
|
|
|
function testGetClientPositionAbstractedTouchEvent() {
|
|
var e = new goog.events.BrowserEvent();
|
|
e.event_ = {};
|
|
e.event_.touches = [{}];
|
|
e.event_.touches[0].clientX = 100;
|
|
e.event_.touches[0].clientY = 200;
|
|
e.event_.targetTouches = [{}];
|
|
e.event_.targetTouches[0].clientX = 100;
|
|
e.event_.targetTouches[0].clientY = 200;
|
|
var pos = goog.style.getClientPosition(e);
|
|
assertEquals(100, pos.x);
|
|
assertEquals(200, pos.y);
|
|
}
|
|
|
|
function testGetPageOffsetAbsPositionedElement() {
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '100px';
|
|
div.style.top = '200px';
|
|
document.body.appendChild(div);
|
|
var pos = goog.style.getPageOffset(div);
|
|
assertEquals(100, pos.x);
|
|
assertEquals(200, pos.y);
|
|
}
|
|
|
|
function testGetPageOffsetNestedElements() {
|
|
var innerDiv = goog.dom.createDom('DIV');
|
|
innerDiv.style.position = 'relative';
|
|
innerDiv.style.left = '-10px';
|
|
innerDiv.style.top = '-10px';
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '150px';
|
|
div.style.top = '250px';
|
|
div.appendChild(innerDiv);
|
|
document.body.appendChild(div);
|
|
var pos = goog.style.getPageOffset(innerDiv);
|
|
assertRoughlyEquals(140, pos.x, 0.1);
|
|
assertRoughlyEquals(240, pos.y, 0.1);
|
|
}
|
|
|
|
function testGetPageOffsetWithBodyPadding() {
|
|
document.body.style.margin = '40px';
|
|
document.body.style.padding = '60px';
|
|
document.body.style.borderWidth = '70px';
|
|
try {
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '100px';
|
|
div.style.top = '200px';
|
|
// Margin will affect position, but padding and borders should not.
|
|
div.style.margin = '1px';
|
|
div.style.padding = '2px';
|
|
div.style.borderWidth = '3px';
|
|
document.body.appendChild(div);
|
|
var pos = goog.style.getPageOffset(div);
|
|
assertRoughlyEquals(101, pos.x, 0.1);
|
|
assertRoughlyEquals(201, pos.y, 0.1);
|
|
}
|
|
finally {
|
|
document.body.removeChild(div);
|
|
document.body.style.margin = '';
|
|
document.body.style.padding = '';
|
|
document.body.style.borderWidth = '';
|
|
}
|
|
}
|
|
|
|
function testGetPageOffsetWithDocumentElementPadding() {
|
|
document.documentElement.style.margin = '40px';
|
|
document.documentElement.style.padding = '60px';
|
|
document.documentElement.style.borderWidth = '70px';
|
|
try {
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '100px';
|
|
div.style.top = '200px';
|
|
// Margin will affect position, but padding and borders should not.
|
|
div.style.margin = '1px';
|
|
div.style.padding = '2px';
|
|
div.style.borderWidth = '3px';
|
|
document.body.appendChild(div);
|
|
var pos = goog.style.getPageOffset(div);
|
|
// FF3 (but not beyond) gets confused by document margins.
|
|
if (goog.userAgent.GECKO && goog.userAgent.isVersionOrHigher('1.9') &&
|
|
!goog.userAgent.isVersionOrHigher('1.9.1')) {
|
|
assertEquals(141, pos.x);
|
|
assertEquals(241, pos.y);
|
|
} else {
|
|
assertRoughlyEquals(101, pos.x, 0.1);
|
|
assertRoughlyEquals(201, pos.y, 0.1);
|
|
}
|
|
}
|
|
finally {
|
|
document.body.removeChild(div);
|
|
document.documentElement.style.margin = '';
|
|
document.documentElement.style.padding = '';
|
|
document.documentElement.style.borderWidth = '';
|
|
}
|
|
}
|
|
|
|
function testGetPageOffsetElementOffscreen() {
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '10000px';
|
|
div.style.top = '20000px';
|
|
document.body.appendChild(div);
|
|
window.scroll(0, 0);
|
|
try {
|
|
var pos = goog.style.getPageOffset(div);
|
|
assertEquals(10000, pos.x);
|
|
assertEquals(20000, pos.y);
|
|
|
|
// The following tests do not work in Gecko 1.8 and below, due to an
|
|
// obscure off-by-one bug in goog.style.getPageOffset. Same for IE.
|
|
if (!(goog.userAgent.IE) &&
|
|
!(goog.userAgent.GECKO && !goog.userAgent.isVersionOrHigher('1.9'))) {
|
|
window.scroll(1, 1);
|
|
pos = goog.style.getPageOffset(div);
|
|
assertEquals(10000, pos.x);
|
|
assertRoughlyEquals(20000, pos.y, 0.5);
|
|
|
|
window.scroll(1000, 2000);
|
|
pos = goog.style.getPageOffset(div);
|
|
assertEquals(10000, pos.x);
|
|
assertRoughlyEquals(20000, pos.y, 1);
|
|
|
|
window.scroll(10000, 20000);
|
|
pos = goog.style.getPageOffset(div);
|
|
assertEquals(10000, pos.x);
|
|
assertRoughlyEquals(20000, pos.y, 1);
|
|
}
|
|
}
|
|
// Undo changes.
|
|
finally {
|
|
document.body.removeChild(div);
|
|
window.scroll(0, 0);
|
|
}
|
|
}
|
|
|
|
function testGetPageOffsetFixedPositionElements() {
|
|
// Skip these tests in certain browsers.
|
|
// position:fixed is not supported in IE before version 7
|
|
if (!goog.userAgent.IE || !goog.userAgent.isVersionOrHigher('6')) {
|
|
// Test with a position fixed element
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'fixed';
|
|
div.style.top = '10px';
|
|
div.style.left = '10px';
|
|
document.body.appendChild(div);
|
|
var pos = goog.style.getPageOffset(div);
|
|
assertEquals(10, pos.x);
|
|
assertEquals(10, pos.y);
|
|
|
|
// Test with a position fixed element as parent
|
|
var innerDiv = goog.dom.createDom('DIV');
|
|
div = goog.dom.createDom('DIV');
|
|
div.style.position = 'fixed';
|
|
div.style.top = '10px';
|
|
div.style.left = '10px';
|
|
div.style.padding = '5px';
|
|
div.appendChild(innerDiv);
|
|
document.body.appendChild(div);
|
|
pos = goog.style.getPageOffset(innerDiv);
|
|
assertEquals(15, pos.x);
|
|
assertEquals(15, pos.y);
|
|
}
|
|
}
|
|
|
|
function testGetPositionTolerantToNoDocumentElementBorder() {
|
|
// In IE, removing the border on the document element undoes the normal
|
|
// 2-pixel offset. Ensure that we're correctly compensating for both cases.
|
|
try {
|
|
document.documentElement.style.borderWidth = '0';
|
|
var div = goog.dom.createDom('DIV');
|
|
div.style.position = 'absolute';
|
|
div.style.left = '100px';
|
|
div.style.top = '200px';
|
|
document.body.appendChild(div);
|
|
|
|
// Test all major positioning methods.
|
|
// Disabled for IE8 and below - IE8 returns dimensions multiplied by 100.
|
|
expectedFailures.expectFailureFor(
|
|
goog.userAgent.IE && !goog.userAgent.isVersionOrHigher(9));
|
|
try {
|
|
// Test all major positioning methods.
|
|
var pos = goog.style.getClientPosition(div);
|
|
assertEquals(100, pos.x);
|
|
assertRoughlyEquals(200, pos.y, .1);
|
|
var offset = goog.style.getPageOffset(div);
|
|
assertEquals(100, offset.x);
|
|
assertRoughlyEquals(200, offset.y, .1);
|
|
} catch (e) {
|
|
expectedFailures.handleException(e);
|
|
}
|
|
} finally {
|
|
document.documentElement.style.borderWidth = '';
|
|
}
|
|
}
|
|
|
|
function testSetSize() {
|
|
var el = $('testEl');
|
|
|
|
goog.style.setSize(el, 100, 100);
|
|
assertEquals('100px', el.style.width);
|
|
assertEquals('100px', el.style.height);
|
|
|
|
goog.style.setSize(el, '50px', '25px');
|
|
assertEquals('should be "50px"', '50px', el.style.width);
|
|
assertEquals('should be "25px"', '25px', el.style.height);
|
|
|
|
goog.style.setSize(el, '10ex', '25px');
|
|
assertEquals('10ex', el.style.width);
|
|
assertEquals('25px', el.style.height);
|
|
|
|
goog.style.setSize(el, '10%', '25%');
|
|
assertEquals('10%', el.style.width);
|
|
assertEquals('25%', el.style.height);
|
|
|
|
// ignores stupid units
|
|
goog.style.setSize(el, 0, 0);
|
|
// TODO(user): IE errors if you set these values. Should we make setStyle
|
|
// catch these? Or leave it up to the app. Fixing the tests for now.
|
|
//goog.style.setSize(el, '10rainbows', '25rainbows');
|
|
assertEquals('0px', el.style.width);
|
|
assertEquals('0px', el.style.height);
|
|
|
|
goog.style.setSize(el, new goog.math.Size(20, 40));
|
|
assertEquals('20px', el.style.width);
|
|
assertEquals('40px', el.style.height);
|
|
}
|
|
|
|
function testSetWidthAndHeight() {
|
|
var el = $('testEl');
|
|
|
|
// Replicate all of the setSize tests above.
|
|
|
|
goog.style.setWidth(el, 100);
|
|
goog.style.setHeight(el, 100);
|
|
assertEquals('100px', el.style.width);
|
|
assertEquals('100px', el.style.height);
|
|
|
|
goog.style.setWidth(el, '50px');
|
|
goog.style.setHeight(el, '25px');
|
|
assertEquals('should be "50px"', '50px', el.style.width);
|
|
assertEquals('should be "25px"', '25px', el.style.height);
|
|
|
|
goog.style.setWidth(el, '10ex');
|
|
goog.style.setHeight(el, '25px');
|
|
assertEquals('10ex', el.style.width);
|
|
assertEquals('25px', el.style.height);
|
|
|
|
goog.style.setWidth(el, '10%');
|
|
goog.style.setHeight(el, '25%');
|
|
assertEquals('10%', el.style.width);
|
|
assertEquals('25%', el.style.height);
|
|
|
|
goog.style.setWidth(el, 0);
|
|
goog.style.setHeight(el, 0);
|
|
assertEquals('0px', el.style.width);
|
|
assertEquals('0px', el.style.height);
|
|
|
|
goog.style.setWidth(el, 20);
|
|
goog.style.setHeight(el, 40);
|
|
assertEquals('20px', el.style.width);
|
|
assertEquals('40px', el.style.height);
|
|
|
|
// Additional tests testing each separately.
|
|
goog.style.setWidth(el, '');
|
|
goog.style.setHeight(el, '');
|
|
assertEquals('', el.style.width);
|
|
assertEquals('', el.style.height);
|
|
|
|
goog.style.setHeight(el, 20);
|
|
assertEquals('', el.style.width);
|
|
assertEquals('20px', el.style.height);
|
|
|
|
goog.style.setWidth(el, 40);
|
|
assertEquals('40px', el.style.width);
|
|
assertEquals('20px', el.style.height);
|
|
}
|
|
|
|
function testGetSize() {
|
|
var el = $('testEl');
|
|
goog.style.setSize(el, 100, 100);
|
|
|
|
var dims = goog.style.getSize(el);
|
|
assertEquals(100, dims.width);
|
|
assertEquals(100, dims.height);
|
|
|
|
goog.style.setStyle(el, 'display', 'none');
|
|
dims = goog.style.getSize(el);
|
|
assertEquals(100, dims.width);
|
|
assertEquals(100, dims.height);
|
|
|
|
el = $('testEl5');
|
|
goog.style.setSize(el, 100, 100);
|
|
dims = goog.style.getSize(el);
|
|
assertEquals(100, dims.width);
|
|
assertEquals(100, dims.height);
|
|
|
|
el = $('span0');
|
|
dims = goog.style.getSize(el);
|
|
assertNotEquals(0, dims.width);
|
|
assertNotEquals(0, dims.height);
|
|
|
|
el = $('table1');
|
|
dims = goog.style.getSize(el);
|
|
assertNotEquals(0, dims.width);
|
|
assertNotEquals(0, dims.height);
|
|
|
|
el = $('td1');
|
|
dims = goog.style.getSize(el);
|
|
assertNotEquals(0, dims.width);
|
|
assertNotEquals(0, dims.height);
|
|
|
|
el = $('li1');
|
|
dims = goog.style.getSize(el);
|
|
assertNotEquals(0, dims.width);
|
|
assertNotEquals(0, dims.height);
|
|
|
|
el = goog.dom.getElementsByTagNameAndClass('html')[0];
|
|
dims = goog.style.getSize(el);
|
|
assertNotEquals(0, dims.width);
|
|
assertNotEquals(0, dims.height);
|
|
|
|
el = goog.dom.getElementsByTagNameAndClass('body')[0];
|
|
dims = goog.style.getSize(el);
|
|
assertNotEquals(0, dims.width);
|
|
assertNotEquals(0, dims.height);
|
|
}
|
|
|
|
function testGetSizeSvgElements() {
|
|
var svgEl = document.createElementNS &&
|
|
document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
if (!svgEl || svgEl.getAttribute('transform') == '' ||
|
|
(goog.userAgent.WEBKIT && !goog.userAgent.isVersionOrHigher(534.8))) {
|
|
// SVG not supported, or getBoundingClientRect not supported on SVG
|
|
// elements.
|
|
return;
|
|
}
|
|
|
|
document.body.appendChild(svgEl);
|
|
var el = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
|
el.setAttribute('x', 10);
|
|
el.setAttribute('y', 10);
|
|
el.setAttribute('width', 32);
|
|
el.setAttribute('height', 21);
|
|
el.setAttribute('fill', '#000');
|
|
|
|
svgEl.appendChild(el);
|
|
|
|
var dims = goog.style.getSize(el);
|
|
assertEquals(32, dims.width);
|
|
assertRoughlyEquals(21, dims.height, 0.01);
|
|
|
|
dims = goog.style.getSize(svgEl);
|
|
if (goog.userAgent.WEBKIT) {
|
|
// The size of the <svg> will be the viewport size on WebKit browsers.
|
|
assertTrue(dims.width >= 32);
|
|
assertTrue(dims.height >= 21);
|
|
} else {
|
|
assertEquals(32, dims.width);
|
|
assertRoughlyEquals(21, dims.height, 0.01);
|
|
}
|
|
|
|
el.style.visibility = 'none';
|
|
|
|
dims = goog.style.getSize(el);
|
|
assertEquals(32, dims.width);
|
|
assertRoughlyEquals(21, dims.height, 0.01);
|
|
|
|
dims = goog.style.getSize(svgEl);
|
|
if (goog.userAgent.WEBKIT) {
|
|
// The size of the <svg> will be the viewport size on WebKit browsers.
|
|
assertTrue(dims.width >= 32);
|
|
assertTrue(dims.height >= 21);
|
|
} else {
|
|
assertEquals(32, dims.width);
|
|
assertRoughlyEquals(21, dims.height, 0.01);
|
|
}
|
|
}
|
|
|
|
function testGetSizeInlineBlock() {
|
|
var el = $('height-test-inner');
|
|
var dims = goog.style.getSize(el);
|
|
assertNotEquals(0, dims.height);
|
|
}
|
|
|
|
function testGetSizeTransformedRotated() {
|
|
if (!hasWebkitTransform()) return;
|
|
|
|
var el = $('rotated');
|
|
goog.style.setSize(el, 300, 200);
|
|
|
|
var noRotateDims = goog.style.getTransformedSize(el);
|
|
assertEquals(300, noRotateDims.width);
|
|
assertEquals(200, noRotateDims.height);
|
|
|
|
el.style.webkitTransform = 'rotate(180deg)';
|
|
var rotate180Dims = goog.style.getTransformedSize(el);
|
|
assertEquals(300, rotate180Dims.width);
|
|
assertEquals(200, rotate180Dims.height);
|
|
|
|
el.style.webkitTransform = 'rotate(90deg)';
|
|
var rotate90ClockwiseDims = goog.style.getTransformedSize(el);
|
|
assertEquals(200, rotate90ClockwiseDims.width);
|
|
assertEquals(300, rotate90ClockwiseDims.height);
|
|
|
|
el.style.webkitTransform = 'rotate(-90deg)';
|
|
var rotate90CounterClockwiseDims = goog.style.getTransformedSize(el);
|
|
assertEquals(200, rotate90CounterClockwiseDims.width);
|
|
assertEquals(300, rotate90CounterClockwiseDims.height);
|
|
}
|
|
|
|
function testGetSizeTransformedScaled() {
|
|
if (!hasWebkitTransform()) return;
|
|
|
|
var el = $('scaled');
|
|
goog.style.setSize(el, 300, 200);
|
|
|
|
var noScaleDims = goog.style.getTransformedSize(el);
|
|
assertEquals(300, noScaleDims.width);
|
|
assertEquals(200, noScaleDims.height);
|
|
|
|
el.style.webkitTransform = 'scale(2, 0.5)';
|
|
var scaledDims = goog.style.getTransformedSize(el);
|
|
assertEquals(600, scaledDims.width);
|
|
assertEquals(100, scaledDims.height);
|
|
}
|
|
|
|
function hasWebkitTransform() {
|
|
return 'webkitTransform' in document.body.style;
|
|
}
|
|
|
|
function testGetSizeOfOrphanElement() {
|
|
var orphanElem = document.createElement('DIV');
|
|
var size = goog.style.getSize(orphanElem);
|
|
assertEquals(0, size.width);
|
|
assertEquals(0, size.height);
|
|
}
|
|
|
|
function testGetBounds() {
|
|
var el = $('testEl');
|
|
|
|
var dims = goog.style.getSize(el);
|
|
var pos = goog.style.getPageOffset(el);
|
|
|
|
var rect = goog.style.getBounds(el);
|
|
|
|
// Relies on getSize and getPageOffset being correct.
|
|
assertEquals(dims.width, rect.width);
|
|
assertEquals(dims.height, rect.height);
|
|
assertEquals(pos.x, rect.left);
|
|
assertEquals(pos.y, rect.top);
|
|
}
|
|
|
|
function testInstallStyles() {
|
|
var el = $('installTest0');
|
|
var originalBackground = goog.style.getBackgroundColor(el);
|
|
|
|
// Uses background-color because it's easy to get the computed value
|
|
var result = goog.style.installStyles(
|
|
'#installTest0 { background-color: rgb(255, 192, 203); }');
|
|
|
|
// For some odd reason, the change in computed style does not register on
|
|
// Chrome 19 unless the style property is touched. The behavior goes
|
|
// away again in Chrome 20.
|
|
// TODO(nnaze): Remove special caseing once we switch the testing image
|
|
// to Chrome 20 or higher.
|
|
if (isChrome19()) {
|
|
el.style.display = '';
|
|
}
|
|
|
|
assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el));
|
|
|
|
goog.style.uninstallStyles(result);
|
|
assertEquals(originalBackground, goog.style.getBackgroundColor(el));
|
|
}
|
|
|
|
function testSetStyles() {
|
|
var el = $('installTest1');
|
|
|
|
// Change to pink
|
|
var ss = goog.style.installStyles(
|
|
'#installTest1 { background-color: rgb(255, 192, 203); }');
|
|
|
|
// For some odd reason, the change in computed style does not register on
|
|
// Chrome 19 unless the style property is touched. The behavior goes
|
|
// away again in Chrome 20.
|
|
// TODO(nnaze): Remove special caseing once we switch the testing image
|
|
// to Chrome 20 or higher.
|
|
if (isChrome19()) {
|
|
el.style.display = '';
|
|
}
|
|
|
|
assertColorRgbEquals('rgb(255,192,203)', goog.style.getBackgroundColor(el));
|
|
|
|
// Now change to orange
|
|
goog.style.setStyles(ss,
|
|
'#installTest1 { background-color: rgb(255, 255, 0); }');
|
|
assertColorRgbEquals('rgb(255,255,0)', goog.style.getBackgroundColor(el));
|
|
}
|
|
|
|
function assertColorRgbEquals(expected, actual) {
|
|
assertEquals(expected,
|
|
goog.color.hexToRgbStyle(goog.color.parse(actual).hex));
|
|
}
|
|
|
|
function isChrome19() {
|
|
return goog.userAgent.product.CHROME &&
|
|
goog.string.startsWith(goog.userAgent.product.VERSION, '19.');
|
|
}
|
|
|
|
function testIsRightToLeft() {
|
|
assertFalse(goog.style.isRightToLeft($('rtl1')));
|
|
assertTrue(goog.style.isRightToLeft($('rtl2')));
|
|
assertFalse(goog.style.isRightToLeft($('rtl3')));
|
|
assertFalse(goog.style.isRightToLeft($('rtl4')));
|
|
assertTrue(goog.style.isRightToLeft($('rtl5')));
|
|
assertFalse(goog.style.isRightToLeft($('rtl6')));
|
|
assertTrue(goog.style.isRightToLeft($('rtl7')));
|
|
assertFalse(goog.style.isRightToLeft($('rtl8')));
|
|
assertTrue(goog.style.isRightToLeft($('rtl9')));
|
|
assertFalse(goog.style.isRightToLeft($('rtl10')));
|
|
}
|
|
|
|
function testPosWithAbsoluteAndScroll() {
|
|
var el = $('pos-scroll-abs');
|
|
var el1 = $('pos-scroll-abs-1');
|
|
var el2 = $('pos-scroll-abs-2');
|
|
|
|
el1.scrollTop = 200;
|
|
var pos = goog.style.getPageOffset(el2);
|
|
|
|
assertEquals(200, pos.x);
|
|
// Don't bother with IE in quirks mode
|
|
if (!goog.userAgent.IE || document.compatMode == 'CSS1Compat') {
|
|
assertRoughlyEquals(300, pos.y, .1);
|
|
}
|
|
}
|
|
|
|
function testPosWithAbsoluteAndWindowScroll() {
|
|
window.scrollBy(0, 200);
|
|
var el = $('abs-upper-left');
|
|
var pos = goog.style.getPageOffset(el);
|
|
assertRoughlyEquals('Top should be about 0', 0, pos.y, 0.1);
|
|
}
|
|
|
|
function testGetBorderBoxSize() {
|
|
// Strict mode
|
|
var getBorderBoxSize = goog.style.getBorderBoxSize;
|
|
|
|
var el = $('size-a');
|
|
var rect = getBorderBoxSize(el);
|
|
assertEquals('width:100px', 100, rect.width);
|
|
assertEquals('height:100px', 100, rect.height);
|
|
|
|
// with border: 10px
|
|
el = $('size-b');
|
|
rect = getBorderBoxSize(el);
|
|
assertEquals('width:100px;border:10px', isBorderBox ? 100 : 120, rect.width);
|
|
assertEquals('height:100px;border:10px', isBorderBox ? 100 : 120,
|
|
rect.height);
|
|
|
|
// with border: 10px; padding: 10px
|
|
el = $('size-c');
|
|
rect = getBorderBoxSize(el);
|
|
assertEquals('width:100px;border:10px;padding:10px',
|
|
isBorderBox ? 100 : 140, rect.width);
|
|
assertEquals('height:100px;border:10px;padding:10px',
|
|
isBorderBox ? 100 : 140, rect.height);
|
|
|
|
// size, padding and borders are all in non pixel units
|
|
// all we test here is that we get a number out
|
|
el = $('size-d');
|
|
rect = getBorderBoxSize(el);
|
|
assertEquals('number', typeof rect.width);
|
|
assertEquals('number', typeof rect.height);
|
|
assertFalse(isNaN(rect.width));
|
|
assertFalse(isNaN(rect.height));
|
|
}
|
|
|
|
function testGetContentBoxSize() {
|
|
// Strict mode
|
|
var getContentBoxSize = goog.style.getContentBoxSize;
|
|
|
|
var el = $('size-a');
|
|
var rect = getContentBoxSize(el);
|
|
assertEquals('width:100px', 100, rect.width);
|
|
assertEquals('height:100px', 100, rect.height);
|
|
|
|
// with border: 10px
|
|
el = $('size-b');
|
|
rect = getContentBoxSize(el);
|
|
assertEquals('width:100px;border:10px',
|
|
isBorderBox ? 80 : 100, rect.width);
|
|
assertEquals('height:100px;border:10px',
|
|
isBorderBox ? 80 : 100, rect.height);
|
|
|
|
// with border: 10px; padding: 10px
|
|
el = $('size-c');
|
|
rect = getContentBoxSize(el);
|
|
assertEquals('width:100px;border:10px;padding:10px',
|
|
isBorderBox ? 60 : 100, rect.width);
|
|
assertEquals('height:100px;border:10px;padding:10px',
|
|
isBorderBox ? 60 : 100, rect.height);
|
|
|
|
// size, padding and borders are all in non pixel units
|
|
// all we test here is that we get a number out
|
|
el = $('size-d');
|
|
rect = getContentBoxSize(el);
|
|
assertEquals('number', typeof rect.width);
|
|
assertEquals('number', typeof rect.height);
|
|
assertFalse(isNaN(rect.width));
|
|
assertFalse(isNaN(rect.height));
|
|
|
|
// test whether getContentBoxSize works when width and height
|
|
// aren't explicitly set, but the default of 'auto'.
|
|
// 'size-f' has no margin, border, or padding, so offsetWidth/Height
|
|
// should match the content box size
|
|
el = $('size-f');
|
|
rect = getContentBoxSize(el);
|
|
assertEquals(el.offsetWidth, rect.width);
|
|
assertEquals(el.offsetHeight, rect.height);
|
|
}
|
|
|
|
function testSetBorderBoxSize() {
|
|
// Strict mode
|
|
var el = $('size-e');
|
|
var Size = goog.math.Size;
|
|
var setBorderBoxSize = goog.style.setBorderBoxSize;
|
|
|
|
// Clean up
|
|
// style element has 100x100, no border and no padding
|
|
el.style.padding = '';
|
|
el.style.margin = '';
|
|
el.style.borderWidth = '';
|
|
el.style.width = '';
|
|
el.style.height = '';
|
|
|
|
setBorderBoxSize(el, new Size(100, 100));
|
|
|
|
assertEquals(100, el.offsetWidth);
|
|
assertEquals(100, el.offsetHeight);
|
|
|
|
el.style.borderWidth = '10px';
|
|
setBorderBoxSize(el, new Size(100, 100));
|
|
|
|
assertEquals('width:100px;border:10px', 100, el.offsetWidth);
|
|
assertEquals('height:100px;border:10px', 100, el.offsetHeight);
|
|
|
|
el.style.padding = '10px';
|
|
setBorderBoxSize(el, new Size(100, 100));
|
|
assertEquals(100, el.offsetWidth);
|
|
assertEquals(100, el.offsetHeight);
|
|
|
|
el.style.borderWidth = '0';
|
|
setBorderBoxSize(el, new Size(100, 100));
|
|
assertEquals(100, el.offsetWidth);
|
|
assertEquals(100, el.offsetHeight);
|
|
|
|
if (goog.userAgent.GECKO) {
|
|
assertEquals('border-box', el.style.MozBoxSizing);
|
|
} else if (goog.userAgent.WEBKIT) {
|
|
assertEquals('border-box', el.style.WebkitBoxSizing);
|
|
} else if (goog.userAgent.OPERA ||
|
|
goog.userAgent.IE && goog.userAgent.isDocumentModeOrHigher(8)) {
|
|
assertEquals('border-box', el.style.boxSizing);
|
|
}
|
|
|
|
// Try a negative width/height.
|
|
setBorderBoxSize(el, new Size(-10, -10));
|
|
|
|
// Setting the border box smaller than the borders will just give you
|
|
// a content box of size 0.
|
|
// NOTE(nicksantos): I'm not really sure why IE7 is special here.
|
|
var isIeLt8Quirks = goog.userAgent.IE &&
|
|
!goog.userAgent.isDocumentModeOrHigher(8) &&
|
|
!goog.dom.isCss1CompatMode();
|
|
assertEquals(20, el.offsetWidth);
|
|
assertEquals(isIeLt8Quirks ? 39 : 20, el.offsetHeight);
|
|
}
|
|
|
|
function testSetContentBoxSize() {
|
|
// Strict mode
|
|
var el = $('size-e');
|
|
var Size = goog.math.Size;
|
|
var setContentBoxSize = goog.style.setContentBoxSize;
|
|
|
|
// Clean up
|
|
// style element has 100x100, no border and no padding
|
|
el.style.padding = '';
|
|
el.style.margin = '';
|
|
el.style.borderWidth = '';
|
|
el.style.width = '';
|
|
el.style.height = '';
|
|
|
|
setContentBoxSize(el, new Size(100, 100));
|
|
|
|
assertEquals(100, el.offsetWidth);
|
|
assertEquals(100, el.offsetHeight);
|
|
|
|
el.style.borderWidth = '10px';
|
|
setContentBoxSize(el, new Size(100, 100));
|
|
assertEquals('width:100px;border-width:10px', 120, el.offsetWidth);
|
|
assertEquals('height:100px;border-width:10px', 120, el.offsetHeight);
|
|
|
|
el.style.padding = '10px';
|
|
setContentBoxSize(el, new Size(100, 100));
|
|
assertEquals('width:100px;border-width:10px;padding:10px',
|
|
140, el.offsetWidth);
|
|
assertEquals('height:100px;border-width:10px;padding:10px',
|
|
140, el.offsetHeight);
|
|
|
|
el.style.borderWidth = '0';
|
|
setContentBoxSize(el, new Size(100, 100));
|
|
assertEquals('width:100px;padding:10px', 120, el.offsetWidth);
|
|
assertEquals('height:100px;padding:10px', 120, el.offsetHeight);
|
|
|
|
if (goog.userAgent.GECKO) {
|
|
assertEquals('content-box', el.style.MozBoxSizing);
|
|
} else if (goog.userAgent.WEBKIT) {
|
|
assertEquals('content-box', el.style.WebkitBoxSizing);
|
|
} else if (goog.userAgent.OPERA ||
|
|
goog.userAgent.IE && goog.userAgent.isDocumentModeOrHigher(8)) {
|
|
assertEquals('content-box', el.style.boxSizing);
|
|
}
|
|
|
|
// Try a negative width/height.
|
|
setContentBoxSize(el, new Size(-10, -10));
|
|
|
|
// NOTE(nicksantos): I'm not really sure why IE7 is special here.
|
|
var isIeLt8Quirks = goog.userAgent.IE &&
|
|
!goog.userAgent.isDocumentModeOrHigher('8') &&
|
|
!goog.dom.isCss1CompatMode();
|
|
assertEquals(20, el.offsetWidth);
|
|
assertEquals(isIeLt8Quirks ? 39 : 20, el.offsetHeight);
|
|
}
|
|
|
|
function testGetPaddingBox() {
|
|
// Strict mode
|
|
var el = $('size-e');
|
|
var Size = goog.math.Size;
|
|
var getPaddingBox = goog.style.getPaddingBox;
|
|
|
|
// Clean up
|
|
// style element has 100x100, no border and no padding
|
|
el.style.padding = '';
|
|
el.style.margin = '';
|
|
el.style.borderWidth = '';
|
|
el.style.width = '';
|
|
el.style.height = '';
|
|
|
|
el.style.padding = '10px';
|
|
var rect = getPaddingBox(el);
|
|
assertEquals(10, rect.left);
|
|
assertEquals(10, rect.right);
|
|
assertEquals(10, rect.top);
|
|
assertEquals(10, rect.bottom);
|
|
|
|
el.style.padding = '0';
|
|
rect = getPaddingBox(el);
|
|
assertEquals(0, rect.left);
|
|
assertEquals(0, rect.right);
|
|
assertEquals(0, rect.top);
|
|
assertEquals(0, rect.bottom);
|
|
|
|
el.style.padding = '1px 2px 3px 4px';
|
|
rect = getPaddingBox(el);
|
|
assertEquals(1, rect.top);
|
|
assertEquals(2, rect.right);
|
|
assertEquals(3, rect.bottom);
|
|
assertEquals(4, rect.left);
|
|
|
|
el.style.padding = '1mm 2em 3ex 4%';
|
|
rect = getPaddingBox(el);
|
|
assertFalse(isNaN(rect.top));
|
|
assertFalse(isNaN(rect.right));
|
|
assertFalse(isNaN(rect.bottom));
|
|
assertFalse(isNaN(rect.left));
|
|
assertTrue(rect.top >= 0);
|
|
assertTrue(rect.right >= 0);
|
|
assertTrue(rect.bottom >= 0);
|
|
assertTrue(rect.left >= 0);
|
|
}
|
|
|
|
function testGetPaddingBoxUnattached() {
|
|
var el = document.createElement('div');
|
|
var box = goog.style.getPaddingBox(el);
|
|
if (goog.userAgent.WEBKIT) {
|
|
assertTrue(isNaN(box.top));
|
|
assertTrue(isNaN(box.right));
|
|
assertTrue(isNaN(box.bottom));
|
|
assertTrue(isNaN(box.left));
|
|
} else {
|
|
assertObjectEquals(new goog.math.Box(0, 0, 0, 0), box);
|
|
}
|
|
}
|
|
|
|
function testGetMarginBox() {
|
|
// Strict mode
|
|
var el = $('size-e');
|
|
var Size = goog.math.Size;
|
|
var getMarginBox = goog.style.getMarginBox;
|
|
|
|
// Clean up
|
|
// style element has 100x100, no border and no padding
|
|
el.style.padding = '';
|
|
el.style.margin = '';
|
|
el.style.borderWidth = '';
|
|
el.style.width = '';
|
|
el.style.height = '';
|
|
|
|
el.style.margin = '10px';
|
|
var rect = getMarginBox(el);
|
|
assertEquals(10, rect.left);
|
|
// In webkit the right margin is the calculated distance from right edge and
|
|
// not the computed right margin so it is not reliable.
|
|
// See https://bugs.webkit.org/show_bug.cgi?id=19828
|
|
if (!goog.userAgent.WEBKIT) {
|
|
assertEquals(10, rect.right);
|
|
}
|
|
assertEquals(10, rect.top);
|
|
assertEquals(10, rect.bottom);
|
|
|
|
el.style.margin = '0';
|
|
rect = getMarginBox(el);
|
|
assertEquals(0, rect.left);
|
|
// In webkit the right margin is the calculated distance from right edge and
|
|
// not the computed right margin so it is not reliable.
|
|
// See https://bugs.webkit.org/show_bug.cgi?id=19828
|
|
if (!goog.userAgent.WEBKIT) {
|
|
assertEquals(0, rect.right);
|
|
}
|
|
assertEquals(0, rect.top);
|
|
assertEquals(0, rect.bottom);
|
|
|
|
el.style.margin = '1px 2px 3px 4px';
|
|
rect = getMarginBox(el);
|
|
assertEquals(1, rect.top);
|
|
// In webkit the right margin is the calculated distance from right edge and
|
|
// not the computed right margin so it is not reliable.
|
|
// See https://bugs.webkit.org/show_bug.cgi?id=19828
|
|
if (!goog.userAgent.WEBKIT) {
|
|
assertEquals(2, rect.right);
|
|
}
|
|
assertEquals(3, rect.bottom);
|
|
assertEquals(4, rect.left);
|
|
|
|
el.style.margin = '1mm 2em 3ex 4%';
|
|
rect = getMarginBox(el);
|
|
assertFalse(isNaN(rect.top));
|
|
assertFalse(isNaN(rect.right));
|
|
assertFalse(isNaN(rect.bottom));
|
|
assertFalse(isNaN(rect.left));
|
|
assertTrue(rect.top >= 0);
|
|
// In webkit the right margin is the calculated distance from right edge and
|
|
// not the computed right margin so it is not reliable.
|
|
// See https://bugs.webkit.org/show_bug.cgi?id=19828
|
|
if (!goog.userAgent.WEBKIT) {
|
|
assertTrue(rect.right >= 0);
|
|
}
|
|
assertTrue(rect.bottom >= 0);
|
|
assertTrue(rect.left >= 0);
|
|
}
|
|
|
|
function testGetBorderBox() {
|
|
// Strict mode
|
|
var el = $('size-e');
|
|
var Size = goog.math.Size;
|
|
var getBorderBox = goog.style.getBorderBox;
|
|
|
|
// Clean up
|
|
// style element has 100x100, no border and no padding
|
|
el.style.padding = '';
|
|
el.style.margin = '';
|
|
el.style.borderWidth = '';
|
|
el.style.width = '';
|
|
el.style.height = '';
|
|
|
|
el.style.borderWidth = '10px';
|
|
var rect = getBorderBox(el);
|
|
assertEquals(10, rect.left);
|
|
assertEquals(10, rect.right);
|
|
assertEquals(10, rect.top);
|
|
assertEquals(10, rect.bottom);
|
|
|
|
el.style.borderWidth = '0';
|
|
rect = getBorderBox(el);
|
|
assertEquals(0, rect.left);
|
|
assertEquals(0, rect.right);
|
|
assertEquals(0, rect.top);
|
|
assertEquals(0, rect.bottom);
|
|
|
|
el.style.borderWidth = '1px 2px 3px 4px';
|
|
rect = getBorderBox(el);
|
|
assertEquals(1, rect.top);
|
|
assertEquals(2, rect.right);
|
|
assertEquals(3, rect.bottom);
|
|
assertEquals(4, rect.left);
|
|
|
|
// % does not work for border widths in IE
|
|
el.style.borderWidth = '1mm 2em 3ex 4pt';
|
|
rect = getBorderBox(el);
|
|
assertFalse(isNaN(rect.top));
|
|
assertFalse(isNaN(rect.right));
|
|
assertFalse(isNaN(rect.bottom));
|
|
assertFalse(isNaN(rect.left));
|
|
assertTrue(rect.top >= 0);
|
|
assertTrue(rect.right >= 0);
|
|
assertTrue(rect.bottom >= 0);
|
|
assertTrue(rect.left >= 0);
|
|
|
|
el.style.borderWidth = 'thin medium thick 1px';
|
|
rect = getBorderBox(el);
|
|
assertFalse(isNaN(rect.top));
|
|
assertFalse(isNaN(rect.right));
|
|
assertFalse(isNaN(rect.bottom));
|
|
assertFalse(isNaN(rect.left));
|
|
assertTrue(rect.top >= 0);
|
|
assertTrue(rect.right >= 0);
|
|
assertTrue(rect.bottom >= 0);
|
|
assertTrue(rect.left >= 0);
|
|
}
|
|
|
|
function testGetFontFamily() {
|
|
// I tried to use common fonts for these tests. It's possible the test fails
|
|
// because the testing platform doesn't have one of these fonts installed:
|
|
// Comic Sans MS or Century Schoolbook L
|
|
// Times
|
|
// Helvetica
|
|
|
|
var tmpFont = goog.style.getFontFamily($('font-tag'));
|
|
assertTrue('FontFamily should be detectable when set via <font face>',
|
|
'Times' == tmpFont || 'Times New Roman' == tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('small-text'));
|
|
assertTrue('Multiword fonts should be reported with quotes stripped.',
|
|
'Comic Sans MS' == tmpFont ||
|
|
'Century Schoolbook L' == tmpFont);
|
|
// Firefox fails this test & retuns a generic 'monospace' instead of the
|
|
// actually displayed font (e.g., "Times New").
|
|
//tmpFont = goog.style.getFontFamily($('pre-font'));
|
|
//assertEquals('<pre> tags should use a fixed-width font',
|
|
// 'Times New',
|
|
// tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('inherit-font'));
|
|
assertEquals('Explicitly inherited fonts should be detectable',
|
|
'Helvetica',
|
|
tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('times-font-family'));
|
|
assertEquals('Font-family set via style attribute should be detected',
|
|
'Times',
|
|
tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('bold-font'));
|
|
assertEquals('Implicitly inherited font should be detected',
|
|
'Helvetica',
|
|
tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('css-html-tag-redefinition'));
|
|
assertEquals('HTML tag CSS rewrites should be detected',
|
|
'Times',
|
|
tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('no-text-font-styles'));
|
|
assertEquals('Font family should exist even with no text',
|
|
'Helvetica',
|
|
tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('icon-font'));
|
|
assertNotEquals('icon is a special font-family value',
|
|
'icon',
|
|
tmpFont.toLowerCase());
|
|
tmpFont = goog.style.getFontFamily($('font-style-badfont'));
|
|
// Firefox fails this test and reports the specified "badFont", which is
|
|
// obviously not displayed.
|
|
//assertEquals('Invalid fonts should not be returned',
|
|
// 'Helvetica',
|
|
// tmpFont);
|
|
tmpFont = goog.style.getFontFamily($('img-font-test'));
|
|
assertTrue('Even img tags should inherit the document body\'s font',
|
|
tmpFont != '');
|
|
tmpFont = goog.style.getFontFamily($('nested-font'));
|
|
assertEquals('An element with nested content should be unaffected.',
|
|
'Arial',
|
|
tmpFont);
|
|
}
|
|
|
|
function testGetFontSize() {
|
|
assertEquals('Font size should be determined even without any text',
|
|
30,
|
|
goog.style.getFontSize($('no-text-font-styles')));
|
|
assertEquals('A 5em font should be 5x larger than its parent.',
|
|
150,
|
|
goog.style.getFontSize($('css-html-tag-redefinition')));
|
|
assertTrue('Setting font size=-1 should result in a positive font size.',
|
|
goog.style.getFontSize($('font-tag')) > 0);
|
|
assertEquals('Inheriting a 50% font-size should have no additional effect',
|
|
goog.style.getFontSize($('font-style-badfont')),
|
|
goog.style.getFontSize($('inherit-50pct-font')));
|
|
assertTrue('In pretty much any display, 3in should be > 8px',
|
|
goog.style.getFontSize($('times-font-family')) >
|
|
goog.style.getFontSize($('no-text-font-styles')));
|
|
assertTrue('With no applied styles, font-size should still be defined.',
|
|
goog.style.getFontSize($('no-font-style')) > 0);
|
|
assertEquals('50% of 30px is 15',
|
|
15,
|
|
goog.style.getFontSize($('font-style-badfont')));
|
|
assertTrue('x-small text should be smaller than small text',
|
|
goog.style.getFontSize($('x-small-text')) <
|
|
goog.style.getFontSize($('small-text')));
|
|
// IE fails this test, the decimal portion of px lengths isn't reported
|
|
// by getCascadedStyle. Firefox passes, but only because it ignores the
|
|
// decimals altogether.
|
|
//assertEquals('12.5px should be the same as 0.5em nested in a 25px node.',
|
|
// goog.style.getFontSize($('font-size-12-point-5-px')),
|
|
// goog.style.getFontSize($('font-size-50-pct-of-25-px')));
|
|
|
|
assertEquals('Font size should not doubly count em values',
|
|
2, goog.style.getFontSize($('em-font-size')));
|
|
}
|
|
|
|
function testGetLengthUnits() {
|
|
assertEquals('px', goog.style.getLengthUnits('15px'));
|
|
assertEquals('%', goog.style.getLengthUnits('99%'));
|
|
assertNull(goog.style.getLengthUnits(''));
|
|
}
|
|
|
|
function testParseStyleAttribute() {
|
|
var css = 'left: 0px; text-align: center';
|
|
var expected = {'left': '0px', 'textAlign': 'center'};
|
|
|
|
assertObjectEquals(expected, goog.style.parseStyleAttribute(css));
|
|
}
|
|
|
|
function testToStyleAttribute() {
|
|
var object = {'left': '0px', 'textAlign': 'center'};
|
|
var expected = 'left:0px;text-align:center;';
|
|
|
|
assertEquals(expected, goog.style.toStyleAttribute(object));
|
|
}
|
|
|
|
function testStyleAttributePassthrough() {
|
|
var object = {'left': '0px', 'textAlign': 'center'};
|
|
|
|
assertObjectEquals(object,
|
|
goog.style.parseStyleAttribute(goog.style.toStyleAttribute(object)));
|
|
}
|
|
|
|
function testGetFloat() {
|
|
assertEquals('', goog.style.getFloat($('no-float')));
|
|
assertEquals('none', goog.style.getFloat($('float-none')));
|
|
assertEquals('left', goog.style.getFloat($('float-left')));
|
|
}
|
|
|
|
function testSetFloat() {
|
|
var el = $('float-test');
|
|
|
|
goog.style.setFloat(el, 'left');
|
|
assertEquals('left', goog.style.getFloat(el));
|
|
|
|
goog.style.setFloat(el, 'right');
|
|
assertEquals('right', goog.style.getFloat(el));
|
|
|
|
goog.style.setFloat(el, 'none');
|
|
assertEquals('none', goog.style.getFloat(el));
|
|
|
|
goog.style.setFloat(el, '');
|
|
assertEquals('', goog.style.getFloat(el));
|
|
}
|
|
|
|
function testIsElementShown() {
|
|
var el = $('testEl');
|
|
|
|
goog.style.setElementShown(el, false);
|
|
assertFalse(goog.style.isElementShown(el));
|
|
|
|
goog.style.setElementShown(el, true);
|
|
assertTrue(goog.style.isElementShown(el));
|
|
}
|
|
|
|
function testGetOpacity() {
|
|
var el1 = {
|
|
style: {
|
|
opacity: '0.3'
|
|
}
|
|
};
|
|
|
|
var el2 = {
|
|
style: {
|
|
MozOpacity: '0.1'
|
|
}
|
|
};
|
|
|
|
var el3 = {
|
|
style: {
|
|
filter: 'some:other,filter;alpha(opacity=25.5);alpha(more=100);'
|
|
}
|
|
};
|
|
|
|
assertEquals(0.3, goog.style.getOpacity(el1));
|
|
assertEquals(0.1, goog.style.getOpacity(el2));
|
|
assertEquals(0.255, goog.style.getOpacity(el3));
|
|
|
|
el1.style.opacity = '0';
|
|
el2.style.MozOpacity = '0';
|
|
el3.style.filter = 'some:other,filter;alpha(opacity=0);alpha(more=100);';
|
|
|
|
assertEquals(0, goog.style.getOpacity(el1));
|
|
assertEquals(0, goog.style.getOpacity(el2));
|
|
assertEquals(0, goog.style.getOpacity(el3));
|
|
|
|
el1.style.opacity = '';
|
|
el2.style.MozOpacity = '';
|
|
el3.style.filter = '';
|
|
|
|
assertEquals('', goog.style.getOpacity(el1));
|
|
assertEquals('', goog.style.getOpacity(el2));
|
|
assertEquals('', goog.style.getOpacity(el3));
|
|
|
|
var el4 = {
|
|
style: {}
|
|
};
|
|
|
|
assertEquals('', goog.style.getOpacity(el4));
|
|
assertEquals('', goog.style.getOpacity($('test-opacity')));
|
|
}
|
|
|
|
function testSetOpacity() {
|
|
var el1 = {
|
|
style: {
|
|
opacity: '0.3'
|
|
}
|
|
};
|
|
goog.style.setOpacity(el1, 0.8);
|
|
|
|
var el2 = {
|
|
style: {
|
|
MozOpacity: '0.1'
|
|
}
|
|
};
|
|
goog.style.setOpacity(el2, 0.5);
|
|
|
|
var el3 = {
|
|
style: {
|
|
filter: 'alpha(opacity=25)'
|
|
}
|
|
};
|
|
goog.style.setOpacity(el3, 0.1);
|
|
|
|
assertEquals(0.8, Number(el1.style.opacity));
|
|
assertEquals(0.5, Number(el2.style.MozOpacity));
|
|
assertEquals('alpha(opacity=10)', el3.style.filter);
|
|
|
|
goog.style.setOpacity(el1, 0);
|
|
goog.style.setOpacity(el2, 0);
|
|
goog.style.setOpacity(el3, 0);
|
|
|
|
assertEquals(0, Number(el1.style.opacity));
|
|
assertEquals(0, Number(el2.style.MozOpacity));
|
|
assertEquals('alpha(opacity=0)', el3.style.filter);
|
|
|
|
goog.style.setOpacity(el1, '');
|
|
goog.style.setOpacity(el2, '');
|
|
goog.style.setOpacity(el3, '');
|
|
|
|
assertEquals('', el1.style.opacity);
|
|
assertEquals('', el2.style.MozOpacity);
|
|
assertEquals('', el3.style.filter);
|
|
}
|
|
|
|
function testFramedPageOffset() {
|
|
// Set up a complicated iframe ancestor chain.
|
|
var iframe = goog.dom.getElement('test-frame-offset');
|
|
var iframeDoc = goog.dom.getFrameContentDocument(iframe);
|
|
var iframeWindow = goog.dom.getWindow(iframeDoc);
|
|
|
|
var iframePos = 'style="display:block;position:absolute;' +
|
|
'top:50px;left:50px;width:50px;height:50px;"';
|
|
iframeDoc.write('<iframe id="test-frame-offset-2" ' +
|
|
iframePos + '></iframe>' +
|
|
'<div id="test-element-2" ' +
|
|
' style="position:absolute;left:300px;top:300px">hi mom!</div>');
|
|
iframeDoc.close();
|
|
var iframe2 = iframeDoc.getElementById('test-frame-offset-2');
|
|
var testElement2 = iframeDoc.getElementById('test-element-2');
|
|
var iframeDoc2 = goog.dom.getFrameContentDocument(iframe2);
|
|
var iframeWindow2 = goog.dom.getWindow(iframeDoc2);
|
|
|
|
iframeDoc2.write(
|
|
'<div id="test-element-3" ' +
|
|
' style="position:absolute;left:500px;top:500px">hi mom!</div>');
|
|
iframeDoc2.close();
|
|
var testElement3 = iframeDoc2.getElementById('test-element-3');
|
|
|
|
assertCoordinateApprox(300, 300, 0,
|
|
goog.style.getPageOffset(testElement2));
|
|
assertCoordinateApprox(500, 500, 0,
|
|
goog.style.getPageOffset(testElement3));
|
|
|
|
assertCoordinateApprox(350, 350, 0,
|
|
goog.style.getFramedPageOffset(testElement2, window));
|
|
assertCoordinateApprox(300, 300, 0,
|
|
goog.style.getFramedPageOffset(testElement2, iframeWindow));
|
|
|
|
assertCoordinateApprox(600, 600, 0,
|
|
goog.style.getFramedPageOffset(testElement3, window));
|
|
assertCoordinateApprox(550, 550, 0,
|
|
goog.style.getFramedPageOffset(testElement3, iframeWindow));
|
|
assertCoordinateApprox(500, 500, 0,
|
|
goog.style.getFramedPageOffset(testElement3, iframeWindow2));
|
|
|
|
// Scroll the iframes a bit.
|
|
window.scrollBy(0, 5);
|
|
iframeWindow.scrollBy(0, 11);
|
|
iframeWindow2.scrollBy(0, 18);
|
|
|
|
// On Firefox 2, scrolling inner iframes causes off by one errors
|
|
// in the page position, because we're using screen coords to compute them.
|
|
assertCoordinateApprox(300, 300, 2,
|
|
goog.style.getPageOffset(testElement2));
|
|
assertCoordinateApprox(500, 500, 2,
|
|
goog.style.getPageOffset(testElement3));
|
|
|
|
assertCoordinateApprox(350, 350 - 11, 2,
|
|
goog.style.getFramedPageOffset(testElement2, window));
|
|
assertCoordinateApprox(300, 300, 2,
|
|
goog.style.getFramedPageOffset(testElement2, iframeWindow));
|
|
|
|
assertCoordinateApprox(600, 600 - 18 - 11, 2,
|
|
goog.style.getFramedPageOffset(testElement3, window));
|
|
assertCoordinateApprox(550, 550 - 18, 2,
|
|
goog.style.getFramedPageOffset(testElement3, iframeWindow));
|
|
assertCoordinateApprox(500, 500, 2,
|
|
goog.style.getFramedPageOffset(testElement3, iframeWindow2));
|
|
}
|
|
|
|
|
|
/**
|
|
* Asserts that the coordinate is approximately equal to the given
|
|
* x and y coordinates, give or take delta.
|
|
*/
|
|
function assertCoordinateApprox(x, y, delta, coord) {
|
|
assertTrue('Expected x: ' + x + ', actual x: ' + coord.x,
|
|
coord.x >= x - delta && coord.x <= x + delta);
|
|
assertTrue('Expected y: ' + y + ', actual y: ' + coord.y,
|
|
coord.y >= y - delta && coord.y <= y + delta);
|
|
}
|
|
|
|
function testTranslateRectForAnotherFrame() {
|
|
var rect = new goog.math.Rect(1, 2, 3, 4);
|
|
var thisDom = goog.dom.getDomHelper();
|
|
goog.style.translateRectForAnotherFrame(rect, thisDom, thisDom);
|
|
assertEquals(1, rect.left);
|
|
assertEquals(2, rect.top);
|
|
assertEquals(3, rect.width);
|
|
assertEquals(4, rect.height);
|
|
|
|
var iframe = $('test-translate-frame-standard');
|
|
var iframeDoc = goog.dom.getFrameContentDocument(iframe);
|
|
var iframeDom = goog.dom.getDomHelper(iframeDoc);
|
|
// Cannot rely on iframe starting at origin.
|
|
iframeDom.getWindow().scrollTo(0, 0);
|
|
// iframe is at (100, 150) and its body is not scrolled.
|
|
rect = new goog.math.Rect(1, 2, 3, 4);
|
|
goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom);
|
|
assertEquals(1 + 100, rect.left);
|
|
assertRoughlyEquals(2 + 150, rect.top, .1);
|
|
assertEquals(3, rect.width);
|
|
assertEquals(4, rect.height);
|
|
|
|
iframeDom.getWindow().scrollTo(11, 13);
|
|
rect = new goog.math.Rect(1, 2, 3, 4);
|
|
goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom);
|
|
assertEquals(1 + 100 - 11, rect.left);
|
|
assertRoughlyEquals(2 + 150 - 13, rect.top, .1);
|
|
assertEquals(3, rect.width);
|
|
assertEquals(4, rect.height);
|
|
|
|
iframe = $('test-translate-frame-quirk');
|
|
iframeDoc = goog.dom.getFrameContentDocument(iframe);
|
|
iframeDom = goog.dom.getDomHelper(iframeDoc);
|
|
// Cannot rely on iframe starting at origin.
|
|
iframeDom.getWindow().scrollTo(0, 0);
|
|
// iframe is at (100, 350) and its body is not scrolled.
|
|
rect = new goog.math.Rect(1, 2, 3, 4);
|
|
goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom);
|
|
assertEquals(1 + 100, rect.left);
|
|
assertRoughlyEquals(2 + 350, rect.top, .1);
|
|
assertEquals(3, rect.width);
|
|
assertEquals(4, rect.height);
|
|
|
|
iframeDom.getWindow().scrollTo(11, 13);
|
|
rect = new goog.math.Rect(1, 2, 3, 4);
|
|
goog.style.translateRectForAnotherFrame(rect, iframeDom, thisDom);
|
|
assertEquals(1 + 100 - 11, rect.left);
|
|
assertRoughlyEquals(2 + 350 - 13, rect.top, .1);
|
|
assertEquals(3, rect.width);
|
|
assertEquals(4, rect.height);
|
|
}
|
|
|
|
function testGetVisibleRectForElement() {
|
|
var container = goog.dom.getElement('test-visible');
|
|
var el = goog.dom.getElement('test-visible-el');
|
|
var dom = goog.dom.getDomHelper(el);
|
|
var winScroll = dom.getDocumentScroll();
|
|
var winSize = dom.getViewportSize();
|
|
|
|
// Skip this test if the window size is small. Firefox3/Linux in Selenium
|
|
// sometimes fails without this check.
|
|
if (winSize.width < 20 || winSize.height < 20) {
|
|
return;
|
|
}
|
|
|
|
// Move the container element to the window's viewport.
|
|
var h = winSize.height < 100 ? winSize.height / 2 : 100;
|
|
goog.style.setSize(container, winSize.width / 2, h);
|
|
goog.style.setPosition(container, 8, winScroll.y + winSize.height - h);
|
|
var visible = goog.style.getVisibleRectForElement(el);
|
|
var bounds = goog.style.getBounds(container);
|
|
// VisibleRect == Bounds rect of the offsetParent
|
|
assertNotNull(visible);
|
|
assertEquals(bounds.left, visible.left);
|
|
assertEquals(bounds.top, visible.top);
|
|
assertEquals(bounds.left + bounds.width, visible.right);
|
|
assertEquals(bounds.top + bounds.height, visible.bottom);
|
|
|
|
// Move a part of the container element to outside of the viewpoert.
|
|
goog.style.setPosition(container, 8, winScroll.y + winSize.height - h / 2);
|
|
visible = goog.style.getVisibleRectForElement(el);
|
|
bounds = goog.style.getBounds(container);
|
|
// Confirm VisibleRect == Intersection of the bounds rect of the
|
|
// offsetParent and the viewport.
|
|
assertNotNull(visible);
|
|
assertEquals(bounds.left, visible.left);
|
|
assertEquals(bounds.top, visible.top);
|
|
assertEquals(bounds.left + bounds.width, visible.right);
|
|
assertEquals(winScroll.y + winSize.height, visible.bottom);
|
|
|
|
// Move the container element to outside of the viewpoert.
|
|
goog.style.setPosition(container, 8, winScroll.y + winSize.height * 2);
|
|
visible = goog.style.getVisibleRectForElement(el);
|
|
assertNull(visible);
|
|
|
|
// Test the case with body element of height 0
|
|
var iframe = goog.dom.getElement('test-visible-frame');
|
|
var iframeDoc = goog.dom.getFrameContentDocument(iframe);
|
|
el = iframeDoc.getElementById('test-visible');
|
|
visible = goog.style.getVisibleRectForElement(el);
|
|
|
|
var iframeViewportSize = goog.dom.getDomHelper(el).getViewportSize();
|
|
// NOTE(user): For iframe, the clipping viewport is always the iframe
|
|
// viewport, and not the actual browser viewport.
|
|
assertNotNull(visible);
|
|
assertEquals(0, visible.top);
|
|
assertEquals(iframeViewportSize.height, visible.bottom);
|
|
assertEquals(0, visible.left);
|
|
assertEquals(iframeViewportSize.width, visible.right);
|
|
}
|
|
|
|
function testGetVisibleRectForElementWithBodyScrolled() {
|
|
var container = goog.dom.getElement('test-visible2');
|
|
var dom = goog.dom.getDomHelper(container);
|
|
var el = dom.createDom('div', undefined, 'Test');
|
|
el.style.position = 'absolute';
|
|
dom.append(container, el);
|
|
|
|
container.style.position = 'absolute';
|
|
goog.style.setPosition(container, 20, 500);
|
|
goog.style.setSize(container, 100, 150);
|
|
|
|
// Scroll body container such that container is exactly at top.
|
|
window.scrollTo(0, 500);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(500, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(20, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(120, visibleRect.right, EPSILON);
|
|
|
|
// Top 100px is clipped by window viewport.
|
|
window.scrollTo(0, 600);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(600, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(20, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(120, visibleRect.right, EPSILON);
|
|
|
|
var winSize = dom.getViewportSize();
|
|
|
|
// Left 50px is clipped by window viewport.
|
|
// Right part is clipped by window viewport.
|
|
goog.style.setSize(container, 10000, 150);
|
|
window.scrollTo(70, 500);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(500, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(70, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(70 + winSize.width, visibleRect.right, EPSILON);
|
|
|
|
// Bottom part is clipped by window viewport.
|
|
goog.style.setSize(container, 100, 2000);
|
|
window.scrollTo(0, 500);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(500, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(20, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(120, visibleRect.right, EPSILON);
|
|
assertRoughlyEquals(500 + winSize.height, visibleRect.bottom, EPSILON);
|
|
|
|
goog.style.setPosition(container, 10000, 10000);
|
|
assertNull(goog.style.getVisibleRectForElement(el));
|
|
}
|
|
|
|
function testGetVisibleRectForElementWithNestedAreaAndNonOffsetAncestor() {
|
|
// IE7 quirks mode somehow consider container2 below as offset parent
|
|
// of the element, which is incorrect.
|
|
if (goog.userAgent.IE && !goog.userAgent.isDocumentModeOrHigher(8) &&
|
|
!goog.dom.isCss1CompatMode()) {
|
|
return;
|
|
}
|
|
|
|
var container = goog.dom.getElement('test-visible2');
|
|
var dom = goog.dom.getDomHelper(container);
|
|
var container2 = dom.createDom('div');
|
|
var el = dom.createDom('div', undefined, 'Test');
|
|
el.style.position = 'absolute';
|
|
dom.append(container, container2);
|
|
dom.append(container2, el);
|
|
|
|
container.style.position = 'absolute';
|
|
goog.style.setPosition(container, 20, 500);
|
|
goog.style.setSize(container, 100, 150);
|
|
|
|
// container2 is a scrollable container but is not an offsetParent of
|
|
// the element. It is ignored in the computation.
|
|
container2.style.overflow = 'hidden';
|
|
container2.style.marginTop = '50px';
|
|
container2.style.marginLeft = '100px';
|
|
goog.style.setSize(container2, 150, 100);
|
|
|
|
// Scroll body container such that container is exactly at top.
|
|
window.scrollTo(0, 500);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(500, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(20, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(120, visibleRect.right, EPSILON);
|
|
|
|
// Top 100px is clipped by window viewport.
|
|
window.scrollTo(0, 600);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(600, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(20, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(120, visibleRect.right, EPSILON);
|
|
|
|
var winSize = dom.getViewportSize();
|
|
|
|
// Left 50px is clipped by window viewport.
|
|
// Right part is clipped by window viewport.
|
|
goog.style.setSize(container, 10000, 150);
|
|
window.scrollTo(70, 500);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(500, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(70, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(70 + winSize.width, visibleRect.right, EPSILON);
|
|
|
|
// Bottom part is clipped by window viewport.
|
|
goog.style.setSize(container, 100, 2000);
|
|
window.scrollTo(0, 500);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(500, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(20, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(120, visibleRect.right, EPSILON);
|
|
assertRoughlyEquals(500 + winSize.height, visibleRect.bottom, EPSILON);
|
|
|
|
goog.style.setPosition(container, 10000, 10000);
|
|
assertNull(goog.style.getVisibleRectForElement(el));
|
|
}
|
|
|
|
function testGetVisibleRectForElementInsideNestedScrollableArea() {
|
|
var container = goog.dom.getElement('test-visible2');
|
|
var dom = goog.dom.getDomHelper(container);
|
|
var container2 = dom.createDom('div');
|
|
var el = dom.createDom('div', undefined, 'Test');
|
|
el.style.position = 'absolute';
|
|
dom.append(container, container2);
|
|
dom.append(container2, el);
|
|
|
|
container.style.position = 'absolute';
|
|
goog.style.setPosition(container, 100 /* left */, 500 /* top */);
|
|
goog.style.setSize(container, 300 /* width */, 300 /* height */);
|
|
|
|
container2.style.overflow = 'hidden';
|
|
container2.style.position = 'relative';
|
|
goog.style.setPosition(container2, 100, 50);
|
|
goog.style.setSize(container2, 150, 100);
|
|
|
|
// Scroll body container such that container is exactly at top.
|
|
window.scrollTo(0, 500);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(550, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(200, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(350, visibleRect.right, EPSILON);
|
|
|
|
// Left 50px is clipped by container.
|
|
goog.style.setPosition(container2, -50, 50);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(550, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(100, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(200, visibleRect.right, EPSILON);
|
|
|
|
// Right part is clipped by container.
|
|
goog.style.setPosition(container2, 100, 50);
|
|
goog.style.setWidth(container2, 1000, 100);
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(550, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(200, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(650, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(400, visibleRect.right, EPSILON);
|
|
|
|
// Top 50px is clipped by container.
|
|
goog.style.setStyle(container2, 'width', '150px');
|
|
goog.style.setStyle(container2, 'top', '-50px');
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(500, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(200, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(550, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(350, visibleRect.right, EPSILON);
|
|
|
|
// Bottom part is clipped by container.
|
|
goog.style.setStyle(container2, 'top', '50px');
|
|
goog.style.setStyle(container2, 'height', '1000px');
|
|
var visibleRect = goog.style.getVisibleRectForElement(el);
|
|
assertNotNull(visibleRect);
|
|
assertRoughlyEquals(550, visibleRect.top, EPSILON);
|
|
assertRoughlyEquals(200, visibleRect.left, EPSILON);
|
|
assertRoughlyEquals(800, visibleRect.bottom, EPSILON);
|
|
assertRoughlyEquals(350, visibleRect.right, EPSILON);
|
|
|
|
// Outside viewport.
|
|
goog.style.setStyle(container2, 'top', '10000px');
|
|
goog.style.setStyle(container2, 'left', '10000px');
|
|
assertNull(goog.style.getVisibleRectForElement(el));
|
|
}
|
|
|
|
function testGeckoMacOrX11RoundPosition() {
|
|
if ((goog.userAgent.MAC || goog.userAgent.X11) && goog.userAgent.GECKO &&
|
|
goog.userAgent.isVersionOrHigher('1.9')) {
|
|
|
|
var pos = new goog.math.Coordinate(1.5, 1.4);
|
|
var el = document.createElement('div');
|
|
goog.style.setPosition(el, pos);
|
|
assertEquals('The left position should have been rounded',
|
|
'2px', el.style.left);
|
|
assertEquals('The top position should have been rounded',
|
|
'1px', el.style.top);
|
|
}
|
|
}
|
|
|
|
function testScrollIntoContainerViewQuirks() {
|
|
if (goog.dom.isCss1CompatMode()) return;
|
|
|
|
var container = goog.dom.getElement('scrollable-container');
|
|
|
|
// Scroll the minimum amount to make the elements visible.
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container);
|
|
assertEquals('scroll to item7', 79, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item8'), container);
|
|
assertEquals('scroll to item8', 100, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container);
|
|
assertEquals('item7 still visible', 100, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item1'), container);
|
|
assertEquals('scroll to item1', 17, container.scrollTop);
|
|
|
|
// Center the element in the first argument.
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item1'), container,
|
|
true);
|
|
assertEquals('center item1', 0, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item4'), container,
|
|
true);
|
|
assertEquals('center item4', 48, container.scrollTop);
|
|
|
|
// The element is higher than the container.
|
|
goog.dom.getElement('item3').style.height = '140px';
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item3'), container);
|
|
assertEquals('show item3 with increased height', 59, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item3'), container,
|
|
true);
|
|
assertEquals('center item3 with increased height', 87, container.scrollTop);
|
|
goog.dom.getElement('item3').style.height = '';
|
|
|
|
// Scroll to non-integer position.
|
|
goog.dom.getElement('item4').style.height = '21px';
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item4'), container,
|
|
true);
|
|
assertEquals('scroll position is rounded down', 48, container.scrollTop);
|
|
goog.dom.getElement('item4').style.height = '';
|
|
}
|
|
|
|
function testScrollIntoContainerViewStandard() {
|
|
if (!goog.dom.isCss1CompatMode()) return;
|
|
|
|
var container = goog.dom.getElement('scrollable-container');
|
|
|
|
// Scroll the minimum amount to make the elements visible.
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container);
|
|
assertEquals('scroll to item7', 115, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item8'), container);
|
|
assertEquals('scroll to item8', 148, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item7'), container);
|
|
assertEquals('item7 still visible', 148, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item1'), container);
|
|
assertEquals('scroll to item1', 17, container.scrollTop);
|
|
|
|
// Center the element in the first argument.
|
|
goog.style.scrollIntoContainerView(
|
|
goog.dom.getElement('item1'), container, true);
|
|
assertEquals('center item1', 0, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(
|
|
goog.dom.getElement('item4'), container, true);
|
|
assertEquals('center item4', 66, container.scrollTop);
|
|
|
|
// The element is higher than the container.
|
|
goog.dom.getElement('item3').style.height = '140px';
|
|
goog.style.scrollIntoContainerView(goog.dom.getElement('item3'), container);
|
|
assertEquals('show item3 with increased height', 83, container.scrollTop);
|
|
goog.style.scrollIntoContainerView(
|
|
goog.dom.getElement('item3'), container, true);
|
|
assertEquals('center item3 with increased height', 93, container.scrollTop);
|
|
goog.dom.getElement('item3').style.height = '';
|
|
|
|
// Scroll to non-integer position.
|
|
goog.dom.getElement('item4').style.height = '21px';
|
|
goog.style.scrollIntoContainerView(
|
|
goog.dom.getElement('item4'), container, true);
|
|
assertEquals('scroll position is rounded down', 66, container.scrollTop);
|
|
goog.dom.getElement('item4').style.height = '';
|
|
}
|
|
|
|
function testOffsetParent() {
|
|
var parent = goog.dom.getElement('offset-parent');
|
|
var child = goog.dom.getElement('offset-child');
|
|
assertEquals(parent, goog.style.getOffsetParent(child));
|
|
}
|
|
|
|
function testOverflowOffsetParent() {
|
|
var parent = goog.dom.getElement('offset-parent-overflow');
|
|
var child = goog.dom.getElement('offset-child-overflow');
|
|
assertEquals(parent, goog.style.getOffsetParent(child));
|
|
}
|
|
|
|
function testGetViewportPageOffset() {
|
|
expectedFailures.expectFailureFor(
|
|
goog.userAgent.IE && !goog.userAgent.isVersionOrHigher(9),
|
|
'Test has been flaky for ie8-winxp image. Disabling.');
|
|
|
|
var testViewport = goog.dom.getElement('test-viewport');
|
|
testViewport.style.height = '5000px';
|
|
testViewport.style.width = '5000px';
|
|
var offset = goog.style.getViewportPageOffset(document);
|
|
assertEquals(0, offset.x);
|
|
assertEquals(0, offset.y);
|
|
|
|
window.scrollTo(0, 100);
|
|
offset = goog.style.getViewportPageOffset(document);
|
|
assertEquals(0, offset.x);
|
|
assertEquals(100, offset.y);
|
|
|
|
window.scrollTo(100, 0);
|
|
offset = goog.style.getViewportPageOffset(document);
|
|
assertEquals(100, offset.x);
|
|
assertEquals(0, offset.y);
|
|
}
|
|
|
|
function testGetsTranslation() {
|
|
var element = document.getElementById('translation');
|
|
|
|
expectedFailures.expectFailureFor(
|
|
goog.userAgent.IE && !goog.userAgent.product.isVersion(9),
|
|
'CSS transforms were only introduced in IE9');
|
|
|
|
// First check the element is actually translated, and we haven't missed
|
|
// one of the vendor-specific transform properties
|
|
var position = goog.style.getClientPosition(element);
|
|
var translation = goog.style.getCssTranslation(element);
|
|
var expectedTranslation = new goog.math.Coordinate(20, 30);
|
|
|
|
expectedFailures.run(function() {
|
|
assertEquals(30, position.x);
|
|
assertRoughlyEquals(40, position.y, .1);
|
|
assertObjectEquals(expectedTranslation, translation);
|
|
});
|
|
}
|
|
|
|
|
|
/**
|
|
* Return whether a given user agent has been detected.
|
|
* @param {number} agent Value in UserAgents.
|
|
* @return {boolean} Whether the user agent has been detected.
|
|
*/
|
|
function getUserAgentDetected_(agent) {
|
|
switch (agent) {
|
|
case UserAgents.GECKO:
|
|
return goog.userAgent.detectedGecko_;
|
|
case UserAgents.IE:
|
|
return goog.userAgent.detectedIe_;
|
|
case UserAgents.OPERA:
|
|
return goog.userAgent.detectedOpera_;
|
|
case UserAgents.WEBKIT:
|
|
return goog.userAgent.detectedWebkit_;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
|
|
/**
|
|
* Rerun the initialization code to set all of the goog.userAgent constants.
|
|
*/
|
|
function reinitializeUserAgent() {
|
|
goog.userAgent.init_();
|
|
|
|
// Unfortunately we can't isolate the useragent setting in a function
|
|
// we can call, because things rely on it compiling to nothing when
|
|
// one of the ASSUME flags is set, and the compiler isn't smart enough
|
|
// to do that when the setting is done inside a function that's inlined.
|
|
goog.userAgent.OPERA = goog.userAgent.detectedOpera_;
|
|
goog.userAgent.IE = goog.userAgent.detectedIe_;
|
|
goog.userAgent.GECKO = goog.userAgent.detectedGecko_;
|
|
goog.userAgent.WEBKIT = goog.userAgent.detectedWebkit_;
|
|
goog.userAgent.MOBILE = goog.userAgent.detectedMobile_;
|
|
goog.userAgent.SAFARI = goog.userAgent.WEBKIT;
|
|
|
|
goog.userAgent.PLATFORM = goog.userAgent.determinePlatform_();
|
|
goog.userAgent.initPlatform_();
|
|
|
|
goog.userAgent.VERSION = goog.userAgent.determineVersion_();
|
|
}
|
|
|
|
|
|
/**
|
|
* Test browser detection for a user agent configuration.
|
|
* @param {Array.<number>} expectedAgents Array of expected userAgents.
|
|
* @param {string} uaString User agent string.
|
|
* @param {string=} opt_product Navigator product string.
|
|
* @param {string=} opt_vendor Navigator vendor string.
|
|
*/
|
|
function assertUserAgent(expectedAgents, uaString, opt_product, opt_vendor) {
|
|
var mockGlobal = {
|
|
'navigator': {
|
|
'userAgent': uaString,
|
|
'product': opt_product,
|
|
'vendor': opt_vendor
|
|
}
|
|
};
|
|
propertyReplacer.set(goog, 'global', mockGlobal);
|
|
reinitializeUserAgent();
|
|
for (var ua in UserAgents) {
|
|
var isExpected = goog.array.contains(expectedAgents, UserAgents[ua]);
|
|
assertEquals(isExpected, getUserAgentDetected_(UserAgents[ua]));
|
|
}
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for Webkit.
|
|
*/
|
|
function testGetVendorStyleNameWebkit() {
|
|
var mockElement = {
|
|
'style': {
|
|
'WebkitTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.WEBKIT], 'WebKit');
|
|
assertEquals('-webkit-transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for Webkit.
|
|
*/
|
|
function testGetVendorStyleNameWebkitNoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'WebkitTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.WEBKIT], 'WebKit');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for Gecko.
|
|
*/
|
|
function testGetVendorStyleNameGecko() {
|
|
var mockElement = {
|
|
'style': {
|
|
'MozTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.GECKO], 'Gecko', 'Gecko');
|
|
assertEquals('-moz-transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for Gecko.
|
|
*/
|
|
function testGetVendorStyleNameGeckoNoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'MozTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.GECKO], 'Gecko', 'Gecko');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for IE.
|
|
*/
|
|
function testGetVendorStyleNameIE() {
|
|
var mockElement = {
|
|
'style': {
|
|
'msTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.IE], 'MSIE');
|
|
assertEquals('-ms-transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for IE.
|
|
*/
|
|
function testGetVendorStyleNameIENoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'msTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.IE], 'MSIE');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for Opera.
|
|
*/
|
|
function testGetVendorStyleNameOpera() {
|
|
var mockElement = {
|
|
'style': {
|
|
'OTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.OPERA], 'Opera');
|
|
assertEquals('-o-transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for Opera.
|
|
*/
|
|
function testGetVendorStyleNameOperaNoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'OTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.OPERA], 'Opera');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for Webkit.
|
|
*/
|
|
function testGetVendorJsStyleNameWebkit() {
|
|
var mockElement = {
|
|
'style': {
|
|
'WebkitTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.WEBKIT], 'WebKit');
|
|
assertEquals('WebkitTransform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for Webkit.
|
|
*/
|
|
function testGetVendorJsStyleNameWebkitNoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'WebkitTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.WEBKIT], 'WebKit');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for Gecko.
|
|
*/
|
|
function testGetVendorJsStyleNameGecko() {
|
|
var mockElement = {
|
|
'style': {
|
|
'MozTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.GECKO], 'Gecko', 'Gecko');
|
|
assertEquals('MozTransform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for Gecko.
|
|
*/
|
|
function testGetVendorJsStyleNameGeckoNoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'MozTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.GECKO], 'Gecko', 'Gecko');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for IE.
|
|
*/
|
|
function testGetVendorJsStyleNameIE() {
|
|
var mockElement = {
|
|
'style': {
|
|
'msTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.IE], 'MSIE');
|
|
assertEquals('msTransform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for IE.
|
|
*/
|
|
function testGetVendorJsStyleNameIENoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'msTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.IE], 'MSIE');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* with a vendor prefix for Opera.
|
|
*/
|
|
function testGetVendorJsStyleNameOpera() {
|
|
var mockElement = {
|
|
'style': {
|
|
'OTransform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.OPERA], 'Opera');
|
|
assertEquals('OTransform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the proper vendor style name for a CSS property
|
|
* when it exists without a vendor prefix for Opera.
|
|
*/
|
|
function testGetVendorJsStyleNameOperaNoPrefix() {
|
|
var mockElement = {
|
|
'style': {
|
|
'OTransform': '',
|
|
'transform': ''
|
|
}
|
|
};
|
|
|
|
assertUserAgent([UserAgents.OPERA], 'Opera');
|
|
assertEquals(
|
|
'transform',
|
|
goog.style.getVendorJsStyleName_(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the setting a style name for a CSS property
|
|
* with a vendor prefix for Webkit.
|
|
*/
|
|
function testSetVendorStyleWebkit() {
|
|
var mockElement = {
|
|
'style': {
|
|
'WebkitTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.WEBKIT], 'WebKit');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, mockElement.style.WebkitTransform);
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the setting a style name for a CSS property
|
|
* with a vendor prefix for Mozilla.
|
|
*/
|
|
function testSetVendorStyleGecko() {
|
|
var mockElement = {
|
|
'style': {
|
|
'MozTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.GECKO], 'Gecko', 'Gecko');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, mockElement.style.MozTransform);
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the setting a style name for a CSS property
|
|
* with a vendor prefix for IE.
|
|
*/
|
|
function testSetVendorStyleIE() {
|
|
var mockElement = {
|
|
'style': {
|
|
'msTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.IE], 'MSIE');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, mockElement.style.msTransform);
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the setting a style name for a CSS property
|
|
* with a vendor prefix for Opera.
|
|
*/
|
|
function testSetVendorStyleOpera() {
|
|
var mockElement = {
|
|
'style': {
|
|
'OTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.OPERA], 'Opera');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, mockElement.style.OTransform);
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the getting a style name for a CSS property
|
|
* with a vendor prefix for Webkit.
|
|
*/
|
|
function testGetVendorStyleWebkit() {
|
|
var mockElement = {
|
|
'style': {
|
|
'WebkitTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.WEBKIT], 'WebKit');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, goog.style.getStyle(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the getting a style name for a CSS property
|
|
* with a vendor prefix for Mozilla.
|
|
*/
|
|
function testGetVendorStyleGecko() {
|
|
var mockElement = {
|
|
'style': {
|
|
'MozTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.GECKO], 'Gecko', 'Gecko');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, goog.style.getStyle(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the getting a style name for a CSS property
|
|
* with a vendor prefix for IE.
|
|
*/
|
|
function testGetVendorStyleIE() {
|
|
var mockElement = {
|
|
'style': {
|
|
'msTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.IE], 'MSIE');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, goog.style.getStyle(mockElement, 'transform'));
|
|
}
|
|
|
|
|
|
/**
|
|
* Test for the getting a style name for a CSS property
|
|
* with a vendor prefix for Opera.
|
|
*/
|
|
function testGetVendorStyleOpera() {
|
|
var mockElement = {
|
|
'style': {
|
|
'OTransform': ''
|
|
}
|
|
};
|
|
var styleValue = 'translate3d(0,0,0)';
|
|
|
|
assertUserAgent([UserAgents.OPERA], 'Opera');
|
|
goog.style.setStyle(mockElement, 'transform', styleValue);
|
|
assertEquals(styleValue, goog.style.getStyle(mockElement, 'transform'));
|
|
}
|