Bug 1322512 - force <audio controls> to have horizontal writing-mode, so that its control bar is never an orthogonal flow. r=dholbert
authorRay Lin <ralin@mozilla.com>
Fri, 23 Dec 2016 15:21:46 +0800
changeset 327860 56915773d15ad473e210ca732150d8674ecc8720
parent 327859 3e71fdb434e7ed4eb652bc15534cfbed4c0b96e7
child 327861 9c825a25d288e346b46b1d306cc4d4ba4004ae40
child 327900 e3e1296290268ebf9065f2c8403210da1ae1e534
push id85304
push userphilringnalda@gmail.com
push dateWed, 04 Jan 2017 02:47:06 +0000
treeherdermozilla-inbound@6176579defcb [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersdholbert
bugs1322512
milestone53.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1322512 - force <audio controls> to have horizontal writing-mode, so that its control bar is never an orthogonal flow. r=dholbert MozReview-Commit-ID: 4hLOYrBtiGc
layout/reftests/bugs/1322512-1-ref.html
layout/reftests/bugs/1322512-1.html
layout/reftests/bugs/reftest.list
layout/style/res/html.css
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/1322512-1-ref.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<audio controls></audio>
+</body>
+</html>
new file mode 100644
--- /dev/null
+++ b/layout/reftests/bugs/1322512-1.html
@@ -0,0 +1,6 @@
+<!DOCTYPE HTML>
+<html>
+<body>
+<audio controls style="writing-mode: vertical-lr"></audio>
+</body>
+</html>
--- a/layout/reftests/bugs/reftest.list
+++ b/layout/reftests/bugs/reftest.list
@@ -1981,10 +1981,9 @@ fuzzy(2,40000) == 1316719-1a.html 131671
 fuzzy(2,40000) == 1316719-1b.html 1316719-1-ref.html
 fuzzy(2,40000) == 1316719-1c.html 1316719-1-ref.html
 
 HTTP == 652991-1a.html 652991-1-ref.html
 HTTP == 652991-1b.html 652991-1-ref.html
 HTTP == 652991-2.html 652991-2-ref.html
 HTTP == 652991-3.html 652991-3-ref.html
 HTTP == 652991-4.html 652991-4-ref.html
-
-
+== 1322512-1.html 1322512-1-ref.html
--- a/layout/style/res/html.css
+++ b/layout/style/res/html.css
@@ -751,16 +751,23 @@ video > img:-moz-native-anonymous {
   object-fit: inherit !important;
   object-position: inherit !important;
 }
 
 audio:not([controls]) {
   display: none;
 }
 
+audio[controls] {
+  /* This ensures that intrinsic sizing can reliably shrinkwrap our
+      controls (which are also always horizontal) and produce a
+      reasonable intrinsic size from them. */
+  writing-mode: horizontal-tb !important;
+}
+
 *|*::-moz-html-canvas-content {
   display: block !important;
   /* we want to be an absolute and fixed container */
   transform: translate(0) !important;
 }
 
 video > .caption-box {
   width: 100%;