Add instanceof test type and use it to fix Worklet tests

Author: LeaVerou

src/classes/Feature/InterfaceFeature.js

@@ -4,43 +4,74 @@ import supportsInterface from '../../supports/interface.js';
 import supportsMember from '../../supports/member.js';
 
 export class MemberFeature extends Feature {
-	constructor (def, parent) {
-		super(def, parent);
+	static children = {
+		/** The member needs to be an instance of this class */
+		instanceof: { type: MemberFeature },
+	}
+
+	static gatingTest = true;
+
+	get base () {
+		return this.closest(f => f instanceof InterfaceFeature)?.base;
+	}
 
-		let fromParent = this.def.fromParent;
-		this.memberType = fromParent === 'properties' || fromParent === 'functions' ? 'static' : 'instance';
-		this.memberKind = fromParent === 'methods' || fromParent === 'functions' ? 'method' : 'property';
-		this.base = this.parent.base;
+	get memberType () {
+		return this.def.fromParent === 'instanceof' ? this.parent.def.fromParent : this.def.fromParent;
 	}
 
 	get code () {
-		if (this.memberKind === 'method') {
+		if (this.def.fromParent === 'functions' || this.def.fromParent === 'methods') {
 			return this.id + '()';
 		}
 
+		if (this.def.fromParent === 'instanceof') {
+			return 'instanceof ' + this.id;
+		}
+
 		return this.id;
 	}
 
 	testSelf () {
-		let {memberType: type, memberKind: kind, base} = this;
+		let options = {};
 
-		let interfaceName = base.id;
-		let interfaceCallback = this.interface ?? base.interface;
-		let context = {name: interfaceName, callback: interfaceCallback};
+		let isInstanceOf = this.def.fromParent === 'instanceof';
+		let memberType = this.memberType;
 
-		return supportsMember(this.id, {type, kind, context});
+		options.path = memberType === 'properties' || memberType === 'functions' ? '' : 'prototype';
+		options.typeof = memberType === 'methods' || memberType === 'functions' ? 'function' : '';
+		options.instanceof = isInstanceOf ? this.id : '';
+		let member = isInstanceOf ? this.parent.id : this.id;
+		let base = this.base;
+		options.context = {name: base.id, callback: base.interface};
+
+		return supportsMember(member, options);
 	}
 }
 
 export default class InterfaceFeature extends Feature {
 	static children = {
+		/** @deprecated Alias of members */
 		tests: { type: MemberFeature },
+
+		/** The object needs to be an instance of this class */
+		instanceof: { type: InterfaceFeature },
+
+		/** The object should be a subclass of this class */
 		extends: { type: InterfaceFeature },
-		members: { type: MemberFeature },
-		methods: { type: MemberFeature },
+
+		/** Properties that should exist on this object */
 		properties: { type: MemberFeature },
+
+		/** Properties that should exist on this object and should be functions */
 		functions: { type: MemberFeature },
+
+		/** Properties that should exist on this object's prototype */
+		members: { type: MemberFeature },
+
+		/** Properties that should exist on this object's prototype and should be functions */
+		methods: { type: MemberFeature },
 	}
+
 	static gatingTest = true;
 
 	constructor (def, parent) {
@@ -54,6 +85,10 @@ export default class InterfaceFeature extends Feature {
 			return 'extends ' + this.id;
 		}
 
+		if (this.def.fromParent === 'instanceof') {
+			return 'instanceof ' + this.id;
+		}
+
 		return this.id;
 	}
 
@@ -76,6 +111,13 @@ export default class InterfaceFeature extends Feature {
 			return testExtends(Class, SuperClass);
 		}
 
+		if (this.def.fromParent === 'instanceof') {
+			let Class = this.id;
+			let name = this.parent.id;
+
+			return supportsInterface(name, {instanceof: Class});
+		}
+
 		return supportsInterface(this.id);
 	}
 }

src/supports/interface.js

@@ -2,25 +2,17 @@ import { domPrefixes as prefixes, prefixCamelCase as prefixName } from './shared
 
 let cached = {};
 
-/**
- * Low-level, no caching, no prefixes
- * @param {string} name
- */
-export function isSupported (name) {
-	return name in window;
-}
-
-export default function (name) {
+export default function (name, options = {}) {
 	let cachedResult = cached[name];
 	let success, prefix, resolvedName;
 
 	if (cachedResult === undefined) {
-		prefix = prefixes.find(prefix => isSupported(prefixName(prefix, name)));
+		prefix = prefixes.find(prefix => prefixName(prefix, name) in globalThis);
 
 		if (prefix === undefined && name.indexOf('CSS') === 0) {
 			// Last ditch effort to find a prefix: try CSS[Prefix]Name
 			let nameWithoutCSS = name.slice(3);
-			prefix = prefixes.find(prefix => isSupported('CSS' + prefixName(prefix, nameWithoutCSS)));
+			prefix = prefixes.find(prefix => 'CSS' + prefixName(prefix, nameWithoutCSS) in globalThis);
 
 			if (prefix !== undefined) {
 				resolvedName = 'CSS' + prefixName(prefix, nameWithoutCSS);
@@ -39,8 +31,23 @@ export default function (name) {
 		resolvedName = cachedResult === true ? name : (cachedResult || undefined);
 	}
 
+	let object = globalThis[resolvedName];
+
+	if (options.instanceof) {
+		let SuperClass = typeof options.instanceof === 'string' ? globalThis[options.instanceof] : options.instanceof;
+
+		if (!SuperClass) {
+			return {success: false, object, note: `Class "${options.instanceof}" not found`};
+		}
+
+		if (!(object instanceof SuperClass)) {
+			return {success: false, object, note: `Not an instance of ${SuperClass.name}`};
+		}
+	}
+
 	return {
 		success,
 		name: resolvedName,
+		object,
 	};
 }

src/supports/member.js

@@ -18,7 +18,7 @@ export default function member (name, options) {
 	}
 
 	if (typeof options === 'string') {
-		options = {context: options};
+		options = {context: {name: options}};
 	}
 	else if (!options.context) {
 		options = {context: options};
@@ -39,9 +39,8 @@ export default function member (name, options) {
 		object = globalThis[contextName];
 	}
 
-	if (options.type !== 'static' && !(contextObject || callback)) {
-		// Non-static member, and the object was not provided
-		object = object.prototype;
+	if (options.path) {
+		object = object[options.path];
 	}
 
 	if (!object) {
@@ -51,22 +50,38 @@ export default function member (name, options) {
 	let prefix = prefixes.find(prefix => prefixName(prefix, name) in object);
 
 	if (prefix === undefined) {
-		return {success: false};
+		// Not supported
+		return {success: false, object};
 	}
 
 	let resolvedName = prefixName(prefix, name);
+	let memberValue = object[resolvedName];
 
-	if (options.type === "function") {
+	if (options.typeof === "function") {
 		let actualType = typeof object[resolvedName];
 
 		if (actualType !== "function") {
-			return {success: false, type: actualType};
+			return {success: false, type: actualType, object, memberValue};
+		}
+	}
+
+	if (options.instanceof) {
+		let Class = typeof options.instanceof === 'string' ? globalThis[options.instanceof] : options.instanceof;
+
+		if (!Class) {
+			return {success: false, object, note: `Class "${options.instanceof}" not found`};
+		}
+
+		if (!(memberValue instanceof Class)) {
+			return {success: false, object, note: `Object is not an instance of ${Class.name}`};
 		}
 	}
 
 	return {
 		success: true,
 		prefix,
 		resolved: resolvedName,
+		object,
+		memberValue,
 	};
 }

tests/css-animation-worklet-1.js

@@ -7,14 +7,11 @@ export default {
 	interfaces: {
 		CSS: {
 			link: '#animation-worklet-desc',
-			properties: ['animationWorklet'],
-		},
-		Worklet: {
-			link: '#animation-worklet-desc',
-			interface: function() {
-				return CSS.animationWorklet;
+			properties: {
+				animationWorklet: {
+					instanceof: 'Worklet',
+				}
 			},
-			methods: ['addModule'],
 		},
 		WorkletAnimation: {
 			link: '#worklet-animation-interface',

tests/css-layout-api-1.js

@@ -13,13 +13,10 @@ export default {
 	interfaces: {
 		CSS: {
 			link: '#layout-worklet',
-			properties: ['layoutWorklet'],
-		},
-		Worklet: {
-			link: '#layout-worklet',
-			methods: ['addModule'],
-			interface: function () {
-				return CSS.layoutWorklet;
+			properties: {
+				layoutWorklet: {
+					instanceof: 'Worklet',
+				}
 			},
 		},
 	},

tests/css-paint-api-1.js

@@ -17,13 +17,10 @@ export default {
 	interfaces: {
 		CSS: {
 			link: '#paint-worklet',
-			properties: ['paintWorklet'],
-		},
-		Worklet: {
-			link: '#paint-worklet',
-			methods: ['addModule'],
-			interface: function () {
-				return CSS.paintWorklet;
+			properties: {
+				paintWorklet: {
+					instanceof: 'Worklet',
+				}
 			},
 		},
 	}

tests/html.js

@@ -25,5 +25,9 @@ export default {
 			extends: 'Event',
 			members: ['viewTransition'],
 		},
+		Worklet: {
+			link: 'https://html.spec.whatwg.org/multipage/worklets.html#worklets-worklet',
+			methods: ['addModule'],
+		}
 	}
 };