| OLD | NEW |
| 1 <!DOCTYPE html> | 1 <!DOCTYPE html> |
| 2 <title>Reference for WebVTT rendering, ::cue(*), css properties with value inher
it should inherit from media element</title> | 2 <title>Reference for WebVTT rendering, ::cue(*), css properties with value inher
it should inherit from media element</title> |
| 3 <style> | 3 <style> |
| 4 .video { | 4 .video { |
| 5 position: absolute; | 5 position: absolute; |
| 6 display: inline-block; | 6 display: inline-block; |
| 7 width: 1280px; | 7 width: 320px; |
| 8 height: 720px; | 8 height: 180px; |
| 9 position: relative; | 9 position: relative; |
| 10 color: #f0f; | 10 color: #f0f; |
| 11 white-space: pre-wrap; | 11 white-space: pre-wrap; |
| 12 font: italic small-caps bold 36px/72px sans-serif; | 12 font: italic small-caps bold 9px/18px sans-serif; |
| 13 text-decoration: overline underline line-through; | 13 text-decoration: overline underline line-through; |
| 14 text-shadow: 0px 0px 5px #0f0; | 14 text-shadow: 0px 0px 5px #0f0; |
| 15 background: #0f0 url('../../media/background.gif') repeat-x top left; | 15 background: #0f0 url('../../media/background.gif') repeat-x top left; |
| 16 outline: solid #00f 2px; | 16 outline: solid #00f 2px; |
| 17 font-size: 9px; |
| 17 } | 18 } |
| 18 .videoWhite { | 19 .videoWhite { |
| 19 position: absolute; | 20 position: absolute; |
| 20 top: 0; | 21 top: 0; |
| 21 left: 160px; | 22 left: 160px; |
| 22 width: 960px; | 23 width: 960px; |
| 23 height: 720px;; | 24 height: 180px;; |
| 24 background: #fff; | 25 background: #fff; |
| 25 z-index: 1; | 26 z-index: 1; |
| 26 } | 27 } |
| 27 .cue { | 28 .cue { |
| 28 position: absolute; | 29 position: absolute; |
| 29 bottom: 0; | 30 bottom: 0; |
| 30 left: 30%; | 31 left: 30%; |
| 31 right: 0; | 32 right: 0; |
| 32 width: 40%; | 33 width: 40%; |
| 33 text-align: center; | 34 text-align: center; |
| 34 outline: inherit; | 35 outline: inherit; |
| 35 text-shadow: inherit; | 36 text-shadow: inherit; |
| 36 text-decoration: inherit; | 37 text-decoration: inherit; |
| 37 outline-bottom: none; | 38 outline-bottom: none; |
| 38 z-index: 2 | 39 z-index: 2 |
| 39 } | 40 } |
| 40 .cue > span { | 41 .cue > span { |
| 41 background: #0f0 url('../../media/background.gif') repeat-x top left; | 42 background: #0f0 url('../../media/background.gif') repeat-x top left; |
| 42 text-decoration: inherit; | 43 text-decoration: inherit; |
| 43 white-space: pre-wrap | 44 white-space: pre-wrap |
| 44 } | 45 } |
| 45 </style> | 46 </style> |
| 46 <div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A
A A A A A A A A</span></span></div> | 47 <div class="video"><div class="videoWhite"></div><span class="cue"><span>A A A
A A A A A A A A</span></span></div> |
| OLD | NEW |