116 lines
4.2 KiB
HTML
116 lines
4.2 KiB
HTML
<!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) => {
|
|
documentNode.querySelector("#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>
|