| OLD | NEW |
|---|
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap
partially</title> | 2 <title>Reference for WebVTT rendering, repositioning (down) when 2 cues overlap
partially</title> |
| 3 <style> | 3 <style> |
| 4 html { overflow:hidden } | 4 html { overflow:hidden } |
| 5 body { margin:0 } | 5 body { margin:0 } |
| 6 .video { | 6 .video { |
| 7 display: inline-block; | 7 display: inline-block; |
| 8 width: 1280px; | 8 width: 320px; |
| 9 height: 720px; | 9 height: 180px; |
| 10 position: relative | 10 position: relative; |
| 11 font-size: 9px; |
| 11 } | 12 } |
| 12 #cue1 { | 13 #cue1 { |
| 13 position: absolute; | 14 position: absolute; |
| 14 top: 50%; | 15 top: 50%; |
| 15 left: 0; | 16 left: 0; |
| 16 right: 0; | 17 right: 0; |
| 17 margin-top: -18px; | 18 margin-top: -4.5px; |
| 18 text-align: center | 19 text-align: center |
| 19 } | 20 } |
| 20 #cue2 { | 21 #cue2 { |
| 21 position: absolute; | 22 position: absolute; |
| 22 top: 50%; | 23 top: 50%; |
| 23 left: 0; | 24 left: 0; |
| 24 right: 0; | 25 right: 0; |
| 25 margin-top: 18px; | 26 margin-top: 4.5px; |
| 26 text-align: center | 27 text-align: center |
| 27 } | 28 } |
| 28 .cue > span { | 29 .cue > span { |
| 29 font-family: Ahem, sans-serif; | 30 font-family: Ahem, sans-serif; |
| 30 background: rgba(0,0,0,0.8); | 31 background: rgba(0,0,0,0.8); |
| 31 color: green; | 32 color: green; |
| 32 font-size: 36px; | |
| 33 } | 33 } |
| 34 </style> | 34 </style> |
| 35 <div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</sp
an></span><span class="cue" id="cue2"><span>This is another test subtitle</span>
</span></div> | 35 <div class="video"><span class="cue" id="cue1"><span>This is a test subtitle</sp
an></span><span class="cue" id="cue2"><span>This is another test subtitle</span>
</span></div> |
| OLD | NEW |
|---|
Chromium Code Reviews
Issue 2704543002:
Import wpt@3bd204d7e86fd81e98e63f4ce59b95d98bad1c54 (Closed)
