--- /dev/null
+layer at (0,0) size 800x600
+ RenderView at (0,0) size 800x600
+layer at (0,0) size 800x600
+ RenderBlock {HTML} at (0,0) size 800x600
+ RenderBody {BODY} at (8,8) size 784x584
+ RenderBlock {P} at (0,0) size 784x18
+ RenderText {#text} at (0,0) size 153x18
+ text run at (0,0) width 153: "Test controls placement."
+ RenderBlock (anonymous) at (0,34) size 784x174
+ RenderMedia {AUDIO} at (0,0) size 234x69 [bgcolor=#0000FF]
+ RenderBR {BR} at (234,69) size 0x0
+ RenderBR {BR} at (0,69) size 0x18
+ RenderMedia {AUDIO} at (0,87) size 320x69 [bgcolor=#0000FF]
+ RenderBR {BR} at (320,156) size 0x0
+ RenderBR {BR} at (0,156) size 0x18
+ RenderBlock (anonymous) at (0,208) size 784x18
+ RenderBR {BR} at (0,0) size 0x18
+layer at (8,42) size 234x69
+ RenderBlock (positioned) {DIV} at (8,42) size 234x69
+layer at (8,42) size 234x69
+ RenderBlock (positioned) {DIV} at (0,0) size 234x69 [bgcolor=#00000099] [border: (2px solid #EEEEEE)]
+layer at (92,49) size 66x40
+ RenderButton {INPUT} at (84,7) size 66x40 [color=#FFFFFF]
+ RenderBlock (anonymous) at (0,0) size 66x40
+ RenderText at (18,0) size 30x38
+ text run at (18,0) width 30: "\x{25B6}"
+layer at (15,88) size 220x16
+ RenderBlock (positioned) {DIV} at (7,46) size 220x16 [bgcolor=#EEEEEE]
+ RenderText {#text} at (165,0) size 50x15
+ text run at (165,0) width 50: "00:00:00"
+layer at (8,129) size 320x69
+ RenderBlock (positioned) {DIV} at (8,129) size 320x69
+layer at (51,129) size 234x69
+ RenderBlock (positioned) {DIV} at (43,0) size 234x69 [bgcolor=#00000099] [border: (2px solid #EEEEEE)]
+layer at (135,136) size 66x40
+ RenderButton {INPUT} at (84,7) size 66x40 [color=#FFFFFF]
+ RenderBlock (anonymous) at (0,0) size 66x40
+ RenderText at (18,0) size 30x38
+ text run at (18,0) width 30: "\x{25B6}"
+layer at (58,175) size 220x16
+ RenderBlock (positioned) {DIV} at (7,46) size 220x16 [bgcolor=#EEEEEE]
+ RenderText {#text} at (165,0) size 50x15
+ text run at (165,0) width 50: "00:00:00"
+layer at (8,216) size 320x100
+ RenderMedia {AUDIO} at (8,216) size 320x100 [bgcolor=#0000FF]
+layer at (8,216) size 320x100
+ RenderBlock (positioned) {DIV} at (0,0) size 320x100
+layer at (51,231) size 234x69
+ RenderBlock (positioned) {DIV} at (43,15) size 234x69 [bgcolor=#00000099] [border: (2px solid #EEEEEE)]
+layer at (135,238) size 66x40
+ RenderButton {INPUT} at (84,7) size 66x40 [color=#FFFFFF]
+ RenderBlock (anonymous) at (0,0) size 66x40
+ RenderText at (18,0) size 30x38
+ text run at (18,0) width 30: "\x{25B6}"
+layer at (58,277) size 220x16
+ RenderBlock (positioned) {DIV} at (7,46) size 220x16 [bgcolor=#EEEEEE]
+ RenderText {#text} at (165,0) size 50x15
+ text run at (165,0) width 50: "00:00:00"
+layer at (20,87) size 142x17
+ RenderSlider zI: 1 {INPUT} at (12,45) size 142x16 [border: (2px solid #FFFFFF)]
+layer at (22,90) size 15x15
+ RenderBlock (relative positioned) {DIV} at (2,2) size 15x15
+layer at (63,174) size 142x17
+ RenderSlider zI: 1 {INPUT} at (12,45) size 142x16 [border: (2px solid #FFFFFF)]
+layer at (65,177) size 15x15
+ RenderBlock (relative positioned) {DIV} at (2,2) size 15x15
+layer at (63,276) size 142x17
+ RenderSlider zI: 1 {INPUT} at (12,45) size 142x16 [border: (2px solid #FFFFFF)]
+layer at (65,279) size 15x15
+ RenderBlock (relative positioned) {DIV} at (2,2) size 15x15
/* media controls */
/* FIXME this is not the final styling */
-video::-webkit-media-controls-panel {
- display: inline-block;
+audio {
+ width: 234px;
+ height: 69px;
+}
+
+audio::-webkit-media-controls-panel, video::-webkit-media-controls-panel {
position: absolute;
left: 0; right: 0; top: 0; bottom: 0;
- margin: auto auto 10% auto;
+ margin: auto;
width: 230px;
height: 65px;
border: 2px solid #eee;
-webkit-user-select: none;
}
-video::-webkit-media-controls-play-button {
+video::-webkit-media-controls-panel {
+ margin-bottom: 10%;
+}
+
+audio::-webkit-media-controls-play-button, video::-webkit-media-controls-play-button {
-webkit-appearance: none;
- display: inline-block;
position: absolute;
margin: 5px auto auto auto;
left: 0; right: 0; top: 0; bottom: 0;
height: 1.2em;
}
-video::-webkit-media-controls-timeline {
+audio::-webkit-media-controls-timeline, video::-webkit-media-controls-timeline {
-webkit-appearance: slider-horizontal;
position: absolute;
margin: auto auto 5px 10px;
z-index: 1;
}
-video::-webkit-media-controls-time-display {
- display: inline-block;
+audio::-webkit-media-controls-time-display, video::-webkit-media-controls-time-display {
position: absolute;
margin: auto 5px 5px 5px;
left: 0; right: 0; top: 0; bottom: 0px;