Add WPT for overlay user-agent rules

This was asked for in the HTML PR here: whatwg/html#9093 (comment) Change-Id: I94e6960803a3fa9c6e1da4dc4393691b1c969c4b Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/4555988 Reviewed-by: Rune Lillesveen <[email protected]> Commit-Queue: Joey Arhar <[email protected]> Auto-Submit: Joey Arhar <[email protected]> Cr-Commit-Position: refs/heads/main@{#1150875}
web-platform-tests · May 30, 2023 · 257631f · 257631f
1 parent a650f00
commit 257631f
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/css/css-position/overlay/overlay-user-agent-rules.html b/css/css-position/overlay/overlay-user-agent-rules.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<link rel=author href="mailto:[email protected]">
+<link rel=help href="https://github.com/whatwg/html/pull/9093">
+<link rel=help href="https://drafts.csswg.org/css-position-4/#overlay">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<title>CSS Position Test: User agent style for overlay</title>
+
+<style>
+div {
+  overlay: auto;
+}
+</style>
+
+<body>
+<script>
+test(() => {
+  const div = document.createElement('div');
+  document.body.appendChild(div);
+  div.style.overlay = 'auto';
+  assert_equals(getComputedStyle(div).overlay, 'none');
+}, 'HTML elements should have overlay:none !important from the user-agent.');
+
+test(() => {
+  const svg = document.createElement('svg');
+  document.body.appendChild(svg);
+  svg.style.overlay = 'auto';
+  assert_equals(getComputedStyle(svg).overlay, 'none');
+}, 'SVG elements should have overlay:none !important from the user-agent.');
+
+test(() => {
+  const nullNamespace = document.createElementNS(null, 'div');
+  document.body.appendChild(nullNamespace);
+  assert_equals(getComputedStyle(nullNamespace).overlay, 'none');
+}, 'Null namespace elements should have overlay:none !important from the user-agent.');
+
+test(() => {
+  const weirdNamespace = document.createElementNS('hello world', 'div');
+  document.body.appendChild(weirdNamespace);
+  assert_equals(getComputedStyle(weirdNamespace).overlay, 'none');
+}, 'Arbitrary namespace elements should have overlay:none !important from the user-agent.');
+</script>