Change-Id: I821ad3985c78cd0c2a66b37078885ea0612d5ad1tags/7.6.0.alpha2
var cs = element.ownerDocument.defaultView.getComputedStyle(element); | var cs = element.ownerDocument.defaultView.getComputedStyle(element); | ||||
var heightPx = cs.height; | var heightPx = cs.height; | ||||
if(heightPx == 'auto'){ | if(heightPx == 'auto'){ | ||||
// Fallback for when IE reports auto | |||||
heightPx = @com.vaadin.client.WidgetUtil::getRequiredHeightBoundingClientRect(Lcom/google/gwt/dom/client/Element;)(element) + 'px'; | |||||
// Fallback for inline elements | |||||
return @com.vaadin.client.WidgetUtil::getRequiredHeightBoundingClientRect(Lcom/google/gwt/dom/client/Element;)(element); | |||||
} | } | ||||
var borderTopPx = cs.borderTop; | |||||
var borderBottomPx = cs.borderBottom; | |||||
var paddingTopPx = cs.paddingTop; | |||||
var paddingBottomPx = cs.paddingBottom; | |||||
var height = heightPx.substring(0,heightPx.length-2); | |||||
var border = borderTopPx.substring(0,borderTopPx.length-2)+borderBottomPx.substring(0,borderBottomPx.length-2); | |||||
var padding = paddingTopPx.substring(0,paddingTopPx.length-2)+paddingBottomPx.substring(0,paddingBottomPx.length-2); | |||||
var height = parseFloat(heightPx); // Will automatically skip "px" suffix | |||||
var border = parseFloat(cs.borderTopWidth) + parseFloat(cs.borderBottomWidth); // Will automatically skip "px" suffix | |||||
var padding = parseFloat(cs.paddingTop) + parseFloat(cs.paddingBottom); // Will automatically skip "px" suffix | |||||
return Math.ceil(height+border+padding); | return Math.ceil(height+border+padding); | ||||
}-*/; | }-*/; | ||||
var cs = element.ownerDocument.defaultView.getComputedStyle(element); | var cs = element.ownerDocument.defaultView.getComputedStyle(element); | ||||
var widthPx = cs.width; | var widthPx = cs.width; | ||||
if(widthPx == 'auto'){ | if(widthPx == 'auto'){ | ||||
// Fallback for when IE reports auto | |||||
widthPx = @com.vaadin.client.WidgetUtil::getRequiredWidthBoundingClientRect(Lcom/google/gwt/dom/client/Element;)(element) + 'px'; | |||||
// Fallback for inline elements | |||||
return @com.vaadin.client.WidgetUtil::getRequiredWidthBoundingClientRect(Lcom/google/gwt/dom/client/Element;)(element); | |||||
} | } | ||||
var borderLeftPx = cs.borderLeft; | |||||
var borderRightPx = cs.borderRight; | |||||
var paddingLeftPx = cs.paddingLeft; | |||||
var paddingRightPx = cs.paddingRight; | |||||
var width = widthPx.substring(0,widthPx.length-2); | |||||
var border = borderLeftPx.substring(0,borderLeftPx.length-2)+borderRightPx.substring(0,borderRightPx.length-2); | |||||
var padding = paddingLeftPx.substring(0,paddingLeftPx.length-2)+paddingRightPx.substring(0,paddingRightPx.length-2); | |||||
var width = parseFloat(widthPx); // Will automatically skip "px" suffix | |||||
var border = parseFloat(cs.borderLeftWidth) + parseFloat(cs.borderRightWidth); // Will automatically skip "px" suffix | |||||
var padding = parseFloat(cs.paddingLeft) + parseFloat(cs.paddingRight); // Will automatically skip "px" suffix | |||||
return Math.ceil(width+border+padding); | return Math.ceil(width+border+padding); | ||||
}-*/; | }-*/; | ||||
/* | |||||
* Copyright 2000-2014 Vaadin Ltd. | |||||
* | |||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not | |||||
* use this file except in compliance with the License. You may obtain a copy of | |||||
* the License at | |||||
* | |||||
* http://www.apache.org/licenses/LICENSE-2.0 | |||||
* | |||||
* Unless required by applicable law or agreed to in writing, software | |||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | |||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | |||||
* License for the specific language governing permissions and limitations under | |||||
* the License. | |||||
*/ | |||||
package com.vaadin.tests.util; | |||||
import java.util.List; | |||||
import org.junit.Assert; | |||||
import org.junit.Test; | |||||
import org.openqa.selenium.By; | |||||
import org.openqa.selenium.WebElement; | |||||
import org.openqa.selenium.remote.DesiredCapabilities; | |||||
import com.vaadin.testbench.parallel.Browser; | |||||
import com.vaadin.testbench.parallel.BrowserUtil; | |||||
import com.vaadin.tests.tb3.MultiBrowserTest; | |||||
import com.vaadin.tests.widgetset.server.WidgetUtilUI; | |||||
public class WidgetUtilTest extends MultiBrowserTest { | |||||
@Override | |||||
public List<DesiredCapabilities> getBrowsersToTest() { | |||||
List<DesiredCapabilities> l = super.getBrowsersToTest(); | |||||
// IE8 does not support getComputedStyle | |||||
l.remove(Browser.IE8.getDesiredCapabilities()); | |||||
return l; | |||||
} | |||||
@Test | |||||
public void testBlockElementRequiredSizeComputedStyle() { | |||||
openTestURL(); | |||||
WebElement testComponent = findElement(By | |||||
.className("v-widget-util-test")); | |||||
testComponent.click(); | |||||
int padding = (int) Math.ceil(2.4 + 3.5); | |||||
int border = (int) Math.ceil(1.8 * 2); | |||||
int baseWidth = 300; | |||||
int baseHeight = 50; | |||||
if (BrowserUtil.isPhantomJS(getDesiredCapabilities()) | |||||
&& getDesiredCapabilities().getVersion().equals("1")) { | |||||
// PhantomJS1 rounds padding to integers | |||||
padding = 2 + 3; | |||||
} | |||||
if (browserRoundsBorderToInteger(getDesiredCapabilities())) { | |||||
border = 1 * 2; | |||||
} | |||||
assertExpectedSize(testComponent, "noBorderPadding", baseWidth + "x" | |||||
+ baseHeight); | |||||
assertExpectedSize(testComponent, "border", (baseWidth + border) + "x" | |||||
+ (baseHeight + border)); | |||||
assertExpectedSize(testComponent, "padding", (baseWidth + padding) | |||||
+ "x" + (baseHeight + padding)); | |||||
assertExpectedSize(testComponent, "borderPadding", | |||||
(baseWidth + border + padding) + "x" | |||||
+ (baseHeight + border + padding)); | |||||
} | |||||
private void assertExpectedSize(WebElement testComponent, String id, | |||||
String size) { | |||||
WebElement e = testComponent.findElement(By.id(id)); | |||||
Assert.assertEquals(id + ": " + size, e.getText()); | |||||
} | |||||
private boolean browserRoundsBorderToInteger( | |||||
DesiredCapabilities capabilities) { | |||||
// Note that this is how the Windows browsers in the test cluster work. | |||||
// On Mac, Firefox works slightly differently (rounds border to 1.5px). | |||||
return (BrowserUtil.isChrome(capabilities) | |||||
|| BrowserUtil.isPhantomJS(capabilities) || BrowserUtil | |||||
.isFirefox(capabilities)); | |||||
} | |||||
@Override | |||||
protected Class<?> getUIClass() { | |||||
return WidgetUtilUI.class; | |||||
} | |||||
} |
package com.vaadin.tests.widgetset.client; | |||||
import com.vaadin.shared.AbstractComponentState; | |||||
public class WidgetUtilTestComponentState extends AbstractComponentState { | |||||
public boolean inline = false; | |||||
} |
/* | |||||
* Copyright 2000-2014 Vaadin Ltd. | |||||
* | |||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not | |||||
* use this file except in compliance with the License. You may obtain a copy of | |||||
* the License at | |||||
* | |||||
* http://www.apache.org/licenses/LICENSE-2.0 | |||||
* | |||||
* Unless required by applicable law or agreed to in writing, software | |||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | |||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | |||||
* License for the specific language governing permissions and limitations under | |||||
* the License. | |||||
*/ | |||||
package com.vaadin.tests.widgetset.client; | |||||
import com.vaadin.client.communication.StateChangeEvent; | |||||
import com.vaadin.client.ui.AbstractComponentConnector; | |||||
import com.vaadin.shared.ui.Connect; | |||||
import com.vaadin.tests.widgetset.server.WidgetUtilUI.WidgetUtilTestComponent; | |||||
@Connect(WidgetUtilTestComponent.class) | |||||
public class WidgetUtilTestConnector extends AbstractComponentConnector { | |||||
@Override | |||||
public void onStateChanged(StateChangeEvent stateChangeEvent) { | |||||
super.onStateChanged(stateChangeEvent); | |||||
getWidget().construct(getState().inline); | |||||
} | |||||
@Override | |||||
public WidgetUtilTestWidget getWidget() { | |||||
return (WidgetUtilTestWidget) super.getWidget(); | |||||
} | |||||
@Override | |||||
public WidgetUtilTestComponentState getState() { | |||||
return (WidgetUtilTestComponentState) super.getState(); | |||||
} | |||||
} |
/* | |||||
* Copyright 2000-2014 Vaadin Ltd. | |||||
* | |||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not | |||||
* use this file except in compliance with the License. You may obtain a copy of | |||||
* the License at | |||||
* | |||||
* http://www.apache.org/licenses/LICENSE-2.0 | |||||
* | |||||
* Unless required by applicable law or agreed to in writing, software | |||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | |||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | |||||
* License for the specific language governing permissions and limitations under | |||||
* the License. | |||||
*/ | |||||
package com.vaadin.tests.widgetset.client; | |||||
import com.google.gwt.dom.client.DivElement; | |||||
import com.google.gwt.dom.client.Document; | |||||
import com.google.gwt.dom.client.Element; | |||||
import com.google.gwt.dom.client.Style; | |||||
import com.google.gwt.dom.client.Style.BorderStyle; | |||||
import com.google.gwt.dom.client.Style.Unit; | |||||
import com.google.gwt.event.dom.client.ClickEvent; | |||||
import com.google.gwt.event.dom.client.ClickHandler; | |||||
import com.google.gwt.user.client.ui.Widget; | |||||
import com.vaadin.client.WidgetUtil; | |||||
public class WidgetUtilTestWidget extends Widget { | |||||
private Element noBorderPadding; | |||||
private Element border; | |||||
private Element padding; | |||||
private Element borderPadding; | |||||
private DivElement result; | |||||
private boolean inline; | |||||
private DivElement root; | |||||
public WidgetUtilTestWidget() { | |||||
Document doc = Document.get(); | |||||
root = doc.createDivElement(); | |||||
root.addClassName("v-widget-util-test"); | |||||
setElement(root); | |||||
addDomHandler(new ClickHandler() { | |||||
@Override | |||||
public void onClick(ClickEvent event) { | |||||
showSizes(); | |||||
} | |||||
}, ClickEvent.getType()); | |||||
} | |||||
public void construct(boolean inline) { | |||||
this.inline = inline; | |||||
noBorderPadding = createElement(); | |||||
border = createElement(); | |||||
setBorder(border); | |||||
padding = createElement(); | |||||
setPadding(padding); | |||||
borderPadding = createElement(); | |||||
setBorder(borderPadding); | |||||
setPadding(borderPadding); | |||||
root.appendChild(noBorderPadding); | |||||
root.appendChild(border); | |||||
root.appendChild(padding); | |||||
root.appendChild(borderPadding); | |||||
result = Document.get().createDivElement(); | |||||
result.addClassName("result"); | |||||
result.getStyle().setWidth(500, Unit.PX); | |||||
root.appendChild(result); | |||||
} | |||||
private void setBorder(Element e) { | |||||
Style borderStyle = e.getStyle(); | |||||
borderStyle.setBorderStyle(BorderStyle.SOLID); | |||||
borderStyle.setBorderWidth(1.8, Unit.PX); | |||||
} | |||||
private void setPadding(Element e) { | |||||
Style borderStyle = e.getStyle(); | |||||
borderStyle.setPaddingLeft(2.4, Unit.PX); | |||||
borderStyle.setPaddingRight(3.5, Unit.PX); | |||||
borderStyle.setPaddingTop(2.4, Unit.PX); | |||||
borderStyle.setPaddingBottom(3.5, Unit.PX); | |||||
} | |||||
private Element createElement() { | |||||
Element e; | |||||
if (inline) { | |||||
e = Document.get().createSpanElement(); | |||||
e.getStyle().setBackgroundColor("green"); | |||||
} else { | |||||
e = Document.get().createDivElement(); | |||||
e.getStyle().setWidth(300, Unit.PX); | |||||
e.getStyle().setHeight(50, Unit.PX); | |||||
e.getStyle().setBackgroundColor("blue"); | |||||
} | |||||
e.getStyle().setMargin(3.7, Unit.PX); | |||||
return e; | |||||
} | |||||
public void showSizes() { | |||||
String sizes = "Measured required width x height<br/>"; | |||||
sizes += "<div id='noBorderPadding'>noBorderPadding: " | |||||
+ WidgetUtil.getRequiredWidthComputedStyle(noBorderPadding); | |||||
sizes += "x" | |||||
+ WidgetUtil.getRequiredHeightComputedStyle(noBorderPadding) | |||||
+ "</div>"; | |||||
sizes += "<div id='border'>border: " | |||||
+ WidgetUtil.getRequiredWidthComputedStyle(border); | |||||
sizes += "x" + WidgetUtil.getRequiredHeightComputedStyle(border); | |||||
sizes += "</div>"; | |||||
sizes += "<div id='padding'>padding: " | |||||
+ WidgetUtil.getRequiredWidthComputedStyle(padding); | |||||
sizes += "x" + WidgetUtil.getRequiredHeightComputedStyle(padding); | |||||
sizes += "</div>"; | |||||
sizes += "<div id='borderPadding'>borderPadding: " | |||||
+ WidgetUtil.getRequiredWidthComputedStyle(borderPadding); | |||||
sizes += "x" + WidgetUtil.getRequiredHeightComputedStyle(borderPadding) | |||||
+ "</div>"; | |||||
result.setInnerHTML(sizes); | |||||
if (inline) { | |||||
result.getStyle().setPaddingTop(200, Unit.PX); | |||||
} | |||||
} | |||||
} |
/* | |||||
* Copyright 2000-2014 Vaadin Ltd. | |||||
* | |||||
* Licensed under the Apache License, Version 2.0 (the "License"); you may not | |||||
* use this file except in compliance with the License. You may obtain a copy of | |||||
* the License at | |||||
* | |||||
* http://www.apache.org/licenses/LICENSE-2.0 | |||||
* | |||||
* Unless required by applicable law or agreed to in writing, software | |||||
* distributed under the License is distributed on an "AS IS" BASIS, WITHOUT | |||||
* WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the | |||||
* License for the specific language governing permissions and limitations under | |||||
* the License. | |||||
*/ | |||||
package com.vaadin.tests.widgetset.server; | |||||
import com.vaadin.annotations.Widgetset; | |||||
import com.vaadin.server.VaadinRequest; | |||||
import com.vaadin.tests.components.AbstractTestUI; | |||||
import com.vaadin.tests.widgetset.TestingWidgetSet; | |||||
import com.vaadin.tests.widgetset.client.WidgetUtilTestComponentState; | |||||
import com.vaadin.ui.AbstractComponent; | |||||
@Widgetset(TestingWidgetSet.NAME) | |||||
public class WidgetUtilUI extends AbstractTestUI { | |||||
public static class WidgetUtilTestComponent extends AbstractComponent { | |||||
public WidgetUtilTestComponent(boolean inline) { | |||||
getState().inline = inline; | |||||
} | |||||
@Override | |||||
protected WidgetUtilTestComponentState getState() { | |||||
return (WidgetUtilTestComponentState) super.getState(); | |||||
} | |||||
} | |||||
@Override | |||||
protected void setup(VaadinRequest request) { | |||||
addComponent(new WidgetUtilTestComponent( | |||||
request.getParameter("inline") != null)); | |||||
} | |||||
} |