<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<script src="../resources/media-controls-utils.js" type="text/javascript"></script>
<body>
<script type="text/javascript">

window.jsTestIsAsync = true;

description("Testing the <code>TimeLabel</code> class.");

const timeLabel = new TimeLabel;

shouldBe("timeLabel.value", "0");
shouldBeEqualToString("timeLabel.element.localName", "div");
shouldBeEqualToString("timeLabel.element.className", "time-label");

timeLabel.element.id = "elasped";

const NaNTimeLabel = new TimeLabel;
NaNTimeLabel.setValueWithNumberOfDigits(NaN, 4);

const digits = [3, 4, 5, 6];
let elapsedTimeLabels = new Map;
let remainingTimeLabels = new Map;
let durationTimeLabels = new Map;
for (let numberOfDigits of digits) {
    elapsedTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Elapsed);
    elapsedTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
    remainingTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Remaining);
    remainingTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
    durationTimeLabels[numberOfDigits] = new TimeLabel(TimeLabel.Type.Duration);
    durationTimeLabels[numberOfDigits].setValueWithNumberOfDigits(1, numberOfDigits);
}

const durationTimeLabel = new TimeLabel(TimeLabel.Type.Duration);
durationTimeLabel.element.id = "duration";
durationTimeLabel.setValueWithNumberOfDigits(0, 4);

const remainingTimeLabel = new TimeLabel(TimeLabel.Type.Remaining);
remainingTimeLabel.element.id = "remaining";
remainingTimeLabel.setValueWithNumberOfDigits(0, 4);

const elaspedTimeLabel = new TimeLabel(TimeLabel.Type.Elapsed);
elaspedTimeLabel.element.id = "elasped";
elaspedTimeLabel.setValueWithNumberOfDigits(0, 4);

let style;
let elaspedLabel;
let remainingLabel;
let durationLabel;
scheduler.frameDidFire = function()
{
    document.body.appendChild(timeLabel.element);
    document.body.appendChild(durationTimeLabel.element);
    document.body.appendChild(remainingTimeLabel.element);
    document.body.appendChild(elaspedTimeLabel.element);

    style = window.getComputedStyle(timeLabel.element);

    shouldBeEqualToString("style.position", "absolute");
    shouldBeEqualToString("style.fontFamily", "-apple-system-monospaced-numbers");
    shouldBeEqualToString("style.fontSize", "12px");

    debug("");
    debug(`NaNTimeLabel.element.textContent = ${NaNTimeLabel.element.textContent}`);

    debug("");

    elaspedLabel = elaspedTimeLabel.element.getAttribute("aria-label").split(":")[0];
    remainingLabel = remainingTimeLabel.element.getAttribute("aria-label").split(":")[0];
    durationLabel = durationTimeLabel.element.getAttribute("aria-label").split(":")[0];
    shouldBeEqualToString("elaspedLabel", "Elapsed");
    shouldBeEqualToString("remainingLabel", "Remaining");
    shouldBeEqualToString("durationLabel", "Duration");

    timeLabel.element.remove();
    durationTimeLabel.element.remove();
    remainingTimeLabel.element.remove();
    elaspedTimeLabel.element.remove();

    for (numberOfDigits of digits) {
        debug("");
        debug(`elapsedTimeLabels[${numberOfDigits}].element.textContent = ${elapsedTimeLabels[numberOfDigits].element.textContent}`);
        debug(`elapsedTimeLabels[${numberOfDigits}].width = ${elapsedTimeLabels[numberOfDigits].width}`);
        debug(`remainingTimeLabels[${numberOfDigits}].element.textContent = ${remainingTimeLabels[numberOfDigits].element.textContent}`);
        debug(`remainingTimeLabels[${numberOfDigits}].width = ${remainingTimeLabels[numberOfDigits].width}`);
        debug(`durationTimeLabels[${numberOfDigits}].element.textContent = ${durationTimeLabels[numberOfDigits].element.textContent}`);
        debug(`durationTimeLabels[${numberOfDigits}].width = ${durationTimeLabels[numberOfDigits].width}`);
    }

    debug("");
    finishMediaControlsTest();
};

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>