ferus-web · xTrayambak · Mar 4, 2025 · Mar 4, 2025 · Mar 4, 2025 · Mar 4, 2025
@@ -9,16 +9,42 @@
 /* Paragraphs */
 p {
   font-size: 24px;
+  color: rgb(0, 0, 0);
 }
 
-strong { font-size: 24px; } /* FIXME: add support for multiple class matchers in one selector */
+strong {
+  font-size: 24px; 
+  color: rgb(0, 0, 0);
+} /* FIXME: add support for multiple class matchers in one selector */
+a {
+  font-size: 24px;
+  color: rgb(0, 0, 255); /* Make anchors appear blue. */
+}
 
 /* Headings
  * They progressively get smaller with each level.
 */
-h1 { font-size: 32px; }
-h2 { font-size: 30px; }
-h3 { font-size: 28px; }
-h4 { font-size: 24px; }
-h5 { font-size: 22px; }
-h6 { font-size: 20px; }
+h1 {
+  font-size: 32px;
+  color: rgb(0, 0, 0);
+}
+h2 {
+  font-size: 30px;
+  color: rgb(0, 0, 0);
+}
+h3 {
+  font-size: 28px;
+  color: rgb(0, 0, 0);
+}
+h4 {
+  font-size: 24px;
+  color: rgb(0, 0, 0);
+}
+h5 {
+  font-size: 22px;
+  color: rgb(0, 0, 0);
+}
+h6 {
+  font-size: 20px;
+  color: rgb(0, 0, 0);
+}
@@ -25,10 +25,7 @@ requires "jsony >= 1.1.5"
 requires "chagashi >= 0.5.4"
 requires "curly >= 1.1.1"
 requires "webby >= 0.2.1"
-
-when defined(ferusUseGlfw):
-  requires "glfw >= 3.4.0.4"
-else:
-  requires "windy >= 0.0.0"
-
 requires "waterpark >= 0.1.7"
+requires "chroma >= 0.2.7"
+requires "bumpy >= 1.1.2"
+requires "glfw >= 3.4.0.4"
@@ -11,15 +11,14 @@
 # -d:ferusSandboxAttachStrace
 # -d:ferusAddMangohudToRendererPrefix
 # -d:ferusJustWaitForConnection
--d:ferusUseGlfw
 -d:ferusUseCurl
 # -d:ferusIpcLogSendsToStdout
 
 # glfw flags
 # -d:glfwStaticLib
 
 # ferusgfx-specific flags
--d:ferusgfxDrawDamagedRegions
+# -d:ferusgfxDrawDamagedRegions
 # -d:ferusgfxDrawTouchInterestNodeBounds
 
 # Enable SIMD support

@@ -0,0 +1,9 @@
+<!DOCTYPE html>
+<html>
+  <head><title>Hello anchors!</title></head>
+  <body>
+    <a href="https://www.google.com">Visit Google</a>
+    <a href="https://www.wikipedia.org">Visit Wikipedia</a>
+    <a href="https://www.github.com">Visit GitHub</a>
+  </body>
+</html>
@@ -4,7 +4,7 @@ import pkg/[pixie, vmath]
 import ../../bindings/yoga
 import ../../components/parsers/html/document
 import ../../components/parsers/css/[parser, anb, types]
-import ../../components/style/[selector_engine, style_matcher]
+import ../../components/style/[selector_engine, style_matcher, functions]
 import ../../components/shared/sugar
 import ../../components/ipc/[client/prelude, shared]
 
@@ -16,6 +16,7 @@ type
     position*: Vec2
     dimensions*: Vec2
     fontSize*: float32
+    color*: ColorRGBA
 
   LayoutNode* = object
     parent*: ptr LayoutNode
@@ -91,7 +92,14 @@ proc traverse*(layout: Layout, node: var LayoutNode) =
     let fontSize =
       toPixels(&layout.stylesheet.getProperty(node.element, Property.FontSize))
       # The font-size attribute
+
+    let color =
+      evaluateRGBXFunction(&layout.stylesheet.getProperty(node.element, Property.Color))
+
+    failCond *color
+      # FIXME: Use a more fault-tolerant approach. Currently we just skip the entire node and its children upon this basic failure.
     node.processed.fontSize = fontSize
+    node.processed.color = &color
     node.font.size = fontSize
 
     let bounds = node.font.layoutBounds(text)
@@ -104,8 +112,36 @@ proc traverse*(layout: Layout, node: var LayoutNode) =
     let text = &node.element.text()
     let fontSize =
       toPixels(&layout.stylesheet.getProperty(node.element, Property.FontSize))
+    let color =
+      evaluateRGBXFunction(&layout.stylesheet.getProperty(node.element, Property.Color))
+
+    failCond *color
+      # FIXME: Use a more fault-tolerant approach. Currently we just skip the entire node and its children upon this basic failure.
+    node.font.size = fontSize
+    node.processed.fontSize = fontSize
+    node.processed.color = &color
+    let bounds = node.font.layoutBounds(text)
+
+    inlineElem
+    node.processed.dimensions = bounds
+  of TAG_A:
+    let text =
+      if *node.element.text:
+        &node.element.text()
+      else:
+        newString(0)
+
+    let fontSize =
+      toPixels(&layout.stylesheet.getProperty(node.element, Property.FontSize))
+    let color =
+      evaluateRGBXFunction(&layout.stylesheet.getProperty(node.element, Property.Color))
+
+    failCond *color
+      # FIXME: Use a more fault-tolerant approach. Currently we just skip the entire node and its children upon this basic failure.
+
     node.font.size = fontSize
     node.processed.fontSize = fontSize
+    node.processed.color = &color
     let bounds = node.font.layoutBounds(text)
 
     inlineElem

@@ -1,4 +1,8 @@
-import pkg/[jsony]
+## This file contains all CSS3 properties supported by Ferus.
+##
+## Author:
+## Trayambak Rai (xtrayambak at disroot dot org)
 
 type Property* {.pure.} = enum
   FontSize = "font-size"
+  Color = "color"
@@ -55,9 +55,6 @@ proc parseFunction*(parser: CSSParser, nameTok: Token): Option[CSSValue] {.inlin
 
   parser.state.atStartOf = none(BlockType)
 
-  if !parser.state.expectSemicolon():
-    return
-
   some(function(name, move(args)))
 
 proc parseRule*(parser: CSSParser): Option[Rule] =
@@ -77,6 +74,7 @@ proc parseRule*(parser: CSSParser): Option[Rule] =
     return
 
   let value = &ovalue
+
   var parsedValue: CSSValue
 
   case value.kind
@@ -123,6 +121,6 @@ proc consumeRules*(parser: CSSParser): Stylesheet =
     of tkIdent:
       stylesheet &= parser.onEncounterIdentifier(init)
     else:
-      assert off, $init.kind
+      discard
 
   stylesheet