Supported API
Every member here is on the engine's nodes, the global document and window once
provideWebCompat() is provided. Each area ends with the gaps the package knows of. What is not
listed is not there.
The DOM tree
- Node names and kinds, namespaces and prefixes, attributes (as
Attrnodes and in a namespace) and classes,classList,dataset,textContentandinnerText. - Listeners:
addEventListener,removeEventListeneranddispatchEvent, on nodes and on thewindow. - The tree: live
childNodesandchildren, the nodes around one,appendChild,insertBefore,removeChild,replaceChild,append,prepend,replaceChildren,before,after,replaceWith,insertAdjacentElement,moveBefore,cloneNode,getRootNode,compareDocumentPosition,isEqualNodeandnormalize, each checked as a browser checks an insertion. Texts and comments havedataand the rest ofCharacterData. - Live
getElementsByTagName,getElementsByClassNameandgetElementsByName. MutationObserver, withchildList,attributes,characterData,subtreeand old values.- A
documentthat creates engine nodes and fragments, with abodythat draws over the screen for overlays, a doctype,createElementNS,createTreeWalkerandcreateNodeIterator, and adocument.implementationthat makes HTML and XML documents. - The
windowglobals a library reads:Event,CustomEvent,HTMLElement,Node,Text,Comment,DocumentFragment,NodeList,HTMLCollection,DOMParser,XMLSerializer,Document,Attr,CSS,MediaList, the window's size, and an element with an id as a global of that name.
Gaps: a document document.implementation makes is never drawn, has no events of its own, no
defaultView and no styleSheets, and measures zero. An XML document is made as an HTML one is.
HTML
- Markup:
innerHTML,outerHTML,insertAdjacentHTML,setHTMLand its kin, and a<template>'scontent, parsed as a browser parses HTML. - The properties HTML reflects attributes as:
hidden,title,dir,tabIndex,type, the ARIA properties and the rest. - A table's rows and cells.
- The element interfaces,
HTMLInputElementand the rest, forinstanceof. - The HTML elements a library writes that the engine has no view for, a
<button>or a<table>, are views. A<button>and an<a>have their roles.
Gaps: the element interfaces answer instanceof only. They have no prototype a member can be
added to, and no new. A comment before or after an HTML document's <html> is left out.
Selectors
querySelectorandquerySelectorAllon an element, a fragment and a document,matchesandclosest, read as Selectors Level 4 has them, with aSyntaxErrorfor a selector that cannot be read.- The pseudo-classes of a form control's state (
:checked,:validand the rest, under Forms), of focus (:focus, under Events) and of the address (:target, under Iframes and the page address).
Gaps: :hover, :visited and the state of a playing media element match nothing, as they do in
a browser where the state is not the case. A button or a link a pointer is over is marked
data-hover instead, which the Tailwind preset's hover: reads.
CSSOM
document.styleSheets, a<style>'ssheet, andCSSStyleSheet, made by a script too, withreplace,replaceSyncandadoptedStyleSheets.- A sheet's rules, with
insertRuleanddeleteRule, and the rest of the CSSOM's rule classes. - A
<style>a library makes while the app runs is read and applied: the layout properties, colours, borders, outlines, corners, custom properties and transitions it declares,@mediaby the window's width and height, which way up it is and the colour scheme and motion the user asked for, and@supports. element.styleas aCSSStyleDeclaration:cssText,setProperty,getPropertyValue,removePropertyand each property by name, shorthands as their longhands, and thestyleattribute as its text. A style a library binds is set as what a native view reads.getComputedStyle, ahiddenelement drawn asdisplay: none, andCSS.escapeandCSS.supports.
Gaps:
- A rule in a sheet made while the app runs is passed over where its selector has a namespace,
:nth-child(... of S)or a pseudo-class the engine does not track,:hoveramong them. - A selector for a pseudo-element other than
::beforeand::after(::first-line,::selection) is passed over, and the rule applies to the rest of its list. So is acontentother than a string ornone(a counter orattr(), say), and a value the engine drops,display: tableamong them. - In a sheet made while the app runs,
border-inline,border-blockand their sides and longhands are passed over, as are a corner of two radii, acalc()or a secondvar()in a border or outline with a token in it, acolor-mix()inborder,outlineor a side's shorthand, and an outline ofauto. - An
@importloads nothing, so the sheet it makes is empty. element.stylechecks a value against what the property takes for the properties a script commonly sets, and drops one that does not match; any other longhand takes any value. A colour is written in lower case, and another keyword keeps the case it was written in:display: BLOCKstaysBLOCK. The shorthands it splits into longhands are those of sides, of pairs, andborder,border-radius,flex,font,list-style,background,background-positionandall;transitionand the rest are declared as themselves.getComputedStyleanswers a percentage as written, reads no vertical writing mode, and answers a transform other than a move or a scale as written.
Geometry and observers
getBoundingClientRectandgetClientRectsasDOMRects,offsetParent, and theoffset,clientandscrollsizes and positions, each read from where native last laid the element out, with what is pending committed first.getComputedStyleanswers awidthorheightan element has none of its own of as it is drawn.- An HTML element starts as a browser's own stylesheet has it, under every style an app or a
library writes: sized
content-box, so its padding and border add to its width and height, and a block where HTML has one (div,p,section,ul,li, a heading and the rest). A<button>, a<select>and a<table>are sizedborder-box. A<view>, a drawing's elements, and every element of an app that did not ask for the package keep the engine's own layout. - Scrolling: an element whose style says
overflow: autoorscrollscrolls what overflows it, withscrollTopandscrollLeftto read and write,scroll,scrollTo,scrollByandscrollIntoView.document.scrollingElementis the root. - The window:
screen,visualViewport,devicePixelRatioas the screen's pixels in a point, andmatchMediawith achangelistener. ResizeObserver, andIntersectionObserverwith a root, a margin and thresholds. An app that observes nothing pays nothing for them.
Gaps: ResizeObserver has no device-pixel-content-box, matchMedia does not read
resolution or -webkit-device-pixel-ratio, and scrollIntoView reads no scroll-margin or
scroll-padding. An element's browser defaults are its box sizing and whether it is a block,
with no margins and no heading sizes, and a table is not laid out as a table. The window does not
scroll.
An inline element over two lines is one box around both, where a browser has two.
A table's clientTop and clientLeft are its border's width with border-collapse: collapse
too, where Chrome answers half of it. A table whose overflow is scroll or auto scrolls, where
Chrome draws it as visible; an IntersectionObserver sees it as Chrome does.
IntersectionObserver takes trackVisibility but its isVisible is never true, since nothing
tells it whether something is drawn over an element.
Events
MouseEvent,PointerEvent,KeyboardEvent,FocusEvent,TouchEvent,Touchand the other kinds, with the members their init dictionaries give, anddocument.createEventwith each kind'sinit*Event.window.event, the event a listener is being told.- Handler properties,
onclicktoonwheel. - A press reaches a listener as a
PointerEvent, a touch is the mouse going down and up as a phone's browser tells it, and a finger held still is acontextmenu. - What a click does, from a press, a script or
element.click(): a checkbox or a radio is checked and saysinputandchange, a button submits or resets its form, and a label clicks or focuses its control. focus()andblur()take effect at once, on a button, a link or what has atabindexas on a text field, withdocument.activeElement,:focus, andfocusinandfocusoutheard on the document.- A
<button>and an<a>take a press with no listener, are:activewhile held and markeddata-hoverwhile a pointer is over them, and are announced as disabled while they are. - A
touchmovelistener that is not passive and callspreventDefault()stops the scroll view the finger is over from scrolling until the touch ends or is canceled, as a slider or a carousel asks a browser to. Atouchstart,touchmoveorwheellistener on the window, the document or the body is passive unless it sayspassive: false, as in a browser. Preventing apointermove's default does not, as in a browser:touch-actionkeeps a pointer's drag from the page.
Gaps: DragEvent, ClipboardEvent and the other kinds not named here are not there. A handler
written as an attribute's text is not compiled, and the window and the document have no handler
properties. A field native refuses the focus to, a read-only one, is taken to have it until the
next focus or blur. A move whose default is prevented after the page has started to scroll
stops the scroll where it is, where a browser lets it go on: native has the touch a frame or so
before a listener hears of it.
Forms
- An
<input>and a<textarea>are the platform's text field, as wide as a browser's, withvalueread as it is typed anddefaultValueas written,inputas it is typed andchangeonce the edit ends, and each key as akeydownandkeyupwith itskeyandkeyCode. - Its
type,inputmode,autocompleteandmaxlengthare the keyboard and entry native has for them, andreadOnly,disabledor a disabled<fieldset>around it make it a field that cannot be typed into. - A
<select>shows its chosen<option>, hasvalue,selectedIndex,optionsandadd(), and opens a list of its options when it or its label is pressed. checkedis the state a click, a script or a binding sets, and a radio checked unchecks the rest of its group.- A control has
validity,willValidate,validationMessage,checkValidity(),reportValidity()andsetCustomValidity(), and:valid,:invalid,:in-range,:out-of-range,:placeholder-shown,:checked,:indeterminateand:defaultmatch. - A field has
selectionStart,selectionEnd,setSelectionRange()andselect(), and a<textarea>says how tall its text is asscrollHeight. - A file input's
click()opens the system's file picker throughexpo-document-picker, which the app installs. - A form has
elements,requestSubmit()andreset(), is submitted only once its controls pass their constraints, anddocument.formslists the forms.
A plain app's <text-input> is unchanged.
Gaps: a <select> has one option chosen at a time, with no multiple, and no keyboard. A
submitted form goes nowhere, there being no page to leave, and its submit event has no
submitter. form.submit() does nothing. A key's keyCode is there for letters, digits, a comma
and the named keys, not for other punctuation.
SVG
- An
<svg>a template writes, markup builds or a script makes withcreateElementNSis drawn by react-native-svg's native views, the ones@ng-native/iconsdraws with: shapes, groups, texts and their spans, a text along a path, gradients and their stops, clips, masks, markers, patterns, a drop shadow and HTML in aforeignObject. - Its elements have SVG's names and namespace,
classNameas an object withbaseVal,getBBox,getComputedTextLength,ownerSVGElementandcreateSVGRect. - A style a script sets on a shape is its paint or its font, a paint that names a token is that
token's colour, and a
light-dark()paint is the side for the app's colour scheme, drawn again as the scheme changes.
Gaps: without react-native-svg's native views a drawing shows nothing, as an icon does. A
stylesheet's attribute selector does not match a drawing's attributes: svg[width="16"] matches
nothing. A marker is drawn from the marker-start, marker-mid and marker-end attributes, not
from a style. A filter draws its drop shadow and its blur; each other step passes on what it
is given. A paint written as var() is not followed to its token. getBBox does not follow a
rotation or a skew, and a curve's box includes its handles.
Canvas
- A
<canvas>'s 2D context draws with the same native views as an<svg>: paths, rectangles, arcs and rounded corners, strokes with their caps, joins and dashes, text, gradients, patterns, clips, transforms andglobalAlpha. - A canvas's
widthandheightset the grid it draws on. A canvas drawn again each frame moves the shapes it has rather than making new ones. - What is drawn reads back with
getImageData, is put withputImageData, draws on another canvas withdrawImage, and is written as a PNG bytoDataURLandtoBlob. Text is not in those pixels, so it is not read back or drawn onto another canvas. isPointInPath,isPointInStroke,measureTextandglobalCompositeOperation, andImageData,CanvasRenderingContext2D,CanvasGradientandCanvasPatternwhere the runtime has none.
Gaps:
- There is no bitmap. A clear of part of a canvas, and the ways of laying a drawing over what is
there other than
source-over(andcopywhere nothing clips it), change only the pixels read back. - Drawing an
<img>on a canvas draws nothing. - Every shape drawn since the canvas was last cleared is a view, which suits a chart of some tens of shapes redrawn each frame and not one of thousands.
isPointInPathtakes noPath2Dof its own.- The
hue,saturation,colorandluminosityways of laying a drawing over what is there are laid assource-over. - What a script writes inside a canvas, its fallback in a browser, is not hidden.
- On a device
toBlobhands its callbacknull, since React Native'sBlobis not made of bytes.toDataURLanswers there.
Iframes and the page address
- The page has an address: the app's own URL with the route it is on, in
document.URL,documentURI,baseURIandwindow.location. A<base href>in the head changes what it resolves against. - A relative link, an image's
src, a form'sactionand the other URLs an element's attributes say resolve against it. An<a>and an<area>have the parts of their URL (protocol,host,pathname,search,hashand the rest), and:targetmatches the element the address's fragment names. location.assign(),replace()and settinghrefor a part of it go to a page of the app through the router, and open any other URL withLinking.- An
<iframe>is a native web view, or a document of its own, withcontentWindow,postMessageboth ways, andwindow.frames.
Gaps: location.reload() does nothing. A frame's loading and the parts of sandbox other than
allow-scripts and allow-same-origin are left out, and development says so. An emulated frame is
not drawn and runs no script. The page's address and
frames covers both in full.