jamesshore/REPRO.js

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>

<p>Load this code in Firefox and look at your console. (Tested on Firefox 40.0.3.)</p>

<script src="REPRO.js"></script>

</body>
</html>

## REPRO.js
// by James Shore   letscodejavascript.com   Released to public domain

(function() {
	"use strict";

	var PROPERTY = "border-top-left-radius";      // padding-left exhibits problem too
	var VALUE = "20px";

	createFrame(document.body, function(frame) {
		var domElement = document.createElement("div");
		domElement.setAttribute(
			"style",
			PROPERTY + ": " + VALUE + "; " +

			"background-color: green; height: 100px; width: 150px"
		);

		frame.contentDocument.body.appendChild(domElement);

		//var style = frame.contentWindow.getComputedStyle(domElement);     // works
		var style = window.getComputedStyle(domElement);    // fails

		var getValue1 = style.getPropertyValue(PROPERTY);
		var getValue2 = style.getPropertyValue(PROPERTY);

		console.log("\ngetPropertyValue #1", getValue1);
		console.log("getPropertyValue #2", getValue2);

		if (VALUE !== getValue2) {
			console.log("\n=====\nFAIL: " + PROPERTY + " expected " + VALUE + ", but got " + getValue2 + "\n=====");
		}
		else {
			console.log("\nPASS");
		}
	});

	function createFrame(parentElement, callback) {
		var iframe = document.createElement("iframe");
		parentElement.appendChild(iframe);

		iframe.addEventListener("load", function onFrameLoad() {
			callback(iframe);
		});
	}

}());
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title></title>
	</head>
	<body>

	<p>Load this code in Firefox and look at your console. (Tested on Firefox 40.0.3.)</p>

	<script src="REPRO.js"></script>

	</body>
	</html>
	// by James Shore letscodejavascript.com Released to public domain

	(function() {
	"use strict";

	var PROPERTY = "border-top-left-radius"; // padding-left exhibits problem too
	var VALUE = "20px";

	createFrame(document.body, function(frame) {
	var domElement = document.createElement("div");
	domElement.setAttribute(
	"style",
	PROPERTY + ": " + VALUE + "; " +

	"background-color: green; height: 100px; width: 150px"
	);

	frame.contentDocument.body.appendChild(domElement);

	//var style = frame.contentWindow.getComputedStyle(domElement); // works
	var style = window.getComputedStyle(domElement); // fails

	var getValue1 = style.getPropertyValue(PROPERTY);
	var getValue2 = style.getPropertyValue(PROPERTY);

	console.log("\ngetPropertyValue #1", getValue1);
	console.log("getPropertyValue #2", getValue2);

	if (VALUE !== getValue2) {
	console.log("\n=====\nFAIL: " + PROPERTY + " expected " + VALUE + ", but got " + getValue2 + "\n=====");
	}
	else {
	console.log("\nPASS");
	}
	});

	function createFrame(parentElement, callback) {
	var iframe = document.createElement("iframe");
	parentElement.appendChild(iframe);

	iframe.addEventListener("load", function onFrameLoad() {
	callback(iframe);
	});
	}

	}());