зеркало из https://github.com/mozilla/gecko-dev.git
Remove notion of percentage intrinsic size: remove the single case that (incorrectly) sets percentage intrinsic sizes, and fix all of the tests that depend on our old incorrect behavior. (Bug 611099) r=dholbert
Needed to help CSS 2.1 meet Proposed Recommendation entrance criteria.
This commit is contained in:
L. David Baron
Родитель
d69c8fdc7b
Коммит
2487c4de1e
|
|
@ -18,15 +18,15 @@
|
|||
// <embed> elements.
|
||||
|
||||
// * FIRST TWO ROWS: <img> has width=auto height=auto
|
||||
// - Each <img> renders w/ width = 10% * body_width = .1*600 = 60px
|
||||
// - Synthesized viewBox has width = 10% * viewport_width = .1*60 = 6
|
||||
// - Each <img> renders w/ width = 300px (default)
|
||||
// - Synthesized viewBox has width = 10% * viewport_width = .1*300 = 30
|
||||
// - <img> & viewBox both get height=30px, from <svg> height attr
|
||||
svgParams.viewBox = [0, 0, 6, 30],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "60px", "30px");
|
||||
svgParams.viewBox = [0, 0, 30, 30],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "300px", "30px");
|
||||
|
||||
// * SECOND TWO ROWS: <img> has width=auto, height=20px
|
||||
// Calculations are as above, except <img> now imposes height="20px".
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "60px", "20px");
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "300px", "20px");
|
||||
|
||||
// * THIRD TWO ROWS: <img> has width=30px height=auto
|
||||
// - <img> now renders w/ width = 30px (imposed by <img> width attr)
|
||||
|
|
|
|||
|
|
@ -18,11 +18,11 @@
|
|||
// <embed> elements.
|
||||
|
||||
// * FIRST TWO ROWS: <img> has width=auto height=auto
|
||||
// - Each <img> renders w/ height = 20% * body_height = .2*600 = 120px
|
||||
// - Synthesized viewBox has height = 20% * viewport_height = .2*120 = 24
|
||||
// - Each <img> renders w/ height = 150px (default)
|
||||
// - Synthesized viewBox has height = 20% * viewport_height = .2*150 = 30
|
||||
// - <img> & viewBox both get width=20px, from <svg> width attr
|
||||
svgParams.viewBox = [0, 0, 20, 24],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "20px", "120px");
|
||||
svgParams.viewBox = [0, 0, 20, 30],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "20px", "150px");
|
||||
|
||||
// * SECOND TWO ROWS: <img> has width=auto, height=20px
|
||||
// - <img> now renders w/ height = 20px (imposed by <img> height attr)
|
||||
|
|
@ -34,8 +34,8 @@
|
|||
// * THIRD TWO ROWS: <img> has width=30px height=auto
|
||||
// Calculations are as with "FIRST TWO ROWS", except <img> now imposes
|
||||
// width="30px".
|
||||
svgParams.viewBox = [0, 0, 20, 24],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "30px", "120px");
|
||||
svgParams.viewBox = [0, 0, 20, 30],
|
||||
appendSVGSubArrayWithParams(svgParams, "embed", "30px", "150px");
|
||||
|
||||
// * FOURTH TWO ROWS: <img> has width=30px height=20px
|
||||
// Calculations are as with "SECOND TWO ROWS", except <img> now imposes
|
||||
|
|
|
|||
|
|
@ -14,6 +14,8 @@ function m() {
|
|||
svg.style.position = 'absolute';
|
||||
svg.style.left = '0px';
|
||||
svg.style.top = '0px';
|
||||
svg.style.width = '100%';
|
||||
svg.style.height = '100%';
|
||||
document.body.appendChild(svg);
|
||||
|
||||
var rect = document.createElementNS(SVG_NS, "rect");
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ html, body, div {
|
|||
margin: 0;
|
||||
width: 100%;
|
||||
height: 100%; /* inline style override on the div below */
|
||||
background: red;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ document.addEventListener("MozReftestInvalidate", resize_div, false);
|
|||
|
||||
<div style="height:50%;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="5000" height="100%">
|
||||
<rect width="100%" height="100%" fill="lime"/>
|
||||
<rect width="100%" height="100%" fill="blue"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@ html, body, div {
|
|||
margin: 0;
|
||||
width: 100%; /* inline style override on the div below */
|
||||
height: 100%;
|
||||
background: red;
|
||||
background: white;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
|
|
@ -44,7 +44,7 @@ document.addEventListener("MozReftestInvalidate", resize_div, false);
|
|||
|
||||
<div style="width:50%;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="5000">
|
||||
<rect width="100%" height="100%" fill="lime"/>
|
||||
<rect width="100%" height="100%" fill="blue"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@
|
|||
<title>Test: width:auto; height:auto; width="49%" height="70px"</title>
|
||||
|
||||
<!--
|
||||
This testcase checks that the <object> element uses the intrinsic width and
|
||||
height of the embedded SVG. Since the intrinsic width is 49% and the
|
||||
intrinsic height is 70px, you should see a blue rectangle 49% wide by 70px
|
||||
high when viewing this file. You should not see any red.
|
||||
This testcase checks that the <object> element uses the intrinsic
|
||||
height of the embedded SVG, but ignores the percentage width. Since
|
||||
the intrinsic height is 70px, you should see a blue rectangle 300px
|
||||
(the magic default) wide by 70px high when viewing this file. You
|
||||
should not see any red.
|
||||
-->
|
||||
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -35,11 +35,11 @@ html, body {
|
|||
<!-- div to expand parent div to a computed height of 20px -->
|
||||
<div style="height:20px; background:red;"/>
|
||||
|
||||
<!-- absolutely positioned SVG - the implicity 100% percentage height
|
||||
<!-- absolutely positioned SVG - the explicit 100% percentage height
|
||||
should compute as a percentage of the parent div's computed height,
|
||||
not as a percentage of the body's height! I.e. no red should show.
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="position:absolute; top:0; width: 100%; height: 100%">
|
||||
<rect width="100%" height="100%" fill="red"/>
|
||||
<rect width="100%" height="20px" fill="lime"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ div {
|
|||
border: 1px solid blue;
|
||||
margin: 50px;
|
||||
width: 0;
|
||||
height: 49%;
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -10,10 +10,11 @@
|
|||
<title>Test: width:auto; height:auto; width="0" height="49%"</title>
|
||||
|
||||
<!--
|
||||
This testcase checks that the <object> element uses the intrinsic width and
|
||||
height of the embedded SVG. Since the intrinsic width is zero and the
|
||||
intrinsic height is 49%, you should see a 1px blue border around rectangle
|
||||
0px wide by 49% high when viewing this file. You should not see any red.
|
||||
This testcase checks that the <object> element uses the intrinsic
|
||||
width of the embedded SVG but ignores the (percentage) height.
|
||||
Since the intrinsic width is zero, you should see a 1px blue border
|
||||
around rectangle 0px wide by 150px high when viewing this file. You
|
||||
should not see any red.
|
||||
-->
|
||||
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -25,7 +25,7 @@ div {
|
|||
padding: 0;
|
||||
border: 1px solid blue;
|
||||
margin: 50px;
|
||||
width: 49%;
|
||||
width: 300px;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -10,11 +10,11 @@
|
|||
<title>Test: width:auto; height:auto; width="49%" height="0"</title>
|
||||
|
||||
<!--
|
||||
This testcase checks that the <object> element uses the intrinsic width and
|
||||
height of the embedded SVG. Since the intrinsic width is 49% and the
|
||||
intrinsic height is zero, you should see a 1px blue border around a
|
||||
rectangle 49% wide by 0px high when viewing this file. You should not see
|
||||
any red.
|
||||
This testcase checks that the <object> element uses the intrinsic
|
||||
height of the embedded SVG, but ignores the percentage intrinsic
|
||||
width. Since the intrinsic height is zero, you should see a 1px blue
|
||||
border around a rectangle 300px wide by 0px high when viewing this
|
||||
file. You should not see any red.
|
||||
-->
|
||||
|
||||
<style type="text/css">
|
||||
|
|
|
|||
|
|
@ -303,8 +303,10 @@ random-if(Android) == object--auto-auto--px-px.html object--auto-auto--px
|
|||
|
||||
== dynamic--inline-css-height.xhtml pass.svg
|
||||
== dynamic--inline-css-width.xhtml pass.svg
|
||||
== dynamic--inline-resize-cb-height.xhtml pass.svg
|
||||
== dynamic--inline-resize-cb-width.xhtml pass.svg
|
||||
# These two don't have a whole lot of point anymore now that the meaning
|
||||
# of percentages has changed.
|
||||
== dynamic--inline-resize-cb-height.xhtml standalone-sanity-height-150px.svg
|
||||
== dynamic--inline-resize-cb-width.xhtml standalone-sanity-width-300px.svg
|
||||
skip == dynamic--inline-resize-window-height.xhtml pass.svg # XXX breaks the reftest run as the window height somehow is not restored
|
||||
skip == dynamic--inline-resize-window-width.xhtml pass.svg # Fails way too much
|
||||
fails == dynamic--object-svg-unloaded.xhtml pass.svg
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<title>Test percentages dimensions for SVG inside a foreignObject</title>
|
||||
|
||||
<foreignObject width="50%" height="50%">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
|
||||
<ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
|
||||
</svg>
|
||||
</foreignObject>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 911 B После Ширина: | Высота: | Размер: 918 B |
|
|
@ -10,7 +10,7 @@
|
|||
|
||||
<foreignObject width="50%" height="50%">
|
||||
<div xmlns="http://www.w3.org/1999/xhtml" style="width:100%;height:100%;">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="50%" height="50%">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="width: 50%; height: 50%">
|
||||
<ellipse cx="50%" cy="50%" rx="50%" ry="50%" fill="blue"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
|
|
|||
|
До Ширина: | Высота: | Размер: 1009 B После Ширина: | Высота: | Размер: 1016 B |
|
|
@ -16,7 +16,7 @@
|
|||
<div style="height:200px; width:100px;"/>
|
||||
<span class="unit" style="background:lime;"></span>
|
||||
</span>
|
||||
<svg:svg height="0">
|
||||
<svg:svg height="0" style="display: block">
|
||||
<!-- use an empty g to force clipPath-html-06.xhtml to load before onload -->
|
||||
<svg:use xlink:href="clipPath-html-06.xhtml#empty" />
|
||||
</svg:svg>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
<span class="unit" style="background:lime;"></span>
|
||||
</span>
|
||||
|
||||
<svg:svg height="0">
|
||||
<svg:svg height="0" style="display: block">
|
||||
<!-- so that other documents can svg:use this one and force it to
|
||||
load before onload -->
|
||||
<svg:g id="empty" />
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<head>
|
||||
<title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
|
||||
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
|
||||
<style>svg { position: absolute; top: 0; left: 0 }</style>
|
||||
<style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<head>
|
||||
<title>Test that using elements from conditional-failing outer 'svg' elements works</title>
|
||||
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
|
||||
<style>svg { position: absolute; top: 0; left: 0 }</style>
|
||||
<style>svg { position: absolute; top: 0; left: 0; height: 100%; width: 100% }</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<head>
|
||||
<title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
|
||||
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
|
||||
<style>svg { position: absolute; top: 0; left: 0 }</style>
|
||||
<style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
|
||||
</head>
|
||||
<body onload="document.getElementById('a').setAttribute('requiredExtensions', 'x')">
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<head>
|
||||
<title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
|
||||
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
|
||||
<style>svg { position: absolute; top: 0; left: 0 }</style>
|
||||
<style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
|
||||
</head>
|
||||
<body onload="document.getElementById('a').removeAttribute('requiredExtensions')">
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<head>
|
||||
<title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
|
||||
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
|
||||
<style>svg { position: absolute; top: 0; left: 0 }</style>
|
||||
<style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
|
||||
</head>
|
||||
<body onload="document.getElementById('a').setAttribute('requiredFeatures', 'x')">
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
<head>
|
||||
<title>Test that conditional processing attributes on outer 'svg' elements are honored</title>
|
||||
<!-- https://bugzilla.mozilla.org/show_bug.cgi?id=615146 -->
|
||||
<style>svg { position: absolute; top: 0; left: 0 }</style>
|
||||
<style>svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>
|
||||
</head>
|
||||
<body onload="document.getElementById('a').setAttribute('requiredFeatures', 'http://www.w3.org/TR/SVG11/feature#Gradient')">
|
||||
|
||||
|
|
|
|||
|
|
@ -248,21 +248,13 @@ nsSVGOuterSVGFrame::GetIntrinsicSize()
|
|||
nsSVGLength2 &width = content->mLengthAttributes[nsSVGSVGElement::WIDTH];
|
||||
nsSVGLength2 &height = content->mLengthAttributes[nsSVGSVGElement::HEIGHT];
|
||||
|
||||
if (width.IsPercentage()) {
|
||||
float val = width.GetAnimValInSpecifiedUnits() / 100.0f;
|
||||
if (val < 0.0f) val = 0.0f;
|
||||
intrinsicSize.width.SetPercentValue(val);
|
||||
} else {
|
||||
if (!width.IsPercentage()) {
|
||||
nscoord val = nsPresContext::CSSPixelsToAppUnits(width.GetAnimValue(content));
|
||||
if (val < 0) val = 0;
|
||||
intrinsicSize.width.SetCoordValue(val);
|
||||
}
|
||||
|
||||
if (height.IsPercentage()) {
|
||||
float val = height.GetAnimValInSpecifiedUnits() / 100.0f;
|
||||
if (val < 0.0f) val = 0.0f;
|
||||
intrinsicSize.height.SetPercentValue(val);
|
||||
} else {
|
||||
if (!height.IsPercentage()) {
|
||||
nscoord val = nsPresContext::CSSPixelsToAppUnits(height.GetAnimValue(content));
|
||||
if (val < 0) val = 0;
|
||||
intrinsicSize.height.SetCoordValue(val);
|
||||
|
|
@ -318,16 +310,52 @@ nsSVGOuterSVGFrame::ComputeSize(nsRenderingContext *aRenderingContext,
|
|||
{
|
||||
nsSVGSVGElement* content = static_cast<nsSVGSVGElement*>(mContent);
|
||||
|
||||
if ((content->HasValidViewbox() || content->ShouldSynthesizeViewBox()) &&
|
||||
(IsRootOfImage() || IsRootOfReplacedElementSubDoc())) {
|
||||
// The embedding element has done the replaced element sizing, using our
|
||||
// intrinsic dimensions as necessary. We just need to fill the viewport.
|
||||
return aCBSize;
|
||||
IntrinsicSize intrinsicSize = GetIntrinsicSize();
|
||||
|
||||
if (!mContent->GetParent()) {
|
||||
if (IsRootOfImage() || IsRootOfReplacedElementSubDoc()) {
|
||||
// The embedding element has done the replaced element sizing,
|
||||
// using our intrinsic dimensions as necessary. We just need to
|
||||
// fill the viewport.
|
||||
return aCBSize;
|
||||
} else {
|
||||
// We're the root of a browsing context, so we need to honor
|
||||
// widths and heights in percentages. (GetIntrinsicSize() doesn't
|
||||
// report these since there's no such thing as a percentage
|
||||
// intrinsic size.)
|
||||
nsSVGLength2 &width =
|
||||
content->mLengthAttributes[nsSVGSVGElement::WIDTH];
|
||||
if (width.IsPercentage()) {
|
||||
NS_ABORT_IF_FALSE(intrinsicSize.width.GetUnit() == eStyleUnit_None,
|
||||
"GetIntrinsicSize should have reported no "
|
||||
"intrinsic width");
|
||||
float val = width.GetAnimValInSpecifiedUnits() / 100.0f;
|
||||
if (val < 0.0f) val = 0.0f;
|
||||
intrinsicSize.width.SetCoordValue(val * aCBSize.width);
|
||||
}
|
||||
|
||||
nsSVGLength2 &height =
|
||||
content->mLengthAttributes[nsSVGSVGElement::HEIGHT];
|
||||
NS_ABORT_IF_FALSE(aCBSize.height != NS_AUTOHEIGHT,
|
||||
"root should not have auto-height containing block");
|
||||
if (height.IsPercentage()) {
|
||||
NS_ABORT_IF_FALSE(intrinsicSize.height.GetUnit() == eStyleUnit_None,
|
||||
"GetIntrinsicSize should have reported no "
|
||||
"intrinsic height");
|
||||
float val = height.GetAnimValInSpecifiedUnits() / 100.0f;
|
||||
if (val < 0.0f) val = 0.0f;
|
||||
intrinsicSize.height.SetCoordValue(val * aCBSize.height);
|
||||
}
|
||||
NS_ABORT_IF_FALSE(intrinsicSize.height.GetUnit() == eStyleUnit_Coord &&
|
||||
intrinsicSize.width.GetUnit() == eStyleUnit_Coord,
|
||||
"We should have just handled the only situation where"
|
||||
"we lack an intrinsic height or width.");
|
||||
}
|
||||
}
|
||||
|
||||
return nsLayoutUtils::ComputeSizeWithIntrinsicDimensions(
|
||||
aRenderingContext, this,
|
||||
GetIntrinsicSize(), GetIntrinsicRatio(), aCBSize,
|
||||
intrinsicSize, GetIntrinsicRatio(), aCBSize,
|
||||
aMargin, aBorder, aPadding);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<!DOCTYPE html>
|
||||
<html style="width:100%;height:100%;margin:0;border:0;overflow:hidden">
|
||||
<body style="width:100%;height:100%;margin:0;border:0;overflow:hidden">
|
||||
<svg>
|
||||
<svg style="width:100%;height:100%">
|
||||
<rect height="100%" width="100%" fill="red"/>
|
||||
<foreignObject>
|
||||
<html>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче