@king-design/vue 3.7.0 → 3.8.0-beta.1

package/components/media/index.spec.js

@@ -0,0 +1,1880 @@
+import _inheritsLoose from "@babel/runtime-corejs3/helpers/inheritsLoose";
+import _asyncToGenerator from "@babel/runtime-corejs3/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime-corejs3/regenerator";
+import _Object$getOwnPropertyDescriptor from "@babel/runtime-corejs3/core-js/object/get-own-property-descriptor";
+import _concatInstanceProperty from "@babel/runtime-corejs3/core-js/instance/concat";
+import { Component } from 'intact-vue-next';
+import { dispatchEvent, getElement, mount, unmount, wait } from '../../test/utils';
+import { Media, MediaGroup } from '.';
+import { setTheme } from '../../styles/theme';
+describe('Media', function () {
+  afterEach(function () {
+    unmount();
+    setTheme({});
+  });
+  function expectViewerClosed() {
+    var viewer = document.querySelector('.k-media-viewer');
+    if (!viewer) {
+      expect(viewer).to.eql(null);
+      return;
+    }
+    expect(viewer.classList.contains('k-fade-leave-active') || viewer.classList.contains('k-fade-leave-to')).to.be.true;
+  }
+  function dispatchMediaEvent(target, eventName) {
+    target.dispatchEvent(new Event(eventName, {
+      bubbles: false,
+      cancelable: true
+    }));
+  }
+  function getViewerButton(selector) {
+    return getElement(selector);
+  }
+  function stubNativeGetter(prototype, key, value) {
+    var descriptor = _Object$getOwnPropertyDescriptor(prototype, key);
+    Object.defineProperty(prototype, key, {
+      configurable: true,
+      get: function get() {
+        return typeof value === 'function' ? value() : value;
+      }
+    });
+    return function () {
+      if (descriptor) {
+        Object.defineProperty(prototype, key, descriptor);
+      } else {
+        delete prototype[key];
+      }
+    };
+  }
+  // 覆盖图片、视频、音频三类基础缩略图。
+  it('should render image, video and audio thumbnails', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var Demo, _mount, element;
+    return _regeneratorRuntime.wrap(function _callee$(_context2) {
+      while (1) switch (_context2.prev = _context2.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component) {
+            _inheritsLoose(Demo, _Component);
+            function Demo() {
+              var _context;
+              var _this;
+              for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                args[_key] = arguments[_key];
+              }
+              _this = _Component.call.apply(_Component, _concatInstanceProperty(_context = [this]).call(_context, args)) || this;
+              _this.Media = Media;
+              return _this;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media type=\"image\" src=\"https://example.com/cover.png\" />\n                    <Media type=\"video\" src=\"https://example.com/demo.mp4\" />\n                    <Media type=\"audio\" src=\"https://example.com/demo.mp3\" />\n                </div>\n            ";
+          _mount = mount(Demo), element = _mount[1];
+          expect(element.querySelectorAll('.k-media').length).to.eql(3);
+          expect(element.querySelector('.k-media-image')).not.to.eql(null);
+          expect(element.querySelector('.k-media-video')).not.to.eql(null);
+          expect(element.querySelector('.k-media-audio-loader')).not.to.eql(null);
+          expect(element.querySelector('.k-media-audio-card')).not.to.eql(null);
+          expect(getComputedStyle(element.querySelector('.k-media-audio-card')).backgroundColor).to.eql('rgb(243, 245, 246)');
+          expect(element.querySelector('.k-media-audio-card-icon').src).to.contain('data:image/svg+xml');
+          expect(element.querySelector('.k-media-audio-card-name')).to.eql(null);
+          expect(element.querySelectorAll('.k-media-loading').length).to.eql(3);
+          expect(element.querySelectorAll('.k-media-loading-indicator').length).to.eql(3);
+          expect(element.querySelectorAll('.k-media-loading-spinner').length).to.eql(3);
+          expect(element.querySelector('.k-media-status-layer')).to.eql(null);
+        case 15:
+        case "end":
+          return _context2.stop();
+      }
+    }, _callee);
+  })));
+  // 视频完成态展示居中的播放入口。
+  it('should show play trigger in the center of video thumbnail', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+    var Demo, _mount2, element, video, trigger, icon, overlay;
+    return _regeneratorRuntime.wrap(function _callee2$(_context4) {
+      while (1) switch (_context4.prev = _context4.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component2) {
+            _inheritsLoose(Demo, _Component2);
+            function Demo() {
+              var _context3;
+              var _this2;
+              for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
+                args[_key2] = arguments[_key2];
+              }
+              _this2 = _Component2.call.apply(_Component2, _concatInstanceProperty(_context3 = [this]).call(_context3, args)) || this;
+              _this2.Media = Media;
+              return _this2;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        type=\"video\"\n                        status=\"done\"\n                        src=\"https://example.com/demo.mp4\"\n                        poster=\"https://example.com/poster.png\"\n                    />\n                </div>\n            ";
+          _mount2 = mount(Demo), element = _mount2[1];
+          video = element.querySelector('video.k-media-video');
+          trigger = element.querySelector('.k-media-preview-trigger');
+          icon = trigger.querySelector('.k-media-preview-icon');
+          overlay = element.querySelector('.k-media-overlay');
+          expect(video).not.to.eql(null);
+          expect(video.preload).to.eql('metadata');
+          expect(trigger).not.to.eql(null);
+          expect(trigger.className).to.contain('k-media-video-preview-trigger');
+          expect(trigger.title).to.eql('播放视频');
+          expect(trigger.disabled).to.eql(false);
+          expect(icon.className).to.contain('ion-ios-play');
+          expect(overlay).not.to.eql(null);
+          expect(getComputedStyle(overlay).opacity).to.eql('0');
+          expect(getComputedStyle(overlay).backgroundColor).to.eql('rgba(15, 23, 42, 0.42)');
+          expect(getComputedStyle(trigger).position).to.eql('absolute');
+        case 18:
+        case "end":
+          return _context4.stop();
+      }
+    }, _callee2);
+  })));
+  // 图片完成态展示 Icon 组件内置的可见图标。
+  it('should use visible icon for image preview trigger', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee3() {
+    var Demo, _mount3, element, trigger, icon;
+    return _regeneratorRuntime.wrap(function _callee3$(_context6) {
+      while (1) switch (_context6.prev = _context6.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component3) {
+            _inheritsLoose(Demo, _Component3);
+            function Demo() {
+              var _context5;
+              var _this3;
+              for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
+                args[_key3] = arguments[_key3];
+              }
+              _this3 = _Component3.call.apply(_Component3, _concatInstanceProperty(_context5 = [this]).call(_context5, args)) || this;
+              _this3.Media = Media;
+              return _this3;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
+          _mount3 = mount(Demo), element = _mount3[1];
+          trigger = element.querySelector('.k-media-preview-trigger');
+          icon = trigger.querySelector('.k-media-preview-icon');
+          expect(trigger).not.to.eql(null);
+          expect(trigger.title).to.eql('查看图片');
+          expect(icon.className).to.contain('k-icon-visible');
+          expect(icon.className).not.to.contain('ion-ios-eye-outline');
+        case 9:
+        case "end":
+          return _context6.stop();
+      }
+    }, _callee3);
+  })));
+  // 无 poster 的视频需等首帧可用后才进入完成态，loading 时展示静态播放标识和加载蒙层，不展示播放 hover 入口。
+  it('should wait for video frame when poster is absent', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee4() {
+    var Demo, _mount4, element, media, video;
+    return _regeneratorRuntime.wrap(function _callee4$(_context8) {
+      while (1) switch (_context8.prev = _context8.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component4) {
+            _inheritsLoose(Demo, _Component4);
+            function Demo() {
+              var _context7;
+              var _this4;
+              for (var _len4 = arguments.length, args = new Array(_len4), _key4 = 0; _key4 < _len4; _key4++) {
+                args[_key4] = arguments[_key4];
+              }
+              _this4 = _Component4.call.apply(_Component4, _concatInstanceProperty(_context7 = [this]).call(_context7, args)) || this;
+              _this4.Media = Media;
+              return _this4;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                    />\n                </div>\n            ";
+          _mount4 = mount(Demo), element = _mount4[1];
+          media = element.querySelector('.video-media');
+          video = element.querySelector('video.k-media-video');
+          expect(video.preload).to.eql('auto');
+          expect(media.className).to.contain('k-media-loading');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.querySelector('.k-media-placeholder-asset')).not.to.eql(null);
+          expect(getComputedStyle(video).display).to.eql('none');
+          expect(media.querySelector('.k-media-loading-video-icon')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+          dispatchMediaEvent(video, 'loadedmetadata');
+          _context8.next = 17;
+          return wait();
+        case 17:
+          expect(media.className).to.contain('k-media-loading');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.querySelector('.k-media-placeholder-asset')).not.to.eql(null);
+          expect(getComputedStyle(video).display).to.eql('none');
+          expect(media.querySelector('.k-media-loading-video-icon')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+          dispatchMediaEvent(video, 'loadeddata');
+          _context8.next = 28;
+          return wait();
+        case 28:
+          expect(media.className).to.contain('k-media-done');
+          expect(media.className).to.contain('k-media-previewable');
+          expect(getComputedStyle(video).display).not.to.eql('none');
+          expect(media.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-video-icon')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger').disabled).to.eql(false);
+        case 34:
+        case "end":
+          return _context8.stop();
+      }
+    }, _callee4);
+  })));
+  // 有 poster 的视频在 metadata 可用后即可展示预览。
+  it('should complete video at metadata when poster is present', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee5() {
+    var Demo, _mount5, element, media, video;
+    return _regeneratorRuntime.wrap(function _callee5$(_context10) {
+      while (1) switch (_context10.prev = _context10.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component5) {
+            _inheritsLoose(Demo, _Component5);
+            function Demo() {
+              var _context9;
+              var _this5;
+              for (var _len5 = arguments.length, args = new Array(_len5), _key5 = 0; _key5 < _len5; _key5++) {
+                args[_key5] = arguments[_key5];
+              }
+              _this5 = _Component5.call.apply(_Component5, _concatInstanceProperty(_context9 = [this]).call(_context9, args)) || this;
+              _this5.Media = Media;
+              return _this5;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        poster=\"https://example.com/poster.png\"\n                    />\n                </div>\n            ";
+          _mount5 = mount(Demo), element = _mount5[1];
+          media = element.querySelector('.video-media');
+          video = element.querySelector('video.k-media-video');
+          expect(video.preload).to.eql('metadata');
+          dispatchMediaEvent(video, 'loadedmetadata');
+          _context10.next = 9;
+          return wait();
+        case 9:
+          expect(media.className).to.contain('k-media-done');
+          expect(media.querySelector('.k-media-preview-trigger')).not.to.eql(null);
+        case 11:
+        case "end":
+          return _context10.stop();
+      }
+    }, _callee5);
+  })));
+  // 顶层 src/poster 优先于原生 props 中的同名字段。
+  it('should keep media-level src and poster ahead of native props', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee6() {
+    var Demo, _mount6, element, media, video;
+    return _regeneratorRuntime.wrap(function _callee6$(_context12) {
+      while (1) switch (_context12.prev = _context12.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component6) {
+            _inheritsLoose(Demo, _Component6);
+            function Demo() {
+              var _context11;
+              var _this6;
+              for (var _len6 = arguments.length, args = new Array(_len6), _key6 = 0; _key6 < _len6; _key6++) {
+                args[_key6] = arguments[_key6];
+              }
+              _this6 = _Component6.call.apply(_Component6, _concatInstanceProperty(_context11 = [this]).call(_context11, args)) || this;
+              _this6.Media = Media;
+              return _this6;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        videoProps={{\n                            src: 'https://example.com/native.mp4',\n                            poster: 'https://example.com/native-poster.png',\n                            controls: true,\n                            'data-native': 'video',\n                        }}\n                    />\n                </div>\n            ";
+          _mount6 = mount(Demo), element = _mount6[1];
+          media = element.querySelector('.video-media');
+          video = element.querySelector('video.k-media-video');
+          expect(video.getAttribute('src')).to.eql('https://example.com/demo.mp4');
+          expect(video.getAttribute('poster')).to.eql(null);
+          expect(video.controls).to.eql(true);
+          expect(video.getAttribute('data-native')).to.eql('video');
+          expect(video.preload).to.eql('auto');
+          dispatchMediaEvent(video, 'loadedmetadata');
+          _context12.next = 13;
+          return wait();
+        case 13:
+          expect(media.className).to.contain('k-media-loading');
+        case 14:
+        case "end":
+          return _context12.stop();
+      }
+    }, _callee6);
+  })));
+  // src 变化时重建 video，避免热更新保留旧资源状态。
+  it('should remount video when src changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee7() {
+    var Demo, _mount7, instance, element, media, firstVideo, nextVideo;
+    return _regeneratorRuntime.wrap(function _callee7$(_context14) {
+      while (1) switch (_context14.prev = _context14.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component7) {
+            _inheritsLoose(Demo, _Component7);
+            function Demo() {
+              var _context13;
+              var _this7;
+              for (var _len7 = arguments.length, args = new Array(_len7), _key7 = 0; _key7 < _len7; _key7++) {
+                args[_key7] = arguments[_key7];
+              }
+              _this7 = _Component7.call.apply(_Component7, _concatInstanceProperty(_context13 = [this]).call(_context13, args)) || this;
+              _this7.Media = Media;
+              return _this7;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                src: 'https://example.com/demo.mp4'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src={this.get('src')}\n                    />\n                </div>\n            ";
+          _mount7 = mount(Demo), instance = _mount7[0], element = _mount7[1];
+          media = element.querySelector('.video-media');
+          firstVideo = element.querySelector('video.k-media-video');
+          dispatchMediaEvent(firstVideo, 'loadeddata');
+          _context14.next = 8;
+          return wait();
+        case 8:
+          expect(media.className).to.contain('k-media-done');
+          instance.set('src', 'https://example.com/next.mp4');
+          _context14.next = 12;
+          return wait();
+        case 12:
+          nextVideo = element.querySelector('video.k-media-video');
+          expect(nextVideo).not.to.eql(firstVideo);
+          expect(nextVideo.getAttribute('src')).to.eql('https://example.com/next.mp4');
+          expect(media.className).to.contain('k-media-loading');
+        case 16:
+        case "end":
+          return _context14.stop();
+      }
+    }, _callee7);
+  })));
+  // poster 变化时重建 video，覆盖有封面和无封面互切。
+  it('should remount video when poster changes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee8() {
+    var Demo, _mount8, instance, element, media, videoWithPoster, videoWithoutPoster, videoWithNextPoster;
+    return _regeneratorRuntime.wrap(function _callee8$(_context16) {
+      while (1) switch (_context16.prev = _context16.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component8) {
+            _inheritsLoose(Demo, _Component8);
+            function Demo() {
+              var _context15;
+              var _this8;
+              for (var _len8 = arguments.length, args = new Array(_len8), _key8 = 0; _key8 < _len8; _key8++) {
+                args[_key8] = arguments[_key8];
+              }
+              _this8 = _Component8.call.apply(_Component8, _concatInstanceProperty(_context15 = [this]).call(_context15, args)) || this;
+              _this8.Media = Media;
+              return _this8;
+            }
+            Demo.defaults = function defaults() {
+              return {
+                poster: 'https://example.com/poster.png'
+              };
+            };
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"video-media\"\n                        type=\"video\"\n                        src=\"https://example.com/demo.mp4\"\n                        poster={this.get('poster')}\n                    />\n                </div>\n            ";
+          _mount8 = mount(Demo), instance = _mount8[0], element = _mount8[1];
+          media = element.querySelector('.video-media');
+          videoWithPoster = element.querySelector('video.k-media-video');
+          dispatchMediaEvent(videoWithPoster, 'loadedmetadata');
+          _context16.next = 8;
+          return wait();
+        case 8:
+          expect(media.className).to.contain('k-media-done');
+          expect(videoWithPoster.getAttribute('poster')).to.eql('https://example.com/poster.png');
+          instance.set('poster', undefined);
+          _context16.next = 13;
+          return wait();
+        case 13:
+          videoWithoutPoster = element.querySelector('video.k-media-video');
+          expect(videoWithoutPoster).not.to.eql(videoWithPoster);
+          expect(videoWithoutPoster.getAttribute('poster')).to.eql(null);
+          expect(media.className).to.contain('k-media-loading');
+          instance.set('poster', 'https://example.com/next-poster.png');
+          _context16.next = 20;
+          return wait();
+        case 20:
+          videoWithNextPoster = element.querySelector('video.k-media-video');
+          expect(videoWithNextPoster).not.to.eql(videoWithoutPoster);
+          expect(videoWithNextPoster.getAttribute('poster')).to.eql('https://example.com/next-poster.png');
+          expect(media.className).to.contain('k-media-loading');
+        case 24:
+        case "end":
+          return _context16.stop();
+      }
+    }, _callee8);
+  })));
+  // 完成态媒体默认允许展示预览遮罩。
+  it('should render preview overlay for done media', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee9() {
+    var Demo, _mount9, element;
+    return _regeneratorRuntime.wrap(function _callee9$(_context18) {
+      while (1) switch (_context18.prev = _context18.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component9) {
+            _inheritsLoose(Demo, _Component9);
+            function Demo() {
+              var _context17;
+              var _this9;
+              for (var _len9 = arguments.length, args = new Array(_len9), _key9 = 0; _key9 < _len9; _key9++) {
+                args[_key9] = arguments[_key9];
+              }
+              _this9 = _Component9.call.apply(_Component9, _concatInstanceProperty(_context17 = [this]).call(_context17, args)) || this;
+              _this9.Media = Media;
+              return _this9;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"done-image\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\" />\n                    <Media className=\"done-video\" type=\"video\" status=\"done\" src=\"https://example.com/demo.mp4\" />\n                    <Media className=\"done-audio\" type=\"audio\" status=\"done\" src=\"https://example.com/demo.mp3\" />\n                </div>\n            ";
+          _mount9 = mount(Demo), element = _mount9[1];
+          ['done-image', 'done-video', 'done-audio'].forEach(function (className) {
+            var media = element.querySelector("." + className);
+            expect(media.className).to.contain('k-media-previewable');
+            expect(media.querySelector('.k-media-overlay')).not.to.eql(null);
+            expect(media.querySelector('.k-media-preview-trigger')).not.to.eql(null);
+          });
+        case 4:
+        case "end":
+          return _context18.stop();
+      }
+    }, _callee9);
+  })));
+  // loading 蒙层只覆盖已加载出的真实图片/视频资源；占位图和默认音频 loading 不额外压暗。
+  it('should render loading overlay only for visual media with source', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee10() {
+    var Demo, _mount10, element, image, video;
+    return _regeneratorRuntime.wrap(function _callee10$(_context20) {
+      while (1) switch (_context20.prev = _context20.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component10) {
+            _inheritsLoose(Demo, _Component10);
+            function Demo() {
+              var _context19;
+              var _this10;
+              for (var _len10 = arguments.length, args = new Array(_len10), _key10 = 0; _key10 < _len10; _key10++) {
+                args[_key10] = arguments[_key10];
+              }
+              _this10 = _Component10.call.apply(_Component10, _concatInstanceProperty(_context19 = [this]).call(_context19, args)) || this;
+              _this10.Media = Media;
+              return _this10;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"loading-image\" type=\"image\" status=\"loading\" src=\"https://example.com/cover.png\" />\n                    <Media className=\"loading-video\" type=\"video\" status=\"loading\" src=\"https://example.com/demo.mp4\" />\n                    <Media className=\"placeholder-image\" type=\"image\" status=\"loading\" />\n                    <Media className=\"placeholder-video\" type=\"video\" status=\"loading\" />\n                    <Media className=\"loading-audio\" type=\"audio\" status=\"loading\" src=\"https://example.com/demo.mp3\" />\n                </div>\n            ";
+          _mount10 = mount(Demo), element = _mount10[1];
+          image = element.querySelector('.loading-image img.k-media-image');
+          video = element.querySelector('.loading-video video.k-media-video');
+          ['loading-image', 'loading-video', 'placeholder-image', 'placeholder-video', 'loading-audio'].forEach(function (className) {
+            expect(element.querySelector("." + className + " .k-media-loading-overlay")).to.eql(null);
+          });
+          expect(getComputedStyle(image).display).to.eql('none');
+          expect(getComputedStyle(video).display).to.eql('none');
+          dispatchMediaEvent(image, 'load');
+          dispatchMediaEvent(video, 'loadeddata');
+          _context20.next = 12;
+          return wait();
+        case 12:
+          ['loading-image', 'loading-video'].forEach(function (className) {
+            expect(element.querySelector("." + className + " .k-media-loading-overlay")).not.to.eql(null);
+          });
+          expect(element.querySelector('.loading-audio .k-media-loading-overlay')).to.eql(null);
+          expect(element.querySelector('.loading-image .k-media-placeholder')).to.eql(null);
+          expect(element.querySelector('.loading-video .k-media-placeholder')).to.eql(null);
+          expect(getComputedStyle(image).display).not.to.eql('none');
+          expect(getComputedStyle(video).display).not.to.eql('none');
+        case 18:
+        case "end":
+          return _context20.stop();
+      }
+    }, _callee10);
+  })));
+  // 外部保持 loading 时，资源未加载出先展示占位图；资源加载出后再展示真实媒体。
+  it('should keep placeholder visible until visual source is loaded under loading status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee11() {
+    var Demo, _mount11, element, media, image;
+    return _regeneratorRuntime.wrap(function _callee11$(_context22) {
+      while (1) switch (_context22.prev = _context22.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component11) {
+            _inheritsLoose(Demo, _Component11);
+            function Demo() {
+              var _context21;
+              var _this11;
+              for (var _len11 = arguments.length, args = new Array(_len11), _key11 = 0; _key11 < _len11; _key11++) {
+                args[_key11] = arguments[_key11];
+              }
+              _this11 = _Component11.call.apply(_Component11, _concatInstanceProperty(_context21 = [this]).call(_context21, args)) || this;
+              _this11.Media = Media;
+              return _this11;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <Media type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n            ";
+          _mount11 = mount(Demo), element = _mount11[1];
+          media = element.classList.contains('k-media') ? element : element.querySelector('.k-media');
+          image = element.querySelector('img.k-media-image');
+          expect(media.className).to.contain('k-media-loading');
+          expect(image).not.to.eql(null);
+          expect(getComputedStyle(image).display).to.eql('none');
+          expect(media.querySelector('.k-media-placeholder-asset')).not.to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).to.eql(null);
+          dispatchMediaEvent(image, 'load');
+          _context22.next = 13;
+          return wait();
+        case 13:
+          expect(media.className).to.contain('k-media-loading');
+          expect(getComputedStyle(image).display).not.to.eql('none');
+          expect(media.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-overlay')).not.to.eql(null);
+        case 17:
+        case "end":
+          return _context22.stop();
+      }
+    }, _callee11);
+  })));
+  // showPreview=false 时完成态也不生成预览入口。
+  it('should hide preview overlay when showPreview is false', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee12() {
+    var Demo, _mount12, element, media;
+    return _regeneratorRuntime.wrap(function _callee12$(_context24) {
+      while (1) switch (_context24.prev = _context24.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component12) {
+            _inheritsLoose(Demo, _Component12);
+            function Demo() {
+              var _context23;
+              var _this12;
+              for (var _len12 = arguments.length, args = new Array(_len12), _key12 = 0; _key12 < _len12; _key12++) {
+                args[_key12] = arguments[_key12];
+              }
+              _this12 = _Component12.call.apply(_Component12, _concatInstanceProperty(_context23 = [this]).call(_context23, args)) || this;
+              _this12.Media = Media;
+              return _this12;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"no-preview\"\n                        type=\"image\"\n                        status=\"done\"\n                        showPreview={false}\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
+          _mount12 = mount(Demo), element = _mount12[1];
+          media = element.querySelector('.no-preview');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.querySelector('.k-media-overlay')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 7:
+        case "end":
+          return _context24.stop();
+      }
+    }, _callee12);
+  })));
+  // mask 插槽仅在 default/done 状态生效，loading/error 不展示。
+  it('should render mask slot only in default and done status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee13() {
+    var _element$querySelecto, _element$querySelecto2;
+    var Demo, _mount13, element;
+    return _regeneratorRuntime.wrap(function _callee13$(_context26) {
+      while (1) switch (_context26.prev = _context26.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component13) {
+            _inheritsLoose(Demo, _Component13);
+            function Demo() {
+              var _context25;
+              var _this13;
+              for (var _len13 = arguments.length, args = new Array(_len13), _key13 = 0; _key13 < _len13; _key13++) {
+                args[_key13] = arguments[_key13];
+              }
+              _this13 = _Component13.call.apply(_Component13, _concatInstanceProperty(_context25 = [this]).call(_context25, args)) || this;
+              _this13.Media = Media;
+              return _this13;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"mask-default\" type=\"image\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-default\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-done\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-done\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-loading\" type=\"image\" status=\"loading\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-loading\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                    <Media className=\"mask-error\" type=\"image\" status=\"error\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <div class=\"mask-slot-error\">{media.status}</div>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          _mount13 = mount(Demo), element = _mount13[1];
+          expect(element.querySelector('.mask-default').className).to.contain('k-media-custom-mask');
+          expect(element.querySelector('.mask-done').className).to.contain('k-media-custom-mask');
+          expect(element.querySelector('.mask-loading').className).not.to.contain('k-media-custom-mask');
+          expect(element.querySelector('.mask-error').className).not.to.contain('k-media-custom-mask');
+          expect((_element$querySelecto = element.querySelector('.mask-slot-default')) == null ? void 0 : _element$querySelecto.textContent).to.contain('default');
+          expect((_element$querySelecto2 = element.querySelector('.mask-slot-done')) == null ? void 0 : _element$querySelecto2.textContent).to.contain('done');
+          expect(element.querySelector('.mask-slot-loading')).to.eql(null);
+          expect(element.querySelector('.mask-slot-error')).to.eql(null);
+        case 11:
+        case "end":
+          return _context26.stop();
+      }
+    }, _callee13);
+  })));
+  // mask 生效时接管预览入口，不再显示默认预览按钮。
+  it('should hide default preview trigger when mask slot is active', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee14() {
+    var Demo, _mount14, element, media;
+    return _regeneratorRuntime.wrap(function _callee14$(_context28) {
+      while (1) switch (_context28.prev = _context28.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component14) {
+            _inheritsLoose(Demo, _Component14);
+            function Demo() {
+              var _context27;
+              var _this14;
+              for (var _len14 = arguments.length, args = new Array(_len14), _key14 = 0; _key14 < _len14; _key14++) {
+                args[_key14] = arguments[_key14];
+              }
+              _this14 = _Component14.call.apply(_Component14, _concatInstanceProperty(_context27 = [this]).call(_context27, args)) || this;
+              _this14.Media = Media;
+              return _this14;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"mask-preview\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask args=\"media\">\n                            <button class=\"mask-action\" type=\"button\">{media.name || 'mask'}</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          _mount14 = mount(Demo), element = _mount14[1];
+          media = element.querySelector('.mask-preview');
+          expect(media.querySelector('.mask-action')).not.to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 6:
+        case "end":
+          return _context28.stop();
+      }
+    }, _callee14);
+  })));
+  // mask 插槽可以通过 preview(event) 主动触发预览。
+  it('should open preview by custom mask preview handler', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee15() {
+    var _getElement;
+    var previewCalls, Demo, _mount15, element, maskOpen;
+    return _regeneratorRuntime.wrap(function _callee15$(_context30) {
+      while (1) switch (_context30.prev = _context30.next) {
+        case 0:
+          previewCalls = [];
+          Demo = /*#__PURE__*/function (_Component15) {
+            _inheritsLoose(Demo, _Component15);
+            function Demo() {
+              var _context29;
+              var _this15;
+              for (var _len15 = arguments.length, args = new Array(_len15), _key15 = 0; _key15 < _len15; _key15++) {
+                args[_key15] = arguments[_key15];
+              }
+              _this15 = _Component15.call.apply(_Component15, _concatInstanceProperty(_context29 = [this]).call(_context29, args)) || this;
+              _this15.Media = Media;
+              _this15.onPreview = function (media, e) {
+                previewCalls.push({
+                  media: media,
+                  eventType: e.type
+                });
+              };
+              return _this15;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"mask-preview-open\"\n                        type=\"image\"\n                        status=\"done\"\n                        name=\"\u5C01\u9762\u56FE\"\n                        src=\"https://example.com/cover.png\"\n                        ev-preview={this.onPreview}\n                    >\n                        <b:mask args=\"media\">\n                            <button\n                                class=\"mask-open\"\n                                type=\"button\"\n                                disabled={!media.canPreview}\n                                ev-click={media.preview}\n                            >open</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          _mount15 = mount(Demo), element = _mount15[1];
+          maskOpen = element.querySelector('.mask-open');
+          maskOpen.click();
+          _context30.next = 8;
+          return wait(0);
+        case 8:
+          expect(previewCalls.length).to.eql(1);
+          expect(previewCalls[0].eventType).to.eql('click');
+          expect(previewCalls[0].media).to.include({
+            name: '封面图',
+            resolvedType: 'image',
+            status: 'done',
+            src: 'https://example.com/cover.png'
+          });
+          expect(getElement('.k-media-viewer')).not.to.eql(null);
+          expect((_getElement = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement.textContent).to.contain('封面图');
+        case 13:
+        case "end":
+          return _context30.stop();
+      }
+    }, _callee15);
+  })));
+  // 无 src 且无外部状态时展示默认占位，不进入 loading；图片/视频使用内置 SVG 占位图。
+  it('should render default placeholder when src and status are absent', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee16() {
+    var Demo, _mount16, element, media, video, imageAsset, videoAsset;
+    return _regeneratorRuntime.wrap(function _callee16$(_context32) {
+      while (1) switch (_context32.prev = _context32.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component16) {
+            _inheritsLoose(Demo, _Component16);
+            function Demo() {
+              var _context31;
+              var _this16;
+              for (var _len16 = arguments.length, args = new Array(_len16), _key16 = 0; _key16 < _len16; _key16++) {
+                args[_key16] = arguments[_key16];
+              }
+              _this16 = _Component16.call.apply(_Component16, _concatInstanceProperty(_context31 = [this]).call(_context31, args)) || this;
+              _this16.Media = Media;
+              return _this16;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"empty-media\" />\n                    <Media className=\"empty-video\" type=\"video\" />\n                </div>\n            ";
+          _mount16 = mount(Demo), element = _mount16[1];
+          media = element.querySelector('.empty-media');
+          video = element.querySelector('.empty-video');
+          imageAsset = media.querySelector('.k-media-placeholder-asset');
+          videoAsset = video.querySelector('.k-media-placeholder-asset');
+          expect(media.className).to.contain('k-media-image');
+          expect(media.className).to.contain('k-media-default');
+          expect(media.className).not.to.contain('k-media-previewable');
+          expect(media.getAttribute('title')).to.eql('未命名文件');
+          expect(media.querySelector('.k-media-placeholder')).not.to.eql(null);
+          expect(imageAsset).not.to.eql(null);
+          expect(imageAsset.src).to.contain('data:image/svg+xml');
+          expect(imageAsset.src).to.contain('M4.5%207');
+          expect(getComputedStyle(imageAsset).width).to.eql('16px');
+          expect(getComputedStyle(imageAsset).height).to.eql('16px');
+          expect(videoAsset).not.to.eql(null);
+          expect(videoAsset.src).to.contain('data:image/svg+xml');
+          expect(videoAsset.src).to.contain('M1.33282%204.4165');
+          expect(getComputedStyle(videoAsset).width).to.eql('16px');
+          expect(getComputedStyle(videoAsset).height).to.eql('16px');
+          expect(media.querySelector('.k-media-image')).to.eql(null);
+          expect(media.querySelector('.k-media-loading-indicator')).to.eql(null);
+          expect(media.querySelector('.k-media-preview-trigger')).to.eql(null);
+        case 25:
+        case "end":
+          return _context32.stop();
+      }
+    }, _callee16);
+  })));
+  // 未传 type 时根据 name/src 文件名推断媒体类型。
+  it('should infer media type from name or src', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee17() {
+    var Demo, _mount17, element, image, video, audio;
+    return _regeneratorRuntime.wrap(function _callee17$(_context34) {
+      while (1) switch (_context34.prev = _context34.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component17) {
+            _inheritsLoose(Demo, _Component17);
+            function Demo() {
+              var _context33;
+              var _this17;
+              for (var _len17 = arguments.length, args = new Array(_len17), _key17 = 0; _key17 < _len17; _key17++) {
+                args[_key17] = arguments[_key17];
+              }
+              _this17 = _Component17.call.apply(_Component17, _concatInstanceProperty(_context33 = [this]).call(_context33, args)) || this;
+              _this17.Media = Media;
+              return _this17;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"infer-image\" status=\"done\" src=\"https://example.com/cover.webp?x=1\" />\n                    <Media className=\"infer-video\" name=\"clip.webm\" status=\"done\" src=\"https://example.com/resource\" />\n                    <Media className=\"infer-audio\" status=\"done\" src=\"https://example.com/audio.m4a#hash\" />\n                </div>\n            ";
+          _mount17 = mount(Demo), element = _mount17[1];
+          image = element.querySelector('.infer-image');
+          video = element.querySelector('.infer-video');
+          audio = element.querySelector('.infer-audio');
+          expect(image.className).to.contain('k-media-image');
+          expect(image.querySelector('img.k-media-image')).not.to.eql(null);
+          expect(video.className).to.contain('k-media-video');
+          expect(video.querySelector('video.k-media-video')).not.to.eql(null);
+          expect(audio.className).to.contain('k-media-audio');
+          expect(audio.querySelector('.k-media-audio-card')).not.to.eql(null);
+        case 12:
+        case "end":
+          return _context34.stop();
+      }
+    }, _callee17);
+  })));
+  // click 和 preview 事件分别返回缩略图信息和预览信息。
+  it('should trigger click and preview events with media payload', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee18() {
+    var _getElement2;
+    var clickCalls, previewCalls, Demo, _mount18, element, media, trigger;
+    return _regeneratorRuntime.wrap(function _callee18$(_context36) {
+      while (1) switch (_context36.prev = _context36.next) {
+        case 0:
+          clickCalls = [];
+          previewCalls = [];
+          Demo = /*#__PURE__*/function (_Component18) {
+            _inheritsLoose(Demo, _Component18);
+            function Demo() {
+              var _context35;
+              var _this18;
+              for (var _len18 = arguments.length, args = new Array(_len18), _key18 = 0; _key18 < _len18; _key18++) {
+                args[_key18] = arguments[_key18];
+              }
+              _this18 = _Component18.call.apply(_Component18, _concatInstanceProperty(_context35 = [this]).call(_context35, args)) || this;
+              _this18.Media = Media;
+              _this18.onClick = function (media, e) {
+                clickCalls.push({
+                  media: media,
+                  eventType: e.type
+                });
+              };
+              _this18.onPreview = function (media, e) {
+                previewCalls.push({
+                  media: media,
+                  eventType: e.type
+                });
+              };
+              return _this18;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"event-media\"\n                        name=\"\u5C01\u9762\u56FE\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        ev-click={this.onClick}\n                        ev-preview={this.onPreview}\n                    />\n                </div>\n            ";
+          _mount18 = mount(Demo), element = _mount18[1];
+          media = element.querySelector('.event-media');
+          trigger = element.querySelector('.k-media-preview-trigger');
+          media.click();
+          _context36.next = 10;
+          return wait();
+        case 10:
+          expect(clickCalls.length).to.eql(1);
+          expect(clickCalls[0].media).to.include({
+            name: '封面图',
+            type: 'image',
+            resolvedType: 'image',
+            status: 'done',
+            src: 'https://example.com/cover.png',
+            size: 'default'
+          });
+          expect(clickCalls[0].eventType).to.eql('click');
+          trigger.click();
+          _context36.next = 16;
+          return wait();
+        case 16:
+          expect(clickCalls.length).to.eql(1);
+          expect(previewCalls.length).to.eql(1);
+          expect(previewCalls[0].media).to.include({
+            name: '封面图',
+            type: 'image',
+            resolvedType: 'image',
+            status: 'done',
+            src: 'https://example.com/cover.png',
+            size: 'default'
+          });
+          expect(previewCalls[0].eventType).to.eql('click');
+          expect((_getElement2 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement2.textContent).to.contain('封面图');
+        case 21:
+        case "end":
+          return _context36.stop();
+      }
+    }, _callee18);
+  })));
+  // imageProps/audioProps 透传原生属性，并移除被组件接管的事件属性。
+  it('should pass native image and audio props without leaking handled events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee19() {
+    var calls, Demo, _mount19, element, image, audio;
+    return _regeneratorRuntime.wrap(function _callee19$(_context38) {
+      while (1) switch (_context38.prev = _context38.next) {
+        case 0:
+          calls = [];
+          Demo = /*#__PURE__*/function (_Component19) {
+            _inheritsLoose(Demo, _Component19);
+            function Demo() {
+              var _context37;
+              var _this19;
+              for (var _len19 = arguments.length, args = new Array(_len19), _key19 = 0; _key19 < _len19; _key19++) {
+                args[_key19] = arguments[_key19];
+              }
+              _this19 = _Component19.call.apply(_Component19, _concatInstanceProperty(_context37 = [this]).call(_context37, args)) || this;
+              _this19.Media = Media;
+              _this19.onImageError = function () {
+                calls.push('image-error');
+              };
+              _this19.onAudioLoad = function () {
+                calls.push('audio-load');
+              };
+              return _this19;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        imageProps={{\n                            onerror: this.onImageError,\n                            'data-native': 'image',\n                        }}\n                    />\n                    <Media\n                        type=\"audio\"\n                        src=\"https://example.com/demo.mp3\"\n                        audioProps={{\n                            onloadedmetadata: this.onAudioLoad,\n                            preload: 'auto',\n                            'data-native': 'audio',\n                        }}\n                    />\n                </div>\n            ";
+          _mount19 = mount(Demo), element = _mount19[1];
+          image = element.querySelector('img.k-media-image');
+          audio = element.querySelector('audio.k-media-audio-loader');
+          expect(image.getAttribute('data-native')).to.eql('image');
+          expect(image.getAttribute('onerror')).to.eql(null);
+          expect(audio.preload).to.eql('auto');
+          expect(audio.getAttribute('data-native')).to.eql('audio');
+          expect(audio.getAttribute('onloadedmetadata')).to.eql(null);
+          dispatchMediaEvent(image, 'error');
+          dispatchMediaEvent(audio, 'loadedmetadata');
+          _context38.next = 15;
+          return wait();
+        case 15:
+          expect(calls).to.eql(['image-error', 'audio-load']);
+        case 16:
+        case "end":
+          return _context38.stop();
+      }
+    }, _callee19);
+  })));
+  // 原生媒体事件驱动内部自动状态切换。
+  it('should update automatic status from native media events', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee20() {
+    var calls, Demo, _mount20, element, imageMedia, videoMedia, audioMedia;
+    return _regeneratorRuntime.wrap(function _callee20$(_context40) {
+      while (1) switch (_context40.prev = _context40.next) {
+        case 0:
+          calls = [];
+          Demo = /*#__PURE__*/function (_Component20) {
+            _inheritsLoose(Demo, _Component20);
+            function Demo() {
+              var _context39;
+              var _this20;
+              for (var _len20 = arguments.length, args = new Array(_len20), _key20 = 0; _key20 < _len20; _key20++) {
+                args[_key20] = arguments[_key20];
+              }
+              _this20 = _Component20.call.apply(_Component20, _concatInstanceProperty(_context39 = [this]).call(_context39, args)) || this;
+              _this20.Media = Media;
+              _this20.onLoad = function (media) {
+                calls.push("load:" + media.resolvedType);
+              };
+              _this20.onLoadError = function (media) {
+                calls.push("error:" + media.resolvedType);
+              };
+              return _this20;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"image-media\" type=\"image\" src=\"https://example.com/cover.png\" ev-load={this.onLoad} ev-loadError={this.onLoadError} />\n                    <Media className=\"video-media\" type=\"video\" src=\"https://example.com/demo.mp4\" ev-load={this.onLoad} />\n                    <Media className=\"audio-media\" type=\"audio\" src=\"https://example.com/demo.mp3\" ev-load={this.onLoad} />\n                </div>\n            ";
+          _mount20 = mount(Demo), element = _mount20[1];
+          imageMedia = element.querySelector('.image-media');
+          videoMedia = element.querySelector('.video-media');
+          audioMedia = element.querySelector('.audio-media');
+          expect(imageMedia.className).to.contain('k-media-loading');
+          expect(videoMedia.className).to.contain('k-media-loading');
+          expect(audioMedia.className).to.contain('k-media-loading');
+          dispatchMediaEvent(element.querySelector('img.k-media-image'), 'load');
+          dispatchMediaEvent(element.querySelector('video.k-media-video'), 'loadeddata');
+          dispatchMediaEvent(element.querySelector('audio.k-media-audio-loader'), 'loadedmetadata');
+          _context40.next = 15;
+          return wait();
+        case 15:
+          expect(imageMedia.className).to.contain('k-media-done');
+          expect(videoMedia.className).to.contain('k-media-done');
+          expect(audioMedia.className).to.contain('k-media-done');
+          expect(element.querySelector('.k-media-loading-indicator')).to.eql(null);
+          expect(calls).to.eql(['load:image', 'load:video', 'load:audio']);
+          dispatchMediaEvent(element.querySelector('img.k-media-image'), 'error');
+          _context40.next = 23;
+          return wait();
+        case 23:
+          expect(imageMedia.className).to.contain('k-media-error');
+          expect(imageMedia.querySelector('.k-media-error-card')).not.to.eql(null);
+          expect(imageMedia.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(imageMedia.querySelector('.k-media-status-layer')).to.eql(null);
+          expect(imageMedia.querySelector('.k-media-preview-trigger')).to.eql(null);
+          expect(calls).to.eql(['load:image', 'load:video', 'load:audio', 'error:image']);
+        case 29:
+        case "end":
+          return _context40.stop();
+      }
+    }, _callee20);
+  })));
+  // 原生事件先更新内部状态，再调用用户传入的回调。
+  it('should merge native handlers', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee21() {
+    var calls, imageMedia, Demo, _mount21, element;
+    return _regeneratorRuntime.wrap(function _callee21$(_context42) {
+      while (1) switch (_context42.prev = _context42.next) {
+        case 0:
+          calls = [];
+          Demo = /*#__PURE__*/function (_Component21) {
+            _inheritsLoose(Demo, _Component21);
+            function Demo() {
+              var _context41;
+              var _this21;
+              for (var _len21 = arguments.length, args = new Array(_len21), _key21 = 0; _key21 < _len21; _key21++) {
+                args[_key21] = arguments[_key21];
+              }
+              _this21 = _Component21.call.apply(_Component21, _concatInstanceProperty(_context41 = [this]).call(_context41, args)) || this;
+              _this21.Media = Media;
+              _this21.onImageLoad = function () {
+                calls.push('load');
+              };
+              return _this21;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"image-media\"\n                        type=\"image\"\n                        src=\"https://example.com/cover.png\"\n                        imageProps={{\n                            onload: this.onImageLoad,\n                        }}\n                    />\n                </div>\n            ";
+          _mount21 = mount(Demo), element = _mount21[1];
+          imageMedia = element.querySelector('.image-media');
+          dispatchMediaEvent(element.querySelector('img.k-media-image'), 'load');
+          _context42.next = 8;
+          return wait();
+        case 8:
+          expect(imageMedia.className).to.contain('k-media-done');
+          expect(calls).to.eql(['load']);
+          expect(element.querySelector('img.k-media-image').getAttribute('onload')).to.eql(null);
+        case 11:
+        case "end":
+          return _context42.stop();
+      }
+    }, _callee21);
+  })));
+  // 缓存资源错过事件时，通过原生 ready 状态补齐完成态。
+  it('should sync automatic status from native media state', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee22() {
+    var restores, Demo, _mount22, element;
+    return _regeneratorRuntime.wrap(function _callee22$(_context44) {
+      while (1) switch (_context44.prev = _context44.next) {
+        case 0:
+          restores = [stubNativeGetter(HTMLImageElement.prototype, 'complete', true), stubNativeGetter(HTMLImageElement.prototype, 'naturalWidth', 120), stubNativeGetter(HTMLImageElement.prototype, 'naturalHeight', 80), stubNativeGetter(HTMLMediaElement.prototype, 'readyState', 2)];
+          _context44.prev = 1;
+          Demo = /*#__PURE__*/function (_Component22) {
+            _inheritsLoose(Demo, _Component22);
+            function Demo() {
+              var _context43;
+              var _this22;
+              for (var _len22 = arguments.length, args = new Array(_len22), _key22 = 0; _key22 < _len22; _key22++) {
+                args[_key22] = arguments[_key22];
+              }
+              _this22 = _Component22.call.apply(_Component22, _concatInstanceProperty(_context43 = [this]).call(_context43, args)) || this;
+              _this22.Media = Media;
+              return _this22;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                    const { Media } = this;\n                    <div>\n                        <Media className=\"image-media\" type=\"image\" src=\"https://example.com/cover.png\" />\n                        <Media className=\"video-media\" type=\"video\" src=\"https://example.com/demo.mp4\" />\n                        <Media className=\"audio-media\" type=\"audio\" src=\"https://example.com/demo.mp3\" />\n                    </div>\n                ";
+          _mount22 = mount(Demo), element = _mount22[1];
+          _context44.next = 7;
+          return wait();
+        case 7:
+          expect(element.querySelector('.image-media').className).to.contain('k-media-done');
+          expect(element.querySelector('.video-media').className).to.contain('k-media-done');
+          expect(element.querySelector('.audio-media').className).to.contain('k-media-done');
+          expect(element.querySelector('.k-media-loading-indicator')).to.eql(null);
+          expect(element.querySelectorAll('.k-media-preview-trigger').length).to.eql(3);
+        case 12:
+          _context44.prev = 12;
+          restores.forEach(function (restore) {
+            return restore();
+          });
+          return _context44.finish(12);
+        case 15:
+        case "end":
+          return _context44.stop();
+      }
+    }, _callee22, null, [[1,, 12, 15]]);
+  })));
+  // 外部 status 优先级高于内部自动状态。
+  it('should let status prop override internal status', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee23() {
+    var Demo, _mount23, element, loadingMedia, errorMedia, doneMedia;
+    return _regeneratorRuntime.wrap(function _callee23$(_context46) {
+      while (1) switch (_context46.prev = _context46.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component23) {
+            _inheritsLoose(Demo, _Component23);
+            function Demo() {
+              var _context45;
+              var _this23;
+              for (var _len23 = arguments.length, args = new Array(_len23), _key23 = 0; _key23 < _len23; _key23++) {
+                args[_key23] = arguments[_key23];
+              }
+              _this23 = _Component23.call.apply(_Component23, _concatInstanceProperty(_context45 = [this]).call(_context45, args)) || this;
+              _this23.Media = Media;
+              return _this23;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"loading-media\" type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n                    <Media className=\"error-media\" type=\"video\" status=\"error\" src=\"https://example.com/error.mp4\" />\n                    <Media className=\"done-media\" type=\"audio\" status=\"done\" src=\"https://example.com/done.mp3\" />\n                </div>\n            ";
+          _mount23 = mount(Demo), element = _mount23[1];
+          loadingMedia = element.querySelector('.loading-media');
+          errorMedia = element.querySelector('.error-media');
+          doneMedia = element.querySelector('.done-media');
+          dispatchMediaEvent(loadingMedia.querySelector('img.k-media-image'), 'load');
+          dispatchMediaEvent(doneMedia.querySelector('audio.k-media-audio-loader'), 'error');
+          _context46.next = 10;
+          return wait();
+        case 10:
+          expect(loadingMedia.className).to.contain('k-media-loading');
+          expect(loadingMedia.querySelector('.k-media-loading-spinner')).not.to.eql(null);
+          expect(loadingMedia.querySelector('.k-media-status-layer')).to.eql(null);
+          expect(errorMedia.className).to.contain('k-media-error');
+          expect(errorMedia.querySelector('.k-media-error-card')).not.to.eql(null);
+          expect(errorMedia.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(errorMedia.querySelector('.k-media-status-layer')).to.eql(null);
+          expect(doneMedia.className).to.contain('k-media-done');
+          expect(doneMedia.querySelector('.k-media-loading-indicator')).to.eql(null);
+          expect(doneMedia.querySelector('.k-media-preview-trigger').disabled).to.eql(false);
+        case 20:
+        case "end":
+          return _context46.stop();
+      }
+    }, _callee23);
+  })));
+  // 音频 loading 展示居中的音频图标，并和图片/视频一致展示左上角加载圆圈。
+  it('should render centered audio icon and loading indicator for loading audio card', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee24() {
+    var Demo, _mount24, element, audio, mini, compact, singleWidth, customSize, wide, icon, miniIcon, compactIcon, singleWidthIcon, customSizeIcon, wideIcon;
+    return _regeneratorRuntime.wrap(function _callee24$(_context48) {
+      while (1) switch (_context48.prev = _context48.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component24) {
+            _inheritsLoose(Demo, _Component24);
+            function Demo() {
+              var _context47;
+              var _this24;
+              for (var _len24 = arguments.length, args = new Array(_len24), _key24 = 0; _key24 < _len24; _key24++) {
+                args[_key24] = arguments[_key24];
+              }
+              _this24 = _Component24.call.apply(_Component24, _concatInstanceProperty(_context47 = [this]).call(_context47, args)) || this;
+              _this24.Media = Media;
+              return _this24;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"audio-loading\" type=\"audio\" status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-mini\" type=\"audio\" size=\"mini\" status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-compact\" type=\"audio\" width={20} height={28} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-single-width\" type=\"audio\" width={18} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-custom-size\" type=\"audio\" size={22} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                    <Media className=\"audio-loading-wide\" type=\"audio\" width={36} height={40} status=\"loading\" src=\"https://example.com/loading.mp3\" />\n                </div>\n            ";
+          _mount24 = mount(Demo), element = _mount24[1];
+          audio = element.querySelector('.audio-loading');
+          mini = element.querySelector('.audio-loading-mini');
+          compact = element.querySelector('.audio-loading-compact');
+          singleWidth = element.querySelector('.audio-loading-single-width');
+          customSize = element.querySelector('.audio-loading-custom-size');
+          wide = element.querySelector('.audio-loading-wide');
+          icon = audio.querySelector('.k-media-audio-card-icon');
+          miniIcon = mini.querySelector('.k-media-audio-card-icon');
+          compactIcon = compact.querySelector('.k-media-audio-card-icon');
+          singleWidthIcon = singleWidth.querySelector('.k-media-audio-card-icon');
+          customSizeIcon = customSize.querySelector('.k-media-audio-card-icon');
+          wideIcon = wide.querySelector('.k-media-audio-card-icon');
+          expect(audio.querySelector('.k-media-audio-card-name')).to.eql(null);
+          expect(audio.querySelector('.k-media-loading-indicator')).not.to.eql(null);
+          expect(audio.querySelector('.k-media-loading-spinner')).not.to.eql(null);
+          expect(mini.querySelector('.k-media-audio-card-name')).to.eql(null);
+          expect(getComputedStyle(icon).width).to.eql('32px');
+          expect(getComputedStyle(icon).height).to.eql('32px');
+          expect(getComputedStyle(miniIcon).width).to.eql('24px');
+          expect(getComputedStyle(miniIcon).height).to.eql('24px');
+          expect(getComputedStyle(compactIcon).width).to.eql('20px');
+          expect(getComputedStyle(compactIcon).height).to.eql('20px');
+          expect(getComputedStyle(singleWidthIcon).width).to.eql('18px');
+          expect(getComputedStyle(singleWidthIcon).height).to.eql('18px');
+          expect(getComputedStyle(customSizeIcon).width).to.eql('22px');
+          expect(getComputedStyle(customSizeIcon).height).to.eql('22px');
+          expect(getComputedStyle(wideIcon).width).to.eql('32px');
+          expect(getComputedStyle(wideIcon).height).to.eql('32px');
+        case 31:
+        case "end":
+          return _context48.stop();
+      }
+    }, _callee24);
+  })));
+  // 图片/视频 loading 使用骨架底图和小型加载圆圈。
+  it('should render skeleton loading styles with spinner', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee25() {
+    var Demo, _mount25, element, shell, indicator, spinner, miniIndicator, miniSpinner, shellStyle;
+    return _regeneratorRuntime.wrap(function _callee25$(_context50) {
+      while (1) switch (_context50.prev = _context50.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component25) {
+            _inheritsLoose(Demo, _Component25);
+            function Demo() {
+              var _context49;
+              var _this25;
+              for (var _len25 = arguments.length, args = new Array(_len25), _key25 = 0; _key25 < _len25; _key25++) {
+                args[_key25] = arguments[_key25];
+              }
+              _this25 = _Component25.call.apply(_Component25, _concatInstanceProperty(_context49 = [this]).call(_context49, args)) || this;
+              _this25.Media = Media;
+              return _this25;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"loading-media\" type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n                    <Media className=\"mini-loading-media\" type=\"image\" size=\"mini\" status=\"loading\" src=\"https://example.com/loading.png\" />\n                </div>\n            ";
+          _mount25 = mount(Demo), element = _mount25[1];
+          shell = element.querySelector('.loading-media .k-media-shell');
+          indicator = element.querySelector('.loading-media .k-media-loading-indicator');
+          spinner = element.querySelector('.loading-media .k-media-loading-spinner');
+          miniIndicator = element.querySelector('.mini-loading-media .k-media-loading-indicator');
+          miniSpinner = element.querySelector('.mini-loading-media .k-media-loading-spinner');
+          shellStyle = getComputedStyle(shell);
+          expect(shellStyle.backgroundImage).to.contain('linear-gradient');
+          expect(shellStyle.backgroundSize).to.eql('400% 100%');
+          expect(getComputedStyle(indicator).top).to.eql('3px');
+          expect(getComputedStyle(indicator).left).to.eql('3px');
+          expect(getComputedStyle(spinner).width).to.eql('12px');
+          expect(getComputedStyle(spinner).height).to.eql('12px');
+          expect(getComputedStyle(miniIndicator).top).to.eql('4px');
+          expect(getComputedStyle(miniSpinner).width).to.eql('10px');
+        case 17:
+        case "end":
+          return _context50.stop();
+      }
+    }, _callee25);
+  })));
+  // loading 圆圈颜色跟随主题主色，和 Bubble loading 点一致。
+  it('should use theme primary color for loading spinner', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee26() {
+    var Demo, _mount26, element, spinner, style;
+    return _regeneratorRuntime.wrap(function _callee26$(_context52) {
+      while (1) switch (_context52.prev = _context52.next) {
+        case 0:
+          setTheme({
+            color: {
+              primary: '#7c3aed'
+            }
+          });
+          Demo = /*#__PURE__*/function (_Component26) {
+            _inheritsLoose(Demo, _Component26);
+            function Demo() {
+              var _context51;
+              var _this26;
+              for (var _len26 = arguments.length, args = new Array(_len26), _key26 = 0; _key26 < _len26; _key26++) {
+                args[_key26] = arguments[_key26];
+              }
+              _this26 = _Component26.call.apply(_Component26, _concatInstanceProperty(_context51 = [this]).call(_context51, args)) || this;
+              _this26.Media = Media;
+              return _this26;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <Media type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\" />\n            ";
+          _mount26 = mount(Demo), element = _mount26[1];
+          spinner = element.querySelector('.k-media-loading-spinner');
+          style = getComputedStyle(spinner);
+          expect(style.borderTopColor).to.eql('rgb(124, 58, 237)');
+          expect(style.borderRightColor).to.eql('rgba(124, 58, 237, 0.22)');
+        case 8:
+        case "end":
+          return _context52.stop();
+      }
+    }, _callee26);
+  })));
+  // loading/error 插槽可接管默认状态层展示。
+  it('should render custom loading and error slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee27() {
+    var _loading$querySelecto, _error$querySelector, _audioLoading$querySe, _audioError$querySele;
+    var Demo, _mount27, element, loading, error, audioLoading, audioError;
+    return _regeneratorRuntime.wrap(function _callee27$(_context54) {
+      while (1) switch (_context54.prev = _context54.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component27) {
+            _inheritsLoose(Demo, _Component27);
+            function Demo() {
+              var _context53;
+              var _this27;
+              for (var _len27 = arguments.length, args = new Array(_len27), _key27 = 0; _key27 < _len27; _key27++) {
+                args[_key27] = arguments[_key27];
+              }
+              _this27 = _Component27.call.apply(_Component27, _concatInstanceProperty(_context53 = [this]).call(_context53, args)) || this;
+              _this27.Media = Media;
+              return _this27;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"custom-loading\"\n                        name=\"\u4E0A\u4F20\u4E2D.png\"\n                        type=\"image\"\n                        status=\"loading\"\n                        src=\"https://example.com/loading.png\"\n                    >\n                        <b:loading args=\"media\">\n                            <div class=\"custom-loading-slot\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </div>\n                        </b:loading>\n                    </Media>\n                    <Media\n                        className=\"custom-error\"\n                        name=\"\u52A0\u8F7D\u5931\u8D25.mp4\"\n                        type=\"video\"\n                        status=\"error\"\n                        src=\"https://example.com/error.mp4\"\n                    >\n                        <b:error args=\"media\">\n                            <button class=\"custom-error-slot\" type=\"button\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </button>\n                        </b:error>\n                    </Media>\n                    <Media\n                        className=\"custom-audio-loading\"\n                        name=\"\u4E0A\u4F20\u4E2D.mp3\"\n                        type=\"audio\"\n                        status=\"loading\"\n                        src=\"https://example.com/loading.mp3\"\n                    >\n                        <b:loading args=\"media\">\n                            <div class=\"custom-audio-loading-slot\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </div>\n                        </b:loading>\n                    </Media>\n                    <Media\n                        className=\"custom-audio-error\"\n                        name=\"\u52A0\u8F7D\u5931\u8D25.mp3\"\n                        type=\"audio\"\n                        status=\"error\"\n                        src=\"https://example.com/error.mp3\"\n                    >\n                        <b:error args=\"media\">\n                            <div class=\"custom-audio-error-slot\">\n                                {media.status} / {media.resolvedType} / {media.name}\n                            </div>\n                        </b:error>\n                    </Media>\n                </div>\n            ";
+          _mount27 = mount(Demo), element = _mount27[1];
+          loading = element.querySelector('.custom-loading');
+          error = element.querySelector('.custom-error');
+          audioLoading = element.querySelector('.custom-audio-loading');
+          audioError = element.querySelector('.custom-audio-error');
+          expect((_loading$querySelecto = loading.querySelector('.custom-loading-slot')) == null ? void 0 : _loading$querySelecto.textContent).to.contain('loading / image / 上传中.png');
+          expect(loading.querySelector('.k-media-loading-layer')).not.to.eql(null);
+          expect(loading.querySelector('.k-media-loading-indicator')).to.eql(null);
+          expect(loading.querySelector('.k-media-preview-trigger')).to.eql(null);
+          expect((_error$querySelector = error.querySelector('.custom-error-slot')) == null ? void 0 : _error$querySelector.textContent).to.contain('error / video / 加载失败.mp4');
+          expect(error.querySelector('.k-media-error-layer')).not.to.eql(null);
+          expect(error.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(error.querySelector('.k-media-preview-trigger')).to.eql(null);
+          expect((_audioLoading$querySe = audioLoading.querySelector('.custom-audio-loading-slot')) == null ? void 0 : _audioLoading$querySe.textContent).to.contain('loading / audio / 上传中.mp3');
+          expect(audioLoading.querySelector('.k-media-loading-layer')).not.to.eql(null);
+          expect(audioLoading.querySelector('.k-media-loading-indicator')).to.eql(null);
+          expect(audioLoading.querySelector('.k-media-audio-card')).to.eql(null);
+          expect((_audioError$querySele = audioError.querySelector('.custom-audio-error-slot')) == null ? void 0 : _audioError$querySele.textContent).to.contain('error / audio / 加载失败.mp3');
+          expect(audioError.querySelector('.k-media-error-layer')).not.to.eql(null);
+          expect(audioError.querySelector('.k-media-audio-card')).to.eql(null);
+        case 22:
+        case "end":
+          return _context54.stop();
+      }
+    }, _callee27);
+  })));
+  // loading/error/mask 插槽为空时，不接管默认状态和预览入口。
+  it('should ignore empty state and mask slots', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee28() {
+    var Demo, _mount28, element, loading, error, mask;
+    return _regeneratorRuntime.wrap(function _callee28$(_context56) {
+      while (1) switch (_context56.prev = _context56.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component28) {
+            _inheritsLoose(Demo, _Component28);
+            function Demo() {
+              var _context55;
+              var _this28;
+              for (var _len28 = arguments.length, args = new Array(_len28), _key28 = 0; _key28 < _len28; _key28++) {
+                args[_key28] = arguments[_key28];
+              }
+              _this28 = _Component28.call.apply(_Component28, _concatInstanceProperty(_context55 = [this]).call(_context55, args)) || this;
+              _this28.Media = Media;
+              return _this28;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"empty-loading\" type=\"image\" status=\"loading\" src=\"https://example.com/loading.png\">\n                        <b:loading>\n                            <span v-if={false} class=\"empty-loading-slot\">loading</span>\n                        </b:loading>\n                    </Media>\n                    <Media className=\"empty-error\" type=\"image\" status=\"error\" src=\"https://example.com/error.png\">\n                        <b:error>\n                            <span v-if={false} class=\"empty-error-slot\">error</span>\n                        </b:error>\n                    </Media>\n                    <Media className=\"empty-mask\" type=\"image\" status=\"done\" src=\"https://example.com/cover.png\">\n                        <b:mask>\n                            <button v-if={false} class=\"empty-mask-slot\" type=\"button\">open</button>\n                        </b:mask>\n                    </Media>\n                </div>\n            ";
+          _mount28 = mount(Demo), element = _mount28[1];
+          loading = element.querySelector('.empty-loading');
+          error = element.querySelector('.empty-error');
+          mask = element.querySelector('.empty-mask');
+          expect(loading.className).not.to.contain('k-media-custom-loading');
+          expect(loading.querySelector('.k-media-loading-layer')).to.eql(null);
+          expect(loading.querySelector('.k-media-loading-indicator')).not.to.eql(null);
+          expect(error.className).not.to.contain('k-media-custom-error');
+          expect(error.querySelector('.k-media-error-layer')).to.eql(null);
+          expect(error.querySelector('.k-media-error-card')).not.to.eql(null);
+          expect(error.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(mask.className).not.to.contain('k-media-custom-mask');
+          expect(mask.querySelector('.k-media-preview-trigger')).not.to.eql(null);
+        case 15:
+        case "end":
+          return _context56.stop();
+      }
+    }, _callee28);
+  })));
+  // 图片/视频/音频 error 展示居中的灰色类型图标，不展示默认失败文案。
+  it('should render centered gray media icons for failed media cards', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee29() {
+    var Demo, _mount29, element, image, imageCompact, video, audio, mini, imageIcon, compactIcon, videoIcon, audioIcon, miniIcon;
+    return _regeneratorRuntime.wrap(function _callee29$(_context58) {
+      while (1) switch (_context58.prev = _context58.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component29) {
+            _inheritsLoose(Demo, _Component29);
+            function Demo() {
+              var _context57;
+              var _this29;
+              for (var _len29 = arguments.length, args = new Array(_len29), _key29 = 0; _key29 < _len29; _key29++) {
+                args[_key29] = arguments[_key29];
+              }
+              _this29 = _Component29.call.apply(_Component29, _concatInstanceProperty(_context57 = [this]).call(_context57, args)) || this;
+              _this29.Media = Media;
+              return _this29;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"image-error\" type=\"image\" status=\"error\" src=\"https://example.com/error.png\" />\n                    <Media className=\"image-error-compact\" type=\"image\" width={20} height={28} status=\"error\" src=\"https://example.com/error.png\" />\n                    <Media className=\"video-error\" type=\"video\" status=\"error\" src=\"https://example.com/error.mp4\" />\n                    <Media className=\"audio-error\" type=\"audio\" status=\"error\" src=\"https://example.com/error.mp3\" />\n                    <Media className=\"audio-error-mini\" type=\"audio\" size=\"mini\" status=\"error\" src=\"https://example.com/error.mp3\" />\n                </div>\n            ";
+          _mount29 = mount(Demo), element = _mount29[1];
+          image = element.querySelector('.image-error');
+          imageCompact = element.querySelector('.image-error-compact');
+          video = element.querySelector('.video-error');
+          audio = element.querySelector('.audio-error');
+          mini = element.querySelector('.audio-error-mini');
+          imageIcon = image.querySelector('.k-media-error-card-icon');
+          compactIcon = imageCompact.querySelector('.k-media-error-card-icon');
+          videoIcon = video.querySelector('.k-media-error-card-icon');
+          audioIcon = audio.querySelector('.k-media-error-card-icon');
+          miniIcon = mini.querySelector('.k-media-error-card-icon');
+          expect(element.querySelectorAll('.k-media-error-card').length).to.eql(5);
+          expect(element.querySelector('.k-media-placeholder')).to.eql(null);
+          expect(imageIcon.src).to.contain('ECECEC');
+          expect(imageIcon.src).to.contain('D6DCE7');
+          expect(videoIcon.src).to.contain('ECECEC');
+          expect(videoIcon.src).to.contain('D6DCE7');
+          expect(audioIcon.src).to.contain('ECECEC');
+          expect(audioIcon.src).to.contain('D6DCE7');
+          expect(getComputedStyle(imageIcon).width).to.eql('32px');
+          expect(getComputedStyle(imageIcon).height).to.eql('32px');
+          expect(getComputedStyle(compactIcon).width).to.eql('20px');
+          expect(getComputedStyle(compactIcon).height).to.eql('20px');
+          expect(getComputedStyle(miniIcon).width).to.eql('24px');
+          expect(getComputedStyle(miniIcon).height).to.eql('24px');
+          expect(element.querySelector('.k-media-status-layer')).to.eql(null);
+        case 28:
+        case "end":
+          return _context58.stop();
+      }
+    }, _callee29);
+  })));
+  // 名称 Tooltip 默认关闭，显式开启后图片/视频/音频缩略图 hover 时展示最大 160px 的名称。
+  it('should hide media name tooltip by default and allow enabling it', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee30() {
+    var Demo, _mount30, element, imageWithTooltip, videoWithTooltip, audioWithTooltip, withoutTooltip, imageTooltipTrigger, videoTooltipTrigger, audioTooltipTrigger, icon, content, name, videoPreviewTrigger;
+    return _regeneratorRuntime.wrap(function _callee30$(_context60) {
+      while (1) switch (_context60.prev = _context60.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component30) {
+            _inheritsLoose(Demo, _Component30);
+            function Demo() {
+              var _context59;
+              var _this30;
+              for (var _len30 = arguments.length, args = new Array(_len30), _key30 = 0; _key30 < _len30; _key30++) {
+                args[_key30] = arguments[_key30];
+              }
+              _this30 = _Component30.call.apply(_Component30, _concatInstanceProperty(_context59 = [this]).call(_context59, args)) || this;
+              _this30.Media = Media;
+              return _this30;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"image-with-tooltip\"\n                        name=\"\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u56FE\u7247\u540D\u79F0.png\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        showNameTooltip={true}\n                        nameTooltipProps={{position: 'bottom'}}\n                    />\n                    <Media\n                        className=\"video-with-tooltip\"\n                        name=\"\u4EA7\u54C1\u9884\u544A.mp4\"\n                        type=\"video\"\n                        status=\"done\"\n                        src=\"https://example.com/demo.mp4\"\n                        showNameTooltip={true}\n                    />\n                    <Media\n                        className=\"audio-with-tooltip\"\n                        name=\"\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u5F88\u957F\u7684\u97F3\u9891\u540D\u79F0.mp3\"\n                        type=\"audio\"\n                        status=\"done\"\n                        src=\"https://example.com/demo.mp3\"\n                        showNameTooltip={true}\n                    />\n                    <Media\n                        className=\"audio-without-tooltip\"\n                        name=\"\u666E\u901A\u97F3\u9891.mp3\"\n                        type=\"audio\"\n                        status=\"done\"\n                        src=\"https://example.com/normal.mp3\"\n                        showNameTooltip={false}\n                    />\n                </div>\n            ";
+          _mount30 = mount(Demo), element = _mount30[1];
+          imageWithTooltip = element.querySelector('.image-with-tooltip');
+          videoWithTooltip = element.querySelector('.video-with-tooltip');
+          audioWithTooltip = element.querySelector('.audio-with-tooltip');
+          withoutTooltip = element.querySelector('.audio-without-tooltip');
+          imageTooltipTrigger = imageWithTooltip.querySelector('.k-media-name-tooltip-trigger');
+          videoTooltipTrigger = videoWithTooltip.querySelector('.k-media-name-tooltip-trigger');
+          audioTooltipTrigger = audioWithTooltip.querySelector('.k-media-name-tooltip-trigger');
+          icon = audioWithTooltip.querySelector('.k-media-audio-card-icon');
+          expect(imageWithTooltip.getAttribute('title')).to.eql(null);
+          expect(videoWithTooltip.getAttribute('title')).to.eql(null);
+          expect(audioWithTooltip.getAttribute('title')).to.eql(null);
+          expect(withoutTooltip.getAttribute('title')).to.eql('普通音频.mp3');
+          expect(audioWithTooltip.querySelector('.k-media-audio-card-name')).to.eql(null);
+          expect(imageTooltipTrigger).not.to.eql(null);
+          expect(videoTooltipTrigger).not.to.eql(null);
+          expect(audioTooltipTrigger).not.to.eql(null);
+          expect(withoutTooltip.querySelector('.k-media-name-tooltip-trigger')).to.eql(null);
+          expect(getComputedStyle(icon).width).to.eql('32px');
+          expect(getComputedStyle(icon).height).to.eql('32px');
+          dispatchEvent(imageTooltipTrigger, 'mouseenter');
+          _context60.next = 25;
+          return wait(0);
+        case 25:
+          content = getElement('.k-tooltip-content');
+          name = content.querySelector('.k-media-name-tooltip-content');
+          expect(content).not.to.eql(null);
+          expect(content.textContent).to.contain('很长很长很长很长很长很长的图片名称.png');
+          expect(content.className).to.contain('k-light');
+          expect(name.style.maxWidth).to.eql('160px');
+          expect(getComputedStyle(name).textOverflow).to.eql('ellipsis');
+          expect(content.querySelector('.k-tooltip-arrow').className).to.contain('k-top');
+          dispatchEvent(imageTooltipTrigger, 'mouseleave');
+          _context60.next = 36;
+          return wait(0);
+        case 36:
+          videoPreviewTrigger = videoWithTooltip.querySelector('.k-media-video-preview-trigger');
+          dispatchEvent(videoPreviewTrigger, 'mouseenter');
+          _context60.next = 40;
+          return wait(0);
+        case 40:
+          content = getElement('.k-tooltip-content');
+          expect(content.textContent).to.contain('产品预告.mp4');
+          expect(content.className).to.contain('k-light');
+          dispatchEvent(videoPreviewTrigger, 'mouseleave');
+          _context60.next = 46;
+          return wait(0);
+        case 46:
+          dispatchEvent(audioTooltipTrigger, 'mouseenter');
+          _context60.next = 49;
+          return wait(0);
+        case 49:
+          content = getElement('.k-tooltip-content');
+          name = content.querySelector('.k-media-name-tooltip-content');
+          expect(content.textContent).to.contain('很长很长很长很长很长很长的音频名称.mp3');
+          expect(name.style.maxWidth).to.eql('160px');
+        case 53:
+        case "end":
+          return _context60.stop();
+      }
+    }, _callee30);
+  })));
+  // size 支持预设尺寸和自定义正方形尺寸。
+  it('should support named and custom sizes', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee31() {
+    var Demo, _mount31, element, small, custom;
+    return _regeneratorRuntime.wrap(function _callee31$(_context62) {
+      while (1) switch (_context62.prev = _context62.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component31) {
+            _inheritsLoose(Demo, _Component31);
+            function Demo() {
+              var _context61;
+              var _this31;
+              for (var _len31 = arguments.length, args = new Array(_len31), _key31 = 0; _key31 < _len31; _key31++) {
+                args[_key31] = arguments[_key31];
+              }
+              _this31 = _Component31.call.apply(_Component31, _concatInstanceProperty(_context61 = [this]).call(_context61, args)) || this;
+              _this31.Media = Media;
+              return _this31;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"small-media\" type=\"image\" size=\"small\" src=\"https://example.com/a.png\" />\n                    <Media className=\"custom-media\" type=\"image\" size={88} src=\"https://example.com/b.png\" />\n                </div>\n            ";
+          _mount31 = mount(Demo), element = _mount31[1];
+          small = element.querySelector('.small-media');
+          custom = element.querySelector('.custom-media');
+          expect(small.className).to.contain('k-media-small');
+          expect(custom.style.width).to.eql('88px');
+          expect(custom.style.height).to.eql('88px');
+        case 8:
+        case "end":
+          return _context62.stop();
+      }
+    }, _callee31);
+  })));
+  // width/height 单边传入时镜像另一边，双边传入时各自生效。
+  it('should mirror single width or height and respect explicit dimensions', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee32() {
+    var Demo, _mount32, element, widthOnly, heightOnly, both;
+    return _regeneratorRuntime.wrap(function _callee32$(_context64) {
+      while (1) switch (_context64.prev = _context64.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component32) {
+            _inheritsLoose(Demo, _Component32);
+            function Demo() {
+              var _context63;
+              var _this32;
+              for (var _len32 = arguments.length, args = new Array(_len32), _key32 = 0; _key32 < _len32; _key32++) {
+                args[_key32] = arguments[_key32];
+              }
+              _this32 = _Component32.call.apply(_Component32, _concatInstanceProperty(_context63 = [this]).call(_context63, args)) || this;
+              _this32.Media = Media;
+              return _this32;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media className=\"width-only\" type=\"image\" width={120} src=\"https://example.com/a.png\" />\n                    <Media className=\"height-only\" type=\"image\" height=\"48px\" src=\"https://example.com/b.png\" />\n                    <Media className=\"both-dimensions\" type=\"image\" width={120} height={80} src=\"https://example.com/c.png\" />\n                </div>\n            ";
+          _mount32 = mount(Demo), element = _mount32[1];
+          widthOnly = element.querySelector('.width-only');
+          heightOnly = element.querySelector('.height-only');
+          both = element.querySelector('.both-dimensions');
+          expect(widthOnly.style.width).to.eql('120px');
+          expect(widthOnly.style.height).to.eql('120px');
+          expect(heightOnly.style.width).to.eql('48px');
+          expect(heightOnly.style.height).to.eql('48px');
+          expect(both.style.width).to.eql('120px');
+          expect(both.style.height).to.eql('80px');
+        case 12:
+        case "end":
+          return _context64.stop();
+      }
+    }, _callee32);
+  })));
+  // 根节点透传 class/style/data/aria 等通用属性。
+  it('should pass rest props to root element', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee33() {
+    var Demo, _mount33, element, media;
+    return _regeneratorRuntime.wrap(function _callee33$(_context66) {
+      while (1) switch (_context66.prev = _context66.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component33) {
+            _inheritsLoose(Demo, _Component33);
+            function Demo() {
+              var _context65;
+              var _this33;
+              for (var _len33 = arguments.length, args = new Array(_len33), _key33 = 0; _key33 < _len33; _key33++) {
+                args[_key33] = arguments[_key33];
+              }
+              _this33 = _Component33.call.apply(_Component33, _concatInstanceProperty(_context65 = [this]).call(_context65, args)) || this;
+              _this33.Media = Media;
+              return _this33;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        className=\"rest-media\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        style={{marginTop: '3px'}}\n                        data-id=\"media\"\n                        aria-label=\"\u5A92\u4F53\u7F29\u7565\u56FE\"\n                    />\n                </div>\n            ";
+          _mount33 = mount(Demo), element = _mount33[1];
+          media = element.querySelector('.rest-media');
+          expect(media.style.marginTop).to.eql('3px');
+          expect(media.getAttribute('data-id')).to.eql('media');
+          expect(media.getAttribute('aria-label')).to.eql('媒体缩略图');
+        case 7:
+        case "end":
+          return _context66.stop();
+      }
+    }, _callee33);
+  })));
+  // 单项预览可打开并通过关闭按钮关闭。
+  it('should open and close standalone preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee34() {
+    var _getElement3;
+    var Demo, _mount34, element, trigger, viewer;
+    return _regeneratorRuntime.wrap(function _callee34$(_context68) {
+      while (1) switch (_context68.prev = _context68.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component34) {
+            _inheritsLoose(Demo, _Component34);
+            function Demo() {
+              var _context67;
+              var _this34;
+              for (var _len34 = arguments.length, args = new Array(_len34), _key34 = 0; _key34 < _len34; _key34++) {
+                args[_key34] = arguments[_key34];
+              }
+              _this34 = _Component34.call.apply(_Component34, _concatInstanceProperty(_context67 = [this]).call(_context67, args)) || this;
+              _this34.Media = Media;
+              return _this34;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        name=\"\u5C01\u9762\u56FE\"\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
+          _mount34 = mount(Demo), element = _mount34[1];
+          trigger = element.querySelector('.k-media-preview-trigger');
+          trigger.click();
+          _context68.next = 7;
+          return wait();
+        case 7:
+          viewer = getElement('.k-media-viewer');
+          expect(viewer).not.to.eql(null);
+          expect(getComputedStyle(viewer).position).to.eql('fixed');
+          expect(getComputedStyle(viewer).display).to.eql('flex');
+          expect((_getElement3 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement3.textContent).to.contain('封面图');
+          getElement('.k-media-viewer-close').click();
+          _context68.next = 15;
+          return wait(400);
+        case 15:
+          expectViewerClosed();
+        case 16:
+        case "end":
+          return _context68.stop();
+      }
+    }, _callee34);
+  })));
+  // 单项预览支持挂载到指定 Portal 容器。
+  it('should mount standalone preview into custom container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee35() {
+    var Demo, _mount35, element, container;
+    return _regeneratorRuntime.wrap(function _callee35$(_context70) {
+      while (1) switch (_context70.prev = _context70.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component35) {
+            _inheritsLoose(Demo, _Component35);
+            function Demo() {
+              var _context69;
+              var _this35;
+              for (var _len35 = arguments.length, args = new Array(_len35), _key35 = 0; _key35 < _len35; _key35++) {
+                args[_key35] = arguments[_key35];
+              }
+              _this35 = _Component35.call.apply(_Component35, _concatInstanceProperty(_context69 = [this]).call(_context69, args)) || this;
+              _this35.Media = Media;
+              return _this35;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <div id=\"media-preview-container\"></div>\n                    <Media\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                        container=\"#media-preview-container\"\n                    />\n                </div>\n            ";
+          _mount35 = mount(Demo), element = _mount35[1];
+          element.querySelector('.k-media-preview-trigger').click();
+          _context70.next = 6;
+          return wait();
+        case 6:
+          container = element.querySelector('#media-preview-container');
+          expect(container.querySelector('.k-media-viewer')).not.to.eql(null);
+        case 8:
+        case "end":
+          return _context70.stop();
+      }
+    }, _callee35);
+  })));
+  // 点击真实预览内容不关闭，点击内容空白区或遮罩关闭。
+  it('should close standalone preview on mask click only', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee36() {
+    var Demo, _mount36, element, previewTrigger, stage, content, viewer;
+    return _regeneratorRuntime.wrap(function _callee36$(_context72) {
+      while (1) switch (_context72.prev = _context72.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component36) {
+            _inheritsLoose(Demo, _Component36);
+            function Demo() {
+              var _context71;
+              var _this36;
+              for (var _len36 = arguments.length, args = new Array(_len36), _key36 = 0; _key36 < _len36; _key36++) {
+                args[_key36] = arguments[_key36];
+              }
+              _this36 = _Component36.call.apply(_Component36, _concatInstanceProperty(_context71 = [this]).call(_context71, args)) || this;
+              _this36.Media = Media;
+              return _this36;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        type=\"image\"\n                        status=\"done\"\n                        src=\"https://example.com/cover.png\"\n                    />\n                </div>\n            ";
+          _mount36 = mount(Demo), element = _mount36[1];
+          previewTrigger = element.querySelector('.k-media-preview-trigger');
+          expect(previewTrigger).to.exist;
+          previewTrigger.click();
+          _context72.next = 8;
+          return wait(60);
+        case 8:
+          stage = getElement('.k-media-viewer-stage');
+          expect(stage).to.exist;
+          content = stage.querySelector('.k-media-viewer-image, .k-media-viewer-video, .k-media-viewer-audio');
+          expect(content).to.exist;
+          content.click();
+          _context72.next = 15;
+          return wait();
+        case 15:
+          expect(getElement('.k-media-viewer')).not.to.eql(null);
+          viewer = getElement('.k-media-viewer');
+          expect(viewer).to.exist;
+          viewer.click();
+          _context72.next = 21;
+          return wait(400);
+        case 21:
+          expectViewerClosed();
+        case 22:
+        case "end":
+          return _context72.stop();
+      }
+    }, _callee36);
+  })));
+  // 预览层关闭、上一张、下一张按钮带有无障碍文案。
+  it('should render accessibility labels for viewer buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee37() {
+    var Demo, _mount37, element;
+    return _regeneratorRuntime.wrap(function _callee37$(_context74) {
+      while (1) switch (_context74.prev = _context74.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component37) {
+            _inheritsLoose(Demo, _Component37);
+            function Demo() {
+              var _context73;
+              var _this37;
+              for (var _len37 = arguments.length, args = new Array(_len37), _key37 = 0; _key37 < _len37; _key37++) {
+                args[_key37] = arguments[_key37];
+              }
+              _this37 = _Component37.call.apply(_Component37, _concatInstanceProperty(_context73 = [this]).call(_context73, args)) || this;
+              _this37.Media = Media;
+              _this37.MediaGroup = MediaGroup;
+              return _this37;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media, MediaGroup } = this;\n                <MediaGroup>\n                    <Media name=\"\u7B2C\u4E00\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/1.png\" />\n                    <Media name=\"\u7B2C\u4E8C\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/2.png\" />\n                </MediaGroup>\n            ";
+          _mount37 = mount(Demo), element = _mount37[1];
+          element.querySelector('.k-media-preview-trigger').click();
+          _context74.next = 6;
+          return wait();
+        case 6:
+          expect(getViewerButton('.k-media-viewer-close').getAttribute('aria-label')).to.eql('关闭预览');
+          expect(getViewerButton('.k-media-viewer-close').title).to.eql('关闭预览');
+          expect(getViewerButton('.k-media-viewer-prev').getAttribute('aria-label')).to.eql('上一个');
+          expect(getViewerButton('.k-media-viewer-prev').title).to.eql('上一个');
+          expect(getViewerButton('.k-media-viewer-next').getAttribute('aria-label')).to.eql('下一个');
+          expect(getViewerButton('.k-media-viewer-next').title).to.eql('下一个');
+        case 12:
+        case "end":
+          return _context74.stop();
+      }
+    }, _callee37);
+  })));
+  // 音频预览复用缩略图中的默认音频封面素材。
+  it('should use the same audio asset in standalone preview', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee38() {
+    var Demo, _mount38, element, trigger, cover;
+    return _regeneratorRuntime.wrap(function _callee38$(_context76) {
+      while (1) switch (_context76.prev = _context76.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component38) {
+            _inheritsLoose(Demo, _Component38);
+            function Demo() {
+              var _context75;
+              var _this38;
+              for (var _len38 = arguments.length, args = new Array(_len38), _key38 = 0; _key38 < _len38; _key38++) {
+                args[_key38] = arguments[_key38];
+              }
+              _this38 = _Component38.call.apply(_Component38, _concatInstanceProperty(_context75 = [this]).call(_context75, args)) || this;
+              _this38.Media = Media;
+              return _this38;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media } = this;\n                <div>\n                    <Media\n                        name=\"\u64AD\u5BA2\u7247\u6BB5.mp3\"\n                        type=\"audio\"\n                        status=\"done\"\n                        src=\"https://example.com/demo.mp3\"\n                    />\n                </div>\n            ";
+          _mount38 = mount(Demo), element = _mount38[1];
+          trigger = element.querySelector('.k-media-preview-trigger');
+          trigger.click();
+          _context76.next = 7;
+          return wait();
+        case 7:
+          cover = getElement('.k-media-viewer-audio-cover-image');
+          expect(cover).not.to.eql(null);
+          expect(cover.src).to.contain('data:image/svg+xml');
+          getElement('.k-media-viewer-close').click();
+          _context76.next = 13;
+          return wait(400);
+        case 13:
+          expectViewerClosed();
+        case 14:
+        case "end":
+          return _context76.stop();
+      }
+    }, _callee38);
+  })));
+  // MediaGroup 支持前后切换，并在首尾正确禁用按钮。
+  it('should switch preview items in media group and disable boundary buttons', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee39() {
+    var _getElement4, _getElement5, _getElement6, _getElement7, _getElement8, _getElement9, _getElement10, _getElement11;
+    var Demo, _mount39, element, group, firstMedia, triggers;
+    return _regeneratorRuntime.wrap(function _callee39$(_context78) {
+      while (1) switch (_context78.prev = _context78.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component39) {
+            _inheritsLoose(Demo, _Component39);
+            function Demo() {
+              var _context77;
+              var _this39;
+              for (var _len39 = arguments.length, args = new Array(_len39), _key39 = 0; _key39 < _len39; _key39++) {
+                args[_key39] = arguments[_key39];
+              }
+              _this39 = _Component39.call.apply(_Component39, _concatInstanceProperty(_context77 = [this]).call(_context77, args)) || this;
+              _this39.Media = Media;
+              _this39.MediaGroup = MediaGroup;
+              return _this39;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media, MediaGroup } = this;\n                <MediaGroup>\n                    <Media name=\"\u7B2C\u4E00\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/1.png\" />\n                    <Media name=\"\u7B2C\u4E8C\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/2.png\" />\n                    <Media name=\"\u7B2C\u4E09\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/3.png\" />\n                </MediaGroup>\n            ";
+          _mount39 = mount(Demo), element = _mount39[1];
+          group = getElement('.k-media-group');
+          firstMedia = element.querySelector('.k-media');
+          triggers = element.querySelectorAll('.k-media-preview-trigger');
+          expect(getComputedStyle(group).display).to.eql('inline-flex');
+          expect(getComputedStyle(firstMedia).width).to.eql('64px');
+          expect(getComputedStyle(firstMedia).height).to.eql('64px');
+          triggers[0].click();
+          _context78.next = 12;
+          return wait();
+        case 12:
+          expect((_getElement4 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement4.textContent).to.contain('第一张');
+          expect((_getElement5 = getElement('.k-media-viewer-counter')) == null ? void 0 : _getElement5.textContent).to.contain('1 / 3');
+          expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(true);
+          expect(getViewerButton('.k-media-viewer-next').disabled).to.eql(false);
+          getViewerButton('.k-media-viewer-prev').click();
+          _context78.next = 19;
+          return wait();
+        case 19:
+          expect((_getElement6 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement6.textContent).to.contain('第一张');
+          getViewerButton('.k-media-viewer-next').click();
+          _context78.next = 23;
+          return wait();
+        case 23:
+          expect((_getElement7 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement7.textContent).to.contain('第二张');
+          expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(false);
+          expect(getViewerButton('.k-media-viewer-next').disabled).to.eql(false);
+          getViewerButton('.k-media-viewer-prev').click();
+          _context78.next = 29;
+          return wait();
+        case 29:
+          expect((_getElement8 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement8.textContent).to.contain('第一张');
+          expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(true);
+          getViewerButton('.k-media-viewer-next').click();
+          _context78.next = 34;
+          return wait();
+        case 34:
+          dispatchEvent(document, 'keydown', {
+            keyCode: 39
+          });
+          _context78.next = 37;
+          return wait();
+        case 37:
+          expect((_getElement9 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement9.textContent).to.contain('第三张');
+          expect((_getElement10 = getElement('.k-media-viewer-counter')) == null ? void 0 : _getElement10.textContent).to.contain('3 / 3');
+          expect(getViewerButton('.k-media-viewer-prev').disabled).to.eql(false);
+          expect(getViewerButton('.k-media-viewer-next').disabled).to.eql(true);
+          getViewerButton('.k-media-viewer-next').click();
+          _context78.next = 44;
+          return wait();
+        case 44:
+          expect((_getElement11 = getElement('.k-media-viewer-title')) == null ? void 0 : _getElement11.textContent).to.contain('第三张');
+          dispatchEvent(document, 'keydown', {
+            keyCode: 27
+          });
+          _context78.next = 48;
+          return wait(400);
+        case 48:
+          expectViewerClosed();
+        case 49:
+        case "end":
+          return _context78.stop();
+      }
+    }, _callee39);
+  })));
+  // MediaGroup 的预览层同样支持挂载到指定 Portal 容器。
+  it('should mount media group preview into custom container', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee40() {
+    var _container$querySelec;
+    var Demo, _mount40, element, container;
+    return _regeneratorRuntime.wrap(function _callee40$(_context80) {
+      while (1) switch (_context80.prev = _context80.next) {
+        case 0:
+          Demo = /*#__PURE__*/function (_Component40) {
+            _inheritsLoose(Demo, _Component40);
+            function Demo() {
+              var _context79;
+              var _this40;
+              for (var _len40 = arguments.length, args = new Array(_len40), _key40 = 0; _key40 < _len40; _key40++) {
+                args[_key40] = arguments[_key40];
+              }
+              _this40 = _Component40.call.apply(_Component40, _concatInstanceProperty(_context79 = [this]).call(_context79, args)) || this;
+              _this40.Media = Media;
+              _this40.MediaGroup = MediaGroup;
+              return _this40;
+            }
+            return Demo;
+          }(Component);
+          Demo.template = "\n                const { Media, MediaGroup } = this;\n                <div>\n                    <div id=\"media-group-preview-container\"></div>\n                    <MediaGroup container=\"#media-group-preview-container\">\n                        <Media name=\"\u7B2C\u4E00\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/1.png\" />\n                        <Media name=\"\u7B2C\u4E8C\u5F20\" type=\"image\" status=\"done\" src=\"https://example.com/2.png\" />\n                    </MediaGroup>\n                </div>\n            ";
+          _mount40 = mount(Demo), element = _mount40[1];
+          element.querySelector('.k-media-preview-trigger').click();
+          _context80.next = 6;
+          return wait();
+        case 6:
+          container = element.querySelector('#media-group-preview-container');
+          expect(container.querySelector('.k-media-viewer')).not.to.eql(null);
+          expect((_container$querySelec = container.querySelector('.k-media-viewer-counter')) == null ? void 0 : _container$querySelec.textContent).to.contain('1 / 2');
+        case 9:
+        case "end":
+          return _context80.stop();
+      }
+    }, _callee40);
+  })));
+});