| <!DOCTYPE html> |
| <html> |
| <head> |
| <title>CSS Selectors Invalidation: attribute</title> |
| <link rel="help" href="https://drafts.csswg.org/selectors-4/#attribute-selectors"> |
| <meta name="assert" content="This tests that the attribute selectors are effective"> |
| <script src="/resources/testharness.js"></script> |
| <script src="/resources/testharnessreport.js"></script> |
| <style> |
| div { |
| color: gray; |
| } |
| |
| #a1[style] { |
| color: blue; |
| } |
| #a1[style] > #b1 { |
| color: green; |
| } |
| #a1[style] #c1 { |
| color: red; |
| } |
| #a1[style] + #d1 { |
| color: yellow; |
| } |
| |
| [id=a2] { |
| color: blue; |
| } |
| [id=a2] > #b2 { |
| color: green; |
| } |
| [id=a2] #c2 { |
| color: red; |
| } |
| [id=a2] + #d2 { |
| color: yellow; |
| } |
| |
| #a3[class~=q] { |
| color: blue; |
| } |
| #a3[class~=q] > #b3 { |
| color: green; |
| } |
| #a3[class~=q] #c3 { |
| color: red; |
| } |
| #a3[class~=q] + #d3 { |
| color: yellow; |
| } |
| |
| #a4[run|=one] { |
| color: blue; |
| } |
| #a4[run|=one] > #b4 { |
| color: green; |
| } |
| #a4[run|=one] #c4 { |
| color: red; |
| } |
| #a4[run|=one] + #d4 { |
| color: yellow; |
| } |
| |
| #a5 { |
| color: blue; |
| } |
| #a5 > #b5 { |
| color: green; |
| } |
| #a5 #c5 { |
| color: red; |
| } |
| #a5 + #d5 { |
| color: yellow; |
| } |
| |
| #a6.q { |
| color: blue; |
| } |
| #a6.q > #b6 { |
| color: green; |
| } |
| #a6.q #c6 { |
| color: red; |
| } |
| #a6.q + #d6 { |
| color: yellow; |
| } |
| |
| </style> |
| </head> |
| <body> |
| |
| <div id="a1"> |
| <div id="b1"> |
| <div id="c1"> |
| </div> |
| </div> |
| </div> |
| <div id="d1"> |
| </div> |
| |
| <div> |
| <div id="b2"> |
| <div id="c2"> |
| </div> |
| </div> |
| </div> |
| <div id="d2"> |
| </div> |
| |
| <div id="a3"> |
| <div id="b3"> |
| <div id="c3"> |
| </div> |
| </div> |
| </div> |
| <div id="d3"> |
| </div> |
| |
| <div id="a4"> |
| <div id="b4"> |
| <div id="c4"> |
| </div> |
| </div> |
| </div> |
| <div id="d4"> |
| </div> |
| |
| <div> |
| <div id="b5"> |
| <div id="c5"> |
| </div> |
| </div> |
| </div> |
| <div id="d5"> |
| </div> |
| |
| <div id="a6"> |
| <div id="b6"> |
| <div id="c6"> |
| </div> |
| </div> |
| </div> |
| <div id="d6"> |
| </div> |
| |
| <script> |
| const gray = "rgb(128, 128, 128)"; |
| const blue = "rgb(0, 0, 255)"; |
| const green = "rgb(0, 128, 0)"; |
| const red = "rgb(255, 0, 0)"; |
| const yellow = "rgb(255, 255, 0)"; |
| |
| function assertGray(a, b, c, d) { |
| assert_equals(getComputedStyle(a).color, gray); |
| assert_equals(getComputedStyle(b).color, gray); |
| assert_equals(getComputedStyle(c).color, gray); |
| assert_equals(getComputedStyle(d).color, gray); |
| } |
| |
| function assertColorful(a, b, c, d) { |
| assert_equals(getComputedStyle(a).color, blue); |
| assert_equals(getComputedStyle(b).color, green); |
| assert_equals(getComputedStyle(c).color, red); |
| assert_equals(getComputedStyle(d).color, yellow); |
| } |
| |
| test(() => { |
| assertGray(a1, b1, c1, d1); |
| a1.style.visibility = "visible"; |
| assertColorful(a1, b1, c1, d1); |
| a1.removeAttribute('style'); |
| assertGray(a1, b1, c1, d1); |
| }, "[att] selector is effective"); |
| |
| test(() => { |
| const a2 = b2.parentElement; |
| assertGray(a2, b2, c2, d2); |
| a2.id = 'x-a2'; |
| assertGray(a2, b2, c2, d2); |
| a2.id = 'a2'; |
| assertColorful(a2, b2, c2, d2); |
| a2.id = 'a2-y'; |
| assertGray(a2, b2, c2, d2); |
| }, "[att=val] selector is effective"); |
| |
| test(() => { |
| assertGray(a3, b3, c3, d3); |
| a3.setAttribute('class', 'p q r'); |
| assertColorful(a3, b3, c3, d3); |
| a3.setAttribute('class', 'q-r'); |
| assertGray(a3, b3, c3, d3); |
| }, "[att~=val] selector is effective"); |
| |
| test(() => { |
| assertGray(a4, b4, c4, d4); |
| a4.setAttribute('run', 'one'); |
| assertColorful(a4, b4, c4, d4); |
| a4.setAttribute('run', 'one two three'); |
| assertGray(a4, b4, c4, d4); |
| a4.setAttribute('run', 'one-two-three'); |
| assertColorful(a4, b4, c4, d4); |
| a4.setAttribute('run', 'zero-one'); |
| assertGray(a4, b4, c4, d4); |
| }, "[att|=val] selector is effective"); |
| |
| test(() => { |
| const a5 = b5.parentElement; |
| assertGray(a5, b5, c5, d5); |
| a5.setAttribute('id', 'x-a5'); |
| assertGray(a5, b5, c5, d5); |
| a5.setAttribute('id', 'a5'); |
| assertColorful(a5, b5, c5, d5); |
| a5.setAttribute('id', 'a5-y'); |
| assertGray(a5, b5, c5, d5); |
| }, "#id selector is effective"); |
| |
| test(() => { |
| assertGray(a6, b6, c6, d6); |
| a6.classList.add('p'); |
| a6.classList.add('q'); |
| a6.classList.add('r'); |
| assertColorful(a6, b6, c6, d6); |
| a6.classList.remove('q'); |
| a6.classList.add('q-r'); |
| assertGray(a6, b6, c6, d6); |
| }, ".class selector is effective"); |
| |
| </script> |
| </body> |
| </html> |
