third_party/WebKit/LayoutTests/compositing/will-change/parse-will-change.html

   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('will-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')", "'opacity'");
  65
  66 element.style.willChange = "scroll-position";
  67 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'scroll-position'");
  68
  69 element.style.willChange = "contents";
  70 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'contents'");
  71
  72 element.style.willChange = "contents, scroll-position, opacity, -webkit-transform";
  73 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'contents, scroll-position, opacity, -webkit-transform'");
  74
  75 element.style.willChange = "i-am-not-a-property, opacity, top";
  76 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity, top'");
  77
  78 element.style.willChange = "opacity, i-am-not-a-property, top";
  79 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity, top'");
  80
  81 element.style.willChange = "opacity, top, i-am-not-a-property";
  82 shouldBe("getComputedStyle(element, '').getPropertyValue('will-change')", "'opacity, 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')", "'opacity'");
 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')", "'contents, 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>