summaryrefslogtreecommitdiffstats
path: root/testing/web-platform/tests/layout-instability/sources-maximpact.html
diff options
context:
space:
mode:
Diffstat (limited to 'testing/web-platform/tests/layout-instability/sources-maximpact.html')
-rw-r--r--testing/web-platform/tests/layout-instability/sources-maximpact.html73
1 files changed, 73 insertions, 0 deletions
diff --git a/testing/web-platform/tests/layout-instability/sources-maximpact.html b/testing/web-platform/tests/layout-instability/sources-maximpact.html
new file mode 100644
index 0000000000..497932b065
--- /dev/null
+++ b/testing/web-platform/tests/layout-instability/sources-maximpact.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+<title>Layout Instability: source attribution prioritization</title>
+<link rel="help" href="https://wicg.github.io/layout-instability/" />
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="resources/test-adapter.js"></script>
+<script src="resources/util.js"></script>
+<style>
+body { margin: 0; }
+#a, #b, #c, #d, #e, #f {
+ display: inline-block;
+ background: gray;
+ min-width: 10px;
+ min-height: 10px;
+ vertical-align: top;
+}
+#a { width: 30px; height: 30px; }
+#b { width: 20px; height: 20px; }
+#c { height: 50px; }
+#d { width: 50px; }
+#e { width: 40px; height: 30px; }
+#f { width: 30px; height: 40px; }
+</style>
+<div id="grow"></div>
+<div id="a"></div
+><div id="b"></div
+><div id="c"></div
+><div id="d"></div
+><div id="e"></div
+><div id="f"></div>
+<script>
+
+let $ = id => document.querySelector(id);
+
+promise_test(async () => {
+ const watcher = new ScoreWatcher;
+
+ // Wait for the initial render to complete.
+ await waitForAnimationFrames(2);
+
+ $("#grow").style.height = "50px";
+ await watcher.promise;
+
+ cls_expect(watcher, {sources: [
+ {
+ node: $("#a"),
+ previousRect: [0, 0, 30, 30],
+ currentRect: [0, 50, 30, 30]
+ },
+ {
+ node: $("#f"),
+ previousRect: [150, 0, 30, 40],
+ currentRect: [150, 50, 30, 40]
+ },
+ {
+ node: $("#c"),
+ previousRect: [50, 0, 10, 50],
+ currentRect: [50, 50, 10, 50]
+ },
+ {
+ node: $("#d"),
+ previousRect: [60, 0, 50, 10],
+ currentRect: [60, 50, 50, 10]
+ },
+ {
+ node: $("#e"),
+ previousRect: [110, 0, 40, 30],
+ currentRect: [110, 50, 40, 30]
+ }
+ ]});
+}, "Source attribution prioritizes by impact.");
+
+</script>