【问题标题】:Looking for an "Acid test" visual HTML page寻找“酸性测试”可视化 HTML 页面
【发布时间】:2011-10-07 00:28:57
【问题描述】:

我正在寻找一个 HTML 页面,其中包含每个可能的视觉元素的实例:li 的每个项目符号类型、每个文本格式选项、具有各种对齐方式的背景图像、css 阴影、 css渐变等等……

有人知道吗?

(因为有人会问)我需要这个的原因是我正在编写一个屏幕截图应用程序,它试图将当前页面克隆到画布中,以便我可以将其保存为 png。

【问题讨论】:

    标签: html css demo lorem-ipsum


    【解决方案1】:

    由于没有人回答这个问题,我正在努力创建自己的:

    http://html2canvas.clientsite.me/tests/kitchen_sink.html


    关于页面:如果您单击页面上的任何位置,它会将所有内容重新渲染到画布元素中,以便我可以将其保存为 .png

    对于任何感兴趣的人:

    【讨论】:

    • 画布部分根本不准确......我不会挑剔它,但您正在尝试测试渲染引擎并且您的测试引擎有缺陷。在 Chrome 14 上,画布与正常渲染完全不同,甚至顶部的 z-index 测试也是如此。 -- 除非你声称 Chrome 的渲染引擎不符合标准,否则它会 100% 通过 Acid3。
    • @Blindy - 我在 2 天前开始了这个项目。我正在通过将 HTML 逐位转换为画布来重新呈现整个页面。这个测试的重点是找出引擎的问题,以便我可以修复它们:)
    • 对,只是提供反馈:)
    【解决方案2】:

    我建议您不要关注 HTML 元素,而是关注各种 /type/ 元素,并相信您从中导出图像的“当前页面”画布能够呈现它。

    您想改为测试以下内容:

    1. 典型的 HTML 元素 - <h1><p><b> 和类似的工作。
    2. 使用 javascript 修改的典型页面。
    3. 以某种形式使用 Flash 的页面。
    4. 使用所谓的“HTML5”元素(例如视频)的页面。
    5. 其他非典型组件,例如 SVG、内嵌框架、广告。
    6. 不应复制的元素,例如密码字段。

    此外,您还需要确保执行屏幕截图不会重新加载页面,这可能是致命的。

    【讨论】:

    • 我正在使用页面的渲染解释来给我定位以及页面上所有内容的字体粗细,所以我已经正确渲染了 90% 以上的页面。我要解决的是我提到的一些事情以及一些背景位置和 z-index 错误。我忽略了 Flash,因为没有办法在客户端截取它。
    • 客户端通常是如何使用闪存的。您对现有渲染器不满意的任何特定原因?
    • 这样做的目的是让我可以截取当前页面的屏幕截图,这在没有插件的情况下是客户端无法实现的。这与我对现有渲染器不满意无关,这与这是唯一可能的解决方案有关:)
    • 我很难相信你不能从例如壁虎或基于 webkit 的控件中截取屏幕截图。
    • 我的问题很明显与此无关,是这个线程让你失望了:) 这是客户端的正常定义。客户端 = 客户端在客户端-服务器通信中所做的工作。推断“网站客户端必须与操作系统无关”,您会得到“浏览器可以做什么”。
    猜你喜欢
    • 1970-01-01
    • 2011-02-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多