Diff
Modified: trunk/LayoutTests/ChangeLog (220040 => 220041)
--- trunk/LayoutTests/ChangeLog 2017-07-29 02:39:38 UTC (rev 220040)
+++ trunk/LayoutTests/ChangeLog 2017-07-29 10:00:33 UTC (rev 220041)
@@ -1,3 +1,16 @@
+2017-07-29 Aaron Chu <[email protected]>
+
+ AX: FKA: Buttons need a visible focus indicator
+ https://bugs.webkit.org/show_bug.cgi?id=171040
+ <rdar://problem/30922548>
+
+ Reviewed by Antoine Quint.
+
+ * media/modern-media-controls/button/button-focus-state-expected.txt: Added.
+ * media/modern-media-controls/button/button-focus-state.html: Added.
+ * platform/ios-simulator/TestExpectations:
+ * platform/mac-elcapitan/TestExpectations:
+
2017-07-28 Sam Weinig <[email protected]>
[WebIDL] Remove JS builtin bindings for FetchHeaders
Added: trunk/LayoutTests/media/modern-media-controls/button/button-focus-state-expected.txt (0 => 220041)
--- trunk/LayoutTests/media/modern-media-controls/button/button-focus-state-expected.txt (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/button/button-focus-state-expected.txt 2017-07-29 10:00:33 UTC (rev 220041)
@@ -0,0 +1,14 @@
+Testing an IconButton has a blue background-color when focused.
+
+On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
+
+
+Confirm inital icon button color.
+PASS window.getComputedStyle(button.image.element).backgroundColor is "rgba(255, 255, 255, 0.54902)"
+Confirm icon button color changed after focus.
+PASS window.getComputedStyle(button.image.element).backgroundColor is not "rgba(255, 255, 255, 0.54902)"
+PASS successfullyParsed is true
+
+TEST COMPLETE
+
+
Added: trunk/LayoutTests/media/modern-media-controls/button/button-focus-state.html (0 => 220041)
--- trunk/LayoutTests/media/modern-media-controls/button/button-focus-state.html (rev 0)
+++ trunk/LayoutTests/media/modern-media-controls/button/button-focus-state.html 2017-07-29 10:00:33 UTC (rev 220041)
@@ -0,0 +1,31 @@
+<script src=""
+<script src="" type="text/_javascript_"></script>
+<body>
+<script type="text/_javascript_">
+
+description("Testing an <code>IconButton</code> has a blue background-color when focused.");
+
+window.jsTestIsAsync = true;
+
+const button = new Button({ layoutDelegate: { layoutTraits: LayoutTraits.macOS }, iconName: Icons.Pause });
+document.body.appendChild(button.element);
+
+
+scheduler.frameDidFire = function ()
+{
+
+debug("Confirm inital icon button color.");
+shouldBeEqualToString("window.getComputedStyle(button.image.element).backgroundColor", "rgba(255, 255, 255, 0.54902)");
+
+button.element.focus();
+
+debug("Confirm icon button color changed after focus.");
+shouldNotBeEqualToString("window.getComputedStyle(button.image.element).backgroundColor", "rgba(255, 255, 255, 0.54902)");
+
+finishJSTest();
+
+}
+
+</script>
+<script src=""
+</body>
\ No newline at end of file
Modified: trunk/LayoutTests/platform/ios-simulator/TestExpectations (220040 => 220041)
--- trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-07-29 02:39:38 UTC (rev 220040)
+++ trunk/LayoutTests/platform/ios-simulator/TestExpectations 2017-07-29 10:00:33 UTC (rev 220041)
@@ -124,6 +124,9 @@
media/modern-media-controls/placard-support/ipad [ Skip ]
media/modern-media-controls/scrubber-support/ipad/scrubber-support-drag.html [ Skip ]
+# There is no focus state for on iOS
+media/modern-media-controls/button/button-focus-state.html [ Skip ]
+
# These tests rely on fullscreen which do not use the WebKit media controls on iOS
media/modern-media-controls/controls-visibility-support/controls-visibility-support-fullscreen-on-parent-element.html [ Skip ]
media/modern-media-controls/controls-visibility-support/controls-visibility-support-fullscreen-on-video.html [ Skip ]
Modified: trunk/LayoutTests/platform/mac-elcapitan/TestExpectations (220040 => 220041)
--- trunk/LayoutTests/platform/mac-elcapitan/TestExpectations 2017-07-29 02:39:38 UTC (rev 220040)
+++ trunk/LayoutTests/platform/mac-elcapitan/TestExpectations 2017-07-29 10:00:33 UTC (rev 220041)
@@ -5,3 +5,4 @@
fast/forms/search-vertical-alignment.html [ Skip ]
fast/forms/number/number-appearance-spinbutton-layer.html [ Skip ]
media/modern-media-controls/pip-support [ Skip ]
+media/modern-media-controls/button/button-focus-state.html [ Skip ]
Modified: trunk/Source/WebCore/ChangeLog (220040 => 220041)
--- trunk/Source/WebCore/ChangeLog 2017-07-29 02:39:38 UTC (rev 220040)
+++ trunk/Source/WebCore/ChangeLog 2017-07-29 10:00:33 UTC (rev 220041)
@@ -1,3 +1,21 @@
+2017-07-29 Aaron Chu <[email protected]>
+
+ AX: FKA: Buttons need a visible focus indicator
+ https://bugs.webkit.org/show_bug.cgi?id=171040
+ <rdar://problem/30922548>
+
+ Reviewed by Antoine Quint.
+
+ Added a background color for the focus state of the icon buttons in modern media controls.
+
+ Test: media/modern-media-controls/button/button-focus-state.html
+
+ * Modules/modern-media-controls/controls/button.css:
+ (button:focus):
+ (button:focus > picture):
+ * Modules/modern-media-controls/controls/slider.css:
+ (.slider > input):
+
2017-07-28 Sam Weinig <[email protected]>
[WebIDL] Remove JS builtin bindings for FetchHeaders
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css (220040 => 220041)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css 2017-07-29 02:39:38 UTC (rev 220040)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/button.css 2017-07-29 10:00:33 UTC (rev 220041)
@@ -50,6 +50,15 @@
pointer-events: none;
}
+button:focus {
+ outline: none;
+}
+
+button:focus > picture {
+ background-color: -webkit-focus-ring-color !important;
+ mix-blend-mode: normal !important;
+}
+
button.skip-back > picture,
button.play-pause > picture,
button.skip-forward > picture {
Modified: trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css (220040 => 220041)
--- trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2017-07-29 02:39:38 UTC (rev 220040)
+++ trunk/Source/WebCore/Modules/modern-media-controls/controls/slider.css 2017-07-29 10:00:33 UTC (rev 220041)
@@ -81,8 +81,12 @@
height: 100%;
background-color: transparent;
-webkit-appearance: none !important;
+ /* Disabling this for now because the outline is visualy inconsistent with the button
+ focus state. Tracking at https://bugs.webkit.org/show_bug.cgi?id=174906 */
+ outline: none;
}
+
.ios .slider > input {
/* On iOS only, we want to only capture events on the thumb and not the track. */
pointer-events: none;
