| <!DOCTYPE html> |
| <html> |
| <head> |
| <meta charset="utf-8"> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| background-color: rgb(255, 255, 255); |
| } |
| [data-webkit='Matched' i] { |
| background-color: rgb(1, 2, 3); |
| } |
| </style> |
| </head> |
| <body> |
| <div> |
| <!-- With renderer --> |
| <target></target> |
| </div> |
| <div style="display:none;"> |
| <!-- Without renderer --> |
| <target></target> |
| </div> |
| </body> |
| <script> |
| description('Test the basic cases of style update when matching attribute values with the case-insensitive flag.'); |
| |
| function testState(shouldMatch) { |
| shouldBe('document.querySelectorAll("[data-webkit=Matched i]").length', shouldMatch ? '2' : '0'); |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[0]).backgroundColor', shouldMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| shouldBeEqualToString('getComputedStyle(document.querySelectorAll("target")[1]).backgroundColor', shouldMatch ? 'rgb(1, 2, 3)' : 'rgb(255, 255, 255)'); |
| } |
| |
| function setAttribute(attribute, value) { |
| var allTargets = document.querySelectorAll("target"); |
| for (var i = 0; i < allTargets.length; ++i) |
| allTargets[i].setAttribute(attribute, value); |
| } |
| |
| function removeAttribute(attribute) { |
| var allTargets = document.querySelectorAll("target"); |
| for (var i = 0; i < allTargets.length; ++i) |
| allTargets[i].removeAttribute(attribute); |
| } |
| |
| |
| debug("Initial state."); |
| testState(false); |
| |
| debug("Adding the attribute without value."); |
| setAttribute('data-webkit', ''); |
| testState(false); |
| |
| debug("Setting the value to \"matched\"."); |
| setAttribute('data-webkit', 'matched'); |
| testState(true); |
| |
| |
| debug("Setting the value to \"not\"."); |
| setAttribute('data-webkit', 'not'); |
| testState(false); |
| |
| debug("Setting the value to \"Matched\"."); |
| setAttribute('data-webkit', 'Matched'); |
| testState(true); |
| |
| debug("Setting the value of an unrelated attribute to \"Matched\"."); |
| setAttribute('data-foobar', 'Matched'); |
| testState(true); |
| |
| debug("Remove the data-webkit attribute."); |
| removeAttribute('data-webkit'); |
| testState(false); |
| |
| debug("Setting the value to \"MATCHED\"."); |
| setAttribute('data-webkit', 'Matched'); |
| testState(true); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
