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> |