| <!DOCTYPE html> |
| <html> |
| <body> |
| <script src="../../resources/js-test.js"></script> |
| <script src="../../resources/accessibility-helper.js"></script> |
| <custom-slider id="slider-1"></custom-slider> |
| <custom-slider id="slider-2" aria-valuemax="15" aria-valuemin="3" aria-valuenow="7" aria-valuetext="7 out of 15"></custom-slider> |
| <script> |
| |
| customElements.define('custom-slider', class CustomSlider extends HTMLElement { |
| constructor() |
| { |
| super(); |
| const internals = this.attachInternals(); |
| internals.role = 'slider'; |
| internals.ariaValueMax = 10; |
| internals.ariaValueMin = 1; |
| internals.ariaValueNow = 5; |
| internals.ariaValueText = '5/10'; |
| } |
| }); |
| |
| description("This tests that aria fallback roles work correctly."); |
| if (!window.accessibilityController) |
| debug('This test requires accessibilityController'); |
| else { |
| shouldBeEqualToString('accessibilityController.accessibleElementById("slider-1").role', 'AXRole: AXSlider'); |
| shouldBe('accessibilityController.accessibleElementById("slider-1").intValue', '5'); |
| shouldBe('accessibilityController.accessibleElementById("slider-1").maxValue', '10'); |
| shouldBe('accessibilityController.accessibleElementById("slider-1").minValue', '1'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("slider-1").valueDescription', 'AXValueDescription: 5/10'); |
| |
| shouldBeEqualToString('accessibilityController.accessibleElementById("slider-2").role', 'AXRole: AXSlider'); |
| shouldBe('accessibilityController.accessibleElementById("slider-2").intValue', '7'); |
| shouldBe('accessibilityController.accessibleElementById("slider-2").maxValue', '15'); |
| shouldBe('accessibilityController.accessibleElementById("slider-2").minValue', '3'); |
| shouldBeEqualToString('accessibilityController.accessibleElementById("slider-2").valueDescription', 'AXValueDescription: 7 out of 15'); |
| } |
| |
| </script> |
| </body> |
| </html> |
