зеркало из https://github.com/mozilla/gecko-dev.git
Bug 520992: Adjust computed width and height before returning to account for box-sizing. [r=bz]
This commit is contained in:
Scott Johnson
Родитель
3d39bf1da3
Коммит
502238ef9b
|
|
@ -59,6 +59,7 @@ MOCHITEST_CHROME_FILES = \
|
|||
test_innerScreen.xul \
|
||||
test_offsets.xul \
|
||||
test_offsets.js \
|
||||
test_offsets.css \
|
||||
$(NULL)
|
||||
|
||||
include $(topsrcdir)/config/rules.mk
|
||||
|
|
|
|||
|
|
@ -0,0 +1,3 @@
|
|||
button, vbox, menu, menuitem, menupopup {
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
|
|
@ -6,6 +6,11 @@
|
|||
<script type="text/javascript" src="test_offsets.js"></script>
|
||||
<link rel="stylesheet" type="text/css" href="/tests/SimpleTest/test.css">
|
||||
|
||||
<style>
|
||||
input {
|
||||
-moz-box-sizing: content-box;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body id="body" onload="setTimeout(testElements, 0, 'testelements', SimpleTest.finish);"
|
||||
style="margin: 1px; border: 2px solid black; padding: 4px;">
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<?xml version="1.0"?>
|
||||
<?xml-stylesheet href="chrome://global/skin" type="text/css"?>
|
||||
<?xml-stylesheet href="chrome://mochikit/content/tests/SimpleTest/test.css" type="text/css"?>
|
||||
<?xml-stylesheet href="test_offsets.css" type="text/css"?>
|
||||
<!--
|
||||
XUL Tests for client/scroll properties
|
||||
-->
|
||||
|
|
|
|||
|
|
@ -0,0 +1,34 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=utf-8>
|
||||
<title>Bug 520992</title>
|
||||
|
||||
<style>
|
||||
#borderBox {
|
||||
background:gold;
|
||||
height:100px;
|
||||
-moz-box-sizing:border-box;
|
||||
}
|
||||
|
||||
#paddingBox {
|
||||
background:gold;
|
||||
height:100px;
|
||||
-moz-box-sizing:padding-box;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="borderBox"></div>
|
||||
<p id="heightWidth1"></p>
|
||||
|
||||
<div id="paddingBox"></div>
|
||||
<p id="heightWidth2"></p>
|
||||
<script>
|
||||
var divs = document.getElementsByTagName("div");
|
||||
var textEle1 = document.getElementById("heightWidth1");
|
||||
textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
|
||||
textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
|
||||
|
||||
var textEle2 = document.getElementById("heightWidth2");
|
||||
textEle2.innerHTML += "height = " + getComputedStyle(divs[1]).height;
|
||||
textEle2.innerHTML += ", width = " + getComputedStyle(divs[1]).width;
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<!DOCTYPE HTML>
|
||||
<meta charset=utf-8>
|
||||
<title>Bug 520992</title>
|
||||
|
||||
<style>
|
||||
#borderBox {
|
||||
background:gold;
|
||||
height:100px;
|
||||
-moz-box-sizing:border-box;
|
||||
border: 20px solid gold;
|
||||
}
|
||||
|
||||
#paddingBox {
|
||||
background:gold;
|
||||
height:100px;
|
||||
-moz-box-sizing:padding-box;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<div id="borderBox"></div>
|
||||
<p id="heightWidth1"></p>
|
||||
|
||||
<div id="paddingBox"></div>
|
||||
<p id="heightWidth2"></p>
|
||||
<script>
|
||||
var divs = document.getElementsByTagName("div");
|
||||
var textEle1 = document.getElementById("heightWidth1");
|
||||
textEle1.innerHTML += "height = " + getComputedStyle(divs[0]).height;
|
||||
textEle1.innerHTML += ", width = " + getComputedStyle(divs[0]).width;
|
||||
|
||||
var textEle2 = document.getElementById("heightWidth2");
|
||||
textEle2.innerHTML += "height = " + getComputedStyle(divs[1]).height;
|
||||
textEle2.innerHTML += ", width = " + getComputedStyle(divs[1]).width;
|
||||
</script>
|
||||
|
|
@ -4,3 +4,4 @@
|
|||
== intrinsic-1d.html intrinsic-1-ref.html
|
||||
== intrinsic-1e.html intrinsic-1-ref.html
|
||||
== intrinsic-1f.html intrinsic-1-ref.html
|
||||
== computed-size-reporting.html computed-size-reporting-ref.html
|
||||
|
|
|
|||
|
|
@ -375,6 +375,39 @@ nsComputedDOMStyle::GetStyleContextForElementNoFlush(Element* aElement,
|
|||
return sc.forget();
|
||||
}
|
||||
|
||||
nsMargin
|
||||
nsComputedDOMStyle::GetAdjustedValuesForBoxSizing()
|
||||
{
|
||||
// We want the width/height of whatever parts 'width' or 'height' controls,
|
||||
// which can be different depending on the value of the 'box-sizing' property.
|
||||
const nsStylePosition* stylePos = StylePosition();
|
||||
nscoord borderPaddingLeft = 0;
|
||||
nscoord borderPaddingRight = 0;
|
||||
nscoord borderPaddingTop = 0;
|
||||
nscoord borderPaddingBottom = 0;
|
||||
|
||||
nsMargin border = mInnerFrame->GetUsedBorder();
|
||||
nsMargin padding = mInnerFrame->GetUsedPadding();
|
||||
|
||||
switch(stylePos->mBoxSizing) {
|
||||
case NS_STYLE_BOX_SIZING_BORDER:
|
||||
borderPaddingLeft += border.left;
|
||||
borderPaddingRight += border.right;
|
||||
borderPaddingTop += border.top;
|
||||
borderPaddingBottom += border.bottom;
|
||||
// fall through
|
||||
|
||||
case NS_STYLE_BOX_SIZING_PADDING:
|
||||
borderPaddingLeft += padding.left;
|
||||
borderPaddingRight += padding.right;
|
||||
borderPaddingTop += padding.top;
|
||||
borderPaddingBottom += padding.bottom;
|
||||
}
|
||||
|
||||
return nsMargin(borderPaddingTop, borderPaddingRight, borderPaddingBottom,
|
||||
borderPaddingLeft);
|
||||
}
|
||||
|
||||
/* static */
|
||||
nsIPresShell*
|
||||
nsComputedDOMStyle::GetPresShellForContent(nsIContent* aContent)
|
||||
|
|
@ -3325,8 +3358,9 @@ nsComputedDOMStyle::DoGetHeight()
|
|||
|
||||
if (calcHeight) {
|
||||
AssertFlushedPendingReflows();
|
||||
|
||||
val->SetAppUnits(mInnerFrame->GetContentRect().height);
|
||||
nsMargin adjustedValues = GetAdjustedValuesForBoxSizing();
|
||||
val->SetAppUnits(mInnerFrame->GetContentRect().height +
|
||||
adjustedValues.TopBottom());
|
||||
} else {
|
||||
const nsStylePosition *positionData = StylePosition();
|
||||
|
||||
|
|
@ -3365,8 +3399,9 @@ nsComputedDOMStyle::DoGetWidth()
|
|||
|
||||
if (calcWidth) {
|
||||
AssertFlushedPendingReflows();
|
||||
|
||||
val->SetAppUnits(mInnerFrame->GetContentRect().width);
|
||||
nsMargin adjustedValues = GetAdjustedValuesForBoxSizing();
|
||||
val->SetAppUnits(mInnerFrame->GetContentRect().width +
|
||||
adjustedValues.LeftRight());
|
||||
} else {
|
||||
const nsStylePosition *positionData = StylePosition();
|
||||
|
||||
|
|
|
|||
|
|
@ -99,6 +99,8 @@ private:
|
|||
"property getter should have been marked layout-dependent");
|
||||
}
|
||||
|
||||
nsMargin GetAdjustedValuesForBoxSizing();
|
||||
|
||||
#define STYLE_STRUCT(name_, checkdata_cb_) \
|
||||
const nsStyle##name_ * Style##name_() { \
|
||||
return mStyleContextHolder->Style##name_(); \
|
||||
|
|
|
|||
|
|
@ -37,8 +37,8 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=363146
|
|||
<script class="testbody" type="text/javascript">
|
||||
|
||||
var c = window.getComputedStyle(document.getElementById("t1"), "");
|
||||
is(c.width, "400px");
|
||||
is(c.height, "100px");
|
||||
is(c.width, "420px");
|
||||
is(c.height, "120px");
|
||||
is(c.left, "50px");
|
||||
is(c.top, "35px");
|
||||
is(c.borderLeftWidth, "10px");
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче