Changeset 200441 in webkit


Ignore:
Timestamp:
May 4, 2016, 5:05:47 PM (9 years ago)
Author:
commit-queue@webkit.org
Message:

AX: Nonfunctional controls appear before every HTML5 video when using VoiceOver
​https://bugs.webkit.org/show_bug.cgi?id=153089
<rdar://problem/24050668>

Patch by Aaron Chu <​aaron_chu@apple.com> on 2016-05-04
Reviewed by Dean Jackson.

Source/WebCore:

Test: media/video-controls-show-on-kb-or-ax-event.html

  • Modules/mediacontrols/mediaControlsApple.js:

(Controller):
(Controller.prototype.createControls):
(Controller.prototype.updateControls):
(Controller.prototype.handlePlayButtonClicked):
(Controller.prototype.setPlaying):
(Controller.prototype.showShowControlsButton):
(Controller.prototype.showControls):
(Controller.prototype.hideControls):

  • Modules/mediacontrols/mediaControlsiOS.js:

(ControllerIOS.prototype.addStartPlaybackControls):
(ControllerIOS.prototype.handleStartPlaybackButtonTouchEnd):
(ControllerIOS.prototype.showControls):

Fix to make sure the showControls button in a media player behaves correctly.

LayoutTests:

  • media/video-controls-show-on-kb-or-ax-event-expected.txt:
  • media/video-controls-show-on-kb-or-ax-event.html:

A Layout Test to make sure showControls Button in media player is hidden by default.

Location:
trunk
Files:
6 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r200435 r200441  
     12016-05-04  Aaron Chu  <aaron_chu@apple.com>
     2
     3        AX: Nonfunctional controls appear before every HTML5 video when using VoiceOver
     4        https://bugs.webkit.org/show_bug.cgi?id=153089
     5        <rdar://problem/24050668>
     6
     7        Reviewed by Dean Jackson.
     8
     9        * media/video-controls-show-on-kb-or-ax-event-expected.txt:
     10        * media/video-controls-show-on-kb-or-ax-event.html:
     11
     12        A Layout Test to make sure showControls Button in media player is hidden by default.
     13
    1142016-05-04  Dean Jackson  <dino@apple.com>
    215

  • trunk/LayoutTests/media/video-controls-show-on-kb-or-ax-event-expected.txt

    r188182 r200441  
    1 This tests that, after the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the hidden "Show Controls" button.
     1This tests:
     21. Initially, toolbar is visible, "Show Controls" button is not.
     32. After the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the invisible "Show Controls" button.
     43. When the video is paused, the controls become visible and the "Show Controls" button is hidden.
    25
    36PASS
     7PASS
     8PASS
     9PASS
     10PASS
     11PASS
     12PASS
     13PASS
    414
    5 
    6 

  • trunk/LayoutTests/media/video-controls-show-on-kb-or-ax-event.html

    r188213 r200441  
    1 <body>
     1<body onload="initialChecksBeforePlay()">
    22<p>
    3     This tests that, after the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the hidden "Show Controls" button.
     3    This tests:<br>
     4    1. Initially, toolbar is visible, "Show Controls" button is not.<br>
     5    2. After the video controls fade out, they can be shown when VoiceOver or a keyboard user clicks the invisible "Show Controls" button.<br>
     6    3. When the video is paused, the controls become visible and the "Show Controls" button is hidden.<br>
    47</p>
     8
     9<video id="video" controls onplaying="testPlaying()"  onpause="testPausing()" src="content/long-test.mp4"></video><br>
     10
    511<p id="result">
    612    FAIL: Test did not run.<br>
    713</p>
    8 <video id="video" controls autoplay onplaying="playing()" src="content/long-test.mp4"></video><br>
    914<script>
    1015    if (window.testRunner) {
    … …  
    1318    }
    1419
    15     function playing() {
     20    var result = document.getElementById("result");
     21    result.innerHTML = "";
     22    // Initially, the showControls Button should be hidden.
     23    var root = internals.shadowRoot(document.getElementById("video"));
     24    var button = root.firstChild.querySelector('button');
     25    var controls = root.firstChild.querySelector('[role="toolbar"]');
     26    var video = document.getElementById('video');
    1627
    17         // Mouse over the video then mouse out to hide controls more quickly.
    18         eventSender.mouseMoveTo(100,100);
    19         eventSender.mouseMoveTo(1,1);
     28    function isElementHidden(elem) {
     29        return (elem.hidden && getComputedStyle(elem).display === 'none')
     30    }
     31    function initialChecksBeforePlay() {
     32        // Before we start, check to make sure toolbar is in place and showControlsbutton is hidden.
     33        result.innerHTML += (!isElementHidden(controls))? 'PASS<br>': 'FAIL: Controls are not available at the beginning.<br>';
     34        result.innerHTML += (isElementHidden(button))? 'PASS<br>': 'FAIL: "Show Controls" button is not hidden initially.<br>';
    2035
     36        video.play();
     37    }
     38
     39    function testPlaying() {
     40        // Make sure we are getting the updated root and button.
     41        root = internals.shadowRoot(document.getElementById("video"));
     42
     43        // We give it a 100ms buffer for the video to set all the properties before sending mouse events.
     44        setTimeout(function () {
     45            // Mouse over the video then mouse out to hide controls more quickly.
     46            eventSender.mouseMoveTo(150,150);
     47            eventSender.mouseMoveTo(0,0);
     48        }, 100);
     49
     50        // 300ms after the mouse events, all UI changes should complete and we can start making assertions.
    2151        setTimeout(function() {
    22             var result = document.getElementById("result");
    23             result.innerHTML = "";
    24             var root = internals.shadowRoot(document.getElementById("video"))
    25            
    26             var button = root.firstChild.querySelector('button');
    27             if (button) {
     52            // Make sure we are getting the latest copy of the element.
     53            controls = root.firstChild.querySelector('[role="toolbar"]');
     54            result.innerHTML += !controls? 'PASS<br>': 'FAIL: Toolbar still around after mouseout.<br>';
     55
     56            // Make sure we are getting the latest copy of the element.
     57            button = root.firstChild.querySelector('button');
     58            result.innerHTML += !isElementHidden(button)? 'PASS<br>': 'FAIL: Button should be visible.<br>';
     59
     60            if(button && !isElementHidden(button)) {
    2861                button.focus();
    29                 eventSender.keyDown(' '); // Use keyboard to press the selected button.
    30             } else
    31                 result.innerHTML += 'FAIL: "Show Controls" button is not available.<br>';       
     62                eventSender.keyDown(' ');
     63            } else 
     64                result.innerHTML += 'FAIL: "Show Controls" button is hidden or unavailable.<br>';
    3265
    33             // Verifies the toolbar is back in the DOM.
    34             var controls = root.firstChild.querySelector('[role="toolbar"]');
    35             result.innerHTML += controls ? 'PASS': 'FAIL: Test ending, but toolbar is not visible.';
     66            // Make sure we are getting the latest copy of the element.
     67            controls = root.firstChild.querySelector('[role="toolbar"]');
     68            result.innerHTML += controls? 'PASS<br>': 'FAIL: Toolbar should exist<br>';
     69
     70            eventSender.mouseMoveTo(150,150);
     71            eventSender.mouseMoveTo(0,0);
     72
     73            setTimeout(function () {
     74                controls = root.firstChild.querySelector('[role="toolbar"]');
     75                result.innerHTML += !controls? 'PASS<br>': 'FAIL: Toolbar should not exist<br>';
     76                // We are done testing playing state, moving on to testing the paused state.
     77                video.pause();
     78            }, 300);
     79        }, 400);
     80    }
     81
     82    function testPausing() {
     83        // We are giving 100ms + 300s buffer for the video to set its properties and make UI changes.
     84        setTimeout(function () {
     85            controls = root.firstChild.querySelector('[role="toolbar"]');
     86            result.innerHTML += controls? 'PASS<br>': 'FAIL: Toolbar should exist<br>';
     87
     88            button = root.firstChild.querySelector('button');
     89            result.innerHTML += isElementHidden(button)? 'PASS<br>': 'FAIL: Button should not be visible.<br>';
    3690
    3791            testRunner.notifyDone();
    38         }, 300) // Wait for video toolbar to hide.
     92        }, 400);
    3993    }
    4094</script>

  • trunk/Source/WebCore/ChangeLog

    r200435 r200441  
     12016-05-04  Aaron Chu  <aaron_chu@apple.com>
     2
     3        AX: Nonfunctional controls appear before every HTML5 video when using VoiceOver
     4        https://bugs.webkit.org/show_bug.cgi?id=153089
     5        <rdar://problem/24050668>
     6
     7        Reviewed by Dean Jackson.
     8
     9        Test: media/video-controls-show-on-kb-or-ax-event.html
     10
     11        * Modules/mediacontrols/mediaControlsApple.js:
     12        (Controller):
     13        (Controller.prototype.createControls):
     14        (Controller.prototype.updateControls):
     15        (Controller.prototype.handlePlayButtonClicked):
     16        (Controller.prototype.setPlaying):
     17        (Controller.prototype.showShowControlsButton):
     18        (Controller.prototype.showControls):
     19        (Controller.prototype.hideControls):
     20        * Modules/mediacontrols/mediaControlsiOS.js:
     21        (ControllerIOS.prototype.addStartPlaybackControls):
     22        (ControllerIOS.prototype.handleStartPlaybackButtonTouchEnd):
     23        (ControllerIOS.prototype.showControls):
     24
     25        Fix to make sure the showControls button in a media player behaves correctly.
     26
    1272016-05-04  Dean Jackson  <dino@apple.com>
    228

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

    r197005 r200441  
    1414    this.statusHidden = true;
    1515    this.hasWirelessPlaybackTargets = false;
     16    this.canToggleShowControlsButton = false;
    1617    this.isListeningForPlaybackTargetAvailabilityEvent = false;
    1718    this.currentTargetIsWireless = false;
    … …  
    513514        var showControlsButton = this.showControlsButton = document.createElement('button');
    514515        showControlsButton.setAttribute('pseudo', '-webkit-media-show-controls');
    515         showControlsButton.hidden = true;
     516        this.showShowControlsButton(false);
    516517        showControlsButton.setAttribute('aria-label', this.UIString('Show Controls'));
    517518        this.listenFor(showControlsButton, 'click', this.handleShowControlsClick);
    … …  
    648649            this.controls.panel.classList.remove(this.ClassNames.hidden);
    649650            this.resetHideControlsTimer();
     651            this.showShowControlsButton(false);
    650652        } else {
    651653            this.controls.panel.classList.remove(this.ClassNames.show);
    652654            this.controls.panel.classList.add(this.ClassNames.hidden);
     655            this.showShowControlsButton(true);
    653656        }
    654657    },
    … …  
    988991    handlePlayButtonClicked: function(event)
    989992    {
    990         if (this.canPlay())
     993        if (this.canPlay()) {
     994            this.canToggleShowControlsButton = true;
    991995            this.video.play();
    992         else
     996        } else
    993997            this.video.pause();
    994998        return true;
    … …  
    14971501            this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
    14981502            this.resetHideControlsTimer();
     1503            this.canToggleShowControlsButton = true;
    14991504        }
    15001505    },
    … …  
    15161521    },
    15171522
     1523    showShowControlsButton: function (shouldShow) {
     1524        this.showControlsButton.hidden = !shouldShow;
     1525        if (shouldShow)
     1526            this.showControlsButton.focus();
     1527    },
     1528
    15181529    showControls: function(focusControls)
    15191530    {
    … …  
    15291540                this.controls.playButton.focus();
    15301541        }
    1531         this.showControlsButton.hidden = true;
     1542        this.showShowControlsButton(false);
    15321543    },
    15331544
    … …  
    15421553        if (this.controls.panelBackground)
    15431554            this.controls.panelBackground.classList.remove(this.ClassNames.show);
    1544         this.showControlsButton.hidden = false;
     1555        this.showShowControlsButton(this.isPlayable() && this.isPlaying && this.canToggleShowControlsButton);
    15451556    },
    15461557

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

    r199213 r200441  
    148148    addStartPlaybackControls: function() {
    149149        this.base.appendChild(this.controls.startPlaybackButton);
     150        this.showShowControlsButton(false);
    150151    },
    151152
    … …  
    442443
    443444        this.video.play();
     445        this.canToggleShowControlsButton = true;
    444446        this.updateControls();
    445447
    … …  
    523525            this.base.appendChild(this.controls.inlinePlaybackPlaceholder);
    524526            this.base.appendChild(this.controls.panelContainer);
     527            this.showShowControlsButton(false);
    525528        }
    526529    },
Note: See TracChangeset for help on using the changeset viewer.