<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[286458] trunk</title>
</head>
<body>

<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt;  }
#msg dl a { font-weight: bold}
#msg dl a:link    { color:#fc3; }
#msg dl a:active  { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff  {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta">
<dt>Revision</dt> <dd><a href="http://trac.webkit.org/projects/webkit/changeset/286458">286458</a></dd>
<dt>Author</dt> <dd>drousso@apple.com</dd>
<dt>Date</dt> <dd>2021-12-02 15:26:22 -0800 (Thu, 02 Dec 2021)</dd>
</dl>

<h3>Log Message</h3>
<pre>[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:</pre>

<h3>Modified Paths</h3>
<ul>
<li><a href="#trunkSourceWebCoreChangeLog">trunk/Source/WebCore/ChangeLog</a></li>
<li><a href="#trunkSourceWebCorecssCSSPrimitiveValuecpp">trunk/Source/WebCore/css/CSSPrimitiveValue.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSPrimitiveValueh">trunk/Source/WebCore/css/CSSPrimitiveValue.h</a></li>
<li><a href="#trunkSourceWebCorecssCSSUnitscpp">trunk/Source/WebCore/css/CSSUnits.cpp</a></li>
<li><a href="#trunkSourceWebCorecssCSSUnitsh">trunk/Source/WebCore/css/CSSUnits.h</a></li>
<li><a href="#trunkSourceWebCorecsscalcCSSCalcCategoryMappingcpp">trunk/Source/WebCore/css/calc/CSSCalcCategoryMapping.cpp</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSParserTokencpp">trunk/Source/WebCore/css/parser/CSSParserToken.cpp</a></li>
<li><a href="#trunkSourceWebCorecssparserCSSPropertyParserHelperscpp">trunk/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp</a></li>
<li><a href="#trunkSourceWebInspectorUIChangeLog">trunk/Source/WebInspectorUI/ChangeLog</a></li>
<li><a href="#trunkSourceWebInspectorUIUserInterfaceModelsCSSCompletionsjs">trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js</a></li>
<li><a href="#trunkToolsChangeLog">trunk/Tools/ChangeLog</a></li>
<li><a href="#trunkToolsTestWebKitAPITestWebKitAPIxcodeprojprojectpbxproj">trunk/Tools/TestWebKitAPI/TestWebKitAPI.xcodeproj/project.pbxproj</a></li>
<li><a href="#trunkToolsTestWebKitAPITestsWebKitCocoaCSSViewportUnitshtml">trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.html</a></li>
<li><a href="#trunkToolsTestWebKitAPITestsWebKitCocoaCSSViewportUnitsmm">trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm</a></li>
</ul>

<h3>Added Paths</h3>
<ul>
<li><a href="#trunkToolsTestWebKitAPITestsWebKitCocoaCSSViewportUnitssvg">trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.svg</a></li>
</ul>

</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunkSourceWebCoreChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/ChangeLog (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,55 @@
</span><ins>+2021-12-02  Devin Rousso  <drousso@apple.com>
+
+        [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):
+
</ins><span class="cx"> 2021-12-02  Chris Dumez  <cdumez@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Unreviewed follow-up to r286453 to address comments from Darin.
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValuecpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValue.cpp (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -39,7 +39,7 @@
</span><span class="cx"> #include "DeprecatedCSSOMPrimitiveValue.h"
</span><span class="cx"> #include "FontCascade.h"
</span><span class="cx"> #include "Length.h"
</span><del>-#include "Node.h"
</del><ins>+#include "NodeRenderStyle.h"
</ins><span class="cx"> #include "Pair.h"
</span><span class="cx"> #include "Rect.h"
</span><span class="cx"> #include "RenderStyle.h"
</span><span class="lines">@@ -62,7 +62,9 @@
</span><span class="cx">     case CSSUnitType::CSS_CM:
</span><span class="cx">     case CSSUnitType::CSS_DEG:
</span><span class="cx">     case CSSUnitType::CSS_DIMENSION:
</span><ins>+    case CSSUnitType::CSS_DVB:
</ins><span class="cx">     case CSSUnitType::CSS_DVH:
</span><ins>+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="lines">@@ -82,7 +84,9 @@
</span><span class="cx">     case CSSUnitType::CSS_PX:
</span><span class="cx">     case CSSUnitType::CSS_Q:
</span><span class="cx">     case CSSUnitType::CSS_LHS:
</span><ins>+    case CSSUnitType::CSS_LVB:
</ins><span class="cx">     case CSSUnitType::CSS_LVH:
</span><ins>+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="lines">@@ -91,12 +95,16 @@
</span><span class="cx">     case CSSUnitType::CSS_RAD:
</span><span class="cx">     case CSSUnitType::CSS_REMS:
</span><span class="cx">     case CSSUnitType::CSS_S:
</span><ins>+    case CSSUnitType::CSS_SVB:
</ins><span class="cx">     case CSSUnitType::CSS_SVH:
</span><ins>+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">     case CSSUnitType::CSS_TURN:
</span><ins>+    case CSSUnitType::CSS_VB:
</ins><span class="cx">     case CSSUnitType::CSS_VH:
</span><ins>+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VW:
</span><span class="lines">@@ -153,7 +161,9 @@
</span><span class="cx">     case CSSUnitType::CSS_DPCM:
</span><span class="cx">     case CSSUnitType::CSS_DPI:
</span><span class="cx">     case CSSUnitType::CSS_DPPX:
</span><ins>+    case CSSUnitType::CSS_DVB:
</ins><span class="cx">     case CSSUnitType::CSS_DVH:
</span><ins>+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="lines">@@ -167,7 +177,9 @@
</span><span class="cx">     case CSSUnitType::CSS_IDENT:
</span><span class="cx">     case CSSUnitType::CSS_IN:
</span><span class="cx">     case CSSUnitType::CSS_KHZ:
</span><ins>+    case CSSUnitType::CSS_LVB:
</ins><span class="cx">     case CSSUnitType::CSS_LVH:
</span><ins>+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="lines">@@ -190,7 +202,9 @@
</span><span class="cx">     case CSSUnitType::CSS_REMS:
</span><span class="cx">     case CSSUnitType::CSS_RGBCOLOR:
</span><span class="cx">     case CSSUnitType::CSS_S:
</span><ins>+    case CSSUnitType::CSS_SVB:
</ins><span class="cx">     case CSSUnitType::CSS_SVH:
</span><ins>+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="lines">@@ -199,7 +213,9 @@
</span><span class="cx">     case CSSUnitType::CSS_UNICODE_RANGE:
</span><span class="cx">     case CSSUnitType::CSS_UNKNOWN:
</span><span class="cx">     case CSSUnitType::CSS_VALUE_ID:
</span><ins>+    case CSSUnitType::CSS_VB:
</ins><span class="cx">     case CSSUnitType::CSS_VH:
</span><ins>+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VW:
</span><span class="lines">@@ -554,18 +570,26 @@
</span><span class="cx">     case CSSUnitType::CSS_VH:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><ins>+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><ins>+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><ins>+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><ins>+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">     case CSSUnitType::CSS_DPPX:
</span><span class="cx">     case CSSUnitType::CSS_X:
</span><span class="cx">     case CSSUnitType::CSS_DPI:
</span><span class="lines">@@ -648,6 +672,31 @@
</span><span class="cx"> static constexpr double cmPerInch = 2.54;
</span><span class="cx"> static constexpr double QPerInch = 25.4 * 4.0;
</span><span class="cx"> 
</span><ins>+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());
+}
+
</ins><span class="cx"> double CSSPrimitiveValue::computeUnzoomedNonCalcLengthDouble(CSSUnitType primitiveType, double value, CSSPropertyID propertyToCompute, const FontMetrics* fontMetrics, const FontCascadeDescription* fontDescription, const FontCascadeDescription* rootFontDescription, const RenderView* renderView)
</span><span class="cx"> {
</span><span class="cx">     switch (primitiveType) {
</span><span class="lines">@@ -702,6 +751,10 @@
</span><span class="cx">         return renderView ? renderView->sizeForCSSDefaultViewportUnits().maxDimension() / 100.0 * value : value;
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">         return renderView ? renderView->sizeForCSSDefaultViewportUnits().minDimension() / 100.0 * value : value;
</span><ins>+    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;
</ins><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">         return renderView ? renderView->sizeForCSSSmallViewportUnits().height() / 100.0 * value : 0;
</span><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="lines">@@ -710,6 +763,10 @@
</span><span class="cx">         return renderView ? renderView->sizeForCSSSmallViewportUnits().maxDimension() / 100.0 * value : value;
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">         return renderView ? renderView->sizeForCSSSmallViewportUnits().minDimension() / 100.0 * value : value;
</span><ins>+    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;
</ins><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">         return renderView ? renderView->sizeForCSSLargeViewportUnits().height() / 100.0 * value : 0;
</span><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="lines">@@ -718,6 +775,10 @@
</span><span class="cx">         return renderView ? renderView->sizeForCSSLargeViewportUnits().maxDimension() / 100.0 * value : value;
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">         return renderView ? renderView->sizeForCSSLargeViewportUnits().minDimension() / 100.0 * value : value;
</span><ins>+    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;
</ins><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">         return renderView ? renderView->sizeForCSSDynamicViewportUnits().height() / 100.0 * value : 0;
</span><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="lines">@@ -726,6 +787,10 @@
</span><span class="cx">         return renderView ? renderView->sizeForCSSDynamicViewportUnits().maxDimension() / 100.0 * value : value;
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">         return renderView ? renderView->sizeForCSSDynamicViewportUnits().minDimension() / 100.0 * value : value;
</span><ins>+    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;
</ins><span class="cx">     default:
</span><span class="cx">         ASSERT_NOT_REACHED();
</span><span class="cx">         return -1.0;
</span><span class="lines">@@ -783,6 +848,12 @@
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">         return value * conversionData.defaultViewportFactor().minDimension();
</span><span class="cx"> 
</span><ins>+    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());
+
</ins><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">         return value * conversionData.smallViewportFactor().height();
</span><span class="cx"> 
</span><span class="lines">@@ -795,6 +866,12 @@
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">         return value * conversionData.smallViewportFactor().minDimension();
</span><span class="cx"> 
</span><ins>+    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());
+
</ins><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">         return value * conversionData.largeViewportFactor().height();
</span><span class="cx"> 
</span><span class="lines">@@ -807,6 +884,12 @@
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">         return value * conversionData.largeViewportFactor().minDimension();
</span><span class="cx"> 
</span><ins>+    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());
+
</ins><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">         return value * conversionData.dynamicViewportFactor().height();
</span><span class="cx"> 
</span><span class="lines">@@ -819,6 +902,12 @@
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">         return value * conversionData.dynamicViewportFactor().minDimension();
</span><span class="cx"> 
</span><ins>+    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());
+
</ins><span class="cx">     case CSSUnitType::CSS_LHS:
</span><span class="cx">         ASSERT(conversionData.style());
</span><span class="cx">         if (conversionData.computingLineHeight() || conversionData.computingFontSize()) {
</span><span class="lines">@@ -1086,18 +1175,26 @@
</span><span class="cx">         case CSSUnitType::CSS_VH: return "vh";
</span><span class="cx">         case CSSUnitType::CSS_VMIN: return "vmin";
</span><span class="cx">         case CSSUnitType::CSS_VMAX: return "vmax";
</span><ins>+        case CSSUnitType::CSS_VB: return "vb";
+        case CSSUnitType::CSS_VI: return "vi";
</ins><span class="cx">         case CSSUnitType::CSS_SVW: return "svw";
</span><span class="cx">         case CSSUnitType::CSS_SVH: return "svh";
</span><span class="cx">         case CSSUnitType::CSS_SVMIN: return "svmin";
</span><span class="cx">         case CSSUnitType::CSS_SVMAX: return "svmax";
</span><ins>+        case CSSUnitType::CSS_SVB: return "svb";
+        case CSSUnitType::CSS_SVI: return "svi";
</ins><span class="cx">         case CSSUnitType::CSS_LVW: return "lvw";
</span><span class="cx">         case CSSUnitType::CSS_LVH: return "lvh";
</span><span class="cx">         case CSSUnitType::CSS_LVMIN: return "lvmin";
</span><span class="cx">         case CSSUnitType::CSS_LVMAX: return "lvmax";
</span><ins>+        case CSSUnitType::CSS_LVB: return "lvb";
+        case CSSUnitType::CSS_LVI: return "lvi";
</ins><span class="cx">         case CSSUnitType::CSS_DVW: return "dvw";
</span><span class="cx">         case CSSUnitType::CSS_DVH: return "dvh";
</span><span class="cx">         case CSSUnitType::CSS_DVMIN: return "dvmin";
</span><span class="cx">         case CSSUnitType::CSS_DVMAX: return "dvmax";
</span><ins>+        case CSSUnitType::CSS_DVB: return "dvb";
+        case CSSUnitType::CSS_DVI: return "dvi";
</ins><span class="cx">         case CSSUnitType::CSS_DPPX: return "dppx";
</span><span class="cx">         case CSSUnitType::CSS_X: return "x";
</span><span class="cx">         case CSSUnitType::CSS_DPI: return "dpi";
</span><span class="lines">@@ -1260,6 +1357,10 @@
</span><span class="cx">         return formatNumberValue("vmin");
</span><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><span class="cx">         return formatNumberValue("vmax");
</span><ins>+    case CSSUnitType::CSS_VB:
+        return formatNumberValue("vb");
+    case CSSUnitType::CSS_VI:
+        return formatNumberValue("vi");
</ins><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">         return formatNumberValue("svw");
</span><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="lines">@@ -1268,6 +1369,10 @@
</span><span class="cx">         return formatNumberValue("svmin");
</span><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><span class="cx">         return formatNumberValue("svmax");
</span><ins>+    case CSSUnitType::CSS_SVB:
+        return formatNumberValue("svb");
+    case CSSUnitType::CSS_SVI:
+        return formatNumberValue("svi");
</ins><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="cx">         return formatNumberValue("lvw");
</span><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="lines">@@ -1276,6 +1381,10 @@
</span><span class="cx">         return formatNumberValue("lvmin");
</span><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><span class="cx">         return formatNumberValue("lvmax");
</span><ins>+    case CSSUnitType::CSS_LVB:
+        return formatNumberValue("lvb");
+    case CSSUnitType::CSS_LVI:
+        return formatNumberValue("lvi");
</ins><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="cx">         return formatNumberValue("dvw");
</span><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="lines">@@ -1284,6 +1393,10 @@
</span><span class="cx">         return formatNumberValue("dvmin");
</span><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><span class="cx">         return formatNumberValue("dvmax");
</span><ins>+    case CSSUnitType::CSS_DVB:
+        return formatNumberValue("dvb");
+    case CSSUnitType::CSS_DVI:
+        return formatNumberValue("dvi");
</ins><span class="cx">     case CSSUnitType::CSS_IDENT:
</span><span class="cx">     case CSSUnitType::CSS_UNICODE_RANGE:
</span><span class="cx">     case CSSUnitType::CSS_CALC_PERCENTAGE_WITH_NUMBER:
</span><span class="lines">@@ -1351,18 +1464,26 @@
</span><span class="cx">     case CSSUnitType::CSS_VH:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><ins>+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><ins>+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><ins>+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><ins>+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">     case CSSUnitType::CSS_FR:
</span><span class="cx">     case CSSUnitType::CSS_Q:
</span><span class="cx">     case CSSUnitType::CSS_LHS:
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSPrimitiveValueh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSPrimitiveValue.h (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -322,7 +322,7 @@
</span><span class="cx"> 
</span><span class="cx"> constexpr bool CSSPrimitiveValue::isViewportPercentageLength(CSSUnitType type)
</span><span class="cx"> {
</span><del>-    return type >= CSSUnitType::CSS_VW && type <= CSSUnitType::CSS_DVMAX;
</del><ins>+    return type >= CSSUnitType::FirstViewportCSSUnitType && type <= CSSUnitType::LastViewporCSSUnitType;
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> template<typename T> inline Ref<CSSPrimitiveValue> CSSPrimitiveValue::create(T&& value)
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSUnitscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSUnits.cpp (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -138,18 +138,26 @@
</span><span class="cx">     case CSSUnitType::CSS_VH: ts << "vh"; break;
</span><span class="cx">     case CSSUnitType::CSS_VMIN: ts << "vmin"; break;
</span><span class="cx">     case CSSUnitType::CSS_VMAX: ts << "vmax"; break;
</span><ins>+    case CSSUnitType::CSS_VB: ts << "vb"; break;
+    case CSSUnitType::CSS_VI: ts << "vi"; break;
</ins><span class="cx">     case CSSUnitType::CSS_SVW: ts << "svw"; break;
</span><span class="cx">     case CSSUnitType::CSS_SVH: ts << "svh"; break;
</span><span class="cx">     case CSSUnitType::CSS_SVMIN: ts << "svmin"; break;
</span><span class="cx">     case CSSUnitType::CSS_SVMAX: ts << "svmax"; break;
</span><ins>+    case CSSUnitType::CSS_SVB: ts << "svb"; break;
+    case CSSUnitType::CSS_SVI: ts << "svi"; break;
</ins><span class="cx">     case CSSUnitType::CSS_LVW: ts << "lvw"; break;
</span><span class="cx">     case CSSUnitType::CSS_LVH: ts << "lvh"; break;
</span><span class="cx">     case CSSUnitType::CSS_LVMIN: ts << "lvmin"; break;
</span><span class="cx">     case CSSUnitType::CSS_LVMAX: ts << "lvmax"; break;
</span><ins>+    case CSSUnitType::CSS_LVB: ts << "lvb"; break;
+    case CSSUnitType::CSS_LVI: ts << "lvi"; break;
</ins><span class="cx">     case CSSUnitType::CSS_DVW: ts << "dvw"; break;
</span><span class="cx">     case CSSUnitType::CSS_DVH: ts << "dvh"; break;
</span><span class="cx">     case CSSUnitType::CSS_DVMIN: ts << "dvmin"; break;
</span><span class="cx">     case CSSUnitType::CSS_DVMAX: ts << "dvmax"; break;
</span><ins>+    case CSSUnitType::CSS_DVB: ts << "dvb"; break;
+    case CSSUnitType::CSS_DVI: ts << "dvi"; break;
</ins><span class="cx">     case CSSUnitType::CSS_DPPX: ts << "dppx"; break;
</span><span class="cx">     case CSSUnitType::CSS_X: ts << "x"; break;
</span><span class="cx">     case CSSUnitType::CSS_DPI: ts << "dpi"; break;
</span></span></pre></div>
<a id="trunkSourceWebCorecssCSSUnitsh"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/CSSUnits.h (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -55,22 +55,34 @@
</span><span class="cx">     CSS_COUNTER,
</span><span class="cx">     CSS_RECT,
</span><span class="cx">     CSS_RGBCOLOR,
</span><ins>+
</ins><span class="cx">     CSS_VW,
</span><span class="cx">     CSS_VH,
</span><span class="cx">     CSS_VMIN,
</span><span class="cx">     CSS_VMAX,
</span><ins>+    CSS_VB,
+    CSS_VI,
</ins><span class="cx">     CSS_SVW,
</span><span class="cx">     CSS_SVH,
</span><span class="cx">     CSS_SVMIN,
</span><span class="cx">     CSS_SVMAX,
</span><ins>+    CSS_SVB,
+    CSS_SVI,
</ins><span class="cx">     CSS_LVW,
</span><span class="cx">     CSS_LVH,
</span><span class="cx">     CSS_LVMIN,
</span><span class="cx">     CSS_LVMAX,
</span><ins>+    CSS_LVB,
+    CSS_LVI,
</ins><span class="cx">     CSS_DVW,
</span><span class="cx">     CSS_DVH,
</span><span class="cx">     CSS_DVMIN,
</span><span class="cx">     CSS_DVMAX,
</span><ins>+    CSS_DVB,
+    CSS_DVI,
+    FirstViewportCSSUnitType = CSS_VW,
+    LastViewporCSSUnitType = CSS_DVI,
+
</ins><span class="cx">     CSS_DPPX,
</span><span class="cx">     CSS_X,
</span><span class="cx">     CSS_DPI,
</span></span></pre></div>
<a id="trunkSourceWebCorecsscalcCSSCalcCategoryMappingcpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/calc/CSSCalcCategoryMapping.cpp (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -54,18 +54,26 @@
</span><span class="cx">     case CSSUnitType::CSS_VH:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><ins>+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><ins>+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><ins>+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><ins>+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">         return CalculationCategory::Length;
</span><span class="cx">     case CSSUnitType::CSS_PERCENTAGE:
</span><span class="cx">         return CalculationCategory::Percent;
</span><span class="lines">@@ -122,18 +130,26 @@
</span><span class="cx">     case CSSUnitType::CSS_VH:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><ins>+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><ins>+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><ins>+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><ins>+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">     default:
</span><span class="cx">         return CalculationCategory::Other;
</span><span class="cx">     }
</span><span class="lines">@@ -186,18 +202,26 @@
</span><span class="cx">     case CSSUnitType::CSS_VH:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><ins>+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><ins>+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><ins>+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><ins>+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">     case CSSUnitType::CSS_DPPX:
</span><span class="cx">     case CSSUnitType::CSS_X:
</span><span class="cx">     case CSSUnitType::CSS_DPI:
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSParserTokencpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSParserToken.cpp (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -114,8 +114,12 @@
</span><span class="cx">             break;
</span><span class="cx">         case 'v':
</span><span class="cx">             switch (toASCIILower(data[1])) {
</span><ins>+            case 'b':
+                return CSSUnitType::CSS_VB;
</ins><span class="cx">             case 'h':
</span><span class="cx">                 return CSSUnitType::CSS_VH;
</span><ins>+            case 'i':
+                return CSSUnitType::CSS_VI;
</ins><span class="cx">             case 'w':
</span><span class="cx">                 return CSSUnitType::CSS_VW;
</span><span class="cx">             }
</span><span class="lines">@@ -136,8 +140,12 @@
</span><span class="cx">                 break;
</span><span class="cx">             case 'v':
</span><span class="cx">                 switch (toASCIILower(data[2])) {
</span><ins>+                case 'b':
+                    return CSSUnitType::CSS_DVB;
</ins><span class="cx">                 case 'h':
</span><span class="cx">                     return CSSUnitType::CSS_DVH;
</span><ins>+                case 'i':
+                    return CSSUnitType::CSS_DVI;
</ins><span class="cx">                 case 'w':
</span><span class="cx">                     return CSSUnitType::CSS_DVW;
</span><span class="cx">                 }
</span><span class="lines">@@ -147,8 +155,12 @@
</span><span class="cx">         case 'l':
</span><span class="cx">             if (toASCIILower(data[1]) == 'v') {
</span><span class="cx">                 switch (toASCIILower(data[2])) {
</span><ins>+                case 'b':
+                    return CSSUnitType::CSS_LVB;
</ins><span class="cx">                 case 'h':
</span><span class="cx">                     return CSSUnitType::CSS_LVH;
</span><ins>+                case 'i':
+                    return CSSUnitType::CSS_LVI;
</ins><span class="cx">                 case 'w':
</span><span class="cx">                     return CSSUnitType::CSS_LVW;
</span><span class="cx">                 }
</span><span class="lines">@@ -177,8 +189,12 @@
</span><span class="cx">         case 's':
</span><span class="cx">             if (toASCIILower(data[1]) == 'v') {
</span><span class="cx">                 switch (toASCIILower(data[2])) {
</span><ins>+                case 'b':
+                    return CSSUnitType::CSS_SVB;
</ins><span class="cx">                 case 'h':
</span><span class="cx">                     return CSSUnitType::CSS_SVH;
</span><ins>+                case 'i':
+                    return CSSUnitType::CSS_SVI;
</ins><span class="cx">                 case 'w':
</span><span class="cx">                     return CSSUnitType::CSS_SVW;
</span><span class="cx">                 }
</span></span></pre></div>
<a id="trunkSourceWebCorecssparserCSSPropertyParserHelperscpp"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebCore/css/parser/CSSPropertyParserHelpers.cpp (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -488,18 +488,26 @@
</span><span class="cx">     case CSSUnitType::CSS_VH:
</span><span class="cx">     case CSSUnitType::CSS_VMIN:
</span><span class="cx">     case CSSUnitType::CSS_VMAX:
</span><ins>+    case CSSUnitType::CSS_VB:
+    case CSSUnitType::CSS_VI:
</ins><span class="cx">     case CSSUnitType::CSS_SVW:
</span><span class="cx">     case CSSUnitType::CSS_SVH:
</span><span class="cx">     case CSSUnitType::CSS_SVMIN:
</span><span class="cx">     case CSSUnitType::CSS_SVMAX:
</span><ins>+    case CSSUnitType::CSS_SVB:
+    case CSSUnitType::CSS_SVI:
</ins><span class="cx">     case CSSUnitType::CSS_LVW:
</span><span class="cx">     case CSSUnitType::CSS_LVH:
</span><span class="cx">     case CSSUnitType::CSS_LVMIN:
</span><span class="cx">     case CSSUnitType::CSS_LVMAX:
</span><ins>+    case CSSUnitType::CSS_LVB:
+    case CSSUnitType::CSS_LVI:
</ins><span class="cx">     case CSSUnitType::CSS_DVW:
</span><span class="cx">     case CSSUnitType::CSS_DVH:
</span><span class="cx">     case CSSUnitType::CSS_DVMIN:
</span><span class="cx">     case CSSUnitType::CSS_DVMAX:
</span><ins>+    case CSSUnitType::CSS_DVB:
+    case CSSUnitType::CSS_DVI:
</ins><span class="cx">     case CSSUnitType::CSS_Q:
</span><span class="cx">         break;
</span><span class="cx">     default:
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/ChangeLog (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -1,3 +1,13 @@
</span><ins>+2021-12-02  Devin Rousso  <drousso@apple.com>
+
+        [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:
+
</ins><span class="cx"> 2021-12-01  Patrick Angle  <pangle@apple.com>
</span><span class="cx"> 
</span><span class="cx">         Web Inspector: Console execution context can become an unexpected selection on refresh/navigation
</span></span></pre></div>
<a id="trunkSourceWebInspectorUIUserInterfaceModelsCSSCompletionsjs"></a>
<div class="modfile"><h4>Modified: trunk/Source/WebInspectorUI/UserInterface/Models/CSSCompletions.js (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -343,7 +343,9 @@
</span><span class="cx"> WI.CSSCompletions.lengthUnits = new Set([
</span><span class="cx">     "ch",
</span><span class="cx">     "cm",
</span><ins>+    "dvb",
</ins><span class="cx">     "dvh",
</span><ins>+    "dvi",
</ins><span class="cx">     "dvmax",
</span><span class="cx">     "dvmin",
</span><span class="cx">     "dvw",
</span><span class="lines">@@ -350,7 +352,9 @@
</span><span class="cx">     "em",
</span><span class="cx">     "ex",
</span><span class="cx">     "in",
</span><ins>+    "lvb",
</ins><span class="cx">     "lvh",
</span><ins>+    "lvi",
</ins><span class="cx">     "lvmax",
</span><span class="cx">     "lvmin",
</span><span class="cx">     "lvw",
</span><span class="lines">@@ -360,11 +364,15 @@
</span><span class="cx">     "px",
</span><span class="cx">     "q",
</span><span class="cx">     "rem",
</span><ins>+    "svb",
</ins><span class="cx">     "svh",
</span><ins>+    "svi",
</ins><span class="cx">     "svmax",
</span><span class="cx">     "svmin",
</span><span class="cx">     "svw",
</span><ins>+    "vb",
</ins><span class="cx">     "vh",
</span><ins>+    "vi",
</ins><span class="cx">     "vmax",
</span><span class="cx">     "vmin",
</span><span class="cx">     "vw",
</span></span></pre></div>
<a id="trunkToolsChangeLog"></a>
<div class="modfile"><h4>Modified: trunk/Tools/ChangeLog (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- trunk/Tools/ChangeLog    2021-12-02 23:07:02 UTC (rev 286457)
+++ trunk/Tools/ChangeLog       2021-12-02 23:26:22 UTC (rev 286458)
</span><span class="lines">@@ -1,3 +1,22 @@
</span><ins>+2021-12-02  Devin Rousso  <drousso@apple.com>
+
+        [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:
+
</ins><span class="cx"> 2021-12-02  Chris Dumez  <cdumez@apple.com>
</span><span class="cx"> 
</span><span class="cx">         [WK2] Make Web Lock API work across multiple WebProcesses
</span></span></pre></div>
<a id="trunkToolsTestWebKitAPITestWebKitAPIxcodeprojprojectpbxproj"></a>
<div class="modfile"><h4>Modified: trunk/Tools/TestWebKitAPI/TestWebKitAPI.xcodeproj/project.pbxproj (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -763,6 +763,7 @@
</span><span class="cx">          93F7E86F14DC8E5C00C84A99 /* NewFirstVisuallyNonEmptyLayoutFrames_Bundle.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 93F7E86E14DC8E5B00C84A99 /* NewFirstVisuallyNonEmptyLayoutFrames_Bundle.cpp */; };
</span><span class="cx">          93FCDB34263631560046DD7D /* SortedArrayMap.cpp in Sources */ = {isa = PBXBuildFile; fileRef = 93FCDB33263631560046DD7D /* SortedArrayMap.cpp */; };
</span><span class="cx">          952F7167270BD9CB00D00DCC /* CSSViewportUnits.html in Copy Resources */ = {isa = PBXBuildFile; fileRef = 952F7166270BD99700D00DCC /* CSSViewportUnits.html */; };
</span><ins>+               952F7167270BD9CB00D00DCD /* CSSViewportUnits.svg in Copy Resources */ = {isa = PBXBuildFile; fileRef = 952F7166270BD99700D00DCD /* CSSViewportUnits.svg */; };
</ins><span class="cx">           996EDCCB270E70D7006DF175 /* InspectorExtension-basic-page.html in Copy Resources */ = {isa = PBXBuildFile; fileRef = 996EDCCA270E70AB006DF175 /* InspectorExtension-basic-page.html */; };
</span><span class="cx">          9984FACE1CFFB090008D198C /* editable-body.html in Copy Resources */ = {isa = PBXBuildFile; fileRef = 9984FACD1CFFB038008D198C /* editable-body.html */; };
</span><span class="cx">          99E2846626F93DB50003F1FA /* InspectorExtension-TabIcon-30x30.png in Copy Resources */ = {isa = PBXBuildFile; fileRef = 99E2846526F93D760003F1FA /* InspectorExtension-TabIcon-30x30.png */; };
</span><span class="lines">@@ -1269,6 +1270,7 @@
</span><span class="cx">                          7AEAD4811E20122700416EFE /* CrossPartitionFileSchemeAccess.html in Copy Resources */,
</span><span class="cx">                          4995A6F025E8772000E5F0A9 /* csp-document-uri-report.html in Copy Resources */,
</span><span class="cx">                          952F7167270BD9CB00D00DCC /* CSSViewportUnits.html in Copy Resources */,
</span><ins>+                               952F7167270BD9CB00D00DCD /* CSSViewportUnits.svg in Copy Resources */,
</ins><span class="cx">                           2DDD4DA4270B8B3500659A61 /* cube.usdz in Copy Resources */,
</span><span class="cx">                          F4AB578A1F65165400DB0DA1 /* custom-draggable-div.html in Copy Resources */,
</span><span class="cx">                          290F4275172A221C00939FF0 /* custom-protocol-sync-xhr.html in Copy Resources */,
</span><span class="lines">@@ -2508,6 +2510,7 @@
</span><span class="cx">          950E4CC0252E75230071659F /* iOSStylusSupport.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = iOSStylusSupport.mm; sourceTree = "<group>"; };
</span><span class="cx">          952F7164270BD97E00D00DCC /* CSSViewportUnits.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = CSSViewportUnits.mm; sourceTree = "<group>"; };
</span><span class="cx">          952F7166270BD99700D00DCC /* CSSViewportUnits.html */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = CSSViewportUnits.html; sourceTree = "<group>"; };
</span><ins>+               952F7166270BD99700D00DCD /* CSSViewportUnits.svg */ = {isa = PBXFileReference; lastKnownFileType = text.html; path = CSSViewportUnits.svg; sourceTree = "<group>"; };
</ins><span class="cx">           953ABB3425C0D681004C8B73 /* WKWebViewUnderPageBackgroundColor.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = WKWebViewUnderPageBackgroundColor.mm; sourceTree = "<group>"; };
</span><span class="cx">          958B70E026C46EDC00B2022B /* NSAttributedStringWebKitAdditions.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = NSAttributedStringWebKitAdditions.mm; sourceTree = "<group>"; };
</span><span class="cx">          95A524942581A10D00461FE9 /* WKWebViewThemeColor.mm */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.objcpp; path = WKWebViewThemeColor.mm; sourceTree = "<group>"; };
</span><span class="lines">@@ -3989,6 +3992,7 @@
</span><span class="cx">                          9B62630B1F8C2510007EE29B /* copy-url.html */,
</span><span class="cx">                          4995A6EF25E876A300E5F0A9 /* csp-document-uri-report.html */,
</span><span class="cx">                          952F7166270BD99700D00DCC /* CSSViewportUnits.html */,
</span><ins>+                               952F7166270BD99700D00DCD /* CSSViewportUnits.svg */,
</ins><span class="cx">                           F4AB57891F65164B00DB0DA1 /* custom-draggable-div.html */,
</span><span class="cx">                          F47DFB2421A8704A00021FB6 /* data-detectors.html */,
</span><span class="cx">                          F486B1CF1F6794FF00F34BDD /* DataTransfer-setDragImage.html */,
</span></span></pre></div>
<a id="trunkToolsTestWebKitAPITestsWebKitCocoaCSSViewportUnitshtml"></a>
<div class="modfile"><h4>Modified: trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.html (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -19,19 +19,27 @@
</span><span class="cx">     <div id="vh" style="height: 100vh;"></div>
</span><span class="cx">     <div id="vmin" style="height: 100vmin;"></div>
</span><span class="cx">     <div id="vmax" style="height: 100vmax;"></div>
</span><ins>+    <div id="vb" style="height: 100vb;"></div>
+    <div id="vi" style="height: 100vi;"></div>
</ins><span class="cx"> 
</span><span class="cx">     <div id="svw" style="height: 100svw;"></div>
</span><span class="cx">     <div id="svh" style="height: 100svh;"></div>
</span><span class="cx">     <div id="svmin" style="height: 100svmin;"></div>
</span><span class="cx">     <div id="svmax" style="height: 100svmax;"></div>
</span><ins>+    <div id="svb" style="height: 100svb;"></div>
+    <div id="svi" style="height: 100svi;"></div>
</ins><span class="cx"> 
</span><span class="cx">     <div id="lvw" style="height: 100lvw;"></div>
</span><span class="cx">     <div id="lvh" style="height: 100lvh;"></div>
</span><span class="cx">     <div id="lvmin" style="height: 100lvmin;"></div>
</span><span class="cx">     <div id="lvmax" style="height: 100lvmax;"></div>
</span><ins>+    <div id="lvb" style="height: 100lvb;"></div>
+    <div id="lvi" style="height: 100lvi;"></div>
</ins><span class="cx"> 
</span><span class="cx">     <div id="dvw" style="height: 100dvw;"></div>
</span><span class="cx">     <div id="dvh" style="height: 100dvh;"></div>
</span><span class="cx">     <div id="dvmin" style="height: 100dvmin;"></div>
</span><span class="cx">     <div id="dvmax" style="height: 100dvmax;"></div>
</span><ins>+    <div id="dvb" style="height: 100dvb;"></div>
+    <div id="dvi" style="height: 100dvi;"></div>
</ins><span class="cx"> </body>
</span></span></pre></div>
<a id="trunkToolsTestWebKitAPITestsWebKitCocoaCSSViewportUnitsmm"></a>
<div class="modfile"><h4>Modified: trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm (286457 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -65,21 +65,33 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> 
</span><span class="cx"> #if PLATFORM(IOS_FAMILY)
</span><span class="cx">     [webView scrollView].zoomScale = 2;
</span><span class="lines">@@ -93,21 +105,68 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> #if PLATFORM(IOS_FAMILY)
</span><span class="lines">@@ -124,21 +183,33 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> 
</span><span class="cx">     [webView scrollView].zoomScale = 2;
</span><span class="cx">     [webView waitForNextPresentationUpdate];
</span><span class="lines">@@ -147,21 +218,68 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> TEST(CSSViewportUnits, SameUnobscuredSizeOverrides)
</span><span class="lines">@@ -176,21 +294,33 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> 
</span><span class="cx">     [webView scrollView].zoomScale = 2;
</span><span class="cx">     [webView waitForNextPresentationUpdate];
</span><span class="lines">@@ -199,21 +329,68 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> TEST(CSSViewportUnits, DifferentUnobscuredSizeOverrides)
</span><span class="lines">@@ -228,21 +405,33 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> 
</span><span class="cx">     [webView scrollView].zoomScale = 2;
</span><span class="cx">     [webView waitForNextPresentationUpdate];
</span><span class="lines">@@ -251,21 +440,201 @@
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vmax"));
</span><ins>+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
</span><ins>+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
</ins><span class="cx"> 
</span><span class="cx">     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvw"));
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvh"));
</span><span class="cx">     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvmin"));
</span><span class="cx">     EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvmax"));
</span><ins>+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvi"));
</ins><span class="cx"> 
</span><del>-    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"));
</del><ins>+    {
+        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"));
+    }
</ins><span class="cx"> }
</span><span class="cx"> 
</span><span class="cx"> #endif // PLATFORM(IOS_FAMILY)
</span><ins>+
+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"));
+    }
+}
</ins></span></pre></div>
<a id="trunkToolsTestWebKitAPITestsWebKitCocoaCSSViewportUnitssvg"></a>
<div class="addfile"><h4>Added: trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.svg (0 => 286458)</h4>
<pre class="diff"><span>
<span class="info">--- 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)
</span><span class="lines">@@ -0,0 +1,32 @@
</span><ins>+<?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>
</ins></span></pre>
</div>
</div>

</body>
</html>