<html>
<head>

<style>
@import url("data:text/css,* { color:black; }");

* { color: black }

@font-face {
    font-family: 'CustomName';
    src: local('Courier');
}

@media all {
    * { color: black }
}

@-webkit-keyframes test1 {
    from { left: 10px; }
    to { left: 20px; }
}

@page { margin: 3cm; }
</style>
<script src="../../../resources/js-test.js"></script>
</head>
<body style="color:black">
<script>
    description("Test that custom properties on rule style declarations are not lost after GC");

    function test(expr, expectedType, testWhat)
    {
        shouldBe(expr + ".type", expectedType);
        // Do initialization work in an inner function to avoid references to
        // objects remaining live on this function's stack frame
        // (http://crbug.com/595672/).
        (() => {eval(expr + "." + testWhat).foo = "bar";})();
        gc();
        shouldBe(expr + "." + testWhat + ".foo", "'bar'");
    }

    test("document.styleSheets[0].cssRules[0]", "CSSRule.IMPORT_RULE", "media");
    test("document.styleSheets[0].cssRules[0]", "CSSRule.IMPORT_RULE", "styleSheet");
    test("document.styleSheets[0].cssRules[1]", "CSSRule.STYLE_RULE", "style");
    test("document.styleSheets[0].cssRules[2]", "CSSRule.FONT_FACE_RULE", "style");
    test("document.styleSheets[0].cssRules[3]", "CSSRule.MEDIA_RULE", "cssRules");
    test("document.styleSheets[0].cssRules[3]", "CSSRule.MEDIA_RULE", "media");
    test("document.styleSheets[0].cssRules[4]", "CSSRule.KEYFRAMES_RULE", "cssRules");
    test("document.styleSheets[0].cssRules[4].cssRules[0]", "CSSRule.KEYFRAME_RULE", "style");
    test("document.styleSheets[0].cssRules[5]", "CSSRule.PAGE_RULE", "style");

</script>
</body>
</html>