LayoutTests/css3/calc/reflection-computed-style.html - WebKit - Git at Google

 <!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>
	<!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>