Resolve functional blur lengths (#490)

Author: wieslawsoltes

experiments/WebScene.NativeEngine.Probe/native/webscene_native_dom_scene.inc

@@ -379,8 +379,18 @@ void native_document::append_scene(
                 return result;
             }
             const auto opening = remaining.find('(');
-            const auto closing = opening == std::string_view::npos
-                ? std::string_view::npos : remaining.find(')', opening + 1U);
+            auto closing = std::string_view::npos;
+            if (opening != std::string_view::npos) {
+                auto depth = 1U;
+                for (auto index = opening + 1U; index < remaining.size(); ++index) {
+                    if (remaining[index] == '(') {
+                        ++depth;
+                    } else if (remaining[index] == ')' && --depth == 0U) {
+                        closing = index;
+                        break;
+                    }
+                }
+            }
             if (opening == 0U || opening == std::string_view::npos
                 || closing == std::string_view::npos) {
                 result.clear();
@@ -389,21 +399,39 @@ void native_document::append_scene(
             const auto name = trim(remaining.substr(0U, opening));
             const auto argument = trim(
                 remaining.substr(opening + 1U, closing - opening - 1U));
-            const auto parsed = css::parse_ascii_number_prefix(argument);
-            if (!parsed.has_value() || parsed->value < 0.0F) {
-                result.clear();
-                return result;
-            }
-            const auto suffix = argument.substr(parsed->consumed);
             uint32_t flags = 0U;
             float amount = -1.0F;
             float maximum = 0.0F;
             if (equals_ascii_case_insensitive(name, "blur")) {
                 flags = 1U << 28U;
                 maximum = 256.0F;
-                amount = suffix == "px" || (suffix.empty() && parsed->value == 0.0F)
-                    ? parsed->value : -1.0F;
+                const auto length = parse_length(std::string{argument});
+                switch (length.unit) {
+                case length_unit::pixels:
+                case length_unit::em:
+                case length_unit::rem:
+                case length_unit::viewport_width:
+                case length_unit::viewport_height:
+                case length_unit::viewport_width_capped:
+                case length_unit::viewport_height_capped:
+                case length_unit::viewport_width_floored:
+                case length_unit::viewport_height_floored:
+                case length_unit::container_inline:
+                case length_unit::container_block:
+                case length_unit::container_min:
+                case length_unit::container_max:
+                    amount = resolve_length(node, length, 0.0F, -1.0F);
+                    break;
+                default:
+                    break;
+                }
             } else {
+                const auto parsed = css::parse_ascii_number_prefix(argument);
+                if (!parsed.has_value() || parsed->value < 0.0F) {
+                    result.clear();
+                    return result;
+                }
+                const auto suffix = argument.substr(parsed->consumed);
                 if (equals_ascii_case_insensitive(name, "brightness")) {
                     flags = 1U << 31U;
                     maximum = 10.0F;

experiments/WebScene.NativeEngine.Probe/tests/native_css_effect_values_tests.cpp

@@ -55,6 +55,7 @@ struct clip_scene_counts final {
     uint32_t inset_clip_ends{};
     uint32_t clipped_fills{};
     uint32_t blur_filter_begins{};
+    uint32_t functional_blur_begins{};
     uint32_t command_count{};
     bool transform_clip_nested{};
     bool compound_filter_ordered{};
@@ -137,6 +138,10 @@ clip_scene_counts wait_for_inset_clip_scene(webscene_engine* engine, uint32_t ex
                         && (command.flags & (1U << 28U)) != 0U
                         && std::abs(command.stroke_width - 2.0F) < 0.01F) {
                         ++latest.blur_filter_begins;
+                    } else if (command.kind == 30U
+                        && (command.flags & (1U << 28U)) != 0U
+                        && std::abs(command.stroke_width - 4.0F) < 0.01F) {
+                        ++latest.functional_blur_begins;
                     }
                 }
                 webscene_scene_acknowledge_v3(lease);
@@ -209,6 +214,7 @@ int main()
             clip-path: inset(0px 1px); filter: brightness(0.5); backdrop-filter: blur(1px); }
           #effects.alternate > span { clip-path: circle(25%); filter: contrast(2); }
           #effects > span:first-child { transform: scale(1.25) rotate(3deg); }
+          #functional-blur { filter: blur(max(4px, calc(8px * 0.25))); }
           #compound-filter { filter: blur(2px) saturate(1.08) contrast(1.5) grayscale(0.25); }
           #effects > span:last-child { filter: blur(2px); }
         `;
@@ -218,6 +224,7 @@ int main()
         const fragment = document.createDocumentFragment();
         for (let index = 0; index < 4096; index++) fragment.appendChild(document.createElement('span'));
         host.appendChild(fragment);
+        host.children[4093].id = 'functional-blur';
         host.children[4094].id = 'compound-filter';
         document.body.appendChild(host);
         const first = host.firstElementChild;
@@ -235,6 +242,10 @@ int main()
             !== 'blur(2px) saturate(1.08) contrast(1.5) grayscale(0.25)') {
           throw new Error('initial compound filter list failed');
         }
+        if (getComputedStyle(document.getElementById('functional-blur')).getPropertyValue('filter')
+            !== 'blur(max(4px, calc(8px * 0.25)))') {
+          throw new Error('initial functional blur value failed');
+        }
       })()
     )JS", "native-effects-fixture.js");
 
@@ -305,6 +316,8 @@ int main()
         "retained scene did not emit both bounded foreground blur groups");
     require(initial_clip_scene.compound_filter_ordered,
         "retained scene did not preserve compound foreground filter order");
+    require(initial_clip_scene.functional_blur_begins == 1U,
+        "retained scene did not resolve the functional blur radius");
     const auto initial_scene_command_bytes =
         static_cast<uint64_t>(initial_clip_scene.command_count)
             * sizeof(webscene_scene_command);
@@ -417,6 +430,7 @@ int main()
               << " clip-ends=" << initial_clip_scene.inset_clip_ends
               << " clipped-fills=" << initial_clip_scene.clipped_fills
               << " blur-filter-begins=" << initial_clip_scene.blur_filter_begins
+              << " functional-blur-begins=" << initial_clip_scene.functional_blur_begins
               << " compound-filter-ordered=" << initial_clip_scene.compound_filter_ordered
               << " transform-clip-nested=" << initial_clip_scene.transform_clip_nested
               << " initial-scene-command-bytes=" << initial_scene_command_bytes

tests/WebPlatformSubset/contracts/css-retained-effect-values.html

@@ -79,6 +79,13 @@
     effect.style.removeProperty('filter');
   }, 'compound foreground filters preserve authored function order');
 
+  test(() => {
+    effect.style.setProperty('filter', 'blur(max(4px, calc(8px * 0.25)))');
+    assert_equals(getComputedStyle(effect).getPropertyValue('filter'),
+      'blur(max(4px, calc(8px * 0.25)))');
+    effect.style.removeProperty('filter');
+  }, 'foreground blur preserves nested functional length syntax');
+
   test(() => {
     assert_equals(getComputedStyle(effect).getPropertyValue('backdrop-filter'), 'blur(3px)');
   }, 'backdrop filter exposes its computed function list');