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