зеркало из https://github.com/mozilla/gecko-dev.git
Bug 609714 - Properly compute background image size for vector background images lacking intrinsic sizes or an intrinsic aspect ratio. r=dholbert, r=dbaron
--HG-- extra : rebase_source : 9b018973a13a50f7616cac2a369bc3a61ccd5927
This commit is contained in:
Jeff Walden
Родитель
623b6b30ee
Коммит
287bf75e80
|
|
@ -108,10 +108,12 @@ public:
|
|||
*/
|
||||
PRBool PrepareImage();
|
||||
/**
|
||||
* @return the image size in appunits. CSS gradient images don't have an
|
||||
* intrinsic size so we have to pass in a default that they will use.
|
||||
* @return the image size in appunits when rendered, after accounting for the
|
||||
* background positioning area, background-size, and the image's intrinsic
|
||||
* dimensions (if any).
|
||||
*/
|
||||
nsSize ComputeSize(const nsSize& aDefault);
|
||||
nsSize ComputeSize(const nsStyleBackground::Size& aLayerSize,
|
||||
const nsSize& aBgPositioningArea);
|
||||
/**
|
||||
* Draws the image to the target rendering context.
|
||||
* @see nsLayoutUtils::DrawImage() for other parameters
|
||||
|
|
@ -124,6 +126,29 @@ public:
|
|||
const nsRect& aDirty);
|
||||
|
||||
private:
|
||||
/*
|
||||
* Compute the "unscaled" dimensions of the image in aUnscaled{Width,Height}
|
||||
* and aRatio. Whether the image has a height and width are indicated by
|
||||
* aHaveWidth and aHaveHeight. If the image doesn't have a ratio, aRatio will
|
||||
* be (0, 0).
|
||||
*/
|
||||
void ComputeUnscaledDimensions(const nsSize& aBgPositioningArea,
|
||||
nscoord& aUnscaledWidth, bool& aHaveWidth,
|
||||
nscoord& aUnscaledHeight, bool& aHaveHeight,
|
||||
nsSize& aRatio);
|
||||
|
||||
/*
|
||||
* Using the previously-computed unscaled width and height (if each are
|
||||
* valid, as indicated by aHaveWidth/aHaveHeight), compute the size at which
|
||||
* the image should actually render.
|
||||
*/
|
||||
nsSize
|
||||
ComputeDrawnSize(const nsStyleBackground::Size& aLayerSize,
|
||||
const nsSize& aBgPositioningArea,
|
||||
nscoord aUnscaledWidth, bool aHaveWidth,
|
||||
nscoord aUnscaledHeight, bool aHaveHeight,
|
||||
const nsSize& aIntrinsicRatio);
|
||||
|
||||
nsIFrame* mForFrame;
|
||||
const nsStyleImage* mImage;
|
||||
nsStyleImageType mType;
|
||||
|
|
@ -132,7 +157,7 @@ private:
|
|||
nsIFrame* mPaintServerFrame;
|
||||
nsLayoutUtils::SurfaceFromElementResult mImageElementSurface;
|
||||
PRBool mIsReady;
|
||||
nsSize mSize;
|
||||
nsSize mSize; // unscaled size of the image, in app units
|
||||
PRUint32 mFlags;
|
||||
};
|
||||
|
||||
|
|
@ -2432,27 +2457,6 @@ nsCSSRendering::PaintBackgroundWithSC(nsPresContext* aPresContext,
|
|||
}
|
||||
}
|
||||
|
||||
static inline float
|
||||
ScaleDimension(const nsStyleBackground::Size::Dimension& aDimension,
|
||||
PRUint8 aType,
|
||||
nscoord aLength, nscoord aAvailLength)
|
||||
{
|
||||
switch (aType) {
|
||||
case nsStyleBackground::Size::eLengthPercentage:
|
||||
// negative values could result from calc()
|
||||
return NS_MAX(double(aDimension.mPercent) * double(aAvailLength) +
|
||||
double(aDimension.mLength),
|
||||
0.0) /
|
||||
double(aLength);
|
||||
default:
|
||||
NS_ABORT_IF_FALSE(PR_FALSE, "bad aDimension.mType");
|
||||
return 1.0f;
|
||||
case nsStyleBackground::Size::eAuto:
|
||||
NS_ABORT_IF_FALSE(PR_FALSE, "aDimension.mType == eAuto isn't handled");
|
||||
return 1.0f;
|
||||
}
|
||||
}
|
||||
|
||||
static inline PRBool
|
||||
IsTransformed(nsIFrame* aForFrame, nsIFrame* aTopFrame)
|
||||
{
|
||||
|
|
@ -2647,52 +2651,12 @@ PrepareBackgroundLayer(nsPresContext* aPresContext,
|
|||
}
|
||||
}
|
||||
|
||||
nsSize imageSize = state.mImageRenderer.ComputeSize(bgPositioningArea.Size());
|
||||
if (imageSize.width <= 0 || imageSize.height <= 0)
|
||||
return state;
|
||||
|
||||
// Scale the image as specified for background-size and as required for
|
||||
// proper background positioning when background-position is defined with
|
||||
// percentages.
|
||||
float scaleX, scaleY;
|
||||
switch (aLayer.mSize.mWidthType) {
|
||||
case nsStyleBackground::Size::eContain:
|
||||
case nsStyleBackground::Size::eCover: {
|
||||
float scaleFitX = double(bgPositioningArea.width) / imageSize.width;
|
||||
float scaleFitY = double(bgPositioningArea.height) / imageSize.height;
|
||||
if (aLayer.mSize.mWidthType == nsStyleBackground::Size::eCover) {
|
||||
scaleX = scaleY = NS_MAX(scaleFitX, scaleFitY);
|
||||
} else {
|
||||
scaleX = scaleY = NS_MIN(scaleFitX, scaleFitY);
|
||||
}
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
if (aLayer.mSize.mWidthType == nsStyleBackground::Size::eAuto) {
|
||||
if (aLayer.mSize.mHeightType == nsStyleBackground::Size::eAuto) {
|
||||
scaleX = scaleY = 1.0f;
|
||||
} else {
|
||||
scaleX = scaleY =
|
||||
ScaleDimension(aLayer.mSize.mHeight, aLayer.mSize.mHeightType,
|
||||
imageSize.height, bgPositioningArea.height);
|
||||
}
|
||||
} else {
|
||||
if (aLayer.mSize.mHeightType == nsStyleBackground::Size::eAuto) {
|
||||
scaleX = scaleY =
|
||||
ScaleDimension(aLayer.mSize.mWidth, aLayer.mSize.mWidthType,
|
||||
imageSize.width, bgPositioningArea.width);
|
||||
} else {
|
||||
scaleX = ScaleDimension(aLayer.mSize.mWidth, aLayer.mSize.mWidthType,
|
||||
imageSize.width, bgPositioningArea.width);
|
||||
scaleY = ScaleDimension(aLayer.mSize.mHeight, aLayer.mSize.mHeightType,
|
||||
imageSize.height, bgPositioningArea.height);
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
imageSize.width = NSCoordSaturatingNonnegativeMultiply(imageSize.width, scaleX);
|
||||
imageSize.height = NSCoordSaturatingNonnegativeMultiply(imageSize.height, scaleY);
|
||||
nsSize imageSize = state.mImageRenderer.ComputeSize(aLayer.mSize, bgPositioningArea.Size());
|
||||
if (imageSize.width <= 0 || imageSize.height <= 0)
|
||||
return state;
|
||||
|
||||
// Compute the position of the background now that the background's size is
|
||||
// determined.
|
||||
|
|
@ -3861,8 +3825,33 @@ ImageRenderer::PrepareImage()
|
|||
return mIsReady;
|
||||
}
|
||||
|
||||
nsSize
|
||||
ImageRenderer::ComputeSize(const nsSize& aDefault)
|
||||
enum FitType { CONTAIN, COVER };
|
||||
|
||||
static nsSize
|
||||
ComputeContainCoverSizeFromRatio(const nsSize& aBgPositioningArea,
|
||||
const nsSize& aRatio, FitType fitType)
|
||||
{
|
||||
NS_ABORT_IF_FALSE(aRatio.width > 0, "width division by zero");
|
||||
NS_ABORT_IF_FALSE(aRatio.height > 0, "height division by zero");
|
||||
|
||||
float scaleX = double(aBgPositioningArea.width) / aRatio.width;
|
||||
float scaleY = double(aBgPositioningArea.height) / aRatio.height;
|
||||
nsSize size;
|
||||
if ((fitType == CONTAIN) == (scaleX < scaleY)) {
|
||||
size.width = aBgPositioningArea.width;
|
||||
size.height = NSCoordSaturatingNonnegativeMultiply(aRatio.height, scaleX);
|
||||
} else {
|
||||
size.width = NSCoordSaturatingNonnegativeMultiply(aRatio.width, scaleY);
|
||||
size.height = aBgPositioningArea.height;
|
||||
}
|
||||
return size;
|
||||
}
|
||||
|
||||
void
|
||||
ImageRenderer::ComputeUnscaledDimensions(const nsSize& aBgPositioningArea,
|
||||
nscoord& aUnscaledWidth, bool& aHaveWidth,
|
||||
nscoord& aUnscaledHeight, bool& aHaveHeight,
|
||||
nsSize& aRatio)
|
||||
{
|
||||
NS_ASSERTION(mIsReady, "Ensure PrepareImage() has returned true "
|
||||
"before calling me");
|
||||
|
|
@ -3871,28 +3860,35 @@ ImageRenderer::ComputeSize(const nsSize& aDefault)
|
|||
case eStyleImageType_Image:
|
||||
{
|
||||
nsIntSize imageIntSize;
|
||||
PRBool gotHeight, gotWidth;
|
||||
nsLayoutUtils::ComputeSizeForDrawing(mImageContainer, imageIntSize,
|
||||
gotWidth, gotHeight);
|
||||
|
||||
mSize.width = gotWidth ?
|
||||
nsPresContext::CSSPixelsToAppUnits(imageIntSize.width) :
|
||||
aDefault.width;
|
||||
|
||||
mSize.height = gotHeight ?
|
||||
nsPresContext::CSSPixelsToAppUnits(imageIntSize.height) :
|
||||
aDefault.height;
|
||||
|
||||
break;
|
||||
aRatio, aHaveWidth, aHaveHeight);
|
||||
if (aHaveWidth) {
|
||||
aUnscaledWidth = nsPresContext::CSSPixelsToAppUnits(imageIntSize.width);
|
||||
}
|
||||
if (aHaveHeight) {
|
||||
aUnscaledHeight = nsPresContext::CSSPixelsToAppUnits(imageIntSize.height);
|
||||
}
|
||||
return;
|
||||
}
|
||||
case eStyleImageType_Gradient:
|
||||
mSize = aDefault;
|
||||
break;
|
||||
// Per <http://dev.w3.org/csswg/css3-images/#gradients>, gradients have no
|
||||
// intrinsic dimensions.
|
||||
aHaveWidth = aHaveHeight = false;
|
||||
aRatio = nsSize(0, 0);
|
||||
return;
|
||||
case eStyleImageType_Element:
|
||||
{
|
||||
// XXX element() should have the width/height of the referenced element,
|
||||
// and that element's ratio, if it matches. If it doesn't match, it
|
||||
// should have no width/height or ratio. See element() in CSS3:
|
||||
// <http://dev.w3.org/csswg/css3-images/#element-reference>.
|
||||
// Make sure to change nsStyleBackground::Size::DependsOnFrameSize
|
||||
// when fixing this!
|
||||
aHaveWidth = aHaveHeight = true;
|
||||
nsSize size;
|
||||
if (mPaintServerFrame) {
|
||||
if (mPaintServerFrame->IsFrameOfType(nsIFrame::eSVG)) {
|
||||
mSize = aDefault;
|
||||
size = aBgPositioningArea;
|
||||
} else {
|
||||
// The intrinsic image size for a generic nsIFrame paint server is
|
||||
// the frame's bbox size rounded to device pixels.
|
||||
|
|
@ -3900,25 +3896,216 @@ ImageRenderer::ComputeSize(const nsSize& aDefault)
|
|||
mForFrame->PresContext()->AppUnitsPerDevPixel();
|
||||
nsRect rect =
|
||||
nsSVGIntegrationUtils::GetNonSVGUserSpace(mPaintServerFrame);
|
||||
nsRect size = rect - rect.TopLeft();
|
||||
nsIntRect rounded = size.ToNearestPixels(appUnitsPerDevPixel);
|
||||
mSize = rounded.ToAppUnits(appUnitsPerDevPixel).Size();
|
||||
nsRect rectSize = rect - rect.TopLeft();
|
||||
nsIntRect rounded = rectSize.ToNearestPixels(appUnitsPerDevPixel);
|
||||
size = rounded.ToAppUnits(appUnitsPerDevPixel).Size();
|
||||
}
|
||||
} else {
|
||||
NS_ASSERTION(mImageElementSurface.mSurface, "Surface should be ready.");
|
||||
gfxIntSize size = mImageElementSurface.mSize;
|
||||
mSize.width = nsPresContext::CSSPixelsToAppUnits(size.width);
|
||||
mSize.height = nsPresContext::CSSPixelsToAppUnits(size.height);
|
||||
gfxIntSize surfaceSize = mImageElementSurface.mSize;
|
||||
size.width = nsPresContext::CSSPixelsToAppUnits(surfaceSize.width);
|
||||
size.height = nsPresContext::CSSPixelsToAppUnits(surfaceSize.height);
|
||||
}
|
||||
break;
|
||||
aRatio = size;
|
||||
aUnscaledWidth = size.width;
|
||||
aUnscaledHeight = size.height;
|
||||
return;
|
||||
}
|
||||
case eStyleImageType_Null:
|
||||
default:
|
||||
mSize.SizeTo(0, 0);
|
||||
break;
|
||||
aHaveWidth = aHaveHeight = true;
|
||||
aUnscaledWidth = aUnscaledHeight = 0;
|
||||
aRatio = nsSize(0, 0);
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
nsSize
|
||||
ImageRenderer::ComputeDrawnSize(const nsStyleBackground::Size& aLayerSize,
|
||||
const nsSize& aBgPositioningArea,
|
||||
nscoord aUnscaledWidth, bool aHaveWidth,
|
||||
nscoord aUnscaledHeight, bool aHaveHeight,
|
||||
const nsSize& aIntrinsicRatio)
|
||||
{
|
||||
NS_ABORT_IF_FALSE(aIntrinsicRatio.width >= 0,
|
||||
"image ratio with nonsense width");
|
||||
NS_ABORT_IF_FALSE(aIntrinsicRatio.height >= 0,
|
||||
"image ratio with nonsense height");
|
||||
|
||||
// Bail early if the image is empty.
|
||||
if ((aHaveWidth && aUnscaledWidth <= 0) ||
|
||||
(aHaveHeight && aUnscaledHeight <= 0)) {
|
||||
return nsSize(0, 0);
|
||||
}
|
||||
|
||||
return mSize;
|
||||
// If the image has an intrinsic ratio but either component of it is zero,
|
||||
// then the image would eventually scale to nothingness, so again we can bail.
|
||||
bool haveRatio = aIntrinsicRatio != nsSize(0, 0);
|
||||
if (haveRatio &&
|
||||
(aIntrinsicRatio.width == 0 || aIntrinsicRatio.height == 0)) {
|
||||
return nsSize(0, 0);
|
||||
}
|
||||
|
||||
// Easiest case: background-size completely specifies the size.
|
||||
if (aLayerSize.mWidthType == nsStyleBackground::Size::eLengthPercentage &&
|
||||
aLayerSize.mHeightType == nsStyleBackground::Size::eLengthPercentage) {
|
||||
return nsSize(aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea),
|
||||
aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea));
|
||||
}
|
||||
|
||||
// The harder cases: contain/cover.
|
||||
if (aLayerSize.mWidthType == nsStyleBackground::Size::eContain ||
|
||||
aLayerSize.mWidthType == nsStyleBackground::Size::eCover) {
|
||||
FitType fitType = aLayerSize.mWidthType == nsStyleBackground::Size::eCover
|
||||
? COVER
|
||||
: CONTAIN;
|
||||
if (!haveRatio) {
|
||||
// If we don't have an intrinsic ratio, then proportionally scaling to
|
||||
// either largest-fitting or smallest-covering size means scaling to the
|
||||
// background positioning area's size.
|
||||
return aBgPositioningArea;
|
||||
}
|
||||
|
||||
return ComputeContainCoverSizeFromRatio(aBgPositioningArea, aIntrinsicRatio,
|
||||
fitType);
|
||||
}
|
||||
|
||||
// Harder case: all-auto.
|
||||
if (aLayerSize.mWidthType == nsStyleBackground::Size::eAuto &&
|
||||
aLayerSize.mHeightType == nsStyleBackground::Size::eAuto) {
|
||||
// If the image has all its dimensions, we're done.
|
||||
if (aHaveWidth && aHaveHeight)
|
||||
return nsSize(aUnscaledWidth, aUnscaledHeight);
|
||||
|
||||
// If the image has no dimensions, treat it as if for contain.
|
||||
if (!aHaveWidth && !aHaveHeight) {
|
||||
if (!haveRatio) {
|
||||
// As above, max-contain without a ratio means the whole area.
|
||||
return aBgPositioningArea;
|
||||
}
|
||||
|
||||
// Otherwise determine size using the intrinsic ratio.
|
||||
return ComputeContainCoverSizeFromRatio(aBgPositioningArea,
|
||||
aIntrinsicRatio, CONTAIN);
|
||||
}
|
||||
|
||||
NS_ABORT_IF_FALSE(aHaveWidth != aHaveHeight, "logic error");
|
||||
|
||||
if (haveRatio) {
|
||||
// Resolve missing dimensions using the intrinsic ratio.
|
||||
nsSize size;
|
||||
if (aHaveWidth) {
|
||||
size.width = aUnscaledWidth;
|
||||
size.height =
|
||||
NSCoordSaturatingNonnegativeMultiply(size.width,
|
||||
double(aIntrinsicRatio.height) /
|
||||
aIntrinsicRatio.width);
|
||||
} else {
|
||||
size.height = aUnscaledHeight;
|
||||
size.width =
|
||||
NSCoordSaturatingNonnegativeMultiply(size.height,
|
||||
double(aIntrinsicRatio.width) /
|
||||
aIntrinsicRatio.height);
|
||||
}
|
||||
|
||||
return size;
|
||||
}
|
||||
|
||||
// Without a ratio we must fall back to the relevant dimension of the
|
||||
// area to determine the missing dimension.
|
||||
return aHaveWidth ? nsSize(aUnscaledWidth, aBgPositioningArea.height)
|
||||
: nsSize(aBgPositioningArea.width, aUnscaledHeight);
|
||||
}
|
||||
|
||||
// Hardest case: only one auto. Prepare to negotiate amongst intrinsic
|
||||
// dimensions, intrinsic ratio, *and* a specific background-size!
|
||||
NS_ABORT_IF_FALSE((aLayerSize.mWidthType == nsStyleBackground::Size::eAuto) !=
|
||||
(aLayerSize.mHeightType == nsStyleBackground::Size::eAuto),
|
||||
"logic error");
|
||||
|
||||
bool isAutoWidth = aLayerSize.mWidthType == nsStyleBackground::Size::eAuto;
|
||||
|
||||
if (haveRatio) {
|
||||
// Use the specified dimension, and compute the other from the ratio.
|
||||
NS_ABORT_IF_FALSE(aIntrinsicRatio.width > 0,
|
||||
"ratio width out of sync with width?");
|
||||
NS_ABORT_IF_FALSE(aIntrinsicRatio.height > 0,
|
||||
"ratio height out of sync with width?");
|
||||
nsSize size;
|
||||
if (isAutoWidth) {
|
||||
size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
|
||||
size.width =
|
||||
NSCoordSaturatingNonnegativeMultiply(size.height,
|
||||
double(aIntrinsicRatio.width) /
|
||||
aIntrinsicRatio.height);
|
||||
} else {
|
||||
size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
|
||||
size.height =
|
||||
NSCoordSaturatingNonnegativeMultiply(size.width,
|
||||
double(aIntrinsicRatio.height) /
|
||||
aIntrinsicRatio.width);
|
||||
}
|
||||
|
||||
return size;
|
||||
}
|
||||
|
||||
NS_ABORT_IF_FALSE(!(aHaveWidth && aHaveHeight),
|
||||
"if we have width and height, we must have had a ratio");
|
||||
|
||||
// We have a specified dimension and an auto dimension, with no ratio to
|
||||
// preserve. A specified dimension trumps all, so use that. For the other
|
||||
// dimension, resolve auto to the intrinsic dimension (if present) or to 100%.
|
||||
nsSize size;
|
||||
if (isAutoWidth) {
|
||||
size.width = aHaveWidth ? aUnscaledWidth : aBgPositioningArea.width;
|
||||
size.height = aLayerSize.ResolveHeightLengthPercentage(aBgPositioningArea);
|
||||
} else {
|
||||
size.width = aLayerSize.ResolveWidthLengthPercentage(aBgPositioningArea);
|
||||
size.height = aHaveHeight ? aUnscaledHeight : aBgPositioningArea.height;
|
||||
}
|
||||
|
||||
return size;
|
||||
}
|
||||
|
||||
/*
|
||||
* The size returned by this method differs from the value of mSize, which this
|
||||
* method also computes, in that mSize is the image's "preferred" size for this
|
||||
* particular rendering, while the size returned here is the actual rendered
|
||||
* size after accounting for background-size. The preferred size is most often
|
||||
* the image's intrinsic dimensions. But for images with incomplete intrinsic
|
||||
* dimensions, the preferred size varies, depending on the background
|
||||
* positioning area, the specified background-size, and the intrinsic ratio and
|
||||
* dimensions of the image (if it has them).
|
||||
*
|
||||
* This distinction is necessary because the components of a vector image are
|
||||
* specified with respect to its preferred size for a rendering situation, not
|
||||
* to its actual rendered size after background-size is applied. For example,
|
||||
* consider a 4px wide vector image with no height which contains a left-aligned
|
||||
* 2px wide black rectangle with height 100%. If the background-size width is
|
||||
* auto (or 4px), the vector image will render 4px wide, and the black rectangle
|
||||
* will be 2px wide. If the background-size width is 8px, the vector image will
|
||||
* render 8px wide, and the black rectangle will be 4px wide -- *not* 2px wide.
|
||||
* In both cases mSize.width will be 4px; but in the first case the returned
|
||||
* width will be 4px, while in the second case the returned width will be 8px.
|
||||
*/
|
||||
nsSize
|
||||
ImageRenderer::ComputeSize(const nsStyleBackground::Size& aLayerSize,
|
||||
const nsSize& aBgPositioningArea)
|
||||
{
|
||||
bool haveWidth, haveHeight;
|
||||
nsSize ratio;
|
||||
nscoord unscaledWidth, unscaledHeight;
|
||||
ComputeUnscaledDimensions(aBgPositioningArea,
|
||||
unscaledWidth, haveWidth,
|
||||
unscaledHeight, haveHeight,
|
||||
ratio);
|
||||
nsSize drawnSize = ComputeDrawnSize(aLayerSize, aBgPositioningArea,
|
||||
unscaledWidth, haveWidth,
|
||||
unscaledHeight, haveHeight,
|
||||
ratio);
|
||||
mSize.width = haveWidth ? unscaledWidth : drawnSize.width;
|
||||
mSize.height = haveHeight ? unscaledHeight : drawnSize.height;
|
||||
return drawnSize;
|
||||
}
|
||||
|
||||
void
|
||||
|
|
@ -3947,7 +4134,9 @@ ImageRenderer::Draw(nsPresContext* aPresContext,
|
|||
PRUint32 drawFlags = (mFlags & FLAG_SYNC_DECODE_IMAGES)
|
||||
? (PRUint32) imgIContainer::FLAG_SYNC_DECODE
|
||||
: (PRUint32) imgIContainer::FLAG_NONE;
|
||||
nsLayoutUtils::DrawImage(&aRenderingContext, mImageContainer,
|
||||
nsLayoutUtils::DrawBackgroundImage(&aRenderingContext, mImageContainer,
|
||||
nsIntSize(nsPresContext::AppUnitsToIntCSSPixels(mSize.width),
|
||||
nsPresContext::AppUnitsToIntCSSPixels(mSize.height)),
|
||||
graphicsFilter,
|
||||
aDest, aFill, aAnchor, aDirty, drawFlags);
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -3569,46 +3569,47 @@ nsLayoutUtils::DrawSingleImage(nsRenderingContext* aRenderingContext,
|
|||
/* static */ void
|
||||
nsLayoutUtils::ComputeSizeForDrawing(imgIContainer *aImage,
|
||||
nsIntSize& aImageSize, /*outparam*/
|
||||
PRBool& aGotWidth, /*outparam*/
|
||||
PRBool& aGotHeight /*outparam*/)
|
||||
nsSize& aIntrinsicRatio, /*outparam*/
|
||||
bool& aGotWidth, /*outparam*/
|
||||
bool& aGotHeight /*outparam*/)
|
||||
{
|
||||
aGotWidth = NS_SUCCEEDED(aImage->GetWidth(&aImageSize.width));
|
||||
aGotHeight = NS_SUCCEEDED(aImage->GetHeight(&aImageSize.height));
|
||||
|
||||
if ((aGotWidth && aGotHeight) || // Trivial success!
|
||||
(!aGotWidth && !aGotHeight)) { // Trivial failure!
|
||||
if (aGotWidth && aGotHeight) {
|
||||
aIntrinsicRatio = nsSize(aImageSize.width, aImageSize.height);
|
||||
return;
|
||||
}
|
||||
|
||||
// If we get here, we succeeded at querying *either* the width *or* the
|
||||
// height, but not both.
|
||||
NS_ASSERTION(aImage->GetType() == imgIContainer::TYPE_VECTOR,
|
||||
"GetWidth and GetHeight should only fail for vector images");
|
||||
|
||||
nsIFrame* rootFrame = aImage->GetRootLayoutFrame();
|
||||
NS_ASSERTION(rootFrame,
|
||||
"We should have a VectorImage, which should have a rootFrame");
|
||||
|
||||
// This falls back on failure, if we somehow end up without a rootFrame.
|
||||
nsSize ratio = rootFrame ? rootFrame->GetIntrinsicRatio() : nsSize(0,0);
|
||||
if (!aGotWidth) { // Have height, missing width
|
||||
if (ratio.height != 0) { // don't divide by zero
|
||||
aImageSize.width = NSToCoordRound(aImageSize.height *
|
||||
float(ratio.width) /
|
||||
float(ratio.height));
|
||||
aGotWidth = PR_TRUE;
|
||||
}
|
||||
} else { // Have width, missing height
|
||||
if (ratio.width != 0) { // don't divide by zero
|
||||
aImageSize.height = NSToCoordRound(aImageSize.width *
|
||||
float(ratio.height) /
|
||||
float(ratio.width));
|
||||
aGotHeight = PR_TRUE;
|
||||
}
|
||||
// If we failed to get width or height, we either have a vector image and
|
||||
// should return its intrinsic ratio, or we hit an error (say, because the
|
||||
// image failed to load or couldn't be decoded) and should return zero size.
|
||||
if (nsIFrame* rootFrame = aImage->GetRootLayoutFrame()) {
|
||||
aIntrinsicRatio = rootFrame->GetIntrinsicRatio();
|
||||
} else {
|
||||
aGotWidth = aGotHeight = true;
|
||||
aImageSize = nsIntSize(0, 0);
|
||||
aIntrinsicRatio = nsSize(0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* static */ nsresult
|
||||
nsLayoutUtils::DrawBackgroundImage(nsRenderingContext* aRenderingContext,
|
||||
imgIContainer* aImage,
|
||||
const nsIntSize& aImageSize,
|
||||
GraphicsFilter aGraphicsFilter,
|
||||
const nsRect& aDest,
|
||||
const nsRect& aFill,
|
||||
const nsPoint& aAnchor,
|
||||
const nsRect& aDirty,
|
||||
PRUint32 aImageFlags)
|
||||
{
|
||||
return DrawImageInternal(aRenderingContext, aImage, aGraphicsFilter,
|
||||
aDest, aFill, aAnchor, aDirty,
|
||||
aImageSize, aImageFlags);
|
||||
}
|
||||
|
||||
/* static */ nsresult
|
||||
nsLayoutUtils::DrawImage(nsRenderingContext* aRenderingContext,
|
||||
imgIContainer* aImage,
|
||||
|
|
@ -3620,10 +3621,32 @@ nsLayoutUtils::DrawImage(nsRenderingContext* aRenderingContext,
|
|||
PRUint32 aImageFlags)
|
||||
{
|
||||
nsIntSize imageSize;
|
||||
PRBool gotHeight, gotWidth;
|
||||
ComputeSizeForDrawing(aImage, imageSize, gotWidth, gotHeight);
|
||||
nsSize imageRatio;
|
||||
bool gotHeight, gotWidth;
|
||||
ComputeSizeForDrawing(aImage, imageSize, imageRatio, gotWidth, gotHeight);
|
||||
|
||||
// XXX Dimensionless images shouldn't fall back to filled-area size -- the
|
||||
// caller should provide the image size, a la DrawBackgroundImage.
|
||||
if (gotWidth != gotHeight) {
|
||||
if (!gotWidth) {
|
||||
if (imageRatio.height != 0) {
|
||||
imageSize.width =
|
||||
NSCoordSaturatingNonnegativeMultiply(imageSize.height,
|
||||
float(imageRatio.width) /
|
||||
float(imageRatio.height));
|
||||
gotWidth = true;
|
||||
}
|
||||
} else {
|
||||
if (imageRatio.width != 0) {
|
||||
imageSize.height =
|
||||
NSCoordSaturatingNonnegativeMultiply(imageSize.width,
|
||||
float(imageRatio.height) /
|
||||
float(imageRatio.width));
|
||||
gotHeight = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// fallback size based on aFill.
|
||||
if (!gotWidth) {
|
||||
imageSize.width = nsPresContext::AppUnitsToIntCSSPixels(aFill.width);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1048,6 +1048,38 @@ public:
|
|||
* functions below is the type of the aImage argument.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Draw a background image. The image's dimensions are as specified in aDest;
|
||||
* the image itself is not consulted to determine a size.
|
||||
* See https://wiki.mozilla.org/Gecko:Image_Snapping_and_Rendering
|
||||
* @param aRenderingContext Where to draw the image, set up with an
|
||||
* appropriate scale and transform for drawing in
|
||||
* app units.
|
||||
* @param aImage The image.
|
||||
* @param aImageSize The unscaled size of the image being drawn.
|
||||
* (This might be the image's size if no scaling
|
||||
* occurs, or it might be the image's size if
|
||||
* the image is a vector image being rendered at
|
||||
* that size.)
|
||||
* @param aDest The position and scaled area where one copy of
|
||||
* the image should be drawn.
|
||||
* @param aFill The area to be filled with copies of the
|
||||
* image.
|
||||
* @param aAnchor A point in aFill which we will ensure is
|
||||
* pixel-aligned in the output.
|
||||
* @param aDirty Pixels outside this area may be skipped.
|
||||
* @param aImageFlags Image flags of the imgIContainer::FLAG_* variety
|
||||
*/
|
||||
static nsresult DrawBackgroundImage(nsRenderingContext* aRenderingContext,
|
||||
imgIContainer* aImage,
|
||||
const nsIntSize& aImageSize,
|
||||
GraphicsFilter aGraphicsFilter,
|
||||
const nsRect& aDest,
|
||||
const nsRect& aFill,
|
||||
const nsPoint& aAnchor,
|
||||
const nsRect& aDirty,
|
||||
PRUint32 aImageFlags);
|
||||
|
||||
/**
|
||||
* Draw an image.
|
||||
* See https://wiki.mozilla.org/Gecko:Image_Snapping_and_Rendering
|
||||
|
|
@ -1152,7 +1184,9 @@ public:
|
|||
* Given an imgIContainer, this method attempts to obtain an intrinsic
|
||||
* px-valued height & width for it. If the imgIContainer has a non-pixel
|
||||
* value for either height or width, this method tries to generate a pixel
|
||||
* value for that dimension using the intrinsic ratio (if available).
|
||||
* value for that dimension using the intrinsic ratio (if available). The
|
||||
* intrinsic ratio will be assigned to aIntrinsicRatio; if there's no
|
||||
* intrinsic ratio then (0, 0) will be assigned.
|
||||
*
|
||||
* This method will always set aGotWidth and aGotHeight to indicate whether
|
||||
* we were able to successfully obtain (or compute) a value for each
|
||||
|
|
@ -1164,8 +1198,9 @@ public:
|
|||
*/
|
||||
static void ComputeSizeForDrawing(imgIContainer* aImage,
|
||||
nsIntSize& aImageSize,
|
||||
PRBool& aGotWidth,
|
||||
PRBool& aGotHeight);
|
||||
nsSize& aIntrinsicRatio,
|
||||
bool& aGotWidth,
|
||||
bool& aGotHeight);
|
||||
|
||||
/**
|
||||
* Given a source area of an image (in appunits) and a destination area
|
||||
|
|
|
|||
|
|
@ -0,0 +1 @@
|
|||
== scaled-color-stop-position.html scaled-color-stop-position-ref.html
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Color stop positioning for scaled gradients as backgrounds reference</title>
|
||||
<style type="text/css">
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
width: 600px; height: 300px;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 400px; height: 300px;
|
||||
/* 250px stop is halfway along 500px diagonal */
|
||||
background-image: -moz-linear-gradient(top left, lime 0%, teal 250px, black 100%);
|
||||
background-image: linear-gradient(top left, lime 0%, teal 250px, black 100%);
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Color stop positioning for scaled gradients as backgrounds</title>
|
||||
<style type="text/css">
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
width: 600px; height: 300px;
|
||||
/* 250px stop is halfway along 500px diagonal */
|
||||
background-image: -moz-linear-gradient(top left, lime 0%, teal 250px, black 100%);
|
||||
background-image: linear-gradient(top left, lime 0%, teal 250px, black 100%);
|
||||
background-size: 400px auto;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/licenses/publicdomain/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Image with no intrinsic size</title>
|
||||
<rect width="100%" height="100%" fill="lime"/>
|
||||
</svg>
|
||||
|
До Ширина: | Высота: | Размер: 261 B |
|
|
@ -1,3 +1,6 @@
|
|||
include gradient/reftest.list
|
||||
include vector/reftest.list
|
||||
|
||||
== layers-stacking-order.xhtml layers-stacking-order-ref.xhtml
|
||||
== layers-layer-count-cascade-1.xhtml layers-layer-count-1-ref.xhtml
|
||||
== layers-layer-count-inheritance-1.xhtml layers-layer-count-1-ref.xhtml
|
||||
|
|
@ -101,13 +104,6 @@ fails-if(Android) == viewport-translucent-color-3.html viewport-translucent-colo
|
|||
# doesn't sample too far astray from the boundaries).
|
||||
fails == background-size-zoom-repeat.html background-size-zoom-repeat-ref.html
|
||||
|
||||
# background-size affects images without intrinsic dimensions specially; we may
|
||||
# not support such image formats right now, but when we do, we want
|
||||
# background-size to be changed accordingly, and hopefully these tests should
|
||||
# start failing when we do.
|
||||
fails == background-size-no-intrinsic-width-image.html background-size-no-intrinsic-width-image-ref.html
|
||||
fails == background-size-no-intrinsic-height-image.html background-size-no-intrinsic-height-image-ref.html
|
||||
|
||||
# -moz-default-background-color and -moz-default-color (bug 591341)
|
||||
== background-moz-default-background-color.html background-moz-default-background-color-ref.html
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title>
|
||||
<style type="text/css">
|
||||
#outer
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 100px; height: 700px;
|
||||
background-image: url(diagonal-scaled-fixed.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Scaled vector image without intrinsic dimensions as background, with rendering dependent on the diagonal</title>
|
||||
<style type="text/css">
|
||||
#outer
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 100px; height: 700px;
|
||||
background-image: url(diagonal-scaled.svg);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="100px" height="700px">
|
||||
<title>Vector image with intrinsic dimensions, reference for diagonal-scaled.svg</title>
|
||||
<rect y="0" width="100px" height="350px" fill="lime"/>
|
||||
<rect y="350px" width="100px" height="350px" fill="aqua"/>
|
||||
<rect y="175px" width="50px" height="350px" fill="fuchsia"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 467 B |
|
|
@ -0,0 +1,21 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Vector image without intrinsic dimensions with percentage stroke-width (proportional to the diagonal)</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
<!--
|
||||
A percent stroke-width is resolved with respect to:
|
||||
|
||||
d = sqrt(vh**2 + vw**2) / sqrt(2)
|
||||
|
||||
where vh/vw are the image viewport width/height. Because this image has no
|
||||
intrinsic dimensions or ratio, it expands to fill the entire background
|
||||
positioning area, so its width is 100px and its height is 700px. For those
|
||||
carefully-chosen dimensions, d = 500px, so 10% of that creates a 50px-wide
|
||||
rectangle, vertically centered and horizontally left-aligned in the image.
|
||||
-->
|
||||
<line x1="25%" y1="25%" x2="25%" y2="75%" stroke="fuchsia" stroke-width="10%"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 982 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 8 0"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with zero-width ratio, no dimensions</title>
|
||||
<rect y="0" width="100%" height="100%" fill="lime"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 336 B |
|
|
@ -0,0 +1,11 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px"
|
||||
viewBox="0 0 8 0"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with zero-height ratio, width</title>
|
||||
<rect y="0" width="100%" height="100%" fill="lime"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 346 B |
|
|
@ -0,0 +1,11 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px"
|
||||
viewBox="0 0 0 8"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with zero-width ratio, width</title>
|
||||
<rect y="0" width="100%" height="100%" fill="lime"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 345 B |
|
|
@ -0,0 +1,11 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px"
|
||||
viewBox="0 0 2147483647 1"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with non-percent width, omitted height, extreme viewbox</title>
|
||||
<rect y="0" width="100%" height="100%" fill="lime"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 381 B |
|
|
@ -0,0 +1,11 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
height="8px"
|
||||
viewBox="0 0 1 2147483647"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with omitted width, non-percent height, extreme viewbox</title>
|
||||
<rect y="0" width="100%" height="100%" fill="lime"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 382 B |
|
|
@ -0,0 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, empty</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>background-size: 32px auto; for image with no intrinsic height reference</title>
|
||||
<title>tall reference, lime fill</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 32px;
|
||||
height: 128px;
|
||||
background-color: lime;
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, empty</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, empty</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background: lime;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,30 @@
|
|||
== tall--contain--height.html ref-tall-empty.html
|
||||
== tall--contain--width.html ref-tall-empty.html
|
||||
== wide--contain--height.html ref-wide-empty.html
|
||||
== wide--contain--width.html ref-wide-empty.html
|
||||
|
||||
# Either OS X 32-bit or 10.5, judging from imprecise Tinderbox results, renders
|
||||
# these tests as empty boxes, not filled boxes. We don't really care about this
|
||||
# extreme edge case (the test exists more to test for safety against division by
|
||||
# zero), so there is no bug has been filed to fix it, although a patch would
|
||||
# probably be accepted.
|
||||
random-if(cocoaWidget) == tall--cover--height.html ref-tall-lime.html
|
||||
random-if(cocoaWidget) == tall--cover--width.html ref-tall-lime.html
|
||||
random-if(cocoaWidget) == wide--cover--height.html ref-wide-lime.html
|
||||
random-if(cocoaWidget) == wide--cover--width.html ref-wide-lime.html
|
||||
|
||||
== zero-height-ratio-contain.html ref-tall-empty.html
|
||||
== zero-height-ratio-cover.html ref-tall-empty.html
|
||||
== zero-height-ratio-auto-auto.html ref-tall-empty.html
|
||||
== zero-height-ratio-auto-5px.html ref-tall-empty.html
|
||||
== zero-height-ratio-5px-auto.html ref-tall-empty.html
|
||||
== zero-width-ratio-contain.html ref-tall-empty.html
|
||||
== zero-width-ratio-cover.html ref-tall-empty.html
|
||||
== zero-width-ratio-auto-auto.html ref-tall-empty.html
|
||||
== zero-width-ratio-auto-5px.html ref-tall-empty.html
|
||||
== zero-width-ratio-5px-auto.html ref-tall-empty.html
|
||||
== zero-ratio-no-dimensions-contain.html ref-tall-empty.html
|
||||
== zero-ratio-no-dimensions-cover.html ref-tall-empty.html
|
||||
== zero-ratio-no-dimensions-auto-5px.html ref-tall-empty.html
|
||||
== zero-ratio-no-dimensions-5px-auto.html ref-tall-empty.html
|
||||
== zero-ratio-no-dimensions-auto-auto.html ref-tall-empty.html
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide background-size: contain; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide background-size: contain; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide background-size: cover; for nonpercent-width-omitted-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-omitted-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide background-size: cover; for omitted-width-nonpercent-height-extreme-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(omitted-width-nonpercent-height-extreme-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero height ratio, 5px auto</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 5px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero height ratio, auto 5px</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero height ratio, auto auto</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero height ratio, contain</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero height ratio, cover</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero ratio, no dimensions, 5px auto</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-no-dimensions.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 5px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero ratio, no dimensions, auto 5px</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-no-dimensions.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero ratio, no dimensions, auto auto</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-no-dimensions.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero ratio, no dimensions, contain</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-no-dimensions.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero ratio, no dimensions, cover</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-no-dimensions.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero height ratio, 5px auto</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-width.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 5px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero height ratio, auto 5px</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-width.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero width ratio, auto auto</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-width.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: auto auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero width ratio, contain</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-width.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>zero width ratio, cover</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(intrinsic-ratio-zero-width.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px" height="32px"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with non-percent width, non-percent height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 438 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px" height="32px">
|
||||
<title>Image with non-percentage dimensions</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 361 B |
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with non-percent width, omitted height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 420 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px">
|
||||
<title>Image with non-percent width, omitted height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 355 B |
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px" height="50%"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with non-percent width, percent height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 433 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="8px" height="50%">
|
||||
<title>Image with non-percent width, percent height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 368 B |
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
height="32px"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with omitted width, non-percent height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 422 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
height="32px">
|
||||
<title>Image with omitted width, non-percent height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 357 B |
|
|
@ -0,0 +1,11 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with omitted width, omitted height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 399 B |
|
|
@ -0,0 +1,9 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<title>Image with omitted width, omitted height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 334 B |
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
height="50%"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with omitted width, percent height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 417 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
height="50%">
|
||||
<title>Image with omitted width, percent height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 352 B |
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="50%" height="32px"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with percent width, non-percent height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 434 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="50%" height="32px">
|
||||
<title>Image with percent width, non-percent height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 369 B |
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="50%"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with percent width, omitted height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 416 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="50%">
|
||||
<title>Image with percent width, omitted height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 351 B |
|
|
@ -0,0 +1,12 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="25%" height="50%"
|
||||
viewBox="0 0 4 64"
|
||||
preserveAspectRatio="none">
|
||||
<title>Image with percent width, percent height, viewbox</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 429 B |
|
|
@ -0,0 +1,10 @@
|
|||
<!--
|
||||
Any copyright is dedicated to the Public Domain.
|
||||
http://creativecommons.org/publicdomain/zero/1.0/
|
||||
-->
|
||||
<svg xmlns="http://www.w3.org/2000/svg"
|
||||
width="25%" height="50%">
|
||||
<title>Image with percent width, percent height</title>
|
||||
<rect y="0" width="100%" height="50%" fill="lime"/>
|
||||
<rect y="50%" width="100%" height="50%" fill="aqua"/>
|
||||
</svg>
|
||||
|
После Ширина: | Высота: | Размер: 364 B |
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 192x384 lime, 192x384 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 192px; height: 768px;
|
||||
}
|
||||
#inner > div { width: 192px; height: 384px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 256x16 lime, 256x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 256px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 256px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 256x384 lime, 256x384 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#inner > div { width: 256px; height: 384px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 256x512 lime, 256x256 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#inner > div { width: 256px; }
|
||||
#top { background-color: lime; height: 512px; }
|
||||
#bottom { background-color: aqua; height: 256px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 256x512 lime, 256x256 aqua</title>
|
||||
<style type="text/css">
|
||||
#outer
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
background-color: lime;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 2x16 lime, 2x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 2px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 2px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 32x128 lime, 32x128 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 32px; height: 256px;
|
||||
}
|
||||
#inner > div { width: 32px; height: 128px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 32x16 lime, 32x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 32px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 32px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 32x256 lime, 32x256 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 32px; height: 512px;
|
||||
}
|
||||
#inner > div { width: 32px; height: 256px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 32x384 lime, 32x384 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 32px; height: 768px;
|
||||
}
|
||||
#inner > div { width: 32px; height: 384px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 32x64 lime, 32x64 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 32px; height: 128px;
|
||||
}
|
||||
#inner > div { width: 32px; height: 64px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 48x384 lime, 48x384 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 48px; height: 768px;
|
||||
}
|
||||
#inner > div { width: 48px; height: 384px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 4x16 lime, 4x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 4px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 4px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 8x16 lime, 8x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 8px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 8px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 8x32 lime, 8x32 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 8px; height: 64px;
|
||||
}
|
||||
#inner > div { width: 8px; height: 32px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 8x384 lime, 8x384 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 8px; height: 768px;
|
||||
}
|
||||
#inner > div { width: 8px; height: 384px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall reference, 8x64 lime, 8x64 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 8px; height: 128px;
|
||||
}
|
||||
#inner > div { width: 8px; height: 64px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 12x128 lime, 12x128 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 12px; height: 256px;
|
||||
}
|
||||
#inner > div { width: 12px; height: 128px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 12x16 lime, 12x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 12px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 12px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 12x24 lime, 12x24 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 12px; height: 48px;
|
||||
}
|
||||
#inner > div { width: 12px; height: 24px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 12x96 lime, 12x96 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 12px; height: 192px;
|
||||
}
|
||||
#inner > div { width: 12px; height: 96px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 16x128 lime, 16x128 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 16px; height: 256px;
|
||||
}
|
||||
#inner > div { width: 16px; height: 128px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 2x16 lime, 2x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 2px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 2px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 64x128 lime, 64x128 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 64px; height: 256px;
|
||||
}
|
||||
#inner > div { width: 64px; height: 128px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 768x128 lime, 768x128 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#inner > div { width: 768px; height: 128px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 768x16 lime, 768x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 768px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 768px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,18 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>background-size: 32px auto; for image with no intrinsic size reference</title>
|
||||
<title>wide reference, 768x256 lime</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 64px;
|
||||
height: 32px;
|
||||
width: 768px; height: 256px;
|
||||
background-color: lime;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 8x128 lime, 8x128 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 8px; height: 256px;
|
||||
}
|
||||
#inner > div { width: 8px; height: 128px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 8x16 lime, 8x16 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 8px; height: 32px;
|
||||
}
|
||||
#inner > div { width: 8px; height: 16px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>wide reference, 8x64 lime, 8x64 aqua</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 768px; height: 256px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 8px; height: 128px;
|
||||
}
|
||||
#inner > div { width: 8px; height: 64px; }
|
||||
#top { background-color: lime; }
|
||||
#bottom { background-color: aqua; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"><div id="top"></div><div id="bottom"></div></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,208 @@
|
|||
include empty/reftest.list
|
||||
|
||||
################################################################################
|
||||
# For reference (although the wide--32px-auto* tests/names were changed to
|
||||
# avoid viewBox-directed scaling to make the scaled height less than the wide-
|
||||
# tests height):
|
||||
#
|
||||
# for ORIENTATION in tall wide; do for SIZE in 32px-auto auto-32px auto contain cover; do for VIMAGE in *.svg; do cat template.html | sed -e "s/SIZE/$(echo $SIZE | sed -e 's/-/ /')/g" | sed -e "s/VIMAGE/$VIMAGE/g" | sed -e "s/TALLWIDE/$ORIENTATION/g" | sed -e "s/ORIENTATION/$(if [ "$ORIENTATION" = "tall" ]; then echo 'width: 256px; height: 768px'; else echo 'width: 768px; height: 256px'; fi)/g" > $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html; echo "== $ORIENTATION--$SIZE--$(echo $VIMAGE | sed -e 's/.svg//').html ###" >> reftest.list; done; echo >> reftest.list; done; done
|
||||
#
|
||||
################################################################################
|
||||
|
||||
== tall--32px-auto--nonpercent-width-nonpercent-height.html ref-tall-lime32x64-aqua32x64.html
|
||||
== tall--32px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime32x64-aqua32x64.html
|
||||
== tall--32px-auto--nonpercent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
|
||||
== tall--32px-auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
== tall--32px-auto--nonpercent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
|
||||
== tall--32px-auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
== tall--32px-auto--omitted-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html
|
||||
== tall--32px-auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
== tall--32px-auto--omitted-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
|
||||
== tall--32px-auto--omitted-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
== tall--32px-auto--omitted-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
|
||||
== tall--32px-auto--omitted-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
== tall--32px-auto--percent-width-nonpercent-height.html ref-tall-lime32x16-aqua32x16.html
|
||||
== tall--32px-auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
== tall--32px-auto--percent-width-omitted-height.html ref-tall-lime32x384-aqua32x384.html
|
||||
== tall--32px-auto--percent-width-omitted-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
== tall--32px-auto--percent-width-percent-height.html ref-tall-lime32x384-aqua32x384.html
|
||||
== tall--32px-auto--percent-width-percent-height-viewbox.html ref-tall-lime32x256-aqua32x256.html
|
||||
|
||||
== tall--auto-32px--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html
|
||||
== tall--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html
|
||||
== tall--auto-32px--nonpercent-width-omitted-height.html ref-tall-lime8x16-aqua8x16.html
|
||||
== tall--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto-32px--nonpercent-width-percent-height.html ref-tall-lime8x16-aqua8x16.html
|
||||
== tall--auto-32px--nonpercent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto-32px--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto-32px--omitted-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto-32px--omitted-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto-32px--omitted-width-percent-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto-32px--omitted-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto-32px--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto-32px--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto-32px--percent-width-omitted-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto-32px--percent-width-omitted-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto-32px--percent-width-percent-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto-32px--percent-width-percent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
|
||||
== tall--auto--nonpercent-width-nonpercent-height.html ref-tall-lime8x16-aqua8x16.html
|
||||
== tall--auto--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime8x16-aqua8x16.html
|
||||
== tall--auto--nonpercent-width-omitted-height.html ref-tall-lime8x384-aqua8x384.html
|
||||
== tall--auto--nonpercent-width-omitted-height-viewbox.html ref-tall-lime8x64-aqua8x64.html
|
||||
== tall--auto--nonpercent-width-percent-height.html ref-tall-lime8x384-aqua8x384.html
|
||||
== tall--auto--nonpercent-width-percent-height-viewbox.html ref-tall-lime8x64-aqua8x64.html
|
||||
== tall--auto--omitted-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto--omitted-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--auto--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--auto--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--auto--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--auto--percent-width-nonpercent-height.html ref-tall-lime256x16-aqua256x16.html
|
||||
== tall--auto--percent-width-nonpercent-height-viewbox.html ref-tall-lime2x16-aqua2x16.html
|
||||
== tall--auto--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--auto--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--auto--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--auto--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
|
||||
== tall--contain--nonpercent-width-nonpercent-height.html ref-tall-lime192x384-aqua192x384.html
|
||||
== tall--contain--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime192x384-aqua192x384.html
|
||||
== tall--contain--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--nonpercent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--contain--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--nonpercent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--contain--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--omitted-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--contain--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--omitted-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--contain--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--omitted-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--contain--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--percent-width-nonpercent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--contain--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--percent-width-omitted-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
== tall--contain--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--contain--percent-width-percent-height-viewbox.html ref-tall-lime48x384-aqua48x384.html
|
||||
|
||||
# We smear the background image when scaling it in these two tests...
|
||||
fails == tall--cover--nonpercent-width-nonpercent-height.html ref-tall-lime256x512-aqua256x256.html
|
||||
fails == tall--cover--nonpercent-width-nonpercent-height-viewbox.html ref-tall-lime256x512-aqua256x256.html
|
||||
|
||||
# ...but we don't in identical tests with image-rendering: -moz-crisp-edges.
|
||||
== tall--cover--nonpercent-width-nonpercent-height--crisp.html ref-tall-lime256x512-aqua256x256.html
|
||||
== tall--cover--nonpercent-width-nonpercent-height-viewbox--crisp.html ref-tall-lime256x512-aqua256x256.html
|
||||
|
||||
== tall--cover--nonpercent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--nonpercent-width-omitted-height-viewbox.html ref-tall-lime256x768.html
|
||||
== tall--cover--nonpercent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--nonpercent-width-percent-height-viewbox.html ref-tall-lime256x768.html
|
||||
== tall--cover--omitted-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--omitted-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html
|
||||
== tall--cover--omitted-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--omitted-width-omitted-height-viewbox.html ref-tall-lime256x768.html
|
||||
== tall--cover--omitted-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--omitted-width-percent-height-viewbox.html ref-tall-lime256x768.html
|
||||
== tall--cover--percent-width-nonpercent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--percent-width-nonpercent-height-viewbox.html ref-tall-lime256x768.html
|
||||
== tall--cover--percent-width-omitted-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--percent-width-omitted-height-viewbox.html ref-tall-lime256x768.html
|
||||
== tall--cover--percent-width-percent-height.html ref-tall-lime256x384-aqua256x384.html
|
||||
== tall--cover--percent-width-percent-height-viewbox.html ref-tall-lime256x768.html
|
||||
|
||||
== wide--12px-auto--nonpercent-width-nonpercent-height.html ref-wide-lime12x24-aqua12x24.html
|
||||
== wide--12px-auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime12x24-aqua12x24.html
|
||||
== wide--12px-auto--nonpercent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
|
||||
== wide--12px-auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
== wide--12px-auto--nonpercent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
|
||||
== wide--12px-auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
== wide--12px-auto--omitted-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html
|
||||
== wide--12px-auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
== wide--12px-auto--omitted-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
|
||||
== wide--12px-auto--omitted-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
== wide--12px-auto--omitted-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
|
||||
== wide--12px-auto--omitted-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
== wide--12px-auto--percent-width-nonpercent-height.html ref-wide-lime12x16-aqua12x16.html
|
||||
== wide--12px-auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
== wide--12px-auto--percent-width-omitted-height.html ref-wide-lime12x128-aqua12x128.html
|
||||
== wide--12px-auto--percent-width-omitted-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
== wide--12px-auto--percent-width-percent-height.html ref-wide-lime12x128-aqua12x128.html
|
||||
== wide--12px-auto--percent-width-percent-height-viewbox.html ref-wide-lime12x96-aqua12x96.html
|
||||
|
||||
== wide--auto-32px--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html
|
||||
== wide--auto-32px--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html
|
||||
== wide--auto-32px--nonpercent-width-omitted-height.html ref-wide-lime8x16-aqua8x16.html
|
||||
== wide--auto-32px--nonpercent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto-32px--nonpercent-width-percent-height.html ref-wide-lime8x16-aqua8x16.html
|
||||
== wide--auto-32px--nonpercent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto-32px--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto-32px--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto-32px--omitted-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto-32px--omitted-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto-32px--omitted-width-percent-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto-32px--omitted-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto-32px--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto-32px--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto-32px--percent-width-omitted-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto-32px--percent-width-omitted-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto-32px--percent-width-percent-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto-32px--percent-width-percent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
|
||||
== wide--auto--nonpercent-width-nonpercent-height.html ref-wide-lime8x16-aqua8x16.html
|
||||
== wide--auto--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime8x16-aqua8x16.html
|
||||
== wide--auto--nonpercent-width-omitted-height.html ref-wide-lime8x128-aqua8x128.html
|
||||
== wide--auto--nonpercent-width-omitted-height-viewbox.html ref-wide-lime8x64-aqua8x64.html
|
||||
== wide--auto--nonpercent-width-percent-height.html ref-wide-lime8x128-aqua8x128.html
|
||||
== wide--auto--nonpercent-width-percent-height-viewbox.html ref-wide-lime8x64-aqua8x64.html
|
||||
== wide--auto--omitted-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto--omitted-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--auto--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--auto--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--auto--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--auto--percent-width-nonpercent-height.html ref-wide-lime768x16-aqua768x16.html
|
||||
== wide--auto--percent-width-nonpercent-height-viewbox.html ref-wide-lime2x16-aqua2x16.html
|
||||
== wide--auto--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--auto--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--auto--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--auto--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
|
||||
== wide--contain--nonpercent-width-nonpercent-height.html ref-wide-lime64x128-aqua64x128.html
|
||||
== wide--contain--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime64x128-aqua64x128.html
|
||||
== wide--contain--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--nonpercent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--contain--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--nonpercent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--contain--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--omitted-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--contain--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--omitted-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--contain--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--omitted-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--contain--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--percent-width-nonpercent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--contain--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--percent-width-omitted-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
== wide--contain--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--contain--percent-width-percent-height-viewbox.html ref-wide-lime16x128-aqua16x128.html
|
||||
|
||||
== wide--cover--nonpercent-width-nonpercent-height.html ref-wide-lime768x256.html
|
||||
== wide--cover--nonpercent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--nonpercent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--nonpercent-width-omitted-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--nonpercent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--nonpercent-width-percent-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--omitted-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--omitted-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--omitted-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--omitted-width-omitted-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--omitted-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--omitted-width-percent-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--percent-width-nonpercent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--percent-width-nonpercent-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--percent-width-omitted-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--percent-width-omitted-height-viewbox.html ref-wide-lime768x256.html
|
||||
== wide--cover--percent-width-percent-height.html ref-wide-lime768x128-aqua768x128.html
|
||||
== wide--cover--percent-width-percent-height-viewbox.html ref-wide-lime768x256.html
|
||||
|
||||
== diagonal-percentage-vector-background.html diagonal-percentage-vector-background-ref.html
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-nonpercent-height-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: 32px auto; for nonpercent-width-nonpercent-height.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-nonpercent-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: 32px auto; for nonpercent-width-omitted-height-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-omitted-height-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>background-size: 32px auto; for image with no intrinsic height</title>
|
||||
<title>tall background-size: 32px auto; for nonpercent-width-omitted-height.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
width: 64px;
|
||||
height: 128px;
|
||||
background-image: url(no-intrinsic-size.svg);
|
||||
background-image: url(nonpercent-width-omitted-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
}
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: 32px auto; for nonpercent-width-percent-height-viewbox.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-percent-height-viewbox.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>tall background-size: 32px auto; for nonpercent-width-percent-height.svg</title>
|
||||
<style type="text/css">
|
||||
div
|
||||
{
|
||||
width: 256px; height: 768px;
|
||||
}
|
||||
#outer
|
||||
{
|
||||
border: 1px solid black;
|
||||
}
|
||||
#inner
|
||||
{
|
||||
background-image: url(nonpercent-width-percent-height.svg);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 32px auto;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="outer"><div id="inner"></div></div>
|
||||
</body>
|
||||
</html>
|
||||
Некоторые файлы не были показаны из-за слишком большого количества измененных файлов Показать больше
Загрузка…
Ссылка в новой задаче