<!doctype html>
<!--
    Tests that the height keywords are respected by the parser.
-->
<script src="../../resources/js-test-pre.js"></script>

<div style="height: -webkit-min-content; min-height: -webkit-min-content; max-height: -webkit-min-content;" expected-data="-webkit-min-content"></div>
<div style="height: -webkit-max-content; min-height: -webkit-max-content; max-height: -webkit-max-content;" expected-data="-webkit-max-content"></div>
<div style="height: -webkit-fill-available; min-height: -webkit-fill-available; max-height: -webkit-fill-available;" expected-data="-webkit-fill-available"></div>
<div style="height: -webkit-fit-content; min-height: -webkit-fit-content; max-height: -webkit-fit-content;" expected-data="-webkit-fit-content"></div>

<div style="height: min-content; min-height: min-content; max-height: min-content;" expected-data="min-content"></div>
<div style="height: max-content; min-height: max-content; max-height: max-content;" expected-data="max-content"></div>
<div style="height: fit-content; min-height: fit-content; max-height: fit-content;" expected-data="fit-content"></div>

<script>
    description('Tests that the height keywords are parsed.');

    var divs = document.querySelectorAll('div.expected-data');
    for (var i = 0; i < divs.length; ++i) {
        shouldBe('divs[i].style.height', 'divs[i].getAttribute("expected-data")');
        shouldBe('divs[i].style.minHeight', 'divs[i].getAttribute("expected-data")');
        shouldBe('divs[i].style.maxHeight', 'divs[i].getAttribute("expected-data")');
    }

    var KEYWORDS = ['min-content', '-webkit-min-content', 'max-content', '-webkit-max-content',  'fit-content', '-webkit-fit-content', '-webkit-fill-available'];
    var div;

    KEYWORDS.forEach(function(keyword) {
        div = document.createElement('div');
        div.style.height = keyword;
        div.style.minHeight = keyword;
        div.style.maxHeight = keyword;
        shouldBe('div.style.height', '"' + keyword + '"');
        shouldBe('div.style.minHeight', '"' + keyword + '"');
        shouldBe('div.style.maxHeight', '"' + keyword + '"');
    });
</script>

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