package cascade

  1. Overview
  2. Docs
CSS generation and manipulation library for OCaml

Install 

dune-project
 Dependency

github.com Readme Changelog Edit opam file Versions (3)

Authors

  1. T
    Thomas Gazagnaire

Maintainers

  1. T
    Thomas Gazagnaire

Sources

cascade-1.2.0.tbz
sha256=3315f94068943b3655bf530c1d82b68655524ff3601efedfbaf0a7f886fbf5a1
sha512=0f187c8e17fcbddaa0ad2760930956451062e476b678e1e60daf6ad9e7414fad99a2d70534dfdf8bca0a1092e374d009051f06b0ce9da33f2742cdde0187e75c

doc/cascade.browser/Browser_compare/index.html

Module Browser_compareSource

Rendering stylesheets over one document in a headless Chromium and reporting where the renders differ.

The oracle is the browser's raster and nothing else. The document is loaded afresh under each sheet, at every viewport width a media condition in either sheet names and under every interaction state either sheet names, a state applied to every element at once; every animation is held at its start and every transition finished, and the whole page is captured and compared pixel for pixel. Two sheets render the same when every capture is the same picture. Where one differs, the computed styles of the elements under the differing pixels are read under both sheets and what they disagree on is listed, so a difference names a property; a computed value that differs over pixels that do not is not a difference, since what a script reads back is not what the browser renders.

The document's own style elements and stylesheet links are removed and its inline style attributes kept. A width or state named only by rules no element of the document can match is not rendered, since such a rule can change nothing on the page; the rules are judged as cascade prune judges them, so a selector the matcher has no model for, :hover among them, counts as matching. The sheets themselves are rendered as written.

Sourcetype render = {
  1. viewport : string;
    (*

    The viewport rendered, as WIDTHxHEIGHT.

    *)
  2. state : string;
    (*

    The interaction state applied, or none.

    *)
  3. x : int;
  4. y : int;
  5. width : int;
  6. height : int;
    (*

    The box the differing pixels span, in page pixels; the whole page when the two captures are not the same size.

    *)
  7. first_size : string;
    (*

    The first capture's size, as WIDTHxHEIGHT.

    *)
  8. second_size : string;
    (*

    The second capture's size.

    *)
}

One viewport and state under which the two sheets render differently.

Sourcetype difference = {
  1. viewport : string;
  2. state : string;
  3. element : string;
    (*

    A path to the element under the differing pixels.

    *)
  4. pseudo : string;
    (*

    The pseudo-element sampled, or "".

    *)
  5. property : string;
  6. first : string;
    (*

    The value under the first sheet.

    *)
  7. second : string;
    (*

    The value under the second sheet.

    *)
}

One computed-style value that an element under a differing render's pixels computes differently under the two sheets.

Sourcetype t = {
  1. meta : (string * string) list;
    (*

    What was rendered, as pairs keyed "browser" (its version), "browser_path", "elements", "properties", "pseudos", "states", "viewports", "captures" (how many renders were taken), "renders" (how many differed), "samples" and "differences" (the computed values read under differing renders, and how many differed), "document_styles_removed", "doctype_added" and, when the listing stopped short, "truncated".

    *)
  2. renders : render list;
    (*

    The renders that differ, in the order taken.

    *)
  3. differences : difference list;
    (*

    The computed values that differ under them, in the order read.

    *)
}
Sourceval run : html:string -> (string * string) list -> (t, string) result

run ~html sheets renders html under the two (name, css) of sheets and compares them to each other. The report carries one first and one second, so exactly two sheets are taken; fewer or more is Error. It is Error with the reason, too, when no node or no headless Chromium is found, when the driver fails, when the page reports an error, and when nothing was rendered: a run that compared nothing never reads as an equivalence.

Sourceval identical : t -> bool

identical report is whether every render was the same picture under every sheet.

Sourceval meta_int : t -> string -> int option

meta_int report key is the count key names in report's metadata.

Sourceval pp : Format.formatter -> t -> unit

pp ppf report prints the renders and differences of report as to_string lists them, without the header naming the sheets and the document.

Sourceval to_string : first:string -> second:string -> html:string -> t -> string

to_string ~first ~second ~html report is report for a reader: what was rendered, each render that differs with where, then each computed difference once with the viewports and states it holds under, a pseudo-element that repeats its element's difference counted rather than listed. first, second and html name the sheets and the document.