| <!DOCTYPE html> |
| <script src="../../resources/testharness.js"></script> |
| <script src="../../resources/testharnessreport.js"></script> |
| <style id=style></style> |
| <div id=target></div> |
| <script> |
| |
| // This test verifies that <transform-function> has reasonable behavior while |
| // we wait for https://github.com/w3c/css-houdini-drafts/issues/290 to be |
| // resolved. |
| // |
| // Ultimately, properties registered with <transform-function> should be |
| // representable as stand-alone CSSTransformComponents, in which case this |
| // test file will no longer be valid. |
| |
| CSS.registerProperty({ |
| name: '--tf', |
| syntax: '<transform-function>', |
| initialValue: 'rotateX(0deg)', |
| inherits: false |
| }); |
| |
| test(() => { |
| let value = CSSStyleValue.parse('--tf', 'translateX(0px)'); |
| assert_equals(value.constructor, CSSStyleValue); |
| }, 'Result of CSSStyleValue.parse for <transform-function> is a direct CSSStyleValue'); |
| |
| test(() => { |
| target.style = '--tf: translateX(0px)'; |
| let value = target.attributeStyleMap.get('--tf'); |
| assert_equals(value.constructor, CSSStyleValue); |
| target.style = ''; |
| }, 'Result of attributeStyleMap.get for <transform-function> is a direct CSSStyleValue'); |
| |
| test(() => { |
| style.textContent = '#target { --tf: translateX(0px); }'; |
| let styleMap = style.sheet.rules[0].styleMap; |
| let value = styleMap.get('--tf'); |
| assert_equals(value.constructor, CSSStyleValue); |
| style.textContent = ''; |
| }, 'Result of styleMap.get for <transform-function> is a direct CSSStyleValue'); |
| |
| test(() => { |
| let value = target.computedStyleMap().get('--tf'); |
| assert_equals(value.constructor, CSSStyleValue); |
| }, 'Result of computedstyleMap.get for <transform-function> is a direct CSSStyleValue'); |
| |
| </script> |
