| <!DOCTYPE html> |
| <title>CSS Values and Units Test: attr</title> |
| <meta name="assert" content="test attr values"> |
| <link rel="help" href="https://drafts.csswg.org/css-values-5/#attr-notations"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| |
| <div id="attr"></div> |
| <div id="expected"></div> |
| |
| <script> |
| function test_attr_cycle(property, propertyValue, attrValue) { |
| var elem = document.getElementById("attr"); |
| var expectedValue = window.getComputedStyle(elem).getPropertyValue(property); |
| |
| elem.setAttribute("data-foo", attrValue); |
| elem.style.setProperty(property, propertyValue); |
| |
| test(() => { |
| assert_equals(window.getComputedStyle(elem).getPropertyValue(property), expectedValue, |
| "Setting property \'" + property + "\' to the value \'" + propertyValue + |
| "\', where \'data-foo=" + attrValue + "\' should not change it's value."); |
| }); |
| elem.style.setProperty(property, null); |
| } |
| |
| function test_attr_no_cycle(property, propertyValue, attrValue, expectedValue) { |
| var elem = document.getElementById("attr"); |
| elem.setAttribute("data-foo", attrValue); |
| elem.style.setProperty(property, propertyValue); |
| |
| var expectedElem = document.getElementById("expected"); |
| expectedElem.style.setProperty(property, expectedValue); |
| |
| test(() => { |
| assert_equals(window.getComputedStyle(elem).getPropertyValue(property), |
| window.getComputedStyle(expectedElem).getPropertyValue(property), |
| "Value \'" + propertyValue + "\', where \'data-foo=" + attrValue + |
| "\' should be valid for the property \'" + property + "\'."); |
| }); |
| |
| elem.style.setProperty(property, null); |
| expectedElem.style.setProperty(property, null); |
| } |
| |
| /* Simple cycle */ |
| test_attr_cycle('--x', 'attr(data-foo type(<ident>))', 'attr(data-foo)'); |
| test_attr_cycle('--x', 'attr(data-foo type(<length>))', 'attr(data-foo type(<length>))'); |
| test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-foo type(*))'); |
| |
| var attrElem = document.getElementById("attr"); |
| |
| attrElem.setAttribute('data-bar', 'attr(data-foo)'); |
| test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*))'); |
| attrElem.removeAttribute('data-bar'); |
| |
| /* Cycle with attr() and var() */ |
| attrElem.style.setProperty('--x', 'attr(data-foo type(*))'); |
| test_attr_cycle('--y', 'attr(data-foo type(*))', 'var(--x)'); |
| attrElem.style.setProperty('--x', null); |
| |
| attrElem.setAttribute('data-bar', 'var(--y)'); |
| test_attr_cycle('--y', 'attr(data-foo type(<string>))', 'attr(data-bar type(<string>))'); |
| attrElem.removeAttribute('data-bar'); |
| |
| attrElem.setAttribute('data-bar', 'var(--x)'); |
| test_attr_cycle('--x', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))'); |
| attrElem.removeAttribute('data-bar'); |
| |
| attrElem.style.setProperty('--x', 'attr(data-foo type(*))'); |
| attrElem.setAttribute('data-bar', 'var(--x)'); |
| test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*), 11) var(--x)'); |
| attrElem.style.setProperty('--x', null); |
| attrElem.removeAttribute('data-bar'); |
| |
| /* Cycle with fallback */ |
| test_attr_cycle('--x', 'attr(data-foo type(<length>), 11px)', 'attr(data-foo type(<length>))'); |
| test_attr_cycle('--x', 'attr(data-foo type(<length>))', 'attr(data-foo type(<length>), 11px)'); |
| test_attr_cycle('--y', 'attr(data-foo type(*), 11px)', 'attr(data-foo type(*))'); |
| |
| attrElem.setAttribute('data-bar', '11px'); |
| test_attr_cycle('--x', 'attr(data-foo type(<length>), attr(data-bar type(<length>)))', 'attr(data-foo type(*))'); |
| attrElem.removeAttribute('data-bar'); |
| attrElem.setAttribute('data-bar', 'abc'); |
| test_attr_cycle('--y', 'attr(data-foo type(*), attr(data-bar))', 'attr(data-foo type(*))'); |
| attrElem.removeAttribute('data-bar'); |
| |
| /* Cycle with var() and fallback */ |
| attrElem.style.setProperty('--x', 'var(--y)'); |
| test_attr_cycle('--y', 'var(--x, 100)', 'var(--y)'); |
| attrElem.style.setProperty('--x', null); |
| |
| attrElem.setAttribute('data-bar', 'var(--y)'); |
| attrElem.style.setProperty('--x', 'attr(data-foo)'); |
| test_attr_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar type(*), 11) var(--x, 3)'); |
| attrElem.style.setProperty('--x', null); |
| attrElem.removeAttribute('data-bar'); |
| |
| /* Cycle in unused fallbacks */ |
| test_attr_no_cycle('--y', 'attr(data-foo type(*), var(--y))', '3', '3'); |
| test_attr_no_cycle('--y', 'attr(data-foo type(*), attr(data-foo))', '3', '3'); |
| |
| attrElem.style.setProperty('--x', 'var(--y)'); |
| test_attr_no_cycle('--y', 'attr(data-foo type(*), var(--x))', '3', '3'); |
| attrElem.style.setProperty('--x', null); |
| |
| attrElem.setAttribute('data-bar', 'attr(data-foo type(*))'); |
| test_attr_no_cycle('--y', 'attr(data-foo type(*), attr(data-bar type(*)))', '3', '3'); |
| attrElem.removeAttribute('data-bar'); |
| |
| /* Cycle in fallback */ |
| test_attr_cycle('--y', 'attr(data-unknown type(*), var(--y))', '3'); |
| |
| /* No cycle, use raw CSS string without substitution */ |
| attrElem.setAttribute('data-bar', 'var(--y)'); |
| test_attr_no_cycle('--y', 'attr(data-foo type(<string>))', 'attr(data-bar type(<string>))', ''); |
| attrElem.removeAttribute('data-bar'); |
| |
| attrElem.style.setProperty('--x', 'attr(data-foo)'); |
| attrElem.setAttribute('data-bar', 'var(--x)'); |
| test_attr_no_cycle('--y', 'attr(data-foo type(*))', 'attr(data-bar, 11) var(--x, 3)', '"var(--x)" "attr(data-bar, 11) var(--x, 3)"'); |
| attrElem.removeAttribute('data-bar'); |
| attrElem.style.setProperty('--x', null); |
| </script> |
