| <!DOCTYPE html> |
| <title>CSS Values and Units Test: attr() security limitations in universal selector </title> |
| <link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-security"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <style> |
| @property --some-string { |
| syntax: "<string>"; |
| inherits: true; |
| initial-value: "empty"; |
| } |
| * { |
| --some-string: "https://does-not-exist.test/404.png"; |
| } |
| div { |
| --some-string: attr(data-foo); |
| background-image: image-set(var(--some-string)); |
| } |
| </style> |
| |
| <html> |
| <body> |
| <div id="attr" data-foo="https://does-not-exist.test/404.png"></div> |
| </body> |
| </html> |
| |
| <script> |
| var elem = document.getElementById("attr"); |
| test(() => { |
| assert_equals(window.getComputedStyle(elem).getPropertyValue('background-image'), |
| 'none', |
| "'background-image: attr(data-foo)' with data-foo='https://does-not-exist.test/404.png'"); |
| }); |
| </script> |
