diff options
| author | tasak@google.com <tasak@google.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538> | 2012-11-06 11:33:07 +0000 |
|---|---|---|
| committer | tasak@google.com <tasak@google.com@bbb929c8-8fbe-4397-9dbb-9b2b20218538> | 2012-11-06 11:33:07 +0000 |
| commit | 98231b9b026b233f303e9d7c36e9442ea720ae45 (patch) | |
| tree | e6ecc4a91117fb7428cb177be672ed80faf86d6f /third_party/WebKit/LayoutTests/fast/css/remove-attribute-style.html | |
| parent | 7db8c7ff554d37ee10681aa3a6c9878948e98f98 (diff) | |
| download | chromium_src-98231b9b026b233f303e9d7c36e9442ea720ae45.zip chromium_src-98231b9b026b233f303e9d7c36e9442ea720ae45.tar.gz chromium_src-98231b9b026b233f303e9d7c36e9442ea720ae45.tar.bz2 | |
removeAttribute('style') not working in certain circumstances
https://bugs.webkit.org/show_bug.cgi?id=99295
Reviewed by Ryosuke Niwa.
Source/WebCore:
After web developers did style.XXXX=YYYY for some element, the inline
style should be always removable by using "removeAttribute('style')".
Currently it depends on whether web developers invokes
getAttribute('style'), setAttribute('style), and so on. E.g. once they
invoke getAttribute('style'), removeAttribute('style') works. This is
very confusing behavior.
Looking at Firefox browser, removeAttribute('style') always removes
all inline styles.
Test: fast/css/remove-attribute-style.html
* css/StylePropertySet.cpp:
(WebCore::StylePropertySet::clear):
Added a new method to remove all style properties.
(WebCore):
* css/StylePropertySet.h:
(StylePropertySet):
* dom/Element.cpp:
(WebCore::Element::removeAttribute):
If 'style' is given but the element has no style attribute, the old
code did nothing. However, if the element is styled element and has any
inline styles, the inline styles should be removed. So invoke
StyledElement::removeAllInlineStyleProperties and if any inline styles
are removed, invoke style recalc, too.
* dom/StyledElement.cpp:
(WebCore::StyledElement::removeAllInlineStyleProperties):
Added a new method to remove all inline style propeties. If any inline
style is removed, invoke inlineStyleChanged() to force style recalc.
(WebCore):
* dom/StyledElement.h:
(StyledElement):
LayoutTests:
* fast/css/remove-attribute-style-expected.txt: Added.
* fast/css/remove-attribute-style.html: Added.
git-svn-id: svn://svn.chromium.org/blink/trunk@133581 bbb929c8-8fbe-4397-9dbb-9b2b20218538
Diffstat (limited to 'third_party/WebKit/LayoutTests/fast/css/remove-attribute-style.html')
| -rw-r--r-- | third_party/WebKit/LayoutTests/fast/css/remove-attribute-style.html | 68 |
1 files changed, 68 insertions, 0 deletions
diff --git a/third_party/WebKit/LayoutTests/fast/css/remove-attribute-style.html b/third_party/WebKit/LayoutTests/fast/css/remove-attribute-style.html new file mode 100644 index 0000000..a083d34 --- /dev/null +++ b/third_party/WebKit/LayoutTests/fast/css/remove-attribute-style.html @@ -0,0 +1,68 @@ +<!doctype html> +<html> +<head> +<style type="text/css"> +td { + display: table-cell; + width: 200px; + height: 80px; + border: 1px solid #ccc; + text-align: center; + vertical-align: middle; +} +</style> +<script src="../js/resources/js-test-pre.js"></script> +</head> +<body> + <table id="table"> + <tr> + <td id="elementWithoutStyleAttribute">no HTML style attribute, no get/setAttribute</td> + <td id="elementWithEmptyStyleAttribute" style="">empty HTML style attribute, no get/setAttribute</td> + <td id="elementWithStyleAttribute" style="opacity: 1;">non-empty HTML style attribute, no get/setAttribute</td> + </tr> + <tr> + <td id="elementWithoutStyleAttribute2">no HTML style attribute, getAttribute before modifying IDL attribute</td> + <td id="elementWithoutStyleAttribute3">no HTML style attribute, getAttribute after modifying IDL attribute</td> + <td id="elementWithoutStyleAttribute4">no HTML style attribute, setAttribute before removeAttribute</td> + </tr> + </table> + <div id="console"></div> + <script> + description("[bug 99295] removeAttribute('style') not working in certain circumstances. If this test passes, all backgroundColors are rgba(0, 0, 0, 0), i.e. all styles are removed."); + + var elementWithoutStyleAttribute = $('elementWithoutStyleAttribute'), + elementWithEmptyStyleAttribute = $('elementWithEmptyStyleAttribute'), + elementWithStyleAttribute = $('elementWithStyleAttribute'), + elementWithoutStyleAttribute2 = $('elementWithoutStyleAttribute2'), + elementWithoutStyleAttribute3 = $('elementWithoutStyleAttribute3'), + elementWithoutStyleAttribute4 = $('elementWithoutStyleAttribute4'); + + shouldBe("elementWithoutStyleAttribute.style.backgroundColor = 'red'; elementWithoutStyleAttribute.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"'); + + elementWithEmptyStyleAttribute.style.backgroundColor = 'red'; + elementWithEmptyStyleAttribute.removeAttribute('style'); + shouldBe("getComputedStyle(elementWithEmptyStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"'); + + elementWithStyleAttribute.style.backgroundColor = 'red'; + elementWithStyleAttribute.removeAttribute('style'); + shouldBe("getComputedStyle(elementWithStyleAttribute).backgroundColor", '"rgba(0, 0, 0, 0)"'); + + shouldBeNull("elementWithoutStyleAttribute2.getAttribute('style')"); + shouldBe("elementWithoutStyleAttribute2.style.backgroundColor = 'red'; elementWithoutStyleAttribute2.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute2).backgroundColor", '"rgba(0, 0, 0, 0)"'); + + elementWithoutStyleAttribute3.style.backgroundColor = 'red'; + shouldBe("elementWithoutStyleAttribute3.getAttribute('style')", '"background-color: red;"'); + elementWithoutStyleAttribute3.removeAttribute('style'); + shouldBe("getComputedStyle(elementWithoutStyleAttribute3).backgroundColor", '"rgba(0, 0, 0, 0)"'); + + shouldBe("elementWithoutStyleAttribute4.style.backgroundColor = 'red'; elementWithoutStyleAttribute4.setAttribute('style', ''); elementWithoutStyleAttribute4.removeAttribute('style'); getComputedStyle(elementWithoutStyleAttribute4).backgroundColor", '"rgba(0, 0, 0, 0)"'); + + function $(id) { + return document.getElementById(id); + } + + document.getElementById('table').innerHTML = ''; + </script> + <script src="../js/resources/js-test-post.js"></script> +</body> +</html> |