parse-will-change.html | Explore in Territory

<!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>
chromium/third_party/blink/web_tests/compositing/will-change/parse-will-change.html
