HTML: test UA style for embedded content

zcorpan · zcorpan · commit f7c5b0300951 · 2023-06-21T14:47:31.000+02:00
See whatwg/html#8028
diff --git a/html/rendering/replaced-elements/embedded-content/embedded-content-styles.html b/html/rendering/replaced-elements/embedded-content/embedded-content-styles.html
@@ -0,0 +1,69 @@
+<!doctype html>
+<title>default styles for embedded content</title>
+<meta name="viewport" content="width=device-width">
+<script src="/resources/testharness.js"></script>
+<script src="/resources/testharnessreport.js"></script>
+<script src="/html/rendering/support/test-ua-stylesheet.js"></script>
+<style>
+/* Specify this bogus namespace, so the rules in this stylesheet only apply to the `fakeClone`d elements in #refs, not the HTML elements in #tests. */
+@namespace url(urn:not-html);
+@namespace svg url(urn:not-svg);
+
+iframe { border: 2px inset; }
+video { object-fit: contain; }
+img, video, canvas, svg|svg:not(:root) {
+  overflow: clip;
+  overflow-clip-margin: content-box;
+}
+iframe, object, embed {
+  overflow: clip !important;
+  overflow-clip-margin: content-box !important;
+}
+</style>
+
+<style>
+/* Check that !important rules are actually !important */
+@namespace url(http://www.w3.org/1999/xhtml);
+
+iframe, object, embed {
+  overflow: auto;
+  overflow-clip-margin: border-box;
+}
+</style>
+
+<div id="log"></div>
+
+<div id="tests">
+  <iframe></iframe>
+  <video></video>
+  <img>
+  <canvas></canvas>
+  <svg></svg>
+  <object></object>
+  <embed>
+</div>
+
+<div id="refs"></div>
+
+<script>
+  const props = [
+    'border-top-style',
+    'border-right-style',
+    'border-bottom-style',
+    'border-left-style',
+    'border-top-width',
+    'border-right-width',
+    'border-bottom-width',
+    'border-left-width',
+    'border-top-color',
+    'border-right-color',
+    'border-bottom-color',
+    'border-left-color',
+    'object-fit',
+    'overflow-x',
+    'overflow-y',
+    'overflow-clip-margin',
+    ];
+  runUAStyleTests(props);
+
+</script>
diff --git a/html/rendering/support/test-ua-stylesheet.js b/html/rendering/support/test-ua-stylesheet.js
@@ -33,7 +33,13 @@ function runUAStyleTests(props) {
   }
 
   function fakeClone(el) {
-   const clone = document.createElementNS('urn:not-html', el.localName);
+   let ns = 'urn:not-html';
+   if (el.namespaceURI === 'http://www.w3.org/2000/svg') {
+     ns = 'urn:not-svg';
+   } else if (el.namespaceURI === 'http://www.w3.org/1998/Math/MathML') {
+     ns = 'urn:not-mathml';
+   }
+   const clone = document.createElementNS(ns, el.localName);
    for (const att of el.attributes) {
      clone.setAttributeNS(att.namespaceURI, att.name, att.value);
    }

Original file line number	Diff line number	Diff line change
`@@ -33,7 +33,13 @@ function runUAStyleTests(props) {`
`33`	`33`	`}`
`34`	`34`
`35`	`35`	`function fakeClone(el) {`
`36`		`- const clone = document.createElementNS('urn:not-html', el.localName);`
	`36`	`+ let ns = 'urn:not-html';`
	`37`	`+ if (el.namespaceURI === 'http://www.w3.org/2000/svg') {`
	`38`	`+ ns = 'urn:not-svg';`
	`39`	`+ } else if (el.namespaceURI === 'http://www.w3.org/1998/Math/MathML') {`
	`40`	`+ ns = 'urn:not-mathml';`
	`41`	`+ }`
	`42`	`+ const clone = document.createElementNS(ns, el.localName);`
`37`	`43`	`for (const att of el.attributes) {`
`38`	`44`	`clone.setAttributeNS(att.namespaceURI, att.name, att.value);`
`39`	`45`	`}`