<?php
/**
 * Template Name: CSS Status Page
 **/
?>
<?php get_header(); ?>
<script>
function xhrPromise(url) {
    return new Promise(function(resolve, reject) {
        var xhrRequest = new XMLHttpRequest();
        xhrRequest.open('GET', url, true);
        xhrRequest.responseType = "json";

        xhrRequest.onload = function() {
            if (xhrRequest.status == 200 || xhrRequest.status == 0) {
                if (xhrRequest.response) {
                    resolve(xhrRequest.response);
                } else {
                    reject({ request: xhrRequest, url:url});
                }
            } else {
                reject({ request: xhrRequest, url:url});
            }
        };
        xhrRequest.onerror = function() {
            reject({ request: xhrRequest, url:url});
        };
        xhrRequest.send();
    });
}

var origin = new URL("https://<?php echo strpos(WP_HOST, "webkit.org") !== false ? "svn.webkit.org" : WP_HOST; ?>/");
var loadCSSProperties = xhrPromise(new URL("/repository/webkit/trunk/Source/WebCore/css/CSSProperties.json", origin));

</script>

<style>
:root {
    --feature-rule-color: hsl(0, 0%, 89.4%);
    --status-color: hsl(0, 0%, 60%);
    --supported-color: hsl(100, 100%, 30%);
    --non-standard-color: hsl(275.4, 77.7%, 35.1%);
    --in-development-color: hsl(24.5, 91.3%, 50.6%);
    --no-active-development-color: hsl(240, 60.6%, 59.2%);
    --partially-supported-color: hsl(180, 25%, 43.9%);
    --experimental-color: hsl(211.3, 100%, 50%);
    --under-consideration-color: hsl(5.9, 40.2%, 60%);
    --removed-not-considering-color: hsl(0, 0%, 49.8%);
    --not-implemented-color: hsl(0, 0%, 29.8%);
    --obsolete-color: hsl(50, 100%, 25.1%);
}

@media(prefers-color-scheme:dark) {
    :root {
        --feature-rule-color: hsl(0, 0%, 20%);
        --status-color: hsl(0, 0%, 51%);
        --supported-color: hsl(79.5, 45.3%, 52%);
        --non-standard-color: hsl(276.7, 36.3%, 51.4%);
        --in-development-color: hsl(24.5, 91.3%, 50.6%);
        --no-active-development-color: hsl(240, 60.6%, 59.2%);
        --partially-supported-color: hsl(180, 30%, 52%);
        --exoerimental-color: hsl(211.3, 100%, 50%);
        --under-consideration-color: hsl(0, 35%, 61%);
        --removed-not-considering-color: hsl(0, 0%, 49.8%);
        --not-implemented-color: hsl(0, 0%, 70.2%);
        --obsolete-color: hsl(31.9, 20.5%, 33.1%);
    }
}

.feature-status-page {
    animation: none !important; /* This animation can trigger a hit-testing bug, so remove it for now */
}

.page {
    display: -webkit-flex;
    display: flex;
    flex-direction: column;
    -webkit-justify-content: space-between;
    justify-content: space-between;
    box-sizing: border-box;
    width: 100%;
}

.page h1 {
    font-size: 4.2rem;
    font-weight: 500;
    line-height: 6rem;
    margin: 3rem auto;
    width: 100%;
    text-align: center;
}

.page h1 a {
    color: inherit;
}

.page h2 {
    font-weight: 200;
    font-size: 3rem;
}

.page h3 {
    font-weight: 400;
    font-size: 2.2rem;
}

.css-feature-page {
    padding-bottom: 3rem;
}

.css-feature-page p {
    max-width: 920px;
    margin: 0 auto 3rem;
}

/* Feature Filters */
.feature-filters {
    background-color: hsl(0, 0%, 0%);
    background-color: var(--figure-mattewhite-background-color);
    width: 100vw;
    left: 50%;
    position: relative;
    transform: translate(-50vw, 0);
    box-sizing: border-box;
    margin-bottom: 3rem;
    border: 1px solid hsl(0, 0%, 90.6%);
    border-color: var(--article-border-color);
    border-left: none;
    border-right: none;
}

.feature-filters .search-input {
    background-repeat: no-repeat;
    background-position-x: 0.5rem;
    background-position-y: 1rem;
    background-size: 2rem;
    padding: 1rem;
    padding-left: 3rem;
    padding-right: 8.5rem;
    font-size: 2rem;
    width: 100%;
    margin-top: 0rem;
    margin-bottom: 0rem;
    box-sizing: border-box;
    border-color: transparent;
}

.feature-filters li {
    display: inline-block;
    white-space: no-wrap;
}

.property-status label,
.feature-filters label {
    display: table-cell;
    padding: 0.5rem 1rem;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    cursor: pointer;
    float: right;
    line-height: 1;
    font-size: 1.6rem;
}

#status-filters {
    display: none;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 0;
}

.property-filters {
    max-width: 920px;
    margin: 0 auto 0;
    position: relative;
    top: 0;
}

.property-filters.opened {
    margin-top: 1.5rem;
}

.property-filters.opened #status-filters {
    display: block;
}

#status-filters label {
    margin-left: 1rem;
    margin-bottom: 1rem;
    float: none;
    display: inline-block;
    position: relative;
}

.feature-filters label {
    float: none;
    display: inline-block;
}

.status-filters {
    list-style: none;
    display: inline-block;
    text-align: center;
}

.filter-toggle:checked + .filter-status {
    color: hsl(240, 1.3%, 84.5%);
    color: var(--text-color);
}

.filter-status,
.feature-status {
    color: hsl(0, 0%, 60%);
    color: var(--status-color);
    border-color: hsl(0, 0%, 60%);
    border-color: var(--status-color);
}

.feature-status a {
    color: inherit;
}

.status-filter,
.status-marker {
    border-color: hsl(0, 0%, 60%);
    border-color: var(--status-color)
}

.filter-toggle:checked + .filter-status {
    background-color: hsl(0, 0%, 60%);
    background-color: var(--status-color);
}

.property-description.status-marker {
    border-left-width: 3px;
    border-left-style: solid;
    padding: 0.5rem 0 0.5rem 1rem;
}

.property-count {
    max-width: 920px;
    margin: 0 auto 3rem;

    text-align: right;
    color: hsl(240, 2.3%, 56.7%);
    color: var(--text-color-coolgray);
}

.property-header > h3:first-of-type {
    -webkit-flex-grow: 1;
    flex-grow: 1;
    margin: 0;
}

.property-header:after {
    position: relative;
    width: 2rem;
    height: 2rem;
    right: 0;
    top: 0.5rem;
    margin-left: 1rem;
    transition: transform 0.3s ease-out;
}

.properties {
    padding: 0;
    max-width: 920px;
    margin: 0 auto 3rem;
    border-bottom: 1px solid hsl(0, 0%, 89.4%);
    border-color: var(--feature-rule-color);
}

.properties .property {
    position: relative;
    display: block;
    max-height: intrinsic;
    min-height: 3rem;
    overflow-y: hidden;
    cursor: pointer;
    background-color: transparent;
    border-color: transparent;
    border-width: 1px;
    border-style: solid;
    border-top-color: hsl(0, 0%, 89.4%);
    border-top-color: var(--feature-rule-color);
    padding: 0.5rem;
    line-height: 1.618;
    transition: background-color 0.3s ease-in;
}

.property.opened {
    background-color: hsl(0, 0%, 100%);
    background-color: var(--figure-mattewhite-background-color);
    border-left-color: hsl(0, 0%, 89.4%);
    border-left-color: var(--feature-rule-color);
    border-right-color: hsl(0, 0%, 89.4%);
    border-right-color: var(--feature-rule-color);
    max-height: 120rem;
}

.property.opened .property-header:after {
    -webkit-transform: rotateX(-180deg);
    -moz-transform: rotateX(-180deg);
    transform: rotateX(-180deg);
    perspective: 600;
}

.property-description .toggleable {
    display: none;
}

.property.opened .property-description .toggleable {
    display: block;
    margin-top: 1rem;
}

.comment {
    font-size: smaller;
}

.more-info {
    margin-top: 0.5em;
    font-size: smaller;
}

.sub-features {
    font-size: 1.5rem;
    color: #555;
}

.sub-features ul {
    list-style: none;
    display: inline-block;
    padding: 0;
    margin: 0;
}

.sub-features li {
    display: inline;
}

.sub-features li:after {
    content: ", ";
}

.sub-features li:last-child:after {
    content: "";
}

ul.values {
    margin-left: 3em;
    margin-bottom: 0.5em;
    cursor: default;
}

.values li.hidden {
    color: #444;
}

.property-header {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.property-header .toggle {
    display: inline-block;
    background: url('images/menu-down.svg') no-repeat 50%;
    background-size: 2rem;
    border: none;
    width: 2rem;
    height: 2rem;
    position: absolute;
    right: 0;
    top: 0.5rem;
    transition: transform 0.3s ease-out;
}

.property.opened .property-header .toggle {
    transform: rotateX(-180deg);
}

.property-header h3 .spec-label ,
.property-header h3 .spec-label a {
    text-decoration: none;
    font-weight: 200;
    color: hsl(0, 0%, 33.3%);
    color: var(--text-color-medium);
}

.spec-label::before {
    content: ' — ';
}

.property-description .toggleable {
    color: hsl(0, 0%, 20%);
    color: var(--text-color);
}

.property-header h3,
.property-header a[name] {
    color: hsl(0, 0%, 26.7%);
    color: var(--text-color-heading);
}

.property-alias {
    font-size: smaller;
}

.property-header p {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.property-alias,
.value-alias,
.value-status {
    color: hsl(240, 2.3%, 56.7%);
    color: var(--text-color-coolgray);
}

.property.is-hidden {
    display: none;
}

ul.property-details {
    margin: 0;
}
.property-statusItem {
    margin-right: 0.5em;
}


.property-status,
.property-status a {
    color: #999;
}

.property .status-marker {
    border-left-width: 3px;
    border-left-style: solid;
    padding: 0.5rem 0 0.5rem 1rem;
}


.status-marker {
    border-color: hsl(0, 0%, 60%);
    border-color: var(--status-color)
}

.supported {
    color: hsl(100, 100%, 30%);
    color: var(--supported-color);
    border-color: hsl(100, 100%, 30%);
    border-color: var(--supported-color);
}

.in-development {
    color: hsl(24.5, 91.3%, 50.6%);
    color: var(--in-development-color);
    border-color: hsl(24.5, 91.3%, 50.6%);
    border-color: var(--in-development-color);
}

.under-consideration {
    color: hsl(5.9, 40.2%, 60%);
    color: var(--under-consideration-color);
    border-color: hsl(5.9, 40.2%, 60%);
    border-color: var(--under-consideration-color);
}

.no-active-development {
    color: hsl(240, 60.6%, 59.2%);
    color: var(--no-active-development-color);
    border-color: hsl(240, 60.6%, 59.2%);
    border-color: var(--no-active-development-color);
}

.experimental {
    color: hsl(211.3, 100%, 50%);
    color: var(--experimental-color);
    border-color: hsl(211.3, 100%, 50%);
    border-color: var(--experimental-color);
}

.partial-support {
    color: hsl(180, 25%, 43.9%);
    color: var(--partially-supported-color);
    border-color: hsl(180, 25%, 43.9%);
    border-color: var(--partially-supported-color);
}

.non-standard {
    color: hsl(275.4, 77.7%, 35.1%);
    color: var(--non-standard-color);
    border-color: hsl(275.4, 77.7%, 35.1%);
    border-color: var(--non-standard-color);
}

.removed,
.not-considering {
    color: hsl(0, 0%, 49.8%);
    color: var(--removed-not-considering-color);
    border-color: hsl(0, 0%, 49.8%);
    border-color: var(--removed-not-considering-color);
}

.not-implemented {
    color: hsl(0, 0%, 29.8%);
    color: var(--not-implemented-color);
    border-color: hsl(0, 0%, 29.8%);
    border-color: var(--not-implemented-color);
}

.obsolete {
    color: hsl(50, 100%, 25.1%);
    color: var(--obsolete-color);
    border-color: hsl(50, 100%, 25.1%);
    border-color: var(--obsolete-color);
}

.by-specification {
    background-color: hsl(0, 0%, 96.9%);
    background-color: var(--content-background-color);
    border-color: hsl(0, 0%, 83.9%);
    border-color: var(--input-border-color);
}

.property-filters.opened .search-input {
    border-color: hsl(0, 0%, 83.9%);
    border-color: var(--input-border-color);
}

.feature-filters .filters-toggle-button {
    background-repeat: no-repeat;
    background-size: 2rem;
    background-position: right;
    background-filter: lightness(2);
    position: absolute;
    padding-right: 2.5rem;
    right: 1rem;
    top: 1rem;
    border: none;
    color: hsl(240, 2.3%, 56.7%);
}

.feature-filters .filters-toggle-button:hover {
    filter: brightness(0);
}

#filters-toggle {
    display: none;
}

.property-filters ul {
    margin-top: 0.5rem;
}

.property-filters ul li {
    margin-bottom: 0.5rem;
}

.property-filters label > input {
    position: relative;
    top: -1px;
}

.prefixes {
    display: none;
}

#specifications {
    display: inline-block;
    font-size: 1.6rem;
    color: hsl(0, 0%, 20%);
    color: var(--text-color);
    margin-left: 1rem;
}

.filter-by-specifications-toggle {
    position: absolute;
    display: none;
    left: 1000rem;
    top: 0;
    width: 100%;
    height: 100%;
}

#specifications:disabled + .filter-by-specifications-toggle {
    display: block;
    top: 0;
    left: 0;
}

h3 a[name], .admin-bar h3 a[name] {
    top: initial;
    width: auto;
    display: inline-block;
    visibility: visible; /* Override visibility:hidden from themes/webkit/style.css */
}

.pagination:after {
    display: none;
}

.pagination,
.pagination + h1 {
    margin-top: 0;
}

@media only screen and (max-width: 1180px) {
    .feature-filters .filters-toggle-button {
        right: 3rem;
    }
}

@media only screen and (max-width: 508px) {
    #property-filters,
    #property-list {
        width: 100%;
    }

    #property-filters {
        padding-left: 2rem;
        padding-right: 2rem;
    }

    .property-header h3 {
        font-size: 2rem;
        padding-right: 0.5rem;
    }

    .property-status {
        font-size: 1.6rem;
        margin-top: 0.4rem;
        float: left;
    }

    .property-header:after {
        width: 1rem;
        height: 1rem;
        background-size: 1rem;
        top: 1rem;
    }

    .property h3 {
        font-size: 2rem;
        padding-top: 4rem;
    }

    .property-header .property-status {
        font-size: 1.6rem;
        position: absolute;
        text-align: left;
    }

    .property .moreinfo {
        flex-wrap: wrap;
    }

    .property .moreinfo .contact {
        text-align: left;
    }

    .status-filters {
        flex-basis: 100%;
    }

    .status-filters label {
        margin-left: 0;
        margin-right: 1rem;
    }
}

@media(prefers-color-scheme:dark) {
    .property-header:after {
        filter: invert(1);
    }

    .search-input:hover,
    .search-input:focus,
    .feature-filters .filters-toggle-button:hover {
        filter: brightness(2);
    }
}

</style>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>

        <div class="page css-feature-page" id="post-<?php the_ID(); ?>">

            <div class="connected pagination">
                <?php wp_nav_menu( array('theme_location'  => 'feature-subnav') ); ?>
            </div>

            <h1><a href="<?php echo get_permalink() ?>" rel="bookmark" title="Permanent Link: <?php the_title(); ?>"><?php the_title(); ?></a></h1>

            <section class="feature-filters">
                <form id="property-filters" class="property-filters page-width">
                    <input type="text" id="search" class="search-input" placeholder="Search CSS Features&hellip;" title="Filter the property list." required><label class="filters-toggle-button">Filters</label>
                    <ul id="status-filters">
                    </ul>

                    <div class="prefixes">
                        <h2>Filter by Prefix</h2>
                        <ul id="prefix-filters">
                        </ul>
                    </div>

                </form>
            </section>

            <section class="primary">
                <div id="property-list">
                    <div class="property-count">
                        <p><span id="property-count"></span> <span id="property-pluralize">properties</span></p>
                    </div>
                </div>

                <template id="success-template">
                    <ul class="properties" id="properties-container"></ul>

                    <p>Cannot find something? You can contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or contact the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list for questions.</p>
                    <p>You can also <a href="/contributing-code/">contribute to features</a> directly, the entire project is Open Source. To report bugs on existing features or check existing bug reports, see <a href="https://bugs.webkit.org">https://bugs.webkit.org</a>.</p>
                </template>

                <template id="error-template">
                    <p>Error: unable to load the features list (<span id="error-message"></span>).</p>
                    <p>If this is not resolved soon, please contact <a href="https://twitter.com/webkit">@webkit</a> on Twitter or the <a href="https://lists.webkit.org/mailman/listinfo/webkit-help">webkit-help</a> mailing list.</p>
                </template>

            </section>
        </div>

    <?php //comments_template(); ?>

    <?php endwhile; else: ?>

        <p>No posts.</p>

    <?php endif; ?>


<script>
function initializeStatusPage() {

    const statusOrder = [
        'supported',
        'in-development',
        'under-consideration',
        'experimental',
        'non-standard',
        'not-considering',
        'not-implemented',
        'obsolete',
        'removed',
    ];

    const readableStatus = {
        'supported': 'Supported',
        'in-development': 'In Development',
        'under-consideration': 'Under Consideration',
        'experimental': 'Experimental',
        'non-standard': 'Non-standard',
        'not-considering': 'Not considering',
        'not-implemented': 'Not implemented',
        'obsolete': 'Obsolete',
        'removed': 'Removed',
    };

    function sortAlphabetically(array)
    {
        function replaceDashPrefix(name)
        {
            if (name[0] == '-')
                return 'Z' + name.slice(1);
            return name;
        }

        array.sort(function(a, b) {
            // Sort the prefixed properties to the end.
            var aName = replaceDashPrefix(a.name.toLowerCase());
            var bName = replaceDashPrefix(b.name.toLowerCase());

            var nameCompareResult = aName.localeCompare(bName);

            if (nameCompareResult)
                return nameCompareResult;

            // Status sort
            var aStatus = a.status != undefined ? a.status.status.toLowerCase() : '';
            var bStatus = b.status != undefined ? b.status.status.toLowerCase() : '';

            return aStatus.localeCompare(bStatus);
        });
    }

    function propertyNameAliases(propertyObject)
    {
        if ('codegen-properties' in propertyObject && 'aliases' in propertyObject['codegen-properties'])
            return propertyObject['codegen-properties'].aliases;

        return [];
    }

    function propertyLonghands(propertyObject)
    {
        if ('codegen-properties' in propertyObject && 'longhands' in propertyObject['codegen-properties'])
            return propertyObject['codegen-properties'].longhands;

        return [];
    }

    const prefixRegexp = /^(-webkit-|-epub-|-apple-)(.+)$/;

    function createPropertyView(categoryObject, propertyObject)
    {
        function createLinkWithHeading(elementName, heading, linkText, linkUrl)
        {
            var container = document.createElement(elementName);
            if (heading) {
                container.textContent = heading + ": ";
            }
            var link = document.createElement("a");
            link.textContent = linkText;
            link.href = linkUrl;
            container.appendChild(link);
            return container;
        }

        function appendValueWithLink(container, value, link)
        {
            if (link) {
                var anchor = document.createElement('a');
                anchor.href = link;
                anchor.textContent = value;
                container.appendChild(anchor);
                return;
            }

            container.textContent = value;
        }

        function makeTwitterLink(twitterHandle)
        {
            if (twitterHandle[0] == "@")
                twitterHandle = twitterHandle.substring(1);
            return "https://twitter.com/" + twitterHandle;
        }

        var hasSpecificationObject = "specification" in propertyObject;
        var specificationObject = propertyObject.specification;

        var container = document.createElement('li');

        container.className = "property";

        var slug = propertyObject.name.toLowerCase().replace(/ /g, '-');
        container.setAttribute("id", "property-" + slug);

        var descriptionContainer = document.createElement('div');
        descriptionContainer.className = "property-description status-marker";

        var featureHeaderContainer = document.createElement('div');
        featureHeaderContainer.className = "property-header";
        descriptionContainer.appendChild(featureHeaderContainer);

        var titleElement = document.createElement("h3");
        var anchorLinkElement = document.createElement("a");
        anchorLinkElement.href = "#" + container.getAttribute("id");
        anchorLinkElement.name = container.getAttribute("id");
        anchorLinkElement.textContent = propertyObject.name;
        titleElement.appendChild(anchorLinkElement);

        if (categoryObject) {
            if (specificationObject && ("url" in specificationObject || "obsolete-url" in specificationObject)) {
                var url = ("url" in specificationObject) ? specificationObject.url : specificationObject['obsolete-url'];
                var specSpan = createLinkWithHeading("span", null, categoryObject.shortname, specificationObject.url);
                specSpan.className = 'spec-label';
                titleElement.appendChild(specSpan);
            } else {
                var labelSpan = document.createElement("span");
                labelSpan.className = 'spec-label';
                labelSpan.textContent = categoryObject.shortname;
                titleElement.appendChild(labelSpan);
            }
        }

        featureHeaderContainer.appendChild(titleElement);

        var toggledContentContainer = document.createElement('div');
        toggledContentContainer.className = "toggleable";
        descriptionContainer.appendChild(toggledContentContainer);

        var aliases = propertyNameAliases(propertyObject);
        if (aliases.length) {
            var propertyAliasDiv = document.createElement('div');
            propertyAliasDiv.className = 'property-alias';
            propertyAliasDiv.textContent = 'Also supported as: ' + aliases.join(', ');
            toggledContentContainer.appendChild(propertyAliasDiv);
        }

        var longhands = propertyLonghands(propertyObject);
        if (longhands.length) {
            var longhandsDiv = document.createElement('div');
            longhandsDiv.className = 'longhands';

            longhandsDiv.textContent = 'Shorthand for ';

            for (var i in longhands) {
                if (i > 0)
                    longhandsDiv.appendChild(document.createTextNode(', '));
                var longhand = longhands[i];
                var longhandLink = document.createElement("a");
                longhandLink.href = "#property-" + longhand;
                longhandLink.textContent = longhand;
                longhandsDiv.appendChild(longhandLink);
            }

            toggledContentContainer.appendChild(longhandsDiv);
        }

        function collapsePrefixedValues(values)
        {
            var remainingValues = [];
            var prefixMap = {};

            for (var valueObj of values) {
                var valueName = valueObj.value;

                var result = prefixRegexp.exec(valueName);
                if (result) {
                    var unprefixed = result[2];
                    var unprefixedValue = findValueByName(values, unprefixed);
                    if (unprefixedValue) {
                        (prefixMap[unprefixedValue.value] = prefixMap[unprefixedValue.value] || []).push(valueName);
                        continue;
                    }
                }

                remainingValues.push(valueObj);
            }

            for (var prefixed in prefixMap) {
                var unprefixedValue = findValueByName(remainingValues, prefixed);
                unprefixedValue.aliases = prefixMap[prefixed];
            }

            return remainingValues;
        }

        if (propertyObject.values.length) {
            var valuesHeader = document.createElement("h4");
            valuesHeader.textContent = 'Supported Values:';
            toggledContentContainer.appendChild(valuesHeader);

            var valuesList = document.createElement("ul");
            valuesList.className = 'values';

            var values = collapsePrefixedValues(propertyObject.values);
            for (var valueObj of values) {
                var li = document.createElement("li");

                valueObj.el = li;

                var link = undefined;
                var valueAliases = undefined;
                var status = undefined;
                if ('aliases' in valueObj)
                    valueAliases = valueObj.aliases;

                if ('status' in valueObj)
                    status = valueObj.status;

                if ('url' in valueObj)
                    link = valueObj['url'];

                appendValueWithLink(li, valueObj.value, link);

                if (valueAliases) {
                    var span = document.createElement('span');
                    span.textContent = ' (' + valueAliases.join(', ') + ')';
                    span.className = 'value-alias';
                    li.appendChild(span);
                }

                if (status) {
                    var span = document.createElement('span');
                    span.textContent = ' (' + status + ')';
                    span.className = 'value-status';
                    li.appendChild(span);
                }

                valuesList.appendChild(li);
            }
            toggledContentContainer.appendChild(valuesList);
        }

        var statusContainer = document.createElement("div");
        descriptionContainer.classList.add(propertyObject.status.status);
        statusContainer.className = "property-status " + propertyObject.status.status;
        var statusLabel = document.createElement("label");

        if ("webkit-url" in propertyObject) {
            var statusLink = document.createElement("a");
            statusLink.href = propertyObject["webkit-url"];
            statusLink.textContent = readableStatus[propertyObject.status.status];
            statusLabel.appendChild(statusLink);
        } else {
            statusLabel.textContent = readableStatus[propertyObject.status.status];
        }
        statusContainer.appendChild(statusLabel);
        featureHeaderContainer.appendChild(statusContainer);

        var toggle = document.createElement('button');
        toggle.className = 'toggle';

        container.addEventListener('click', function (e) {
            container.classList.toggle('opened');
        });

        featureHeaderContainer.appendChild(toggle);

        if (specificationObject && "description" in specificationObject) {
            var testDescription = document.createElement('p');
            testDescription.className = "property-desc";
            testDescription.innerHTML = specificationObject.description;
            toggledContentContainer.appendChild(testDescription);
        }

        if (specificationObject && "comment" in specificationObject) {
            if ("description" in specificationObject) {
                var hr = document.createElement("hr");
                hr.className = 'comment';
                toggledContentContainer.appendChild(hr);
            }
            var comment = document.createElement('p');
            comment.className = 'comment';
            comment.innerHTML = specificationObject.comment;
            toggledContentContainer.appendChild(comment);
        }

        if (propertyObject.status && "comment" in propertyObject.status) {
            var comment = document.createElement('p');
            comment.className = 'comment';
            comment.innerHTML = propertyObject.status.comment;
            toggledContentContainer.appendChild(comment);
        }

        container.appendChild(descriptionContainer);

        function getMostSpecificProperty(categoryObject, specificationObject, attributeName)
        {
            // The url in the specification object is more specific, so use it if present.
            if (specificationObject && attributeName in specificationObject)
                return specificationObject[attributeName];

            return categoryObject[attributeName];
        }

        var hasReferenceLink = categoryObject && "url" in categoryObject;
        var hasDocumentationLink = (specificationObject && "documentation-url" in specificationObject) || (categoryObject && "documentation-url" in categoryObject);
        var hasContactObject = specificationObject && "contact" in specificationObject;

        if (hasDocumentationLink || hasReferenceLink || hasContactObject) {
            var moreInfoList = document.createElement("ul");
            moreInfoList.className = 'more-info';
            if (hasDocumentationLink) {
                // The url in the specification object is more specific, so use it if present.
                var url = getMostSpecificProperty(categoryObject, specificationObject, 'documentation-url');
                moreInfoList.appendChild(createLinkWithHeading("li", "Documentation", url, url));
            }

            if (hasReferenceLink) {
                var url = getMostSpecificProperty(categoryObject, specificationObject, 'url');
                moreInfoList.appendChild(createLinkWithHeading("li", "Reference", url, url));

                if ('obsolete-url' in specificationObject){
                    var url = specificationObject['obsolete-url'];
                    moreInfoList.appendChild(createLinkWithHeading("li", "Reference", url, url));
                }
            }

            if (hasContactObject) {
                var li = document.createElement("li");
                li.textContent = "Contact: ";
                var contactObject = specificationObject.contact;
                if (contactObject.twitter) {
                    li.appendChild(createLinkWithHeading("span", null, contactObject.twitter, makeTwitterLink(contactObject.twitter)));
                }
                if (contactObject.email) {
                    if (contactObject.twitter) {
                        li.appendChild(document.createTextNode(" - "));
                    }
                    var emailText = contactObject.email;
                    if (contactObject.name) {
                        emailText = contactObject.name;
                    }
                    li.appendChild(createLinkWithHeading("span", null, emailText, "mailto:" + contactObject.email));
                }
                moreInfoList.appendChild(li);
            }

            toggledContentContainer.appendChild(moreInfoList);
        }

        return container;
    }

    function canonicalizeIdentifier(identifier)
    {
        return identifier.toLocaleLowerCase().replace(/ /g, '-');
    }

    function renderSpecifications(categories, properties, selectedSpecifications)
    {
        var specificationsList = document.getElementById('specifications');
        specificationsList.addEventListener('change', function() { updateSearch(properties); });

        var selectedIndex = -1;
        var allCategories = Object.keys(categories).sort();

        for (var i = 0; i < allCategories.length; ++i) {
            var categoryKey = allCategories[i];
            var category = categories[categoryKey];
            categoryKey = canonicalizeIdentifier(categoryKey);

            var option = document.createElement("option");
            option.setAttribute('value', categoryKey);
            if (selectedSpecifications.indexOf(categoryKey) != -1)
                selectedIndex = i;

            option.appendChild(document.createTextNode(" " + category['shortname']));
            specificationsList.appendChild(option);
        }
        if (selectedIndex != -1)
            specificationsList.selectedIndex = selectedIndex;
    }

    function getPropertyCategory(propertyObject)
    {
        if ('specification' in propertyObject && 'category' in propertyObject.specification)
            return propertyObject.specification.category;

        return undefined;
    }

    function renderProperties(categories, propertyObjects)
    {
        var propertiesContainer = document.getElementById('properties-container');
        for (var propertyObject of propertyObjects) {
            var category = getPropertyCategory(propertyObject);
            propertiesContainer.appendChild(createPropertyView(categories[category], propertyObject));
        }
    }

    function convertToTitleCase(string)
    {
        return string.replace(/\w\S*/g, function(txt){
            return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
        });
    }

    function initSearch(properties, categories)
    {
        var filtersForm = document.getElementById('property-filters');
        var filtersToggleButton = document.getElementsByClassName('filters-toggle-button')[0];
        var statusContainer = document.getElementById('status-filters');
        var inputField = document.getElementById('search');
        var featuresEls = document.querySelectorAll('.properties > li');
        var statusFilters = {};

        properties.forEach(function(property, i) {
            property.el = featuresEls[i];
            property.visible = true;

            // FIXME: need status per value as well.
            if (property.status != undefined) {
                propertyStatusKey = property.status.status.toLocaleLowerCase();

                if (!statusFilters[propertyStatusKey])
                    statusFilters[propertyStatusKey] = property.status.status;

                if (statusOrder.indexOf(propertyStatusKey) == -1)
                    window.console.log('Status ' + propertyStatusKey + ' is not one of the predefined status keys ', statusOrder);
            }
        });

        var selectedStatuses = statusesFromURL();
        var selectedSpecs = specificationsFromURL();

        for (var key of statusOrder) {
            var status = statusFilters[key];
            var canonicalStatus = canonicalizeIdentifier(status);

            var entry = document.createElement("li");
            var label = document.createElement("label");
            var input = document.createElement("input");
            input.setAttribute('type','checkbox');
            input.setAttribute('value', canonicalStatus);
            if (selectedStatuses.indexOf(canonicalStatus) != -1) {
                filtersForm.classList.add('opened');
                input.checked = true;
            }
            input.className = 'status-checkbox';
            input.addEventListener('change', function() { updateSearch(properties); });
            label.appendChild(input);
            label.className = "status-filter " + canonicalStatus;
            label.appendChild(document.createTextNode(" " + readableStatus[status]));
            entry.appendChild(label);
            statusContainer.appendChild(entry);
        }

        // Append the special "By Specification" checkbox
        {
            var entry = document.createElement("li");
            var label = document.createElement("label");
            var input = document.createElement("input");
            input.id = 'by-spec-checkbox';
            input.setAttribute('type','checkbox');
            if (selectedSpecs.length > 0)
                input.checked = true;
            input.addEventListener('change', function() { updateSearch(properties); });
            label.appendChild(input);
            label.className = "status-filter by-specification";
            label.appendChild(document.createTextNode(" By Specification:"));

            var specsList = document.createElement('select');
            specsList.className = 'specifications';
            specsList.id = 'specifications';
            specsList.addEventListener('mousedown', function() {
                input.setAttribute('checked','checked');
                input.checked = true;
                console.log(input);
                input.checked = true;
            });
            var specsListToggle = document.createElement('div');
            specsListToggle.className = 'filter-by-specifications-toggle';
            label.appendChild(specsList);
            label.appendChild(specsListToggle);
            entry.appendChild(label);

            statusContainer.appendChild(entry);
        }

        filtersToggleButton.addEventListener('mousedown', function (e) {
            filtersForm.classList.toggle('opened');
        });

        var searchTerm = searchTermFromURL();
        if (searchTerm.length) {
            inputField.value = searchTerm;
            inputField.placeholder = '';
        }
        inputField.addEventListener('input', function() { updateSearch(properties); });

        var inputs = [].slice.call(filtersForm.getElementsByTagName('input'));
        inputs.forEach(function (input,i) {
            input.addEventListener('click', function (e) {
                e.stopPropagation();
            });
        });

        renderSpecifications(categories, properties, selectedSpecs);
    }

    function getValuesOfCheckedItems(items)
    {
        var checkedValues = [];
        items.forEach(function(item,i) {
            if (item.checked)
                checkedValues.push(item.value);
        });

        return checkedValues;
    }

    function getValuesOfSelectedItems(select)
    {
        var selectedValues = [];

        if (select.selectedIndex != -1)
            selectedValues.push(select.options[select.selectedIndex].value);

        return selectedValues;
    }

    function selectedSpecifications()
    {
        var specificationsList = document.getElementById('specifications');
        if (!document.getElementById('by-spec-checkbox').checked) {
            specificationsList.disabled = true;
            return [];
        }
        specificationsList.disabled = false;
        return getValuesOfSelectedItems(specificationsList);
    }

    function updateSearch(properties)
    {
        var inputField = document.getElementById('search');
        var statusContainer = document.getElementById('status-filters');

        var searchTerm = inputField.value.trim().toLowerCase();
        var activeStatusFilters = getValuesOfCheckedItems([].slice.call(statusContainer.querySelectorAll('.status-checkbox')));

        var prefixContainer = document.getElementById('prefix-filters');
        var activePrefixFilters = getValuesOfCheckedItems([].slice.call(prefixContainer.getElementsByTagName('input')));

        var numVisible = searchProperties(properties, searchTerm, selectedSpecifications(), activeStatusFilters, activePrefixFilters);
        document.getElementById('property-pluralize').textContent = numVisible == 1 ? 'property' : 'properties';
        document.getElementById('property-count').textContent = numVisible;

        updateSpecsState();
        updateURL(searchTerm, selectedSpecifications(), activeStatusFilters, activePrefixFilters);
    }

    function updateSpecsState()
    {
        var specsEnabled = document.getElementById('by-spec-checkbox').checked;
        var specificationsList = document.getElementById('specifications');

        var radiobuttons = [].slice.call(specificationsList.getElementsByTagName('input'));
        radiobuttons.forEach(function(radiobutton,i) {
            radiobutton.disabled = !specsEnabled;
        });
    }

    function updateURL(searchTerm, selectedSpecifications, activeStatusFilters, activePrefixFilters)
    {
        var searchString = '';

        function appendDelimiter()
        {
            searchString += searchString.length ? '&' : '?';
        }

        if (searchTerm.length > 0) {
            appendDelimiter();
            searchString += 'search=' + encodeURIComponent(searchTerm);
        }

        if (activeStatusFilters.length) {
            appendDelimiter();
            searchString += 'status=' + activeStatusFilters.join(',');
        }

        if (selectedSpecifications.length) {
            appendDelimiter();
            searchString += 'specs=' + selectedSpecifications.join(',');
        }

        if (activePrefixFilters.length) {
            appendDelimiter();
            searchString += 'prefix=' + activePrefixFilters.join(',');
        }

        var current = window.location.href;
        window.location.href = current.replace(/#(.*)$/, '') + '#' + searchString;
    }

    function searchTermFromURL()
    {
        var search = window.location.search;
        var searchRegExp = /\#.*search=([^&]+)/;

        var result;
        if (result = window.location.href.match(searchRegExp))
            return decodeURIComponent(result[1]);

        return '';
    }

    function statusesFromURL()
    {
        var search = window.location.search;
        var statusRegExp = /\#.*status=([^&]+)/;

        var result;
        if (result = window.location.href.match(statusRegExp))
            return result[1].split(',');

        return [];
    }

    function specificationsFromURL()
    {
        var search = window.location.search;
        var specsRegExp = /\#.*specs=([^&]+)/;

        var result;
        if (result = window.location.href.match(specsRegExp))
            return result[1].split(',');

        return [];
    }

    function valueOrAliasIsPrefixed(valueObj)
    {
        if (prefixRegexp.exec(valueObj.value))
            return true;

        if ('alias' in valueObj) {
            for (var alias of valueObj.aliases) {
                if (prefixRegexp.exec(alias))
                    return true;
            }
        }

        return false;
    }

    function filterValues(propertyObject, searchTerm, categories, statusFilters)
    {
        for (var valueObj of propertyObject.values) {
            if (!valueObj.el)
                continue;

            var visible = false;
            visible = valueObj.value.toLowerCase().indexOf(searchTerm) !== -1;

            if (!visible) {
                for (var currValueObj of propertyObject.values) {
                    if (valueOrAliasIsPrefixed(currValueObj)) {
                        visible = true;
                        break;
                    }
                }
            }

            if (!visible) {
                for (var currValueObj of propertyObject.values) {
                    if (prefixRegexp.exec(currValueObj.value)) {
                        visible = true;
                        break;
                    }
                }
            }

            if (visible)
                valueObj.el.classList.remove('hidden');
            else
                valueObj.el.classList.add('hidden');
        }
    }

    function searchProperties(properties, searchTerm, categories, statusFilters, prefixFilters)
    {
        var visibleCount = 0;
        properties.forEach(function(propertyObject) {
            var matchesStatusSearch = isStatusFiltered(propertyObject, statusFilters);
            var matchesPrefixSearch = isPrefixFiltered(propertyObject, prefixFilters);

            var visible = propertyIsSearchMatch(propertyObject, searchTerm) && isCategoryMatch(propertyObject, categories) && matchesStatusSearch && matchesPrefixSearch;
            if (visible && !propertyObject.visible)
                propertyObject.el.className = 'property';
            else if (!visible && propertyObject.visible)
                propertyObject.el.className = 'property is-hidden';

            if (visible) {
                filterValues(propertyObject, searchTerm);
                ++visibleCount;
            }

            propertyObject.visible = visible;
        });

        return visibleCount;
    }

    function propertyIsSearchMatch(propertyObject, searchTerm)
    {
        if (searchTerm.length == 0)
            return true;

        if (propertyObject.name.toLowerCase().indexOf(searchTerm) !== -1)
            return true;

        if ('keywords' in propertyObject) {
            for (var keyword of propertyObject.keywords) {
                if (keyword.toLowerCase().indexOf(searchTerm) !== -1)
                    return true;
            }
        }

        for (var valueObj of propertyObject.values) {
            if (valueObj.value.toLowerCase().indexOf(searchTerm) !== -1)
                return true;
        }

        return false;
    }

    function getSpecificationCategory(propertyObject)
    {
        if ('specification' in propertyObject) {
            var specification = propertyObject.specification;
            if ('category' in specification) {
                return specification.category;
            }
        }
        return undefined;
    }

    function getSpecificationObsoleteCategory(propertyObject)
    {
        if ('specification' in propertyObject) {
            var specification = propertyObject.specification;
            if ('obsolete-category' in specification) {
                return specification['obsolete-category'];
            }
        }
        return undefined;
    }

    function isCategoryMatch(propertyObject, categories)
    {
        if (!categories.length)
            return true;

        var category;
        if (category = getSpecificationCategory(propertyObject)) {
            if (categories.indexOf(category) !== -1) {
                return true;
            }
        }

        if (category = getSpecificationObsoleteCategory(propertyObject)) {
            if (categories.indexOf(category) !== -1) {
                return true;
            }
        }
        return false;
    }

    function propertyOrAliasIsPrefixed(propertyObject)
    {
        if (prefixRegexp.exec(propertyObject.name))
            return true;

        for (var alias of propertyNameAliases(propertyObject)) {
            if (prefixRegexp.exec(alias))
                return true;
        }

        return false;
    }

    function isStatusFiltered(propertyObject, activeFilters)
    {
        if (activeFilters.length == 0)
            return true;
        if (propertyObject.status === undefined)
            return false;
        if (activeFilters.indexOf(propertyObject.status.status) !== -1)
            return true;

        return false;
    }

    function isPrefixFiltered(propertyObject, activeFilters)
    {
        if (activeFilters.length == 0)
            return true;

        if (activeFilters.indexOf('prefix-only-property') !== -1)
            return prefixRegexp.exec(propertyObject.name);

        if (activeFilters.indexOf('prefix-supported-property') !== -1)
            return propertyOrAliasIsPrefixed(propertyObject);

        if (activeFilters.indexOf('prefix-supported-value') !== -1) {
            for (var valueObj of propertyObject.values) {
                if (valueOrAliasIsPrefixed(valueObj))
                    return true;
            }
        }

        if (activeFilters.indexOf('prefix-only-value') !== -1) {
            for (var valueObj of propertyObject.values) {
                if (prefixRegexp.exec(valueObj.value))
                    return true;
            }
        }

        return false;
    }

    function findValueByName(values, name)
    {
        return values.find(function(element) {
            return element.value === name;
        })
    }

    function mergeProperties(unprefixedPropertyObj, prefixedPropertyObj)
    {
        (unprefixedPropertyObj['codegen-properties'].aliases = unprefixedPropertyObj['codegen-properties'].aliases || []).push(prefixedPropertyObj.name);

        for (var valueObj of prefixedPropertyObj.values) {
            if (!findValueByName(unprefixedPropertyObj.values, valueObj.value))
                prefixedPropertyObj.values.push(valueObj);
        }

        return unprefixedPropertyObj;
    }

    // Sometimes we have separate entries for -webkit-foo and foo.
    function collapsePrefixedProperties(properties)
    {
        function findPropertyByName(properties, name)
        {
            return properties.find(function(element) {
                return element.name === name;
            })
        }

        var remainingProperties = [];
        var prefixMap = {};

        for (var propertyObj of properties) {
            var propertyName = propertyObj.name;

            var result = prefixRegexp.exec(propertyName);
            if (result) {
                var unprefixed = result[2];
                var unprefixedProperty = findPropertyByName(properties, unprefixed);
                if (unprefixedProperty) {
                    mergeProperties(unprefixedProperty, propertyObj);
                    continue;
                }
            }

            remainingProperties.push(propertyObj);
        }

        return remainingProperties;
    }

    function canonicalizeValues(propertyObject)
    {
        var valueObjects = [];
        // Convert all values to objects.
        if ('values' in propertyObject) {
            for (var value of propertyObject.values) {
                if (typeof value === 'object')
                    valueObjects.push(value);
                else
                    valueObjects.push({ 'value' : value });
            }
        }
        propertyObject.values = valueObjects;
    }

    function canonicalizeStatus(propertyObject, categories)
    {
        // Inherit "status" from the category if not explicitly specified.
        if (!('status' in propertyObject)) {
            var category = getSpecificationCategory(propertyObject)
            if (category) {
                var categoryObject = categories[category];
                if (categoryObject) {
                    if ('status' in categoryObject) {
                        propertyObject.status = {
                            'status' : categoryObject.status
                        };
                    }
                }
            }
        } else {
            // Convert all values to objects.
            if (typeof propertyObject.status === 'string')
                propertyObject.status = { 'status': propertyObject.status };
        }

        if (!('status' in propertyObject)) {
            propertyObject.status = {
                'status' : 'supported',
                'enabled-by-default' : true
            };
        } else if (!('status' in propertyObject.status))
            propertyObject.status.status = 'supported';

        propertyObject.status.status = canonicalizeIdentifier(propertyObject.status.status);
    }

    function renderContent(results)
    {
        var mainContent = document.getElementById("property-list");
        var successSubtree = document.importNode(document.getElementById("success-template").content, true);
        mainContent.appendChild(successSubtree);

        var properties = results[0]['properties'];
        var everythingToShow = [];

        var categories = results[0]['categories'];

        for (var property in properties) {
            var propertyObject = properties[property];
            propertyObject.name = property;

            canonicalizeValues(propertyObject);
            canonicalizeStatus(propertyObject, categories);

            everythingToShow.push(propertyObject);
        }

        everythingToShow = collapsePrefixedProperties(everythingToShow);
        sortAlphabetically(everythingToShow);

        renderProperties(categories, everythingToShow);

        initSearch(everythingToShow, categories);

        updateSearch(everythingToShow);
    }

    function displayError(error)
    {
        window.console.log('displayError', error)
        var mainContent = document.getElementById("property-list");
        var successSubtree = document.importNode(document.getElementById("error-template").content, true);

        var errorMessage = "Unable to load " + error.url;

        if (error.request.status !== 200) {
            errorMessage += ", status: " + error.request.status + " - " + error.request.statusText;
        } else if (!error.response) {
            errorMessage += ", the JSON file cannot be processed.";
        }

        successSubtree.querySelector("#error-message").textContent = errorMessage;

        mainContent.appendChild(successSubtree);
    }

    Promise.all([loadCSSProperties]).then(renderContent).catch(displayError);
}

document.addEventListener("DOMContentLoaded", initializeStatusPage);
</script>

<?php get_footer(); ?>