Adding mapbox-gl branch
This commit is contained in:
Andreas Hocevar
@@ -0,0 +1,310 @@
|
||||
// Copyright 2009 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 A utility class for making layout assertions. This is a port
|
||||
* of http://go/layoutbot.java
|
||||
* See {@link http://go/layouttesting}.
|
||||
*/
|
||||
|
||||
goog.provide('goog.testing.style.layoutasserts');
|
||||
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.asserts');
|
||||
goog.require('goog.testing.style');
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that an element has:
|
||||
* 1 - a CSS rendering the makes the element visible.
|
||||
* 2 - a non-zero width and height.
|
||||
* @param {Element|string} a The element or optionally the comment string.
|
||||
* @param {Element=} opt_b The element when a comment string is present.
|
||||
*/
|
||||
var assertIsVisible = function(a, opt_b) {
|
||||
_validateArguments(1, arguments);
|
||||
var element = nonCommentArg(1, 1, arguments);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
goog.testing.style.isVisible(element) &&
|
||||
goog.testing.style.hasVisibleDimensions(element),
|
||||
'Specified element should be visible.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* The counter assertion of assertIsVisible().
|
||||
* @param {Element|string} a The element or optionally the comment string.
|
||||
* @param {Element=} opt_b The element when a comment string is present.
|
||||
*/
|
||||
var assertNotVisible = function(a, opt_b) {
|
||||
_validateArguments(1, arguments);
|
||||
var element = nonCommentArg(1, 1, arguments);
|
||||
if (!element) {
|
||||
return;
|
||||
}
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
!goog.testing.style.isVisible(element) ||
|
||||
!goog.testing.style.hasVisibleDimensions(element),
|
||||
'Specified element should not be visible.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the two specified elements intersect.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertIntersect = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var otherElement = nonCommentArg(2, 2, arguments);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
goog.testing.style.intersects(element, otherElement),
|
||||
'Elements should intersect.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the two specified elements do not intersect.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertNoIntersect = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var otherElement = nonCommentArg(2, 2, arguments);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
!goog.testing.style.intersects(element, otherElement),
|
||||
'Elements should not intersect.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the element must have the specified width.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertWidth = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var width = nonCommentArg(2, 2, arguments);
|
||||
var size = goog.style.getSize(element);
|
||||
var elementWidth = size.width;
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
goog.testing.style.layoutasserts.isWithinThreshold_(
|
||||
width, elementWidth, 0 /* tolerance */),
|
||||
'Element should have width ' + width + ' but was ' + elementWidth + '.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the element must have the specified width within the specified
|
||||
* tolerance.
|
||||
* @param {Element|string} a The element or optionally the comment string.
|
||||
* @param {number|Element} b The height or the element if comment string is
|
||||
* present.
|
||||
* @param {number} c The tolerance or the height if comment string is
|
||||
* present.
|
||||
* @param {number=} opt_d The tolerance if comment string is present.
|
||||
*/
|
||||
var assertWidthWithinTolerance = function(a, b, c, opt_d) {
|
||||
_validateArguments(3, arguments);
|
||||
var element = nonCommentArg(1, 3, arguments);
|
||||
var width = nonCommentArg(2, 3, arguments);
|
||||
var tolerance = nonCommentArg(3, 3, arguments);
|
||||
var size = goog.style.getSize(element);
|
||||
var elementWidth = size.width;
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
goog.testing.style.layoutasserts.isWithinThreshold_(
|
||||
width, elementWidth, tolerance),
|
||||
'Element width(' + elementWidth + ') should be within given width(' +
|
||||
width + ') with tolerance value of ' + tolerance + '.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the element must have the specified height.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertHeight = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var height = nonCommentArg(2, 2, arguments);
|
||||
var size = goog.style.getSize(element);
|
||||
var elementHeight = size.height;
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
goog.testing.style.layoutasserts.isWithinThreshold_(
|
||||
height, elementHeight, 0 /* tolerance */),
|
||||
'Element should have height ' + height + '.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the element must have the specified height within the specified
|
||||
* tolerance.
|
||||
* @param {Element|string} a The element or optionally the comment string.
|
||||
* @param {number|Element} b The height or the element if comment string is
|
||||
* present.
|
||||
* @param {number} c The tolerance or the height if comment string is
|
||||
* present.
|
||||
* @param {number=} opt_d The tolerance if comment string is present.
|
||||
*/
|
||||
var assertHeightWithinTolerance = function(a, b, c, opt_d) {
|
||||
_validateArguments(3, arguments);
|
||||
var element = nonCommentArg(1, 3, arguments);
|
||||
var height = nonCommentArg(2, 3, arguments);
|
||||
var tolerance = nonCommentArg(3, 3, arguments);
|
||||
var size = goog.style.getSize(element);
|
||||
var elementHeight = size.height;
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
goog.testing.style.layoutasserts.isWithinThreshold_(
|
||||
height, elementHeight, tolerance),
|
||||
'Element width(' + elementHeight + ') should be within given width(' +
|
||||
height + ') with tolerance value of ' + tolerance + '.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the first element is to the left of the second element.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertIsLeftOf = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var otherElement = nonCommentArg(2, 2, arguments);
|
||||
var elementRect = goog.style.getBounds(element);
|
||||
var otherElementRect = goog.style.getBounds(otherElement);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
elementRect.left < otherElementRect.left,
|
||||
'Elements should be left to right.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the first element is strictly left of the second element.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertIsStrictlyLeftOf = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var otherElement = nonCommentArg(2, 2, arguments);
|
||||
var elementRect = goog.style.getBounds(element);
|
||||
var otherElementRect = goog.style.getBounds(otherElement);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
elementRect.left + elementRect.width < otherElementRect.left,
|
||||
'Elements should be strictly left to right.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the first element is higher than the second element.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertIsAbove = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var otherElement = nonCommentArg(2, 2, arguments);
|
||||
var elementRect = goog.style.getBounds(element);
|
||||
var otherElementRect = goog.style.getBounds(otherElement);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
elementRect.top < otherElementRect.top,
|
||||
'Elements should be top to bottom.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the first element is strictly higher than the second element.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertIsStrictlyAbove = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var otherElement = nonCommentArg(2, 2, arguments);
|
||||
var elementRect = goog.style.getBounds(element);
|
||||
var otherElementRect = goog.style.getBounds(otherElement);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
elementRect.top + elementRect.height < otherElementRect.top,
|
||||
'Elements should be strictly top to bottom.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Asserts that the first element's bounds contain the bounds of the second
|
||||
* element.
|
||||
* @param {Element|string} a The first element or optionally the comment string.
|
||||
* @param {Element} b The second element or the first element if comment string
|
||||
* is present.
|
||||
* @param {Element=} opt_c The second element if comment string is present.
|
||||
*/
|
||||
var assertContained = function(a, b, opt_c) {
|
||||
_validateArguments(2, arguments);
|
||||
var element = nonCommentArg(1, 2, arguments);
|
||||
var otherElement = nonCommentArg(2, 2, arguments);
|
||||
var elementRect = goog.style.getBounds(element);
|
||||
var otherElementRect = goog.style.getBounds(otherElement);
|
||||
|
||||
_assert(commentArg(1, arguments),
|
||||
elementRect.contains(otherElementRect),
|
||||
'Element should be contained within the other element.');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Returns true if the difference between val1 and val2 is less than or equal to
|
||||
* the threashold.
|
||||
* @param {number} val1 The first value.
|
||||
* @param {number} val2 The second value.
|
||||
* @param {number} threshold The threshold value.
|
||||
* @return {boolean} Whether or not the the values are within the threshold.
|
||||
* @private
|
||||
*/
|
||||
goog.testing.style.layoutasserts.isWithinThreshold_ = function(
|
||||
val1, val2, threshold) {
|
||||
return Math.abs(val1 - val2) <= threshold;
|
||||
};
|
||||
|
||||
|
||||
@@ -0,0 +1,29 @@
|
||||
<!DOCTYPE html>
|
||||
<!--
|
||||
All Rights Reserved.
|
||||
-->
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2009 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
goog.testing.style.layoutasserts Tests
|
||||
</title>
|
||||
<script src="../../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.testing.style.layoutassertsTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="element1">
|
||||
</div>
|
||||
<div id="element2">
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,257 @@
|
||||
// Copyright 2009 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.testing.style.layoutassertsTest');
|
||||
goog.setTestOnly('goog.testing.style.layoutassertsTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
/** @suppress {extraRequire} */
|
||||
goog.require('goog.testing.style.layoutasserts');
|
||||
|
||||
var div1;
|
||||
var div2;
|
||||
var DEFAULT_WIDTH = 200;
|
||||
var DEFAULT_HEIGHT = 100;
|
||||
|
||||
function setUp() {
|
||||
div1 = goog.dom.createDom(
|
||||
'div',
|
||||
{
|
||||
id: 'test',
|
||||
className: 'test',
|
||||
style: 'position:absolute;top:0;left:0;' +
|
||||
'width:' + DEFAULT_WIDTH + 'px;' +
|
||||
'height:' + DEFAULT_HEIGHT + 'px;' +
|
||||
'background-color:#EEE',
|
||||
innerHTML: 'abc'
|
||||
});
|
||||
div2 = goog.dom.createDom('div',
|
||||
{
|
||||
id: 'test2',
|
||||
className: 'test2',
|
||||
style: 'position:absolute;' +
|
||||
'top:0;left:0;' +
|
||||
'width:' + DEFAULT_WIDTH + 'px;' +
|
||||
'height:' + DEFAULT_HEIGHT + 'px;' +
|
||||
'background-color:#F00',
|
||||
innerHTML: 'abc'
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
|
||||
function tearDown() {
|
||||
div1 = null;
|
||||
div2 = null;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tests assertIsVisible.
|
||||
*/
|
||||
function testAssertIsVisible() {
|
||||
assertThrows('Exception should be thrown when asserting visibility.',
|
||||
goog.bind(assertIsVisible, null, null)); // assertIsVisible(null)
|
||||
|
||||
// Attach it to BODY tag and assert that it is visible.
|
||||
document.body.appendChild(div1);
|
||||
assertIsVisible('Div should be visible.', div1);
|
||||
|
||||
// Tests with hidden element
|
||||
failed = false;
|
||||
goog.style.setElementShown(div1, false /* display */);
|
||||
assertThrows('Exception should be thrown when asserting visibility.',
|
||||
goog.bind(assertIsVisible, null, div1));
|
||||
|
||||
// Clean up.
|
||||
document.body.removeChild(div1);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tests assertNotVisible.
|
||||
*/
|
||||
function testAssertNotVisible() {
|
||||
// Tests null as a parameter.
|
||||
var element = null;
|
||||
assertNotVisible(element);
|
||||
|
||||
// Attach the element to BODY element, assert should fail.
|
||||
document.body.appendChild(div1);
|
||||
assertThrows('Exception should be thrown when asserting non-visibility.',
|
||||
goog.bind(assertNotVisible, null, div1));
|
||||
|
||||
// Clean up.
|
||||
document.body.removeChild(div1);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tests assertIsIntersect.
|
||||
*/
|
||||
function testAssertIntersect() {
|
||||
document.body.appendChild(div1);
|
||||
document.body.appendChild(div2);
|
||||
|
||||
// No intersection
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 500, 500);
|
||||
assertThrows('Exception should be thrown when asserting intersection.',
|
||||
goog.bind(assertIntersect, null, div1, div2));
|
||||
assertNoIntersect(div1, div2);
|
||||
|
||||
// Some intersection
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 50, 50);
|
||||
assertThrows('Exception should be thrown when asserting no intersection.',
|
||||
goog.bind(assertNoIntersect, null, div1, div2));
|
||||
assertIntersect(div1, div2);
|
||||
|
||||
// Completely superimposed.
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 0, 0);
|
||||
assertThrows('Exception should be thrown when asserting no intersection.',
|
||||
goog.bind(assertNoIntersect, null, div1, div2));
|
||||
assertIntersect(div1, div2);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tests assertWidth.
|
||||
*/
|
||||
function testAssertWidth() {
|
||||
document.body.appendChild(div1);
|
||||
|
||||
// Test correct width
|
||||
assertWidth(div1, DEFAULT_WIDTH);
|
||||
|
||||
// Test wrong width
|
||||
assertThrows('Exception should be thrown when elements has wrong width',
|
||||
goog.bind(assertWidth, null, div1, 400));
|
||||
|
||||
// Test a valid tolerance value
|
||||
assertWidthWithinTolerance(div1, 180, 20);
|
||||
|
||||
// Test exceeding tolerance value
|
||||
assertThrows(
|
||||
'Exception should be thrown when element\'s width exceeds tolerance',
|
||||
goog.bind(assertWidthWithinTolerance, null, div1, 100, 0.1));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tests assertHeight.
|
||||
*/
|
||||
function testAssertHeight() {
|
||||
document.body.appendChild(div1);
|
||||
|
||||
// Test correct height
|
||||
assertHeight(div1, DEFAULT_HEIGHT);
|
||||
|
||||
// Test wrong height
|
||||
assertThrows('Exception should be thrown when element has wrong height.',
|
||||
goog.bind(assertHeightWithinTolerance, null, div1, 300));
|
||||
|
||||
// Test a valid tolerance value
|
||||
assertHeightWithinTolerance(div1, 90, 10);
|
||||
|
||||
// Test exceeding tolerance value
|
||||
assertThrows(
|
||||
'Exception should be thrown when element\'s height exceeds tolerance',
|
||||
goog.bind(assertHeight, null, div1, 50, 0.2));
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tests assertIsLeftOf.
|
||||
*/
|
||||
function testAssertIsLeftOf() {
|
||||
document.body.appendChild(div1);
|
||||
document.body.appendChild(div2);
|
||||
|
||||
// Test elements of same size & location
|
||||
assertThrows('Exception should be thrown when elements intersect.',
|
||||
goog.bind(assertIsLeftOf, null, div1, div2));
|
||||
assertThrows('Exception should be thrown when elements intersect.',
|
||||
goog.bind(
|
||||
assertIsStrictlyLeftOf, null, div1, div2));
|
||||
|
||||
// Test elements that are not left to right
|
||||
goog.style.setPosition(div1, 100, 0);
|
||||
goog.style.setPosition(div2, 0, 0);
|
||||
assertThrows(
|
||||
'Exception should be thrown when elements are not left to right.',
|
||||
goog.bind(assertIsLeftOf, null, div1, div2));
|
||||
assertThrows(
|
||||
'Exception should be thrown when elements are not left to right.',
|
||||
goog.bind(
|
||||
assertIsStrictlyLeftOf, null, div1, div2));
|
||||
|
||||
// Test elements that intersect, but is left to right
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 100, 0);
|
||||
assertIsLeftOf(div1, div2);
|
||||
assertThrows('Exception should be thrown when elements intersect.',
|
||||
goog.bind(
|
||||
assertIsStrictlyLeftOf, null, div1, div2));
|
||||
|
||||
// Test elements that are strictly left to right
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 999, 0);
|
||||
assertIsLeftOf(div1, div2);
|
||||
assertIsStrictlyLeftOf(div1, div2);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Tests assertIsAbove.
|
||||
*/
|
||||
function testAssertIsAbove() {
|
||||
document.body.appendChild(div1);
|
||||
document.body.appendChild(div2);
|
||||
|
||||
// Test elements of same size & location
|
||||
assertThrows('Exception should be thrown when elements intersect.',
|
||||
goog.bind(assertIsAbove, null, div1, div2));
|
||||
assertThrows('Exception should be thrown when elements intersect.',
|
||||
goog.bind(
|
||||
assertIsStrictlyAbove, null, div1, div2));
|
||||
|
||||
// Test elements that are not top to bottom
|
||||
goog.style.setPosition(div1, 0, 999);
|
||||
goog.style.setPosition(div2, 0, 0);
|
||||
assertThrows(
|
||||
'Exception should be thrown when elements are not top to bottom.',
|
||||
goog.bind(assertIsAbove, null, div1, div2));
|
||||
assertThrows(
|
||||
'Exception should be thrown when elements are not top to bottom.',
|
||||
goog.bind(
|
||||
assertIsStrictlyAbove, null, div1, div2));
|
||||
|
||||
// Test elements that intersect, but is top to bottom
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 0, 50);
|
||||
assertIsAbove(div1, div2);
|
||||
assertThrows('Exception should be thrown when elements intersect.',
|
||||
goog.bind(
|
||||
assertIsStrictlyAbove, null, div1, div2));
|
||||
|
||||
// Test elements that are top to bottom
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 0, 999);
|
||||
assertIsAbove(div1, div2);
|
||||
assertIsStrictlyAbove(div1, div2);
|
||||
}
|
||||
@@ -0,0 +1,101 @@
|
||||
// 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 Utilities for inspecting page layout. This is a port of
|
||||
* http://go/layoutbot.java
|
||||
* See {@link http://go/layouttesting}.
|
||||
*/
|
||||
|
||||
goog.provide('goog.testing.style');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.math.Rect');
|
||||
goog.require('goog.style');
|
||||
|
||||
|
||||
/**
|
||||
* Determines whether the bounding rectangles of the given elements intersect.
|
||||
* @param {Element} element The first element.
|
||||
* @param {Element} otherElement The second element.
|
||||
* @return {boolean} Whether the bounding rectangles of the given elements
|
||||
* intersect.
|
||||
*/
|
||||
goog.testing.style.intersects = function(element, otherElement) {
|
||||
var elementRect = goog.style.getBounds(element);
|
||||
var otherElementRect = goog.style.getBounds(otherElement);
|
||||
return goog.math.Rect.intersects(elementRect, otherElementRect);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Determines whether the element has visible dimensions, i.e. x > 0 && y > 0.
|
||||
* @param {Element} element The element to check.
|
||||
* @return {boolean} Whether the element has visible dimensions.
|
||||
*/
|
||||
goog.testing.style.hasVisibleDimensions = function(element) {
|
||||
var elSize = goog.style.getSize(element);
|
||||
var shortest = elSize.getShortest();
|
||||
if (shortest <= 0) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Determines whether the CSS style of the element renders it visible.
|
||||
* @param {!Element} element The element to check.
|
||||
* @return {boolean} Whether the CSS style of the element renders it visible.
|
||||
*/
|
||||
goog.testing.style.isVisible = function(element) {
|
||||
var visibilityStyle =
|
||||
goog.testing.style.getAvailableStyle_(element, 'visibility');
|
||||
var displayStyle =
|
||||
goog.testing.style.getAvailableStyle_(element, 'display');
|
||||
|
||||
return (visibilityStyle != 'hidden' && displayStyle != 'none');
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Test whether the given element is on screen.
|
||||
* @param {!Element} el The element to test.
|
||||
* @return {boolean} Whether the element is on the screen.
|
||||
*/
|
||||
goog.testing.style.isOnScreen = function(el) {
|
||||
var doc = goog.dom.getDomHelper(el).getDocument();
|
||||
var viewport = goog.style.getVisibleRectForElement(doc.body);
|
||||
var viewportRect = goog.math.Rect.createFromBox(viewport);
|
||||
return goog.dom.contains(doc, el) &&
|
||||
goog.style.getBounds(el).intersects(viewportRect);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* This is essentially goog.style.getStyle_. goog.style.getStyle_ is private
|
||||
* and is not a recommended way for general purpose style extractor. For the
|
||||
* purposes of layout testing, we only use this function for retrieving
|
||||
* 'visiblity' and 'display' style.
|
||||
* @param {!Element} element The element to retrieve the style from.
|
||||
* @param {string} style Style property name.
|
||||
* @return {string} Style value.
|
||||
* @private
|
||||
*/
|
||||
goog.testing.style.getAvailableStyle_ = function(element, style) {
|
||||
return goog.style.getComputedStyle(element, style) ||
|
||||
goog.style.getCascadedStyle(element, style) ||
|
||||
goog.style.getStyle(element, style);
|
||||
};
|
||||
@@ -0,0 +1,23 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<!--
|
||||
Copyright 2011 The Closure Library Authors. All Rights Reserved.
|
||||
|
||||
Use of this source code is governed by the Apache License, Version 2.0.
|
||||
See the COPYING file for details.
|
||||
|
||||
-->
|
||||
<head>
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||
<title>
|
||||
goog.testing.style Tests
|
||||
</title>
|
||||
<script src="../../base.js">
|
||||
</script>
|
||||
<script>
|
||||
goog.require('goog.testing.styleTest');
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,157 @@
|
||||
// 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.
|
||||
|
||||
goog.provide('goog.testing.styleTest');
|
||||
goog.setTestOnly('goog.testing.styleTest');
|
||||
|
||||
goog.require('goog.dom');
|
||||
goog.require('goog.style');
|
||||
goog.require('goog.testing.jsunit');
|
||||
goog.require('goog.testing.style');
|
||||
|
||||
var div1;
|
||||
var div2;
|
||||
|
||||
function setUp() {
|
||||
var createDiv = function(color) {
|
||||
var div = goog.dom.createDom(
|
||||
'div',
|
||||
{
|
||||
style: 'position:absolute;top:0;left:0;' +
|
||||
'width:200px;height:100px;' +
|
||||
'background-color:' + color,
|
||||
innerHTML: 'abc'
|
||||
});
|
||||
document.body.appendChild(div);
|
||||
return div;
|
||||
};
|
||||
|
||||
div1 = createDiv('#EEE');
|
||||
div2 = createDiv('#F00');
|
||||
}
|
||||
|
||||
|
||||
function tearDown() {
|
||||
if (div1.parentNode)
|
||||
div1.parentNode.removeChild(div1);
|
||||
if (div2.parentNode)
|
||||
div2.parentNode.removeChild(div2);
|
||||
|
||||
div1 = null;
|
||||
div2 = null;
|
||||
}
|
||||
|
||||
|
||||
function testIsVisible() {
|
||||
assertTrue('The div should be detected as visible.',
|
||||
goog.testing.style.isVisible(div1));
|
||||
|
||||
// Tests with hidden element
|
||||
goog.style.setElementShown(div1, false /* display */);
|
||||
assertFalse('The div should be detected as not visible.',
|
||||
goog.testing.style.isVisible(div1));
|
||||
}
|
||||
|
||||
function testIsOnScreen() {
|
||||
var el = document.createElement('div');
|
||||
document.body.appendChild(el);
|
||||
|
||||
var dom = goog.dom.getDomHelper(el);
|
||||
var winScroll = dom.getDocumentScroll();
|
||||
var winSize = dom.getViewportSize();
|
||||
|
||||
el.style.position = 'absolute';
|
||||
goog.style.setSize(el, 100, 100);
|
||||
|
||||
goog.style.setPosition(el, winScroll.x, winScroll.y);
|
||||
assertTrue('An element fully on the screen is on screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
goog.style.setPosition(el, winScroll.x - 10, winScroll.y - 10);
|
||||
assertTrue(
|
||||
'An element partially off the top-left of the screen is on screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
goog.style.setPosition(el, winScroll.x - 150, winScroll.y - 10);
|
||||
assertFalse(
|
||||
'An element completely off the top of the screen is off screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
goog.style.setPosition(el, winScroll.x - 10, winScroll.y - 150);
|
||||
assertFalse(
|
||||
'An element completely off the left of the screen is off screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
goog.style.setPosition(el, winScroll.x + winSize.width + 1, winScroll.y);
|
||||
assertFalse(
|
||||
'An element completely off the right of the screen is off screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
goog.style.setPosition(el, winScroll.x, winScroll.y + winSize.height + 1);
|
||||
assertFalse(
|
||||
'An element completely off the bottom of the screen is off screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
goog.style.setPosition(el, winScroll.x + winSize.width - 10, winScroll.y);
|
||||
assertTrue(
|
||||
'An element partially off the right of the screen is on screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
goog.style.setPosition(el, winScroll.x, winScroll.y + winSize.height - 10);
|
||||
assertTrue(
|
||||
'An element partially off the bottom of the screen is on screen.',
|
||||
goog.testing.style.isOnScreen(el));
|
||||
|
||||
var el2 = document.createElement('div');
|
||||
el2.style.position = 'absolute';
|
||||
goog.style.setSize(el2, 100, 100);
|
||||
goog.style.setPosition(el2, winScroll.x, winScroll.y);
|
||||
assertFalse('An element not in the DOM is not on screen.',
|
||||
goog.testing.style.isOnScreen(el2));
|
||||
}
|
||||
|
||||
function testHasVisibleDimensions() {
|
||||
goog.style.setSize(div1, 0, 0);
|
||||
assertFalse('0x0 should not be considered visible dimensions.',
|
||||
goog.testing.style.hasVisibleDimensions(div1));
|
||||
goog.style.setSize(div1, 10, 0);
|
||||
assertFalse('10x0 should not be considered visible dimensions.',
|
||||
goog.testing.style.hasVisibleDimensions(div1));
|
||||
goog.style.setSize(div1, 10, 10);
|
||||
assertTrue('10x10 should be considered visible dimensions.',
|
||||
goog.testing.style.hasVisibleDimensions(div1));
|
||||
goog.style.setSize(div1, 0, 10);
|
||||
assertFalse('0x10 should not be considered visible dimensions.',
|
||||
goog.testing.style.hasVisibleDimensions(div1));
|
||||
}
|
||||
|
||||
function testIntersects() {
|
||||
// No intersection
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 500, 500);
|
||||
assertFalse('The divs should not be determined to itersect.',
|
||||
goog.testing.style.intersects(div1, div2));
|
||||
|
||||
// Some intersection
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 50, 50);
|
||||
assertTrue('The divs should be determined to itersect.',
|
||||
goog.testing.style.intersects(div1, div2));
|
||||
|
||||
// Completely superimposed.
|
||||
goog.style.setPosition(div1, 0, 0);
|
||||
goog.style.setPosition(div2, 0, 0);
|
||||
assertTrue('The divs should be determined to itersect.',
|
||||
goog.testing.style.intersects(div1, div2));
|
||||
}
|
||||
Reference in New Issue
Block a user