<!doctype html>
<title>WebVTT overscan margin test</title>
<script src="../media-controls.js"></script>
<script src="../../resources/testharness.js"></script>
<script src="../../resources/testharnessreport.js"></script>
<script>
  setup(function() { internals.settings.setTextTrackMarginPercentage(5); });

  var makeTest = function(time, edgeName, marginAssertFunc) {
    var expectedText = "Checks " + edgeName + " margin";
    var t = async_test(expectedText);
    t.step(function() {
      var video = document.createElement('video');
      video.width = 320;
      video.height = 240;
      var track = document.createElement('track');
      track.src = "captions-webvtt/captions-overscan.vtt";
      track['default'] = true;
      track.kind = 'captions';
      video.appendChild(track);
      document.body.appendChild(video);

      video.src = '../content/test.ogv';
      video.oncanplaythrough = function() { video.currentTime = time; };
      video.onseeked = t.step_func(function() {
        var testCueDisplayBox = textTrackDisplayElement(video);

        assert_equals(video.currentTime, time, "video.currentTime");
        assert_equals(track.track.activeCues.length, 1, "activeCues.length");
        assert_equals(track.track.activeCues[0].text, expectedText, "activeCues[0].text");
        assert_equals(testCueDisplayBox.innerText, expectedText, "testCueDisplayBox.innerText");

        marginAssertFunc(testCueDisplayBox, video);
        t.done();
      });
    });
  };

  onload = function() {
    makeTest(0.5, "left", function(box, v) { assert_greater_than_equal(box.offsetLeft, v.width * 0.05); });
    makeTest(1.5, "right", function(box, v) { assert_less_than(box.offsetLeft + box.offsetWidth, v.width * 0.95); });
    makeTest(2.5, "bottom", function(box, v) { assert_less_than(box.offsetTop + box.offsetHeight, v.height * 0.95); });
    makeTest(3.5, "top", function(box, v) { assert_greater_than_equal(box.offsetTop, v.height * 0.05); });
  };
</script>