buninu-browser 0.6.0 → 0.9.0

package/lib/paint/display-list.js

@@ -1,3 +1,5 @@
+import {rotationMatrix3D,multiplyRotation3D} from '../style/transform.js';
+import {resolveAffine,multiplyTransform as composeTransforms} from '../style/transform.js';
 /**
  * Converts layout output into an immutable, serializable display list.
  *
@@ -94,8 +96,13 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
     for (const box of boxesByLayer.get(layer.order) ?? []) paintBox(box);
     for (const fragment of fragmentsByLayer.get(layer.order) ?? []) paintFragment(fragment);
   };
+  // Absolute layout is deferred until its containing block's dimensions are
+  // known. Its allocation order is therefore not CSS tree/paint order.
+  const treeOrder = new Map();
+  const indexTree = node => { treeOrder.set(node.id, treeOrder.size); for (const child of node.children ?? []) indexTree(child); };
+  if (tree?.root) indexTree(tree.root);
   const paintContext = (context) => {
-    const members = (children.get(context.order) ?? []).sort((left, right) => left.z - right.z || left.order - right.order);
+    const members = (children.get(context.order) ?? []).sort((left, right) => left.z - right.z || (treeOrder.get(left.nodeId) ?? left.order) - (treeOrder.get(right.nodeId) ?? right.order));
     for (const layer of members) if (layer.z < 0) paintMember(layer);
     paintLayerContent(context);
     for (const layer of members) if (layer.z >= 0) paintMember(layer);
@@ -111,7 +118,7 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
     const start = items.length;
     const rect = { x: box.x, y: box.y, width: box.width, height: box.height };
     hits.push({
-      nodeId: box.nodeId, rect: effect.transform ? transformRect(effect.transform, rect) : rect, clipRect: effect.clipRect, fixed: effect.fixed,
+      nodeId: box.nodeId, localRect:rect, transform:effect.transform, rect: effect.transform ? transformRect(effect.transform, rect) : rect, clipRect: effect.clipRect, fixed: effect.fixed,
     });
     reach(effect, rect);
     const radii = cornerRadii(style, rect);
@@ -189,7 +196,7 @@ export function buildDisplayList(layout, tree = null, resources = null, backgrou
         height: run.type === "image" ? run.height : fragment.height,
       };
       hits.push({
-        nodeId: run.nodeId,
+        nodeId: run.nodeId, localRect:hitRect, transform:effect.transform,
         rect: effect.transform ? transformRect(effect.transform, hitRect) : hitRect,
         clipRect: effect.clipRect,
         fixed: effect.fixed,
@@ -296,6 +303,8 @@ export function hitTarget(displayList, x, y, scroll, skip = () => false) {
     if (pointX < rect.x || pointX >= rect.x + rect.width || pointY < rect.y || pointY >= rect.y + rect.height) continue;
     if (clipRect && (pointX < clipRect.x || pointX >= clipRect.x + clipRect.width
       || pointY < clipRect.y || pointY >= clipRect.y + clipRect.height)) continue;
+    const {transform,localRect}=hits[index];
+    if(transform&&localRect){const p=inverseTransformPoint(transform,pointX,pointY);if(p.x<localRect.x||p.x>=localRect.x+localRect.width||p.y<localRect.y||p.y>=localRect.y+localRect.height)continue;}
     if (skip(nodeId)) continue;
     return nodeId;
   }
@@ -366,7 +375,11 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
   const ownTransform = memo((node) => {
     const transform = node.style?.transform;
     const box = boxes.get(node.id);
-    if (!box || !transform?.scaleX || (transform.scaleX === 1 && transform.scaleY === 1)) return null;
+    if (!box || !transform || (!transform.affine && (transform.scaleX == null || (transform.scaleX === 1 && transform.scaleY === 1)))) return null;
+    if (transform.affine) {
+      const {a,b,c,d,e,f}=resolveAffine(transform.affine,box.width,box.height), origin=transformOrigin(node.style.transformOrigin,box);
+      return {a,b,c,d,e:origin.x*(1-a)-c*origin.y+e,f:origin.y*(1-d)-b*origin.x+f};
+    }
     const origin = transformOrigin(node.style.transformOrigin, box);
     return {
       a: transform.scaleX,
@@ -443,6 +456,17 @@ function paintEffects(layout, tree, scrollOffsetOf = null) {
           transform = transform ? composeTransforms(transform, scrolled) : scrolled;
         }
       }
+      // Backface-hidden descendants share their ancestor's rotation only
+      // inside preserve-3d. Flattened groups begin a new local 3D context.
+      if(chain.some(node=>node.style?.backfaceVisibility==='hidden')){
+        const identity=[1,0,0,0,1,0,0,0,1];let rotation=identity;
+        for(let index=chain.length-1;index>=0;index--){
+          const style=chain[index].style;
+          rotation=multiplyRotation3D(rotation,rotationMatrix3D(style?.transform));
+          if(style?.backfaceVisibility==='hidden'&&rotation[8]<-1e-10){cache.set(key,null);return null;}
+          if(style?.transformStyle!=='preserve-3d')rotation=identity;
+        }
+      }
       const roundedClips = [];
       for (const [node, clip, radii] of clips) {
         const matrix = transforms.get(node);
@@ -495,16 +519,17 @@ function transformOrigin(value, box) {
 }
 
 /** `outer` after `inner`: x -> outer(inner(x)), for scales with translation. */
-function composeTransforms(outer, inner) {
-  return { a: outer.a * inner.a, d: outer.d * inner.d, e: outer.a * inner.e + outer.e, f: outer.d * inner.f + outer.f };
+export function inverseTransformPoint(matrix,x,y) {
+  const {a,b=0,c=0,d,e,f}=matrix,det=a*d-b*c;
+  if(!det)return {x:Infinity,y:Infinity};
+  x-=e;y-=f;return {x:(d*x-c*y)/det,y:(a*y-b*x)/det};
 }
 
-function transformRect(matrix, rect) {
-  const x0 = matrix.a * rect.x + matrix.e;
-  const y0 = matrix.d * rect.y + matrix.f;
-  const x1 = matrix.a * (rect.x + rect.width) + matrix.e;
-  const y1 = matrix.d * (rect.y + rect.height) + matrix.f;
-  return { x: Math.min(x0, x1), y: Math.min(y0, y1), width: Math.abs(x1 - x0), height: Math.abs(y1 - y0) };
+export function transformRect(matrix, rect) {
+  const {a,b=0,c=0,d,e,f}=matrix;
+  const points=[[rect.x,rect.y],[rect.x+rect.width,rect.y],[rect.x,rect.y+rect.height],[rect.x+rect.width,rect.y+rect.height]].map(([x,y])=>({x:a*x+c*y+e,y:b*x+d*y+f}));
+  const x=Math.min(...points.map(p=>p.x)),y=Math.min(...points.map(p=>p.y));
+  return {x,y,width:Math.max(...points.map(p=>p.x))-x,height:Math.max(...points.map(p=>p.y))-y};
 }
 
 function applyEffect(items, start, effect) {

package/lib/paint/raster-readback.js

@@ -16,21 +16,30 @@ export class RasterReadback {
     this.#allocate = allocate;
   }
 
-  read(image, width, height) {
+  read(image, width, height, { premultiplied = false, previous = null, region = null, allocate = this.#allocate } = {}) {
     const kit = this.#kit;
     const bytes = width * height * 4;
     if (!this.#scratch || this.#scratch.length < bytes) {
       this.dispose();
       this.#scratch = kit.Malloc(Uint8Array, bytes);
     }
-    const native = image.readPixels(0, 0, {
-      width, height, colorType: kit.ColorType.RGBA_8888,
-      alphaType: kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB,
-    }, this.#scratch, width * 4);
+    const partial = previous?.length === bytes && region
+      && [region.x,region.y,region.width,region.height].every(Number.isInteger)
+      && region.x >= 0 && region.y >= 0 && region.width > 0 && region.height > 0
+      && region.x + region.width <= width && region.y + region.height <= height;
+    const x=partial?region.x:0,y=partial?region.y:0;
+    const rw=partial?region.width:width,rh=partial?region.height:height;
+    const native = image.readPixels(x, y, {
+      width:rw, height:rh, colorType: kit.ColorType.RGBA_8888,
+      alphaType: premultiplied ? kit.AlphaType.Premul : kit.AlphaType.Unpremul, colorSpace: kit.ColorSpace.SRGB,
+    }, this.#scratch, rw * 4);
     if (!native) throw new Error("Unable to read raster pixels");
-    const pixels = this.#allocate ? this.#allocate(bytes)
+    const pixels = allocate ? allocate(bytes)
       : new Uint8Array(this.#shared ? new SharedArrayBuffer(bytes) : new ArrayBuffer(bytes));
-    pixels.set(native.subarray(0, bytes));
+    if(partial){
+      pixels.set(previous);
+      for(let row=0;row<rh;row++)pixels.set(native.subarray(row*rw*4,(row+1)*rw*4),((y+row)*width+x)*4);
+    }else pixels.set(native.subarray(0, bytes));
     return pixels;
   }
 

package/lib/renderer/animation-frames.js

@@ -12,7 +12,7 @@ export function supportsFrameCheckpoint(version = Bun.version) {
 
 /** One callback collection per document, with a checkpoint between callbacks. */
 export function createAnimationFrames({ invoke, now, checkpoint = drainMicrotasks,
-  frameTimers = null }) {
+  frameTimers = null, afterFrame = null }) {
   let nextWakeId = 1;
   // A private timer collection keeps frame handles separate from Window timers.
   // timerTask=false also prevents a frame inheriting a timer's nesting clamp.
@@ -42,10 +42,15 @@ export function createAnimationFrames({ invoke, now, checkpoint = drainMicrotask
         finally { checkpoint(); }
       }
     } finally {
-      running = false;
-      // Callbacks registered during delivery, including its microtasks, belong
-      // to the next frame. Long callbacks do not add another fixed 16 ms delay.
-      arm(Math.max(0, Math.ceil(16 - (now() - timestamp))));
+      // Paint belongs after this complete callback batch and its microtasks,
+      // before the next animation opportunity can overtake presentation.
+      try { if(!disposed)afterFrame?.(); }
+      finally {
+        running = false;
+        // Callbacks registered during delivery, including its microtasks, belong
+        // to the next frame. Long callbacks do not add another fixed 16 ms delay.
+        arm(Math.max(0, Math.ceil(16 - (now() - timestamp))));
+      }
     }
   }
   return {

package/lib/renderer/bindings.js

@@ -1,3 +1,6 @@
+import {animationProperty} from '../style/animation-values.js';
+import {inputFiles} from './file-input.js';
+import { DataTransfer, dragData, dragEvent, isDraggable } from './html-drag.js';
 /**
  * DOM bindings: the only view page scripts get of the document.
  *
@@ -227,7 +230,7 @@ export class BindingRealm {
     if (!wrapper) {
       wrapper = new EventBinding(CONSTRUCT, event, this, detail);
       if (this.eventPrototype) {
-        const prototype = this.eventPrototypes?.get(this.#messages.has(event) ? "MessageEvent" : event.constructor?.name) ?? this.eventPrototype;
+        const prototype = this.eventPrototypes?.get(this.#messages.has(event) ? "MessageEvent" : dragData(event) !== undefined ? "DragEvent" : event.constructor?.name) ?? this.eventPrototype;
         Object.setPrototypeOf(wrapper, prototype);
         // isTrusted is [LegacyUnforgeable]: an own accessor of every event.
         const isTrusted = Object.getOwnPropertyDescriptor(EventBinding.prototype, "isTrusted");
@@ -525,6 +528,7 @@ class NodeBinding {
   dispatchEvent(event) {
     const real = EventBinding.unwrap(event);
     if (!real) throw new TypeError("dispatchEvent requires an Event");
+    this.#realm.hooks.prepareEvent?.(this.#node, real.type);
     return this.#node.dispatchEvent(real);
   }
 }
@@ -821,7 +825,11 @@ class ElementBinding extends ParentBinding {
   }
 
   get classList() {
-    this.#classList ??= new ClassListBinding(CONSTRUCT, nodeOf(this), realmOf(this));
+    if (!this.#classList) {
+      const realm=realmOf(this);
+      this.#classList=new ClassListBinding(CONSTRUCT,nodeOf(this),realm);
+      if(realm.tokenListPrototype)Object.setPrototypeOf(this.#classList,realm.tokenListPrototype);
+    }
     return this.#classList;
   }
 
@@ -1061,6 +1069,8 @@ class ElementBinding extends ParentBinding {
     inserted(this, list);
   }
 
+  get files(){return inputFiles(nodeOf(this));}
+  showPicker(){const e=nodeOf(this);if(e.disabled)throw new DOMException('The input is disabled','InvalidStateError');realmOf(this).hooks.pickFile?.(e);}
   click() {
     const realm = realmOf(this);
     const element = nodeOf(this);
@@ -1072,6 +1082,7 @@ class ElementBinding extends ParentBinding {
     this.#clickInProgress = true;
     try {
       element.dispatchEvent(event);
+      if (!event.defaultPrevented) realm.hooks.pickFile?.(element);
       if (!event.defaultPrevented && anchor?.hasAttribute("href")) realm.hooks.activateLink?.(anchor);
     } finally {
       this.#clickInProgress = false;
@@ -1112,7 +1123,7 @@ class ElementBinding extends ParentBinding {
     if(!arguments.length)throw new TypeError('setRangeText requires replacement');
     nodeOf(this).setRangeText(String(replacement),...args.map((v,i)=>i<2?Number(v):String(v)));touch(this);
   }
-  select() {nodeOf(this).select();touch(this);}
+  select() {const node=nodeOf(this);node.focus();node.select();touch(this);}
 
   setCustomValidity(message) {
     if (!arguments.length) throw new TypeError("setCustomValidity requires a message");
@@ -1137,6 +1148,9 @@ class ElementBinding extends ParentBinding {
     if (node.ownerDocument.activeElement !== previous) touch(this, [":focus", ":focus-visible"]);
   }
 
+  get draggable() { return isDraggable(nodeOf(this)); }
+  set draggable(value) { nodeOf(this).setAttribute('draggable',Boolean(value) ? 'true' : 'false'); touch(this); }
+
   getBoundingClientRect() {
     const rect = realmOf(this).hooks.boundsOf(nodeOf(this)) ?? { left: 0, top: 0, width: 0, height: 0 };
     return domRect(rect);
@@ -1378,6 +1392,7 @@ function isMedia(wrapper) {
 
 /** on* event handler properties (element.onclick = fn, script.onload = fn). */
 export const EVENT_HANDLER_NAMES = Object.freeze([
+  "dragstart", "drag", "dragenter", "dragleave", "dragover", "drop", "dragend", "pointercancel",
   "click", "auxclick", "dblclick", "mousedown", "mouseup", "mousemove", "mouseover", "mouseout", "mouseenter", "mouseleave",
   "keydown", "keyup", "keypress", "beforeinput", "input", "change", "submit", "reset", "focus", "blur", "load", "error",
   "abort", "scroll", "resize", "wheel", "contextmenu", "touchstart", "touchend", "touchmove",
@@ -1394,11 +1409,13 @@ export function defineEventHandlerProperty(object, type, targetOf, realmFor) {
     configurable: true,
     enumerable: true,
     get() {
+      realmFor(this).hooks.prepareHandler?.(targetOf(this), type);
       return handlers.get(this)?.handler ?? null;
     },
     set(value) {
       const realm = realmFor(this);
       const target = targetOf(this);
+      realm.hooks.prepareHandler?.(target, type);
       const previous = handlers.get(this);
       if (previous) target.removeEventListener(type, previous.listener);
       handlers.delete(this);
@@ -1427,6 +1444,10 @@ for (const property of REFLECTED_PROPERTIES) {
     get() {
       const node = nodeOf(this);
       const value = node[property];
+      if (property === "value" && node.tagName === "INPUT" && node.type === "file") {
+        const file = inputFiles(node)[0];
+        return file ? "C:\\fakepath\\" + file.name : "";
+      }
       if (typeof value === "string" && ["src", "href", "action", "poster"].includes(property)) {
         const attribute = node.getAttribute(property);
         if (property === "action" && !attribute) return node.ownerDocument.URL;
@@ -1531,6 +1552,15 @@ class DocumentBinding extends ParentBinding {
     return realm.wrap(node === realm.window.document && realm.hooks.body ? realm.hooks.body() : node.body);
   }
 
+  execCommand(command, _showUI = false, _value = null) {
+    return Boolean(realmOf(this).hooks.execCommand?.(String(command).toLowerCase()));
+  }
+
+  queryCommandSupported(command) { return String(command).toLowerCase() === 'copy'; }
+  queryCommandEnabled(command) {
+    return this.queryCommandSupported(command) && Boolean(realmOf(this).hooks.copyEnabled?.());
+  }
+
   get title() {
     return nodeOf(this).title;
   }
@@ -1853,11 +1883,15 @@ class EventBinding {
   }
 
   get offsetX() {
-    return this.#event.offsetX ?? 0;
+    // CSSOM View: relative to the target padding edge while dispatching;
+    // outside dispatch offsetX/Y fall back to pageX/Y (also for synthetic events).
+    if (!this.#event.eventPhase) return this.pageX;
+    return this.#realm.hooks.mouseOffset?.(this.#event.target, this.clientX, this.clientY)?.x ?? this.pageX;
   }
 
   get offsetY() {
-    return this.#event.offsetY ?? 0;
+    if (!this.#event.eventPhase) return this.pageY;
+    return this.#realm.hooks.mouseOffset?.(this.#event.target, this.clientX, this.clientY)?.y ?? this.pageY;
   }
 
   get movementX() {
@@ -1868,6 +1902,8 @@ class EventBinding {
     return this.#event.movementY ?? 0;
   }
 
+  get dataTransfer() { return dragData(this.#event) ?? null; }
+
   get relatedTarget() {
     return this.#realm.wrap(this.#event.relatedTarget ?? null) ?? null;
   }
@@ -1918,6 +1954,10 @@ class EventBinding {
     return typeof this.#event.newURL === "string" ? this.#event.newURL : undefined;
   }
 
+  get animationName() { return this.#event.animationName ?? ""; }
+  get elapsedTime() { return this.#event.elapsedTime ?? 0; }
+  get pseudoElement() { return this.#event.pseudoElement ?? ""; }
+
   get key() {
     return this.#event.key;
   }
@@ -2409,17 +2449,17 @@ export function cssStyleDeclarationInterface(realm) {
     get cssFloat() { return styleState(this).style.getPropertyValue("float"); },
     set cssFloat(value) { this.setProperty("float", value); },
     item(index) { return styleState(this).style.item?.(Number(index) >>> 0) ?? ""; },
-    getPropertyValue(property) { return styleState(this).style.getPropertyValue(String(property)); },
-    getPropertyPriority(property) { return styleState(this).style.getPropertyPriority?.(String(property)) ?? ""; },
+    getPropertyValue(property) { return styleState(this).style.getPropertyValue(animationProperty(property)); },
+    getPropertyPriority(property) { return styleState(this).style.getPropertyPriority?.(animationProperty(property)) ?? ""; },
     setProperty(property, value, priority = "") {
       const { style, node, realm: owner } = styleState(this);
       const before = style.cssText;
-      style.setProperty(String(property), value === null ? "" : String(value), String(priority));
+      style.setProperty(animationProperty(property), value === null ? "" : String(value), String(priority));
       if (style.cssText !== before) owner.hooks.touch(node);
     },
     removeProperty(property) {
       const { style, node, realm: owner } = styleState(this);
-      const previous = style.removeProperty(String(property));
+      const previous = style.removeProperty(animationProperty(property));
       owner.hooks.touch(node);
       return previous;
     },
@@ -2443,8 +2483,7 @@ export function cssStyleDeclarationInterface(realm) {
 function styleBinding(node, realm) {
   const style = node.style;
   const prototype = cssStyleDeclarationInterface(realm).prototype;
-  const toKebab = (property) => property.startsWith("--") ? property
-    : property.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+  const toKebab = (property) => property.startsWith("--") ? property : animationProperty(property);
   const proxy = new Proxy(Object.create(prototype), {
     get(target, property, receiver) {
       if (typeof property !== "string" || property in prototype) return Reflect.get(target, property, receiver);
@@ -2460,6 +2499,8 @@ function styleBinding(node, realm) {
     },
     has: (_target, property) => {
       if (typeof property !== "string") return property in prototype;
+      const normalized = animationProperty(property);
+      if(/^animation(?:-(?:name|duration|delay|iteration-count|direction|fill-mode|play-state|timing-function))?$/.test(normalized))return normalized in style || normalized.replace(/-([a-z])/g, (_,letter)=>letter.toUpperCase()) in style;
       const camel = property.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
       return property in prototype || (property in style && !UNRENDERED_STYLE_PROPERTIES.has(camel));
     },
@@ -2779,8 +2820,10 @@ const MOUSE_MEMBERS = ["screenX", "screenY", "clientX", "clientY", "pageX", "pag
 /** Event interface → [parent interface, members it owns], parents first. */
 const EVENT_INTERFACES = {
   CustomEvent: ["Event", ["detail", "initCustomEvent"]],
+  AnimationEvent: ["Event", ["animationName", "elapsedTime", "pseudoElement"]],
   UIEvent: ["Event", ["detail", "view", "which", "initUIEvent"]],
   MouseEvent: ["UIEvent", MOUSE_MEMBERS],
+  DragEvent: ["MouseEvent", ["dataTransfer"]],
   PointerEvent: ["MouseEvent", ["pointerType"]],
   WheelEvent: ["MouseEvent", ["deltaX", "deltaY", "deltaMode"]],
   KeyboardEvent: ["UIEvent", ["key", "code", "keyCode", "charCode", "repeat", ...MODIFIERS]],
@@ -2797,11 +2840,11 @@ const CREATE_EVENT_TYPES = new Map([["event", "Event"], ["events", "Event"], ["h
   ["mouseevents", "MouseEvent"], ["keyboardevent", "KeyboardEvent"], ["focusevent", "FocusEvent"],
   ["messageevent", "MessageEvent"], ["hashchangeevent", "HashChangeEvent"], ["popstateevent", "PopStateEvent"]]);
 
-const UI_EVENT_TYPES = ["UIEvent", "MouseEvent", "PointerEvent", "WheelEvent", "KeyboardEvent", "FocusEvent", "InputEvent"];
+const UI_EVENT_TYPES = ["AnimationEvent", "UIEvent", "MouseEvent", "PointerEvent", "WheelEvent", "KeyboardEvent", "FocusEvent", "InputEvent"];
 const UI_EVENT_FIELDS = [
   ...["detail", "clientX", "clientY", "screenX", "screenY", "button", "buttons", "deltaX", "deltaY", "deltaZ", "deltaMode",
-    "pointerId", "width", "height", "pressure", "location", "keyCode", "which", "charCode"].map((key) => [key, Number]),
-  ...["key", "code", "data", "inputType", "pointerType"].map((key) => [key, String]),
+    "pointerId", "width", "height", "pressure", "location", "keyCode", "which", "charCode", "elapsedTime"].map((key) => [key, Number]),
+  ...["key", "code", "data", "inputType", "pointerType", "animationName", "pseudoElement"].map((key) => [key, String]),
   ...["ctrlKey", "altKey", "shiftKey", "metaKey", "repeat", "isComposing", "isPrimary"].map((key) => [key, Boolean]),
 ];
 
@@ -2854,7 +2897,17 @@ export function eventConstructors(realm) {
   Object.defineProperty(CustomEvent.prototype, "constructor", { value: CustomEvent, writable: true, configurable: true });
   // UI event subclasses: their init dictionaries are copied as primitives only
   // (view and relatedTarget are dropped).
-  const uiEvents = {};
+  function DragEvent(type, options = {}) {
+    if (!new.target) throw new TypeError("Constructor DragEvent requires 'new'");
+    const data=options?.dataTransfer ?? null;
+    if(data!==null && !(data instanceof DataTransfer))throw new TypeError("Invalid dataTransfer");
+    const fields={...init(options)};
+    for(const [key,coerce] of UI_EVENT_FIELDS)if(options?.[key]!==undefined)fields[key]=coerce(options[key]);
+    return realm.wrapEvent(dragEvent(window,String(type),fields,data));
+  }
+  DragEvent.prototype=realm.eventPrototypes.get('DragEvent');
+  Object.defineProperty(DragEvent.prototype,'constructor',{value:DragEvent,writable:true,configurable:true});
+  const uiEvents = {DragEvent,DataTransfer};
   for (const name of UI_EVENT_TYPES) {
     const RealEvent = window[name];
     if (typeof RealEvent !== "function") continue;
@@ -2936,7 +2989,7 @@ function cssEscape(value) {
  * Must run after SES lockdown() (which provides `harden`).
  */
 const BINDINGS = [NodeBinding, CharacterDataBinding, TextBinding, ParentBinding, FragmentBinding, ShadowRootBinding, ElementBinding,
-  DocumentBinding, EventBinding, ClassListBinding, TreeWalkerBinding, NodeIteratorBinding, RangeBinding];
+  DocumentBinding, EventBinding, DataTransfer, ClassListBinding, TreeWalkerBinding, NodeIteratorBinding, RangeBinding];
 
 // Members defined with Object.defineProperty({ get() {...} }) are named
 // "get"; Web IDL names an attribute's accessors "get x" / "set x" and an