| <!DOCTYPE html> |
| <script src="../resources/testharness.js"></script> |
| <script src="../resources/testharnessreport.js"></script> |
| <div id="test"></div> |
| <script> |
| let hiddenProperties = [ |
| "border-block", |
| "border-block-width", |
| "border-block-style", |
| "border-block-color", |
| "border-inline", |
| "border-inline-width", |
| "border-inline-style", |
| "border-inline-color", |
| "inset", |
| "inset-block", |
| "inset-block-start", |
| "inset-block-end", |
| "inset-inline", |
| "inset-inline-start", |
| "inset-inline-end", |
| "margin-block", |
| "margin-inline", |
| "padding-block", |
| "padding-inline", |
| ]; |
| let element = document.getElementById("test"); |
| let {style} = element; |
| let ownProps = Object.getOwnPropertyNames(style); |
| let cs = getComputedStyle(element); |
| for (let property of hiddenProperties) { |
| test(function() { |
| let camelCase = property.replace(/-(.)/g, (match, $1) => $1.toUpperCase()); |
| style.cssText = ""; |
| let initialStyles = Object.assign({}, cs); |
| |
| // Check that the property is not initially exposed |
| assert_false(property in style, `${property} not in style`); |
| assert_false(camelCase in style, `${camelCase} not in style`); |
| assert_false(ownProps.includes(property), `${property} not in own properties`); |
| assert_false(ownProps.includes(camelCase), `${camelCase} not in own properties`); |
| assert_equals(style[property], undefined, `${property} value is undefined`); |
| assert_equals(style[camelCase], undefined, `${camelCase} value is undefined`); |
| assert_false(property in cs, `${property} not in computed style`); |
| assert_false(camelCase in cs, `${camelCase} not in computed style`); |
| assert_equals(cs[property], undefined, `${property} computed value is undefined`); |
| assert_equals(cs[camelCase], undefined, `${camelCase} computed value is undefined`); |
| |
| // Try to set a value |
| style[property] = "inherit"; |
| style[camelCase] = "inherit"; |
| style.setProperty(property, "inherit"); |
| style.setProperty(camelCase, "inherit"); |
| |
| // Check that it had no effect |
| assert_equals(style.cssText, "", `${property} value ignored in cssText`); |
| assert_equals(style.getPropertyValue(property), "", `${property} value ignored in getPropertyValue`); |
| assert_equals(style.getPropertyValue(camelCase), "", `${camelCase} value ignored in getPropertyValue`); |
| assert_equals(cs.getPropertyValue(property), "", `${property} has no computed value`); |
| assert_equals(cs.getPropertyValue(camelCase), "", `${camelCase} has no computed value`); |
| assert_object_equals(initialStyles, Object.assign({}, cs), `Computed styles remain unaffected`); |
| |
| // Check that enabled longhands cannot be serialized into this shorthand |
| for (let longhand of ownProps) |
| if (longhand.startsWith(camelCase)) |
| style[longhand] = "inherit"; |
| assert_false(new RegExp("(^|;\s*)" + property + ":").test(style.cssText), `longhands can't be serialized into ${property}`); |
| }, `${property} is not exposed`); |
| } |
| </script> |
