8
0

rect.js 6.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347
  1. /**
  2. * @license Copyright (c) 2003-2016, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md.
  4. */
  5. /* global document, window */
  6. import Rect from 'ckeditor5/utils/dom/rect.js';
  7. import testUtils from 'tests/core/_utils/utils.js';
  8. testUtils.createSinonSandbox();
  9. describe( 'Rect', () => {
  10. let geometry;
  11. beforeEach( () => {
  12. geometry = {
  13. top: 10,
  14. right: 40,
  15. bottom: 30,
  16. left: 20,
  17. width: 20,
  18. height: 20
  19. };
  20. } );
  21. describe( 'constructor()', () => {
  22. it( 'should accept HTMLElement', () => {
  23. const element = document.createElement( 'div' );
  24. testUtils.sinon.stub( element, 'getBoundingClientRect' ).returns( geometry );
  25. assertRect( new Rect( element ), geometry );
  26. } );
  27. it( 'should accept Range', () => {
  28. const range = document.createRange();
  29. testUtils.sinon.stub( range, 'getBoundingClientRect' ).returns( geometry );
  30. assertRect( new Rect( range ), geometry );
  31. } );
  32. it( 'should accept Rect', () => {
  33. const sourceRect = new Rect( geometry );
  34. const rect = new Rect( sourceRect );
  35. expect( rect ).to.not.equal( sourceRect );
  36. assertRect( rect, geometry );
  37. } );
  38. it( 'should accept ClientRect', () => {
  39. const clientRect = document.body.getBoundingClientRect();
  40. const { top, right, bottom, left, width, height } = clientRect;
  41. const rect = new Rect( clientRect );
  42. assertRect( rect, { top, right, bottom, left, width, height } );
  43. } );
  44. it( 'should accept geometry object', () => {
  45. assertRect( new Rect( geometry ), geometry );
  46. } );
  47. it( 'should copy the properties (Rect)', () => {
  48. const sourceGeometry = Object.assign( {}, geometry );
  49. const sourceRect = new Rect( geometry );
  50. const rect = new Rect( sourceRect );
  51. assertRect( rect, geometry );
  52. rect.top = 100;
  53. rect.width = 200;
  54. assertRect( sourceRect, sourceGeometry );
  55. } );
  56. it( 'should copy the properties (geomerty object)', () => {
  57. const sourceGeometry = Object.assign( {}, geometry );
  58. const rect = new Rect( geometry );
  59. assertRect( rect, geometry );
  60. rect.top = 100;
  61. rect.width = 200;
  62. assertRect( geometry, sourceGeometry );
  63. } );
  64. } );
  65. describe( 'clone()', () => {
  66. it( 'should clone the source rect', () => {
  67. const rect = new Rect( geometry );
  68. const clone = rect.clone();
  69. expect( clone ).to.be.instanceOf( Rect );
  70. expect( clone ).not.equal( rect );
  71. assertRect( clone, rect );
  72. } );
  73. } );
  74. describe( 'moveTo()', () => {
  75. it( 'should return the source rect', () => {
  76. const rect = new Rect( geometry );
  77. const returned = rect.moveTo( 100, 200 );
  78. expect( returned ).to.equal( rect );
  79. } );
  80. it( 'should move the rect', () => {
  81. const rect = new Rect( geometry );
  82. rect.moveTo( 100, 200 );
  83. assertRect( rect, {
  84. top: 200,
  85. right: 120,
  86. bottom: 220,
  87. left: 100,
  88. width: 20,
  89. height: 20
  90. } );
  91. } );
  92. } );
  93. describe( 'moveBy()', () => {
  94. it( 'should return the source rect', () => {
  95. const rect = new Rect( geometry );
  96. const returned = rect.moveBy( 100, 200 );
  97. expect( returned ).to.equal( rect );
  98. } );
  99. it( 'should move the rect', () => {
  100. const rect = new Rect( geometry );
  101. rect.moveBy( 100, 200 );
  102. assertRect( rect, {
  103. top: 210,
  104. right: 140,
  105. bottom: 230,
  106. left: 120,
  107. width: 20,
  108. height: 20
  109. } );
  110. } );
  111. } );
  112. describe( 'getIntersection()', () => {
  113. it( 'should return a new rect', () => {
  114. const rect = new Rect( geometry );
  115. const insersect = rect.getIntersection( new Rect( geometry ) );
  116. expect( insersect ).to.be.instanceOf( Rect );
  117. expect( insersect ).to.not.equal( rect );
  118. } );
  119. it( 'should calculate the geometry (#1)', () => {
  120. const rectA = new Rect( {
  121. top: 0,
  122. right: 100,
  123. bottom: 100,
  124. left: 0,
  125. width: 100,
  126. height: 100
  127. } );
  128. const rectB = new Rect( {
  129. top: 50,
  130. right: 150,
  131. bottom: 150,
  132. left: 50,
  133. width: 100,
  134. height: 100
  135. } );
  136. const insersect = rectA.getIntersection( rectB );
  137. assertRect( insersect, {
  138. top: 50,
  139. right: 100,
  140. bottom: 100,
  141. left: 50,
  142. width: 50,
  143. height: 50
  144. } );
  145. } );
  146. it( 'should calculate the geometry (#2)', () => {
  147. const rectA = new Rect( {
  148. top: 0,
  149. right: 100,
  150. bottom: 100,
  151. left: 0,
  152. width: 100,
  153. height: 100
  154. } );
  155. const rectB = new Rect( {
  156. top: 0,
  157. right: 200,
  158. bottom: 100,
  159. left: 100,
  160. width: 100,
  161. height: 100
  162. } );
  163. const insersect = rectA.getIntersection( rectB );
  164. assertRect( insersect, {
  165. top: 0,
  166. right: 100,
  167. bottom: 100,
  168. left: 100,
  169. width: 0,
  170. height: 100
  171. } );
  172. } );
  173. it( 'should calculate the geometry (#3)', () => {
  174. const rectA = new Rect( {
  175. top: 0,
  176. right: 100,
  177. bottom: 100,
  178. left: 0,
  179. width: 100,
  180. height: 100
  181. } );
  182. const rectB = new Rect( {
  183. top: 100,
  184. right: 300,
  185. bottom: 200,
  186. left: 200,
  187. width: 100,
  188. height: 100
  189. } );
  190. expect( rectA.getIntersection( rectB ) ).to.be.null;
  191. } );
  192. } );
  193. describe( 'getIntersectionArea()', () => {
  194. it( 'should calculate the area (#1)', () => {
  195. const rectA = new Rect( {
  196. top: 0,
  197. right: 100,
  198. bottom: 100,
  199. left: 0,
  200. width: 100,
  201. height: 100
  202. } );
  203. const rectB = new Rect( {
  204. top: 50,
  205. right: 150,
  206. bottom: 150,
  207. left: 50,
  208. width: 100,
  209. height: 100
  210. } );
  211. expect( rectA.getIntersectionArea( rectB ) ).to.equal( 2500 );
  212. } );
  213. it( 'should calculate the area (#2)', () => {
  214. const rectA = new Rect( {
  215. top: 0,
  216. right: 100,
  217. bottom: 100,
  218. left: 0,
  219. width: 100,
  220. height: 100
  221. } );
  222. const rectB = new Rect( {
  223. top: 0,
  224. right: 200,
  225. bottom: 100,
  226. left: 100,
  227. width: 100,
  228. height: 100
  229. } );
  230. expect( rectA.getIntersectionArea( rectB ) ).to.equal( 0 );
  231. } );
  232. it( 'should calculate the area (#3)', () => {
  233. const rectA = new Rect( {
  234. top: 0,
  235. right: 100,
  236. bottom: 100,
  237. left: 0,
  238. width: 100,
  239. height: 100
  240. } );
  241. const rectB = new Rect( {
  242. top: 100,
  243. right: 300,
  244. bottom: 200,
  245. left: 200,
  246. width: 100,
  247. height: 100
  248. } );
  249. expect( rectA.getIntersectionArea( rectB ) ).to.equal( 0 );
  250. } );
  251. } );
  252. describe( 'getArea()', () => {
  253. it( 'should calculate the area', () => {
  254. const rect = new Rect( {
  255. width: 100,
  256. height: 50
  257. } );
  258. expect( rect.getArea() ).to.equal( 5000 );
  259. } );
  260. } );
  261. describe( 'getViewportRect()', () => {
  262. it( 'should reaturn a rect', () => {
  263. expect( Rect.getViewportRect() ).to.be.instanceOf( Rect );
  264. } );
  265. it( 'should return the viewport\'s rect', () => {
  266. window.scrollX = 100;
  267. window.scrollY = 200;
  268. window.innerWidth = 1000;
  269. window.innerHeight = 500;
  270. assertRect( Rect.getViewportRect(), {
  271. top: 0,
  272. right: 1000,
  273. bottom: 500,
  274. left: 0,
  275. width: 1000,
  276. height: 500
  277. } );
  278. } );
  279. } );
  280. } );
  281. function assertRect( rect, expected ) {
  282. expect( rect ).to.deep.equal( expected );
  283. }