Skip to content

Add keyboard accessibility #317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
beeman merged 5 commits into from
Feb 13, 2022
Merged

Add keyboard accessibility #317

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
62b424e
Add keyboard accessibility
dxbrandon Jan 21, 2022
2c330d4
keyboard offset set to 50
dxbrandon Jan 21, 2022
6759080
Cypress tests for keyboard functionality
dxbrandon Jan 24, 2022
cf5ac3d
Update tests
dxbrandon Jan 24, 2022
4042206
Fix typo
dxbrandon Jan 24, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
98 changes: 85 additions & 13 deletions cypress/integration/1.simple.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/// <reference types="Cypress" />

import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGutterAriaLabel, checkGuttersAriaValueTexts } from '../support/splitUtils'

context('Simple split example page tests', () => {
const W = 1076
Expand All @@ -14,6 +14,8 @@ context('Simple split example page tests', () => {
it('Display initial state', () => {
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
checkGutterAriaLabel('.ex-percent .as-split-gutter', 0, 'adjustable divider between two views')
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent'])
})

it('Change direction', () => {
Expand All @@ -24,55 +26,125 @@ context('Simple split example page tests', () => {
})

it('Move gutter horizontally', () => {
moveGutter('.ex-percent .as-split-gutter', 0, 280, 0)
moveGutterByMouse('.ex-percent .as-split-gutter', 0, 280, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [599.5, 465.5])

moveGutter('.ex-pixel .as-split-gutter', 0, 280, 0)
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160])
})

it('Change direction & move gutter vertically', () => {
cy.get('.btns > .btn').click()

moveGutter('.ex-percent .as-split-gutter', 0, 0, 60)
moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 60)
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [146.6875, 142.296875])

moveGutter('.ex-pixel .as-split-gutter', 0, 0, 60)
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 60)
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [180, 0, 100])
})

it('Move gutter horizontally and move it back', () => {
moveGutter('.ex-percent .as-split-gutter', 0, 280, 0)
moveGutterByMouse('.ex-percent .as-split-gutter', 0, 280, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [599.5, 465.5])

moveGutter('.ex-percent .as-split-gutter', 0, -280, 0)
moveGutterByMouse('.ex-percent .as-split-gutter', 0, -280, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])

moveGutter('.ex-pixel .as-split-gutter', 0, 280, 0)
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 280, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [400, 494, 160])

moveGutter('.ex-pixel .as-split-gutter', 0, -280, 0)
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, -280, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
})

it('Move gutter horizontally to max, change direction', () => {
moveGutter('.ex-percent .as-split-gutter', 0, -1000, 0)
moveGutterByMouse('.ex-percent .as-split-gutter', 0, -1000, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065])

moveGutter('.ex-pixel .as-split-gutter', 0, -1000, 0)
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, -1000, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [0, 894, 160])

cy.get('.btns > .btn').click()

checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289])
moveGutter('.ex-percent .as-split-gutter', 0, 0, 1000)
moveGutterByMouse('.ex-percent .as-split-gutter', 0, 0, 1000)

checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 118, 160])
moveGutter('.ex-pixel .as-split-gutter', 0, 0, 1000)
moveGutterByMouse('.ex-pixel .as-split-gutter', 0, 0, 1000)

cy.get('.btns > .btn').click()

checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [1065, 0])
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [278, 776, 0])
})

it('Move gutter horizontally by using keyboard', () => {
moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'leftarrow')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [269.5, 795.5])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['25 percent'])

moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'rightarrow')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [319.5, 745.5])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent'])

moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [0, 1065])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent'])

moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [500, 565])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent'])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'leftarrow')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [70, 824, 160])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['70 pixel', null])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'rightarrow')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [620, 274, 160])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['620 pixel', null])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [120, 774, 160])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null])
})

it('Move gutter vertically by using keyboard', () => {
cy.get('.btns > .btn').click()

moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'downarrow')
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [136.703125, 152.296875])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['47 percent'])

moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'uparrow')
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [86.703125, 202.28125])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['30 percent'])

moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pagedown')
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [289, 0])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['100 percent'])

moveGutterByKeyboard('.ex-percent .as-split-gutter', 0, 1, 'pageup')
checkSplitDirAndSizes('.ex-percent > as-split', 'vertical', W, H, GUTTER, [0, 289])
checkGuttersAriaValueTexts('.ex-percent .as-split-gutter', ['0 percent'])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'downarrow')
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [170, 0, 110])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['170 pixel', null])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'uparrow')
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [120, 48, 110])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['120 pixel', null])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pageup')
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [0, 168, 110])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['0 pixel', null])

moveGutterByKeyboard('.ex-pixel .as-split-gutter', 0, 1, 'pagedown')
checkSplitDirAndSizes('.ex-pixel > as-split', 'vertical', W, H, GUTTER, [278, 0, 0])
checkGuttersAriaValueTexts('.ex-pixel .as-split-gutter', ['278 pixel', null])
})
})
117 changes: 103 additions & 14 deletions cypress/integration/2.minmax.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/// <reference types="Cypress" />

import { moveGutter, checkSplitDirAndSizes } from '../support/splitUtils'
import { moveGutterByMouse, checkSplitDirAndSizes, moveGutterByKeyboard, checkGuttersAriaValueTexts } from '../support/splitUtils'

context('Min & max splits example page tests', () => {
const W = 1070
Expand Down Expand Up @@ -31,7 +31,7 @@ context('Min & max splits example page tests', () => {
})

it('Move gutters having restrictMove off [PERCENT MODE]', () => {
moveGutter('.ex-percent > as-split > .as-split-gutter', 0, 200, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, 200, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -40,7 +40,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [204.796875, 506.390625, 304.796875])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -49,7 +49,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 0, -100, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -58,7 +58,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-percent > as-split > .as-split-gutter', 1, 100, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, 100, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 508, 204.796875])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -67,7 +67,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 408, 304.796875])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -76,7 +76,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [303.203125, 308, 404.796875])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -85,7 +85,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [206.390625, 304.796875, 504.796875])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -94,7 +94,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
moveGutterByMouse('.ex-percent > as-split > .as-split-gutter', 1, -100, 0)
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508])

checkAreasClasses('.ex-percent > as-split > .as-split-area', [
Expand All @@ -105,7 +105,7 @@ context('Min & max splits example page tests', () => {
})

it('Move gutters having restrictMove off [PIXEL MODE]', () => {
moveGutter('.ex-pixel > as-split > .as-split-gutter', 0, 200, 0)
moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 0, 200, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250])

checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
Expand All @@ -115,7 +115,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: ['as-min'], notHaveTo: ['as-max'] },
])

moveGutter('.ex-pixel > as-split > .as-split-gutter', 0, -100, 0)
moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 0, -100, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 486, 150, 250])

checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
Expand All @@ -125,7 +125,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: ['as-min'], notHaveTo: ['as-max'] },
])

moveGutter('.ex-pixel > as-split > .as-split-gutter', 1, 100, 0)
moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 1, 100, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 486, 150, 250])

checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
Expand All @@ -135,7 +135,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: ['as-min'], notHaveTo: ['as-max'] },
])

moveGutter('.ex-pixel > as-split > .as-split-gutter', 1, -100, 0)
moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 1, -100, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 386, 150, 350])

checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
Expand All @@ -145,7 +145,7 @@ context('Min & max splits example page tests', () => {
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])

moveGutter('.ex-pixel > as-split > .as-split-gutter', 2, -100, 0)
moveGutterByMouse('.ex-pixel > as-split > .as-split-gutter', 2, -100, 0)
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [100, 336, 150, 400])

checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
Expand All @@ -159,6 +159,95 @@ context('Min & max splits example page tests', () => {
it('Move gutters having restrictMove on [PERCENT MODE]', () => {})

it('Move gutters having restrictMove on [PIXEL MODE]', () => {})

it('Move gutters having restrictMove off by keyboard [PERCENT MODE]', () => {
moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'leftarrow')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [254.796875, 456.390625, 304.796875])
checkAreasClasses('.ex-percent > as-split > .as-split-area', [
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])
checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['25 percent', '45 percent'])

moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pagedown')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 508, 304.796875])
checkAreasClasses('.ex-percent > as-split > .as-split-area', [
{ haveTo: ['as-min'], notHaveTo: ['as-max'] },
{ haveTo: ['as-max'], notHaveTo: ['as-min'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])
checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '50 percent'])

moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 0, 1, 'pageup')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 406.390625, 304.796875])
checkAreasClasses('.ex-percent > as-split > .as-split-area', [
{ haveTo: ['as-max'], notHaveTo: ['as-min'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])
checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '40 percent'])

moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'leftarrow')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [304.796875, 356.390625, 354.796875])
checkAreasClasses('.ex-percent > as-split > .as-split-area', [
{ haveTo: ['as-max'], notHaveTo: ['as-min'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
])
checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['30 percent', '35 percent'])

moveGutterByKeyboard('.ex-percent > as-split > .as-split-gutter', 1, 1, 'pagedown')
checkSplitDirAndSizes('.ex-percent > as-split', 'horizontal', W, H, GUTTER, [203.1875, 304.796875, 508])
checkAreasClasses('.ex-percent > as-split > .as-split-area', [
{ haveTo: ['as-min'], notHaveTo: ['as-max'] },
{ haveTo: ['as-min'], notHaveTo: ['as-max'] },
{ haveTo: ['as-max'], notHaveTo: ['as-min'] },
])
checkGuttersAriaValueTexts('.ex-percent > as-split > .as-split-gutter', ['20 percent', '30 percent'])
})

it('Move gutters having restrictMove off by keyboard [PIXEL MODE]', () => {
moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'leftarrow')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [150, 436, 150, 250])
checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: ['as-min', 'as-max'], notHaveTo: [] },
{ haveTo: ['as-min'], notHaveTo: ['as-max'] }
])
checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['150 pixel', null, '150 pixel'])

moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 0, 1, 'pageup')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250])
checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
{ haveTo: ['as-max'], notHaveTo: ['as-min'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: ['as-min', 'as-max'], notHaveTo: [] },
{ haveTo: ['as-min'], notHaveTo: ['as-max'] }
])
checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel'])

moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 1, 2, 'leftarrow')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 286, 150, 350])
checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
{ haveTo: ['as-max'], notHaveTo: ['as-min'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: ['as-min', 'as-max'], notHaveTo: [] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] }
])
checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel'])

moveGutterByKeyboard('.ex-pixel > as-split > .as-split-gutter', 2, 1, 'pageup')
checkSplitDirAndSizes('.ex-pixel > as-split', 'horizontal', W, H, GUTTER, [200, 386, 150, 250])
checkAreasClasses('.ex-pixel > as-split > .as-split-area', [
{ haveTo: ['as-max'], notHaveTo: ['as-min'] },
{ haveTo: [], notHaveTo: ['as-min', 'as-max'] },
{ haveTo: ['as-min', 'as-max'], notHaveTo: [] },
{ haveTo: ['as-min'], notHaveTo: ['as-max'] }
])
checkGuttersAriaValueTexts('.ex-pixel > as-split > .as-split-gutter', ['200 pixel', null, '150 pixel'])
})
})

function checkAreasClasses(sel, all) {
Expand Down
Loading