<!DOCTYPE html>
<style>
    div { width: 0px; height: 0px }
    #reflectionOffset    { -webkit-box-reflect: right calc(50%) }
    #reflectionMask      { -webkit-box-reflect: below calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch; }
</style>
<body>
    <p>Test calling getPropertyValue on computed styles for -webkit-border-image property.</p>
    <pre id="console"></pre>

    <div id="reflectionOffset"></div>
    <div id="reflectionMask"></div>
</body>
<script>
    function log(msg)
    {
        document.getElementById('console').appendChild(document.createTextNode(msg + '\n'));
    }

    function subTest(object, property)
    {
        log('  ' + property);
        var value = document.defaultView.getComputedStyle(object, null).getPropertyValue(property);
        log('    getPropertyValue:    ' + value + (value == 'none' ? ' <- FAIL' : ''));
        log('    getPropertyCSSValue: ' + document.defaultView.getComputedStyle(object, null).getPropertyCSSValue(property));
    }

    function test(id, value)
    {
        log('-webkit-box-reflect: ' + value + ';');
        var object = document.getElementById(id);
        subTest(object, '-webkit-box-reflect');
    }

    if (window.testRunner)
        testRunner.dumpAsText();
    test('reflectionOffset', 'right calc(50%)');
    log('');
    test('reflectionMask', 'below calc(5px) -webkit-gradient(linear, 0 0, 0 0) 25 25 25 25 stretch stretch');
</script>