From 64c2c4ce353104a93ec0860ef7c5bfa14f15c228 Mon Sep 17 00:00:00 2001
From: alstjr7375 <alstjr7375@daum.net>
Date: Fri, 11 Nov 2022 11:28:23 +0900
Subject: [PATCH] Fix: Bottom Rounded Corner - Australis & Wave background

---
 css/leptonChrome.css                          |  44 +++--
 icons/tab-bottom-corner-left-australis.svg    |   8 +-
 icons/tab-bottom-corner-left-wave.svg         |   8 +-
 icons/tab-bottom-corner-right-australis.svg   |   8 +-
 icons/tab-bottom-corner-right-wave.svg        |   8 +-
 .../_bottom_rounded_corner_others.scss        | 166 +++++++++++-------
 6 files changed, 154 insertions(+), 88 deletions(-)

diff --git a/css/leptonChrome.css b/css/leptonChrome.css
index bd3c231..f66ee00 100644
--- a/css/leptonChrome.css
+++ b/css/leptonChrome.css
@@ -6684,11 +6684,14 @@
       --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2);
       --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1);
       --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px);
+      --uc-tab-corner-bgimage: none;
     }
     @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.wave") {
       #tabbrowser-tabs {
         --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg");
+        --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-wave.svg#svgClipPath");
         --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg");
+        --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-wave.svg#svgClipPath");
         --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg");
         --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg");
         --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg");
@@ -6699,7 +6702,9 @@
     @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.australis") {
       #tabbrowser-tabs {
         --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg");
+        --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-australis.svg#svgClipPath");
         --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg");
+        --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-australis.svg#svgClipPath");
         --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg");
         --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg");
         --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg");
@@ -6710,7 +6715,9 @@
     @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome") {
       #tabbrowser-tabs {
         --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg");
+        --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chrome.svg#svgClipPath");
         --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg");
+        --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chrome.svg#svgClipPath");
         --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg");
         --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg");
         --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg");
@@ -6721,7 +6728,9 @@
     @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
       #tabbrowser-tabs {
         --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg");
+        --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-chromeLegacy.svg#svgClipPath");
         --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg");
+        --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-chromeLegacy.svg#svgClipPath");
         --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg");
         --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg");
         --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg");
@@ -6732,7 +6741,9 @@
     @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.edge") {
       #tabbrowser-tabs {
         --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg");
+        --uc-tab-corner-left-side-clipPath: url("../icons/tab-bottom-corner-left-edge.svg#svgClipPath");
         --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg");
+        --uc-tab-corner-right-side-clipPath: url("../icons/tab-bottom-corner-right-edge.svg#svgClipPath");
         --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg");
         --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg");
         --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg");
@@ -6780,9 +6791,10 @@
       stroke: transparent;
       -moz-context-properties: fill, stroke;
       /* Image */
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: bottom;
+      background-size: cover, auto auto;
+      background-repeat: no-repeat, no-repeat;
+      background-position: bottom, right top;
+      background-attachment: scroll, fixed;
     }
     @supports -moz-bool-pref("userChrome.tab.bottom_rounded_corner.all") {
       .tabbrowser-tab .tab-background::before,
@@ -6805,32 +6817,28 @@
     }
     .tabbrowser-tab .tab-background::before {
       left: var(--uc-tab-corner-half-size-reverse);
-      background-image: var(--uc-tab-corner-left-side-svg);
+      background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage);
+      clip-path: var(--uc-tab-corner-left-side-clipPath);
     }
     .tabbrowser-tab .tab-background::after {
       right: var(--uc-tab-corner-half-size-reverse);
-      background-image: var(--uc-tab-corner-right-side-svg);
+      background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
+      clip-path: var(--uc-tab-corner-right-side-clipPath);
     }
     .tabbrowser-tab[beforeselected-visible] .tab-background::after {
-      background-image: var(--uc-tab-corner-right-side-svg-clipped);
+      --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped);
     }
     .tabbrowser-tab[visuallyselected] + .tabbrowser-tab .tab-background::before {
-      background-image: var(--uc-tab-corner-left-side-svg-clipped);
+      --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped);
     }
-    .tabbrowser-tab[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
-      background-image: var(--uc-tab-corner-left-side-svg) !important;
-    }
-    .tabbrowser-tab[visuallyselected] .tab-background::before,
-    .tabbrowser-tab[visuallyselected] .tab-background::after,
-    .tabbrowser-tab[multiselected] .tab-background::before,
-    .tabbrowser-tab[multiselected] .tab-background::after {
+    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before,
+    .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
+      --uc-tab-corner-bgimage: var(--lwt-header-image, none);
       fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
     }
     @supports -moz-bool-pref("userChrome.tab.box_shadow") {
-      .tabbrowser-tab[visuallyselected] .tab-background::before,
-      .tabbrowser-tab[visuallyselected] .tab-background::after,
-      .tabbrowser-tab[multiselected] .tab-background::before,
-      .tabbrowser-tab[multiselected] .tab-background::after {
+      .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::before,
+      .tabbrowser-tab:is([visuallyselected], [multiselected]) .tab-background::after {
         stroke: var(--uc-tab-shadow-color);
       }
     }
diff --git a/icons/tab-bottom-corner-left-australis.svg b/icons/tab-bottom-corner-left-australis.svg
index a16786b..d8b9e26 100644
--- a/icons/tab-bottom-corner-left-australis.svg
+++ b/icons/tab-bottom-corner-left-australis.svg
@@ -1,3 +1,9 @@
 <svg width="30" height="30" viewBox="0 0 30 30" xmlns="http://www.w3.org/2000/svg">
-  <path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" d="M28.5 0C14.55.03 14.046 10.757 13.05 16.442 11.56 24.942 8.125 29.452 0 30h30V0m0 0h-1.5"/>
+  <defs>
+    <path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" d="M28.5 0C14.55.03 14.046 10.757 13.05 16.442 11.56 24.942 8.125 29.452 0 30h30V0m0 0h-1.5"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" x="-4" transform="scale(0.038, 0.0333)" />
+  </clipPath>
+  <use href="#tabCorner" />
 </svg>
diff --git a/icons/tab-bottom-corner-left-wave.svg b/icons/tab-bottom-corner-left-wave.svg
index 467efa9..9a0cdd0 100644
--- a/icons/tab-bottom-corner-left-wave.svg
+++ b/icons/tab-bottom-corner-left-wave.svg
@@ -1,3 +1,9 @@
 <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-  <path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" d="M 0,36 C 6,36 12.001,36 15.0005,30.0005 18,24.001 18,12.001 21.0005,6.0005 24.001,0 30,0 36,0 c 0,0 0,36 0,36 0,0 -36,0 -36,0 z"/>
+  <defs>
+    <path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" d="M 0,36 C 6,36 12.001,36 15.0005,30.0005 18,24.001 18,12.001 21.0005,6.0005 24.001,0 30,0 36,0 c 0,0 0,36 0,36 0,0 -36,0 -36,0 z"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" x="-3.6" transform="scale(0.0319, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
 </svg>
diff --git a/icons/tab-bottom-corner-right-australis.svg b/icons/tab-bottom-corner-right-australis.svg
index 367d660..c41499b 100644
--- a/icons/tab-bottom-corner-right-australis.svg
+++ b/icons/tab-bottom-corner-right-australis.svg
@@ -1,3 +1,9 @@
 <svg width="30" height="30" xmlns="http://www.w3.org/2000/svg">
-  <path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" d="M0 0h1.5m0 0c13.95.03 14.454 10.757 15.45 16.442C18.44 24.942 21.875 29.452 30 30H0V0"/>
+  <defs>
+    <path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="46.5, 100" fill="context-fill" d="M0 0h1.5m0 0c13.95.03 14.454 10.757 15.45 16.442C18.44 24.942 21.875 29.452 30 30H0V0"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" transform="scale(0.038, 0.0333)" />
+  </clipPath>
+  <use href="#tabCorner" />
 </svg>
diff --git a/icons/tab-bottom-corner-right-wave.svg b/icons/tab-bottom-corner-right-wave.svg
index ccf0cbd..7faf843 100644
--- a/icons/tab-bottom-corner-right-wave.svg
+++ b/icons/tab-bottom-corner-right-wave.svg
@@ -1,3 +1,9 @@
 <svg width="36" height="36" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg">
-  <path stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" d="M 36,36 C 30,36 23.999,36 20.9995,30.0005 18,24.001 18,12.001 14.9995,6.0005 11.999,0 6,0 0,0 c 0,0 0,36 0,36 0,0 36,0 36,0 z"/>
+  <defs>
+    <path id="tabCorner" stroke="context-stroke" stroke-width="1.5" stroke-dasharray="59.75 100" fill="context-fill" d="M 36,36 C 30,36 23.999,36 20.9995,30.0005 18,24.001 18,12.001 14.9995,6.0005 11.999,0 6,0 0,0 c 0,0 0,36 0,36 0,0 36,0 36,0 z"/>
+  </defs>
+  <clipPath id="svgClipPath" clipPathUnits="objectBoundingBox">
+    <use href="#tabCorner" transform="scale(0.0319, 0.0277)" />
+  </clipPath>
+  <use href="#tabCorner" />
 </svg>
diff --git a/src/tab/selected_tab/_bottom_rounded_corner_others.scss b/src/tab/selected_tab/_bottom_rounded_corner_others.scss
index 28aafb7..ad1e7ad 100644
--- a/src/tab/selected_tab/_bottom_rounded_corner_others.scss
+++ b/src/tab/selected_tab/_bottom_rounded_corner_others.scss
@@ -1,61 +1,24 @@
-#tabbrowser-tabs {
-  --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2);
-  --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1);
-  --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px);
+//-- Mixin ---------------------------------------------------------------------
+@function _clipPathURL($svg) {
+  @return url($svg + "#svgClipPath");
+}
+@mixin _clipPath($svg, $position) {
+  $result: _clipPathURL($svg);
 
-  @include Option("userChrome.tab.bottom_rounded_corner.wave") {
-    --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-wave.svg");
-    --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-wave.svg");
-    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg");
-    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg");
-    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg");
-    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg");
-
-    --uc-tab-corner-size: 30px;
+  @if $position == "left" {
+    --uc-tab-corner-left-side-svg: #{ url($svg) };
+    --uc-tab-corner-left-side-clipPath: #{ $result };
   }
-  @include Option("userChrome.tab.bottom_rounded_corner.australis") {
-    --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-australis.svg");
-    --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-australis.svg");
-    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg");
-    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg");
-    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg");
-    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg");
-
-    --uc-tab-corner-size: 30px;
-  }
-  @include Option("userChrome.tab.bottom_rounded_corner.chrome") {
-    --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chrome.svg");
-    --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chrome.svg");
-    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg");
-    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg");
-    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg");
-    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg");
-
-    --uc-tab-corner-size: 16px; // 18px;
-  }
-  @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
-    --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-chromeLegacy.svg");
-    --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-chromeLegacy.svg");
-    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg");
-    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg");
-    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg");
-    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg");
-
-    --uc-tab-corner-size: 35px;
-  }
-  @include Option("userChrome.tab.bottom_rounded_corner.edge") {
-    --uc-tab-corner-left-side-svg: url("../icons/tab-bottom-corner-left-edge.svg");
-    --uc-tab-corner-right-side-svg: url("../icons/tab-bottom-corner-right-edge.svg");
-    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg");
-    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg");
-    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg");
-    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg");
-
-    --uc-tab-corner-size: 16px;
+  @else if $position == "right" {
+    --uc-tab-corner-right-side-svg: #{ url($svg) };
+    --uc-tab-corner-right-side-clipPath: #{ $result };
   }
 }
+@mixin _tabCornerSVG($left, $right) {
+  @include _clipPath($left,  "left" );
+  @include _clipPath($right, "right");
+}
 
-//-- Mixin ---------------------------------------------------------------------
 @mixin _bottomRoundedCornerOtherPadding() {
   padding-inline: 0 !important;
   overflow-clip-margin: var(--uc-tab-corner-half-size) !important;
@@ -70,6 +33,74 @@
 
 //------------------------------------------------------------------------------
 
+#tabbrowser-tabs {
+  --uc-tab-corner-half-size: calc(var(--uc-tab-corner-size) / 2);
+  --uc-tab-corner-half-size-reverse: calc(var(--uc-tab-corner-half-size) * -1);
+  --uc-tab-corner-height: calc(var(--tab-min-height) - var(--tab-block-margin) + 1px);
+  --uc-tab-corner-bgimage: none;
+
+  @include Option("userChrome.tab.bottom_rounded_corner.wave") {
+    @include _tabCornerSVG(
+      "../icons/tab-bottom-corner-left-wave.svg",
+      "../icons/tab-bottom-corner-right-wave.svg"
+    );
+    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-wave-soft.svg");
+    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-wave-soft.svg");
+    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-wave-clipped.svg");
+    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-wave-clipped.svg");
+
+    --uc-tab-corner-size: 30px;
+  }
+  @include Option("userChrome.tab.bottom_rounded_corner.australis") {
+    @include _tabCornerSVG(
+      "../icons/tab-bottom-corner-left-australis.svg",
+      "../icons/tab-bottom-corner-right-australis.svg"
+    );
+    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-australis-soft.svg");
+    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-australis-soft.svg");
+    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-australis-clipped.svg");
+    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-australis-cilpped.svg");
+
+    --uc-tab-corner-size: 30px;
+  }
+  @include Option("userChrome.tab.bottom_rounded_corner.chrome") {
+    @include _tabCornerSVG(
+      "../icons/tab-bottom-corner-left-chrome.svg",
+      "../icons/tab-bottom-corner-right-chrome.svg"
+    );
+    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chrome-soft.svg");
+    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chrome-soft.svg");
+    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chrome-clipped.svg");
+    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chrome-clipped.svg");
+
+    --uc-tab-corner-size: 16px; // 18px;
+  }
+  @include Option("userChrome.tab.bottom_rounded_corner.chrome_legacy") {
+    @include _tabCornerSVG(
+      "../icons/tab-bottom-corner-left-chromeLegacy.svg",
+      "../icons/tab-bottom-corner-right-chromeLegacy.svg"
+    );
+    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-chromeLegacy-soft.svg");
+    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-chromeLegacy-soft.svg");
+    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-chromeLegacy-clipped.svg");
+    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-chromeLegacy-clipped.svg");
+
+    --uc-tab-corner-size: 35px;
+  }
+  @include Option("userChrome.tab.bottom_rounded_corner.edge") {
+    @include _tabCornerSVG(
+      "../icons/tab-bottom-corner-left-edge.svg",
+      "../icons/tab-bottom-corner-right-edge.svg"
+    );
+    --uc-tab-corner-left-side-svg-soft: url("../icons/tab-bottom-corner-left-edge-soft.svg");
+    --uc-tab-corner-right-side-svg-soft: url("../icons/tab-bottom-corner-right-edge-soft.svg");
+    --uc-tab-corner-left-side-svg-clipped: url("../icons/tab-bottom-corner-left-edge-clipped.svg");
+    --uc-tab-corner-right-side-svg-clipped: url("../icons/tab-bottom-corner-right-edge-clipped.svg");
+
+    --uc-tab-corner-size: 16px;
+  }
+}
+
 .tabbrowser-tab {
   @include Option("userChrome.tab.bottom_rounded_corner.all") {
     @include _bottomRoundedCornerOtherPadding;
@@ -109,9 +140,10 @@
 
       /* Image */
       // background-size: var(--tab-corner-rounding);
-      background-size: cover;
-      background-repeat: no-repeat;
-      background-position: bottom;
+      background-size: cover, auto auto;
+      background-repeat: no-repeat, no-repeat;
+      background-position: bottom, right top;
+      background-attachment: scroll, fixed;
 
       @include Option("userChrome.tab.bottom_rounded_corner.all") {
         content: "";
@@ -127,30 +159,32 @@
         fill: var(--lwt-selected-tab-background-color, var(--tab-selected-bgcolor, var(--toolbar-bgcolor))) !important;
       }
     }
-
     &::before {
       left: var(--uc-tab-corner-half-size-reverse);
-      background-image: var(--uc-tab-corner-left-side-svg);
+      background-image: var(--uc-tab-corner-left-side-svg), var(--uc-tab-corner-bgimage);
+      clip-path: var(--uc-tab-corner-left-side-clipPath);
     }
     &::after {
       right: var(--uc-tab-corner-half-size-reverse);
-      background-image: var(--uc-tab-corner-right-side-svg);
+      background-image: var(--uc-tab-corner-right-side-svg), var(--uc-tab-corner-bgimage);
+      clip-path: var(--uc-tab-corner-right-side-clipPath);
     }
   }
+
   &[beforeselected-visible] .tab-background::after {
-    background-image: var(--uc-tab-corner-right-side-svg-clipped);
+    --uc-tab-corner-right-side-svg: var(--uc-tab-corner-right-side-svg-clipped);
   }
   &[visuallyselected] + .tabbrowser-tab .tab-background::before {
-    background-image: var(--uc-tab-corner-left-side-svg-clipped);
-  }
-  &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
-    background-image: var(--uc-tab-corner-left-side-svg) !important;
+    --uc-tab-corner-left-side-svg: var(--uc-tab-corner-left-side-svg-clipped);
   }
+  // &[positionpinnedtabs] .tabbrowser-tab[first-visible-unpinned-tab] .tab-background::before {
+  //   background-image: var(--uc-tab-corner-left-side-svg), var(--lwt-header-image, none) !important;
+  // }
 
-  &[visuallyselected] .tab-background,
-  &[multiselected] .tab-background {
+  &:is([visuallyselected], [multiselected]) .tab-background {
     &::before,
     &::after {
+      --uc-tab-corner-bgimage: var(--lwt-header-image, none);
       fill: var(--tab-selected-bgcolor, var(--toolbar-bgcolor));
 
       @include Option("userChrome.tab.box_shadow") {