Bug 875305 - Replace slow webvtt caption selectors with classes. r=bz

We set the class caption-box class on the anonymous div which
acts as the parent container for the captions overlayed on
the video frame.

caption-text isn't currently used, but will be applied to
child elements by when bug 833382 lands.

layout/generic/nsVideoFrame.cpp

@@ -17,6 +17,7 @@
 #include "nsIDOMHTMLImageElement.h"
 #include "nsIDOMHTMLElement.h"
 #include "nsDisplayList.h"
+#include "nsGenericHTMLElement.h"
 #include "gfxContext.h"
 #include "gfxImageSurface.h"
 #include "nsPresContext.h"
@@ -111,6 +112,8 @@ nsVideoFrame::CreateAnonymousContent(nsTArray<ContentInfo>& aElements)
     NS_ENSURE_TRUE(nodeInfo, NS_ERROR_OUT_OF_MEMORY);
     mCaptionDiv = NS_NewHTMLDivElement(nodeInfo.forget());
     NS_ENSURE_TRUE(mCaptionDiv, NS_ERROR_OUT_OF_MEMORY);
+    nsGenericHTMLElement* div = static_cast<nsGenericHTMLElement*>(mCaptionDiv.get());
+    div->SetClassName(NS_LITERAL_STRING("caption-box"));
 
     if (!aElements.AppendElement(mCaptionDiv))
       return NS_ERROR_OUT_OF_MEMORY;

layout/style/html.css

@@ -726,14 +726,14 @@ audio:not([controls]) {
   -moz-transform: translate(0) !important;
 }
 
-video > div {
+video > .caption-box {
   text-align: center;
   font-weight: bold;
   font-size: 24px;
   pointer-events: none;
 }
 
-video > div p {
+video > div .caption-text {
   color: gold;
   background-color: rgba(105,105,105,0.4);
   pointer-events: auto;