H-SMILE core. CSSS! (css-script) language.

H-SMILE core. CSSS! (css-script) language.

The calc() function.

The calc(<expression>) function can be used wherever length values are allowed. The expression within the parethesis is computed at the same time as em lengths are computed. In h-smile core engine expression inside the calc() is being interpreted by CSSS! evaluation engine can use limited subset of CSSS! features. In particular you can access DOM attributes and states of the element using following notation:

  • self.attribute – access to DOM attributes of the element.
  • self:state-flag – access to runtime flags of the DOM element: hover, active, focus, etc.

Where self designates the element for what the calc() is called.

Functions (methods) supported by the DOM element inside the calc()

There is a set of methods that are defined for the DOM element in CSSS! in context of calc() execution:

  • [element.]children() – integer, returns number of children of the element.
  • [element.]child(n:integer) – DOM element, returns child element at index n. n is a positive number in the range 1..children().
  • [element.]next() – DOM element, returns next sibling DOM element of this one.
  • [element.]previous() – DOM element, returns previous sibling DOM element of this one.
  • [element.]parent() – DOM element, returns parent DOM element of this one.
  • selectors methods:
    • element.$( selector ) – returns set of elements matching the selector. The method does lookup only among children of the element. :root pseudo class matches the element iself in this metod.  Example: self.$(:root > li):expanded = true will set expanded state for only li elements that are immediate children of the self.
    • element.$1( selector ) – the same as above but will return single element matching the selector.
    • element.$p( selector ) – returns set of parent elements of the element. :root is global DOM root element here.
    • element.$1p( selector ) – returns nearest parent element matching the selector. :root is global DOM root element here.
  • [element.]text-width("string") – returns width of the string in pixels measured using current style of the element.
  • [element.]min-intrinsic-width(), [element.]max-intrinsic-width() – intrinsic widths of the element.
  • [element.]min-intrinsic-height(), [element.]max-intrinsic-height() – intrinsic heights of the element.
  • [element.]system-scrollbar-width(),[element.]system-scrollbar-height() – width and height of vertical and horizontal scrollbars in the system.
  • [element.]system-border-width() – width of borders in system shapes of input elements.
  • [element.]system-small-icon-width(),[element.]system-small-icon-height() – dimensions of small icons used by host system.
  • [element.]foreground-image-width(),[element.]foreground-image-height() – physical dimensions of foreground image defined for the element (if any).
  • [element.]background-image-width(),[element.]background-image-height() – physical dimensions of background image defined for the element (if any).