rect.js 7.0 KB

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