LoboUnitTest/src/test/java/org/loboevolution/css/CSSStyleDeclarationTest.java
/*
* MIT License
*
* Copyright (c) 2014 - 2024 LoboEvolution
*
* Permission is hereby granted, free of charge, to any person obtaining a copy
* of this software and associated documentation files (the "Software"), to deal
* in the Software without restriction, including without limitation the rights
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
* copies of the Software, and to permit persons to whom the Software is
* furnished to do so, subject to the following conditions:
*
* The above copyright notice and this permission notice shall be included in all
* copies or substantial portions of the Software.
*
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
* SOFTWARE.
*
* Contact info: ivan.difrancesco@yahoo.it
*/
package org.loboevolution.css;
import org.junit.jupiter.api.Test;
import org.junit.jupiter.api.extension.ExtendWith;
import org.loboevolution.annotation.Alerts;
import org.loboevolution.annotation.AlertsExtension;
import org.loboevolution.driver.LoboUnitTest;
import org.loboevolution.html.dom.HTMLDocument;
import org.loboevolution.html.dom.domimpl.HTMLElementImpl;
import static org.junit.jupiter.api.Assertions.assertEquals;
/**
* Tests for {@link CSSStyleDeclaration}.
*/
@ExtendWith(AlertsExtension.class)
public class CSSStyleDeclarationTest extends LoboUnitTest {
@Test
@Alerts({"[object CSSStyleDeclaration]", "[object CSSStyleDeclaration]",
"[object CSSStyleDeclaration]", "[object CSSStyleDeclaration]"})
public void scriptableToString() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color: #FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color: #FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(Object.prototype.toString.call(decl));\n"
+ " alert(decl);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(Object.prototype.toString.call(decl));\n"
+ " alert(decl);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"background-color: rgb(255, 255, 255)", "background-color: rgb(255, 255, 255)"})
public void cssText() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(decl.cssText);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.cssText);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", ""})
public void cssTextEmpty() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { }\n"
+ "</style>\n"
+ "<div id='myDiv' style=''></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(decl.cssText);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.cssText);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"background-color: rgb(255, 255, 255); color: red;",
"background-color: rgb(255, 255, 255); color: red"})
public void cssTextMultipleProperties() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color: #FFFFFF;color: red; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color: #FFFFFF;color: red;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(decl.cssText);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.cssText);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"color: rgb(0, 0, 0)", "color: rgb(0, 0, 0)"})
public void cssTextSet() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " try {"
+ " decl.cssText = 'color:#000000;';\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " try {"
+ " decl.cssText = 'color:#000000;';\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", ""})
public void cssTextSetNull() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " try {"
+ " decl.cssText = null;\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " try {"
+ " decl.cssText = null;\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", ""})
public void cssTextSetEmpty() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " try {"
+ " decl.cssText = '';\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " try {"
+ " decl.cssText = '';\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", ""})
public void cssTextSetInvalid() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " try {"
+ " decl.cssText = 'abc';\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " try {"
+ " decl.cssText = 'abc';\n"
+ " alert(decl.cssText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"1", "1"})
public void length() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(decl.length);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.length);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"0", "0"})
public void lengthEmpty() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { }\n"
+ "</style>\n"
+ "<div id='myDiv' style=''></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(decl.length);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.length);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"2", "2"})
public void lengthMultipleProperties() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF;color: red; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;color: red;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(decl.length);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.length);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"1", "1"})
public void lengthSet() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " try {"
+ " decl.length = 2;\n"
+ " alert(decl.length);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " try {"
+ " decl.length = 2;\n"
+ " alert(decl.length);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"[object CSSStyleRule]", "null"})
public void parentRule() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " alert(decl.parentRule);\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.parentRule);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"[object CSSStyleRule]", "p", "null"})
public void parentRuleSet() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color:#FFFFFF; }\n"
+ " div { color:#000000; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color:#FFFFFF;'></div>\n"
+ "<script>\n"
+ " var styleSheet = document.styleSheets[0];\n"
+ " var decl = styleSheet.cssRules[0].style;\n"
+ " try {"
+ " decl.parentRule = styleSheet.cssRules[1];\n"
+ " alert(decl.parentRule);\n"
+ " alert(decl.parentRule.selectorText);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " try {"
+ " decl.parentRule = styleSheet.cssRules[1];\n"
+ " alert(decl.parentRule);\n"
+ " } catch(e) {\n"
+ " alert('exception');\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"black", "pink", "color: pink;", "color: pink;"})
public void styleOneCssAttribute() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var node = document.getElementById('div1');\n"
+ " var style = node.style;\n"
+ " alert(style.color);\n"
+ " style.color = 'pink';\n"
+ " alert(style.color);\n"
+ " alert(node.getAttribute('style'));\n"
+ "}\n</script></head>\n"
+ "<body onload='doTest()'><div id='div1' style='color: black'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"black", "pink", "color: pink; background: blue;"})
public void styleMultipleCssAttributes() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var style = document.getElementById('div1').style;\n"
+ " alert(style.color);\n"
+ " style.color = 'pink';\n"
+ " alert(style.color);\n"
+ "}\n</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1' style='color: black;background:blue;foo:bar'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "null", "pink", "color: pink;"})
public void styleOneUndefinedCssAttribute() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var style = document.getElementById('div1').style;\n"
+ " alert(document.getElementById('nonexistingid'));\n"
+ " alert(style.color);\n"
+ " style.color = 'pink';\n"
+ " alert(style.color);\n"
+ "}\n</script></head>\n"
+ "<body onload='doTest()'><div id='div1'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "hidden", "undefined"})
public void mozillaStyle() {
final String content
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv = document.getElementById('div1');\n"
+ " alert(oDiv.style.visibility);\n"
+ " oDiv.style.visibility = 'hidden';\n"
+ " alert(oDiv.style.visibility);\n"
+ " alert(oDiv.style.behavior);\n"
+ "}\n</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1'>foo</div></body></html>";
checkHtmlAlert(content);
}
@Test
@Alerts("undefined")
public void behavior() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv = document.getElementById('div1');\n"
+ " alert(oDiv.style.behavior);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
public void onclickAccessStyle() {
final String html = "<html><head><title>Color Change Page</title>\n"
+ "<script>\n"
+ "function test(obj) {\n"
+ " obj.style.backgroundColor = 'yellow';\n"
+ "}\n"
+ "</script>\n"
+ "</head>\n"
+ "<body>\n"
+ "<span id='red' onclick='test(this)'>foo</span>\n"
+ "</body></html>";
final HTMLDocument document = loadHtml(html);
HTMLElementImpl elem = (HTMLElementImpl) document.getElementById("red");
elem.getOnclick();
}
@Test
@Alerts({"string", "string", "string", "undefined"})
public void accessProperties() {
final String html = "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv = document.getElementById('div1');\n"
+ " alert(typeof oDiv.style.visibility);\n"
+ " alert(typeof oDiv.style.color);\n"
+ " alert(typeof oDiv.style.backgroundImage);\n"
+ " alert(typeof oDiv.style.foo);\n"
+ "}\n</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("123")
public void setStylePropertyNonString() {
final String html = "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv1 = document.getElementById('div1');\n"
+ " oDiv1.style.pixelLeft = 123;\n"
+ " alert(oDiv1.style.pixelLeft);\n"
+ "}\n</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("blue")
public void getPropertyValue() {
final String html = "<html><head><script>\n"
+ "function doTest() {\n"
+ " try {\n"
+ " var oDiv1 = document.getElementById('div1');\n"
+ " alert(oDiv1.style.getPropertyValue('background'));\n"
+ " } catch(e) {alert('exception'); }\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1' style='background: blue'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"*blue* string", ""})
public void removeProperty() {
final String html = "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv1 = document.getElementById('div1');\n"
+ " if (oDiv1.style.removeProperty) {\n"
+ " var value = oDiv1.style.removeProperty('color');\n"
+ " alert('*' + value + '* ' + typeof(value));\n"
+ " alert(oDiv1.style.cssText);\n"
+ " }\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1' style='color: blue'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"** string", "blue"})
public void removePropertyUnknown() {
final String html = "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv1 = document.getElementById('div1');\n"
+ " if (oDiv1.style.removeProperty) {\n"
+ " var value = oDiv1.style.removeProperty('font-size');\n"
+ " alert('*' + value + '* ' + typeof(value));\n"
+ " alert(oDiv1.style.getPropertyValue('color'));\n"
+ " }\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1' style='color: blue'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"** string", "blue"})
public void removePropertyUndefined() {
final String html = "<html>\n"
+ "<head>\n"
+ "<script>\n"
+ "function doTest() {\n"
+ " var oDiv1 = document.getElementById('div1');\n"
+ " if (!oDiv1.style.removeProperty) {\n"
+ " alert('removeProperty not available');\n"
+ " return;\n"
+ " }\n"
+ " var value = oDiv1.style.removeProperty(undefined);\n"
+ " alert('*' + value + '* ' + typeof(value));\n"
+ " alert(oDiv1.style.getPropertyValue('color'));\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1' style='color: blue'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"30px", "", "30px", "arial", "", "arial"})
public void getPropertyValue_WithDash() {
final String html =
"<html><body onload='test()'><script>\n"
+ " function prop(elem, prop) {\n"
+ " try{\n"
+ " var p = span.style.getPropertyValue(prop);\n"
+ " alert(p);\n"
+ " } catch (e) {alert('exception'); }\n"
+ " }\n"
+ " function test() {\n"
+ " var span = document.getElementById('span');\n"
+ " span.style['fontSize'] = '30px';\n"
+ " alert(span.style.fontSize);\n"
+ " prop(span, 'fontSize');\n"
+ " prop(span, 'font-size');\n"
+ " span.style['fontFamily'] = 'arial';\n"
+ " alert(span.style.fontFamily);\n"
+ " prop(span, 'fontFamily');\n"
+ " prop(span, 'font-family');\n"
+ " }\n"
+ "</script>\n"
+ "<span id='span'>x</span>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", ""})
public void styleFilter() {
final String html = "<html><body onload='test()'><script>\n"
+ " function test() {\n"
+ " var div1 = document.getElementById('div1');\n"
+ " alert(div1.style.filter);\n"
+ " var div2 = document.getElementById('div2');\n"
+ " alert(div2.style.filter);\n"
+ " }\n"
+ "</script>\n"
+ "<div id='div1'>foo</div>\n"
+ "<div id='div2' style='filter:alpha(opacity=50)'>bar</div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "0.5", "0.4", "0.33333", "-3", "3", "null", "null", "null"})
public void initOpacity() {
final String html = "<html><body>\n"
+ "<div id='o1' style='opacity: '>d</div>\n"
+ "<div id='o2' style='opacity:0.5'>d</div>\n"
+ "<div id='o3' style='opacity:.4'>d</div>\n"
+ "<div id='o4' style='opacity: 0.33333'>d</div>\n"
+ "<div id='o5' style='opacity: -3'>d</div>\n"
+ "<div id='o6' style='opacity: 3'>d</div>\n"
+ "<div id='o7' style='opacity: 10px'>d</div>\n"
+ "<div id='o8' style='opacity: foo'>d</div>\n"
+ "<div id='o9' style='opacity: auto'>d</div>\n"
+ "<script>\n"
+ "for (var i = 1; i < 10; i++) {\n"
+ " d = document.getElementById('o' + i);\n"
+ " alert(d.style.opacity);\n"
+ "}\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("- 0.5 0.4 0.33333 -3 3 8 7 7 7 7 7 ")
public void setOpacity() {
final String html = "<html><body>\n"
+ "<div id='d'>d</div>\n"
+ "<script>\n"
+ "var d = document.getElementById('d');\n"
+ "var s = '-';\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = 0.5;\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = .4;\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = 0.33333;\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = -3;\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = 3;\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = '8';\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = ' 7 ';\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = NaN;\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = '10px';\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = 'foo';\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = 'auto';\n"
+ "s += d.style.opacity + ' ';\n"
+ "d.style.opacity = '';\n"
+ "s += d.style.opacity;\n"
+ "alert(s);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"undefined", "exception"})
public void setExpression() {
final String html = "<html><head><script>\n"
+ "function test() {\n"
+ " try {\n"
+ " var div1 = document.getElementById('div1');\n"
+ " alert(typeof div1.style.setExpression);\n"
+ " div1.style.setExpression('title','id');\n"
+ " } catch(e) {alert('exception'); }\n"
+ "}\n"
+ "</script></head><body onload='test()'>\n"
+ " <div id='div1'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"undefined", "exception"})
public void removeExpression() {
final String html = "<html><head><script>\n"
+ "function test() {\n"
+ " try {\n"
+ " var div1 = document.getElementById('div1');\n"
+ " alert(typeof div1.style.removeExpression);\n"
+ " div1.style.setExpression('title','id');\n"
+ " div1.style.removeExpression('title');\n"
+ " } catch(e) {alert('exception'); }\n"
+ "}\n"
+ "</script></head><body onload='test()'>\n"
+ " <div id='div1'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "null", "null", "null", "null", "null", "null", "null", "null",
"null", "null", "null", "null", "null", "null", "null"})
public void borderStylesNoStyle() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv = document.getElementById('div1');\n"
+ " alert(oDiv.style.borderBottom);\n"
+ " alert(oDiv.style.borderBottomColor);\n"
+ " alert(oDiv.style.borderBottomStyle);\n"
+ " alert(oDiv.style.borderBottomWidth);\n"
+ " alert(oDiv.style.borderLeft);\n"
+ " alert(oDiv.style.borderLeftColor);\n"
+ " alert(oDiv.style.borderLeftStyle);\n"
+ " alert(oDiv.style.borderLeftWidth);\n"
+ " alert(oDiv.style.borderRight);\n"
+ " alert(oDiv.style.borderRightColor);\n"
+ " alert(oDiv.style.borderRightStyle);\n"
+ " alert(oDiv.style.borderRightWidth);\n"
+ " alert(oDiv.style.borderTop);\n"
+ " alert(oDiv.style.borderTopColor);\n"
+ " alert(oDiv.style.borderTopStyle);\n"
+ " alert(oDiv.style.borderTopWidth);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"3px", "4px", "2px", "1px"})
public void borderXxxWidth() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv = document.getElementById('div1');\n"
+ " alert(oDiv.style.borderBottomWidth);\n"
+ " alert(oDiv.style.borderLeftWidth);\n"
+ " alert(oDiv.style.borderRightWidth);\n"
+ " alert(oDiv.style.borderTopWidth);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1' style='border-width: 1px 2px 3px 4px'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"thin", "medium", "thick", "thick"})
public void borderXxxWidthConstants() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var oDiv = document.getElementById('div1');\n"
+ " alert(oDiv.style.borderRightWidth);\n"
+ " oDiv = document.getElementById('div2');\n"
+ " alert(oDiv.style.borderLeftWidth);\n"
+ " oDiv = document.getElementById('div3');\n"
+ " alert(oDiv.style.borderBottomWidth);\n"
+ " alert(oDiv.style.borderTopWidth);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'>\n"
+ "<div id='div1' style='border: thin'>foo</div>\n"
+ "<div id='div2' style='border: medium'>foo</div>\n"
+ "<div id='div3' style='border: thick'>foo</div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("undefined")
public void initUnsupportdProperty() {
final String html = "<html><body>\n"
+ "<div id='my' style='htmlunit: foo'>d</div>\n"
+ "<script>\n"
+ " d = document.getElementById('my');\n"
+ " alert(d.style.htmlunit);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"undefined", "foo"})
public void setUnsupportdProperty() {
final String html = "<html><body>\n"
+ "<div id='my' style=''>d</div>\n"
+ "<script>\n"
+ " d = document.getElementById('my');\n"
+ " alert(d.style.htmlunit);\n"
+ " d.style.htmlunit = 'foo';\n"
+ " alert(d.style.htmlunit);\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"string", "", "1", "2", "2", "2", "2", "5", "5", "5", "5"})
public void zIndex() {
final String html
= "<html><head><script>\n"
+ "function test() {\n"
+ " var style = document.getElementById('myDiv').style;\n"
+ " alert(typeof style.zIndex);\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 1;\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 2.0;\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 3.1;\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 4.5;\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 4.6;\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '5';\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '6.0';\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '7.1';\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '8.6';\n"
+ " alert(style.zIndex);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"string", "", "string", "", "string", "4", "string", "", "string", "", "string", ""})
public void zIndexDefault() {
final String html
= "<html><head><script>\n"
+ "function test() {\n"
+ " var style = document.getElementById('divUndefined').style;\n"
+ " alert(typeof style.zIndex);\n"
+ " alert(style.zIndex);\n"
+ " style = document.getElementById('divBlank').style;\n"
+ " alert(typeof style.zIndex);\n"
+ " alert(style.zIndex);\n"
+ " style = document.getElementById('divInteger').style;\n"
+ " alert(typeof style.zIndex);\n"
+ " alert(style.zIndex);\n"
+ " style = document.getElementById('divFloat').style;\n"
+ " alert(typeof style.zIndex);\n"
+ " alert(style.zIndex);\n"
+ " style = document.getElementById('divFloat2').style;\n"
+ " alert(typeof style.zIndex);\n"
+ " alert(style.zIndex);\n"
+ " style = document.getElementById('invalidDiv').style;\n"
+ " alert(typeof style.zIndex);\n"
+ " alert(style.zIndex);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ " <div id='divUndefined'/>\n"
+ " <div id='divBlank' style='z-index: '/>\n"
+ " <div id='divInteger' style='z-index: 4'/>\n"
+ " <div id='divFloat' style='z-index: 4.2'/>\n"
+ " <div id='divFloat2' style='z-index: 4.7'/>\n"
+ " <div id='invalidDiv' style='z-index: unfug'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "", "1", "1"})
public void zIndexSetUndefined() {
final String html
= "<html><head><script>\n"
+ "function test() {\n"
+ " var style = document.getElementById('myDiv').style;\n"
+ " var un_defined;\n"
+ " alert(style.zIndex);\n"
+ " try {\n"
+ " style.zIndex = un_defined;\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 1;\n"
+ " alert(style.zIndex);\n"
+ " try {\n"
+ " style.zIndex = un_defined;\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "", "1", ""})
public void zIndexSetNull() {
final String html
= "<html><head><script>\n"
+ "function test() {\n"
+ " var style = document.getElementById('myDiv').style;\n"
+ " alert(style.zIndex);\n"
+ " try {\n"
+ " style.zIndex = null;\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 1;\n"
+ " alert(style.zIndex);\n"
+ " try {\n"
+ " style.zIndex = null;\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "7", "7", "", "4", "1"})
public void zIndexSetString() {
final String html
= "<html><head><script>\n"
+ "function test() {\n"
+ " var style = document.getElementById('myDiv').style;\n"
+ " var unknown;\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '7';\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '7.6';\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '';\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '4';\n"
+ " try {\n"
+ " style.zIndex = ' ';\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = '1';\n"
+ " try {\n"
+ " style.zIndex = 'NAN';\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "", "1", "1"})
public void zIndexSetInvalid() {
final String html
= "<html><head><script>\n"
+ "function test() {\n"
+ " var style = document.getElementById('myDiv').style;\n"
+ " alert(style.zIndex);\n"
+ " try {\n"
+ " style.zIndex = 'hallo';\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ " style.zIndex = 1;\n"
+ " alert(style.zIndex);\n"
+ " try {\n"
+ " style.zIndex = 'hallo';\n"
+ " } catch (e) {alert('error'); }\n"
+ " alert(style.zIndex);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "null", "15px", "italic", "null", "italic"})
public void cssText2() {
final String html = "<html><head>"
+ "<script>\n"
+ " function test() {\n"
+ " var style = document.getElementById('myDiv').style;\n"
+ " alert(style.fontSize);\n"
+ " alert(style.fontStyle);\n"
+ " style.cssText = 'font-size: 15px; font-style: italic';\n"
+ " alert(style.fontSize);\n"
+ " alert(style.fontStyle);\n"
+ " style.cssText = 'font-style: italic';\n"
+ " alert(style.fontSize);\n"
+ " alert(style.fontStyle);\n"
+ " }\n"
+ "</script></head><body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"1px", "solid", "red"})
public void border() {
final String html = "<html><head><script>"
+ " function test() {\n"
+ " var style = document.getElementById('myDiv').style;\n"
+ " if (style.getPropertyValue) {\n"
+ " alert(style.getPropertyValue('border-top-width'));\n"
+ " alert(style.getPropertyValue('border-top-style'));\n"
+ " alert(style.getPropertyValue('border-top-color'));\n"
+ " }\n"
+ " }\n"
+ "</script></head><body onload='test()'>\n"
+ " <div id='myDiv' style='border: red 1px solid'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"true", "false"})
public void display() {
final String html = "<html><head><script>"
+ " function test() {\n"
+ " var myDiv = document.getElementById('myDiv');\n"
+ " myDiv.style.display = 'none';\n"
+ " alert(myDiv.style.display == 'none');\n"
+ " myDiv.style.display = '';\n"
+ " alert(myDiv.style.display == 'none');\n"
+ " }\n"
+ "</script></head><body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "null", "none", "rgb(0, 128, 0)"})
public void displayDefaultOverwritesNone() {
final String html = "<html>\n"
+ "<head>\n"
+ " <style>\n"
+ " tt { display: none; color: green; }\n"
+ " </style>\n"
+ " <script>\n"
+ " function test() {\n"
+ " var e = document.createElement('tt');\n"
+ " var style = window.getComputedStyle(e, null);\n"
+ " alert(style['display']);\n"
+ " alert(style['color']);\n"
+ " document.body.appendChild(e);\n"
+ " alert(style['display']);\n"
+ " alert(style['color']);\n"
+ " }\n"
+ " </script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "inline"})
public void displayDefault() {
final String html = "<html>\n"
+ "<head>\n"
+ " <script>\n"
+ " function test() {\n"
+ " var e = document.createElement('tt');\n"
+ " var style = window.getComputedStyle(e, null);\n"
+ " alert(style['display']);\n"
+ " document.body.appendChild(e);\n"
+ " alert(style['display']);\n"
+ " }\n"
+ " </script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "rgb(0, 0, 0)"})
public void colorDefault() {
final String html = "<html>\n"
+ "<head>\n"
+ " <script>\n"
+ " function test() {\n"
+ " var e = document.createElement('tt');\n"
+ " var style = window.getComputedStyle(e, null);\n"
+ " alert(style['color']);\n"
+ " document.body.appendChild(e);\n"
+ " alert(style['color']);\n"
+ " }\n"
+ " </script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"1px", "2px"})
public void resettingValue() {
final String html = "<html><head><script>"
+ " function test() {\n"
+ " var myDiv = document.getElementById('myDiv');\n"
+ " myDiv.style.marginTop = '1px';\n"
+ " alert(myDiv.style.marginTop);\n"
+ " myDiv.style.marginTop = '2px';\n"
+ " alert(myDiv.style.marginTop);\n"
+ " }\n"
+ "</script></head><body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"2px", "30px"})
public void resettingValue2() {
final String html = "<html><head><script>"
+ " function test() {\n"
+ " var myDiv = document.getElementById('myDiv');\n"
+ " myDiv.style.marginTop = '2px';\n"
+ " alert(myDiv.style.marginTop);\n"
+ " myDiv.style.left = '-1px';\n"
+ " myDiv.style.marginTop = '30px';\n"
+ " alert(myDiv.style.marginTop);\n"
+ " }\n"
+ "</script></head><body onload='test()'>\n"
+ " <div id='myDiv'/>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"L:3px,R:3px,T:3px,B:3px", "L:5px,R:5px,T:5px,B:5px", "L:7px,R:2px,T:2px,B:2px",
"L:3px,R:3px,T:3px,B:3px", "L:5px,R:5px,T:5px,B:5px", "L:7px,R:2px,T:2px,B:2px"})
public void marginAllvsMarginSingle() {
final String html =
"<html>\n"
+ " <head>\n"
+ " <style>\n"
+ " #m1 { margin: 3px; }\n"
+ " #m2 { margin-left: 3px; margin: 5px; }\n"
+ " #m3 { margin: 2px; margin-left: 7px; }\n"
+ " </style>\n"
+ " <script>\n"
+ " function test() {\n"
+ " alertComputedMargins('m1');\n"
+ " alertComputedMargins('m2');\n"
+ " alertComputedMargins('m3');\n"
+ " alertNonComputedMargins('m4');\n"
+ " alertNonComputedMargins('m5');\n"
+ " alertNonComputedMargins('m6');\n"
+ " }\n"
+ " function alertComputedMargins(id) {\n"
+ " var e = document.getElementById(id);\n"
+ " var s = getComputedStyle(e, null);\n"
+ " alert('L:' + s.marginLeft + ',R:' + s.marginRight +\n"
+ " ',T:' + s.marginTop + ',B:' + s.marginBottom);\n"
+ " }\n"
+ " function alertNonComputedMargins(id) {\n"
+ " var e = document.getElementById(id);\n"
+ " var s = e.style;\n"
+ " alert('L:' + s.marginLeft + ',R:' + s.marginRight +\n"
+ " ',T:' + s.marginTop + ',B:' + s.marginBottom);\n"
+ " }\n"
+ " </script>\n"
+ " </head>\n"
+ " <body onload='test()'>\n"
+ " <div id='m1'>m1</div>\n"
+ " <div id='m2'>m2</div>\n"
+ " <div id='m3'>m3</div>\n"
+ " <div id='m4' style='margin: 3px;'>m4</div>\n"
+ " <div id='m5' style='margin-left: 3px; margin: 5px;'>m5</div>\n"
+ " <div id='m6' style='margin: 2px; margin-left: 7px;'>m6</div>\n"
+ " </body>\n"
+ "</html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"L:3px,R:3px,T:3px,B:3px", "L:5px,R:5px,T:5px,B:5px", "L:7px,R:2px,T:2px,B:2px",
"L:3px,R:3px,T:3px,B:3px", "L:5px,R:5px,T:5px,B:5px", "L:7px,R:2px,T:2px,B:2px"})
public void paddingAllvsPaddingSingle() {
final String html =
"<html>\n"
+ " <head>\n"
+ " <style>\n"
+ " #m1 { padding: 3px; }\n"
+ " #m2 { padding-left: 3px; padding: 5px; }\n"
+ " #m3 { padding: 2px; padding-left: 7px; }\n"
+ " </style>\n"
+ " <script>\n"
+ " function test() {\n"
+ " alertComputedPaddings('m1');\n"
+ " alertComputedPaddings('m2');\n"
+ " alertComputedPaddings('m3');\n"
+ " alertNonComputedPaddings('m4');\n"
+ " alertNonComputedPaddings('m5');\n"
+ " alertNonComputedPaddings('m6');\n"
+ " }\n"
+ " function alertComputedPaddings(id) {\n"
+ " var e = document.getElementById(id);\n"
+ " var s = e.currentStyle ? e.currentStyle : getComputedStyle(e, null);\n"
+ " alert('L:' + s.paddingLeft + ',R:' + s.paddingRight +\n"
+ " ',T:' + s.paddingTop + ',B:' + s.paddingBottom);\n"
+ " }\n"
+ " function alertNonComputedPaddings(id) {\n"
+ " var e = document.getElementById(id);\n"
+ " var s = e.style;\n"
+ " alert('L:' + s.paddingLeft + ',R:' + s.paddingRight +\n"
+ " ',T:' + s.paddingTop + ',B:' + s.paddingBottom);\n"
+ " }\n"
+ " </script>\n"
+ " </head>\n"
+ " <body onload='test()'>\n"
+ " <div id='m1'>m1</div>\n"
+ " <div id='m2'>m2</div>\n"
+ " <div id='m3'>m3</div>\n"
+ " <div id='m4' style='padding: 3px;'>m4</div>\n"
+ " <div id='m5' style='padding-left: 3px; padding: 5px;'>m5</div>\n"
+ " <div id='m6' style='padding: 2px; padding-left: 7px;'>m6</div>\n"
+ " </body>\n"
+ "</html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"L:3px,R:3px,T:3px,B:3px", "L:5px,R:5px,T:5px,B:5px", "L:7px,R:2px,T:2px,B:2px",
"L:3px,R:3px,T:3px,B:3px", "L:5px,R:5px,T:5px,B:5px", "L:7px,R:2px,T:2px,B:2px"})
public void paddingAllvsPaddingSingle2() {
final String html =
"<html>\n"
+ " <head>\n"
+ " <style>\n"
+ " #m1 { padding: 3px; }\n"
+ " #m2 { padding-left: 3px; padding: 5px; }\n"
+ " #m3 { padding: 2px; padding-left: 7px; }\n"
+ " </style>\n"
+ " <script>\n"
+ " function test() {\n"
+ " alertComputedPaddings('m1');\n"
+ " alertComputedPaddings('m2');\n"
+ " alertComputedPaddings('m3');\n"
+ " alertNonComputedPaddings('m4');\n"
+ " alertNonComputedPaddings('m5');\n"
+ " alertNonComputedPaddings('m6');\n"
+ " }\n"
+ " function alertComputedPaddings(id) {\n"
+ " var e = document.getElementById(id);\n"
+ " var s = e.currentStyle ? e.currentStyle : getComputedStyle(e, null);\n"
+ " alert('L:' + s['padding-left'] + ',R:' + s['padding-right'] +\n"
+ " ',T:' + s['padding-top'] + ',B:' + s['padding-bottom']);\n"
+ " }\n"
+ " function alertNonComputedPaddings(id) {\n"
+ " var e = document.getElementById(id);\n"
+ " var s = e.style;\n"
+ " alert('L:' + s['padding-left'] + ',R:' + s['padding-right'] +\n"
+ " ',T:' + s['padding-top'] + ',B:' + s['padding-bottom']);\n"
+ " }\n"
+ " </script>\n"
+ " </head>\n"
+ " <body onload='test()'>\n"
+ " <div id='m1'>m1</div>\n"
+ " <div id='m2'>m2</div>\n"
+ " <div id='m3'>m3</div>\n"
+ " <div id='m4' style='padding: 3px;'>m4</div>\n"
+ " <div id='m5' style='padding-left: 3px; padding: 5px;'>m5</div>\n"
+ " <div id='m6' style='padding: 2px; padding-left: 7px;'>m6</div>\n"
+ " </body>\n"
+ "</html>";
checkHtmlAlert(html);
}
@Test
public void styleShorthand() {
styleShorthand("margin: 10px", "marginTop", "10px");
styleShorthand("margin: 10px", "marginLeft", "10px");
styleShorthand("margin: 10px", "marginRight", "10px");
styleShorthand("margin: 10px", "marginBottom", "10px");
styleShorthand("margin: 10px 20px", "marginTop", "10px");
styleShorthand("margin: 10px 20px", "marginLeft", "20px");
styleShorthand("margin: 10px 20px", "marginRight", "20px");
styleShorthand("margin: 10px 20px", "marginBottom", "10px");
styleShorthand("margin: 10px 20px 30px", "marginTop", "10px");
styleShorthand("margin: 10px 20px 30px", "marginLeft", "20px");
styleShorthand("margin: 10px 20px 30px", "marginRight", "20px");
styleShorthand("margin: 10px 20px 30px", "marginBottom", "30px");
styleShorthand("margin: 10px 20px 30px 40px", "marginTop", "10px");
styleShorthand("margin: 10px 20px 30px 40px", "marginLeft", "40px");
styleShorthand("margin: 10px 20px 30px 40px", "marginRight", "20px");
styleShorthand("margin: 10px 20px 30px 40px", "marginBottom", "30px");
styleShorthand("padding: 10px", "paddingTop", "10px");
styleShorthand("padding: 10px", "paddingLeft", "10px");
styleShorthand("padding: 10px", "paddingRight", "10px");
styleShorthand("padding: 10px", "paddingBottom", "10px");
styleShorthand("padding: 10px 20px", "paddingTop", "10px");
styleShorthand("padding: 10px 20px", "paddingLeft", "20px");
styleShorthand("padding: 10px 20px", "paddingRight", "20px");
styleShorthand("padding: 10px 20px", "paddingBottom", "10px");
styleShorthand("padding: 10px 20px 30px", "paddingTop", "10px");
styleShorthand("padding: 10px 20px 30px", "paddingLeft", "20px");
styleShorthand("padding: 10px 20px 30px", "paddingRight", "20px");
styleShorthand("padding: 10px 20px 30px", "paddingBottom", "30px");
styleShorthand("padding: 10px 20px 30px 40px", "paddingTop", "10px");
styleShorthand("padding: 10px 20px 30px 40px", "paddingLeft", "40px");
styleShorthand("padding: 10px 20px 30px 40px", "paddingRight", "20px");
styleShorthand("padding: 10px 20px 30px 40px", "paddingBottom", "30px");
}
private void styleShorthand(final String style, final String attribute, final String expectedValue) {
final String html = "<html><head>\n"
+ "<script>\n"
+ " function alert(msg) {\n"
+ " var ta = document.getElementById('myTextArea');\n"
+ " ta.value += msg + '; ';\n"
+ " }\n"
+ "function test() {\n"
+ " var style = document.getElementById('d').style;\n"
+ " alert(style." + attribute + ");\n"
+ "}\n</script>\n"
+ "</head>\n"
+ "<body onload='test()'><div id='d' style='" + style + "'>foo</div>\n"
+ " <textarea id='myTextArea' cols='80' rows='30'></textarea>\n"
+ "</body></html>";
final HTMLDocument document = loadHtml(html);
HTMLElementImpl elem = (HTMLElementImpl) document.getElementById("myTextArea");
assertEquals(expectedValue + "; ", elem.getAttribute("value"));
}
@Test
@Alerts({"null"})
public void getAttribute() {
getAttribute("\"font\"");
}
@Test
@Alerts({"null"})
public void getAttributeFont() {
getAttribute("'font'");
}
@Test
@Alerts({"null"})
public void getAttributeColor() {
getAttribute("'color'");
}
@Test
@Alerts({"null"})
public void getAttributeColorCase() {
getAttribute("'ColoR'");
}
@Test
@Alerts({"null"})
public void getAttributeFont0() {
getAttribute("'font', 0");
}
@Test
@Alerts({"null"})
public void getAttributeColor0() {
getAttribute("'color', 0");
}
@Test
@Alerts({"null"})
public void getAttributeColorCase0() {
getAttribute("'coLOr', 0");
}
@Test
@Alerts({"null"})
public void getAttributeFont1() {
getAttribute("'font', 1");
}
@Test
@Alerts({"null"})
public void getAttributeColor1() {
getAttribute("'color', 1");
}
@Test
@Alerts({"null"})
public void getAttributeColorCase1() {
getAttribute("'ColOR', 1");
}
private void getAttribute(final String params) {
final String html =
"<html><head><script>\n"
+ "function test() {\n"
+ " if (document.all['a'].style.getAttribute) {\n"
+ " alert(document.all['a'].style.getAttribute(" + params + "));\n"
+ " }\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ "<a id='a' href='#' style='color:green'>go</a></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("not supported")
public void setAttributeFont() {
setAttribute("'font', 'blah'");
}
@Test
@Alerts("not supported")
public void setAttributeColor() {
setAttribute("'color', 'red'");
}
@Test
@Alerts("not supported")
public void setAttributeColorCase() {
setAttribute("'ColoR', 'red'");
}
@Test
@Alerts("not supported")
public void setAttributeFont0() {
setAttribute("'font', 'blah', 0");
}
@Test
@Alerts("not supported")
public void setAttributeColor0() {
setAttribute("'color', 'red', 0");
}
@Test
@Alerts("not supported")
public void setAttributeColorCase0() {
setAttribute("'ColoR', 'red', 0");
}
@Test
@Alerts("not supported")
public void setAttributeFont1() {
setAttribute("'font', 'blah', 1");
}
@Test
@Alerts("not supported")
public void setAttributeColor1() {
setAttribute("'color', 'red', 1");
}
@Test
@Alerts("not supported")
public void setAttributeColorCase1() {
setAttribute("'ColoR', 'red', 1");
}
private void setAttribute(final String params) {
final String html =
"<html><body onload='test()'>\n"
+ "<a id='a' href='#' style='color:green'>go</a>\n"
+ "<script>"
+ " function test() {\n"
+ " if (document.all['a'].style.getAttribute) {\n"
+ " alert(\"" + params + "\");\n"
+ " alert(document.all['a'].style.getAttribute('color'));\n"
+ " document.all['a'].style.setAttribute(" + params + ");\n"
+ " alert(document.all['a'].style.getAttribute('color'));\n"
+ " }\n"
+ " else {\n"
+ " alert('not supported');\n"
+ " }\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("not supported")
public void removeAttributeFont() {
removeAttribute("'font'");
}
@Test
@Alerts("not supported")
public void removeAttributeColor() {
removeAttribute("'color'");
}
@Test
@Alerts("not supported")
public void removeAttributeColorCase() {
removeAttribute("'ColoR'");
}
@Test
@Alerts("not supported")
public void removeAttributeFont0() {
removeAttribute("'font', 0");
}
@Test
@Alerts("not supported")
public void removeAttributeColor0() {
removeAttribute("'color', 0");
}
@Test
@Alerts("not supported")
public void removeAttributeColorCase0() {
removeAttribute("'ColoR', 0");
}
@Test
@Alerts("not supported")
public void removeAttributeFont1() {
removeAttribute("'font', 1");
}
@Test
@Alerts("not supported")
public void removeAttributeColor1() {
removeAttribute("'color', 1");
}
@Test
@Alerts("not supported")
public void removeAttributeColorCase1() {
removeAttribute("'ColoR', 1");
}
private void removeAttribute(final String params) {
final String html =
"<html><body onload='test()'>\n"
+ "<a id='a' href='#' style='color:green'>go</a>\n"
+ "<script>"
+ " function test() {\n"
+ " if (document.all['a'].style.getAttribute) {\n"
+ " alert(\"" + params + "\");\n"
+ " alert(document.all['a'].style.getAttribute('color'));\n"
+ " alert(document.all['a'].style.removeAttribute(" + params + "));\n"
+ " alert(document.all['a'].style.getAttribute('color'));\n"
+ " }\n"
+ " else {\n"
+ " alert('not supported');\n"
+ " }\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"red ", "black ", "blue important", "gray ", "green "})
public void setProperty() {
setPropertyBackgroundColor("'background-color', 'red', ''");
setPropertyBackgroundColor("'background-ColoR', 'black', ''");
setPropertyBackgroundColor("'background-color', 'blue', 'important'");
setPropertyBackgroundColor("'background-color', 'gray', null");
setPropertyBackgroundColor("'background-color', 'green', undefined");
}
@Test
@Alerts({"green ", "black important", "green "})
public void setPropertyImportant() {
setPropertyBackgroundColor("'background-color', 'white', 'crucial'");
setPropertyBackgroundColor("'background-color', 'black', 'imPORTant'");
setPropertyBackgroundColor("'background-color', 'blue', 'important '");
}
private void setPropertyBackgroundColor(final String params) {
final String html =
"<html><body onload='test()'>\n"
+ "<a id='a' href='#' style='background-color:green'>go</a>\n"
+ "<script>"
+ " function test() {\n"
+ " var node = document.getElementById('a');\n"
+ " try {\n"
+ " node.style.setProperty(" + params + ");\n"
+ " alert(node.style.backgroundColor + ' ' + node.style.getPropertyPriority('background-color'));\n"
+ " } catch(e) {alert(e); }\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
public void setWidthProperty() {
setLengthProperty("width", "width");
}
@Test
public void setWidth() {
setLength("width", "width");
}
@Test
public void setHeightProperty() {
setLengthProperty("height", "height");
}
@Test
public void setHeight() {
setLength("height", "height");
}
@Test
public void setTopProperty() {
setLengthProperty("top", "top");
}
@Test
public void setTop() {
setLength("top", "top");
}
@Test
public void setLeftProperty() {
setLengthProperty("left", "left");
}
@Test
public void setLeft() {
setLength("left", "left");
}
@Test
public void setBottomProperty() {
setLengthProperty("bottom", "bottom");
}
@Test
public void setBottom() {
setLength("bottom", "bottom");
}
@Test
public void setRightProperty() {
setLengthProperty("right", "right");
}
@Test
public void setRight() {
setLength("right", "right");
}
@Test
public void setMarginTopProperty() {
setLengthProperty("margin-top", "marginTop");
}
@Test
public void setMarginTop() {
setLength("margin-top", "marginTop");
}
@Test
public void setMarginLeftProperty() {
setLength("margin-left", "marginLeft");
}
@Test
public void setMarginLeft() {
setLength("margin-left", "marginLeft");
}
@Test
public void setMarginBottomProperty() {
setLengthProperty("margin-bottom", "marginBottom");
}
@Test
public void setMarginBottom() {
setLength("margin-bottom", "marginBottom");
}
@Test
public void setMarginRightProperty() {
setLengthProperty("margin-right", "marginRight");
}
@Test
public void setMarginRight() {
setLength("margin-right", "marginRight");
}
@Test
public void setPaddingTopProperty() {
setLengthProperty("padding-top", "paddingTop");
}
@Test
public void setPaddingTop() {
setLength("padding-top", "paddingTop");
}
@Test
public void setPaddingLeftProperty() {
setLengthProperty("padding-left", "paddingLeft");
}
@Test
public void setPaddingLeft() {
setLength("padding-left", "paddingLeft");
}
@Test
public void setPaddingBottomProperty() {
setLengthProperty("padding-bottom", "paddingBottom");
}
@Test
public void setPaddingBottom() {
setLength("padding-bottom", "paddingBottom");
}
@Test
public void setPaddingRightProperty() {
setLengthProperty("padding-right", "paddingRight");
}
@Test
public void setPaddingRight() {
setLength("padding-right", "paddingRight");
}
@Test
public void setBorderTopWidthProperty() {
setLengthProperty("border-top-width", "borderTopWidth");
}
@Test
public void setBorderTopWidth() {
setLength("border-top-width", "borderTopWidth");
}
@Test
public void setBorderLeftWidthProperty() {
setLengthProperty("border-left-width", "borderLeftWidth");
}
@Test
public void setBorderLeftWidth() {
setLength("border-left-width", "borderLeftWidth");
}
@Test
public void setBorderBottomWidthProperty() {
setLengthProperty("border-bottom-width", "borderBottomWidth");
}
@Test
public void setBorderBottomWidth() {
setLength("border-bottom-width", "borderBottomWidth");
}
@Test
public void setBorderRightWidthProperty() {
setLengthProperty("border-right-width", "borderRightWidth");
}
@Test
public void setBorderRightWidth() {
setLength("border-right-width", "borderRightWidth");
}
@Test
public void setMaxWidthProperty() {
setLengthProperty("max-width", "maxWidth");
}
@Test
public void setMaxWidth() {
setLength("max-width", "maxWidth");
}
@Test
public void setMinWidthProperty() {
setLengthProperty("min-width", "minWidth");
}
@Test
public void setMinWidth() {
setLength("min-width", "minWidth");
}
@Test
public void setMaxHeightProperty() {
setLengthProperty("max-height", "maxHeight");
}
@Test
public void setMaxHeight() {
setLength("max-height", "maxHeight");
}
@Test
public void setMinHeightProperty() {
setLengthProperty("min-height", "minHeight");
}
@Test
public void setMinHeight() {
setLength("min-height", "minHeight");
}
@Test
public void setTextIndentProperty() {
setLengthProperty("text-indent", "textIndent");
}
@Test
public void setTextIndent() {
setLength("text-indent", "textIndent");
}
@Test
public void setFontSizeProperty() {
setLengthProperty("font-size", "fontSize");
}
@Test
public void setFontSize() {
setLength("font-size", "fontSize");
}
@Test
public void setWordSpacingProperty() {
setLengthProperty("word-spacing", "wordSpacing");
}
@Test
public void setWordSpacing() {
setLength("word-spacing", "wordSpacing");
}
@Test
public void setLetterSpacingProperty() {
setLengthProperty("letter-spacing", "letterSpacing");
}
@Test
public void setLetterSpacing() {
setLength("letter-spacing", "letterSpacing");
}
@Test
public void setVerticalAlignProperty() {
setLengthProperty("vertical-align", "verticalAlign");
}
@Test
public void setVerticalAlign() {
setLength("vertical-align", "verticalAlign");
}
@Test
public void setOutlineWidthProperty() {
setLengthProperty("outline-width", "outlineWidth");
}
@Test
public void setOutlineWidthProperty2() {
setLengthProperty("outline-width", "outlineWidth", "'thin', ''", "thin");
setLengthProperty("outline-width", "outlineWidth", "'medium', ''", "medium");
setLengthProperty("outline-width", "outlineWidth", "'thick', ''", "thick");
}
@Test
public void setOutlineWidth() {
setLength("outline-width", "outlineWidth");
}
@Test
public void setOutlineWidth2() {
setLength("outline-width", "outlineWidth", "'thin'", "thin");
setLength("outline-width", "outlineWidth", "'medium'","medium");
setLength("outline-width", "outlineWidth", "'thick'", "thick");
}
private void setLengthProperty(final String cssProp, final String prop) {
setLengthProperty(cssProp, prop, "4", "4px");
setLengthProperty(cssProp, prop, "'5px'", "5px");
setLengthProperty(cssProp, prop, "'6em'", "6em");
setLengthProperty(cssProp, prop, "'auto'", "auto");
setLengthProperty(cssProp, prop, "'70%'", "70%");
setLengthProperty(cssProp, prop, "'initial'", "initial");
setLengthProperty(cssProp, prop, "'inherit'", "inherit");
setLengthProperty(cssProp, prop, "'ellen'", "17px");
setLengthProperty(cssProp, prop, "undefined", "17px");
setLengthProperty(cssProp, prop, "'undefined'", "17px");
setLengthProperty(cssProp, prop, "''", "null");
setLengthProperty(cssProp, prop, "NaN", "17px");
setLengthProperty(cssProp, prop, "'NaNpx'", "17px");
setLengthProperty(cssProp, prop, "true", "17px");
setLengthProperty(cssProp, prop, "Infinity", "17px");
}
private void setLength(final String cssProp, final String prop) {
setLength(cssProp, prop, "4", "4px");
setLength(cssProp, prop, "'5px'", "5px");
setLength(cssProp, prop, "'6em'", "6em");
setLength(cssProp, prop, "'auto'", "auto");
setLength(cssProp, prop, "'70%'", "70%");
setLength(cssProp, prop, "'initial'", "initial");
setLength(cssProp, prop, "'inherit'", "inherit");
setLength(cssProp, prop, "'ellen'", "17px");
setLength(cssProp, prop, "undefined", "17px");
setLength(cssProp, prop, "'undefined'", "17px");
setLength(cssProp, prop, "''","null");
setLength(cssProp, prop, "NaN", "17px");
setLength(cssProp, prop, "'NaNpx'", "17px");
setLength(cssProp, prop, "true", "17px");
setLength(cssProp, prop, "Infinity", "17px");
}
private void setLengthProperty(final String cssProp, final String prop,
final String params, final String expected) {
final String html =
"<html><body onload='test()'>\n"
+ "<a id='a' href='#' style='" + cssProp + ":17px'>go</a>\n"
+ "<script>"
+ " function test() {\n"
+ " var node = document.getElementById('a');\n"
+ " try {\n"
+ " node.style.setProperty('" + cssProp + "', " + params + ");\n"
+ " alert(node.style." + prop + ");\n"
+ " } catch(e) {alert(e); }\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html, expected);
}
private void setLength(final String cssProp, final String prop,
final String params, final String expected) {
final String html =
"<html><body onload='test()'>\n"
+ "<a id='a' href='#' style='" + cssProp + ":17px'>go</a>\n"
+ "<script>"
+ " function test() {\n"
+ " var node = document.getElementById('a');\n"
+ " try {\n"
+ " node.style." + prop + " = " + params + ";\n"
+ " alert(node.style." + prop + ");\n"
+ " } catch(e) {alert(e); }\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html, expected);
}
@Test
@Alerts({"", "important", "", "important"})
public void getPropertyPriority() {
final String html =
"<html><body onload='test()'>\n"
+ "<a id='a1' href='#' style='color:green'>go</a>\n"
+ "<a id='a2' href='#' style='color:blue !important'>go</a>\n"
+ "<a id='a3' href='#' style='background-color:green'>go</a>\n"
+ "<a id='a4' href='#' style='background-color:blue !important'>go</a>\n"
+ "<script>\n"
+ " function test() {\n"
+ " var node = document.getElementById('a1');\n"
+ " alert(node.style.getPropertyPriority('color'));\n"
+ " node = document.getElementById('a2');\n"
+ " alert(node.style.getPropertyPriority('color'));\n"
+ " node = document.getElementById('a3');\n"
+ " alert(node.style.getPropertyPriority('background-color'));\n"
+ " node = document.getElementById('a4');\n"
+ " alert(node.style.getPropertyPriority('background-color'));\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("")
public void getPropertyPriorityNoStyle() {
final String html =
"<html><body onload='test()'>\n"
+ "<a id='a1' href='#'>go</a>\n"
+ "<script>\n"
+ " function test() {\n"
+ " var node = document.getElementById('a1');\n"
+ " alert(node.style.getPropertyPriority('color'));\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"black", "pink", "color: pink;", "color: pink;"})
public void caseInsensitive() {
final String html
= "<html><head><script>\n"
+ "function doTest() {\n"
+ " var node = document.getElementById('div1');\n"
+ " var style = node.style;\n"
+ " alert(style.color);\n"
+ " style.color = 'pink';\n"
+ " alert(style.color);\n"
+ " alert(node.getAttribute('style'));\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='doTest()'><div id='div1' style='COLOR: BLACK'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"5px", "undefined", "1em", "undefined"})
public void pixelLeft() {
final String html = "<html><body>\n"
+ "<div id='a' style='left: 5px; border: 1px solid black;'>a</div>\n"
+ "<div id='b' style='left: 1em; border: 1px solid black;'>b</div>\n"
+ "<script>\n"
+ " var a = document.getElementById('a');\n"
+ " var b = document.getElementById('b');\n"
+ " alert(a.style.left);\n"
+ " alert(a.style.pixelLeft);\n"
+ " alert(b.style.left);\n"
+ " alert(b.style.pixelLeft);\n"
+ " if(a.style.pixelLeft) {\n"
+ " a.style.pixelLeft = 30;\n"
+ " alert(a.style.left);\n"
+ " alert(a.style.pixelLeft);\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"5px", "undefined", "1em", "undefined"})
public void pixelRight() {
final String html = "<html><body>\n"
+ "<div id='a' style='right: 5px; border: 1px solid black;'>a</div>\n"
+ "<div id='b' style='right: 1em; border: 1px solid black;'>b</div>\n"
+ "<script>\n"
+ " var a = document.getElementById('a');\n"
+ " var b = document.getElementById('b');\n"
+ " alert(a.style.right);\n"
+ " alert(a.style.pixelRight);\n"
+ " alert(b.style.right);\n"
+ " alert(b.style.pixelRight);\n"
+ " if(a.style.pixelRight) {\n"
+ " a.style.pixelRight = 30;\n"
+ " alert(a.style.right);\n"
+ " alert(a.style.pixelRight);\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"5px", "undefined", "1em", "undefined"})
public void pixelTop() {
final String html = "<html><body>\n"
+ "<div id='a' style='top: 5px; border: 1px solid black;'>a</div>\n"
+ "<div id='b' style='top: 1em; border: 1px solid black;'>b</div>\n"
+ "<script>\n"
+ " var a = document.getElementById('a');\n"
+ " var b = document.getElementById('b');\n"
+ " alert(a.style.top);\n"
+ " alert(a.style.pixelTop);\n"
+ " alert(b.style.top);\n"
+ " alert(b.style.pixelTop);\n"
+ " if(a.style.pixelTop) {\n"
+ " a.style.pixelTop = 30;\n"
+ " alert(a.style.top);\n"
+ " alert(a.style.pixelTop);\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"5px", "undefined", "1em", "undefined"})
public void pixelBottom() {
final String html = "<html><body>\n"
+ "<div id='a' style='bottom: 5px; border: 1px solid black;'>a</div>\n"
+ "<div id='b' style='bottom: 1em; border: 1px solid black;'>b</div>\n"
+ "<script>\n"
+ " var a = document.getElementById('a');\n"
+ " var b = document.getElementById('b');\n"
+ " alert(a.style.bottom);\n"
+ " alert(a.style.pixelBottom);\n"
+ " alert(b.style.bottom);\n"
+ " alert(b.style.pixelBottom);\n"
+ " if(a.style.pixelBottom) {\n"
+ " a.style.pixelBottom = 30;\n"
+ " alert(a.style.bottom);\n"
+ " alert(a.style.pixelBottom);\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"undefined", "none"})
public void interceptSetter() {
final String html = "<html>\n"
+ "<body>\n"
+ "<div id='d'>foo</div>\n"
+ "<script>\n"
+ " try {\n"
+ " var css = window.CSSStyleDeclaration;\n"
+ " var oldDisplay = css.prototype.__lookupSetter__('display');\n"
+ " alert(typeof oldDisplay);\n"
+ " var newDisplay = function(x){\n"
+ " alert('before');\n"
+ " alert(x);\n"
+ " oldDisplay.call(this, x);\n"
+ " alert('after');\n"
+ " };\n"
+ " css.prototype.__defineSetter__('display', newDisplay);\n"
+ " var div = document.getElementById('d');\n"
+ " div.style.display = 'none';\n"
+ " alert(div.style.display);\n"
+ " } catch(e) {alert('exception'); }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "", "", ""})
public void setToNull() {
final String html
= "<html><head><script>\n"
+ "function test() {\n"
+ " var div1 = document.getElementById('div1');\n"
+ " alert(div1.style.border);\n"
+ " try {\n"
+ " div1.style.border = null;\n"
+ " } catch (e) {\n"
+ " alert('error');\n"
+ " }\n"
+ " alert(div1.style.border);\n"
+ " alert(div1.style.display);\n"
+ " try {\n"
+ " div1.style.display = null;\n"
+ " } catch (e) {\n"
+ " alert('error');\n"
+ " }\n"
+ " alert(div1.style.display);\n"
+ "}\n"
+ "</script></head>\n"
+ "<body onload='test()'>\n"
+ "<div id='div1'>foo</div></body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"1", "width", "undefined", "undefined"})
public void length2() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var a = document.createElement('div');\n"
+ " a.style.cssText = 'width: 100%';\n"
+ " alert(a.style.length);\n"
+ " alert(a.style[0]);\n"
+ " alert(a.style[1]);\n"
+ " alert(a.style[-1]);\n"
+ " }\n"
+ "</script>\n"
+ "</head><body onload='test()'>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"true", "true", "border-box"})
public void boxSizing() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var style = document.getElementById('test').style;\n"
+ " alert(style.boxSizing === '');\n"
+ " style = document.createElement('div').style;\n"
+ " alert(style.boxSizing === '');\n"
+ " style.boxSizing = 'border-box';\n"
+ " alert(style.boxSizing);\n"
+ " }\n"
+ "</script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ " <div id='test'></div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"auto", ""})
public void jQueryPixelPosition() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var div = document.getElementById('test');\n"
+ " var style = window.getComputedStyle(div, null);\n"
+ " alert(style.top);\n"
+ " div = document.createElement('div');\n"
+ " style = window.getComputedStyle(div, null);\n"
+ " alert(style.top);\n"
+ " }\n"
+ "</script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ " <div id='test'></div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"", "2", "", "2", "5", "5", "5", "5"})
public void widows() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var div = document.getElementById('mydiv');\n"
+ " debug(div);\n"
+ " div.style.widows = 0;\n"
+ " debug(div);\n"
+ " div.style.widows = 5;\n"
+ " debug(div);\n"
+ " div.style.widows = 0;\n"
+ " debug(div);\n"
+ " }\n"
+ " function debug(div) {\n"
+ " alert(div.style.widows);\n"
+ " alert(window.getComputedStyle(div, null).widows);\n"
+ " }\n"
+ "</script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ " <div id='mydiv'></div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "2", "null", "2", "5", "5", "5", "5"})
public void orphans() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var div = document.getElementById('mydiv');\n"
+ " debug(div);\n"
+ " div.style.orphans = 0;\n"
+ " debug(div);\n"
+ " div.style.orphans = 5;\n"
+ " debug(div);\n"
+ " div.style.orphans = 0;\n"
+ " debug(div);\n"
+ " }\n"
+ " function debug(div) {\n"
+ " alert(div.style.orphans);\n"
+ " alert(window.getComputedStyle(div, null).orphans);\n"
+ " }\n"
+ "</script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ " <div id='mydiv'></div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"null", "static", "null", "static", "null", "static", "absolute", "absolute", "null", "static"})
public void position() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var div = document.getElementById('mydiv');\n"
+ " debug(div);\n"
+ " div.style.position = 'fake';\n"
+ " debug(div);\n"
+ " div.style.position = ' ';\n"
+ " debug(div);\n"
+ " div.style.position = 'AbSoLuTe';\n"
+ " debug(div);\n"
+ " div.style.position = '';\n"
+ " debug(div);\n"
+ " }\n"
+ " function debug(div) {\n"
+ " alert(div.style.position);\n"
+ " alert(window.getComputedStyle(div, null).position);\n"
+ " }\n"
+ "</script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ " <div id='mydiv'></div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"[object CSSStyleDeclaration]", "[object CSSStyleDeclaration]", "green", "abc"})
public void setStyle() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var div = document.getElementById('mydiv');\n"
+ " alert(div.style);\n"
+ " div.style = 'color: green; font-family: abc';\n"
+ " alert(div.style);\n"
+ " alert(div.style.color);\n"
+ " alert(div.style.fontFamily);\n"
+ " }\n"
+ "</script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ " <div id='mydiv'></div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"1", "false", "true", "false", "false"})
public void in() {
final String html = "<html><head>\n"
+ "<script>"
+ " function test() {\n"
+ " var node = document.getElementById('div1');\n"
+ " var style = node.style;\n"
+ " alert(style.length);\n"
+ " alert(-1 in style);\n"
+ " alert(0 in style);\n"
+ " alert(1 in style);\n"
+ " alert(42 in style);\n"
+ " }\n"
+ "</script>\n"
+ "</head>\n"
+ "<body onload='test()'>\n"
+ " <div id='div1' style='color: black'>foo</div>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("0px")
public void widthAbsolute() {
final String html =
"<html>\n"
+ "</head>\n"
+ " <style type='text/css'>div {position: absolute;}</style>\n"
+ "</head>\n"
+ "<body>\n"
+ " <div id='tester'></div>\n"
+ " <script>\n"
+ " var myDiv = document.getElementById('tester');\n"
+ " var myDivStyle = window.getComputedStyle(myDiv, null);\n"
+ " alert(myDivStyle.width);\n"
+ " </script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("exception true")
public void ctor() {
final String html =
"<html>\n"
+ "</head>\n"
+ " <style type='text/css'>div {position: absolute;}</style>\n"
+ "</head>\n"
+ "<body>\n"
+ " <div id='tester'></div>\n"
+ " <script>\n"
+ " try {"
+ " var c = new CSSStyleDeclaration();\n"
+ " alert(c);\n"
+ " } catch(e) {\n"
+ " alert('exception ' + (e instanceof TypeError));\n"
+ " }\n"
+ " </script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts({"background-color", "string", "font-weight", "null", "string", "null", "string"})
public void item() {
final String html
= "<html><body>\n"
+ "<style>\n"
+ " p { background-color: #FFFFFF; }\n"
+ "</style>\n"
+ "<div id='myDiv' style='background-color: #FFFFFF; font-weight: bold;'></div>\n"
+ "<script>\n"
+ " decl = document.getElementById('myDiv').style;\n"
+ " alert(decl.item(0));\n"
+ " alert(typeof decl.item(0));\n"
+ " alert(decl.item(1));\n"
+ " alert(decl.item(2));\n"
+ " alert(typeof decl.item(2));\n"
+ " try {\n"
+ " alert(decl.item(-1));\n"
+ " alert(typeof decl.item(-1));\n"
+ " } catch(e) {\n"
+ " alert('exception ');\n"
+ " }\n"
+ "</script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
@Test
@Alerts("\"abCD\"")
public void content() {
final String html =
"<html>\n"
+ "</head>\n"
+ " <style type='text/css'>#myDiv::before { content: 'abCD' }</style>\n"
+ "</head>\n"
+ "<body>\n"
+ " <div id='myDiv'></div>\n"
+ " <script>\n"
+ " var myDiv = document.getElementById('myDiv');\n"
+ " var myDivStyle = window.getComputedStyle(myDiv, '::before');\n"
+ " alert(myDivStyle.content);\n"
+ " </script>\n"
+ "</body></html>";
checkHtmlAlert(html);
}
}