Merge pull request #418 from SceneTech/fix/pseudo-relative-font-size-246

Resolve relative font sizes on generated pseudo-elements

Author: wieslawsoltes

experiments/WebScene.NativeEngine.Probe/CMakeLists.txt

@@ -622,6 +622,15 @@ else()
 endif()
 
 if(BUILD_TESTING)
+    add_executable(webscene_css_pseudo_font_size_tests
+        tests/css_pseudo_font_size_tests.cpp
+        native/webscene_native_dom.cpp)
+    target_compile_features(webscene_css_pseudo_font_size_tests PRIVATE cxx_std_20)
+    target_include_directories(webscene_css_pseudo_font_size_tests PRIVATE native)
+    add_test(NAME webscene_css_pseudo_font_size_tests
+        COMMAND webscene_css_pseudo_font_size_tests)
+    set_tests_properties(webscene_css_pseudo_font_size_tests PROPERTIES
+        LABELS "native;css;layout;performance" TIMEOUT 10)
     add_executable(webscene_css_property_identity_tests
         tests/css_property_identity_tests.cpp
         native/webscene_native_dom.cpp)

experiments/WebScene.NativeEngine.Probe/native/webscene_css_pseudo_application.h

@@ -1,5 +1,6 @@
 #pragma once
 #include "webscene_css_pseudo_values.h"
+#include "webscene_css_text_values.h"
 #include "webscene_css_variables.h"
 
 namespace webscene_native::css {
@@ -125,6 +126,9 @@ void apply_pseudo_declaration(dom_node& node,node_style::pseudo_element& pseudo,
         }
         const auto result = css::apply_pseudo_value(
             pseudo, node.style.foreground_rgba, node.style.border_box, name, value);
+        if (name == "font-size" && result.classification == "supported") {
+            pseudo.font_size = resolved_pseudo_font_size(node, value);
+        }
         if (name == "font-family" && result.classification == "supported") {
             pseudo.font_family_important = declaration.important;
         }

experiments/WebScene.NativeEngine.Probe/native/webscene_css_text_values.h

@@ -56,25 +56,43 @@ inline float resolved_word_spacing(const dom_node& node)
     return 0;
 }
 
-inline float resolved_declared_font_size(const dom_node& node, const std::string& value)
+inline float resolved_declared_font_size_from_parent(
+    const dom_node& node,
+    const std::string& value,
+    float parent_font_size)
 {
     if (value == "inherit" || value == "unset") return -1.0F;
     if (value == "initial" || value == "revert") return 14.0F;
     const auto parsed = native_document::parse_length(value);
     if (parsed.unit == length_unit::em) {
-        return std::max(0.0F, parsed.value * inherited_font_size(node));
+        return std::max(0.0F, parsed.value * parent_font_size);
     }
     if (parsed.unit == length_unit::rem) {
         const auto root_size = node.tag == "html" ? 16.0F : document_root_font_size(node);
         return std::max(0.0F, parsed.value * root_size);
     }
     if (parsed.unit == length_unit::percent) {
         return std::max(0.0F,
-            parsed.value * inherited_font_size(node) / 100.0F + parsed.pixel_offset);
+            parsed.value * parent_font_size / 100.0F + parsed.pixel_offset);
     }
     return std::max(0.0F, parsed.value);
 }
 
+inline float resolved_declared_font_size(const dom_node& node, const std::string& value)
+{
+    return resolved_declared_font_size_from_parent(
+        node, value, inherited_font_size(node));
+}
+
+inline float resolved_pseudo_font_size(const dom_node& originating, const std::string& value)
+{
+    const auto originating_font_size = originating.style.font_size >= 0
+        ? originating.style.font_size
+        : originating.tag == "html" ? 16.0F : inherited_font_size(originating);
+    return resolved_declared_font_size_from_parent(
+        originating, value, originating_font_size);
+}
+
 inline float resolved_declared_line_height(
     const dom_node& node,
     const std::string& value,

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

@@ -0,0 +1,36 @@
+#include "webscene_css_text_values.h"
+
+#include <cmath>
+#include <cstdlib>
+#include <iostream>
+#include <string_view>
+
+namespace {
+void require(bool condition, std::string_view message)
+{
+    if (condition) return;
+    std::cerr << "CSS pseudo font-size test failed: " << message << '\n';
+    std::exit(1);
+}
+}
+
+int main()
+{
+    webscene_native::dom_node originating;
+    originating.tag = "span";
+    originating.style.font_size = 13.0F;
+    const auto resolved = [&](const std::string& value) {
+        return webscene_native::css::resolved_pseudo_font_size(originating, value);
+    };
+    require(std::abs(resolved("150%") - 19.5F) < 0.001F,
+        "150% did not resolve from the originating 13px size");
+    require(std::abs(resolved("1.5em") - 19.5F) < 0.001F,
+        "1.5em did not resolve from the originating 13px size");
+    require(std::abs(resolved("19.5px") - 19.5F) < 0.001F,
+        "absolute pixels changed during pseudo resolution");
+    require(resolved("inherit") == -1.0F && resolved("unset") == -1.0F,
+        "inherit and unset did not preserve pseudo inheritance");
+    require(resolved("initial") == 14.0F,
+        "initial did not select the engine's medium font size");
+    std::cout << "CSS pseudo font-size tests passed\n";
+}

experiments/WebScene.NativeEngine.Probe/tests/native_v8_runtime_rendering_metrics_tests.inc

@@ -816,10 +816,10 @@ void test_generated_pseudo_font_family_scene_and_scale_gate()
         auto advance = font_size * 3.0F;
         if (selected.find("FixtureIconAlternate") != std::string_view::npos) {
             ++state.alternate_calls;
-            advance = 18.0F;
+            advance = font_size * 0.9F;
         } else if (selected.find("FixtureIcon") != std::string_view::npos) {
             ++state.fixture_calls;
-            advance = 12.0F;
+            advance = font_size * 0.6F;
         } else if (selected.find("ParentFace") != std::string_view::npos) {
             ++state.parent_calls;
         }
@@ -885,6 +885,9 @@ void test_generated_pseudo_font_family_scene_and_scale_gate()
                             + std::string(resource);
                     }
                     if (command.rgba != 0x0C2238FFU) continue;
+                    require(resource.starts_with("19.5\t"),
+                        "generated pseudo text command did not serialize the resolved 19.5px size: "
+                            + std::string(resource));
                     const auto family_field = "\t" + std::string(expected_family) + "\t";
                     require(resource.find(family_field) != std::string_view::npos,
                         "generated pseudo text command used the originating font family: "
@@ -927,10 +930,10 @@ void test_generated_pseudo_font_family_scene_and_scale_gate()
         const rules = document.createElement('style');
         rules.id = 'pseudo-font-rules';
         rules.textContent = `
-          .icon-host { display:block; font-family:ParentFace; height:20px; }
+          .icon-host { display:block; font-family:ParentFace; font-size:13px; height:20px; }
           .icon-host::before { content:'\\e023'; display:inline-block;
             color:rgb(12,34,56); font-family:FixtureIcon;
-            font-size:20px; line-height:20px; }
+            font-size:150%; line-height:20px; }
           #single-icon::before { font-family:WrongFace; }
           .icon-host::before { font-family:FixtureIcon !important; }
           .icon-host.alternate::before { font-family:FixtureIconAlternate !important; }
@@ -943,27 +946,27 @@ void test_generated_pseudo_font_family_scene_and_scale_gate()
         document.body.appendChild(host);
       })()
     )JS", "native-pseudo-font-family-setup.js");
-    const auto initial = capture("FixtureIcon", 12.0F, 1U);
+    const auto initial = capture("FixtureIcon", 11.7F, 1U);
     execute(engine,
         "document.getElementById('single-icon').classList.add('inherited')",
         "native-pseudo-font-family-inherit.js");
-    const auto inherited = capture("ParentFace", 60.0F, 1U);
+    const auto inherited = capture("ParentFace", 58.5F, 1U);
     execute(engine,
         "document.getElementById('single-icon').classList.remove('inherited')",
         "native-pseudo-font-family-inherit-restore.js");
-    const auto inherited_restored = capture("FixtureIcon", 12.0F, 1U);
+    const auto inherited_restored = capture("FixtureIcon", 11.7F, 1U);
     require(initial.checksum != inherited.checksum
             && initial.checksum == inherited_restored.checksum
             && initial.node_ids == inherited_restored.node_ids,
         "pseudo font-family inheritance did not exactly restore retained scene identity");
     execute(engine,
         "document.getElementById('single-icon').classList.add('alternate')",
         "native-pseudo-font-family-alternate.js");
-    const auto alternate = capture("FixtureIconAlternate", 18.0F, 1U);
+    const auto alternate = capture("FixtureIconAlternate", 17.55F, 1U);
     execute(engine,
         "document.getElementById('single-icon').classList.remove('alternate')",
         "native-pseudo-font-family-restore.js");
-    const auto restored = capture("FixtureIcon", 12.0F, 1U);
+    const auto restored = capture("FixtureIcon", 11.7F, 1U);
     require(initial.checksum != alternate.checksum
             && initial.checksum == restored.checksum
             && initial.node_ids == restored.node_ids,
@@ -980,10 +983,11 @@ void test_generated_pseudo_font_family_scene_and_scale_gate()
       (() => {
         const rules = document.getElementById('pseudo-font-rules');
         rules.textContent += `
-          #bulk > .bulk-icon { display:block; height:20px; font-family:ParentFace; }
+          #bulk > .bulk-icon { display:block; height:20px; font-family:ParentFace;
+            font-size:13px; }
           #bulk > .bulk-icon::before { content:'\\e023'; display:inline-block;
             color:rgb(12,34,56); font-family:FixtureIcon;
-            font-size:20px; line-height:20px; }
+            font-size:150%; line-height:20px; }
           #bulk.alternate > .bulk-icon::before { font-family:FixtureIconAlternate; }
         `;
         const bulk = document.createElement('main');
@@ -1001,13 +1005,13 @@ void test_generated_pseudo_font_family_scene_and_scale_gate()
     require(evaluate(engine, "document.getElementById('bulk').children.length",
                 "native-pseudo-font-family-scale-count.js") == "4096",
         "pseudo font-family scale fixture did not create 4,096 icons");
-    const auto bulk_initial = capture("FixtureIcon", 12.0F, 4096U);
+    const auto bulk_initial = capture("FixtureIcon", 11.7F, 4096U);
     execute(engine, "document.getElementById('bulk').classList.add('alternate')",
         "native-pseudo-font-family-scale-alternate.js");
-    const auto bulk_alternate = capture("FixtureIconAlternate", 18.0F, 4096U);
+    const auto bulk_alternate = capture("FixtureIconAlternate", 17.55F, 4096U);
     execute(engine, "document.getElementById('bulk').classList.remove('alternate')",
         "native-pseudo-font-family-scale-restore.js");
-    const auto bulk_restored = capture("FixtureIcon", 12.0F, 4096U);
+    const auto bulk_restored = capture("FixtureIcon", 11.7F, 4096U);
     require(bulk_initial.checksum != bulk_alternate.checksum
             && bulk_initial.checksum == bulk_restored.checksum
             && bulk_initial.node_ids == bulk_restored.node_ids,
@@ -1036,7 +1040,7 @@ void test_generated_pseudo_font_family_scene_and_scale_gate()
     require(elapsed < 5000.0,
         "4,096 pseudo icons across 100 family cycles exceeded 5 seconds: "
             + std::to_string(elapsed));
-    const auto bulk_after_cycles = capture("FixtureIcon", 12.0F, 4096U);
+    const auto bulk_after_cycles = capture("FixtureIcon", 11.7F, 4096U);
     require(bulk_after_cycles.checksum == bulk_initial.checksum
             && bulk_after_cycles.node_ids == bulk_initial.node_ids,
         "scaled family cycles did not restore the original retained scene");

tests/WebPlatformSubset/contracts/css-pseudo-icon-font-family-ref.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>Reference for generated pseudo downloadable icon font</title>
+<title>Reference for generated pseudo downloadable icon font and relative size</title>
 <style>
   /* Subset of tests/Fonts/Roboto/Roboto-400.ttf (OFL.txt): U+E023 maps to H; U+E099 maps to X. */
   @font-face { font-family: FixtureIcon; src: url("data:font/woff2;base64,AAEAAAAPAIAAAwBwR0RFRgARAAIAAALUAAAAFkdQT1NEdkx1AAAC7AAAACBHU1VCkxWCFgAAAwwAAAA2T1MvMlKNUiIAAAF4AAAAYFNUQVRfnUM1AAADRAAAAF5jbWFw4SHgCgAAAeQAAAA8Z2FzcAAIABkAAALIAAAADGdseWYwT/DgAAACKAAAAHhoZWFkEDQiOQAAAPwAAAA2aGhlYQywC/oAAAE0AAAAJGhtdHgORQFHAAAB2AAAAAxsb2NhABsAPAAAAiAAAAAIbWF4cAAHAA0AAAFYAAAAIG5hbWUABgAAAAACoAAAAAZwb3N0/20AZAAAAqgAAAAgAAEAAAADA9eI9yBeXw889QAbCAAAAAAAxPARLgAAAADm0cKGADoAAAUIBbAAAAAJAAIAAAAAAAAAAQAAB2z+DAAABbUAOgA2BQgIAAAAAAAAAAAAAAAAAAAAAAMAAQAAAAMADAADAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAEBIQBkAAFAAAFmgUzAAABHwWaBTMAAAPRAGYCAAAAAgAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAABHT09HAEDgI+CZBgD+AABmB5oCAAAAAAEAAAAABDoFsAAAACAAAwOMAGQFtQCpBQQAOgAAAAIAAAADAAAAFAADAAEAAAAUAAQAKAAAAAYABAABAALgI+CZ//8AAOAj4Jn//x/eH2kAAQAAAAAAAAAAAAAAGwA8AAMAqQAABQgFsAADAAcACwAAQRUhNRMRIxEhESMRBGD87B7BBF/AAz6dnQJy+lAFsPpQBbAAAAEAOgAABM4FsAALAABBAQEzAQEjAQEjAQEBJgFeAV7h/jQB1+P+mf6Z4wHX/jQFsP3SAi79L/0hAjn9xwLfAtEAAAAAAAAGAAAAAwAAAAAAAP9qAGQAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAIACAAI//8ADwABAAAADAAAAAAAAAABAAEAAgABAAEAAAABAAAACgAcAB4AAURGTFQACAAEAAAAAP//AAAAAAAAAAEAAAAKADIANAAEREZMVAAaY3lybAAkZ3JlawAkbGF0bgAkAAQAAAAA//8AAAAAAAAAAAAAAAAAAQABAAgAAwAAABQAAwAAACwAAndkdGgBJQAAd2dodAEoAAFpdGFsATIAAgAGABIAIgABAAAAAgEnAGQAAAADAAEAAgEsAZAAAAK8AAAAAwACAAIBKAAAAAAAAQAAAAA=") format("woff2"); }
@@ -10,7 +10,7 @@
   .tab { height: 30px; margin-top: 8px; }
   .row { height: 22px; margin-top: 10px; overflow: hidden; }
   .icon, .tab::before, .row::before { position: absolute; left: 8px; top: 4px; width: 20px; height: 20px;
-    font-family: FixtureIcon; font-size: 20px; line-height: 20px; font-weight: 400;
+    font-family: FixtureIcon; font-size: 150%; line-height: 20px; font-weight: 400;
     text-align: left; color: rgb(212, 215, 214); }
   .row .icon, .row::before { top: 1px; color: rgb(81, 154, 186); }
   .label { position: absolute; left: 34px; top: 8px; }

tests/WebPlatformSubset/contracts/css-pseudo-icon-font-family.html

@@ -1,6 +1,6 @@
 <!doctype html>
 <meta charset="utf-8">
-<title>Generated pseudo content selects its own downloadable icon font</title>
+<title>Generated pseudo content selects its own icon font and relative size</title>
 <link rel="match" href="css-pseudo-icon-font-family-ref.html">
 <style>
   /* Subset of tests/Fonts/Roboto/Roboto-400.ttf (OFL.txt): U+E023 maps to H; U+E099 maps to X. */
@@ -11,7 +11,7 @@
   .tab { height: 30px; margin-top: 8px; }
   .row { height: 22px; margin-top: 10px; overflow: hidden; }
   .icon, .tab::before, .row::before { position: absolute; left: 8px; top: 4px; width: 20px; height: 20px;
-    font-family: FixtureIcon; font-size: 20px; line-height: 20px; font-weight: 400;
+    font-family: FixtureIcon; font-size: 150%; line-height: 20px; font-weight: 400;
     text-align: left; color: rgb(212, 215, 214); }
   .row .icon, .row::before { top: 1px; color: rgb(81, 154, 186); }
   .label { position: absolute; left: 34px; top: 8px; }

tests/WebPlatformSubset/webscene-pseudo-icon-font-profile.json

@@ -1,5 +1,5 @@
 {
-  "profile": "webscene-pseudo-icon-font-1",
+  "profile": "webscene-pseudo-icon-font-2",
   "wptRevision": "2c705104a295c48053eeddf7fe0170d790a4e853",
   "runtime": "v8",
   "viewport": {
@@ -14,11 +14,12 @@
       "reference": "contracts/css-pseudo-icon-font-family-ref.html",
       "capabilities": [
         "generated-pseudo-font-family",
+        "generated-pseudo-relative-font-size",
         "downloadable-font-face",
         "private-use-glyph-paint"
       ],
       "evidence": ["code-oss-seti-tab-and-list-icon-reduction"],
-      "reason": "Exact-pixel reduction of generated icon labels whose originating element uses the system UI face while ::before selects a downloadable icon face. The fixture maps the two private-use code points observed in unchanged Code OSS and compares them with ordinary reference glyph boxes."
+      "reason": "Exact-pixel reduction of generated icon labels whose originating element uses a 13px system UI face while ::before selects a downloadable icon face at 150%, matching unchanged Code OSS. The fixture maps the two observed private-use code points and compares the computed 19.5px pseudo glyphs with ordinary reference glyph boxes."
     }
   ],
   "harnessBlocked": [],