[webkit-changes] [294609] trunk

Fri, 20 May 2022 22:40:44 -0700

Title: [294609] trunk
Revision
294609
Author
drou...@apple.com
Date
2022-05-20 22:39:52 -0700 (Fri, 20 May 2022)

Log Message

[css-values-4] logical `*vi`(inline) and `*vb` (block) viewport units should be based on the current element's `writing-mode`
https://bugs.webkit.org/show_bug.cgi?id=234373
<rdar://problem/86832561>

Reviewed by Tim Nguyen.

Previously, we only looked at the root element's `writing-mode`. Looking at the current element's
`writing-mode` allows for non-root elements to have a `writing-mode` independent of the root element,
as well as having styles based on that. This was changed in <https://github.com/w3c/csswg-drafts/issues/6873>.

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

* Source/WebCore/css/CSSPrimitiveValue.cpp:
(WebCore::lengthOfViewportPhysicalAxisForLogicalAxis):
(WebCore::CSSPrimitiveValue::computeNonCalcLengthDouble):

* Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm:
(changeCSSPropertyOfElements): Added.
(TEST.CSSViewportUnits.AllSame):
(TEST.CSSViewportUnits.MinimumViewportInsetWithWritingMode):
(TEST.CSSViewportUnits.MaximumViewportInsetWithWritingMode):
(TEST.CSSViewportUnits.EmptyUnobscuredSizeOverrides):
(TEST.CSSViewportUnits.SameUnobscuredSizeOverrides):
(TEST.CSSViewportUnits.DifferentUnobscuredSizeOverrides):
(TEST.CSSViewportUnits.SVGDocument):

Canonical link: https://commits.webkit.org/250835@main

Modified Paths

Diff

Modified: trunk/Source/WebCore/css/CSSPrimitiveValue.cpp (294608 => 294609)


--- trunk/Source/WebCore/css/CSSPrimitiveValue.cpp	2022-05-21 04:21:15 UTC (rev 294608)
+++ trunk/Source/WebCore/css/CSSPrimitiveValue.cpp	2022-05-21 05:39:52 UTC (rev 294609)
@@ -695,12 +695,12 @@
 static constexpr double cmPerInch = 2.54;
 static constexpr double QPerInch = 25.4 * 4.0;
 
-static double lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis logicalAxis, const FloatSize& size, const RenderStyle* rootElementStyle)
+static double lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis logicalAxis, const FloatSize& size, const RenderStyle* style)
 {
-    if (!rootElementStyle)
+    if (!style)
         return 0;
 
-    switch (mapLogicalAxisToPhysicalAxis(makeTextFlow(rootElementStyle->writingMode(), rootElementStyle->direction()), logicalAxis)) {
+    switch (mapLogicalAxisToPhysicalAxis(makeTextFlow(style->writingMode(), style->direction()), logicalAxis)) {
     case BoxAxis::Horizontal:
         return size.width();
 
@@ -883,10 +883,10 @@
         return value * conversionData.defaultViewportFactor().minDimension();
 
     case CSSUnitType::CSS_VB:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.defaultViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.defaultViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_VI:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.defaultViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.defaultViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_SVH:
         return value * conversionData.smallViewportFactor().height();
@@ -901,10 +901,10 @@
         return value * conversionData.smallViewportFactor().minDimension();
 
     case CSSUnitType::CSS_SVB:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.smallViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.smallViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_SVI:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.smallViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.smallViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_LVH:
         return value * conversionData.largeViewportFactor().height();
@@ -919,10 +919,10 @@
         return value * conversionData.largeViewportFactor().minDimension();
 
     case CSSUnitType::CSS_LVB:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.largeViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.largeViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_LVI:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.largeViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.largeViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_DVH:
         return value * conversionData.dynamicViewportFactor().height();
@@ -937,10 +937,10 @@
         return value * conversionData.dynamicViewportFactor().minDimension();
 
     case CSSUnitType::CSS_DVB:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.dynamicViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Block, conversionData.dynamicViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_DVI:
-        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.dynamicViewportFactor(), conversionData.rootStyle());
+        return value * lengthOfViewportPhysicalAxisForLogicalAxis(LogicalBoxAxis::Inline, conversionData.dynamicViewportFactor(), conversionData.style());
 
     case CSSUnitType::CSS_LHS:
         ASSERT(conversionData.style());

Modified: trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm (294608 => 294609)


--- trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm	2022-05-21 04:21:15 UTC (rev 294608)
+++ trunk/Tools/TestWebKitAPI/Tests/WebKitCocoa/CSSViewportUnits.mm	2022-05-21 05:39:52 UTC (rev 294609)
@@ -55,6 +55,11 @@
     return heightOfElementWithID(webView, viewportUnit);
 }
 
+static void changeCSSPropertyOfElements(RetainPtr<TestWKWebView>& webView, NSString *selector, NSString *property, NSString *value)
+{
+    [webView objectByEvaluatingJavaScript:[NSString stringWithFormat:@"document.querySelectorAll('%@').forEach((element) => element.style['%@'] = %@)", selector, property, value]];
+}
+
 TEST(CSSViewportUnits, AllSame)
 {
     auto webView = adoptNS([[TestWKWebView alloc] initWithFrame:CGRectMake(0, 0, 320, 500)]);
@@ -133,7 +138,7 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
     }
 
-    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    changeCSSPropertyOfElements(webView, @"body", @"writingMode", @"'vertical-lr'");
     [webView waitForNextPresentationUpdate];
 
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vw"));
@@ -167,6 +172,41 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
         EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
     }
+
+    changeCSSPropertyOfElements(webView, @"div", @"writingMode", @"'horizontal-tb'");
+    [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(500, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvi"));
+
+    {
+        double fixedWidth = widthOfElementWithID(webView, @"fixed");
+        double fixedHeight = heightOfElementWithID(webView, @"fixed");
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvw"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvh"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvmin"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvmax"));
+        EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
 }
 
 #if USE(APPKIT)
@@ -428,8 +468,7 @@
     [webView setMinimumViewportInset:CocoaEdgeInsetsMake(11, 21, 31, 41) maximumViewportInset:CocoaEdgeInsetsMake(12, 22, 32, 42)];
     [webView synchronouslyLoadTestPageNamed:@"CSSViewportUnits"];
 
-    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
-
+    changeCSSPropertyOfElements(webView, @"body", @"writingMode", @"'vertical-lr'");
     [webView waitForNextPresentationUpdate];
 
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vw"));
@@ -463,6 +502,41 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
         EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
     }
+
+    changeCSSPropertyOfElements(webView, @"div", @"writingMode", @"'horizontal-tb'");
+    [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(500, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(256, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(456, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(256, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(456, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(456, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(256, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(258, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(458, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(258, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(458, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(458, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(258, 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(fixedHeight, viewportUnitLength(webView, @"dvb"));
+        EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
+    }
 }
 
 TEST(CSSViewportUnits, MaximumViewportInsetWithWritingMode)
@@ -471,8 +545,7 @@
     [webView setMinimumViewportInset:CocoaEdgeInsetsZero maximumViewportInset:CocoaEdgeInsetsMake(12, 22, 32, 42)];
     [webView synchronouslyLoadTestPageNamed:@"CSSViewportUnits"];
 
-    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
-
+    changeCSSPropertyOfElements(webView, @"body", @"writingMode", @"'vertical-lr'");
     [webView waitForNextPresentationUpdate];
 
     EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vw"));
@@ -506,6 +579,41 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
         EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
     }
+
+    changeCSSPropertyOfElements(webView, @"div", @"writingMode", @"'horizontal-tb'");
+    [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(500, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(256, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(456, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(256, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(456, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(456, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(256, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(500, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(320, viewportUnitLength(webView, @"lvi"));
+
+    {
+        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"));
+    }
 }
 
 TEST(CSSViewportUnits, MinimumViewportInsetWithFrame)
@@ -1021,7 +1129,7 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
     }
 
-    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    changeCSSPropertyOfElements(webView, @"body", @"writingMode", @"'vertical-lr'");
     [webView waitForNextPresentationUpdate];
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vw"));
@@ -1055,6 +1163,41 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
         EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
     }
+
+    changeCSSPropertyOfElements(webView, @"div", @"writingMode", @"'horizontal-tb'");
+    [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(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
+
+    {
+        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"));
+    }
 }
 
 TEST(CSSViewportUnits, SameUnobscuredSizeOverrides)
@@ -1132,7 +1275,7 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
     }
 
-    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    changeCSSPropertyOfElements(webView, @"body", @"writingMode", @"'vertical-lr'");
     [webView waitForNextPresentationUpdate];
 
     EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vw"));
@@ -1166,6 +1309,41 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
         EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
     }
+
+    changeCSSPropertyOfElements(webView, @"div", @"writingMode", @"'horizontal-tb'");
+    [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(20.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"lvi"));
+
+    {
+        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"));
+    }
 }
 
 TEST(CSSViewportUnits, DifferentUnobscuredSizeOverrides)
@@ -1243,7 +1421,7 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvi"));
     }
 
-    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    changeCSSPropertyOfElements(webView, @"body", @"writingMode", @"'vertical-lr'");
     [webView waitForNextPresentationUpdate];
 
     EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vw"));
@@ -1277,6 +1455,41 @@
         EXPECT_FLOAT_EQ(fixedWidth, viewportUnitLength(webView, @"dvb"));
         EXPECT_FLOAT_EQ(fixedHeight, viewportUnitLength(webView, @"dvi"));
     }
+
+    changeCSSPropertyOfElements(webView, @"div", @"writingMode", @"'horizontal-tb'");
+    [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(40.5, viewportUnitLength(webView, @"vb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"vi"));
+
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svw"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svh"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svmin"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svmax"));
+    EXPECT_FLOAT_EQ(20.5, viewportUnitLength(webView, @"svb"));
+    EXPECT_FLOAT_EQ(10.5, viewportUnitLength(webView, @"svi"));
+
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvw"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvh"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvmin"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvmax"));
+    EXPECT_FLOAT_EQ(40.5, viewportUnitLength(webView, @"lvb"));
+    EXPECT_FLOAT_EQ(30.5, viewportUnitLength(webView, @"lvi"));
+
+    {
+        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"));
+    }
 }
 
 #endif // PLATFORM(IOS_FAMILY)
@@ -1372,7 +1585,7 @@
         EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvi"));
     }
 
-    [webView objectByEvaluatingJavaScript:@"document.documentElement.style.writingMode = 'vertical-lr'"];
+    changeCSSPropertyOfElements(webView, @"svg", @"writingMode", @"'vertical-lr'");
     [webView waitForNextPresentationUpdate];
 
     {
@@ -1412,4 +1625,46 @@
         EXPECT_FLOAT_EQ(dvw, viewportUnitLength(webView, @"dvb"));
         EXPECT_FLOAT_EQ(dvh, viewportUnitLength(webView, @"dvi"));
     }
+
+    changeCSSPropertyOfElements(webView, @"rect", @"writingMode", @"'horizontal-tb'");
+    [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"));
+    }
+
 }

_______________________________________________
webkit-changes mailing list
webkit-changes@lists.webkit.org
https://lists.webkit.org/mailman/listinfo/webkit-changes

Reply via email to