Not displaying the complete icon for images smaller than 50x50.

[magda-chrzescian]

Suggested merge commit message (convention)

Fix (image): The image upload success indicator should not be displayed for images smaller than 50x50px. Closes #9165.

---

Additional information

For example – encountered issues, assumptions you had to make, other affected tickets, etc.

[oleq]

Instead of using JS, check out

diff --git a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css
index 5b8eff4006..28e2696e35 100644
--- a/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css
+++ b/packages/ckeditor5-theme-lark/theme/ckeditor5-image/imageuploadicon.css
@@ -7,13 +7,12 @@
          --ck-color-image-upload-icon: hsl(0, 0%, 100%);
          --ck-color-image-upload-icon-background: hsl(120, 100%, 27%);

-         --ck-image-upload-icon-size: 20px;
+         --ck-image-upload-icon-size: 20;
          --ck-image-upload-icon-width: 2px;
+         --ck-image-upload-icon-is-visible: clamp(0px, 100% - 50px, 1px);
 }

 .ck-image-upload-complete-icon {
-         width: var(--ck-image-upload-icon-size);
-         height: var(--ck-image-upload-icon-size);
          opacity: 0;
          background: var(--ck-color-image-upload-icon-background);
          animation-name: ck-upload-complete-icon-show, ck-upload-complete-icon-hide;
@@ -21,11 +20,19 @@
          animation-duration: 500ms, 500ms;

          /* To make animation scalable. */
-         font-size: var(--ck-image-upload-icon-size);
+         font-size: calc( 1px * var(--ck-image-upload-icon-size));

          /* Hide completed upload icon after 3 seconds. */
          animation-delay: 0ms, 3000ms;

+         /*
+          * Use CSS math to similate container queries.
+          * https://css-tricks.com/the-raven-technique-one-step-closer-to-container-queries/#what-about-showing-and-hiding-things
+          */
+         overflow: hidden;
+         width: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
+         height: calc(var(--ck-image-upload-icon-is-visible) * var(--ck-image-upload-icon-size));
+
          /* This is check icon element made from border-width mixed with animations. */
          &::after {
                   /* Because of border transformation we need to "hard code" left position. */

[magda-chrzescian]

@oleq Wow, this is a piece of magic!
I'll check if I can go this way also for the #9166.