style_test.js 5.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. // Copyright 2011 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. goog.provide('goog.testing.styleTest');
  15. goog.setTestOnly('goog.testing.styleTest');
  16. goog.require('goog.dom');
  17. goog.require('goog.dom.TagName');
  18. goog.require('goog.style');
  19. goog.require('goog.testing.jsunit');
  20. goog.require('goog.testing.style');
  21. var div1;
  22. var div2;
  23. function setUp() {
  24. var createDiv = function(color) {
  25. var div = goog.dom.createDom(goog.dom.TagName.DIV, {
  26. style: 'position:absolute;top:0;left:0;' +
  27. 'width:200px;height:100px;' +
  28. 'background-color:' + color,
  29. innerHTML: 'abc'
  30. });
  31. document.body.appendChild(div);
  32. return div;
  33. };
  34. div1 = createDiv('#EEE');
  35. div2 = createDiv('#F00');
  36. }
  37. function tearDown() {
  38. if (div1.parentNode) div1.parentNode.removeChild(div1);
  39. if (div2.parentNode) div2.parentNode.removeChild(div2);
  40. div1 = null;
  41. div2 = null;
  42. }
  43. function testIsVisible() {
  44. assertTrue(
  45. 'The div should be detected as visible.',
  46. goog.testing.style.isVisible(div1));
  47. // Tests with hidden element
  48. goog.style.setElementShown(div1, false /* display */);
  49. assertFalse(
  50. 'The div should be detected as not visible.',
  51. goog.testing.style.isVisible(div1));
  52. }
  53. function testIsOnScreen() {
  54. var el = goog.dom.createElement(goog.dom.TagName.DIV);
  55. document.body.appendChild(el);
  56. var dom = goog.dom.getDomHelper(el);
  57. var winScroll = dom.getDocumentScroll();
  58. var winSize = dom.getViewportSize();
  59. el.style.position = 'absolute';
  60. goog.style.setSize(el, 100, 100);
  61. goog.style.setPosition(el, winScroll.x, winScroll.y);
  62. assertTrue(
  63. 'An element fully on the screen is on screen.',
  64. goog.testing.style.isOnScreen(el));
  65. goog.style.setPosition(el, winScroll.x - 10, winScroll.y - 10);
  66. assertTrue(
  67. 'An element partially off the top-left of the screen is on screen.',
  68. goog.testing.style.isOnScreen(el));
  69. goog.style.setPosition(el, winScroll.x - 150, winScroll.y - 10);
  70. assertFalse(
  71. 'An element completely off the top of the screen is off screen.',
  72. goog.testing.style.isOnScreen(el));
  73. goog.style.setPosition(el, winScroll.x - 10, winScroll.y - 150);
  74. assertFalse(
  75. 'An element completely off the left of the screen is off screen.',
  76. goog.testing.style.isOnScreen(el));
  77. goog.style.setPosition(el, winScroll.x + winSize.width + 1, winScroll.y);
  78. assertFalse(
  79. 'An element completely off the right of the screen is off screen.',
  80. goog.testing.style.isOnScreen(el));
  81. goog.style.setPosition(el, winScroll.x, winScroll.y + winSize.height + 1);
  82. assertFalse(
  83. 'An element completely off the bottom of the screen is off screen.',
  84. goog.testing.style.isOnScreen(el));
  85. goog.style.setPosition(el, winScroll.x + winSize.width - 10, winScroll.y);
  86. assertTrue(
  87. 'An element partially off the right of the screen is on screen.',
  88. goog.testing.style.isOnScreen(el));
  89. goog.style.setPosition(el, winScroll.x, winScroll.y + winSize.height - 10);
  90. assertTrue(
  91. 'An element partially off the bottom of the screen is on screen.',
  92. goog.testing.style.isOnScreen(el));
  93. var el2 = goog.dom.createElement(goog.dom.TagName.DIV);
  94. el2.style.position = 'absolute';
  95. goog.style.setSize(el2, 100, 100);
  96. goog.style.setPosition(el2, winScroll.x, winScroll.y);
  97. assertFalse(
  98. 'An element not in the DOM is not on screen.',
  99. goog.testing.style.isOnScreen(el2));
  100. }
  101. function testHasVisibleDimensions() {
  102. goog.style.setSize(div1, 0, 0);
  103. assertFalse(
  104. '0x0 should not be considered visible dimensions.',
  105. goog.testing.style.hasVisibleDimensions(div1));
  106. goog.style.setSize(div1, 10, 0);
  107. assertFalse(
  108. '10x0 should not be considered visible dimensions.',
  109. goog.testing.style.hasVisibleDimensions(div1));
  110. goog.style.setSize(div1, 10, 10);
  111. assertTrue(
  112. '10x10 should be considered visible dimensions.',
  113. goog.testing.style.hasVisibleDimensions(div1));
  114. goog.style.setSize(div1, 0, 10);
  115. assertFalse(
  116. '0x10 should not be considered visible dimensions.',
  117. goog.testing.style.hasVisibleDimensions(div1));
  118. }
  119. function testIntersects() {
  120. // No intersection
  121. goog.style.setPosition(div1, 0, 0);
  122. goog.style.setPosition(div2, 500, 500);
  123. assertFalse(
  124. 'The divs should not be determined to itersect.',
  125. goog.testing.style.intersects(div1, div2));
  126. // Some intersection
  127. goog.style.setPosition(div1, 0, 0);
  128. goog.style.setPosition(div2, 50, 50);
  129. assertTrue(
  130. 'The divs should be determined to itersect.',
  131. goog.testing.style.intersects(div1, div2));
  132. // Completely superimposed.
  133. goog.style.setPosition(div1, 0, 0);
  134. goog.style.setPosition(div2, 0, 0);
  135. assertTrue(
  136. 'The divs should be determined to itersect.',
  137. goog.testing.style.intersects(div1, div2));
  138. }