title: WebVTT styling not applied in simple example
body: <p>I've been trying to get .vtt subtitles working on a video using this simple HTML: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;style&gt;
      /* video::cue{
        color:yellow
      } */
      &lt;/style&gt;
    &lt;/head&gt;
  &lt;body&gt;
  
  &lt;video width="600" height="400" controls&gt;
    &lt;source src="./MIB2.mp4" type="video/mp4"&gt;
    &lt;track id="textTrack" label="pt" kind="subtitles" srclang="pt" src="./MIB2.vtt" default &gt;
  &lt;/video&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  
  </code></pre>
  
  <p>I've added some colors and styles to my .vtt file but they don't seem to be working.</p>
  
  <p>For example: VLC will show all of my red colors (from ) but once I try it in chrome 71 the color won't show. Other things like bolt will work, but still no extra styles are applied like I gave it. I don't know why this is happening or how to fix this. Is this a bug? It also doesn't work in firefox btw.</p>
  
  <p>The subtitle file is:</p>
  
  <pre><code>WEBVTT
  
  
  REGION
  id:Frank
  color:rgba(255,0,0,1)
  
  STYLE
  ::cue(#1){
    background-image: linear-gradient(to bottom, dimgray, lightgray);
    color: blue;
  }
  ::cue(b){
    background-image: linear-gradient(to bottom, dimgray, lightgray);
    color: green;
  }
  ::cue {
    color: red;
  }
  
  1
  00:00:00.500 --&gt; 00:00:04.000
  Aprendi #1 a &lt;b&gt;me&lt;/b&gt; virar e &lt;c.red.caps&gt;você voltou&lt;/c&gt;
  
  2
  00:00:04.100 --&gt; 00:00:06.000 align:left size:150% region:Frank
  &lt;v.first.loud Frank&gt;do espaço &lt;b&gt;sideral&lt;/b&gt;
  
  THIRD line
  00:00:06.100 --&gt; 00:00:10.500 align:right size:50%
  e agora vejo que você está aqui no baixo astral
  
  4
  00:00:10.600 --&gt; 00:00:14.000 align:left size:150%
  eu devia me mudar e ter tomado a sua chave
  
  5
  00:00:14.100 --&gt; 00:00:17.500 align:right size:50%
  se soubesse que ia voltar para mim enfernizar
  
  6
  00:00:17.600 --&gt; 00:00:19.500 align:left size:150%
  agora vai, sai daqui
  
  7
  00:00:19.600 --&gt; 00:00:21.500 align:right size:50%
  Frank!
  
  8
  00:00:21.600 --&gt; 00:00:24.100 align:left size:150%
  ponha a cabeça para dentro
  
  9
  00:00:24.200 --&gt; 00:00:26.500 align:right size:50%
  antes que eu emprense nessa janela
  
  10
  00:00:26.600 --&gt; 00:00:29.500 align:left size:150%
  tá legal
  
  11
  00:00:29.600 --&gt; 00:00:33.500 align:right size:50%
  hhmm... hhmmm... hmmm...
  
  12
  00:00:33.600 --&gt; 00:00:34.000 align:left size:150%
  FRANK!!!
  
  
  </code></pre>