blob: 68dc61ff7099ededf5ffaf81bc7331458eb6d3c4 [file] [log] [blame]
<!DOCTYPE html>
<html>
<head>
<script src="../../http/tests/inspector/resources/inspector-test.js"></script>
<script>
let requestAnimationFrameID;
function expand() {
let element = document.getElementById("x");
let i = 0;
let loop = () => {
++i;
let height = parseInt(element.style.height) + 1;
element.style.height = height + "px";
TestPage.dispatchEventToFrontend("TestPage-styleChanged", height + "px");
requestAnimationFrameID = requestAnimationFrame(loop);
};
loop();
}
function stopExpanding() {
cancelAnimationFrame(requestAnimationFrameID);
}
function test() {
InspectorTest.redirectRequestAnimationFrame();
let nodeStyles = null;
let suite = InspectorTest.createAsyncSuite("ModifyCSSProperty");
InspectorTest.addEventListener("TestPage-styleChanged", (event) => {
// Normally, this would get called if the styles sidebar is visible.
// This doesn't work in tests.
nodeStyles.refresh();
});
suite.addTestCase({
name: "ModifyCSSPropertyRace.ChangeInlineStyle",
test(resolve, reject) {
let getInlineStyleDeclaration = () => {
for (let styleDeclaration of nodeStyles.orderedStyles) {
if (styleDeclaration.type === styleDeclaration.constructor.Type.Inline)
return styleDeclaration;
}
InspectorTest.fail("No declaration found.");
resolve();
};
let getProperty = (propertyName) => {
let styleDeclaration = getInlineStyleDeclaration();
for (let property of styleDeclaration.properties) {
if (property.name === propertyName)
return property;
}
InspectorTest.fail("No property found.");
resolve();
};
InspectorTest.evaluateInPage("expand()");
let updateCount = 0;
let style = getInlineStyleDeclaration();
function styleDecorationUpdated() {
++updateCount;
let heightNumber = parseInt(getProperty("height").rawValue);
if (updateCount === 1)
InspectorTest.expectGreaterThan(heightNumber, 10, "Height should have increased from 10px.");
else if (updateCount === 2) {
InspectorTest.expectGreaterThan(heightNumber, 11, "Height should have increased from 11px.");
getProperty("height").rawValue = "100px";
} else if (updateCount === 3)
InspectorTest.expectGreaterThanOrEqual(heightNumber, 100, "Height should be 100px or more.");
else {
InspectorTest.expectGreaterThanOrEqual(heightNumber, 101, "Height should be 101px or more.");
InspectorTest.evaluateInPage("stopExpanding()");
style.removeEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, styleDecorationUpdated);
resolve();
}
}
style.addEventListener(WI.CSSStyleDeclaration.Event.PropertiesChanged, styleDecorationUpdated);
}
});
WI.domManager.requestDocument((documentNode) => {
WI.domManager.querySelector(documentNode.id, "#x", (contentNodeId) => {
if (contentNodeId) {
let domNode = WI.domManager.nodeForId(contentNodeId);
nodeStyles = WI.cssManager.stylesForNode(domNode);
if (nodeStyles.needsRefresh) {
nodeStyles.singleFireEventListener(WI.DOMNodeStyles.Event.Refreshed, (event) => {
suite.runTestCasesAndFinish()
});
} else
suite.runTestCasesAndFinish();
} else {
InspectorTest.fail("DOM node not found.");
InspectorTest.completeTest();
}
});
});
}
</script>
</head>
<body onload="runTest()">
<p>Testing that changes to "style" attribute made from page's JavaScript are ignored when there's a pending change made via Web Inspector.</p>
<div id="x" style="height: 10px"></div>
</body>
</html>