| <!DOCTYPE html> |
| <html> |
| <head> |
| <script src="../../resources/js-test-pre.js"></script> |
| <style> |
| * { |
| color: black; |
| } |
| [myattr] target { |
| color: rgb(1, 0, 0); |
| } |
| |
| [myattr=value2] > inert target { |
| color: rgb(2, 0, 0); |
| } |
| |
| [myattr~=value3] inert + target { |
| color: rgb(3, 0, 0); |
| } |
| |
| [MYATTR|=value4] inert ~ target { |
| color: rgb(4, 0, 0); |
| } |
| |
| [myAttr^=value5] target { |
| color: rgb(5, 0, 0); |
| } |
| |
| [myattr$=value6] target { |
| color: rgb(6, 0, 0); |
| } |
| |
| [myATTR*=value7] target { |
| color: rgb(7, 0, 0); |
| } |
| |
| [myattr*=vaLUE8 i] target { |
| color: rgb(8, 0, 0); |
| } |
| |
| [myattr2] > target { |
| color: rgb(9, 0, 0); |
| } |
| |
| root:not([mynotattr]) target { |
| color: rgb(10, 0, 0); |
| } |
| |
| [myattr=value11] target { |
| color: rgb(11, 0, 0); |
| } |
| |
| [myattr3] notarget { |
| color: rgb(99, 0, 0); |
| } |
| |
| </style> |
| </head> |
| <body> |
| <root> |
| <!-- With renderer --> |
| <inert> |
| <inert> |
| <inert></inert> |
| <target> |
| <inert></inert> |
| <target></target> |
| </target> |
| </inert> |
| <target></target> |
| <inert></inert> |
| </inert> |
| </root> |
| <root style="display:none;"> |
| <!-- Without renderer --> |
| <inert> |
| <inert> |
| <inert></inert> |
| <target> |
| <inert></inert> |
| <target></target> |
| </target> |
| </inert> |
| <target></target> |
| <inert></inert> |
| </inert> |
| </root> |
| </body> |
| <script> |
| |
| description('Test that we invalidate the element subtree minimally on attribute change'); |
| |
| function testStyleChangeType(tag, type) |
| { |
| var elements = document.querySelectorAll(tag); |
| for (var i = 0; i < elements.length; ++i) { |
| if (window.internals.styleChangeType(elements[i]) != type) |
| return false; |
| } |
| return true; |
| } |
| |
| function testStyleInvalidation(expectedDescendantStyleChange) { |
| // Ideally we would't invalidate the root at all. |
| shouldBeTrue('testStyleChangeType("root", "NoStyleChange") || testStyleChangeType("root", "InlineStyleChange")'); |
| |
| shouldBeTrue('testStyleChangeType("target", "' + expectedDescendantStyleChange +'")'); |
| |
| shouldBeTrue('testStyleChangeType("inert", "NoStyleChange")'); |
| } |
| |
| function setAttribute(name, value) { |
| debug("Setting attribute '" + name + "' value '" + value + "'"); |
| var allRoots = document.querySelectorAll("root"); |
| allRoots[0].setAttribute(name, value); |
| allRoots[1].setAttribute(name, value); |
| } |
| |
| function removeAttribute(name) { |
| debug("Removing attribute '" + name + "'"); |
| var allRoots = document.querySelectorAll("root"); |
| allRoots[0].removeAttribute(name); |
| allRoots[1].removeAttribute(name); |
| } |
| |
| function checkStyle(n) { |
| document.documentElement.offsetTop; |
| |
| hasExpectedStyle = true; |
| expectedColor = 'rgb('+n+', 0, 0)'; |
| var targets = document.querySelectorAll("target"); |
| for (var i = 0; i < targets.length; ++i) { |
| hasExpectedStyle = getComputedStyle(targets[i]).color == expectedColor; |
| if (!hasExpectedStyle) |
| break; |
| } |
| shouldBeTrue("hasExpectedStyle"); |
| } |
| |
| setAttribute('mynotattr', ''); |
| |
| checkStyle(0); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(0); |
| |
| setAttribute('myattr', ''); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr', 'foo'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr', 'value2'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(2); |
| |
| setAttribute('myattr', 'foo'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| removeAttribute('myattr'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(0); |
| |
| setAttribute('myattr', 'value3'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(3); |
| |
| setAttribute('myattr', 'dummy value3'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(3); |
| |
| setAttribute('myattr', 'value4-foo'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(4); |
| |
| setAttribute('myattr', 'value4-foobar'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(4); |
| |
| setAttribute('myattr', 'dummy value4-foo'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr', 'value5foo'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(5); |
| |
| setAttribute('myattr', 'value5foobar'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(5); |
| |
| setAttribute('myattr', 'foovalue5'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr', 'foovalue6'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(6); |
| |
| setAttribute('myAttr', 'foobarvalue6'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(6); |
| |
| setAttribute('MYATTR', 'value6foo'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr', 'value7'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(7); |
| |
| setAttribute('myattr', 'value7foo'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(7); |
| |
| setAttribute('myATTR', 'foovalue7foo'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(7); |
| |
| setAttribute('myattr', 'VALUE7foo'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr', 'Value8'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(8); |
| |
| setAttribute('myattr', 'value8foo'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(8); |
| |
| setAttribute('myATTR', 'FOOVALue8foo'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(8); |
| |
| setAttribute('myattr', 'VALUE8foo'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(8); |
| |
| setAttribute('myattr', 'VALUE 8foo'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr2', ''); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr2', 'foo'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(1); |
| |
| removeAttribute('mynotattr'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(10); |
| |
| setAttribute('mynotattr', 'value'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(1); |
| |
| setAttribute('myattr', 'value11'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(11); |
| |
| setAttribute('myattr3', ''); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(11); |
| |
| removeAttribute('myattr3'); |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(11); |
| |
| var dynamicSheet = document.createElement("style"); |
| dynamicSheet.innerHTML = "[myattr3] target { color:rgb(12, 0, 0); }" |
| debug("Inserting stylesheet '" + dynamicSheet.innerHTML + "'"); |
| document.head.appendChild(dynamicSheet); |
| |
| testStyleInvalidation("NoStyleChange"); |
| checkStyle(11); |
| |
| setAttribute('myattr3', ''); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(12); |
| |
| removeAttribute('myattr3'); |
| testStyleInvalidation("InlineStyleChange"); |
| checkStyle(11); |
| |
| </script> |
| <script src="../../resources/js-test-post.js"></script> |
| </html> |
