| Index: LayoutTests/compositing/will-change/parse-will-change.html
|
| diff --git a/LayoutTests/compositing/will-change/parse-will-change.html b/LayoutTests/compositing/will-change/parse-will-change.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..0824a9516e027a903f80f30998e5e503f243ac81
|
| --- /dev/null
|
| +++ b/LayoutTests/compositing/will-change/parse-will-change.html
|
| @@ -0,0 +1,146 @@
|
| +<!DOCTYPE html>
|
| +<html>
|
| +<head>
|
| +<style>
|
| +#willChangeOpacity {
|
| + will-change: opacity;
|
| +}
|
| +
|
| +#willChangeScrollPosition {
|
| + will-change: scroll-position;
|
| +}
|
| +
|
| +#willChangeContents {
|
| + will-change: contents;
|
| +}
|
| +
|
| +#willChangeMultiple {
|
| + will-change: opacity, contents, left, -webkit-transform;
|
| +}
|
| +
|
| +#willChangeWithArbitraryIdent {
|
| + will-change: opacity, i-am-not-a-property, top;
|
| +}
|
| +
|
| +</style>
|
| +<script src="../../resources/js-test.js"></script>
|
| +</head>
|
| +<body>
|
| +<div id="willChangeOpacity"></div>
|
| +<div id="willChangeScrollPosition"></div>
|
| +<div id="willChangeContents"></div>
|
| +<div id="willChangeMultiple"></div>
|
| +<div id="willChangeWithArbitraryIdent"></div>
|
| +<script>
|
| +description('Test that setting and getting will-change works as expected');
|
| +
|
| +debug("Test getting will-change set through CSS");
|
| +var willChangeOpacity = document.getElementById("willChangeOpacity");
|
| +shouldBe("getComputedStyle(willChangeOpacity, '').getPropertyValue('will-change')", "'opacity'");
|
| +
|
| +var willChangeScrollPosition = document.getElementById("willChangeScrollPosition");
|
| +shouldBe("getComputedStyle(willChangeScrollPosition, '').getPropertyValue('will-change')", "'scroll-position'");
|
| +
|
| +var willChangeContents = document.getElementById("willChangeContents");
|
| +shouldBe("getComputedStyle(willChangeContents, '').getPropertyValue('will-change')", "'contents'");
|
| +
|
| +var willChangeMultiple = document.getElementById("willChangeMultiple");
|
| +shouldBe("getComputedStyle(willChangeMultiple, '').getPropertyValue('will-change')", "'contents, opacity, left, -webkit-transform'");
|
| +
|
| +var willChangeContents = document.getElementById("willChangeWithArbitraryIdent");
|
| +shouldBe("getComputedStyle(willChangeWithArbitraryIdent, '').getPropertyValue('will-change')", "'opacity, top'");
|
| +
|
| +debug("");
|
| +debug("Test initial value of will-change");
|
| +var element = document.createElement("div");
|
| +document.body.appendChild(element);
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +debug("");
|
| +debug("Test getting and setting will-change through JS");
|
| +element = document.createElement("div");
|
| +document.body.appendChild(element);
|
| +element.style.willChange = "opacity";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity'");
|
| +
|
| +element.style.willChange = "scroll-position";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'scroll-position'");
|
| +
|
| +element.style.willChange = "contents";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'contents'");
|
| +
|
| +element.style.willChange = "contents, scroll-position, opacity, -webkit-transform";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'contents, scroll-position, opacity, -webkit-transform'");
|
| +
|
| +element.style.willChange = "i-am-not-a-property, opacity, top";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity, top'");
|
| +
|
| +element.style.willChange = "opacity, i-am-not-a-property, top";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity, top'");
|
| +
|
| +element.style.willChange = "opacity, top, i-am-not-a-property";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity, top'");
|
| +
|
| +element.style.willChange = "i-am-not-a-property";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +debug("");
|
| +debug("Test that illegal will-change values are disallowed");
|
| +element.style.willChange = "auto";
|
| +element.style.willChange = "opacity, will-change";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "none";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "none, opacity";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "all";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "all, opacity";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "left, auto, top";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "left, default";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "initial, top";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +element.style.willChange = "top, inherit";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +debug("");
|
| +debug("Test the value 'initial'");
|
| +element.style.willChange = "opacity";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity'");
|
| +element.style.willChange = "initial";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +
|
| +debug("");
|
| +debug("Test the value 'inherit'");
|
| +var parentElement = document.createElement("div");
|
| +document.body.appendChild(parentElement);
|
| +parentElement.style.willChange = "contents, opacity, top";
|
| +shouldBe("getComputedStyle(parentElement, '').getPropertyValue('will-change')", "'contents, opacity, top'");
|
| +element = document.createElement("div");
|
| +parentElement.appendChild(element);
|
| +element.style.willChange = "inherit";
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'contents, opacity, top'");
|
| +
|
| +debug("");
|
| +debug("Test that will-change is not inherited by default");
|
| +var parentElement = document.createElement("div");
|
| +document.body.appendChild(parentElement);
|
| +parentElement.style.willChange = "opacity";
|
| +shouldBe("getComputedStyle(parentElement, '').getPropertyValue('will-change')", "'opacity'");
|
| +element = document.createElement("div");
|
| +parentElement.appendChild(element);
|
| +shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto'");
|
| +</script>
|
| +</body>
|
| +</html>
|
|
|