qElement.getRawStyle API always returns null
teamharmony opened this issue · comments
Shouldn't this API use frame.contentWindow.getComputedStyle(_domElement) as against window.getComputedStyle?
The Quixote script is loaded in an outer/top window so the window.getComputedStyle always returns null.
It shouldn't matter; I believe getComputedStyle operates on whatever domElement it's handed, wherever it's located.
QElement.getRawStyle has worked fine in my tests and real-world use so far, which makes me think the issue relates to some difference in your test configuration compared to mine.
- What test framework are you using?
- Which browser(s) are you testing on?
- What are you loading into the frame? (A local HTML page, generating the elements yourself, or loading a page from another server?)
This might be related to #7.
Blocked awaiting response from @teamharmony.
I am texting a sample code Where I am loading a generated DOM into the Quixote frame.
<!DOCTYPE>
<HTML>
<HEAD>
<title>Exploring Quixote</title>
<script src="quixote.js"></script>
<script type="text/javascript">
var frame;
function setUp() {
frame = quixote.createFrame({}, done);
}
function done() {
frame.add("<div id='titleText' style='background-color: #FFFFFF'> This is a test to validate Quixote features</div>");
var titleText = frame.get("#titleText");
var bgColor = titleText.getRawStyle("backgroundColor");
alert("Is titleText bgColor matching with Quixote code = " + (bgColor === "rgb(255,255,255)") );
/* When I use the window Which has rendered the titleText element, getComputedStyle works well */
var bgColor1 = frame._domElement.contentWindow.getComputedStyle(titleText._domElement)["backgroundColor"];
alert("Is titleText bgColor matching with explicit code = " + (bgColor1 === "rgb(255, 255, 255)") );
}
</script>
</HEAD>
<BODY >
<button onclick="setUp()">quixote setup</button>
</BODY>
</HTML>Thanks, I'll look into it.
Okay, I see your problem. Quixote expects properties to be written the same way they are in CSS. Instead of using "backgroundColor", your code should say "background-color".
There's also a bug on the following line: the return value should contain spaces between the commas, at least on Chrome. Here's the correct done() function:
function done() {
frame.add("<div id='titleText' style='background-color: #FFFFFF'> This is a test to validate Quixote features</div>");
var titleText = frame.get("#titleText");
var bgColor = titleText.getRawStyle("background-color");
alert("Is titleText bgColor matching with Quixote code = " + (bgColor === "rgb(255, 255, 255)") );
/* When I use the window Which has rendered the titleText element, getComputedStyle works well */
var bgColor1 = frame._domElement.contentWindow.getComputedStyle(titleText._domElement)["backgroundColor"];
alert("Is titleText bgColor matching with explicit code = " + (bgColor1 === "rgb(255, 255, 255)") );
}Thank you, James.