<!DOCTYPE html>
<html>
  <head>
    <style>
    #captionWindow {
      position: absolute;
      bottom: 10px;
      text-align: center;
      padding: 25px;
    }
    </style>
  </head>
  <body>
    <div id="captionWindow">
      <span id="caption">Captions will look like this</span>
      <span id="captionsDisabled" style="visibility:hidden;color:white">Captions are disabled</span>
    </div>
  </body>
  <script>
    // Ignore characterEdgeStyle attribute because it is currently unsupported by Cobalt.
    //
    // Ignore fontFamily, backgroundOpacity, fontOpacity, and windowOpacity attributes because
    // they require lengthy conversion (and will likely be provided if the other attributes are).

    let settings = navigator.systemCaptionSettings;
    console.log(settings);

    let setCaptionStyle = (elementId, cssProperty, state, captionStyle) => {
      if (state == "set" || state == "override") {
        document.getElementById(elementId).style[cssProperty] = captionStyle;
      }
    }

    if (settings.isEnabled) {
      setCaptionStyle("caption", "backgroundColor", settings.backgroundColorState, settings.backgroundColor);
      setCaptionStyle("caption", "color", settings.fontColorState, settings.fontColor);
      setCaptionStyle("caption", "fontSize", settings.fontSizeState, `${settings.fontSize}px`);
      setCaptionStyle("captionWindow", "backgroundColor", settings.windowColorState, settings.windowColor);
    } else {
      document.getElementById("captionsDisabled").style.visibility = "visible";
      document.getElementById("caption").style.visibility = "hidden";
    }
  </script>
</html>