| <html> |
| <head> |
| <style> |
| div { |
| width: 100px; |
| height: 100px; |
| border: 3px solid red; |
| } |
| #div0 { |
| --v0: 50px; |
| border-radius: var(--v0); |
| } |
| #div1 { |
| --v0: 50px; |
| margin: var(--v0); |
| } |
| |
| #div2 { |
| --v0: 50px; |
| border-block-width: var(--v0); |
| } |
| |
| #div3 { |
| --v0: 50px; |
| border-inline-width: var(--v0); |
| } |
| |
| #div4 { |
| --v0: left; |
| perspective-origin: var(--v0); |
| } |
| </style> |
| <script src="../resources/js-test-pre.js"></script> |
| </head> |
| <body> |
| <div id="div0"></div> |
| <div id="div1"></div> |
| <div id="div2"></div> |
| <div id="div3"></div> |
| <div id="div4"></div> |
| <script> |
| description('Test that shorthand css properties set to a variable return that variable when accessed through the style sheet.'); |
| |
| debug('- Tests -'); |
| //var value = document.styleSheets[1].cssRules[1].style['borderRadius']; |
| var styleSheet = document.styleSheets[0]; |
| shouldBeEqualToString('styleSheet.rules[1].style.borderRadius', "var(--v0)"); |
| shouldBeEqualToString('styleSheet.rules[2].style.margin', "var(--v0)"); |
| shouldBeEqualToString('styleSheet.rules[3].style.borderBlockWidth', "var(--v0)"); |
| shouldBeEqualToString('styleSheet.rules[4].style.borderInlineWidth', "var(--v0)"); |
| shouldBeEqualToString('styleSheet.rules[5].style.perspectiveOrigin', "var(--v0)"); |
| </script> |
| <script src="../resources/js-test-post.js"></script> |
| </body> |
| </html> |
