diff --git a/src/animation/frontend/typing/index.js b/src/animation/frontend/typing/index.js index b250f1225..cd4fae4fd 100644 --- a/src/animation/frontend/typing/index.js +++ b/src/animation/frontend/typing/index.js @@ -109,16 +109,15 @@ domReady( () => { .o-anim-typing-caret::after { font-weight: 100; content: '|'; - color: #2E3D48; animation: 1s blink step-end infinite; } - + @keyframes blink { from, to { color: transparent; } 50% { - color: black; + color: inherit; } } `; diff --git a/src/blocks/test/e2e/blocks/animations.spec.js b/src/blocks/test/e2e/blocks/animations.spec.js new file mode 100644 index 000000000..69d570616 --- /dev/null +++ b/src/blocks/test/e2e/blocks/animations.spec.js @@ -0,0 +1,34 @@ +/** + * WordPress dependencies + */ +import { test, expect } from '@wordpress/e2e-test-utils-playwright'; + +test.describe( 'Animations', () => { + test.beforeEach( async({ admin }) => { + await admin.createNewPost(); + }); + + test( 'can add a typing animation"', async({ editor, page }) => { + await editor.insertBlock({ + name: 'core/paragraph', + attributes: { + content: 'Magna mollis sed ipsum convallis tellus donec. Maximus ligula nostra fusce inceptos in fermentum phasellus. Ante sollicitudin euismod ultrices nullam etiam eu. Himenaeos si ridiculus suscipit velit donec dui tristique. Habitant auctor ridiculus a consectetuer nisi volutpat magnis sed enim lacus. Quisque habitant litora sodales turpis montes.' + } + }); + + const box = await page.getByLabel( 'Paragraph block' ).boundingBox(); + + // Select a text inside the paragraph block. + await page.mouse.move( box.x + 10, box.y + 10 ); + await page.mouse.down(); + await page.mouse.move( box.x + box.width - 50, box.y + box.height - 100 ); + await page.mouse.up(); + + await page.getByLabel( 'More' ).click(); + + await page.getByRole( 'menuitem', { name: 'Typing Animation' }).click(); + + expect( page.getByLabel( 'Paragraph block' ).locator( 'o-anim-typing' ).first() ).toBeTruthy(); + expect( page.getByLabel( 'Paragraph block' ).locator( '.o-typing-delay-500ms' ).first() ).toBeTruthy(); + }); +});