OLD | NEW |
(Empty) | |
| 1 <!DOCTYPE html> |
| 2 <html> |
| 3 <head> |
| 4 <style> |
| 5 #willChangeOpacity { |
| 6 will-change: opacity; |
| 7 } |
| 8 |
| 9 #willChangeScrollPosition { |
| 10 will-change: scroll-position; |
| 11 } |
| 12 |
| 13 #willChangeContents { |
| 14 will-change: contents; |
| 15 } |
| 16 |
| 17 #willChangeMultiple { |
| 18 will-change: opacity, contents, left, -webkit-transform; |
| 19 } |
| 20 |
| 21 #willChangeWithArbitraryIdent { |
| 22 will-change: opacity, i-am-not-a-property, top; |
| 23 } |
| 24 |
| 25 </style> |
| 26 <script src="../../resources/js-test.js"></script> |
| 27 </head> |
| 28 <body> |
| 29 <div id="willChangeOpacity"></div> |
| 30 <div id="willChangeScrollPosition"></div> |
| 31 <div id="willChangeContents"></div> |
| 32 <div id="willChangeMultiple"></div> |
| 33 <div id="willChangeWithArbitraryIdent"></div> |
| 34 <script> |
| 35 description('Test that setting and getting will-change works as expected'); |
| 36 |
| 37 debug("Test getting will-change set through CSS"); |
| 38 var willChangeOpacity = document.getElementById("willChangeOpacity"); |
| 39 shouldBe("getComputedStyle(willChangeOpacity, '').getPropertyValue('will-change'
)", "'opacity'"); |
| 40 |
| 41 var willChangeScrollPosition = document.getElementById("willChangeScrollPosition
"); |
| 42 shouldBe("getComputedStyle(willChangeScrollPosition, '').getPropertyValue('will-
change')", "'scroll-position'"); |
| 43 |
| 44 var willChangeContents = document.getElementById("willChangeContents"); |
| 45 shouldBe("getComputedStyle(willChangeContents, '').getPropertyValue('will-change
')", "'contents'"); |
| 46 |
| 47 var willChangeMultiple = document.getElementById("willChangeMultiple"); |
| 48 shouldBe("getComputedStyle(willChangeMultiple, '').getPropertyValue('will-change
')", "'contents, opacity, left, -webkit-transform'"); |
| 49 |
| 50 var willChangeContents = document.getElementById("willChangeWithArbitraryIdent")
; |
| 51 shouldBe("getComputedStyle(willChangeWithArbitraryIdent, '').getPropertyValue('w
ill-change')", "'opacity, top'"); |
| 52 |
| 53 debug(""); |
| 54 debug("Test initial value of will-change"); |
| 55 var element = document.createElement("div"); |
| 56 document.body.appendChild(element); |
| 57 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 58 |
| 59 debug(""); |
| 60 debug("Test getting and setting will-change through JS"); |
| 61 element = document.createElement("div"); |
| 62 document.body.appendChild(element); |
| 63 element.style.willChange = "opacity"; |
| 64 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac
ity'"); |
| 65 |
| 66 element.style.willChange = "scroll-position"; |
| 67 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'scro
ll-position'"); |
| 68 |
| 69 element.style.willChange = "contents"; |
| 70 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'cont
ents'"); |
| 71 |
| 72 element.style.willChange = "contents, scroll-position, opacity, -webkit-transfor
m"; |
| 73 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'cont
ents, scroll-position, opacity, -webkit-transform'"); |
| 74 |
| 75 element.style.willChange = "i-am-not-a-property, opacity, top"; |
| 76 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac
ity, top'"); |
| 77 |
| 78 element.style.willChange = "opacity, i-am-not-a-property, top"; |
| 79 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac
ity, top'"); |
| 80 |
| 81 element.style.willChange = "opacity, top, i-am-not-a-property"; |
| 82 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac
ity, top'"); |
| 83 |
| 84 element.style.willChange = "i-am-not-a-property"; |
| 85 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 86 |
| 87 debug(""); |
| 88 debug("Test that illegal will-change values are disallowed"); |
| 89 element.style.willChange = "auto"; |
| 90 element.style.willChange = "opacity, will-change"; |
| 91 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 92 |
| 93 element.style.willChange = "none"; |
| 94 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 95 |
| 96 element.style.willChange = "none, opacity"; |
| 97 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 98 |
| 99 element.style.willChange = "all"; |
| 100 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 101 |
| 102 element.style.willChange = "all, opacity"; |
| 103 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 104 |
| 105 element.style.willChange = "left, auto, top"; |
| 106 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 107 |
| 108 element.style.willChange = "left, default"; |
| 109 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 110 |
| 111 element.style.willChange = "initial, top"; |
| 112 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 113 |
| 114 element.style.willChange = "top, inherit"; |
| 115 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 116 |
| 117 debug(""); |
| 118 debug("Test the value 'initial'"); |
| 119 element.style.willChange = "opacity"; |
| 120 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opac
ity'"); |
| 121 element.style.willChange = "initial"; |
| 122 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 123 |
| 124 debug(""); |
| 125 debug("Test the value 'inherit'"); |
| 126 var parentElement = document.createElement("div"); |
| 127 document.body.appendChild(parentElement); |
| 128 parentElement.style.willChange = "contents, opacity, top"; |
| 129 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('will-change')",
"'contents, opacity, top'"); |
| 130 element = document.createElement("div"); |
| 131 parentElement.appendChild(element); |
| 132 element.style.willChange = "inherit"; |
| 133 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'cont
ents, opacity, top'"); |
| 134 |
| 135 debug(""); |
| 136 debug("Test that will-change is not inherited by default"); |
| 137 var parentElement = document.createElement("div"); |
| 138 document.body.appendChild(parentElement); |
| 139 parentElement.style.willChange = "opacity"; |
| 140 shouldBe("getComputedStyle(parentElement, '').getPropertyValue('will-change')",
"'opacity'"); |
| 141 element = document.createElement("div"); |
| 142 parentElement.appendChild(element); |
| 143 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'auto
'"); |
| 144 </script> |
| 145 </body> |
| 146 </html> |
OLD | NEW |