| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <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> |
| </head> |
| <body> |
| <div id="willChangeOpacity"></div> |
| <div id="willChangeScrollPosition"></div> |
| <div id="willChangeContents"></div> |
| <div id="willChangeMultiple"></div> |
| <div id="willChangeWithArbitraryIdent"></div> |
| <script> |
| 'use strict'; |
| // Test that setting and getting will-change works as expected. |
| |
| test(() => { |
| var willChangeOpacity = document.getElementById("willChangeOpacity"); |
| assert_equals(getComputedStyle(willChangeOpacity, '').getPropertyValue('will-change'), 'opacity'); |
| |
| var willChangeScrollPosition = document.getElementById("willChangeScrollPosition"); |
| assert_equals(getComputedStyle(willChangeScrollPosition, '').getPropertyValue('will-change'), 'scroll-position'); |
| |
| var willChangeContents = document.getElementById("willChangeContents"); |
| assert_equals(getComputedStyle(willChangeContents, '').getPropertyValue('will-change'), 'contents'); |
| |
| var willChangeMultiple = document.getElementById("willChangeMultiple"); |
| assert_equals(getComputedStyle(willChangeMultiple, '').getPropertyValue('will-change'), 'contents, opacity, left, -webkit-transform'); |
| |
| var willChangeContents = document.getElementById("willChangeWithArbitraryIdent"); |
| assert_equals(getComputedStyle(willChangeWithArbitraryIdent, '').getPropertyValue('will-change'), 'opacity, top'); |
| }, "Test getting will-change set through CSS"); |
| |
| test(() => { |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| }, "Test initial value of will-change"); |
| |
| test(() => { |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.willChange = "opacity"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'opacity'); |
| |
| element.style.willChange = "scroll-position"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'scroll-position'); |
| |
| element.style.willChange = "contents"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'contents'); |
| |
| element.style.willChange = "contents, scroll-position, opacity, -webkit-transform"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'contents, scroll-position, opacity, -webkit-transform'); |
| |
| element.style.willChange = "i-am-not-a-property, opacity, top"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'opacity, top'); |
| |
| element.style.willChange = "opacity, i-am-not-a-property, top"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'opacity, top'); |
| |
| element.style.willChange = "opacity, top, i-am-not-a-property"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'opacity, top'); |
| |
| element.style.willChange = "i-am-not-a-property"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| }, "Test getting and setting will-change through JS"); |
| |
| test(() => { |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.willChange = "auto"; |
| element.style.willChange = "opacity, will-change"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "none"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "none, opacity"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "all"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "all, opacity"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "left, auto, top"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "left, default"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "initial, top"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| |
| element.style.willChange = "top, inherit"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| }, "Test that illegal will-change values are disallowed"); |
| |
| test(() => { |
| var element = document.createElement("div"); |
| document.body.appendChild(element); |
| element.style.willChange = "opacity"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'opacity'); |
| element.style.willChange = "initial"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| }, "Test the value 'initial'"); |
| |
| test(() => { |
| var parentElement = document.createElement("div"); |
| document.body.appendChild(parentElement); |
| parentElement.style.willChange = "contents, opacity, top"; |
| assert_equals(getComputedStyle(parentElement, '').getPropertyValue('will-change'), 'contents, opacity, top'); |
| var element = document.createElement("div"); |
| parentElement.appendChild(element); |
| element.style.willChange = "inherit"; |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'contents, opacity, top'); |
| }, "Test the value 'inherit'"); |
| |
| test(() => { |
| var parentElement = document.createElement("div"); |
| document.body.appendChild(parentElement); |
| parentElement.style.willChange = "opacity"; |
| assert_equals(getComputedStyle(parentElement, '').getPropertyValue('will-change'), 'opacity'); |
| var element = document.createElement("div"); |
| parentElement.appendChild(element); |
| assert_equals(getComputedStyle(element, '').getPropertyValue('will-change'), 'auto'); |
| }, "Test that will-change is not inherited by default"); |
| </script> |
| </body> |
| </html> |
