Title: [286458] trunk
Revision
286458
Author
[email protected]
Date
2021-12-02 15:26:22 -0800 (Thu, 02 Dec 2021)

Log Message

[css-values-4] Support `*vi` (inline) and `*vb` (block) viewport units
https://bugs.webkit.org/show_bug.cgi?id=232895
<rdar://problem/85179134>

Reviewed by Simon Fraser.

Source/WebCore:

`*vi` is equal to 1% of the size of the UA-default/large/small/dynamic viewport size in the direction of the root element’s inline axis.
`*vb` is equal to 1% of the size of the initial containing block UA-default/small/large/dynamic viewport size in the direction of the root element’s block axis.
As an example, on `about:blank`:
- `vi` would be equal to `vw`
- `vb` would be equal to `vh`
- `svi` would be equal to `svw`
- `svb` would be equal to `svh`
- `lvi` would be equal to `lvw`
- `lvb` would be equal to `lvh`
- `dvi` would be equal to `dvw`
- `dvb` would be equal to `dvh`

Spec: <https://drafts.csswg.org/css-values-4/#viewport-variants>

Tests: CSSViewportUnits.AllSame
       CSSViewportUnits.EmptyUnobscuredSizeOverrides
       CSSViewportUnits.SameUnobscuredSizeOverrides
       CSSViewportUnits.DifferentUnobscuredSizeOverrides
       CSSViewportUnits.SVGDocument

* css/CSSUnits.h:
* css/CSSUnits.cpp:
(WebCore::operator<<):
* css/CSSPrimitiveValue.h:
(WebCore::CSSPrimitiveValue::isViewportPercentageLength):
* css/CSSPrimitiveValue.cpp:
(WebCore::isValidCSSUnitTypeForDoubleConversion):
(WebCore::isStringType):
(WebCore::CSSPrimitiveValue::cleanup):
(WebCore::lengthOfViewportPhysicalAxisForLogicalAxis): Added.
(WebCore::CSSPrimitiveValue::computeUnzoomedNonCalcLengthDouble):
(WebCore::CSSPrimitiveValue::computeNonCalcLengthDouble):
(WebCore::CSSPrimitiveValue::unitTypeString):
(WebCore::CSSPrimitiveValue::formatNumberForCustomCSSText const):
(WebCore::CSSPrimitiveValue::equals const):
* css/parser/CSSParserToken.cpp:
(WebCore::cssPrimitiveValueUnitFromTrie):
* css/parser/CSSPropertyParserHelpers.cpp:
(WebCore::CSSPropertyParserHelpers::consumeLengthRawWithKnownTokenTypeDimension):
* css/calc/CSSCalcCategoryMapping.cpp:
(WebCore::calcUnitCategory):
(WebCore::calculationCategoryForCombination):
(WebCore::hasDoubleValue):

Source/WebInspectorUI:

* UserInterface/Models/CSSCompletions.js:

Tools:

* TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.html:
* TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.svg: Added.
* TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm:
(TEST.CSSViewportUnits.AllSame):
(TEST.CSSViewportUnits.EmptyUnobscuredSizeOverrides):
(TEST.CSSViewportUnits.SameUnobscuredSizeOverrides):
(TEST.CSSViewportUnits.DifferentUnobscuredSizeOverrides):
(TEST.CSSViewportUnits.SVGDocument): Added.

* TestWebKitAPI/TestWebKitAPI.xcodeproj/project.pbxproj:

Modified Paths

Added Paths

Diff

Modified: trunk/Source/WebCore/ChangeLog (286457 => 286458)


--- trunk/Source/WebCore/ChangeLog	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/ChangeLog	2021-12-02 23:26:22 UTC (rev 286458)
@@ -1,3 +1,55 @@
+2021-12-02  Devin Rousso  <[email protected]>
+
+        [css-values-4] Support `*vi` (inline) and `*vb` (block) viewport units
+        https://bugs.webkit.org/show_bug.cgi?id=232895
+        <rdar://problem/85179134>
+
+        Reviewed by Simon Fraser.
+
+        `*vi` is equal to 1% of the size of the UA-default/large/small/dynamic viewport size in the direction of the root element’s inline axis.
+        `*vb` is equal to 1% of the size of the initial containing block UA-default/small/large/dynamic viewport size in the direction of the root element’s block axis.
+        As an example, on `about:blank`:
+        - `vi` would be equal to `vw`
+        - `vb` would be equal to `vh`
+        - `svi` would be equal to `svw`
+        - `svb` would be equal to `svh`
+        - `lvi` would be equal to `lvw`
+        - `lvb` would be equal to `lvh`
+        - `dvi` would be equal to `dvw`
+        - `dvb` would be equal to `dvh`
+
+        Spec: <https://drafts.csswg.org/css-values-4/#viewport-variants>
+
+        Tests: CSSViewportUnits.AllSame
+               CSSViewportUnits.EmptyUnobscuredSizeOverrides
+               CSSViewportUnits.SameUnobscuredSizeOverrides
+               CSSViewportUnits.DifferentUnobscuredSizeOverrides
+               CSSViewportUnits.SVGDocument
+
+        * css/CSSUnits.h:
+        * css/CSSUnits.cpp:
+        (WebCore::operator<<):
+        * css/CSSPrimitiveValue.h:
+        (WebCore::CSSPrimitiveValue::isViewportPercentageLength):
+        * css/CSSPrimitiveValue.cpp:
+        (WebCore::isValidCSSUnitTypeForDoubleConversion):
+        (WebCore::isStringType):
+        (WebCore::CSSPrimitiveValue::cleanup):
+        (WebCore::lengthOfViewportPhysicalAxisForLogicalAxis): Added.
+        (WebCore::CSSPrimitiveValue::computeUnzoomedNonCalcLengthDouble):
+        (WebCore::CSSPrimitiveValue::computeNonCalcLengthDouble):
+        (WebCore::CSSPrimitiveValue::unitTypeString):
+        (WebCore::CSSPrimitiveValue::formatNumberForCustomCSSText const):
+        (WebCore::CSSPrimitiveValue::equals const):
+        * css/parser/CSSParserToken.cpp:
+        (WebCore::cssPrimitiveValueUnitFromTrie):
+        * css/parser/CSSPropertyParserHelpers.cpp:
+        (WebCore::CSSPropertyParserHelpers::consumeLengthRawWithKnownTokenTypeDimension):
+        * css/calc/CSSCalcCategoryMapping.cpp:
+        (WebCore::calcUnitCategory):
+        (WebCore::calculationCategoryForCombination):
+        (WebCore::hasDoubleValue):
+
 2021-12-02  Chris Dumez  <[email protected]>
 
         Unreviewed follow-up to r286453 to address comments from Darin.

Modified: trunk/Source/WebCore/css/CSSPrimitiveValue.cpp (286457 => 286458)


--- trunk/Source/WebCore/css/CSSPrimitiveValue.cpp	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/css/CSSPrimitiveValue.cpp	2021-12-02 23:26:22 UTC (rev 286458)
@@ -39,7 +39,7 @@
 #include "DeprecatedCSSOMPrimitiveValue.h"
 #include "FontCascade.h"
 #include "Length.h"
-#include "Node.h"
+#include "NodeRenderStyle.h"
 #include "Pair.h"
 #include "Rect.h"
 #include "RenderStyle.h"
@@ -62,7 +62,9 @@
     case CSSUnitType::CSS_CM:
     case CSSUnitType::CSS_DEG:
     case CSSUnitType::CSS_DIMENSION:
+    case CSSUnitType::CSS_DVB:
     case CSSUnitType::CSS_DVH:
+    case CSSUnitType::CSS_DVI:
     case CSSUnitType::CSS_DVMAX:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVW:
@@ -82,7 +84,9 @@
     case CSSUnitType::CSS_PX:
     case CSSUnitType::CSS_Q:
     case CSSUnitType::CSS_LHS:
+    case CSSUnitType::CSS_LVB:
     case CSSUnitType::CSS_LVH:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_LVMAX:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVW:
@@ -91,12 +95,16 @@
     case CSSUnitType::CSS_RAD:
     case CSSUnitType::CSS_REMS:
     case CSSUnitType::CSS_S:
+    case CSSUnitType::CSS_SVB:
     case CSSUnitType::CSS_SVH:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_SVMAX:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVW:
     case CSSUnitType::CSS_TURN:
+    case CSSUnitType::CSS_VB:
     case CSSUnitType::CSS_VH:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_VMAX:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VW:
@@ -153,7 +161,9 @@
     case CSSUnitType::CSS_DPCM:
     case CSSUnitType::CSS_DPI:
     case CSSUnitType::CSS_DPPX:
+    case CSSUnitType::CSS_DVB:
     case CSSUnitType::CSS_DVH:
+    case CSSUnitType::CSS_DVI:
     case CSSUnitType::CSS_DVMAX:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVW:
@@ -167,7 +177,9 @@
     case CSSUnitType::CSS_IDENT:
     case CSSUnitType::CSS_IN:
     case CSSUnitType::CSS_KHZ:
+    case CSSUnitType::CSS_LVB:
     case CSSUnitType::CSS_LVH:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_LVMAX:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVW:
@@ -190,7 +202,9 @@
     case CSSUnitType::CSS_REMS:
     case CSSUnitType::CSS_RGBCOLOR:
     case CSSUnitType::CSS_S:
+    case CSSUnitType::CSS_SVB:
     case CSSUnitType::CSS_SVH:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_SVMAX:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVW:
@@ -199,7 +213,9 @@
     case CSSUnitType::CSS_UNICODE_RANGE:
     case CSSUnitType::CSS_UNKNOWN:
     case CSSUnitType::CSS_VALUE_ID:
+    case CSSUnitType::CSS_VB:
     case CSSUnitType::CSS_VH:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_VMAX:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VW:
@@ -554,18 +570,26 @@
     case CSSUnitType::CSS_VH:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VMAX:
+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_SVW:
     case CSSUnitType::CSS_SVH:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVMAX:
+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_LVW:
     case CSSUnitType::CSS_LVH:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVMAX:
+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_DVW:
     case CSSUnitType::CSS_DVH:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVMAX:
+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
     case CSSUnitType::CSS_DPPX:
     case CSSUnitType::CSS_X:
     case CSSUnitType::CSS_DPI:
@@ -648,6 +672,31 @@
 static constexpr double cmPerInch = 2.54;
 static constexpr double QPerInch = 25.4 * 4.0;
 
+static double lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis logicalAxis, const FloatSize& size, const RenderStyle* rootElementStyle)
+{
+    if (!rootElementStyle)
+        return 0;
+
+    switch (mapLogicalAxisToPhysicalAxis(makeTextFlow(rootElementStyle->writingMode(), rootElementStyle->direction()), logicalAxis)) {
+    case BoxAxis::Horizontal:
+        return size.width();
+
+    case BoxAxis::Vertical:
+        return size.height();
+    }
+
+    ASSERT_NOT_REACHED();
+}
+
+static double lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis logicalAxis, const FloatSize& size, const RenderView& renderView)
+{
+    const auto* rootElement = renderView.document().documentElement();
+    if (!rootElement)
+        return 0;
+
+    return lengthOfViewportPhysicalAxisForLogicalAxis(logicalAxis, size, rootElement->renderStyle());
+}
+
 double CSSPrimitiveValue::computeUnzoomedNonCalcLengthDouble(CSSUnitType primitiveType, double value, CSSPropertyID propertyToCompute, const FontMetrics* fontMetrics, const FontCascadeDescription* fontDescription, const FontCascadeDescription* rootFontDescription, const RenderView* renderView)
 {
     switch (primitiveType) {
@@ -702,6 +751,10 @@
         return renderView ? renderView->sizeForCSSDefaultViewportUnits().maxDimension() / 100.0 * value : value;
     case CSSUnitType::CSS_VMIN:
         return renderView ? renderView->sizeForCSSDefaultViewportUnits().minDimension() / 100.0 * value : value;
+    case CSSUnitType::CSS_VB:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, renderView->sizeForCSSDefaultViewportUnits(), *renderView) / 100.0 * value : 0;
+    case CSSUnitType::CSS_VI:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, renderView->sizeForCSSDefaultViewportUnits(), *renderView) / 100.0 * value : 0;
     case CSSUnitType::CSS_SVH:
         return renderView ? renderView->sizeForCSSSmallViewportUnits().height() / 100.0 * value : 0;
     case CSSUnitType::CSS_SVW:
@@ -710,6 +763,10 @@
         return renderView ? renderView->sizeForCSSSmallViewportUnits().maxDimension() / 100.0 * value : value;
     case CSSUnitType::CSS_SVMIN:
         return renderView ? renderView->sizeForCSSSmallViewportUnits().minDimension() / 100.0 * value : value;
+    case CSSUnitType::CSS_SVB:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, renderView->sizeForCSSSmallViewportUnits(), *renderView) / 100.0 * value : 0;
+    case CSSUnitType::CSS_SVI:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, renderView->sizeForCSSSmallViewportUnits(), *renderView) / 100.0 * value : 0;
     case CSSUnitType::CSS_LVH:
         return renderView ? renderView->sizeForCSSLargeViewportUnits().height() / 100.0 * value : 0;
     case CSSUnitType::CSS_LVW:
@@ -718,6 +775,10 @@
         return renderView ? renderView->sizeForCSSLargeViewportUnits().maxDimension() / 100.0 * value : value;
     case CSSUnitType::CSS_LVMIN:
         return renderView ? renderView->sizeForCSSLargeViewportUnits().minDimension() / 100.0 * value : value;
+    case CSSUnitType::CSS_LVB:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, renderView->sizeForCSSLargeViewportUnits(), *renderView) / 100.0 * value : 0;
+    case CSSUnitType::CSS_LVI:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, renderView->sizeForCSSLargeViewportUnits(), *renderView) / 100.0 * value : 0;
     case CSSUnitType::CSS_DVH:
         return renderView ? renderView->sizeForCSSDynamicViewportUnits().height() / 100.0 * value : 0;
     case CSSUnitType::CSS_DVW:
@@ -726,6 +787,10 @@
         return renderView ? renderView->sizeForCSSDynamicViewportUnits().maxDimension() / 100.0 * value : value;
     case CSSUnitType::CSS_DVMIN:
         return renderView ? renderView->sizeForCSSDynamicViewportUnits().minDimension() / 100.0 * value : value;
+    case CSSUnitType::CSS_DVB:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, renderView->sizeForCSSDynamicViewportUnits(), *renderView) / 100.0 * value : 0;
+    case CSSUnitType::CSS_DVI:
+        return renderView ? lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, renderView->sizeForCSSDynamicViewportUnits(), *renderView) / 100.0 * value : 0;
     default:
         ASSERT_NOT_REACHED();
         return -1.0;
@@ -783,6 +848,12 @@
     case CSSUnitType::CSS_VMIN:
         return value * conversionData.defaultViewportFactor().minDimension();
 
+    case CSSUnitType::CSS_VB:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.defaultViewportFactor(), conversionData.rootStyle());
+
+    case CSSUnitType::CSS_VI:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.defaultViewportFactor(), conversionData.rootStyle());
+
     case CSSUnitType::CSS_SVH:
         return value * conversionData.smallViewportFactor().height();
 
@@ -795,6 +866,12 @@
     case CSSUnitType::CSS_SVMIN:
         return value * conversionData.smallViewportFactor().minDimension();
 
+    case CSSUnitType::CSS_SVB:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.smallViewportFactor(), conversionData.rootStyle());
+
+    case CSSUnitType::CSS_SVI:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.smallViewportFactor(), conversionData.rootStyle());
+
     case CSSUnitType::CSS_LVH:
         return value * conversionData.largeViewportFactor().height();
 
@@ -807,6 +884,12 @@
     case CSSUnitType::CSS_LVMIN:
         return value * conversionData.largeViewportFactor().minDimension();
 
+    case CSSUnitType::CSS_LVB:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.largeViewportFactor(), conversionData.rootStyle());
+
+    case CSSUnitType::CSS_LVI:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.largeViewportFactor(), conversionData.rootStyle());
+
     case CSSUnitType::CSS_DVH:
         return value * conversionData.dynamicViewportFactor().height();
 
@@ -819,6 +902,12 @@
     case CSSUnitType::CSS_DVMIN:
         return value * conversionData.dynamicViewportFactor().minDimension();
 
+    case CSSUnitType::CSS_DVB:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.dynamicViewportFactor(), conversionData.rootStyle());
+
+    case CSSUnitType::CSS_DVI:
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.dynamicViewportFactor(), conversionData.rootStyle());
+
     case CSSUnitType::CSS_LHS:
         ASSERT(conversionData.style());
         if (conversionData.computingLineHeight() || conversionData.computingFontSize()) {
@@ -1086,18 +1175,26 @@
         case CSSUnitType::CSS_VH: return "vh";
         case CSSUnitType::CSS_VMIN: return "vmin";
         case CSSUnitType::CSS_VMAX: return "vmax";
+        case CSSUnitType::CSS_VB: return "vb";
+        case CSSUnitType::CSS_VI: return "vi";
         case CSSUnitType::CSS_SVW: return "svw";
         case CSSUnitType::CSS_SVH: return "svh";
         case CSSUnitType::CSS_SVMIN: return "svmin";
         case CSSUnitType::CSS_SVMAX: return "svmax";
+        case CSSUnitType::CSS_SVB: return "svb";
+        case CSSUnitType::CSS_SVI: return "svi";
         case CSSUnitType::CSS_LVW: return "lvw";
         case CSSUnitType::CSS_LVH: return "lvh";
         case CSSUnitType::CSS_LVMIN: return "lvmin";
         case CSSUnitType::CSS_LVMAX: return "lvmax";
+        case CSSUnitType::CSS_LVB: return "lvb";
+        case CSSUnitType::CSS_LVI: return "lvi";
         case CSSUnitType::CSS_DVW: return "dvw";
         case CSSUnitType::CSS_DVH: return "dvh";
         case CSSUnitType::CSS_DVMIN: return "dvmin";
         case CSSUnitType::CSS_DVMAX: return "dvmax";
+        case CSSUnitType::CSS_DVB: return "dvb";
+        case CSSUnitType::CSS_DVI: return "dvi";
         case CSSUnitType::CSS_DPPX: return "dppx";
         case CSSUnitType::CSS_X: return "x";
         case CSSUnitType::CSS_DPI: return "dpi";
@@ -1260,6 +1357,10 @@
         return formatNumberValue("vmin");
     case CSSUnitType::CSS_VMAX:
         return formatNumberValue("vmax");
+    case CSSUnitType::CSS_VB:
+        return formatNumberValue("vb");
+    case CSSUnitType::CSS_VI:
+        return formatNumberValue("vi");
     case CSSUnitType::CSS_SVW:
         return formatNumberValue("svw");
     case CSSUnitType::CSS_SVH:
@@ -1268,6 +1369,10 @@
         return formatNumberValue("svmin");
     case CSSUnitType::CSS_SVMAX:
         return formatNumberValue("svmax");
+    case CSSUnitType::CSS_SVB:
+        return formatNumberValue("svb");
+    case CSSUnitType::CSS_SVI:
+        return formatNumberValue("svi");
     case CSSUnitType::CSS_LVW:
         return formatNumberValue("lvw");
     case CSSUnitType::CSS_LVH:
@@ -1276,6 +1381,10 @@
         return formatNumberValue("lvmin");
     case CSSUnitType::CSS_LVMAX:
         return formatNumberValue("lvmax");
+    case CSSUnitType::CSS_LVB:
+        return formatNumberValue("lvb");
+    case CSSUnitType::CSS_LVI:
+        return formatNumberValue("lvi");
     case CSSUnitType::CSS_DVW:
         return formatNumberValue("dvw");
     case CSSUnitType::CSS_DVH:
@@ -1284,6 +1393,10 @@
         return formatNumberValue("dvmin");
     case CSSUnitType::CSS_DVMAX:
         return formatNumberValue("dvmax");
+    case CSSUnitType::CSS_DVB:
+        return formatNumberValue("dvb");
+    case CSSUnitType::CSS_DVI:
+        return formatNumberValue("dvi");
     case CSSUnitType::CSS_IDENT:
     case CSSUnitType::CSS_UNICODE_RANGE:
     case CSSUnitType::CSS_CALC_PERCENTAGE_WITH_NUMBER:
@@ -1351,18 +1464,26 @@
     case CSSUnitType::CSS_VH:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VMAX:
+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_SVW:
     case CSSUnitType::CSS_SVH:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVMAX:
+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_LVW:
     case CSSUnitType::CSS_LVH:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVMAX:
+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_DVW:
     case CSSUnitType::CSS_DVH:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVMAX:
+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
     case CSSUnitType::CSS_FR:
     case CSSUnitType::CSS_Q:
     case CSSUnitType::CSS_LHS:

Modified: trunk/Source/WebCore/css/CSSPrimitiveValue.h (286457 => 286458)


--- trunk/Source/WebCore/css/CSSPrimitiveValue.h	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/css/CSSPrimitiveValue.h	2021-12-02 23:26:22 UTC (rev 286458)
@@ -322,7 +322,7 @@
 
 constexpr bool CSSPrimitiveValue::isViewportPercentageLength(CSSUnitType type)
 {
-    return type >= CSSUnitType::CSS_VW && type <= CSSUnitType::CSS_DVMAX;
+    return type >= CSSUnitType::FirstViewportCSSUnitType && type <= CSSUnitType::LastViewporCSSUnitType;
 }
 
 template<typename T> inline Ref<CSSPrimitiveValue> CSSPrimitiveValue::create(T&& value)

Modified: trunk/Source/WebCore/css/CSSUnits.cpp (286457 => 286458)


--- trunk/Source/WebCore/css/CSSUnits.cpp	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/css/CSSUnits.cpp	2021-12-02 23:26:22 UTC (rev 286458)
@@ -138,18 +138,26 @@
     case CSSUnitType::CSS_VH: ts << "vh"; break;
     case CSSUnitType::CSS_VMIN: ts << "vmin"; break;
     case CSSUnitType::CSS_VMAX: ts << "vmax"; break;
+    case CSSUnitType::CSS_VB: ts << "vb"; break;
+    case CSSUnitType::CSS_VI: ts << "vi"; break;
     case CSSUnitType::CSS_SVW: ts << "svw"; break;
     case CSSUnitType::CSS_SVH: ts << "svh"; break;
     case CSSUnitType::CSS_SVMIN: ts << "svmin"; break;
     case CSSUnitType::CSS_SVMAX: ts << "svmax"; break;
+    case CSSUnitType::CSS_SVB: ts << "svb"; break;
+    case CSSUnitType::CSS_SVI: ts << "svi"; break;
     case CSSUnitType::CSS_LVW: ts << "lvw"; break;
     case CSSUnitType::CSS_LVH: ts << "lvh"; break;
     case CSSUnitType::CSS_LVMIN: ts << "lvmin"; break;
     case CSSUnitType::CSS_LVMAX: ts << "lvmax"; break;
+    case CSSUnitType::CSS_LVB: ts << "lvb"; break;
+    case CSSUnitType::CSS_LVI: ts << "lvi"; break;
     case CSSUnitType::CSS_DVW: ts << "dvw"; break;
     case CSSUnitType::CSS_DVH: ts << "dvh"; break;
     case CSSUnitType::CSS_DVMIN: ts << "dvmin"; break;
     case CSSUnitType::CSS_DVMAX: ts << "dvmax"; break;
+    case CSSUnitType::CSS_DVB: ts << "dvb"; break;
+    case CSSUnitType::CSS_DVI: ts << "dvi"; break;
     case CSSUnitType::CSS_DPPX: ts << "dppx"; break;
     case CSSUnitType::CSS_X: ts << "x"; break;
     case CSSUnitType::CSS_DPI: ts << "dpi"; break;

Modified: trunk/Source/WebCore/css/CSSUnits.h (286457 => 286458)


--- trunk/Source/WebCore/css/CSSUnits.h	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/css/CSSUnits.h	2021-12-02 23:26:22 UTC (rev 286458)
@@ -55,22 +55,34 @@
     CSS_COUNTER,
     CSS_RECT,
     CSS_RGBCOLOR,
+
     CSS_VW,
     CSS_VH,
     CSS_VMIN,
     CSS_VMAX,
+    CSS_VB,
+    CSS_VI,
     CSS_SVW,
     CSS_SVH,
     CSS_SVMIN,
     CSS_SVMAX,
+    CSS_SVB,
+    CSS_SVI,
     CSS_LVW,
     CSS_LVH,
     CSS_LVMIN,
     CSS_LVMAX,
+    CSS_LVB,
+    CSS_LVI,
     CSS_DVW,
     CSS_DVH,
     CSS_DVMIN,
     CSS_DVMAX,
+    CSS_DVB,
+    CSS_DVI,
+    FirstViewportCSSUnitType = CSS_VW,
+    LastViewporCSSUnitType = CSS_DVI,
+
     CSS_DPPX,
     CSS_X,
     CSS_DPI,

Modified: trunk/Source/WebCore/css/calc/CSSCalcCategoryMapping.cpp (286457 => 286458)


--- trunk/Source/WebCore/css/calc/CSSCalcCategoryMapping.cpp	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/css/calc/CSSCalcCategoryMapping.cpp	2021-12-02 23:26:22 UTC (rev 286458)
@@ -54,18 +54,26 @@
     case CSSUnitType::CSS_VH:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VMAX:
+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_SVW:
     case CSSUnitType::CSS_SVH:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVMAX:
+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_LVW:
     case CSSUnitType::CSS_LVH:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVMAX:
+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_DVW:
     case CSSUnitType::CSS_DVH:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVMAX:
+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
         return CalculationCategory::Length;
     case CSSUnitType::CSS_PERCENTAGE:
         return CalculationCategory::Percent;
@@ -122,18 +130,26 @@
     case CSSUnitType::CSS_VH:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VMAX:
+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_SVW:
     case CSSUnitType::CSS_SVH:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVMAX:
+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_LVW:
     case CSSUnitType::CSS_LVH:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVMAX:
+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_DVW:
     case CSSUnitType::CSS_DVH:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVMAX:
+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
     default:
         return CalculationCategory::Other;
     }
@@ -186,18 +202,26 @@
     case CSSUnitType::CSS_VH:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VMAX:
+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_SVW:
     case CSSUnitType::CSS_SVH:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVMAX:
+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_LVW:
     case CSSUnitType::CSS_LVH:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVMAX:
+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_DVW:
     case CSSUnitType::CSS_DVH:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVMAX:
+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
     case CSSUnitType::CSS_DPPX:
     case CSSUnitType::CSS_X:
     case CSSUnitType::CSS_DPI:

Modified: trunk/Source/WebCore/css/parser/CSSParserToken.cpp (286457 => 286458)


--- trunk/Source/WebCore/css/parser/CSSParserToken.cpp	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/css/parser/CSSParserToken.cpp	2021-12-02 23:26:22 UTC (rev 286458)
@@ -114,8 +114,12 @@
             break;
         case 'v':
             switch (toASCIILower(data[1])) {
+            case 'b':
+                return CSSUnitType::CSS_VB;
             case 'h':
                 return CSSUnitType::CSS_VH;
+            case 'i':
+                return CSSUnitType::CSS_VI;
             case 'w':
                 return CSSUnitType::CSS_VW;
             }
@@ -136,8 +140,12 @@
                 break;
             case 'v':
                 switch (toASCIILower(data[2])) {
+                case 'b':
+                    return CSSUnitType::CSS_DVB;
                 case 'h':
                     return CSSUnitType::CSS_DVH;
+                case 'i':
+                    return CSSUnitType::CSS_DVI;
                 case 'w':
                     return CSSUnitType::CSS_DVW;
                 }
@@ -147,8 +155,12 @@
         case 'l':
             if (toASCIILower(data[1]) == 'v') {
                 switch (toASCIILower(data[2])) {
+                case 'b':
+                    return CSSUnitType::CSS_LVB;
                 case 'h':
                     return CSSUnitType::CSS_LVH;
+                case 'i':
+                    return CSSUnitType::CSS_LVI;
                 case 'w':
                     return CSSUnitType::CSS_LVW;
                 }
@@ -177,8 +189,12 @@
         case 's':
             if (toASCIILower(data[1]) == 'v') {
                 switch (toASCIILower(data[2])) {
+                case 'b':
+                    return CSSUnitType::CSS_SVB;
                 case 'h':
                     return CSSUnitType::CSS_SVH;
+                case 'i':
+                    return CSSUnitType::CSS_SVI;
                 case 'w':
                     return CSSUnitType::CSS_SVW;
                 }

Modified: trunk/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp (286457 => 286458)


--- trunk/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp	2021-12-02 23:26:22 UTC (rev 286458)
@@ -488,18 +488,26 @@
     case CSSUnitType::CSS_VH:
     case CSSUnitType::CSS_VMIN:
     case CSSUnitType::CSS_VMAX:
+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
     case CSSUnitType::CSS_SVW:
     case CSSUnitType::CSS_SVH:
     case CSSUnitType::CSS_SVMIN:
     case CSSUnitType::CSS_SVMAX:
+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
     case CSSUnitType::CSS_LVW:
     case CSSUnitType::CSS_LVH:
     case CSSUnitType::CSS_LVMIN:
     case CSSUnitType::CSS_LVMAX:
+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
     case CSSUnitType::CSS_DVW:
     case CSSUnitType::CSS_DVH:
     case CSSUnitType::CSS_DVMIN:
     case CSSUnitType::CSS_DVMAX:
+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
     case CSSUnitType::CSS_Q:
         break;
     default:

Modified: trunk/Source/WebInspectorUI/ChangeLog (286457 => 286458)


--- trunk/Source/WebInspectorUI/ChangeLog	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebInspectorUI/ChangeLog	2021-12-02 23:26:22 UTC (rev 286458)
@@ -1,3 +1,13 @@
+2021-12-02  Devin Rousso  <[email protected]>
+
+        [css-values-4] Support `*vi` (inline) and `*vb` (block) viewport units
+        https://bugs.webkit.org/show_bug.cgi?id=232895
+        <rdar://problem/85179134>
+
+        Reviewed by Simon Fraser.
+
+        * UserInterface/Models/CSSCompletions.js:
+
 2021-12-01  Patrick Angle  <[email protected]>
 
         Web Inspector: Console execution context can become an unexpected selection on refresh/navigation

Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js (286457 => 286458)


--- trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js	2021-12-02 23:26:22 UTC (rev 286458)
@@ -343,7 +343,9 @@
 WI.CSSCompletions.lengthUnits = new Set([
     "ch",
     "cm",
+    "dvb",
     "dvh",
+    "dvi",
     "dvmax",
     "dvmin",
     "dvw",
@@ -350,7 +352,9 @@
     "em",
     "ex",
     "in",
+    "lvb",
     "lvh",
+    "lvi",
     "lvmax",
     "lvmin",
     "lvw",
@@ -360,11 +364,15 @@
     "px",
     "q",
     "rem",
+    "svb",
     "svh",
+    "svi",
     "svmax",
     "svmin",
     "svw",
+    "vb",
     "vh",
+    "vi",
     "vmax",
     "vmin",
     "vw",

Modified: trunk/Tools/ChangeLog (286457 => 286458)


--- trunk/Tools/ChangeLog	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Tools/ChangeLog	2021-12-02 23:26:22 UTC (rev 286458)
@@ -1,3 +1,22 @@
+2021-12-02  Devin Rousso  <[email protected]>
+
+        [css-values-4] Support `*vi` (inline) and `*vb` (block) viewport units
+        https://bugs.webkit.org/show_bug.cgi?id=232895
+        <rdar://problem/85179134>
+
+        Reviewed by Simon Fraser.
+
+        * TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.html:
+        * TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.svg: Added.
+        * TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm:
+        (TEST.CSSViewportUnits.AllSame):
+        (TEST.CSSViewportUnits.EmptyUnobscuredSizeOverrides):
+        (TEST.CSSViewportUnits.SameUnobscuredSizeOverrides):
+        (TEST.CSSViewportUnits.DifferentUnobscuredSizeOverrides):
+        (TEST.CSSViewportUnits.SVGDocument): Added.
+
+        * TestWebKitAPI/TestWebKitAPI.xcodeproj/project.pbxproj:
+
 2021-12-02  Chris Dumez  <[email protected]>
 
         [WK2] Make Web Lock API work across multiple WebProcesses

Modified: trunk/Tools/TestWebKitAPI/TestWebKitAPI.xcodeproj/project.pbxproj (286457 => 286458)


--- trunk/Tools/TestWebKitAPI/TestWebKitAPI.xcodeproj/project.pbxproj	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Tools/TestWebKitAPI/TestWebKitAPI.xcodeproj/project.pbxproj	2021-12-02 23:26:22 UTC (rev 286458)
@@ -763,6 +763,7 @@
 		93F7E86F14DC8E5C00C84A99 /* NewFirstVisuallyNonEmptyLayoutFrames_Bundle.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 93F7E86E14DC8E5B00C84A99 /* NewFirstVisuallyNonEmptyLayoutFrames_Bundle.cpp */; };
 		93FCDB34263631560046DD7D /* SortedArrayMap.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 93FCDB33263631560046DD7D /* SortedArrayMap.cpp */; };
 		952F7167270BD9CB00D00DCC /* CSSViewportUnits.html in Copy Resources */ = {isa = PBXBuildFile; fileRef = 952F7166270BD99700D00DCC /* CSSViewportUnits.html */; };
+		952F7167270BD9CB00D00DCD /* CSSViewportUnits.svg in Copy Resources */ = {isa = PBXBuildFile; fileRef = 952F7166270BD99700D00DCD /* CSSViewportUnits.svg */; };
 		996EDCCB270E70D7006DF175 /* InspectorExtension-basic-page.html in Copy Resources */ = {isa = PBXBuildFile; fileRef = 996EDCCA270E70AB006DF175 /* InspectorExtension-basic-page.html */; };
 		9984FACE1CFFB090008D198C /* editable-body.html in Copy Resources */ = {isa = PBXBuildFile; fileRef = 9984FACD1CFFB038008D198C /* editable-body.html */; };
 		99E2846626F93DB50003F1FA /* InspectorExtension-TabIcon-30x30.png in Copy Resources */ = {isa = PBXBuildFile; fileRef = 99E2846526F93D760003F1FA /* InspectorExtension-TabIcon-30x30.png */; };
@@ -1269,6 +1270,7 @@
 				7AEAD4811E20122700416EFE /* CrossPartitionFileSchemeAccess.html in Copy Resources */,
 				4995A6F025E8772000E5F0A9 /* csp-document-uri-report.html in Copy Resources */,
 				952F7167270BD9CB00D00DCC /* CSSViewportUnits.html in Copy Resources */,
+				952F7167270BD9CB00D00DCD /* CSSViewportUnits.svg in Copy Resources */,
 				2DDD4DA4270B8B3500659A61 /* cube.usdz in Copy Resources */,
 				F4AB578A1F65165400DB0DA1 /* custom-draggable-div.html in Copy Resources */,
 				290F4275172A221C00939FF0 /* custom-protocol-sync-xhr.html in Copy Resources */,
@@ -2508,6 +2510,7 @@
 		950E4CC0252E75230071659F /* iOSStylusSupport.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = iOSStylusSupport.mm; sourceTree = "<group>"; };
 		952F7164270BD97E00D00DCC /* CSSViewportUnits.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = CSSViewportUnits.mm; sourceTree = "<group>"; };
 		952F7166270BD99700D00DCC /* CSSViewportUnits.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = CSSViewportUnits.html; sourceTree = "<group>"; };
+		952F7166270BD99700D00DCD /* CSSViewportUnits.svg */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = CSSViewportUnits.svg; sourceTree = "<group>"; };
 		953ABB3425C0D681004C8B73 /* WKWebViewUnderPageBackgroundColor.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = WKWebViewUnderPageBackgroundColor.mm; sourceTree = "<group>"; };
 		958B70E026C46EDC00B2022B /* NSAttributedStringWebKitAdditions.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = NSAttributedStringWebKitAdditions.mm; sourceTree = "<group>"; };
 		95A524942581A10D00461FE9 /* WKWebViewThemeColor.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = WKWebViewThemeColor.mm; sourceTree = "<group>"; };
@@ -3989,6 +3992,7 @@
 				9B62630B1F8C2510007EE29B /* copy-url.html */,
 				4995A6EF25E876A300E5F0A9 /* csp-document-uri-report.html */,
 				952F7166270BD99700D00DCC /* CSSViewportUnits.html */,
+				952F7166270BD99700D00DCD /* CSSViewportUnits.svg */,
 				F4AB57891F65164B00DB0DA1 /* custom-draggable-div.html */,
 				F47DFB2421A8704A00021FB6 /* data-detectors.html */,
 				F486B1CF1F6794FF00F34BDD /* DataTransfer-setDragImage.html */,

Modified: trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.html (286457 => 286458)


--- trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.html	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.html	2021-12-02 23:26:22 UTC (rev 286458)
@@ -19,19 +19,27 @@
     <div id="vh" style="height: 100vh;"></div>
     <div id="vmin" style="height: 100vmin;"></div>
     <div id="vmax" style="height: 100vmax;"></div>
+    <div id="vb" style="height: 100vb;"></div>
+    <div id="vi" style="height: 100vi;"></div>
 
     <div id="svw" style="height: 100svw;"></div>
     <div id="svh" style="height: 100svh;"></div>
     <div id="svmin" style="height: 100svmin;"></div>
     <div id="svmax" style="height: 100svmax;"></div>
+    <div id="svb" style="height: 100svb;"></div>
+    <div id="svi" style="height: 100svi;"></div>
 
     <div id="lvw" style="height: 100lvw;"></div>
     <div id="lvh" style="height: 100lvh;"></div>
     <div id="lvmin" style="height: 100lvmin;"></div>
     <div id="lvmax" style="height: 100lvmax;"></div>
+    <div id="lvb" style="height: 100lvb;"></div>
+    <div id="lvi" style="height: 100lvi;"></div>
 
     <div id="dvw" style="height: 100dvw;"></div>
     <div id="dvh" style="height: 100dvh;"></div>
     <div id="dvmin" style="height: 100dvmin;"></div>
     <div id="dvmax" style="height: 100dvmax;"></div>
+    <div id="dvb" style="height: 100dvb;"></div>
+    <div id="dvi" style="height: 100dvi;"></div>
 </body>

Modified: trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm (286457 => 286458)


--- trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm	2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm	2021-12-02 23:26:22 UTC (rev 286458)
@@ -65,21 +65,33 @@
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
 
 #if PLATFORM(IOS_FAMILY)
     [webView scrollView].zoomScale = 2;
@@ -93,21 +105,68 @@
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
+
+    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    [webView waitForNextPresentationUpdate];
+
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vw"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vh"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vmin"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvi"));
+
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
+    }
 }
 
 #if PLATFORM(IOS_FAMILY)
@@ -124,21 +183,33 @@
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
 
     [webView scrollView].zoomScale = 2;
     [webView waitForNextPresentationUpdate];
@@ -147,21 +218,68 @@
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
+
+    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    [webView waitForNextPresentationUpdate];
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvi"));
+
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
+    }
 }
 
 TEST(CSSViewportUnits, SameUnobscuredSizeOverrides)
@@ -176,21 +294,33 @@
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
 
     [webView scrollView].zoomScale = 2;
     [webView waitForNextPresentationUpdate];
@@ -199,21 +329,68 @@
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
+
+    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    [webView waitForNextPresentationUpdate];
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvi"));
+
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
+    }
 }
 
 TEST(CSSViewportUnits, DifferentUnobscuredSizeOverrides)
@@ -228,21 +405,33 @@
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
 
     [webView scrollView].zoomScale = 2;
     [webView waitForNextPresentationUpdate];
@@ -251,21 +440,201 @@
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vh"));
     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vmin"));
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vi"));
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
 
     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvw"));
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvh"));
     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvmin"));
     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvi"));
 
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvw"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvh"));
-    EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmin"));
-    EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), viewportUnitLength(webView, @"dvmax"));
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
+
+    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    [webView waitForNextPresentationUpdate];
+
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vw"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vh"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vmin"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vmax"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvi"));
+
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
+    }
 }
 
 #endif // PLATFORM(IOS_FAMILY)
+
+TEST(CSSViewportUnits, SVGDocument)
+{
+    auto webView = adoptNS([[TestWKWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 500)]);
+    [webView loadRequest:[NSURLRequest requestWithURL:[[NSBundle mainBundle] URLForResource:@"CSSViewportUnits" withExtension:@"svg" subdirectory:@"TestWebKitAPI.resources"]]];
+    [webView _test_waitForDidFinishNavigation];
+    [webView waitForNextPresentationUpdate];
+
+    {
+        double vw = viewportUnitLength(webView, @"vw");
+        double vh = viewportUnitLength(webView, @"vh");
+        EXPECT_GE(vw, 320);
+        EXPECT_GE(vh, 500);
+        EXPECT_FLOAT_EQ(vw, viewportUnitLength(webView, @"vmin"));
+        EXPECT_FLOAT_EQ(vh, viewportUnitLength(webView, @"vmax"));
+        EXPECT_FLOAT_EQ(vh, viewportUnitLength(webView, @"vb"));
+        EXPECT_FLOAT_EQ(vw, viewportUnitLength(webView, @"vi"));
+
+        double svw = viewportUnitLength(webView, @"svw");
+        double svh = viewportUnitLength(webView, @"svh");
+        EXPECT_FLOAT_EQ(vw, svw);
+        EXPECT_FLOAT_EQ(vh, svh);
+        EXPECT_FLOAT_EQ(svw, viewportUnitLength(webView, @"svmin"));
+        EXPECT_FLOAT_EQ(svh, viewportUnitLength(webView, @"svmax"));
+        EXPECT_FLOAT_EQ(svh, viewportUnitLength(webView, @"svb"));
+        EXPECT_FLOAT_EQ(svw, viewportUnitLength(webView, @"svi"));
+
+        double lvw = viewportUnitLength(webView, @"lvw");
+        double lvh = viewportUnitLength(webView, @"lvh");
+        EXPECT_FLOAT_EQ(vw, lvw);
+        EXPECT_FLOAT_EQ(vh, lvh);
+        EXPECT_FLOAT_EQ(lvw, viewportUnitLength(webView, @"lvmin"));
+        EXPECT_FLOAT_EQ(lvh, viewportUnitLength(webView, @"lvmax"));
+        EXPECT_FLOAT_EQ(lvh, viewportUnitLength(webView, @"lvb"));
+        EXPECT_FLOAT_EQ(lvw, viewportUnitLength(webView, @"lvi"));
+
+        double dvw = viewportUnitLength(webView, @"dvw");
+        double dvh = viewportUnitLength(webView, @"dvh");
+        EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), dvw);
+        EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), dvh);
+        EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(dvh, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(dvh, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvi"));
+    };
+
+#if PLATFORM(IOS_FAMILY)
+    [webView scrollView].zoomScale = 2;
+#elif PLATFORM(MAC)
+    [webView setAllowsMagnification:YES];
+    [webView setMagnification:2];
+#endif
+    [webView waitForNextPresentationUpdate];
+
+    {
+        double vw = viewportUnitLength(webView, @"vw");
+        double vh = viewportUnitLength(webView, @"vh");
+        EXPECT_GE(vw, 320);
+        EXPECT_GE(vh, 500);
+        EXPECT_FLOAT_EQ(vw, viewportUnitLength(webView, @"vmin"));
+        EXPECT_FLOAT_EQ(vh, viewportUnitLength(webView, @"vmax"));
+        EXPECT_FLOAT_EQ(vh, viewportUnitLength(webView, @"vb"));
+        EXPECT_FLOAT_EQ(vw, viewportUnitLength(webView, @"vi"));
+
+        double svw = viewportUnitLength(webView, @"svw");
+        double svh = viewportUnitLength(webView, @"svh");
+        EXPECT_FLOAT_EQ(vw, svw);
+        EXPECT_FLOAT_EQ(vh, svh);
+        EXPECT_FLOAT_EQ(svw, viewportUnitLength(webView, @"svmin"));
+        EXPECT_FLOAT_EQ(svh, viewportUnitLength(webView, @"svmax"));
+        EXPECT_FLOAT_EQ(svh, viewportUnitLength(webView, @"svb"));
+        EXPECT_FLOAT_EQ(svw, viewportUnitLength(webView, @"svi"));
+
+        double lvw = viewportUnitLength(webView, @"lvw");
+        double lvh = viewportUnitLength(webView, @"lvh");
+        EXPECT_FLOAT_EQ(vw, lvw);
+        EXPECT_FLOAT_EQ(vh, lvh);
+        EXPECT_FLOAT_EQ(lvw, viewportUnitLength(webView, @"lvmin"));
+        EXPECT_FLOAT_EQ(lvh, viewportUnitLength(webView, @"lvmax"));
+        EXPECT_FLOAT_EQ(lvh, viewportUnitLength(webView, @"lvb"));
+        EXPECT_FLOAT_EQ(lvw, viewportUnitLength(webView, @"lvi"));
+
+        double dvw = viewportUnitLength(webView, @"dvw");
+        double dvh = viewportUnitLength(webView, @"dvh");
+        EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), dvw);
+        EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), dvh);
+        EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(dvh, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(dvh, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvi"));
+    }
+
+    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    [webView waitForNextPresentationUpdate];
+
+    {
+        double vw = viewportUnitLength(webView, @"vw");
+        double vh = viewportUnitLength(webView, @"vh");
+        EXPECT_GE(vw, 320);
+        EXPECT_GE(vh, 500);
+        EXPECT_FLOAT_EQ(vw, viewportUnitLength(webView, @"vmin"));
+        EXPECT_FLOAT_EQ(vh, viewportUnitLength(webView, @"vmax"));
+        EXPECT_FLOAT_EQ(vw, viewportUnitLength(webView, @"vb"));
+        EXPECT_FLOAT_EQ(vh, viewportUnitLength(webView, @"vi"));
+
+        double svw = viewportUnitLength(webView, @"svw");
+        double svh = viewportUnitLength(webView, @"svh");
+        EXPECT_FLOAT_EQ(vw, svw);
+        EXPECT_FLOAT_EQ(vh, svh);
+        EXPECT_FLOAT_EQ(svw, viewportUnitLength(webView, @"svmin"));
+        EXPECT_FLOAT_EQ(svh, viewportUnitLength(webView, @"svmax"));
+        EXPECT_FLOAT_EQ(svw, viewportUnitLength(webView, @"svb"));
+        EXPECT_FLOAT_EQ(svh, viewportUnitLength(webView, @"svi"));
+
+        double lvw = viewportUnitLength(webView, @"lvw");
+        double lvh = viewportUnitLength(webView, @"lvh");
+        EXPECT_FLOAT_EQ(vw, lvw);
+        EXPECT_FLOAT_EQ(vh, lvh);
+        EXPECT_FLOAT_EQ(lvw, viewportUnitLength(webView, @"lvmin"));
+        EXPECT_FLOAT_EQ(lvh, viewportUnitLength(webView, @"lvmax"));
+        EXPECT_FLOAT_EQ(lvw, viewportUnitLength(webView, @"lvb"));
+        EXPECT_FLOAT_EQ(lvh, viewportUnitLength(webView, @"lvi"));
+
+        double dvw = viewportUnitLength(webView, @"dvw");
+        double dvh = viewportUnitLength(webView, @"dvh");
+        EXPECT_FLOAT_EQ(widthOfElementWithID(webView, @"fixed"), dvw);
+        EXPECT_FLOAT_EQ(heightOfElementWithID(webView, @"fixed"), dvh);
+        EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(dvh, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(dvh, viewportUnitLength(webView, @"dvi"));
+    }
+}

Added: trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.svg (0 => 286458)


--- trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.svg	                        (rev 0)
+++ trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.svg	2021-12-02 23:26:22 UTC (rev 286458)
@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="utf-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
+    <rect id="fixed" style="position: fixed; width: 100%; height: 100%;"></rect>
+
+    <rect id="vw" style="width: 10px; height: 100vw;"></rect>
+    <rect id="vh" style="width: 10px; height: 100vh;"></rect>
+    <rect id="vmin" style="width: 10px; height: 100vmin;"></rect>
+    <rect id="vmax" style="width: 10px; height: 100vmax;"></rect>
+    <rect id="vb" style="width: 10px; height: 100vb;"></rect>
+    <rect id="vi" style="width: 10px; height: 100vi;"></rect>
+
+    <rect id="svw" style="width: 10px; height: 100svw;"></rect>
+    <rect id="svh" style="width: 10px; height: 100svh;"></rect>
+    <rect id="svmin" style="width: 10px; height: 100svmin;"></rect>
+    <rect id="svmax" style="width: 10px; height: 100svmax;"></rect>
+    <rect id="svb" style="width: 10px; height: 100svb;"></rect>
+    <rect id="svi" style="width: 10px; height: 100svi;"></rect>
+
+    <rect id="lvw" style="width: 10px; height: 100lvw;"></rect>
+    <rect id="lvh" style="width: 10px; height: 100lvh;"></rect>
+    <rect id="lvmin" style="width: 10px; height: 100lvmin;"></rect>
+    <rect id="lvmax" style="width: 10px; height: 100lvmax;"></rect>
+    <rect id="lvb" style="width: 10px; height: 100lvb;"></rect>
+    <rect id="lvi" style="width: 10px; height: 100lvi;"></rect>
+
+    <rect id="dvw" style="width: 10px; height: 100dvw;"></rect>
+    <rect id="dvh" style="width: 10px; height: 100dvh;"></rect>
+    <rect id="dvmin" style="width: 10px; height: 100dvmin;"></rect>
+    <rect id="dvmax" style="width: 10px; height: 100dvmax;"></rect>
+    <rect id="dvb" style="width: 10px; height: 100dvb;"></rect>
+    <rect id="dvi" style="width: 10px; height: 100dvi;"></rect>
+</svg>
_______________________________________________
webkit-changes mailing list
[email protected]
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to