WebKit · smfr · Oct 22, 2024 · Feb 13, 2025 · Feb 13, 2025 · Feb 13, 2025
diff --git a/MotionMark/resources/debug-runner/tests.js b/MotionMark/resources/debug-runner/tests.js
@@ -456,3 +456,12 @@ Suites.push(new Suite("Basic canvas path suite",
         }
     ]
 ));
+
+Suites.push(new Suite("Dev suite",
+    [
+        {
+            url: "dev/stories/stories.html",
+            name: "Stories"
+        }
+    ]
+));
diff --git a/MotionMark/tests/dev/stories/Description.md b/MotionMark/tests/dev/stories/Description.md
@@ -0,0 +1,47 @@
+# Stories HTML Test
+
+Goals
+-----
+
+Measure HTML/CSS workloads that are common on social media sites.
+
+
+Design
+------
+
+An HTML/CSS test that replicates a "story" placard on a social media site. A unit of work is one story element;
+more elements are placed randomly.
+
+
+Features tested
+---------------
+
+* international text drawing
+* image drawing
+* border-radius, overflow:clip
+* CSS gradients
+* text-shadow
+* drop-shadow
+* CSS variables
+
+
+Work per measured frame
+----------------------
+
+Style update in response to CSS variable change.
+Redraw of each element triggered by a scale change on an image element which is z-ordered at the back.
+
+
+Licensing requirements
+----------------------
+
+Free-to-use images from https://unsplash.com (https://unsplash.com/license)
+No attribution required (but is appreciated)
+
+
+Remaining work
+--------------
+
+* Decide is there's a nicer layout. Grid layout would be nice but it's hard to shrink things and maintain linear complexity.
+* Add some more HTML/CSS features?
+* Maybe use an animaiton of background-position/background-size?
diff --git a/...ark/tests/dev/stories/resources/images/andrey-andreyev-dh8ONmfQyQQ-unsplash.jpg b/...ark/tests/dev/stories/resources/images/andrey-andreyev-dh8ONmfQyQQ-unsplash.jpg
diff --git a/...rk/tests/dev/stories/resources/images/fabian-burghardt-A81818EFqGQ-unsplash.jpg b/...rk/tests/dev/stories/resources/images/fabian-burghardt-A81818EFqGQ-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/images/jonatan-pie-7FfG8zcPcXU-unsplash.jpg b/MotionMark/tests/dev/stories/resources/images/jonatan-pie-7FfG8zcPcXU-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/images/josh-reid-meOFNlRbHmY-unsplash.jpg b/MotionMark/tests/dev/stories/resources/images/josh-reid-meOFNlRbHmY-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/images/khamkeo-rBRZLPVLQg0-unsplash.jpg b/MotionMark/tests/dev/stories/resources/images/khamkeo-rBRZLPVLQg0-unsplash.jpg
diff --git a/...ark/tests/dev/stories/resources/images/luke-stackpoole-eWqOgJ-lfiI-unsplash.jpg b/...ark/tests/dev/stories/resources/images/luke-stackpoole-eWqOgJ-lfiI-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/images/matt-palmer-gK1s6P92EIE-unsplash.jpg b/MotionMark/tests/dev/stories/resources/images/matt-palmer-gK1s6P92EIE-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/images/redcharlie-O7zkyNkQ1lM-unsplash.jpg b/MotionMark/tests/dev/stories/resources/images/redcharlie-O7zkyNkQ1lM-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/images/roan-lavery-hUj3aAg0W3Q-unsplash.jpg b/MotionMark/tests/dev/stories/resources/images/roan-lavery-hUj3aAg0W3Q-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/images/robert-bye-36K5WckeU3o-unsplash.jpg b/MotionMark/tests/dev/stories/resources/images/robert-bye-36K5WckeU3o-unsplash.jpg
diff --git a/MotionMark/tests/dev/stories/resources/stories.js b/MotionMark/tests/dev/stories/resources/stories.js
diff --git a/MotionMark/tests/dev/stories/stories.html b/MotionMark/tests/dev/stories/stories.html
@@ -0,0 +1,154 @@
+<!--
+  Copyright (C) 2015-2017 Apple Inc. All rights reserved.
+
+  Redistribution and use in source and binary forms, with or without
+  modification, are permitted provided that the following conditions
+  are met:
+  1. Redistributions of source code must retain the above copyright
+     notice, this list of conditions and the following disclaimer.
+  2. Redistributions in binary form must reproduce the above copyright
+     notice, this list of conditions and the following disclaimer in the
+     documentation and/or other materials provided with the distribution.
+
+  THIS SOFTWARE IS PROVIDED BY APPLE INC. AND ITS CONTRIBUTORS ``AS IS''
+  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO,
+  THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+  PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR ITS CONTRIBUTORS
+  BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
+  CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
+  SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
+  INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
+  CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
+  ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF
+  THE POSSIBILITY OF SUCH DAMAGE.
+-->
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" type="text/css" href="../../resources/stage.css">
+    <style>
+
+        @property --image-scale {
+          syntax: "<number>";
+          inherits: true;
+          initial-value: 1;
+        }
+
+        @property --gradient-height {
+          syntax: "<length>";
+          inherits: true;
+          initial-value: 45px;
+        }
+
+        @property --radius {
+          syntax: "<length>";
+          inherits: true;
+          initial-value: 16px;
+        }
+
+        #container {
+            position: relative;
+            --margin: 10px;
+            height: calc(100% - calc(2 * var(--margin)));
+            width: calc(100% - calc(2 * var(--margin)));
+            margin: var(--margin);
+        }
+
+        .box {
+            position: absolute;
+            border-radius: var(--radius);
+            box-sizing: border-box;
+            font-size: 10pt;
+            overflow: clip;
+            z-index: 0;
+            opacity: 0.95;
+        }
+
+        .box.rtl {
+            direction: rtl;
+        }
+
+        .badge {
+            position: absolute;
+            margin: 10px;
+            height: 40px;
+            width: 40px;
+            border-radius: 100%;
+            overflow: hidden;
+            border: 4px solid blue;            
+            filter: drop-shadow(rgba(0, 0, 0, 0.62) 0px 0px 1px);
+            z-index: 1;
+        }
+
+        .badge > img {
+            background-color: white;
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+
+        .shadow {
+            position: absolute;
+            inset: 0;
+            z-index: 0;
+            border-radius: var(--radius);
+            box-shadow: 0 0 4px rgba(0, 0, 0, 0.5) inset;
+        }
+
+        .box > img {
+            position: absolute;
+            top: 0;
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+            z-index: -1;
+            scale: var(--image-scale);
+        }
+
+        .text-container {
+            position: absolute;
+            top: calc(var(--gradient-height) + 0.2em);
+            width: 100%;
+            padding: 10px;
+            box-sizing: border-box;
+            color: white;
+            line-height: 2em;
+        }
+
+        .box > .overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            z-index: 1;
+            text-align: center;
+            box-sizing: border-box;
+            padding: 5px;
+            width: 100%;
+            height: 100%;
+            color: white;
+            font-size: larger;
+            padding-top: calc((var(--gradient-height) - 1lh) / 2);
+            --overlay-color: rgba(0, 0, 0, 0.25);
+            background-image: linear-gradient(to bottom, var(--overlay-color) 0, var(--overlay-color) calc(var(--gradient-height) - 3px), transparent var(--gradient-height));
+        }
+
+        .overlay span {
+            text-shadow: 0 0 2px rgba(0, 0, 0, 0.62);
+        }
+    </style>
+</head>
+<body>
+    <div id="stage">
+        <div id="container"></div>
+    </div>
+    <script src="../../../resources/strings.js"></script>
+    <script src="../../../resources/extensions.js"></script>
+    <script src="../../../resources/statistics.js"></script>
+    <script src="../../resources/math.js"></script>
+    <script src="../../resources/benchmark.js"></script>
+    <script src="../../resources/controllers.js"></script>
+    <script src="../../resources/stage.js"></script>
+    <script src="resources/stories.js"></script>
+</body>
+</html>