@react-x11/components 0.10.0 → 0.11.0

package/dist/html/css/style.js

@@ -1253,15 +1253,29 @@ export function applyDeclaration(style, parent, prop, rawValue, ctx) {
         }
         case 'background-clip':
         case '-webkit-background-clip': {
-            // `text` the first layer's alone, which paints through the text
+            // `text` the first layer's alone, which paints through the text —
+            // and with `border-area` through its border as well, in either order
+            // (CSS Backgrounds 4, 2.1)
             const clips = layerValues(value, (part) => {
                 const v = part.toLowerCase();
-                return v === 'text' || isVisualBox(v) ? v : null;
+                if (v === 'text' || isBackgroundClip(v))
+                    return v;
+                const [a, b, more] = splitValue(v);
+                return !more &&
+                    ((a === 'border-area' && b === 'text') ||
+                        (a === 'text' && b === 'border-area'))
+                    ? 'border-area text'
+                    : null;
             });
             if (!clips)
                 return;
-            style.backgroundClipText = clips[0] === 'text';
-            const boxes = clips.map((c) => (c === 'text' ? 'border-box' : c));
+            style.backgroundClipText =
+                clips[0] === 'text' || clips[0] === 'border-area text';
+            const boxes = clips.map((c) => c === 'text'
+                ? 'border-box'
+                : c === 'border-area text'
+                    ? 'border-area'
+                    : c);
             style.backgroundClip = boxes[0];
             style.backgroundClips = boxes.length > 1 ? boxes : null;
             return;
@@ -2401,6 +2415,15 @@ export function settleOverflow(style) {
 function isVisualBox(v) {
     return v === 'border-box' || v === 'padding-box' || v === 'content-box';
 }
+function isBackgroundClip(v) {
+    return v === 'border-area' || isVisualBox(v);
+}
+/**
+ * Whether a box is a scroll container: its `overflow` is neither `visible`
+ * nor `clip`. `clip` cuts what overflows as `hidden` does, but makes no
+ * formatting context and keeps a flex or grid item's automatic minimum
+ * (CSS Overflow 3, 3.1) — so only this asks it apart from `hidden`.
+ */
 export function scrolls(style) {
     const x = style.overflowX;
     const y = style.overflowY;
@@ -2998,11 +3021,19 @@ function readBackgroundLayer(text, ctx, last) {
             i += 1;
         }
         else if (isVisualBox(v)) {
-            // one box is both the origin and the clip, and a second the clip
-            if ((boxes += 1) > 2)
+            // one box is both the origin and the clip, and a second the clip —
+            // which `border-area` is instead of, and the one box the origin
+            if ((boxes += 1) > (seen & 32 ? 1 : 2))
                 return null;
             if (boxes === 1)
                 layer.origin = v;
+            if (!(seen & 32))
+                layer.clip = v;
+            i += 1;
+        }
+        else if (v === 'border-area') {
+            if (boxes > 1 || !once(32))
+                return null;
             layer.clip = v;
             i += 1;
         }