<!DOCTYPE html>
<p>Overloading ::-webkit-media-controls display property. PASS if it doesn't crash.</p>
<style>
video { width: 200px; height: 30px; }
</style>
<script>
var displayValues = ["-webkit-box", "-webkit-flex", "-webkit-inline-box",
    "-webkit-inline-flex", "block", "flex", "grid", "inline", "inline-block",
    "inline-flex", "inline-grid", "inline-table", "list-item", "none", "table",
    "table-caption", "table-cell", "table-column", "table-column-group",
    "table-footer-group", "table-header-group", "table-row", "table-row-group"];

displayValues.forEach(function(value) {
    var video = document.createElement("video");
    switch (value) {
    case "-webkit-flex":
    case "-webkit-inline-flex":
    case "flex":
    case "inline-flex":
        video.controls = true;
    }
    document.body.appendChild(video);
});
</script>