The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/e3e69ba5bf65da68569f6376d338191e16259bc9

commit e3e69ba5bf65da68569f6376d338191e16259bc9
Author: Tommy Steimel <steimel@chromium.org>
Date: Sat Apr 21 02:22:43 2018

Depend on CSS class for VR styling instead of media query

This CL changes the VR-specific CSS rules for modern media controls to
use an "immersive-mode" class instead of depending on the broken media
query.

Bug:  834458 
Change-Id: Ic73d1a78167bc9afaa6266bf13e85625b60f95bd
Reviewed-on: https://chromium-review.googlesource.com/1020400
Reviewed-by: Daniel Cheng <dcheng@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/heads/master@{#552554}
[add] https://crrev.com/e3e69ba5bf65da68569f6376d338191e16259bc9/third_party/WebKit/LayoutTests/media/controls/modern/immersive-mode-adds-css-class.html
[modify] https://crrev.com/e3e69ba5bf65da68569f6376d338191e16259bc9/third_party/WebKit/LayoutTests/media/media-controls.js
[modify] https://crrev.com/e3e69ba5bf65da68569f6376d338191e16259bc9/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/e3e69ba5bf65da68569f6376d338191e16259bc9/third_party/blink/renderer/modules/media_controls/media_controls_impl.cc
[modify] https://crrev.com/e3e69ba5bf65da68569f6376d338191e16259bc9/third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css

Pls add appropriate OSs label. Thank you.

Please confirm the fix works in canary.

Just checked and it works. Thanks!

Your change meets the bar and is auto-approved for M67. Please go ahead and merge the CL to branch 3396 manually. Please contact milestone owner if you have questions.
Owners: cmasso@(Android), cmasso@(iOS), kbleicher@(ChromeOS), govind@(Desktop)

For more details visit https://www.chromium.org/issue-tracking/autotriage - Your friendly Sheriffbot

The following revision refers to this bug:
  https://chromium.googlesource.com/chromium/src.git/+/b36c08dcbdb9c76b6db9cac71afd1e4ee38595c2

commit b36c08dcbdb9c76b6db9cac71afd1e4ee38595c2
Author: Tommy Steimel <steimel@chromium.org>
Date: Wed Apr 25 21:47:56 2018

Depend on CSS class for VR styling instead of media query

This CL changes the VR-specific CSS rules for modern media controls to
use an "immersive-mode" class instead of depending on the broken media
query.

Bug:  834458 
Change-Id: Ic73d1a78167bc9afaa6266bf13e85625b60f95bd
Reviewed-on: https://chromium-review.googlesource.com/1020400
Reviewed-by: Daniel Cheng <dcheng@chromium.org>
Reviewed-by: Mounir Lamouri <mlamouri@chromium.org>
Commit-Queue: Tommy Steimel <steimel@chromium.org>
Cr-Original-Commit-Position: refs/heads/master@{#552554}(cherry picked from commit e3e69ba5bf65da68569f6376d338191e16259bc9)
Reviewed-on: https://chromium-review.googlesource.com/1028950
Reviewed-by: Tommy Steimel <steimel@chromium.org>
Cr-Commit-Position: refs/branch-heads/3396@{#313}
Cr-Branched-From: 9ef2aa869bc7bc0c089e255d698cca6e47d6b038-refs/heads/master@{#550428}
[add] https://crrev.com/b36c08dcbdb9c76b6db9cac71afd1e4ee38595c2/third_party/WebKit/LayoutTests/media/controls/modern/immersive-mode-adds-css-class.html
[modify] https://crrev.com/b36c08dcbdb9c76b6db9cac71afd1e4ee38595c2/third_party/WebKit/LayoutTests/media/media-controls.js
[modify] https://crrev.com/b36c08dcbdb9c76b6db9cac71afd1e4ee38595c2/third_party/blink/renderer/core/frame/settings.json5
[modify] https://crrev.com/b36c08dcbdb9c76b6db9cac71afd1e4ee38595c2/third_party/blink/renderer/modules/media_controls/media_controls_impl.cc
[modify] https://crrev.com/b36c08dcbdb9c76b6db9cac71afd1e4ee38595c2/third_party/blink/renderer/modules/media_controls/resources/modernMediaControls.css