Bug 1322512 - force <audio controls> to have horizontal writing-mode, so that its control bar is never an orthogonal flow. r=dholbert draft
authorRay Lin <ralin@mozilla.com>
Fri, 23 Dec 2016 15:21:46 +0800
changeset 454739 6ecadc4abaec40a4553dcdf6ea00b148f23d0f54
parent 454641 79ef936724454728beeeba41fb76a61d02c7c226
child 540786 1712771f3d14e64d9bd486360486b41e51ed74a2
push id40015
push userbmo:ralin@mozilla.com
push dateFri, 30 Dec 2016 02:36:13 +0000
reviewersdholbert
bugs1322512
milestone53.0a1
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%;