Spec: Add chapter on styling + CSS contraints. (#33)

permission-element.bs

@@ -19,8 +19,21 @@ Abstract: A `<permission>` HTML element to request browser permissions in-page.
 </pre>
 <pre class=link-defaults>
 # Disambiguation between multiple definitions with the same text:
-spec:css2; type:dfn; text:viewport
 spec:infra; type:dfn; text:user agent
+spec:css21; type:dfn; text:viewport
+spec:css21; type:property; text:color
+spec:css21; type:property; text:background-color
+spec:css21; type:property; text:font-size
+spec:css21; type:property; text:font-style
+spec:css21; type:property; text:display
+spec:css21; type:property; text:margin
+spec:css21; type:property; text:min-width
+spec:css21; type:property; text:max-width
+spec:css21; type:property; text:padding-bottom
+spec:css21; type:property; text:padding-top
+spec:css21; type:property; text:padding-left
+spec:css21; type:property; text:padding-right
+
 
 # Non-exported definitions, which we should be free to use when -- some day --
 # this is integrated into the HTML spec.
@@ -564,5 +577,108 @@ To <dfn for="HTMLPermissionElement">recheck type permissibility</dfn> for a
 
 </div>
 
-# CSS Integration # {#algorithms}
+# Rendering the <{permission}> Element # {#rendering}
+
+## Presentation ## {#presentation}
+
+The <{permission}> element is a [=devolvable widget=] and is chiefly rendered
+like a <{button}>. The button label is largely expected to be determined by
+the browser, rather than the page, and reflects the [=powerful features=]
+listed in {{[[Types]]}}, expressed as text and icons.
+
+The page can influence the <{permission}> element's styling, but with
+constraints to prevent abuse (e.g. minimum and maximum sizes for fonts and
+the label itself). The page can also select a locale for the text via the
+<{html-global/lang}> attribute.
+
+## Styling ## {#style}
+
+A <{permission}> element is expected to render with the following styles:
+
+<pre class="highlight lang-css">
+@namespace "http://www.w3.org/1999/xhtml";
+permission {
+  opacity: 1.0;
+  line-height: normal;
+  whitespace: nowrap;
+  user-select: none;
+  appearance: auto;
+
+  outline-offset: clamp(0, inherit, none); /* No negative outline-offsets. */
+  font-weight: clamp(200, inherit, none);  /* No font-weights below 200. */
+  word-spacing: clamp(0, inerhit, 0.5em);  /* Word-spacing between 0..0.5em */
+  letter-spacing: clamp(-0.05em, inherit, 0.2em);  /* Letter spacing between -0.05..0.2em */
+
+  /*
+   * Below, we assume that, if no value is specified, this will clamp to the
+   * minimum value, thus effectively providing a default, too.
+   */
+  min-height: clamp(1em, inherit, none);
+  max-height: clamp(none, inherit, 3em);
+}
+</pre>
+
+Additionally, a <{permission}> element puts contraints on a number of
+additional styles. If one of these conditions is not met, then a
+[=add a temporary blocker|temporary blocker is added=] with type
+{{PermissionElementBlockerReason/style_invalid}}.
+
+<pre class="simpledef">
+'color', 'background-color':
+  Set by default to the user agent's default `button` colors.
+  The [=contrast ratio=] between the 2 colors needs to be at least 3.
+  Alpha has to be 1.
+
+'font-size':
+  Must be set larger or equal than ''font-size/small'' and less than or equal
+  to ''font-size/xx-large''.
+</pre>
+
+ISSUE: font-size: Explainer says, "Zoom will be taken into account when computing font-size." I have no idea what that means with absolute font sizes.
+
+The following conditions on the style are resolved by modifying the style:
+
+<pre class="simpledef">
+'margin', and any margin-* properties:
+  Values under `4px` will be corrected to `4px`.
+  This is done to help prevent false positives for the logic that detects the
+  element being covered by something else.
+
+'font-style':
+  Defaults to ''font-style/normal''. If values other than
+  ''font-style/normal'' or ''font-style/italic'' are specified,
+  the default will be used instead.
+
+'display':
+  Defaults to ''display/inline-block''. If values other than
+  ''display/inline-block'' or ''display/none'' are specified, the default will
+  be used again.
+
+'min-width':
+  Defaults to ''width/fit-content''. If a value exists, the <<max()>> of
+  ''width/fit-content'' and the computed value is used.
+
+'max-width':
+  Defaults to 3 * ''width/fit-content''.
+  If a value exists, <<min()>> between the default and the inherited value
+  will be used. However this does not apply if the element has a border with
+  a width of at least 1px and a color that has a contrast ratio with the
+  background-color of at least 3 and alpha of 1.
+
+'padding-top':
+  If 'height' is `auto`, use 'padding-top'&#x3a; clamp(1em, inherit, none); 'padding-bottom'&#x3a; calc(padding-top);
+  Otherwise, ignore.
+
+'padding-left':
+  If 'width' is `auto`, use 'padding-left'&#x3a; clamp(none, inherit, 5em); 'padding-right'&#x3a; calc(padding-left);
+  Otherwise, ...
+
+</pre>
+
+ISSUE: Why the complicated 'max-width' rule?
+
+ISSUE: 'padding-left' description said: <i>"Otherwise, This does not apply
+under the same border conditions as 'max-width', except 'padding-right'
+with still be set to the value of 'padding-left'."</i> I can't parse that.
+
 # Security & Privacy Considerations # {#secpriv}