continue with CSS

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.
@@ -580,19 +593,82 @@ permission {
   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:
+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">
-color, background-color: Set by default to the user agent's default `button` colors. The user agent should consider accessibility guidelines for sufficient contrast, for example the WCAG AA 4.5:1 formula to ensure text is legible.
-box-shadow: Not allowed if it contains ‘inset' as it can be used to cover the background and therefore affect contrast.
-font: Care should be taken to ensure the font used is easily legible (e.g. not any dingbat font). The user agent should either hard set the font value without allowing override, or should maintain a curated list of allowed fonts.
-font-size: Needs to be large enough to ensure the font is legible.
-width, min-width, max-width: The user agent should ensure the PEPC width is sufficient to not let contents overflow. This requires computing the text size (based on font) programmatically and potentially adding the icon width if present.
-height, min-height, max-height: The user agent should ensure the PEPC height is sufficient to not let contents overflow. Intuitively this means the height should never be allowed to be smaller than 1em.
-cursor: Only keyword values are allowed. That is, only predefined cursors and no custom cursors are allowed. Other values have no effect.
+'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: _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 can't parse that.
+
+
 # Security & Privacy Considerations # {#secpriv}