Web Inspector: REGRESSION(?): Elements: background of color swatch is…

… not checkered https://bugs.webkit.org/show_bug.cgi?id=259720 Reviewed by Tim Nguyen. Ensure that CSS `background-size` with only a percentage width also have a height, as if it's not included then it's assumed to be `auto`. * Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css: (.inline-swatch:is(.color, .gradient)): * Source/WebInspectorUI/UserInterface/Views/DetailsSection.css: (.details-section > .content > .group > .row.simple > .warning): * Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.css: (.details-section > .content > .group > .row.font-variation > .warning): * Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css: (.spreadsheet-style-declaration-editor .property.has-warning .warning): Drive-by: these should be fine since they already have a defined `height`, but fix them the same just in case. Canonical link: https://commits.webkit.org/266502@main
WebKit · Aug 2, 2023 · 0c7db85 · 0c7db85
1 parent 32beea6
commit 0c7db85
Show file tree

Hide file tree

Showing 4 changed files with 4 additions and 4 deletions.
diff --git a/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css b/Source/WebInspectorUI/UserInterface/Views/DetailsSection.css
@@ -246,7 +246,7 @@ body[dir=rtl] .details-section > .header::before {
     background-image: url(/Images/Warning.svg);
     background-color: var(--warning-background-color);
     background-repeat: no-repeat;
-    background-size: var(--warning-icon-size);
+    background-size: var(--warning-icon-size) var(--warning-icon-size);
     background-position-y: center;
     background-position-x: calc(var(--warning-badge-arrow-depth) + var(--warning-icon-inline-padding));
     clip-path: polygon(0% 50%, var(--warning-badge-arrow-depth) 0%, 100% 0%, 100% 100%, var(--warning-badge-arrow-depth) 100%);

diff --git a/Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.css b/Source/WebInspectorUI/UserInterface/Views/FontVariationDetailsSectionRow.css
@@ -137,6 +137,6 @@
     height: var(--warning-icon-size);
     background-image: url(/Images/Warning.svg);
     background-repeat: no-repeat;
-    background-size: var(--warning-icon-size);
+    background-size: var(--warning-icon-size) var(--warning-icon-size);
     background-position: center;
 }
diff --git a/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css b/Source/WebInspectorUI/UserInterface/Views/InlineSwatch.css
@@ -45,7 +45,7 @@
     /* Make a checkered background for transparent colors to show against. */
     background-image: linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%)),
                       linear-gradient(to bottom, hsl(0, 0%, 80%), hsl(0, 0%, 80%));
-    background-size: 50%;
+    background-size: 50% 50%;
     background-position: top left, bottom right;
     background-repeat: no-repeat;
 }

diff --git a/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css b/Source/WebInspectorUI/UserInterface/Views/SpreadsheetCSSStyleDeclarationEditor.css
@@ -163,7 +163,7 @@ body.meta-key-pressed .spreadsheet-style-declaration-editor > .property.invalid-
     background-image: url(../Images/Warning.svg);
     background-color: var(--warning-background-color);
     background-repeat: no-repeat;
-    background-size: 9px;
+    background-size: 9px 9px;
     background-position-y: center;
     background-position-x: 7px;