fix: the inline-truncation should only work as a direct children of x…

.changeset/legal-snails-mix.md

@@ -0,0 +1,5 @@
+---
+"@lynx-js/web-elements": patch
+---
+
+fix: the inline-truncation should only work as a direct child of x-text

packages/web-platform/web-elements/src/elements/XText/InlineTruncation.ts

@@ -9,7 +9,7 @@ import { Component } from '../../element-reactive/index.js';
 export class InlineTruncation extends HTMLElement {
   static XEnableCustomTruncation = 'x-text-custom-overflow';
   connectedCallback() {
-    if (!CSS.supports('selector(:has(inline-truncation))')) {
+    if (!CSS.supports('selector(:has(>inline-truncation))')) {
       if (
         this.parentElement?.tagName === 'X-TEXT'
         && !this.matches('inline-truncation ~ inline-truncation')

packages/web-platform/web-elements/src/elements/XText/XTextTruncation.ts

@@ -48,15 +48,10 @@ export class XTextTruncation
     return !this.#hasInlineTruncation && !this.#tailColorConvert;
   }
   get #hasInlineTruncation() {
-    if (CSS.supports('selector(:has(inline-truncation))')) {
-      return this.#dom.matches(':has(inline-truncation)');
-    } else {
-      const candidateElement = this.#dom.querySelector('inline-truncation');
-      if (candidateElement?.parentElement === this.#dom) {
-        return true;
-      }
-    }
-    return false;
+    return !!this.#findValidInlineTruncation();
+  }
+  #findValidInlineTruncation(): Element | null {
+    return this.#dom.querySelector(':scope > inline-truncation');
   }
   get #doExpensiveLineLayoutCalculation() {
     return (
@@ -157,7 +152,7 @@ export class XTextTruncation
       const currentLineText = end - start;
       if (this.#hasInlineTruncation) {
         this.#dom.setAttribute(XTextTruncation.showInlineTruncation, '');
-        const inlineTruncation = this.#dom.querySelector('inline-truncation')!;
+        const inlineTruncation = this.#findValidInlineTruncation()!;
         const inlineTruncationBoundingRect = inlineTruncation
           .getBoundingClientRect();
         const parentWidth = parentBondingRect!.width;

packages/web-platform/web-elements/src/elements/XText/x-text.css

@@ -12,7 +12,8 @@ x-text {
   color: initial;
 }
 
-x-text > x-text, x-text > lynx-wrapper > x-text {
+x-text > x-text,
+x-text > lynx-wrapper > x-text {
   color: inherit;
 }
 
@@ -33,11 +34,17 @@ x-text > x-text::part(inner-box),
 x-text > lynx-wrapper > x-text::part(inner-box) {
   display: contents !important;
 }
-x-text::part(inner-box), inline-text, x-text::part(slot) {
+
+x-text::part(inner-box),
+inline-text,
+x-text::part(slot) {
   background-clip: inherit;
   -webkit-background-clip: inherit;
 }
-inline-text, inline-image, inline-truncation {
+
+inline-text,
+inline-image,
+inline-truncation {
   display: none;
 }
 
@@ -73,15 +80,19 @@ inline-text > lynx-wrapper > inline-image,
 inline-text > lynx-wrapper > x-image {
   display: contents !important;
 }
-x-text > x-view, x-text > lynx-wrapper > x-view {
+
+x-text > x-view,
+x-text > lynx-wrapper > x-view {
   display: inline-flex !important;
 }
+
 x-text > x-view,
 x-text[x-show-inline-truncation] > inline-truncation,
 x-text > lynx-wrapper > x-view,
 x-text[x-show-inline-truncation] > lynx-wrapper > inline-truncation {
   display: inline-flex;
 }
+
 x-text > inline-truncation:first-child,
 x-text > lynx-wrapper > inline-truncation:first-child {
   max-width: 100%;
@@ -125,7 +136,10 @@ inline-truncation > lynx-wrapper > x-image::part(img) {
 
 /* attribute text-selection */
 
-x-text, inline-text, inline-image, inline-truncation {
+x-text,
+inline-text,
+inline-image,
+inline-truncation {
   -webkit-user-select: none;
   user-select: none;
 }
@@ -154,6 +168,7 @@ x-text[text-selection] > lynx-wrapper > inline-truncation {
   -webkit-user-select: auto;
   user-select: auto;
 }
+
 x-text[x-text-clipped] > [x-text-clipped]:not(inline-truncation),
 x-text[x-text-clipped]
   > lynx-wrapper
@@ -166,9 +181,9 @@ x-text[x-text-clipped]:not([tail-color-convert="false"])::part(inner-box)::after
   content: "...";
 }
 
-x-text[x-text-clipped]:has(inline-truncation)::part(inner-box):after,
+x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box):after,
 x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box):after,
-x-text[x-text-clipped]:has(inline-truncation)::part(inner-box)::after,
+x-text[x-text-clipped]:has(> inline-truncation)::part(inner-box)::after,
 x-text[x-text-clipped][x-text-custom-overflow]::part(inner-box)::after {
   content: "" !important;
 }
@@ -198,41 +213,45 @@ x-text[text-maxline="0"] {
   display: none;
 }
 
-@supports not selector(:has(inline-truncation)) {
+@supports not selector(:has(> inline-truncation)) {
   x-text[text-maxline="1"]:not([tail-color-convert="false"]):not([x-text-custom-overflow])::part(inner-box) {
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
 
-@supports selector(:has(inline-truncation)) {
+@supports selector(:has(> inline-truncation)) {
   /* text-wrap  chrome 114, firefox 121, safari 17.4*/
-  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(inline-truncation))::part(inner-box) {
+  x-text[text-maxline="1"]:not([tail-color-convert="false"], :has(> inline-truncation))::part(inner-box) {
     text-wrap: nowrap;
     white-space: nowrap;
     text-overflow: ellipsis;
   }
 }
+
 x-text[text-maxline="1"] {
   /* This is the stretch size */
   /* https://developer.mozilla.org/en-US/docs/Web/CSS/max-width */
   max-width: -moz-available;
   max-width: -webkit-fill-available;
 }
+
 x-text[text-maxline="1"]:not([tail-color-convert="false"])::part(inner-box) {
   display: block;
 }
 
 x-text[text-maxline][x-text-custom-overflow]::part(inner-box),
-x-text[text-maxline]:has(inline-truncation)::part(inner-box),
+x-text[text-maxline]:has(> inline-truncation)::part(inner-box),
 x-text[text-maxline][tail-color-convert="false"]::part(inner-box) {
   display: block !important;
 }
 
 raw-text {
-  display: none; /* raw-text only works in x-text */
+  display: none;
+  /* raw-text only works in x-text */
   white-space-collapse: preserve-breaks;
 }
+
 x-text > raw-text,
 inline-text > raw-text,
 x-text > lynx-wrapper > raw-text,

packages/web-platform/web-elements/tests/fixtures/x-text/text-maxline-truncation-in-view.html

@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<!-- Copyright 2024 The Lynx Authors. All rights reserved.
+ Licensed under the Apache License Version 2.0 that can be found in the
+ LICENSE file in the root directory of this source tree. -->
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>web playground</title>
+    <meta content="yes" name="apple-mobile-web-app-capable">
+    <meta content="default" name="apple-mobile-web-app-status-bar-style">
+    <meta content="telephone=no" name="format-detection">
+    <meta content="portrait" name="screen-orientation">
+    <meta
+      content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"
+      name="viewport"
+    >
+    <meta content="portrait" name="x5-orientation" />
+    <link
+      href="/main.css"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <script src="/main.js" defer></script>
+    <style>
+    .text {
+      width: 300px;
+      word-break: break-all;
+      margin-bottom: 20px;
+    }
+    inline-truncation {
+      color: aqua;
+    }
+    </style>
+
+    <x-text
+      class="text"
+      text-maxline="1"
+      text="4hello world, this is a long enough text without any limitation."
+    >
+      <x-view>
+        <inline-truncation>111</inline-truncation>
+      </x-view>
+    </x-text>
+  </body>
+</html>

packages/web-platform/web-elements/tests/web-elements.spec.ts

@@ -172,6 +172,13 @@ test.describe('web-elements test suite', () => {
       await gotoWebComponentPage(page, title);
       await diffScreenShot(page, title, 'index');
     });
+    test(
+      'x-text/text-maxline-truncation-in-view',
+      async ({ page }, { title }) => {
+        await gotoWebComponentPage(page, title);
+        await diffScreenShot(page, title, 'index');
+      },
+    );
     test(
       'x-text/inline-image-with-lynx-wrapper',
       async ({ page }, { title }) => {