Changeset 195912 in webkit


Ignore:
Timestamp:
Jan 30, 2016, 2:19:08 PM (10 years ago)
Author:
eric.carlson@apple.com
Message:

More than one audio and/or text track sometimes selected in media controls menu
​https://bugs.webkit.org/show_bug.cgi?id=153664

Source/WebCore:

Use an <img> element for the track menu item checkmark instead of a background image and
the ::before selector.

Reviewed by Jer Noble.

Test: media/controls/track-menu.html

  • Modules/mediacontrols/mediaControlsApple.css:

(audio::-webkit-media-controls-closed-captions-container li:hover):
(audio::-webkit-media-controls-closed-captions-container li .checkmark-container):
(audio::-webkit-media-controls-closed-captions-container li.selected .checkmark-container):
(audio::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container):
(audio::-webkit-media-controls-closed-captions-container li.selected::before): Deleted.
(audio::-webkit-media-controls-closed-captions-container li.selected:hover::before): Deleted.

  • Modules/mediacontrols/mediaControlsApple.js:

(Controller.prototype.buildCaptionMenu):
(Controller.prototype.):
(Controller.prototype.getCurrentControlsStatus):

LayoutTests:

Reviewed by Jer Noble.

  • media/controls/controls-test-helpers.js:

(ControlsTest.prototype.get currentState):
(ControlsTest.prototype.get video):
(ControlsTest.prototype.stateForControlsElement):
(ControlsTest.prototype.handleEvent):
(ControlsTest.prototype.setup):
(ControlsTest.prototype.start):
(ControlsTest.prototype.isEqualTo):
(ControlsTest.prototype.isNotEqualTo):
(ControlsTest.prototype.contains):

  • media/controls/track-menu-expected.txt: Added.
  • media/controls/track-menu.html: Added.
Location:
trunk
Files:
2 added
5 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r195907 r195912  
     12016-01-30  Eric Carlson  <eric.carlson@apple.com>
     2
     3        More than one audio and/or text track sometimes selected in media controls menu
     4        https://bugs.webkit.org/show_bug.cgi?id=153664
     5
     6        Reviewed by Jer Noble.
     7
     8        * media/controls/controls-test-helpers.js:
     9        (ControlsTest.prototype.get currentState):
     10        (ControlsTest.prototype.get video):
     11        (ControlsTest.prototype.stateForControlsElement):
     12        (ControlsTest.prototype.handleEvent):
     13        (ControlsTest.prototype.setup):
     14        (ControlsTest.prototype.start):
     15        (ControlsTest.prototype.isEqualTo):
     16        (ControlsTest.prototype.isNotEqualTo):
     17        (ControlsTest.prototype.contains):
     18        * media/controls/track-menu-expected.txt: Added.
     19        * media/controls/track-menu.html: Added.
     20
    1212016-01-30  Chris Dumez  <cdumez@apple.com>
    222

  • trunk/LayoutTests/media/controls/controls-test-helpers.js

    r192631 r195912  
    3434        // This is only for fallback testing. Even then it is pretty useless.
    3535        return { idiom: "apple", status: "fail" };
     36    }
     37
     38    get video()
     39    {
     40        return this.media;
    3641    }
    3742
    … …  
    5459    {
    5560        this.logMessage(`EVENT: ${event.type}`);
    56         if (event.type == this.eventTrigger && this.callback)
     61        if (event.type == this.eventTrigger && this.callback && window.testRunner)
    5762            this.callback();
    5863    }
    … …  
    8893    setup()
    8994    {
    90         if (!window.testRunner) {
    91             this.logFailure("Test requires DRT.");
    92             return false;
    93         }
    94 
    9595        this.console = document.createElement("div");
    9696        this.console.className = "console";
    … …  
    108108        this.media.src = findMediaFile("video", this.mediaURL);
    109109
     110        if (!window.testRunner) {
     111            this.logFailure("Test requires DRT.");
     112            return false;
     113        }
     114
    110115        return true;
    111116    }
    … …  
    114119    {
    115120        window.addEventListener("load", function () {
    116             this.setup();
     121            if (!this.setup())
     122                return;
     123
    117124            if (msg)
    118125                this.startNewSection(msg);
    … …  
    150157    }
    151158
     159    isNotEqualTo(value)
     160    {
     161        if (this.currentValue != value)
     162            this.logSuccess(this.currentMessage);
     163        else
     164            this.logFailure(`${this.currentMessage} Expected to not be equal to: "${value}". Actual: "${this.currentValue}"`);
     165    }
     166
    152167    contains(value)
    153168    {

  • trunk/Source/WebCore/ChangeLog

    r195911 r195912  
     12016-01-30  Eric Carlson  <eric.carlson@apple.com>
     2
     3        More than one audio and/or text track sometimes selected in media controls menu
     4        https://bugs.webkit.org/show_bug.cgi?id=153664
     5
     6        Use an <img> element for the track menu item checkmark instead of a background image and
     7        the ::before selector.
     8
     9        Reviewed by Jer Noble.
     10
     11        Test: media/controls/track-menu.html
     12
     13        * Modules/mediacontrols/mediaControlsApple.css:
     14        (audio::-webkit-media-controls-closed-captions-container li:hover):
     15        (audio::-webkit-media-controls-closed-captions-container li .checkmark-container):
     16        (audio::-webkit-media-controls-closed-captions-container li.selected .checkmark-container):
     17        (audio::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container):
     18        (audio::-webkit-media-controls-closed-captions-container li.selected::before): Deleted.
     19        (audio::-webkit-media-controls-closed-captions-container li.selected:hover::before): Deleted.
     20        * Modules/mediacontrols/mediaControlsApple.js:
     21        (Controller.prototype.buildCaptionMenu):
     22        (Controller.prototype.):
     23        (Controller.prototype.getCurrentControlsStatus):
     24
    1252016-01-30  Darin Adler  <darin@apple.com>
    226

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

    r195693 r195912  
    459459}
    460460
    461 video::-webkit-media-controls-closed-captions-container li.selected::before,
    462 audio::-webkit-media-controls-closed-captions-container li.selected::before {
    463     display: block;
    464     content: "";
     461video::-webkit-media-controls-closed-captions-container li .checkmark-container,
     462audio::-webkit-media-controls-closed-captions-container li .checkmark-container {
     463    display: none;
    465464    position: absolute;
    466465    top: 0.25em;
     466    left: 1em;
    467467    width: 1.1em;
    468468    height: 1.1em;
    469     -webkit-margin-start: -20px;
    470     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgb(163, 163, 163)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
    471     background-repeat: no-repeat;
    472 }
    473 
    474 video::-webkit-media-controls-closed-captions-container li.selected:hover::before,
    475 audio::-webkit-media-controls-closed-captions-container li.selected:hover::before {
    476     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.45)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
     469}
     470
     471video::-webkit-media-controls-closed-captions-container li.selected .checkmark-container,
     472audio::-webkit-media-controls-closed-captions-container li.selected .checkmark-container {
     473    display: inline-block;
     474    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgb(163, 163, 163)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
     475}
     476
     477video::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container,
     478audio::-webkit-media-controls-closed-captions-container li.selected:hover .checkmark-container {
     479    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 300"><polygon fill="rgba(255,255,255,0.45)" points="252.301,4.477 126.667,194.104 43.358,108.3 6.868,161.408 132.515,290.814 297.732,49.926"/></svg>');
    477480}
    478481

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

    r195693 r195912  
    476476        captionButton.setAttribute('aria-label', this.UIString('Captions'));
    477477        captionButton.setAttribute('aria-haspopup', 'true');
    478         captionButton.setAttribute('aria-owns', 'audioTrackMenu');
     478        captionButton.setAttribute('aria-owns', 'audioAndTextTrackMenu');
    479479        this.listenFor(captionButton, 'click', this.handleCaptionButtonClicked);
    480480
    … …  
    17381738        this.captionMenu = document.createElement('div');
    17391739        this.captionMenu.setAttribute('pseudo', '-webkit-media-controls-closed-captions-container');
    1740         this.captionMenu.setAttribute('id', 'audioTrackMenu');
     1740        this.captionMenu.setAttribute('id', 'audioAndTextTrackMenu');
    17411741        this.base.appendChild(this.captionMenu);
    17421742        this.captionMenuItems = [];
    … …  
    17741774                menuItem.track = track;
    17751775
     1776                var itemCheckmark = document.createElement("img");
     1777                itemCheckmark.classList.add("checkmark-container");
     1778                menuItem.insertBefore(itemCheckmark, menuItem.firstChild);
     1779
    17761780                if (track.enabled) {
    17771781                    menuItem.classList.add(this.ClassNames.selected);
    … …  
    18061810                menuItem.track = track;
    18071811
     1812                var itemCheckmark = document.createElement("img");
     1813                itemCheckmark.classList.add("checkmark-container");
     1814                menuItem.insertBefore(itemCheckmark, menuItem.firstChild);
     1815
    18081816                if (track === offItem) {
    18091817                    var offMenu = menuItem;
    … …  
    18311839            if (offMenu && displayMode === 'forced-only' && !trackMenuItemSelected) {
    18321840                offMenu.classList.add(this.ClassNames.selected);
    1833                 menuItem.setAttribute('tabindex', '0');
    1834                 menuItem.setAttribute('aria-checked', 'true');
     1841                offMenu.setAttribute('tabindex', '0');
     1842                offMenu.setAttribute('aria-checked', 'true');
    18351843            }
    18361844        }
    … …  
    22432251                object: this.controls.pictureInPictureButton
    22442252            },
     2253            {
     2254                name: "Track Menu",
     2255                object: this.captionMenu
     2256            },
    22452257        ];
    22462258
    … …  
    22502262
    22512263            element.computedStyle = {};
    2252             if (element.styleValues) {
     2264            if (obj && element.styleValues) {
    22532265                var computedStyle = window.getComputedStyle(obj);
    22542266                element.styleValues.forEach(function (propertyName) {
    … …  
    22582270            }
    22592271
    2260             element.bounds = obj.getBoundingClientRect();
    2261             element.className = obj.className;
    2262             element.ariaLabel = obj.getAttribute('aria-label');
     2272            element.bounds = obj ? obj.getBoundingClientRect() : null;
     2273            element.className = obj ? obj.className : null;
     2274            element.ariaLabel = obj ? obj.getAttribute('aria-label') : null;
    22632275
    22642276            if (element.extraProperties) {
    22652277                element.extraProperties.forEach(function (property) {
    2266                     element[property] = obj[property];
     2278                    element[property] = obj ? obj[property] : null;
    22672279                });
    22682280                delete element.extraProperties;
    22692281            }
     2282
     2283             element.element = obj;
    22702284        });
    22712285
Note: See TracChangeset for help on using the changeset viewer.