| <!DOCTYPE html> |
| <style> |
| #none { contain: none; } |
| #style { contain: style; } |
| #layout { contain: layout; } |
| #paint { contain: paint; } |
| #strict { contain: strict; } |
| </style> |
| <body> |
| <div id="none"><div></div></div> |
| <div id="style"><div></div></div> |
| <div id="layout"><div></div></div> |
| <div id="paint"><div></div></div> |
| <div id="strict"><div></div></div> |
| <div id="test"></div> |
| <script src="../../../resources/js-test.js"></script> |
| <script> |
| function computedContainValue(element) { |
| return window.getComputedStyle(element).contain; |
| } |
| function getContainValue(query) |
| { |
| var element = document.querySelector(query); |
| return computedContainValue(element); |
| } |
| |
| shouldBeEqualToString("getContainValue('#none')", "none"); |
| shouldBeEqualToString("getContainValue('#style')", "style"); |
| shouldBeEqualToString("getContainValue('#layout')", "layout"); |
| shouldBeEqualToString("getContainValue('#paint')", "paint"); |
| shouldBeEqualToString("getContainValue('#strict')", "strict"); |
| |
| var children = document.querySelectorAll("div > div"); |
| for (var i = 0; i < children.length; i++) { |
| shouldBeEqualToString("computedContainValue(children[i])", "none"); |
| } |
| |
| var test = document.querySelector('#test'); |
| |
| test.style.setProperty("contain", "layout paint style"); |
| shouldBeEqualToString("getContainValue('#test')", "strict"); |
| |
| test.style.setProperty("contain", "layout paint"); |
| shouldBeEqualToString("getContainValue('#test')", "layout paint"); |
| |
| test.style.setProperty("contain", "strict"); |
| shouldBeEqualToString("getContainValue('#test')", "strict"); |
| |
| test.style.setProperty("contain", "none"); |
| shouldBeEqualToString("getContainValue('#test')", "none"); |
| |
| test.style.setProperty("contain", "layout layout"); |
| shouldBeEqualToString("getContainValue('#test')", "none"); |
| |
| test.style.setProperty("contain", "strict layout"); |
| shouldBeEqualToString("getContainValue('#test')", "none"); |
| |
| test.style.setProperty("contain", "paint strict"); |
| shouldBeEqualToString("getContainValue('#test')", "none"); |
| |
| test.style.setProperty("contain", "paint layout style paint"); |
| shouldBeEqualToString("getContainValue('#test')", "none"); |
| |
| test.style.setProperty("contain", "style paint"); |
| shouldBeEqualToString("getContainValue('#test')", "style paint"); |
| |
| test.style.setProperty("contain", "none strict"); |
| shouldBeEqualToString("getContainValue('#test')", "style paint"); |
| |
| test.style.setProperty("contain", "strict strict"); |
| shouldBeEqualToString("getContainValue('#test')", "style paint"); |
| |
| test.style.setProperty("contain", "strict none"); |
| shouldBeEqualToString("getContainValue('#test')", "style paint"); |
| </script> |
