nephele
/
haikuwebkit
1
0
Fork 0
Code Issues Releases Activity
haikuwebkit/LayoutTests/fast/borders/border-image-fill-no-intrin...

58 lines
1.9 KiB
HTML
Raw Permalink Normal View History

An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
<!DOCTYPE HTML>
<head>
<style>
.box {
height: 100px;
width: 100px;
display: inline-block;
background-color: red;
}
REGRESSION(r184895): border-image should always slice the SVG image to nine pieces when drawing it in the container element https://bugs.webkit.org/show_bug.cgi?id=149901 <rdar://problem/21995596> Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-10-12 Reviewed by Darin Adler. Source/WebCore: The nine-pieces algorithm should be applied to the border-image regardless whether the image has an intrinsic size or not. It is not guaranteed to have a meaningful border-image in all the cases of non-intrinsic size images. But it should work as expected in most of the cases. * rendering/RenderBoxModelObject.cpp: * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): Revert the changes which were added to return whether the image has intrinsic size or not. (WebCore::RenderBoxModelObject::calculateFillTileSize): (WebCore::RenderBoxModelObject::paintNinePieceImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/style/NinePieceImage.cpp: * rendering/style/NinePieceImage.h: (WebCore::NinePieceImage::paint): Delete the logic for the non-intrinsic case. Both intrinsic and non-intrinsic cases will be treated the same. (WebCore::NinePieceImage::computeNineRects): (WebCore::NinePieceImage::computeSideTileScale): (WebCore::NinePieceImage::computeMiddleTileScale): (WebCore::NinePieceImage::computeTileScales): (WebCore::NinePieceImage::computeIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicTileScales): Deleted. Remove *Intrinsic* from the name of the functions. (WebCore::NinePieceImage::computeNonIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Deleted. Delete the *NonIntrinsic* functions. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: * fast/borders/border-image-fill-no-intrinsic-size.html: * fast/borders/resources/svg-border-100x100-relative.svg: Added. * fast/borders/resources/svg-border-100x100-viewbox.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: New test cases for relative lengths border images were added. The relative lengths can be specified by using percentage lengths or adding viewBox to the root element. One of the non-intrinsic image-borders must be removed from this test. The SVG image in the expected file has to be scaled by (100 / 140), which can be done. But run-webkit-tests found a very slight difference between the actual and the result files. Canonical link: https://commits.webkit.org/168170@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190883 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-12 19:51:11 +00:00
.border-20 {
An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
border: 20px solid;
}
REGRESSION(r184895): border-image should always slice the SVG image to nine pieces when drawing it in the container element https://bugs.webkit.org/show_bug.cgi?id=149901 <rdar://problem/21995596> Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-10-12 Reviewed by Darin Adler. Source/WebCore: The nine-pieces algorithm should be applied to the border-image regardless whether the image has an intrinsic size or not. It is not guaranteed to have a meaningful border-image in all the cases of non-intrinsic size images. But it should work as expected in most of the cases. * rendering/RenderBoxModelObject.cpp: * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): Revert the changes which were added to return whether the image has intrinsic size or not. (WebCore::RenderBoxModelObject::calculateFillTileSize): (WebCore::RenderBoxModelObject::paintNinePieceImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/style/NinePieceImage.cpp: * rendering/style/NinePieceImage.h: (WebCore::NinePieceImage::paint): Delete the logic for the non-intrinsic case. Both intrinsic and non-intrinsic cases will be treated the same. (WebCore::NinePieceImage::computeNineRects): (WebCore::NinePieceImage::computeSideTileScale): (WebCore::NinePieceImage::computeMiddleTileScale): (WebCore::NinePieceImage::computeTileScales): (WebCore::NinePieceImage::computeIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicTileScales): Deleted. Remove *Intrinsic* from the name of the functions. (WebCore::NinePieceImage::computeNonIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Deleted. Delete the *NonIntrinsic* functions. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: * fast/borders/border-image-fill-no-intrinsic-size.html: * fast/borders/resources/svg-border-100x100-relative.svg: Added. * fast/borders/resources/svg-border-100x100-viewbox.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: New test cases for relative lengths border images were added. The relative lengths can be specified by using percentage lengths or adding viewBox to the root element. One of the non-intrinsic image-borders must be removed from this test. The SVG image in the expected file has to be scaled by (100 / 140), which can be done. But run-webkit-tests found a very slight difference between the actual and the result files. Canonical link: https://commits.webkit.org/168170@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190883 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-12 19:51:11 +00:00
.border-40 {
border: solid;
border-top: 0px;
border-right: 40px;
border-bottom: 40px;
border-left: 0px;
}
An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
.no-border {
border: 0px none;
}
.border-image-100-intrinsic {
border-image: url('resources/svg-border-100x100-intrinsic.svg') 0 fill;
}
.border-image-100-intrinsic-slice {
border-image: url('resources/svg-border-100x100-intrinsic.svg') 20 fill;
}
REGRESSION(r184895): border-image should always slice the SVG image to nine pieces when drawing it in the container element https://bugs.webkit.org/show_bug.cgi?id=149901 <rdar://problem/21995596> Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-10-12 Reviewed by Darin Adler. Source/WebCore: The nine-pieces algorithm should be applied to the border-image regardless whether the image has an intrinsic size or not. It is not guaranteed to have a meaningful border-image in all the cases of non-intrinsic size images. But it should work as expected in most of the cases. * rendering/RenderBoxModelObject.cpp: * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): Revert the changes which were added to return whether the image has intrinsic size or not. (WebCore::RenderBoxModelObject::calculateFillTileSize): (WebCore::RenderBoxModelObject::paintNinePieceImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/style/NinePieceImage.cpp: * rendering/style/NinePieceImage.h: (WebCore::NinePieceImage::paint): Delete the logic for the non-intrinsic case. Both intrinsic and non-intrinsic cases will be treated the same. (WebCore::NinePieceImage::computeNineRects): (WebCore::NinePieceImage::computeSideTileScale): (WebCore::NinePieceImage::computeMiddleTileScale): (WebCore::NinePieceImage::computeTileScales): (WebCore::NinePieceImage::computeIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicTileScales): Deleted. Remove *Intrinsic* from the name of the functions. (WebCore::NinePieceImage::computeNonIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Deleted. Delete the *NonIntrinsic* functions. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: * fast/borders/border-image-fill-no-intrinsic-size.html: * fast/borders/resources/svg-border-100x100-relative.svg: Added. * fast/borders/resources/svg-border-100x100-viewbox.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: New test cases for relative lengths border images were added. The relative lengths can be specified by using percentage lengths or adding viewBox to the root element. One of the non-intrinsic image-borders must be removed from this test. The SVG image in the expected file has to be scaled by (100 / 140), which can be done. But run-webkit-tests found a very slight difference between the actual and the result files. Canonical link: https://commits.webkit.org/168170@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190883 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-12 19:51:11 +00:00
.border-image-140-intrinsic {
border-image: url('resources/svg-border-140x140-intrinsic.svg') 0 fill;
}
An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
.border-image-140-intrinsic-slice {
border-image: url('resources/svg-border-140x140-intrinsic.svg') 20 fill;
}
</style>
</head>
<body>
<div class="box no-border border-image-100-intrinsic"></div>
REGRESSION(r184895): border-image should always slice the SVG image to nine pieces when drawing it in the container element https://bugs.webkit.org/show_bug.cgi?id=149901 <rdar://problem/21995596> Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-10-12 Reviewed by Darin Adler. Source/WebCore: The nine-pieces algorithm should be applied to the border-image regardless whether the image has an intrinsic size or not. It is not guaranteed to have a meaningful border-image in all the cases of non-intrinsic size images. But it should work as expected in most of the cases. * rendering/RenderBoxModelObject.cpp: * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): Revert the changes which were added to return whether the image has intrinsic size or not. (WebCore::RenderBoxModelObject::calculateFillTileSize): (WebCore::RenderBoxModelObject::paintNinePieceImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/style/NinePieceImage.cpp: * rendering/style/NinePieceImage.h: (WebCore::NinePieceImage::paint): Delete the logic for the non-intrinsic case. Both intrinsic and non-intrinsic cases will be treated the same. (WebCore::NinePieceImage::computeNineRects): (WebCore::NinePieceImage::computeSideTileScale): (WebCore::NinePieceImage::computeMiddleTileScale): (WebCore::NinePieceImage::computeTileScales): (WebCore::NinePieceImage::computeIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicTileScales): Deleted. Remove *Intrinsic* from the name of the functions. (WebCore::NinePieceImage::computeNonIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Deleted. Delete the *NonIntrinsic* functions. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: * fast/borders/border-image-fill-no-intrinsic-size.html: * fast/borders/resources/svg-border-100x100-relative.svg: Added. * fast/borders/resources/svg-border-100x100-viewbox.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: New test cases for relative lengths border images were added. The relative lengths can be specified by using percentage lengths or adding viewBox to the root element. One of the non-intrinsic image-borders must be removed from this test. The SVG image in the expected file has to be scaled by (100 / 140), which can be done. But run-webkit-tests found a very slight difference between the actual and the result files. Canonical link: https://commits.webkit.org/168170@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190883 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-12 19:51:11 +00:00
<div class="box border-20 border-image-100-intrinsic"></div>
<div class="box no-border border-image-100-intrinsic-slice"></div>
<div class="box border-20 border-image-100-intrinsic-slice"></div>
<br>
<div class="box no-border border-image-100-intrinsic"></div>
<div class="box border-20 border-image-100-intrinsic"></div>
An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
<div class="box no-border border-image-100-intrinsic-slice"></div>
REGRESSION(r184895): border-image should always slice the SVG image to nine pieces when drawing it in the container element https://bugs.webkit.org/show_bug.cgi?id=149901 <rdar://problem/21995596> Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-10-12 Reviewed by Darin Adler. Source/WebCore: The nine-pieces algorithm should be applied to the border-image regardless whether the image has an intrinsic size or not. It is not guaranteed to have a meaningful border-image in all the cases of non-intrinsic size images. But it should work as expected in most of the cases. * rendering/RenderBoxModelObject.cpp: * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): Revert the changes which were added to return whether the image has intrinsic size or not. (WebCore::RenderBoxModelObject::calculateFillTileSize): (WebCore::RenderBoxModelObject::paintNinePieceImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/style/NinePieceImage.cpp: * rendering/style/NinePieceImage.h: (WebCore::NinePieceImage::paint): Delete the logic for the non-intrinsic case. Both intrinsic and non-intrinsic cases will be treated the same. (WebCore::NinePieceImage::computeNineRects): (WebCore::NinePieceImage::computeSideTileScale): (WebCore::NinePieceImage::computeMiddleTileScale): (WebCore::NinePieceImage::computeTileScales): (WebCore::NinePieceImage::computeIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicTileScales): Deleted. Remove *Intrinsic* from the name of the functions. (WebCore::NinePieceImage::computeNonIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Deleted. Delete the *NonIntrinsic* functions. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: * fast/borders/border-image-fill-no-intrinsic-size.html: * fast/borders/resources/svg-border-100x100-relative.svg: Added. * fast/borders/resources/svg-border-100x100-viewbox.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: New test cases for relative lengths border images were added. The relative lengths can be specified by using percentage lengths or adding viewBox to the root element. One of the non-intrinsic image-borders must be removed from this test. The SVG image in the expected file has to be scaled by (100 / 140), which can be done. But run-webkit-tests found a very slight difference between the actual and the result files. Canonical link: https://commits.webkit.org/168170@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190883 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-12 19:51:11 +00:00
<div class="box border-20 border-image-140-intrinsic-slice"></div>
An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
<br>
<div class="box no-border border-image-100-intrinsic"></div>
REGRESSION(r184895): border-image should always slice the SVG image to nine pieces when drawing it in the container element https://bugs.webkit.org/show_bug.cgi?id=149901 <rdar://problem/21995596> Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-10-12 Reviewed by Darin Adler. Source/WebCore: The nine-pieces algorithm should be applied to the border-image regardless whether the image has an intrinsic size or not. It is not guaranteed to have a meaningful border-image in all the cases of non-intrinsic size images. But it should work as expected in most of the cases. * rendering/RenderBoxModelObject.cpp: * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): Revert the changes which were added to return whether the image has intrinsic size or not. (WebCore::RenderBoxModelObject::calculateFillTileSize): (WebCore::RenderBoxModelObject::paintNinePieceImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/style/NinePieceImage.cpp: * rendering/style/NinePieceImage.h: (WebCore::NinePieceImage::paint): Delete the logic for the non-intrinsic case. Both intrinsic and non-intrinsic cases will be treated the same. (WebCore::NinePieceImage::computeNineRects): (WebCore::NinePieceImage::computeSideTileScale): (WebCore::NinePieceImage::computeMiddleTileScale): (WebCore::NinePieceImage::computeTileScales): (WebCore::NinePieceImage::computeIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicTileScales): Deleted. Remove *Intrinsic* from the name of the functions. (WebCore::NinePieceImage::computeNonIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Deleted. Delete the *NonIntrinsic* functions. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: * fast/borders/border-image-fill-no-intrinsic-size.html: * fast/borders/resources/svg-border-100x100-relative.svg: Added. * fast/borders/resources/svg-border-100x100-viewbox.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: New test cases for relative lengths border images were added. The relative lengths can be specified by using percentage lengths or adding viewBox to the root element. One of the non-intrinsic image-borders must be removed from this test. The SVG image in the expected file has to be scaled by (100 / 140), which can be done. But run-webkit-tests found a very slight difference between the actual and the result files. Canonical link: https://commits.webkit.org/168170@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190883 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-12 19:51:11 +00:00
<div class="box border-20 border-image-100-intrinsic"></div>
<div class="box no-border border-image-100-intrinsic-slice"></div>
<div class="box border-20 border-image-140-intrinsic-slice"></div>
<br>
An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
<div class="box no-border border-image-100-intrinsic"></div>
REGRESSION(r184895): border-image should always slice the SVG image to nine pieces when drawing it in the container element https://bugs.webkit.org/show_bug.cgi?id=149901 <rdar://problem/21995596> Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-10-12 Reviewed by Darin Adler. Source/WebCore: The nine-pieces algorithm should be applied to the border-image regardless whether the image has an intrinsic size or not. It is not guaranteed to have a meaningful border-image in all the cases of non-intrinsic size images. But it should work as expected in most of the cases. * rendering/RenderBoxModelObject.cpp: * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): Revert the changes which were added to return whether the image has intrinsic size or not. (WebCore::RenderBoxModelObject::calculateFillTileSize): (WebCore::RenderBoxModelObject::paintNinePieceImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Size of the image is now the return value of calculateImageIntrinsicDimensions(). * rendering/style/NinePieceImage.cpp: * rendering/style/NinePieceImage.h: (WebCore::NinePieceImage::paint): Delete the logic for the non-intrinsic case. Both intrinsic and non-intrinsic cases will be treated the same. (WebCore::NinePieceImage::computeNineRects): (WebCore::NinePieceImage::computeSideTileScale): (WebCore::NinePieceImage::computeMiddleTileScale): (WebCore::NinePieceImage::computeTileScales): (WebCore::NinePieceImage::computeIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): Deleted. (WebCore::NinePieceImage::computeIntrinsicTileScales): Deleted. Remove *Intrinsic* from the name of the functions. (WebCore::NinePieceImage::computeNonIntrinsicRects): Deleted. (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Deleted. Delete the *NonIntrinsic* functions. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: * fast/borders/border-image-fill-no-intrinsic-size.html: * fast/borders/resources/svg-border-100x100-relative.svg: Added. * fast/borders/resources/svg-border-100x100-viewbox.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: New test cases for relative lengths border images were added. The relative lengths can be specified by using percentage lengths or adding viewBox to the root element. One of the non-intrinsic image-borders must be removed from this test. The SVG image in the expected file has to be scaled by (100 / 140), which can be done. But run-webkit-tests found a very slight difference between the actual and the result files. Canonical link: https://commits.webkit.org/168170@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@190883 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-10-12 19:51:11 +00:00
<div class="box border-20"></div>
<div class="box no-border border-image-100-intrinsic-slice"></div>
<div class="box border-40 border-image-100-intrinsic"></div>
An SVG with no intrinsic size does not draw correct slices when used as a border-image for an HTML element. https://bugs.webkit.org/show_bug.cgi?id=139405 Patch by Said Abou-Hallawa <sabouhallawa@apple.com> on 2015-05-26 Reviewed by Darin Adler. LayoutTests/imported/mozilla: * svg/as-image/border-image-simple-2.html: Add "border: 0px none;" to style of the <div> although the style has "border-image: url() 0 fill;". If the border width is not set to zero in the style, the <div> will have a 3px border. This seems to be a bug in WebKit but should be unrelated to the non-intrinsic-sized images with border-image. Source/WebCore: When using a non-intrinsic-sized image as an image-border, all the source slices have to be extracted from the top-left corner of the source image. This is because the right and bottom sides of the image can not be known. Also all the slices should not be stretched. In other words, the sizes of source slices for a non-intrinsic-sized image should be equal to the sizes of the destination container slices. This is not compliant with the css3 w3c specs. I think the specs makes it harder to predict what exactly will be drawn for the image-border in this case. See http://www.w3.org/TR/css3-background/#border-image-slice. This approach is implemented by FireFox. And I think it gives a more predictable rendering for image-border in the case of non-intrinsic-sized images. Test: fast/borders/border-image-fill-no-intrinsic-size.html * CMakeLists.txt: * WebCore.vcxproj/WebCore.vcxproj: * WebCore.vcxproj/WebCore.vcxproj.filters: * WebCore.xcodeproj/project.pbxproj: * platform/LengthBox.cpp: Removed. * platform/graphics/LayoutBoxExtent.cpp: Removed. * platform/graphics/LayoutBoxExtent.h: Removed. * platform/graphics/LayoutRect.h: Delete LengthBox.cpp and move all the functionalities to LengthBox.h. Delete LayoutBoxExtent.cpp since it is the same class as LengthBox. * css/CSSProperty.cpp: * platform/text/WritingMode.h: Move the enums LogicalBoxSide and PhysicalBoxSide from CSSProperty.cpp to WritingMode.h so it can be used by other classes. * css/CSSToStyleMap.cpp: (WebCore::CSSToStyleMap::mapNinePieceImageSlice): (WebCore::CSSToStyleMap::mapNinePieceImageQuad): * css/CSSToStyleMap.h: * inspector/InspectorOverlay.cpp: (WebCore::buildRendererHighlight): * rendering/InlineFlowBox.cpp: (WebCore::InlineFlowBox::addBorderOutsetVisualOverflow): * rendering/RenderBox.h: (WebCore::RenderBox::marginLogicalLeft): (WebCore::RenderBox::marginLogicalRight): (WebCore::RenderBox::setMarginBefore): (WebCore::RenderBox::setMarginAfter): (WebCore::RenderBox::setMarginStart): (WebCore::RenderBox::setMarginEnd): * rendering/style/RenderStyle.cpp: (WebCore::RenderStyle::setClip): (WebCore::RenderStyle::noneDashboardRegions): * rendering/style/RenderStyle.h: Use the new BoxExtent access methods for getting and settings the sides of LengthBox and LayoutBoxExtent. * platform/LengthBox.h: (WebCore::BoxExtent::BoxExtent): (WebCore::BoxExtent::at): (WebCore::BoxExtent::top): (WebCore::BoxExtent::right): (WebCore::BoxExtent::bottom): (WebCore::BoxExtent::left): (WebCore::BoxExtent::setAt): (WebCore::BoxExtent::setTop): (WebCore::BoxExtent::setRight): (WebCore::BoxExtent::setBottom): (WebCore::BoxExtent::setLeft): (WebCore::BoxExtent::before): (WebCore::BoxExtent::end): (WebCore::BoxExtent::after): (WebCore::BoxExtent::start): (WebCore::BoxExtent::setBefore): (WebCore::BoxExtent::setEnd): (WebCore::BoxExtent::setAfter): (WebCore::BoxExtent::setStart): (WebCore::BoxExtent::operator==): (WebCore::BoxExtent::operator!=): (WebCore::LengthBox::LengthBox): (WebCore::LengthBox::isZero): (WebCore::LengthBox::left): Deleted. (WebCore::LengthBox::right): Deleted. (WebCore::LengthBox::top): Deleted. (WebCore::LengthBox::bottom): Deleted. (WebCore::LengthBox::operator==): Deleted. (WebCore::LengthBox::operator!=): Deleted. (WebCore::LengthBox::nonZero): Deleted. Define a new template class for 'BoxExtent'. A 'BoxExtent' represents the extent of four sides of a box. Use this class template to define the exiting classes 'LengthBox' and 'LayoutBoxExtent'. Use it also to and define the new class FloatBoxExtent * rendering/RenderBoxModelObject.cpp: (WebCore::RenderBoxModelObject::calculateImageIntrinsicDimensions): * rendering/RenderBoxModelObject.h: (WebCore::RenderBoxModelObject::calculateFillTileSize): * rendering/RenderListMarker.cpp: (WebCore::RenderListMarker::updateContent): * rendering/shapes/ShapeOutsideInfo.cpp: (WebCore::ShapeOutsideInfo::createShapeForImage): Change the return value of calculateImageIntrinsicDimensions() to be a bool which indicates whether the image has an intrinsic size or not. Add a new reference argument to this function receive the resolved image size. (WebCore::RenderBoxModelObject::paintNinePieceImage): Move all the painting code of this function to NinePieceImage::paint() (WebCore::computeBorderImageSide): Deleted. Renamed to be NinePieceImage::computeSlice(). * rendering/style/BorderData.h: (WebCore::BorderData::borderWidth): Add a new method to return the extents of the border in a FloatBoxExtent. * rendering/style/NinePieceImage.cpp: (WebCore::NinePieceImage::computeSlice): Moved from NinePieceImage::computeSlice(). (WebCore::NinePieceImage::computeSlices): The first version of this function computes the slices given their lengths. The slices have to be clamped to the container size. The second version of this function computes the slices given their lengths, their actual extents and their source slices. (WebCore::NinePieceImage::scaleSlicesIfNeeded): Reduce the slices if they are too large. (WebCore::NinePieceImage::isEmptyPieceRect): Returns true if an ImagePiece should not be drawn. (WebCore::NinePieceImage::horizontalTileRules): (WebCore::NinePieceImage::verticalTileRules): Fill vectors of tiling rules to be passed to GraphicsContext::drawTiledImage() (WebCore::NinePieceImage::computeIntrinsicRects): Computes the nine pieces rectangles for an intrinsic-sized container. (WebCore::NinePieceImage::computeNonIntrinsicRects): Computes the nine pieces rectangles for an non-intrinsic-sized source image. The computed rectangles have to start at (0, 0) and their sizes should be equal to the sizes of the nine pieces rectangles of the destination container. (WebCore::NinePieceImage::computeIntrinsicSideTileScale): (WebCore::NinePieceImage::computeIntrinsicMiddleTileScale): (WebCore::NinePieceImage::computeIntrinsicTileScales): (WebCore::NinePieceImage::computeNonIntrinsicTileScales): Computes the scaling factors for drawing the tiles. For non-intrinsic source images, there should not be any scaling factors. (WebCore::NinePieceImage::paint): Moved from RenderBoxModelObject::paintNinePieceImage() but simplified and restructured. (WebCore::NinePieceImageData::NinePieceImageData): Use nullptr instead of 0. * rendering/style/NinePieceImage.h: (WebCore::operator++): (WebCore::isCornerPiece): (WebCore::isMiddlePiece): (WebCore::imagePieceHorizontalSide): (WebCore::imagePieceVerticalSide): Add helper functions for the enum ImagePiece. LayoutTests: * fast/borders/border-image-fill-no-intrinsic-size-expected.html: Added. * fast/borders/border-image-fill-no-intrinsic-size.html: Added. * fast/borders/resources/svg-border-100x100-intrinsic.svg: Added. * fast/borders/resources/svg-border-140x140-intrinsic.svg: Added. * fast/borders/resources/svg-border-no-intrinsic.svg: Added. Make sure the slices of the border-image are drawn correctly. When using an image with no intrinsic size, all the slices has to be gotten from (0, 0) of the source image. * TestExpectations: Removed previously-failing test. Canonical link: https://commits.webkit.org/163411@main git-svn-id: https://svn.webkit.org/repository/webkit/trunk@184895 268f45cc-cd09-0410-ab3c-d52691b4dbfc
2015-05-27 04:18:04 +00:00
</body>