===
navigate to selectors page
%require
===
plwr -S plwr-test open "http://localhost:8599/selectors.html"
---

===
computed-style: specific properties
===
plwr -S plwr-test computed-style '#style-target' display flex-direction align-items
---
{
  "align-items": "center",
  "display": "flex",
  "flex-direction": "column"
}

===
computed-style: dimensions and spacing
===
plwr -S plwr-test computed-style '#style-target' width padding-top padding-right padding-bottom padding-left margin-top
---
{
  "margin-top": "20px",
  "padding-bottom": "10px",
  "padding-left": "10px",
  "padding-right": "10px",
  "padding-top": "10px",
  "width": "200px"
}

===
computed-style: colors
===
plwr -S plwr-test computed-style '#style-target' background-color color
---
{
  "background-color": "rgb(255, 0, 0)",
  "color": "rgb(255, 255, 255)"
}

===
computed-style: border properties
===
plwr -S plwr-test computed-style '#style-target' border-top-width border-top-style border-top-color border-radius
---
{
  "border-radius": "8px",
  "border-top-color": "rgb(0, 0, 0)",
  "border-top-style": "solid",
  "border-top-width": "2px"
}

===
computed-style: positioning and visibility
===
plwr -S plwr-test computed-style '#style-target' position z-index opacity
---
{
  "opacity": "0.9",
  "position": "relative",
  "z-index": "10"
}

===
computed-style: font properties
===
plwr -S plwr-test computed-style '#style-target' font-size
---
{
  "font-size": "16px"
}

===
computed-style: single property
===
plwr -S plwr-test computed-style '#style-target' display
---
{
  "display": "flex"
}

===
computed-style: all styles returns full computed style object
===
plwr -S plwr-test computed-style '#style-target'
---
{{ styles: json object }}
---
where
* styles.display == "flex"
* styles.color == "rgb(255, 255, 255)"
* styles.position == "relative"
* styles.visibility == "visible"
* styles.opacity == "0.9"
* styles contains "background-color"
* styles contains "flex-direction"

===
computed-style: works with complex selectors
===
plwr -S plwr-test computed-style '.card p' display
---
{
  "display": "block"
}

===
computed-style: hidden element via display:none
===
plwr -S plwr-test computed-style '.hidden' display
---
{
  "display": "none"
}
