forked from WordPress/gutenberg
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block toolbar: restrict visible child calculation to known blocks (Wo…
…rdPress#66702) * Refactor getVisibleElementBounds to only check visible children for specific blocks that we know overflow. Rename function and update comments. Introduce rudimentary unit tests. * Apply suggestions to code comments from code review Co-authored-by: Aaron Robertshaw <[email protected]> * Add extra tests * Rebase * Added a test for viewport clipping and adjusted test descriptions --------- Co-authored-by: ramonjd <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: t-hamano <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: getdave <[email protected]> Co-authored-by: stokesman <[email protected]> Co-authored-by: andrewserong <[email protected]> Co-authored-by: simom <[email protected]>
- Loading branch information
9 people
authored
Nov 4, 2024
1 parent
7bf1d96
commit 6df457c
Showing
4 changed files
with
256 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,224 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { getElementBounds, WITH_OVERFLOW_ELEMENT_BLOCKS } from '../dom'; | ||
| describe( 'dom', () => { | ||
| describe( 'getElementBounds', () => { | ||
| it( 'should return a DOMRectReadOnly object if the viewport is not available', () => { | ||
| const element = { | ||
| ownerDocument: { | ||
| defaultView: null, | ||
| }, | ||
| }; | ||
| expect( getElementBounds( element ) ).toEqual( | ||
| new window.DOMRectReadOnly() | ||
| ); | ||
| } ); | ||
| it( 'should return a DOMRectReadOnly object if the viewport is available', () => { | ||
| const element = { | ||
| ownerDocument: { | ||
| defaultView: { | ||
| getComputedStyle: () => ( { | ||
| display: 'block', | ||
| visibility: 'visible', | ||
| opacity: '1', | ||
| } ), | ||
| }, | ||
| }, | ||
| getBoundingClientRect: () => ( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| } ), | ||
| getAttribute: ( x ) => x, | ||
| }; | ||
| expect( getElementBounds( element ) ).toEqual( | ||
| new window.DOMRectReadOnly( 0, 0, 100, 100 ) | ||
| ); | ||
| } ); | ||
| it( 'should clip left and right values when an element is larger than the viewport width', () => { | ||
| const element = window.document.createElement( 'div' ); | ||
| element.getBoundingClientRect = jest.fn().mockReturnValue( { | ||
| left: -10, | ||
| top: 0, | ||
| right: window.innerWidth + 10, | ||
| bottom: 100, | ||
| width: window.innerWidth, | ||
| height: 100, | ||
| } ); | ||
| expect( getElementBounds( element ).toJSON() ).toEqual( { | ||
| left: 0, // Reset to min left bound. | ||
| top: 0, | ||
| right: window.innerWidth, // Reset to max right bound. | ||
| bottom: 100, | ||
| width: window.innerWidth, | ||
| height: 100, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| } ); | ||
| it( 'should return the parent DOMRectReadOnly object if the parent block type is not supported', () => { | ||
| const element = window.document.createElement( 'div' ); | ||
| element.getBoundingClientRect = jest.fn().mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| } ); | ||
| element.setAttribute( 'data-type', 'test' ); | ||
| const childElement = window.document.createElement( 'div' ); | ||
| childElement.getBoundingClientRect = jest.fn().mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 333, | ||
| bottom: 333, | ||
| width: 333, | ||
| height: 333, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| element.appendChild( childElement ); | ||
|
|
||
| expect( getElementBounds( element ).toJSON() ).toEqual( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| } ); | ||
| describe( 'With known block type', () => { | ||
| it( 'should return the child DOMRectReadOnly object if it is visible and a known block type', () => { | ||
| const element = window.document.createElement( 'div' ); | ||
| element.getBoundingClientRect = jest.fn().mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| } ); | ||
| element.setAttribute( | ||
| 'data-type', | ||
| WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ] | ||
| ); | ||
| const childElement = window.document.createElement( 'div' ); | ||
| childElement.getBoundingClientRect = jest | ||
| .fn() | ||
| .mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 333, | ||
| bottom: 333, | ||
| width: 333, | ||
| height: 333, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| element.appendChild( childElement ); | ||
|
|
||
| expect( getElementBounds( element ).toJSON() ).toEqual( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 333, | ||
| bottom: 333, | ||
| width: 333, | ||
| height: 333, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| } ); | ||
| it( 'should return the parent DOMRectReadOnly if the child is scrollable', () => { | ||
| const element = window.document.createElement( 'div' ); | ||
| element.setAttribute( | ||
| 'data-type', | ||
| WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ] | ||
| ); | ||
| element.style.overflowX = 'auto'; | ||
| element.style.overflowY = 'auto'; | ||
| element.getBoundingClientRect = jest.fn().mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| } ); | ||
| const childElement = window.document.createElement( 'div' ); | ||
| childElement.getBoundingClientRect = jest | ||
| .fn() | ||
| .mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 333, | ||
| bottom: 333, | ||
| width: 333, | ||
| height: 333, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| element.appendChild( childElement ); | ||
|
|
||
| expect( getElementBounds( element ).toJSON() ).toEqual( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| } ); | ||
| it( 'should return the parent DOMRectReadOnly object if the child element is not visible', () => { | ||
| const element = window.document.createElement( 'div' ); | ||
| element.getBoundingClientRect = jest.fn().mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| } ); | ||
| element.setAttribute( | ||
| 'data-type', | ||
| WITH_OVERFLOW_ELEMENT_BLOCKS[ 0 ] | ||
| ); | ||
| const childElement = window.document.createElement( 'div' ); | ||
| childElement.getBoundingClientRect = jest | ||
| .fn() | ||
| .mockReturnValue( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 333, | ||
| bottom: 333, | ||
| width: 333, | ||
| height: 333, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| childElement.style.display = 'none'; | ||
| element.appendChild( childElement ); | ||
|
|
||
| expect( getElementBounds( element ).toJSON() ).toEqual( { | ||
| left: 0, | ||
| top: 0, | ||
| right: 100, | ||
| bottom: 100, | ||
| width: 100, | ||
| height: 100, | ||
| x: 0, | ||
| y: 0, | ||
| } ); | ||
| } ); | ||
| } ); | ||
| } ); | ||
| } ); |