Support box-sizing property in case of FlexContainerRenderer

DEVSIX-5168

Author: Eugene Bochilo

layout/src/main/java/com/itextpdf/layout/renderer/AbstractRenderer.java

@@ -2512,14 +2512,14 @@ private void adjustPositionedRendererLayoutBoxWidth(IRenderer renderer, Rectangl
         }
     }
 
-    private static float calculatePaddingBorderWidth(AbstractRenderer renderer) {
+    static float calculatePaddingBorderWidth(AbstractRenderer renderer) {
         Rectangle dummy = new Rectangle(0, 0);
         renderer.applyBorderBox(dummy, true);
         renderer.applyPaddings(dummy, true);
         return dummy.getWidth();
     }
 
-    private static float calculatePaddingBorderHeight(AbstractRenderer renderer) {
+    static float calculatePaddingBorderHeight(AbstractRenderer renderer) {
         Rectangle dummy = new Rectangle(0, 0);
         renderer.applyBorderBox(dummy, true);
         renderer.applyPaddings(dummy, true);

layout/src/main/java/com/itextpdf/layout/renderer/FlexContainerRenderer.java

@@ -94,8 +94,14 @@ public LayoutResult layout(LayoutContext layoutContext) {
         final List<UnitValue> previousMinHeights = new ArrayList<>();
         for (final List<FlexItemInfo> line : lines) {
             for (final FlexItemInfo itemInfo : line) {
-                final Rectangle rectangleWithoutBordersMarginsPaddings =
-                        itemInfo.getRenderer().applyMarginsBordersPaddings(itemInfo.getRectangle().clone(), false);
+                final Rectangle rectangleWithoutBordersMarginsPaddings;
+                if (AbstractRenderer.isBorderBoxSizing(itemInfo.getRenderer())) {
+                    rectangleWithoutBordersMarginsPaddings =
+                            itemInfo.getRenderer().applyMargins(itemInfo.getRectangle().clone(), false);
+                } else {
+                    rectangleWithoutBordersMarginsPaddings =
+                            itemInfo.getRenderer().applyMarginsBordersPaddings(itemInfo.getRectangle().clone(), false);
+                }
 
                 previousWidths.add(itemInfo.getRenderer().<UnitValue>getProperty(Property.WIDTH));
                 previousHeights.add(itemInfo.getRenderer().<UnitValue>getProperty(Property.HEIGHT));

layout/src/main/java/com/itextpdf/layout/renderer/FlexUtil.java

@@ -86,9 +86,6 @@ public static List<List<FlexItemInfo>> calculateChildrenRectangles(Rectangle fle
         Rectangle layoutBox = flexContainerBBox.clone();
         flexContainerRenderer.applyMarginsBordersPaddings(layoutBox, false);
 
-        List<FlexItemCalculationInfo> flexItemCalculationInfos =
-                createFlexItemCalculationInfos(flexContainerRenderer, layoutBox);
-
         // 9.2. Line Length Determination
 
         // 2. Determine the available main and cross space for the flex items.
@@ -106,7 +103,10 @@ public static List<List<FlexItemInfo>> calculateChildrenRectangles(Rectangle fle
         Float minCrossSize = flexContainerRenderer.retrieveMinHeight();
         Float maxCrossSize = flexContainerRenderer.retrieveMaxHeight();
 
-        determineFlexBasisAndHypotheticalMainSizeForFlexItems(flexItemCalculationInfos, (float) mainSize);
+        List<FlexItemCalculationInfo> flexItemCalculationInfos =
+                createFlexItemCalculationInfos(flexContainerRenderer, (float) mainSize);
+
+        determineFlexBasisAndHypotheticalMainSizeForFlexItems(flexItemCalculationInfos);
 
         // 9.3. Main Size Determination
 
@@ -182,17 +182,12 @@ public static List<List<FlexItemInfo>> calculateChildrenRectangles(Rectangle fle
     }
 
     static void determineFlexBasisAndHypotheticalMainSizeForFlexItems(
-            List<FlexItemCalculationInfo> flexItemCalculationInfos, float mainSize) {
+            List<FlexItemCalculationInfo> flexItemCalculationInfos) {
         for (FlexItemCalculationInfo info : flexItemCalculationInfos) {
             // 3. Determine the flex base size and hypothetical main size of each item:
 
-            // Note: We assume that flex-basis: auto was resolved (set to either width or height) on some upper level
-            assert null != info.flexBasis;
-
             // A. If the item has a definite used flex basis, that’s the flex base size.
-            info.flexBaseSize = info.flexBasis.isPercentValue()
-                    ? (info.flexBasis.getValue() * mainSize / 100)
-                    : info.flexBasis.getValue();
+            info.flexBaseSize = info.flexBasis;
 
             // TODO DEVSIX-5001 content as width are not supported
             // TODO DEVSIX-5004 Implement method to check whether an element has an intrinsic aspect ratio
@@ -607,34 +602,64 @@ static boolean isZero(final float value) {
     }
 
     private static List<FlexItemCalculationInfo> createFlexItemCalculationInfos(
-            FlexContainerRenderer flexContainerRenderer, Rectangle flexContainerBBox) {
+            FlexContainerRenderer flexContainerRenderer, float flexContainerWidth) {
         final List<IRenderer> childRenderers = flexContainerRenderer.getChildRenderers();
         final List<FlexItemCalculationInfo> flexItems = new ArrayList<>();
         for (final IRenderer renderer : childRenderers) {
             if (renderer instanceof AbstractRenderer) {
                 AbstractRenderer abstractRenderer = (AbstractRenderer) renderer;
-                float flexGrow = (float) renderer.<Float>getProperty(Property.FLEX_GROW, FLEX_GROW_INITIAL_VALUE);
-
-                float flexShrink = (float) renderer.<Float>getProperty(Property.FLEX_SHRINK, FLEX_SHRINK_INITIAL_VALUE);
 
                 // TODO DEVSIX-5091 improve determining of the flex base size when flex-basis: content
-                float maxWidth = abstractRenderer.getMinMaxWidth().getMaxWidth();
-                maxWidth = abstractRenderer.applyMarginsBordersPaddings(new Rectangle(maxWidth, 0), false).getWidth();
+                float maxWidth = calculateMaxWidth(abstractRenderer, flexContainerWidth);
+                float flexBasis;
+                if (renderer.<UnitValue>getProperty(Property.FLEX_BASIS) == null) {
+                    flexBasis = maxWidth;
+                } else {
+                    flexBasis = (float) abstractRenderer.retrieveUnitValue(flexContainerWidth, Property.FLEX_BASIS);
+                    if (AbstractRenderer.isBorderBoxSizing(abstractRenderer)) {
+                        flexBasis -= AbstractRenderer.calculatePaddingBorderWidth(abstractRenderer);
+                    }
+                }
+                flexBasis = Math.max(flexBasis, 0);
 
-                UnitValue flexBasis = renderer.getProperty(Property.FLEX_BASIS, UnitValue.createPointValue(maxWidth));
+                float flexGrow = (float) renderer.<Float>getProperty(Property.FLEX_GROW, FLEX_GROW_INITIAL_VALUE);
+
+                float flexShrink = (float) renderer.<Float>getProperty(Property.FLEX_SHRINK, FLEX_SHRINK_INITIAL_VALUE);
 
                 final FlexItemCalculationInfo flexItemInfo = new FlexItemCalculationInfo(
-                        (AbstractRenderer) renderer, flexBasis, flexGrow, flexShrink, flexContainerBBox.getWidth());
+                        (AbstractRenderer) renderer, flexBasis, flexGrow, flexShrink, flexContainerWidth);
 
                 flexItems.add(flexItemInfo);
             }
         }
         return flexItems;
     }
 
+    private static float calculateMaxWidth(AbstractRenderer flexItemRenderer, float flexContainerWidth) {
+        Float maxWidth;
+        if (flexItemRenderer instanceof TableRenderer) {
+            // TODO DEVSIX-5214 we can't call TableRenderer#retrieveWidth method as far as it can throw NPE
+            maxWidth = flexItemRenderer.getMinMaxWidth().getMaxWidth();
+            maxWidth = flexItemRenderer.applyMarginsBordersPaddings(
+                    new Rectangle((float) maxWidth, 0), false).getWidth();
+        } else {
+            // We need to retrieve width and max-width manually because this methods take into account box-sizing
+            maxWidth = flexItemRenderer.retrieveWidth(flexContainerWidth);
+            if (maxWidth == null) {
+                maxWidth = flexItemRenderer.retrieveMaxWidth(flexContainerWidth);
+            }
+            if (maxWidth == null) {
+                maxWidth = flexItemRenderer.getMinMaxWidth().getMaxWidth();
+                maxWidth = flexItemRenderer.applyMarginsBordersPaddings(
+                        new Rectangle((float) maxWidth, 0), false).getWidth();
+            }
+        }
+        return (float) maxWidth;
+    }
+
     static class FlexItemCalculationInfo {
         AbstractRenderer renderer;
-        UnitValue flexBasis;
+        float flexBasis;
         float flexShrink;
         float flexGrow;
         float minContent;
@@ -656,12 +681,9 @@ static class FlexItemCalculationInfo {
         float hypotheticalMainSize;
         float hypotheticalCrossSize;
 
-        public FlexItemCalculationInfo(AbstractRenderer renderer, UnitValue flexBasis,
+        public FlexItemCalculationInfo(AbstractRenderer renderer, float flexBasis,
                 float flexGrow, float flexShrink, float areaWidth) {
             this.renderer = renderer;
-            if (null == flexBasis) {
-                throw new IllegalArgumentException(LayoutExceptionMessageConstant.FLEX_BASIS_CANNOT_BE_NULL);
-            }
             this.flexBasis = flexBasis;
             if (flexShrink < 0) {
                 throw new IllegalArgumentException(LayoutExceptionMessageConstant.FLEX_SHRINK_CANNOT_BE_NEGATIVE);

layout/src/test/java/com/itextpdf/layout/element/FlexContainerTest.java

@@ -33,6 +33,7 @@ This file is part of the iText (R) project.
 import com.itextpdf.layout.borders.SolidBorder;
 import com.itextpdf.layout.property.AlignmentPropertyValue;
 import com.itextpdf.layout.property.Background;
+import com.itextpdf.layout.property.BoxSizingPropertyValue;
 import com.itextpdf.layout.property.JustifyContent;
 import com.itextpdf.layout.property.ListNumberingType;
 import com.itextpdf.layout.property.OverflowPropertyValue;
@@ -966,6 +967,87 @@ public void collapsingMarginsFlexContainerTest() throws IOException, Interrupted
         Assert.assertNull(new CompareTool().compareByContent(outFileName, cmpFileName, destinationFolder, "diff"));
     }
 
+    @Test
+    public void flexItemBoxSizingTest() throws IOException, InterruptedException {
+        String outFileName = destinationFolder + "flexItemBoxSizingTest" + comparisonPdfId + ".pdf";
+        String cmpFileName = sourceFolder + "cmp_flexItemBoxSizingTest" + comparisonPdfId + ".pdf";
+        PdfDocument pdfDocument = new PdfDocument(new PdfWriter(outFileName));
+
+        Document document = new Document(pdfDocument);
+
+        Div flexContainer = createFlexContainer();
+        flexContainer.setProperty(Property.BORDER, new SolidBorder(ColorConstants.BLUE, 30));
+        flexContainer.setProperty(Property.BACKGROUND, new Background(ColorConstants.LIGHT_GRAY));
+        flexContainer.setWidth(450);
+        flexContainer.setHeight(200);
+
+        Div innerDiv = new Div();
+        innerDiv.setWidth(120);
+        innerDiv.setHeight(120);
+        innerDiv.setProperty(Property.BOX_SIZING, BoxSizingPropertyValue.BORDER_BOX);
+        innerDiv.setProperty(Property.BACKGROUND, new Background(ColorConstants.GREEN));
+        innerDiv.setBorder(new SolidBorder(ColorConstants.RED, 20));
+        innerDiv.setProperty(Property.FLEX_GROW, 0.3F);
+
+        Div innerDiv2 = new Div();
+        innerDiv2.setProperty(Property.FLEX_BASIS, UnitValue.createPointValue(120));
+        innerDiv2.setProperty(Property.BOX_SIZING, BoxSizingPropertyValue.BORDER_BOX);
+        innerDiv2.setProperty(Property.BACKGROUND, new Background(ColorConstants.GREEN));
+        innerDiv2.setBorder(new SolidBorder(ColorConstants.RED, 20));
+        innerDiv2.setProperty(Property.FLEX_GROW, 0.3F);
+
+        Div innerDiv3 = new Div();
+        innerDiv3.setProperty(Property.BOX_SIZING, BoxSizingPropertyValue.BORDER_BOX);
+        innerDiv3.setProperty(Property.BACKGROUND, new Background(ColorConstants.GREEN));
+        innerDiv3.setBorder(new SolidBorder(ColorConstants.RED, 20));
+
+        Div innerDivChild =
+                new Div().setBorder(new SolidBorder(ColorConstants.ORANGE, 10)).setBackgroundColor(ColorConstants.PINK).setWidth(50).setHeight(50);
+        innerDivChild.setProperty(Property.BOX_SIZING, BoxSizingPropertyValue.BORDER_BOX);
+        innerDiv.add(innerDivChild);
+        innerDiv2.add(innerDivChild);
+        innerDiv3.add(innerDivChild);
+
+        Div divToCompare = new Div().setWidth(450).setHeight(100).setBackgroundColor(ColorConstants.MAGENTA).setMarginTop(50);
+
+        flexContainer.add(innerDiv).add(innerDiv2).add(innerDiv3);
+        document.add(flexContainer).add(divToCompare);
+        document.close();
+
+        Assert.assertNull(new CompareTool().compareByContent(outFileName, cmpFileName, destinationFolder, "diff"));
+    }
+
+    @Test
+    public void flexContainerBoxSizingTest() throws IOException, InterruptedException {
+        String outFileName = destinationFolder + "flexContainerBoxSizingTest" + comparisonPdfId + ".pdf";
+        String cmpFileName = sourceFolder + "cmp_flexContainerBoxSizingTest" + comparisonPdfId + ".pdf";
+        PdfDocument pdfDocument = new PdfDocument(new PdfWriter(outFileName));
+
+        Document document = new Document(pdfDocument);
+
+        Div flexContainer = createFlexContainer();
+        flexContainer.setProperty(Property.BORDER, new SolidBorder(ColorConstants.BLUE, 30));
+        flexContainer.setProperty(Property.BACKGROUND, new Background(ColorConstants.LIGHT_GRAY));
+        flexContainer.setWidth(450);
+        flexContainer.setProperty(Property.BOX_SIZING, BoxSizingPropertyValue.BORDER_BOX);
+
+        Div innerDiv = new Div();
+        innerDiv.setWidth(120);
+        Div innerDivChild =
+                new Div().setBorder(new SolidBorder(ColorConstants.ORANGE, 10)).setBackgroundColor(ColorConstants.PINK).setWidth(100).setHeight(100);
+        innerDiv.add(innerDivChild);
+        innerDiv.setProperty(Property.BACKGROUND, new Background(ColorConstants.GREEN));
+        innerDiv.setBorder(new SolidBorder(ColorConstants.RED, 20));
+
+        Div divToCompare = new Div().setWidth(450).setHeight(100).setBackgroundColor(ColorConstants.MAGENTA).setMarginTop(50);
+
+        flexContainer.add(innerDiv).add(createNewDiv());
+        document.add(flexContainer).add(divToCompare);
+        document.close();
+
+        Assert.assertNull(new CompareTool().compareByContent(outFileName, cmpFileName, destinationFolder, "diff"));
+    }
+
     private Div getFlexContainer(OverflowPropertyValue overflowX, Style style) {
         FlexContainer flexContainer = createFlexContainer();
         flexContainer