8
0

rect.js 6.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348
  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 geometry object', () => {
  39. assertRect( new Rect( geometry ), geometry );
  40. } );
  41. it( 'should copy the properties (Rect)', () => {
  42. const sourceGeometry = Object.assign( {}, geometry );
  43. const sourceRect = new Rect( geometry );
  44. const rect = new Rect( sourceRect );
  45. assertRect( rect, geometry );
  46. rect.top = 100;
  47. rect.width = 200;
  48. assertRect( sourceRect, sourceGeometry );
  49. } );
  50. it( 'should copy the properties (geomerty object)', () => {
  51. const sourceGeometry = Object.assign( {}, geometry );
  52. const rect = new Rect( geometry );
  53. assertRect( rect, geometry );
  54. rect.top = 100;
  55. rect.width = 200;
  56. assertRect( geometry, sourceGeometry );
  57. } );
  58. } );
  59. describe( 'clone()', () => {
  60. it( 'should clone the source rect', () => {
  61. const rect = new Rect( geometry );
  62. const clone = rect.clone();
  63. expect( clone ).to.be.instanceOf( Rect );
  64. expect( clone ).not.equal( rect );
  65. assertRect( clone, rect );
  66. } );
  67. } );
  68. describe( 'moveTo()', () => {
  69. it( 'should return the source rect', () => {
  70. const rect = new Rect( geometry );
  71. const returned = rect.moveTo( 100, 200 );
  72. expect( returned ).to.equal( rect );
  73. } );
  74. it( 'should move the rect', () => {
  75. const rect = new Rect( geometry );
  76. rect.moveTo( 100, 200 );
  77. assertRect( rect, {
  78. top: 200,
  79. right: 120,
  80. bottom: 220,
  81. left: 100,
  82. width: 20,
  83. height: 20
  84. } );
  85. } );
  86. } );
  87. describe( 'moveBy()', () => {
  88. it( 'should return the source rect', () => {
  89. const rect = new Rect( geometry );
  90. const returned = rect.moveBy( 100, 200 );
  91. expect( returned ).to.equal( rect );
  92. } );
  93. it( 'should move the rect', () => {
  94. const rect = new Rect( geometry );
  95. rect.moveBy( 100, 200 );
  96. assertRect( rect, {
  97. top: 210,
  98. right: 140,
  99. bottom: 230,
  100. left: 120,
  101. width: 20,
  102. height: 20
  103. } );
  104. } );
  105. } );
  106. describe( 'getIntersection()', () => {
  107. it( 'should return a new rect', () => {
  108. const rect = new Rect( geometry );
  109. const insersect = rect.getIntersection( new Rect( geometry ) );
  110. expect( insersect ).to.be.instanceOf( Rect );
  111. expect( insersect ).to.not.equal( rect );
  112. } );
  113. it( 'should calculate the geometry (#1)', () => {
  114. const rectA = new Rect( {
  115. top: 0,
  116. right: 100,
  117. bottom: 100,
  118. left: 0,
  119. width: 100,
  120. height: 100
  121. } );
  122. const rectB = new Rect( {
  123. top: 50,
  124. right: 150,
  125. bottom: 150,
  126. left: 50,
  127. width: 100,
  128. height: 100
  129. } );
  130. const insersect = rectA.getIntersection( rectB );
  131. assertRect( insersect, {
  132. top: 50,
  133. right: 100,
  134. bottom: 100,
  135. left: 50,
  136. width: 50,
  137. height: 50
  138. } );
  139. } );
  140. it( 'should calculate the geometry (#2)', () => {
  141. const rectA = new Rect( {
  142. top: 0,
  143. right: 100,
  144. bottom: 100,
  145. left: 0,
  146. width: 100,
  147. height: 100
  148. } );
  149. const rectB = new Rect( {
  150. top: 0,
  151. right: 200,
  152. bottom: 100,
  153. left: 100,
  154. width: 100,
  155. height: 100
  156. } );
  157. const insersect = rectA.getIntersection( rectB );
  158. assertRect( insersect, {
  159. top: 0,
  160. right: 100,
  161. bottom: 100,
  162. left: 100,
  163. width: 0,
  164. height: 100
  165. } );
  166. } );
  167. it( 'should calculate the geometry (#3)', () => {
  168. const rectA = new Rect( {
  169. top: 0,
  170. right: 100,
  171. bottom: 100,
  172. left: 0,
  173. width: 100,
  174. height: 100
  175. } );
  176. const rectB = new Rect( {
  177. top: 100,
  178. right: 300,
  179. bottom: 200,
  180. left: 200,
  181. width: 100,
  182. height: 100
  183. } );
  184. const insersect = rectA.getIntersection( rectB );
  185. assertRect( insersect, {
  186. top: 100,
  187. right: 100,
  188. bottom: 100,
  189. left: 200,
  190. width: -100,
  191. height: 0
  192. } );
  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. window.scrollX = 100;
  269. window.scrollY = 200;
  270. window.innerWidth = 1000;
  271. window.innerHeight = 500;
  272. assertRect( Rect.getViewportRect(), {
  273. top: 200,
  274. right: 1100,
  275. bottom: 700,
  276. left: 100,
  277. width: 1000,
  278. height: 500
  279. } );
  280. } );
  281. } );
  282. } );
  283. function assertRect( rect, expected ) {
  284. expect( rect ).to.deep.equal( expected );
  285. }