css: refactor the computed style impl (#62)

Author: yorkie

crates/jsbindings/bindings.layout.hpp

@@ -91,7 +91,7 @@ namespace crates::layout2
 
   protected:
     virtual std::optional<T> parse(const std::string &input) = 0;
-    virtual std::string stringify() { return ""; }
+    virtual std::string stringify() const { return ""; }
 
   protected:
     T handle_;
@@ -438,7 +438,9 @@ namespace crates::layout2
 #undef XX
         return std::nullopt;
       }
-      std::string stringify() override
+
+    public:
+      std::string stringify() const override
       {
         switch (this->handle_)
         {
@@ -451,8 +453,6 @@ namespace crates::layout2
           return "";
         }
       }
-
-    public:
       friend std::ostream &operator<<(std::ostream &os, const T &value)
       {
         return os << value.stringify();
@@ -478,7 +478,9 @@ namespace crates::layout2
           return holocron::layout::AlignSelf::Auto;
         return BoxAlignmentProperty::parse(input);
       }
-      std::string stringify() override
+
+    public:
+      std::string stringify() const override
       {
         if (handle_ == holocron::layout::AlignSelf::Auto)
           return "auto";
@@ -971,18 +973,42 @@ namespace crates::layout2
   public:
     friend std::ostream &operator<<(std::ostream &os, const LayoutStyle &style)
     {
-      os << "LayoutStyle {" << std::endl;
-      os << "    display: " << style.display() << "," << std::endl;
-      os << "  boxSizing: " << style.boxSizing() << "," << std::endl;
-      os << "  overflowX: " << style.overflow().x() << "," << std::endl;
-      os << "  overflowY: " << style.overflow().y() << "," << std::endl;
-      os << "   position: " << style.position() << "," << std::endl;
-      os << "       size: " << "(" << style.width() << ", " << style.height() << ")," << std::endl;
-      os << "  [min]size: " << "(" << style.minWidth() << ", " << style.minHeight() << ")," << std::endl;
-      os << "  [max]size: " << "(" << style.maxWidth() << ", " << style.maxHeight() << ")," << std::endl;
-      os << "     margin: " << style.margin() << "," << std::endl;
-      os << "    padding: " << style.padding() << "," << std::endl;
-      os << "}";
+      std::ostringstream flex_descriptor;
+      flex_descriptor << "direction=" << style.flexDirection()
+                      << ", wrap=" << style.flexWrap()
+                      << ", basis=" << style.flexBasis()
+                      << ", grow=" << style.flexGrow()
+                      << ", shrink=" << style.flexShrink();
+
+      os << "LayoutStyle {" << std::endl
+         << "              display: " << style.display() << std::endl
+         << "           box-sizing: " << style.boxSizing() << std::endl
+         << "           overflow-x: " << style.overflow().x() << std::endl
+         << "           overflow-y: " << style.overflow().y() << std::endl
+         << "             position: " << style.position() << std::endl
+         << "                 size: " << "(" << style.width() << ", " << style.height() << ")" << std::endl
+         << "            [min]size: " << "(" << style.minWidth() << ", " << style.minHeight() << ")" << std::endl
+         << "            [max]size: " << "(" << style.maxWidth() << ", " << style.maxHeight() << ")" << std::endl
+         << "               margin: " << style.margin() << std::endl
+         << "              padding: " << style.padding() << std::endl
+         << "               border: " << style.border() << std::endl
+         << "                 flex: " << flex_descriptor.str() << std::endl
+         << "          align-items: " << style.alignItems() << std::endl
+         << "           align-self: " << style.alignSelf() << std::endl
+         << "        align-content: " << style.alignContent() << std::endl
+         << "        justify-items: " << style.justifyItems() << std::endl
+         << "         justify-self: " << style.justifySelf() << std::endl
+         << "      justify-content: " << style.justifyContent() << std::endl
+         << "   grid-template-rows: " << std::string(style.style_.gridAutoColumns) << std::endl
+         << "grid-template-columns: " << std::string(style.style_.gridTemplateColumns) << std::endl
+         << "       grid-auto-rows: " << std::string(style.style_.gridAutoRows) << std::endl
+         << "    grid-auto-columns: " << std::string(style.style_.gridAutoColumns) << std::endl
+         << "       grid-auto-flow: " << std::string(style.style_.gridAutoFlow) << std::endl
+         << "       grid-row-start: " << std::string(style.style_.gridRowStart) << std::endl
+         << "         grid-row-end: " << std::string(style.style_.gridRowEnd) << std::endl
+         << "    grid-column-start: " << std::string(style.style_.gridColumnStart) << std::endl
+         << "      grid-column-end: " << std::string(style.style_.gridColumnEnd) << std::endl
+         << "}";
       return os;
     }
     operator holocron::layout::Style() const { return style_; }

docs/development-zh.md

@@ -36,13 +36,7 @@ $ make android CLEAN=yes RELEASE=yes
 
 ### 应用进程
 
-JSAR 会将每个应用进程的日志也打印到 `jsar` 中，比如：
-
-```
-07-12 22:12:23.326  9826  9850 D jsar    : client(9957): Detected a long frame(#135) takes 341ms in session(2)
-```
-
-它的格式表示为 `client(<进程ID>): <日志内容>`。
+JSAR 的应用日志不会在 `jsar` 通道中出现，需要开发者在 `${运行时目录}/logs/${应用进程ID}.(out|err).log` 中查看。
 
 ### 文档事件
 

fixtures/html/layout-grid-example.html

@@ -40,10 +40,11 @@
     .grid-container {
       display: grid;
       border: none;
-      background-color: #c9d4df30;
+      box-sizing: border-box;
+      background-color: #c9d4df5f;
       grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
       gap: 20px;
-      padding: 20px 0;
+      padding: 20px;
       width: 100%;
     }
 
@@ -52,7 +53,6 @@
       background: rgba(0, 81, 255, 0.85);
       border-radius: 20px;
       padding: 50px;
-      margin: 20px;
       transform: translateZ(10px);
     }
 
@@ -78,57 +78,57 @@
     <h1>Grid Layout Example</h1>
   </header>
 
-  <div class="grid-container">
-    <div class="grid-item">
+  <main class="grid-container">
+    <section class="grid-item">
       <img src="images/jsar-logo-00.png" />
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 1</h3>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 2</h3>
       <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 3</h3>
       <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 4</h3>
       <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 5</h3>
       <p>Excepteur sint occaecat cupidatat non proident.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 6</h3>
       <p>Excepteur sint occaecat cupidatat non proident.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 7</h3>
       <p>Excepteur sint occaecat cupidatat non proident.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 8</h3>
       <p>Excepteur sint occaecat cupidatat non proident.</p>
-    </div>
+    </section>
 
-    <div class="grid-item">
+    <section class="grid-item">
       <h3>Grid Item 9</h3>
       <p>Excepteur sint occaecat cupidatat non proident.</p>
-    </div>
-  </div>
+    </section>
+  </main>
 </body>
 
 </html>

fixtures/html/simple.html

@@ -7,6 +7,8 @@
   <style>
     body {
       background-color: #fff;
+      font-size: 40px;
+      color: #6d172e;
     }
 
     img {

fixtures/html/simple.js

@@ -12,10 +12,10 @@ const image = document.querySelector('img');
 // }, 16);
 
 const div = document.getElementById('header');
-// setInterval(() => {
-//   const zAxis = Math.floor(15 + Math.sin(Date.now() / 500) * 10);
-//   div.style.transform = `translate3d(0, 0, ${zAxis}px)`;
-// }, 16);
+setInterval(() => {
+  const zAxis = Math.floor(15 + Math.sin(Date.now() / 500) * 10);
+  div.style.transform = `translate3d(0, 0, ${zAxis}px)`;
+}, 16);
 
 console.info('querySelector() =>', document.querySelector('.first'));
 {
@@ -28,8 +28,11 @@ console.info('querySelector() =>', document.querySelector('.first'));
 
 const main = document.querySelector('main');
 console.info('main.lastChild should be comment node', main.lastElementChild);
-main.addEventListener('click', (event) => {
-  console.info('main click', event);
+main.addEventListener('mouseenter', (event) => {
+  console.info('main mouseenter', event);
+});
+main.addEventListener('mouseleave', (event) => {
+  console.info('main mouseleave', event);
 });
 
 async function sleep(ms) {

fixtures/html/text-in-flexbox.html

@@ -10,11 +10,13 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      gap: 10px;
     }
 
     p {
       font-size: 80px;
       font-weight: bold;
+      background-color: rgba(255,0,0,0.2);
     }
   </style>
 </head>

src/client/browser/window.cpp

@@ -2,6 +2,7 @@
 #include <client/dom/document.hpp>
 #include <client/cssom/rules/css_style_rule.hpp>
 #include <client/cssom/selectors/matching.hpp>
+#include <client/cssom/values/computed/context.hpp>
 #include <client/html/html_element.hpp>
 
 #include "./window.hpp"
@@ -11,27 +12,37 @@ namespace browser
   using namespace std;
   using namespace client_cssom;
   using namespace client_cssom::rules;
+  using namespace client_cssom::values;
 
-  Window::Window(TrClientContextPerProcess *clientContext)
+  Window::Window(TrClientContextPerProcess *client_context)
       : dom::DOMEventTarget(),
-        clientContext_(clientContext)
+        client_context_(client_context)
   {
-    assert(clientContext_ != nullptr);
   }
 
-  const CSSStyleDeclaration &Window::getComputedStyle(shared_ptr<dom::Element> element,
-                                                      optional<string> pseudoElt) const
+  const ComputedStyle &Window::getComputedStyle(shared_ptr<dom::Node> elementOrTextNode,
+                                                optional<string> pseudoElt) const
   {
-    auto htmlElement = dynamic_pointer_cast<dom::HTMLElement>(element);
-    if (TR_UNLIKELY(htmlElement == nullptr))
-      throw invalid_argument("The element must be an HTMLElement");
+    assert(elementOrTextNode != nullptr && elementOrTextNode->isElementOrText() &&
+           "The element or text node must not be null and must be an element or text node.");
 
-    auto computedStyle = document_->styleCache().findStyle(htmlElement);
+    shared_ptr<ComputedStyle> computedStyle = document_->styleCache().findStyle(elementOrTextNode);
     if (computedStyle != nullptr)
       return *computedStyle;
 
-    computedStyle = document_->styleCache().createStyle(htmlElement, false);
-    const auto &stylesheets = htmlElement->getOwnerDocumentChecked().styleSheets();
+    computed::Context context = computed::Context::From(elementOrTextNode);
+    computedStyle = document_->styleCache().createStyle(elementOrTextNode, false);
+    computedStyle->update(context);
+
+    if (elementOrTextNode->isText())
+      return *computedStyle; // If it's a text node, return the computed style directly.
+
+    // Get the HTML element from the node.
+    auto htmlElement = dynamic_pointer_cast<dom::HTMLElement>(elementOrTextNode);
+    assert(htmlElement != nullptr && "The node must be an HTMLElement.");
+
+    // Update the style from the stylesheets.
+    const auto &stylesheets = elementOrTextNode->getOwnerDocumentChecked().styleSheets();
     for (auto stylesheet : stylesheets)
     {
       for (auto rule : stylesheet->cssRules())
@@ -40,14 +51,15 @@ namespace browser
         if (styleRule != nullptr)
         {
           if (selectors::matchesSelectorList(styleRule->selectors(), htmlElement))
-            computedStyle->update(styleRule->style());
+            computedStyle->update(styleRule->style(), context);
         }
         // TODO: handle other types of rules, such as `CSSImportRule`, `CSSMediaRule`, etc.
       }
     }
 
-    auto inlineStyle = htmlElement->style();
-    computedStyle->update(inlineStyle); // Override the style from the element's.
+    // Update the style from the element's inline style.
+    auto elementStyle = htmlElement->style();
+    computedStyle->update(elementStyle, context); // Override the style from the element's.
     return *computedStyle;
   }
 }