Search completed in 1.70 seconds.
XPathResult.resultType - Web APIs
the read-only
resulttype property of the xpath
result interface represents the type of the
result, as defined by the type constants.
... syntax var
resulttype =
result.
resulttype; return value an integer value representing the type of the
result, as defined by the type constants.
... constants
result type defined constant value description any_type 0 a
result set containing whatever type naturally
results from evaluation of the expression.
...And 14 more matches
XPathResult - Web APIs
the xpath
result interface represents the
results generated by evaluating an xpath expression within the context of a given node.
... since xpath expressions can
result in a variety of
result types, this interface makes it possible to determine and handle the type and value of the
result.
... properties xpath
result.booleanvalueread only a boolean representing the value of the
result if
resulttype is boolean_type.
...And 24 more matches
nsINavHistoryResultObserver
toolkit/components/places/nsinavhistoryservice.idlscriptable lets clients observe changes to a
result as the
result updates itself according to bookmark and history system events.
... 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 11.0 (firefox 11.0 / thunderbird 11.0 / seamonkey 2.8) note: in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1), this interface replaced the older nsinavhistory
resultviewer interface, which only allowed one client at a time.
... method overview void batching(in boolean atogglemode); void containerclosed(in nsinavhistorycontainer
resultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containeropened(in nsinavhistorycontainer
resultnode acontainernode); deprecated since gecko 2.0 obsolete since gecko 11.0 void containerstatechanged(in nsinavhistorycontainer
resultnode acontainernode, in unsigned long aoldstate, in unsigned long anewstate); void invalidatecontainer(in nsinavhistorycontainer
resultnode acontainernode); void nodeannotationchanged(in nsinavhistory
resultnode anode, in autf8string aannoname); void nodedateaddedchanged(in nsinavhistory
resultnode anode, in prtime anewvalue); void nodehistorydetailschanged(in nsinavhistory
resultnode anode, in prtime anewvisitdate, in un...
...And 23 more matches
nsINavHistoryResult
toolkit/components/places/nsinavhistoryservice.idlscriptable describes the
result of a history or bookmark query.
... 1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) places
results use a model-view-controller (mvc) design pattern.
...
result objects represent the model in which the data is stored.
...And 20 more matches
nsINavHistoryResultViewer
toolkit/components/places/public/nsinavhistoryservice.idlscriptable lets nsinavhistory
result instances notify places views of changes in the
results.
... removed in gecko 2.0 and replaced with the nsinavhistory
resultobserver interface, which is similar but allows multiple clients to observe the
result at once.
... method overview void containerclosed(in nsinavhistorycontainer
resultnode acontainernode); void containeropened(in nsinavhistorycontainer
resultnode acontainernode); void invalidatecontainer(in nsinavhistorycontainer
resultnode acontainernode); void nodeannotationchanged(in nsinavhistory
resultnode anode, in autf8string aannoname); void nodedateaddedchanged(in nsinavhistory
resultnode anode, in prtime anewvalue); void node...
...And 20 more matches
nsIXULTemplateResult
content/xul/templates/public/nsixultemplate
result.idlscriptable a single
result generated from a template query.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) each
result is identified by an id, which must be unique within the set of
results produced from a query.
... the
result may optionally be identified by an rdf resource.
...And 17 more matches
Result Generation - Archive of obsolete content
these become the
results and content would be generated for each of these
results.
...this will get one
result, a.
... look at the graph to see if you can see why one
result would be generated in this case.
...And 16 more matches
nsINavHistoryResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this is the base class for all places history
result nodes, containing the uri, title, and other general information.
...the members of
result.children have an indentlevel value of zero, their children have an indentlevel of 1, and so forth.
... parent nsinavhistorycontainer
resultnode identifies the parent
result node in the
result set.
...And 14 more matches
Sorting Results - Archive of obsolete content
« previousnext » when
results are generated from a query, content is generated in the same order as the
results.
... for an xml datasource, generated content will be output in the order corresponding to the
results of the xpath query expression.
... for an sqlite datasource, the generated content corresponds to the order of
results of the sql query.
...And 12 more matches
nsINavHistoryContainerResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable a foundation for the interfaces that provide a description of a query
result on the places service that describes a container (which is any kind of grouping, including bookmark folders).
... 1.0 66 introduced gecko 1.9 inherits from: nsinavhistory
resultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview nsinavhistory
resultnode findnodebydetails(in autf8string auristring, in prtime atime, in long long aitemid, in boolean arecursive); nsinavhistory
resultnode getchild(in unsigned long aindex); unsigned long getchildindex(in nsinavhistory
resultnode anode); attributes attribute type description childcount unsigned long the number of child nodes; accessing this throws an ns_error_not_available exception of containeropen is false.
...when closed, attempting to call getchild() or access childcount
results in an error.
...And 9 more matches
nsIDOMXPathResult
dom/interfaces/xpath/nsidomxpath
result.idlscriptable this interface describes an xpath
result returned by nsidomxpathevaluator or document.evaluate inherits from: nsisupports last changed in gecko 1.7 method overview nsidomnode iteratenext(); nsidomnode snapshotitem(in unsigned long index); attributes attribute type description booleanvalue boolean if
resulttype is boolean_type, the boolean value.
... numbervalue double if
resulttype is number_type, the numeric value of the xpath value.
...
resulttype unsigned short the type of
result; can be any of the type constants except any_type.
...And 8 more matches
nsINavHistoryResultTreeViewer
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this interface provides a predefined view adaptor for interfacing places query
results with a tree.
... 1.0 66 introduced gecko 1.8 inherits from: nsinavhistory
resultobserver last changed in gecko 1.9 (firefox 3) this object removes itself from the associated
result when the tree is detached; this prevents circular references.
...if you use this object and attach it to a
result without attaching it to a tree, then forget about it, it will leak.
...And 7 more matches
Components.lastResult
components.last
result returns the numeric ns
result code that was the
result code of the last xpcom method called via xpconnect.
... introduction generally, components.last
result is only useful for testing the
result of xpcom methods that can return interesting 'success' codes.
... this is because failure
result codes get converted by xpconnect into exceptions that are thrown into the calling javascript method.
...And 6 more matches
FileReader.result - Web APIs
the filereader
result property returns the file's contents.
... syntax var file = instanceoffilereader.
result value an appropiate string or arraybuffer based on which of the reading methods was used to initiate the read operation.
... the
result types are described below.
...And 6 more matches
SpeechRecognitionEvent.results - Web APIs
the
results read-only property of the speechrecognitionevent interface returns a speechrecognition
resultlist object representing all the speech recognition
results for the current session.
... specifically this object will contain all final
results that have been returned, followed by the current best hypothesis for all interim
results.
... when subsequent
result events are fired, interim
results may be overwritten by a newer interim
result or by a final
result — they may even be removed, if they are at the end of the "
results" array and the array length decreases.
...And 6 more matches
IDBRequest.result - Web APIs
the
result read-only property of the idbrequest interface returns the
result of the request.
... if the request failed and the
result is not available, an invalidstateerror exception is thrown.
... syntax var my
result = request.
result; value any example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store.
...And 4 more matches
SpeechRecognitionResult - Web APIs
the speechrecognition
result interface of the web speech api represents a single recognition match, which may contain multiple speechrecognitionalternative objects.
... properties speechrecognition
result.isfinal read only a boolean that states whether this
result is final (true) or not (false) — if so, then this is the final time this
result will be returned; if not, then this
result is an interim
result, and may be updated later on.
... speechrecognition
result.length read only returns the length of the "array" — the number of speechrecognitionalternative objects contained in the
result (also referred to as "n-best alternatives".) methods speechrecognition
result.item a standard getter that allows speechrecognitionalternative objects within the
result to be accessed via array syntax.
...And 4 more matches
SpeechRecognitionResultList - Web APIs
the speechrecognition
resultlist interface of the web speech api represents a list of speechrecognition
result objects, or a single one if
results are being captured in continuous mode.
... properties speechrecognition
resultlist.length read only returns the length of the "array" — the number of speechrecognition
result objects in the list.
... methods speechrecognition
resultlist.item a standard getter that allows speechrecognition
result objects in the list to be accessed via array syntax.
...And 4 more matches
Using Multiple Queries to Generate More Results - Archive of obsolete content
« previousnext » combining
results together one interesting technique is to use several queries to combine two sets of unrelated data together.
... to do this, we create one query to generate one set of
results and a second query to generate another set of
results.
... if a
result from the second query wasn't also matched by the first query, it will have content created for it.
...And 3 more matches
Components.results
components.
results is a read-only object whose properties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at table of errors), with the value of each corresponding to that constant's value.
... introduction components.
results is an object whose properties are the names of well-known xpcom
result codes, with each value being that of the corresponding
result code.
... elements in this array can be used to test against unknown ns
result variables or they can be 'thrown' to indicate failure...
...And 3 more matches
SpeechRecognition.interimResults - Web APIs
the interim
results property of the speechrecognition interface controls whether interim
results should be returned (true) or not (false.) interim
results are
results that are not yet final (e.g.
... the speechrecognition
result.isfinal property is false.) the default value for interim
results is false.
... syntax var myinterim
result = myspeechrecognition.interim
results; myspeechrecognition.interim
results = false; value a boolean representing the state of the current speechrecognition's interim
results.
...And 3 more matches
SpeechRecognitionResult.isFinal - Web APIs
the isfinal read-only property of the speechrecognition
result interface is a boolean that states whether this
result is final (true) or not (false) — if so, then this is the final time this
result will be returned; if not, then this
result is an interim
result, and may be updated later on.
... syntax var myisfinal = speechrecognition
resultinstance.isfinal; returns a boolean.
... examples recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
...And 3 more matches
SpeechRecognitionResult.item() - Web APIs
the item getter of the speechrecognition
result interface is a standard getter that allows speechrecognitionalternative objects within the
result to be accessed via array syntax.
... syntax var myalternative = speechrecognition
resultinstance[0]; returns a speechrecognitionalternative object.
... recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
...And 3 more matches
SpeechRecognitionResult.length - Web APIs
the length read-only property of the speechrecognition
result interface returns the length of the "array" — the number of speechrecognitionalternative objects contained in the
result (also referred to as "n-best alternatives".) the number of alternatives contained in the
result depends on what the speechrecognition.maxalternatives property was set to when the speech recognition was first initiated.
... syntax var mylength = speechrecognition
resultinstance.length; returns a number.
... recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
...And 3 more matches
SpeechRecognitionResultList.item() - Web APIs
the item getter of the speechrecognition
resultlist interface is a standard getter — it allows speechrecognition
result objects in the list to be accessed via array syntax.
... syntax var my
result = speechrecognition
resultlistinstance[0]; returns a speechrecognition
result object.
... recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
...And 3 more matches
SpeechRecognitionResultList.length - Web APIs
the length read-only property of the speechrecognition
resultlist interface returns the length of the "array" — the number of speechrecognition
result objects in the list.
... syntax var mylength = speechrecognition
resultlistinstance.length; returns a number.
... recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
...And 3 more matches
USBInTransferResult - Web APIs
the usbintransfer
result interface of the webusb api provides the
result from a call to the transferin() and controltransferin() methods of the usbdevice interface.
... it represents the
result from requesting a transfer of data from the usb device to the usb host.
... constructor usbintransfer
result.usbintransfer
result() creates a new usbintransfer
result object with the provided status and data fields.
...And 3 more matches
USBIsochronousInTransferResult - Web APIs
the usbisochronousintransfer
result interface of the webusb api provides the
result from a call to the isochronoustransferin() method of the usbdevice interface.
... it represents the
result from requesting a transfer of data from the usb device to the usb host.
... constructor usbisochronousintransfer
result.usbisochronousintransfer
result() creates a new usbisochronousintransfer
result object with the provided packets and data fields.
...And 3 more matches
USBOutTransferResult - Web APIs
the usbouttransfer
result interface of the webusb api provides the
result from a call to the transferout() and controltransferout() methods of the usbdevice interface.
... it represents the
result from requesting a transfer of data from the usb host to the usb device.
... constructor usbouttransfer
result.usbouttransfer
result() creates a new usbouttransfer
result object with the provided status and byteswritten fields.
...And 3 more matches
result - SVG: Scalable Vector Graphics
the
result attribute defines the assigned name for this filter primitive.
... if supplied, then graphics that
result from processing this filter primitive can be referenced by an in attribute on a subsequent filter primitive within the same <filter> element.
...uselighting>, <fedisplacementmap>, <fedropshadow>, <feflood>, <fegaussianblur>, <feimage>, <femerge>, <femorphology>, <feoffset>, <fespecularlighting>, <fetile>, and <feturbulence> html, body, svg { height: 100%; } <svg viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> usage notes value <filter-primitive-reference> default value none animatable yes <filter-primitive-referenc...
...And 3 more matches
nsresult
« xpcom api reference the ns
result data type is a strongly-typed enum used to represent a value returned by an xpcom function; these are typically error or status codes.
... for a list of defined
result values, see error codes returned by mozilla apis.
... note: prior to gecko 19.0, ns
result was not strongly typed.
...And 2 more matches
FetchEvent.resultingClientId - Web APIs
the
resultingclientid read-only property of the fetchevent interface is the id of the client that replaces the previous client during a page navigation.
... for example, when navigating from page a to page b
resultingclientid is the id of the client associated with page b.
... if the fetch request is a subresource request or the request's destination is report,
resultingclientid will be an empty string.
...And 2 more matches
PublicKeyCredential.getClientExtensionResults() - Web APIs
getclientextension
results() is a method of the publickeycredential interface that returns an arraybuffer which contains a map between the extensions identifiers and their
results after having being processed by the client.
... syntax maparraybuffer = publickeycredential.getclientextension
results() parameters none.
... return value an arraybuffer containing the
result of the processing of the different extensions by the client.
...And 2 more matches
SpeechRecognition.onresult - Web APIs
the on
result property of the speechrecognition interface represents an event handler that will run when the speech recognition service returns a
result — a word or phrase has been positively recognized and this has been communicated back to the app (when the
result event fires.) syntax myspeechrecognition.on
result = function() { ...
... recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
... // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognition
result at position 0.
...And 2 more matches
USBIsochronousOutTransferResult - Web APIs
the usbisochronousouttransfer
result interface of the webusb api provides the
result from a call to the isochronoustransferout() method of the usbdevice interface.
... it represents the
result from requesting a transfer of data from the usb host to the usb device.
... constructor usbisochronousouttransfer
result.usbisochronousouttransfer
result() creates a new usbisochronousouttransfer
result object with the provided packet field.
...And 2 more matches
XPathResult.invalidIteratorState - Web APIs
the read-only invaliditeratorstate property of the xpath
result interface signifies that the iterator has become invalid.
... it is true if xpath
result.
resulttype is unordered_node_iterator_type or ordered_node_iterator_type and the document has been modified since this
result was returned.
... syntax var iteratorstate =
result.invaliditeratorstate; return value a boolean value indicating whether the iterator has become invalid.
...And 2 more matches
XPathResult.iterateNext() - Web APIs
the iteratenext() method of the xpath
result interface iterates over a node set
result and returns the next node from it or null if there are no more nodes.
... syntax var node =
result.iteratenext(); return value the next node within the node set of the xpath
result.
... exceptions type_err in case xpath
result.
resulttype is not unordered_node_iterator_type or ordered_node_iterator_type, an xpathexception of type type_err is thrown.
...And 2 more matches
XPathResult.snapshotItem() - Web APIs
the snapshotitem() method of the xpath
result interface returns an item of the snapshot collection or null in case the index is not within the range of nodes.
... unlike the iterator
result, the snapshot does not become invalid, but may not correspond to the current document if it is mutated.
... syntax var node =
result.snapshotitem(i); return value the node at the given index within the node set of the xpath
result.
...And 2 more matches
mozIStorageResultSet
the mozistorage
resultset interface represents a set of
results from a storage statement.
... storage/public/mozistorage
resultset.idlscriptable please add a summary to this article.
... last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview mozistoragerow getnextrow(); methods getnextrow() returns the next row from the
result set.
...return value a mozistoragerow object containing the next row from the
result set, or null if there are no more
results.
nsINavHistoryFullVisitResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this interface describes a
result from a
result_type_full_visit query on the places service.
... this includes more detailed information than the
result_type_visit query (which returns nsinavhistoryvisit
resultnode, and as such takes more time to look up.
... 1.0 66 introduced gecko 1.9 inherits from: nsinavhistoryvisit
resultnode last changed in gecko 1.9 (firefox 3) the information returned in this interface is not commonly used, hence its separation into a separate query type for efficiency.
... see also nsinavhistoryvisit
resultnode nsinavhistory
resultnode nsinavhistoryservice ...
nsINavHistoryQueryResultNode
1.0 66 introduced gecko 1.8 inherits from: nsinavhistorycontainer
resultnode last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) note: if you request that places not be expanded in the options that generated the node, the node will report that it has no children and will never try to populate itself.
... queryoptions nsinavhistoryqueryoptions the options that group the node's children; only valid for
result_type_query nodes.
... methods getqueries() returns the queries that build the node's children; only valid for
result_type_query nodes.
... see also nsinavhistorycontainer
resultnode nsinavhistoryquery ...
SpeechRecognitionEvent.resultIndex - Web APIs
the
resultindex read-only property of the speechrecognitionevent interface returns the lowest index value
result in the speechrecognition
resultlist "array" that has actually changed.
... the speechrecognition
resultlist object is not an array, but it has a getter that allows it to be accessed by array syntax.
... syntax var my
resultindex = event.
resultindex; value a number.
... examples recognition.on
result = function(event) { var color = event.
results[0][0].transcript; diagnostic.textcontent = '
result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.
resultindex); // returns 0 if there is only one
result } specifications specification status comment web speech apithe definition of '
resultindex' in that specification.
XPathResult.booleanValue - Web APIs
the read-only booleanvalue property of the xpath
result interface returns the boolean value of a
result with xpath
result.
resulttype being boolean_type.
... syntax var value =
result.booleanvalue; return value the return value is the boolean value of the xpath
result returned by document.evaluate().
... exceptions type_err in case xpath
result.
resulttype is not boolean_type, an xpathexception of type type_err is thrown.
... html <div>xpath example</div> <p>text is 'xpath example': <output></output></p> javascript var xpath = "//div/text() = 'xpath example'"; var
result = document.evaluate(xpath, document, null, xpath
result.boolean_type, null); document.queryselector("output").textcontent =
result.booleanvalue;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpath
result.booleanvalue' in that specification.
XPathResult.numberValue - Web APIs
the read-only numbervalue property of the xpath
result interface returns the numeric value of a
result with xpath
result.
resulttype being number_type.
... syntax var value =
result.numbervalue; return value the return value is the numeric value of the xpath
result returned by document.evaluate().
... exceptions type_err in case xpath
result.
resulttype is not number_type, an xpathexception of type type_err is thrown.
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "count(//div)"; var
result = document.evaluate(xpath, document, null, xpath
result.number_type, null); document.queryselector("output").textcontent =
result.numbervalue;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpath
result.numbervalue' in that specification.
XPathResult.singleNodeValue - Web APIs
the read-only singlenodevalue property of the xpath
result interface returns a node value or null in case no node was matched of a
result with xpath
result.
resulttype being any_unordered_node_type or first_ordered_node_type.
... syntax var value =
result.singlenodevalue; return value the return value is the node value of the xpath
result returned by document.evaluate().
... exceptions type_err in case xpath
result.
resulttype is not any_unordered_node_type or first_ordered_node_type, an xpathexception of type type_err is thrown.
... html <div>xpath example</div> <div>tag name of the element having the text content 'xpath example': <output></output></div> javascript var xpath = "//*[text()='xpath example']"; var
result = document.evaluate(xpath, document, null, xpath
result.first_ordered_node_type, null); document.queryselector("output").textcontent =
result.singlenodevalue.localname;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpath
result.singlenodevalue' in that specification.
XPathResult.snapshotLength - Web APIs
the read-only snapshotlength property of the xpath
result interface represents the number of nodes in the
result snapshot.
... syntax var snapshotlength =
result.snapshotlength; return value an integer value representing the number of nodes in the
result snapshot.
... exceptions type_err in case xpath
result.
resulttype is not unordered_node_snapshot_type or ordered_node_snapshot_type, an xpathexception of type type_err is thrown.
... html <div>xpath example</div> <div>number of matched nodes: <output></output></div> javascript var xpath = "//div"; var
result = document.evaluate(xpath, document, null, xpath
result.ordered_node_snapshot_type, null); document.queryselector("output").textcontent =
result.snapshotlength;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpath
result.snapshotlength' in that specification.
XPathResult.stringValue - Web APIs
the read-only stringvalue property of the xpath
result interface returns the string value of a
result with xpath
result.
resulttype being string_type.
... syntax var value =
result.stringvalue; return value the return value is the string value of the xpath
result returned by document.evaluate().
... exceptions type_err in case xpath
result.
resulttype is not string_type, an xpathexception of type type_err is thrown.
... html <div>xpath example</div> <div>text content of the <div> above: <output></output></div> javascript var xpath = "//div/text()"; var
result = document.evaluate(xpath, document, null, xpath
result.string_type, null); document.queryselector("output").textcontent =
result.stringvalue;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpath
result.stringvalue' in that specification.
JS_LeaveLocalRootScopeWithResult
leave a local root scope, transferring the
result value to the next enclosing root scope.
... syntax void js_leavelocalrootscopewith
result(jscontext *cx, jsval rval); name type description cx jscontext * pointer to the context.
... rval jsval the
result value that should remain protected from garbage collection.
nsINavHistoryVisitResultNode
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this interface describes a
result from a
result_type_visit query on the places service.
... 1.0 66 introduced gecko 1.9 inherits from: nsinavhistory
resultnode last changed in gecko 1.9 (firefox 3) attributes attribute type description sessionid long long the session id of the visit, used for session grouping when a tree view is sorted by date.
... see also nsinavhistory
resultnode ...
RTCPeerConnection.onidentityresult - Web APIs
the rtcpeerconnection.onidentity
result event handler is a property containing the code to execute when the identity
result event, of type rtcidentityevent, is received by this rtcpeerconnection.
... syntax peerconnection.onidentity
result = function; values function is the name of a user-defined function, without the () suffix or any parameters, or an anonymous function declaration, such as function(event) {...}.
... example pc.onidentity
result = function(ev) { alert("onidentity
result event detected!"); }; ...
::-webkit-search-results-button - CSS: Cascading Style Sheets
the ::-webkit-search-
results-button css pseudo-element represents a button (the "search
results button") at the left edge of an <input> of type="search" which when clicked displays a menu which allows the user to choose from previous recent search queries.
...the search
results button is only shown on search <input> elements that have a
results attribute.
... syntax selector::-webkit-search-
results-button specifications not part of any standard.
minresultsforpopup - Archive of obsolete content
« xul reference home min
resultsforpopup new in thunderbird 3requires seamonkey 2.0 type: integer the minimum number of
results that must be returned for the popup to be displayed.
...this can be used to display additional items that are not autocomplete
results.
textbox.minResultsForPopup - Archive of obsolete content
« xul reference home min
resultsforpopup obsolete since gecko 1.9.1 type: integer the minimum number of
results that must be returned for the popup to be displayed.
...this can be used to display additional items that are not autocomplete
results.
nsIFeedResultListener
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void handle
result(in nsifeed
result result); methods handle
result() called when feed processing is complete.
... void handle
result( in nsifeed
result result ); parameters
result an nsifeed
result describing the parsed feed.
RTCPeerConnection: identityresult event - Web APIs
an identity
result event is sent to an rtcpeerconnection object's onidentity
result event handler to inform it that an assertion has been generated by an associated identity provider (idp) during the process of creating an sdp offer or answer.
... bubbles no cancelable no interface rtcidentityevent event handler property onidentity
result specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'identity
result' in that specification.
SpeechRecognition: result event - Web APIs
the
result event of the web speech api is fired when the speech recognition service returns a
result — a word or phrase has been positively recognized and this has been communicated back to the app bubbles no cancelable no interface speechrecognitionevent event handler property on
result examples this code is excerpted from our speech color changer example.
... you can use the
result event in an addeventlistener method: var recognition = new webkitspeechrecognition() || new speechrecognition(); recognition.addeventlistener('
result', function(event) { var color = event.
results[0][0].transcript; diagnostic.textcontent = '
result received: ' + color + '.'; bg.style.backgroundcolor = color; }); or use the on
result event handler property: recognition.on
result = function(event) { var color = event.
results[0][0].transcript; diagnostic.textcontent = '
result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speech recognition events' in that specification.
nsIAutoCompleteResult
toolkit/components/autocomplete/nsiautocomplete
result.idlscriptable this interface is implemented by
results of autocomplete search.
nsIFeedResult
toolkit/components/feeds/nsifeed
result.idlscriptable this interface provides access to http and parsing metadata for a feed or entry.
nsINavHistoryResultViewObserver
toolkit/components/places/public/nsinavhistoryservice.idlscriptable this interface is used by clients of the history
results to define domain-specific handling of specific nsitreeview methods that the history
result doesn't implement.
Index - Web APIs
59 analysernode.maxdecibels api, analysernode, property, reference, web audio api, maxdecibels the maxdecibels property of the analysernode interface is a double value representing the maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the maximum value for the range of
results when using getfloatfrequencydata() or getbytefrequencydata().
... 60 analysernode.mindecibels api, analysernode, property, reference, référence(2), web audio api, mindecibels the mindecibels property of the analysernode interface is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the minimum value for the range of
results when using getfloatfrequencydata() or getbytefrequencydata().
...it's basically an average between the current buffer and the last buffer the analysernode processed, and
results in a much smoother set of value changes over time.
...And 110 more matches
Index
these exception objects may be thrown when implementing xpcom interfaces in javascript, and they can provide better diagnostics in the error console if not caught than simply throwing an ns
result's value will.
... 24 components.issuccesscode xpcom, xpcom:language bindings, xpconnect determines whether a given xpcom return code (that is, an ns
result value) indicates the success or failure of an operation, returning true or false respectively.
... 25 components.last
result xpcom:language bindings, xpconnect no summary!
...And 53 more matches
ARIA Test Cases - Accessibility
or copy-paste: http://oaa-accessibility.org/examples/ for each example we test the "expected"
results with assistive technologies, for each browser that at supports wai-aria in.
... we can add more screen readers if people are willing to step up and provide test
results for them.
... with ie beta 2 nvda 0.6p2 with firefox 3 orca with firefox 3 window-eyes 7 with ie 8 beta 2 and firefox 3 voiceover (leopard) with safari 4.0.2 zoom (leopard) with safari 4.0.2, firefox 3.x and opera 9.x zoomtext 9.1 with firefox 3 and ie 8 beta 2 test case structure test cases are organized as follows: test case links test details expected at behavior markup notes
results table at firefox ie opera safari jaws 9 - - - - jaws 10 - 1.
...And 52 more matches
Displaying Places information using views
use them to display nsinavhistory
result objects to the user.
... see querying places for information about obtaining and using nsinavhistory
result objects, which this page assumes you are familiar with.
... an nsinavhistory
result instance provides the data for a view.
...And 48 more matches
nsIXULTemplateBuilder
a template builder, given an input source of data, a template, and a reference point, generates a list of
results from the input, and copies part of the template for each
result.
... templates may generate content recursively, using the same template, but with the previous iteration's
results as the reference point.
...different template builders may be specialized in the manner in which they generate and display the
resulting content from the template.
...And 44 more matches
Querying Places
executing a query places queries have several basic parts: the query object: nsinavhistoryquery, holds the search parameters the query options: nsinavhistoryqueryoptions, allows configuration of the search
result the history service: nsinavhistoryservice, executes the query the first first step is to create the query and options, and fill them with the parameters you want.
...the defaults for these objects will
result in a query that returns all of your browser history in a flat list: chromeutils.definemodulegetter(this, "placesutils", "resource://gre/modules/placesutils.jsm"); // no query options set will get all history, sorted in database order, // which is nsinavhistoryqueryoptions.sort_by_none.
... let options = placesutils.history.getnewqueryoptions(); // no query parameters will return everything let query = placesutils.history.getnewquery(); // execute the query let
result = placesutils.history.executequery(query, options);
result types nsinavhistoryqueryoptions has a
resulttype property that allows configuration of the grouping and level of detail to be returned in the
results.
...And 41 more matches
Index - Archive of obsolete content
it consists of a set of client machines that continuously build and test mozilla and report their
results back to a server that makes those
results available via a web page.
...as a
result, if, for example, c++ code called a javascript component, which threw an exception, that exception would be logged to the console before control was returned to the c++ caller.
... 497 popchallengeresponse nss the
resultstring will either be a base-64 encoded popodeckeyrespcontent message, or one of the following error strings: 498 jetpack 499 basics writes some information to the error console.
...And 40 more matches
Using IndexedDB - Web APIs
do something with the
results (which can be found on the request object).
...the call to the open() function returns an idbopendbrequest object with a
result (success) or error value that you handle as an event.
... most other asynchronous functions in indexeddb do the same thing - return an idbrequest object with the
result or error.
...And 39 more matches
Template Logging - Archive of obsolete content
logging template
results there are two main ways in which template errors may be detected.
... the first debugging method involves logging all new
results that apply to the template due to the data changing as well as logging
results that are changed or removed.
... in addition, each
result generated when the template is first created and initialized is logged.
...And 38 more matches
Introduction to using XPath in JavaScript - XPath
document.evaluate this method evaluates xpath expressions against an xml based document (including html documents), and returns a xpath
result object, which can be a single node or a set of nodes.
... var xpath
result = document.evaluate( xpathexpression, contextnode, namespaceresolver,
resulttype,
result ); parameters the evaluate function takes a total of five parameters: xpathexpression: a string containing the xpath expression to be evaluated.
...note that, if the xpathexpression contains a namespace prefix, this will
result in a domexception being thrown with the code namespace_err.
...And 38 more matches
Bytecode Descriptions
the
result is always a string that depends on the type of val.
...the
result on success is always a number.
...the
result on success is always numeric.
...And 37 more matches
nsIXULTemplateQueryProcessor
content/xul/templates/public/nsixultemplatequeryprocessor.idlscriptable a query processor takes a template query and generates
results for it given a datasource and a reference point.
... 1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) a query processor takes a template query and generates
results for it given a datasource and a reference point.
...the query is expected to consist of either text or dom nodes that, when executed by a call to the generate
results() method, will allow the generation of a list of
results.
...And 37 more matches
WebIDL bindings
returning null from getparentobject is allowed in situations in which it's ok to associate the
resulting object with a random global object for security purposes; this is not usually ok for things that are exposed to web content.
...in addition to those, all methods that are allowed to throw will get an error
result& argument appended to their argument list.
... something); void doyetanotherthing(optional boolean actuallydoit = false); static void staticoperation(any arg); }; will require these method declarations: class myclass { void dosomething(int32_t anumber); double dosomething(myclass* aotherinstance); already_addrefed<myinterface> dosomethingelse(optional<int32_t> amaybenumber, error
result& rv); void dosomethingelse(myclass& aotherinstance, error
result& rv); void dotheother(jscontext* cx, js::value asomething); void doyetanotherthing(bool aactuallydoit); static void staticoperation(const globalobject& aglobal, js::value asomething); } c++ reflections of webidl attributes a webidl attribute is turned into a pair of method calls for the getter and setter on the underlyi...
...And 35 more matches
IAccessibleTable
method overview [propget] h
result accessibleat([in] long row, [in] long column, [out] iunknown accessible ); [propget] h
result caption([out] iunknown accessible ); [propget] h
result childindex([in] long rowindex, [in] long columnindex, [out] long cellindex ); [propget] h
result columndescription([in] long column, [out] bstr description ); [propget] h
result columnextentat([in] long row, [in] long column, [out] long ncolumns...
...spanned ); [propget] h
result columnheader([out] iaccessibletable accessibletable, [out] long startingrowindex ); [propget] h
result columnindex([in] long cellindex, [out] long columnindex ); [propget] h
result iscolumnselected([in] long column, [out] boolean isselected ); [propget] h
result isrowselected([in] long row, [out] boolean isselected ); [propget] h
result isselected([in] long row, [in] long column, [out] boolean isselected ); [propget] h
result modelchange([out] ia2tablemodelchange modelchange ); [propget] h
result ncolumns([out] long columncount ); [propget] h
result nrows([out] long rowcount ); [propget] h
result nselectedchildren([out] long cellcount ); [propget] h
result nselectedcolumns([out] long columncount ); [propget] h
result nselectedrows([out] long rowcount ); ...
... [propget] h
result rowcolumnextentsatindex([in] long index, [out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] h
result rowdescription([in] long row, [out] bstr description ); [propget] h
result rowextentat([in] long row, [in] long column, [out] long nrowsspanned ); [propget] h
result rowheader([out] iaccessibletable accessibletable, [out] long startingcolumnindex ); [propget] h
result rowindex([in] long cellindex, [out] long rowindex ); h
result selectcolumn([in] long column ); [propget] h
result selectedchildren([in] long maxchildren, [out, size_is(,maxchildren), length_is(, nchildren)] long children, [out] long nchildren ); [propget] h
result selectedcolumns([in] long maxcolumns, [out, size_is(,maxcolumns), length_i...
...And 32 more matches
Textbox (XPFE autocomplete) - Archive of obsolete content
the autocomplete functionality is handled through one of more session objects, each of which can return a set of
results given the current value of the textbox.
...tributes accesskey, alwaysopenpopup, autocompletesearch, autocompletesearchparam, autofill, autofillaftermatch, autofill, completedefaultindex, crop, disableautocomplete, disableautocomplete, disabled, disablehistory, enablehistory, focused, forcecomplete, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, min
resultsforpopup, min
resultsforpopup, nomatch, onchange, onerrorcommand, oninput, onsearchcomplete, ontextcommand, ontextentered, ontextrevert, ontextreverted, open, readonly, searchsessions, showcommentcolumn, showcommentcolumn, showpopup, size, tabindex, tabscrolling, tabscrolling, timeout, type, useraction, value properties accessible, alwaysopenpopup, autofill, autofillaftermatch, com...
...pletedefaultindex, crop, disableautocomplete, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputfield, issearching, iswaiting, label, maxlength, maxrows, min
resultsforpopup, nomatch, open, popup, popupopen,
resultspopup, searchcount, searchparam, searchsessions, selectionend, selectionstart, sessioncount, showcommentcolumn, showpopup, size, tabindex, tabscrolling, textlength, textvalue, timeout, type, useraction, value methods addsession, clear
results, getdefaultsession, get
resultat, get
resultcount, get
resultvalueat, getsession, getsessionbyname, getsession
resultat, getsessionstatusat, getsessionvalueat, removesession, select, setselectionrange, syncsessions examples (example needed) attributes accesskey type: character thi...
...And 29 more matches
Index - Archive of obsolete content
196 min
resultsforpopup xul attributes, xul reference no summary!
... 373 textbox.min
resultsforpopup no summary!
...developers have been doing this for some time, but the
resulting controls were never as accessible as similar controls in desktop applications.
...And 27 more matches
Modularization techniques - Archive of obsolete content
the caller passes in an id and a pointer to a address to place the
resulting interface.
...both addref() and release() return the
resulting reference count.
... /* * the nsisupports interface */ class nsisupports { public: ns_imethod queryinterface(const nsiid &aiid, void **a
result) = 0; ns_imethod_(nsrefcnt) addref(void) = 0; ns_imethod_(nsrefcnt) release(void) = 0; }; the ns_imethod and ns_imethod_(type) macros are basically shorthand for virtual ns
result and virtualtype.
...And 26 more matches
nsINavHistoryQueryOptions
excludequeries boolean set to true to exclude queries ("place:" uris) from the query
results.
... excludereadonlyfolders boolean set to true to exclude read-only folders from the query
results.
...it only affects cases where the actual folder
result node would appear in its parent folder and filters it out.
...And 25 more matches
Index
id is the
result of a successful call to propertyspecnametopermanentid(cx, fs->name, &id).
...the
resulting jsid, on success, is either an interned string or a well-known symbol; either way it is immune to gc so there is no need to visit *idp during gc marking..
...if v is a string, number, boolean, or undefined, the
result is false.
...And 24 more matches
Document.evaluate() - Web APIs
returns an xpath
result based on an xpath expression and other given parameters.
... syntax var xpath
result = document.evaluate( xpathexpression, contextnode, namespaceresolver,
resulttype,
result ); xpathexpression is a string representing the xpath to be evaluated.
...
resulttype is an integer that corresponds to the type of
result xpath
result to return.
...And 24 more matches
IAccessibleText
method overview h
result addselection([in] long startoffset, [in] long endoffset ); [propget] h
result attributes([in] long offset, [out] long startoffset, [out] long endoffset, [out] bstr textattributes ); [propget] h
result caretoffset([out] long offset ); [propget] h
result characterextents([in] long offset, [in] enum ia2coordinatetype coordtype, [out] long x, [out] long y, [out] long width, [out] long height ); ...
...[propget] h
result ncharacters([out] long ncharacters ); [propget] h
result newtext([out] ia2textsegment newtext ); [propget] h
result nselections([out] long nselections ); [propget] h
result offsetatpoint([in] long x, [in] long y, [in] enum ia2coordinatetype coordtype, [out] long offset ); [propget] h
result oldtext([out] ia2textsegment oldtext ); h
result removeselection([in] long selectionindex ); h
result scrollsubstringto([in] long startindex, [in] long endindex, [in] enum ia2scrolltype scrolltype ); h
result scrollsubstringtopoint([in] long startindex, [in] long endindex, [in] enum ia2coordinatetype coordinatetype, [in] long x, [in] long y ); [propget] h
result selection([in] long selectionindex, [out] long startoffset, [out] long endoffset ); h
result setcaretoffset([in] long offs...
...et ); h
result setselection([in] long selectionindex, [in] long startoffset, [in] long endoffset ); [propget] h
result text([in] long startoffset, [in] long endoffset, [out] bstr text ); [propget] h
result textafteroffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); [propget] h
result textatoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); [propget] h
result textbeforeoffset([in] long offset, [in] enum ia2textboundarytype boundarytype, [out] long startoffset, [out] long endoffset, [out] bstr text ); methods addselection() adds a text() selection().
...And 22 more matches
Mozilla internal string guide
as a
result, you cannot assign a 8-bit string to a 16-bit string without some kind of conversion helper class or routine.
...for example: // when passing a string to a method, use const nsastring& nsfoo::printstring(const nsastring &str); // when getting a string from a method, use nsastring& nsfoo::getstring(nsastring &
result); the abstract classes are also sometimes used to store temporary references to objects.
... cache-friendly means that the zero terminator for c compatibility is written after the new content of the string has been written, so the
result is a forward-only linear write access pattern instead of a non-linear back-and-forth sequence
resulting from using setlength() followed by beginwriting().
...And 20 more matches
IAccessibleTable2
method overview [propget] h
result caption([out] iunknown accessible ); [propget] h
result cellat([in] long row, [in] long column, [out] iunknown cell ); [propget] h
result columndescription([in] long column, [out] bstr description ); [propget] h
result iscolumnselected([in] long column, [out] boolean isselected ); [propget] h
result isrowselected([in] long row, [out] boolean isselected ); [propget] h
result modelchange([out]...
... ia2tablemodelchange modelchange ); [propget] h
result ncolumns([out] long columncount ); [propget] h
result nrows([out] long rowcount ); [propget] h
result nselectedcells([out] long cellcount ); [propget] h
result nselectedcolumns([out] long columncount ); [propget] h
result nselectedrows([out] long rowcount ); [propget] h
result rowdescription([in] long row, [out] bstr description ); h
result selectcolumn([in] long column ); [propget] h
result selectedcells([out, size_is(, nselectedcells,)] iunknown cells, [out] long nselectedcells ); [propget] h
result selectedcolumns([out, size_is(, ncolumns)] long selectedcolumns, [out] long ncolumns ); [propget] h
result selectedrows([out, size_is(, nrows)] long selectedrows, [out] long nrows ); h
result selectrow([in] long row ); [propget] hr...
...esult summary([out] iunknown accessible ); h
result unselectcolumn([in] long column ); h
result unselectrow([in] long row ); methods caption() returns the caption for the table.
...And 20 more matches
Actions - Archive of obsolete content
this content will be copied for each matching
result (though see below for an exception) and inserted into the document.
...in this case, a button will be created for each
result.
... there are three
results, so three buttons will be created.
...And 18 more matches
RDF Modifications - Archive of obsolete content
« previousnext » one of the most useful aspects of using templates with rdf datasources is that when the rdf datasource changes, for instance a new triple is added, or a triple is removed, the template updates accordingly, adding or removing
result output as needed.
...if the output would change, the builder will need to adjust the output, either by adding a new
result, removing an old
result, or by changing the value of some part of the
result.
...assuming that the 'obelisk' photo doesn't have a description already, adding the triple listed above should cause a new
result to be available for this photo.
...And 18 more matches
IAccessible2
1.0 66 introduced gecko 1.9 inherits from: iaccessible last changed in gecko 1.9 (firefox 3) method overview [propget] h
result attributes([out] bstr attributes ); [propget] h
result extendedrole([out] bstr extendedrole ); [propget] h
result extendedstates([in] long maxextendedstates, [out, size_is(,maxextendedstates), length_is(, nextendedstates)] bstr extendedstates, [out] long nextendedstates ); [propget] h
result groupposition([out] long grouplevel, [out] long similaritemsingroup, [out] long positioningroup ); [propget] h
result indexinparent([out] long indexinparent ); [propget] h
result locale([out] ia2locale locale ); [propget] h
result localizedextendedrole([ou...
...t] bstr localizedextendedrole ); [propget] h
result localizedextendedstates([in] long maxlocalizedextendedstates, [out, size_is(,maxlocalizedextendedstates), length_is(, nlocalizedextendedstates)] bstr localizedextendedstates, [out] long nlocalizedextendedstates ); [propget] h
result nextendedstates([out] long nextendedstates ); [propget] h
result nrelations([out] long nrelations ); [propget] h
result relation([in] long relationindex, [out] iaccessiblerelation relation ); [propget] h
result relations([in] long maxrelations, [out, size_is(maxrelations), length_is( nrelations)] iaccessiblerelation relations, [out] long nrelations ); h
result role([out] long role ); h
result scrollto([in] enum ia2scrolltype scrolltype ); h
result scrolltopoint([in] enum ia2coordinatetype coordinatetype, [in...
...] long x, [in] long y ); [propget] h
result states([out] accessiblestates states ); [propget] h
result uniqueid([out] long uniqueid ); [propget] h
result windowhandle([out] hwnd windowhandle ); methods attributes() returns the attributes specific to this iaccessible2 object, such as a cell's formula.
...And 18 more matches
Reference Manual
ns
result rv; nscomptr<nsifoo> foo = ...; // ...
... don't qi qi addref t*, dont_queryinterface(t*) do_queryinterface(nsisupports*), do_queryinterface(nsisupports*, ns
result*) do_queryreferent(nsiweakreference*), do_queryreferent(nsiweakreference*, ns
result*) don't addref dont_addref(t*), getter_addrefs(t*) n/a e.g., one of the possibilities for assigning into an nscomptr, but you don't want to addref the pointer you are assigning (because it has already been addrefed for ...
...nscomptr<t> = do_queryinterface( nsisupports* ), nscomptr<t> = do_queryinterface( nsisupports*, ns
result* ) if you can't satisfy the above promise, you can `annotate' the assignment to tell the nscomptr it needs to call queryinterface, e.g., nscomptr<nsifoo> foo( do_queryinterface(abarptr) ); // or foo = do_queryinterface(abarptr); // ..._will_ call |queryinterface| (and therefore, |addref|) // of course, since you're calling |queryinterface|, you might need the // e...
...And 18 more matches
How to implement a custom autocomplete search component
implement the list of matched strings using the nsiautocomplete
result interface.
... const ci = components.interfaces; const cu = components.utils; cu.import('resource://gre/modules/xpcomutils.jsm'); const class_id = components.id('x753d830-ba1e-11e0-962b-0800200c9a66'); // ← change this const class_name = "basic autocomplete"; const contract_id = '@mozilla.org/autocomplete/search;1?name=basic-autocomplete'; /** * @constructor * * @implements {nsiautocomplete
result} * * @param {string} searchstring * @param {number} search
result * @param {number} defaultindex * @param {string} errordescription * @param {array.<string>}
results * @param {array.<string>|null=} comments */ function providerautocomplete
result(searchstring, search
result, defaultindex, errordescription,
results, comments) { this._searchstring = searchstring; this._search
result = sea...
...rch
result; this._defaultindex = defaultindex; this._errordescription = errordescription; this._
results =
results; this._comments = comments; } providerautocomplete
result.prototype = { _searchstring: "", _search
result: 0, _defaultindex: 0, _errordescription: "", _
results: [], _comments: [], /** * @return {string} the original search string */ get searchstring() { return this._searchstring; }, /** * @return {number} the
result code of this
result object, either: *
result_ignored (invalid searchstring) *
result_failure (failure) *
result_nomatch (no matches found) *
result_success (matches found) */ get search
result() { return this._search
result; }, /** * @return {number} the index of the default item that shou...
...And 17 more matches
Web video codec guide - Web media technologies
the simplest guideline is this: anything that makes the encoded video look more like the original, uncompressed, video will generally make the
resulting data larger as well.
...in some situations, a greater sacrifice of quality in order to bring down the data size is worth that lost quality; other times, the loss of quality is unacceptable and it's necessary to accept a codec configuration that
results in a correspondingly larger file.
... depending on the codec, higher color depths may
result in larger compressed file sizes.
...And 17 more matches
Understanding WebAssembly text format - WebAssembly
it is worth noting here that: the absence of a (
result) means the function doesn’t return anything.
... each parameter has a type explicitly declared; wasm currently has four available number types (plus reference types; see the reference types) section below): i32: 32-bit integer i64: 64-bit integer f32: 32-bit float f64: 64-bit float a single parameter is written (param i32) and the return type is written (
result i32), hence a binary function that takes two 32-bit integers and returns a 64-bit float would be written like this: (func (param i32) (param i32) (
result f64) ...
... for example, local.get is defined to push the value of the local it read onto the stack, and i32.add pops two i32 values (it implicitly grabs the previous two values pushed onto the stack), computes their sum (modulo 2^32) and pushes the
resulting i32 value.
...And 17 more matches
Multiple Rules - Archive of obsolete content
only those
results that match the conditions have content generated for them.
... for each
result, the conditions associated with each rule are examined to see if they match.
... the first rule that matches causes content to be generated for that
result.
...And 15 more matches
Places utilities for JavaScript
placesutils method overview nsiuri createfixeduri(string aspec); string getformattedstring(string key, string params); string getstring(string key); boolean nodeisfolder(nsinavhistory
resultnode anode); boolean nodeisbookmark(nsinavhistory
resultnode anode); boolean nodeisseparator(nsinavhistory
resultnode anode); boolean nodeisvisit(nsinavhistory
resultnode anode); boolean nodeisuri(nsinavhistory
resultnode anode); boolean nodeisquery(nsinavhistory
resultnode anode); boolean nodeisreadonly(nsinavhistory
resultnode anode); bool...
...ean nodeishost(nsinavhistory
resultnode anode); boolean nodeiscontainer(nsinavhistory
resultnode anode); boolean nodeisdynamiccontainer(nsinavhistory
resultnode anode); boolean nodeislivemarkcontainer(nsinavhistory
resultnode anode); obsolete since gecko 21 boolean nodeislivemarkitem(nsinavhistory
resultnode anode); obsolete since gecko 21 boolean isreadonlyfolder(nsinavhistory
resultnode anode); int getindexofnode(nsinavhistory
resultnode anode); string wrapnode(nsinavhistory
resultnode anode, string atype, nsiuri aoverrideuri); array unwrapnodes(string blob, string atype); nsitransaction maketransaction(string data, string type, nsinavhistory
resultnode container, int index, boolean copy); nsinavhistoryre...
...ionsforuri(nsiuri auri); array object getannotationsforitem(int aitemid); void setannotationsforuri(nsiuri auri, object aannos); void setannotationsforuri(int aitemid, object aannos); getviewfornode(nsidomnode anode); void markpageastyped(string aurl); void markpageasfollowedbookmark(string aurl); boolean checkurlsecurity(nsinavhistory
resultnode aurinode); string getquerystringforfolder(int afolderid); string getdescriptionfromdocument(nsidomdocument doc); string setpostdataforbookmark(int aboomarkid, string apostdata); string getpostdataforbookmark(int aboomarkid); array string geturlandpostdataforkeyword(string akeyword); string getitemdescription(int aitemid); nsinavhi...
...And 15 more matches
JXON - Archive of obsolete content
p://www.gnu.org/licenses/gpl-3.0-standalone.html |*| \*/ function parsetext (svalue) { if (/^\s*$/.test(svalue)) { return null; } if (/^(?:true|false)$/i.test(svalue)) { return svalue.tolowercase() === "true"; } if (isfinite(svalue)) { return parsefloat(svalue); } if (isfinite(date.parse(svalue))) { return new date(svalue); } return svalue; } function getjxontree (oxmlparent) { var v
result = /* put here the default value for empty nodes!
... */ true, nlength = 0, scollectedtxt = ""; if (oxmlparent.hasattributes && oxmlparent.hasattributes()) { v
result = {}; for (nlength; nlength < oxmlparent.attributes.length; nlength++) { oattrib = oxmlparent.attributes.item(nlength); v
result["@" + oattrib.name.tolowercase()] = parsetext(oattrib.value.trim()); } } if (oxmlparent.haschildnodes()) { for (var onode, sprop, vcontent, nitem = 0; nitem < oxmlparent.childnodes.length; nitem++) { onode = oxmlparent.childnodes.item(nitem); if (onode.nodetype === 4) { scollectedtxt += onode.nodevalue; } /* nodetype is "cdatasection" (4) */ else if (onode.nodetype === 3) { scollectedtxt += onode.nodevalue.trim(); } /* nodetype is "text" (3) */ else if (onode.nodetype === 1 && !onode.prefix) { /* nodet...
...ype is "element" (1) */ if (nlength === 0) { v
result = {}; } sprop = onode.nodename.tolowercase(); vcontent = getjxontree(onode); if (v
result.hasownproperty(sprop)) { if (v
result[sprop].constructor !== array) { v
result[sprop] = [v
result[sprop]]; } v
result[sprop].push(vcontent); } else { v
result[sprop] = vcontent; nlength++; } } } } if (scollectedtxt) { nlength > 0 ?
...And 14 more matches
A guide to searching crash reports
grouping you can cluster the
results of each search into groups using the same criteria.
... the default search: signature facet if you click on the "search" button, you will get
results like the ones in the following screenshot.
...("facet" is a term that means "group".) in these
results, the found crash reports are grouped according to crash signature and ranked by group size.
...And 14 more matches
nsIPlacesView
method overview nsinavhistory
resultnode[] getdragableselection(); nsinavhistory
resultnode[][] getremovableselectionranges(); nsinavhistory
result get
result(); nsinavhistorycontainer
resultnode get
resultnode(); nsinavhistory
resultnode[] getselectionnodes(); void selectall(); attributes attribute type description hasselection boolean whether or not there...
... selectednode nsinavhistory
resultnode the selected node in the view.
... methods getdragableselection() returns an array of selected nsinavhistory
resultnode objects that can be dragged from the view.
...And 14 more matches
textbox (Toolkit autocomplete) - Archive of obsolete content
attributes accesskey, autocompletepopup, autocompletesearch, autocompletesearchparam, completedefaultindex, completeselectedindex,crop, disableautocomplete, disabled, disablekeynavigation, enablehistory, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching, inputtooltiptext, label, maxlength, maxrows, min
resultsforpopup, nomatch, onchange, oninput, onsearchcomplete, ontextentered, ontextreverted, open, readonly,showcommentcolumn, showimagecolumn, size, tabindex, tabscrolling, timeout, type, value properties accessibletype, completedefaultindex, controller, crop, disableautocomplete, disablekeynavigation, disabled, editable, focused, forcecomplete, highlightnonmatches, ignoreblurwhilesearching,...
... inputfield, label, maxlength, maxrows, min
resultsforpopup, open, popup, popupopen, searchcount, searchparam, selectionend, selectionstart, showcommentcolumn, showimagecolumn,size, tabindex, tabscrolling, textlength, textvalue, timeout, type, value methods getsearchat, onsearchcomplete, ontextentered, ontextreverted, select, setselectionrange examples <textbox type="autocomplete" autocompletesearch="history"/> attributes accesskey type: character this should be set to a character that is used as a shortcut key.
... autocompletepopup type: id the id of a popup element used to hold autocomplete
results for the element.
...And 13 more matches
Test your skills: Math - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the
results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...you will have to create four numeric values, then add the first two together, then subtract the fourth from the third, then multiply the two secondary
results together to get a
result of 48.
... add the first two variables together and store the
result in another variable.
...And 13 more matches
Assert.jsm
let assert = new assert(reporterfunc); the new assert instance, assert, uses reporterfunc to report assertion
results or throws an assertionerror when an assertion fails, as default behavior.
... undefined ok( actual, message ); parameters actual test subject to be evaluated as truthy message short explanation of the expected
result equal() the equality assertion tests shallow, coercive equality with ==.
... undefined equal( actual, expected, message ); parameters actual test subject to be evaluated as equivalent to expected expected test reference to evaluate against actual message short explanation of the expected
result notequal() the non-equality assertion tests for whether two objects are not equal with !=.
...And 13 more matches
Starting WebLock
you can then use the service manager to add the component to the category: ns
result rv; nscomptr<nsiservicemanager> servman = do_queryinterface((nsisupports*)acompmgr, &rv); if (ns_failed(rv)) return rv; do_queryinterface the previous code uses the special nscomptr function do_queryinterface that lets you queryinterface without having to worry about reference counting, error handling, and other overhead.
...ect, const char *atopic, const prunichar *adata) { return ns_ok; } static ns_method weblockregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, const char *componenttype, const nsmodulecomponentinfo *info) { ns
result rv; nscomptr<nsiservicemanager> servman = do_queryinterface((nsisupports*)acompmgr, &rv); if (ns_failed(rv)) return rv; nscomptr<nsicategorymanager> catman; rv = servman->getservicebycontractid(ns_categorymanager_contractid, ns_get_iid(nsicategorymanager), getter_addrefs(catman)); if (ns_failed(rv)) ...
... pr_true, &previous); if (previous) nsmemory::free(previous); return rv; } static ns_method weblockunregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, const nsmodulecomponentinfo *info) { ns
result rv; nscomptr<nsiservicemanager> servman = do_queryinterface((nsisupports*)acompmgr, &rv); if (ns_failed(rv)) return rv; nscomptr<nsicategorymanager> catman; rv = servman->getservicebycontractid(ns_categorymanager_contractid, ns_get_iid(nsicategorymanager), getter_addrefs(catman)); if (ns_failed(rv)) ...
...And 13 more matches
A first splash into JavaScript - Learn web development
w you how to build up the simple game you can see below: top hidden code <!doctype html> <html> <head> <meta charset="utf-8"> <title>number guessing game</title> <style> html { font-family: sans-serif; } body { width: 50%; max-width: 800px; min-width: 480px; margin: 0 auto; } .last
result { color: white; padding: 3px; } </style> </head> <body> <h1>number guessing game</h1> <p>we have selected a random number between 1 and 100.
...we'll tell you if your guess was too high or too low.</p> <div class="form"> <label for="guessfield">enter a guess: </label><input type="text" id="guessfield" class="guessfield"> <input type="submit" value="submit guess" class="guesssubmit"> </div> <div class="
resultparas"> <p class="guesses"></p> <p class="last
result"></p> <p class="loworhi"></p> </div> <script> // your javascript goes here let randomnumber = math.floor(math.random() * 100) + 1; const guesses = document.queryselector('.guesses'); const last
result = document.queryselector('.last
result'); const loworhi = document.queryselector('.loworhi'); const guesssubmit = document.queryselector('.guesssubmit'); const guessfield = doc...
...ument.queryselector('.guessfield'); let guesscount = 1; let resetbutton; function checkguess() { let userguess = number(guessfield.value); if (guesscount === 1) { guesses.textcontent = 'previous guesses: '; } guesses.textcontent += userguess + ' '; if (userguess === randomnumber) { last
result.textcontent = 'congratulations!
...And 12 more matches
Places Developer Guide
var history = cc["@mozilla.org/browser/nav-history-service;1"] .getservice(ci.nsinavhistoryservice); var query = history.getnewquery(); query.setfolders([myfolderid], 1); var
result = history.executequery(query, history.getnewqueryoptions()); // the root property of a query
result is an object representing the folder you specified above.
... var foldernode =
result.root; // open the folder, and iterate over its contents.
... if (type == ci.nsinavhistory
resultnode.
result_type_uri) { var uri = childnode.uri; } else if (type == ci.nsinavhistory
resultnode.
result_type_folder) { childnode.queryinterface(ci.nsinavhistorycontainer
resultnode); childnode.containeropen = true; // now you can iterate over a subfolder's children } } ther available node types are documented in the idl.
...And 12 more matches
Using Web Workers - Web APIs
the numbers are sent to a dedicated worker, multiplied together, and the
result is returned to the page and displayed.
... in the worker, we can respond when the message is received by writing an event handler block like this (worker.js): onmessage = function(e) { console.log('message received from main script'); var worker
result = '
result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(worker
result); } the onmessage handler allows us to run some code whenever a message is received, with the message itself being available in the message event's data attribute.
... here we simply multiply together the two numbers then use postmessage() again, to post the
result back to the main thread.
...And 12 more matches
Space Manager Detailed Design - Archive of obsolete content
the 'count' member of the band data struct * indicates how large the array of trapezoids needs to be */ ns
result getbanddata(nscoord ayoffset, const nssize& amaxsize, nsbanddata& abanddata) const; /** * add a rectangular region of unavailable space.
...must not be null * @param aunavailablespace the bounding rect of the unavailable space * @return ns_ok if successful * ns_error_failure if there is already a region tagged with aframe */ ns
result addrectregion(nsiframe* aframe, const nsrect& aunavailablespace); /** * resize the rectangular region associated with aframe by the specified * deltas.
...you specify whether the width change applies to the left or right edge * * returns ns_ok if successful, ns_error_invalid_arg if there is no region * tagged with aframe */ enum affectededge {leftedge, rightedge}; ns
result resizerectregion(nsiframe* aframe, nscoord adeltawidth, nscoord adeltaheight, affectededge aedge = rightedge); /** * offset the region associated with aframe by the specified amount.
...And 11 more matches
Graceful asynchronous programming with Promises - Learn web development
essentially, a promise is an object that represents an intermediate state of an operation — in effect, a promise that a
result of some kind will be returned at some point in the future.
... there is no guarantee of exactly when the operation will complete and the
result will be returned, but there is a guarantee that when the
result is available, or the promise fails, the code you provide will be executed in order to do something else with a successful
result, or to gracefully handle a failure case.
... generally, you are less interested in the amount of time an async operation will take to return its
result (unless of course, it takes far too long!), and more interested in being able to respond to it being returned, whenever that is.
...And 11 more matches
Third-party APIs - Learn web development
get the api key from the
resulting page.
... the app will end up allowing you to type in a search term and optional start and end dates, which it will then use to query the article search api and display the search
results.
... searchform.addeventlistener('submit', submitsearch); now add the submitsearch() and fetch
results() function definitions, below the previous line: function submitsearch(e) { pagenumber = 0; fetch
results(e); } function fetch
results(e) { // use preventdefault() to stop the form submitting e.preventdefault(); // assemble the full url url = baseurl + '?api-key=' + key + '&page=' + pagenumber + '&q=' + searchterm.value + '&fq=document_type:("article")'; if(startdate.value !== ...
...And 11 more matches
Useful string methods - Learn web development
when you create a string, for example by using let string = 'this is my string'; your variable becomes a string object instance, and as a
result has a large number of properties and methods available to it.
... try this: browsertype.indexof('zilla'); this gives us a
result of 2, because the substring "zilla" starts at position 2 (0, 1, 2 — so 3 characters in) inside "mozilla".
...try the following: browsertype.indexof('vanilla'); this should give you a
result of -1 — this is returned when the substring, in this case 'vanilla', is not found in the main string.
...And 11 more matches
Gecko info for Windows accessibility vendors
the
results are always returned via vt_dispatch.
...get to the isimpledomnode interface for an object, you start with an iaccessible*, and then you queryservice to the isimpledomnode*: iserviceprovider *pservprov = null; paccessible->queryinterface(iid_iserviceprovider, (void**)&pservprov); isimpledomnode *psimpledomnode; if (pservprov) { const guid refguid = {0x0c539790, 0x12e4, 0x11cf, 0xb6, 0x61, 0x00, 0xaa, 0x00, 0x4c, 0xd6, 0xd8}; h
result result = pservprov->queryservice(refguid, iid_isimpledomnode, (void**)&psimpledomnode); if (succeeded(h
result) && psimpledomnode != null) { /* this is a mozilla node!
... h
result get_nodeinfo( /* [out] */ bstr *nodename, // for elements, this is the tag name /* [out] */ short *namespaceid, /* [out] */ bstr *nodevalue, /* [out] */ unsigned int *numchildren, /* [out] */ unsigned int *uniqueid, // see description of unique id's in above section on events /* [out] */ unsigned short *nodetype); the get_at...
...And 11 more matches
Creating the Component Code
ns
result nsgetmodule(nsicomponentmanager *servmgr, nsifile* location, nsimodule**
result); xpcom expects a successful call to nsgetmodule to return an implementation of the interface nsimodule.
...the code to register such an object is simple: ns_imethodimp samplemodule::registerself(nsicomponentmanager *acompmgr, nsifile* apath, const char* registrylocation, const char* componenttype) { printf("hello mozilla registration!\n\n"); nsicomponentregistrar* compreg = nsnull; ns
result rv = acompmgr->queryinterface(kicomponentregistrariid,(void**)& compreg); if (ns_failed(rv)) return rv; rv = compreg->registerfactorylocation(ksamplecid, "sample class", nsnull, apath, registrylocation, ...
...the implementation of createinstance will ensure that the
result will support the passed iid, kisupportsiid.
...And 11 more matches
nsITransactionListener
inherits from: nsisupports last changed in gecko 1.7 method overview void didbeginbatch(in nsitransactionmanager amanager, in ns
result a
result); void diddo(in nsitransactionmanager amanager, in nsitransaction atransaction, in ns
result ado
result); void didendbatch(in nsitransactionmanager amanager, in ns
result a
result); void didmerge(in nsitransactionmanager amanager, in nsitransaction atoptransaction, in nsitransaction atransactiontomerge, in boolean adidmerge, in ns
result amerge
result); void didredo(in nsitransactionmanager amanager, in nsitransaction atransaction, in ns
result aredo
result); void didundo(in nsitransactionmanager amanager, in nsit...
...ransaction atransaction, in ns
result aundo
result); boolean willbeginbatch(in nsitransactionmanager amanager); boolean willdo(in nsitransactionmanager amanager, in nsitransaction atransaction); boolean willendbatch(in nsitransactionmanager amanager); boolean willmerge(in nsitransactionmanager amanager, in nsitransaction atoptransaction, in nsitransaction atransactiontomerge); boolean willredo(in nsitransactionmanager amanager, in nsitransaction atransaction); boolean willundo(in nsitransactionmanager amanager, in nsitransaction atransaction); methods didbeginbatch() called after a nsitransactionmanager begins a batch.
... void didbeginbatch( in nsitransactionmanager amanager, in ns
result a
result ); parameters amanager the nsitransactionmanager that began a batch.
...And 11 more matches
Using the Web Speech API - Web APIs
speech recognition speech recognition involves receiving speech through a device's microphone, which is then checked by a speech recognition service against a list of grammar (basically, the vocabulary you want to have recognised in a particular app.) when a word or phrase is successfully recognised, it is returned as a
result (or list of
results) as a text string, and further actions can be initiated as a
result.
... the web speech api has a main controller interface for this — speechrecognition — plus a number of closely-related interfaces for representing grammar,
results, etc.
...we also set a few other properties of the recognition instance before we move on: speechrecognition.continuous: controls whether continuous
results are captured (true), or just a single
result each time recognition is started (false).
...And 11 more matches
Using Promises - JavaScript
here's some code that uses createaudiofileasync(): function successcallback(
result) { console.log("audio file ready at url: " +
result); } function failurecallback(error) { console.error("error generating audio file: " + error); } createaudiofileasync(audiosettings, successcallback, failurecallback); modern functions return a promise that you can attach your callbacks to instead: if createaudiofileasync() were rewritten to return a promise, using it could be as simple ...
... chaining a common need is to execute two or more asynchronous operations back to back, where each subsequent operation starts when the previous operation succeeds, with the
result from the previous step.
... in the old days, doing several asynchronous operations in a row would lead to the classic callback pyramid of doom: dosomething(function(
result) { dosomethingelse(
result, function(new
result) { dothirdthing(new
result, function(final
result) { console.log('got the final
result: ' + final
result); }, failurecallback); }, failurecallback); }, failurecallback); with modern functions, we attach our callbacks to the returned promises instead, forming a promise chain: dosomething() .then(function(
result) { return dosomething...
...And 11 more matches
SVG documentation index - SVG: Scalable Vector Graphics
they let svg markup and its
resulting dom share information that standard attributes can't, usually for scripting purposes.
... 60 divisor filters, svg, svg attribute the divisor attribute specifies the value by which the
resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image color value is divided to yield the destination color value.
... 179
result needscompattable, svg, svg attribute the
result attribute defines the assigned name for this filter primitive.
...And 11 more matches
test/assert - Archive of obsolete content
parameters logger : object object used to log the
results of assertions.
... equal(actual, expected, message) tests shallow, coercive equality with ==: assert.equal(1, 1, "test that one is one"); parameters actual : object the actual
result.
... expected : object the expected
result.
...And 10 more matches
Additional Navigation - Archive of obsolete content
et.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/canal.jpg) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/obselisk.jpg) when evaluating the triple, the template builder will iterate over the three potential
results found so far.
... for the first
result, the value of the ?photo variable 'http://www.xulplanet.com/ndeakin/images/t/palace.jpg' will be used as the subject, the predicate will be 'http://purl.org/dc/elements/1.1/title', and the object will be 'canal'.
...the triple doesn't exist for the first
result since the title for the first photo is 'palace from above', so the potential
result will be removed from the data.
...And 10 more matches
Multiple Queries - Archive of obsolete content
this may be used to combine the
results from several queries together, or may be used to generate different types of
results when recursive iterations.
...the
results from the first query are generated first and output generated for it, followed by the
results and output for the second query, and so forth for all of the queries.
...it the first query was used by itself, only one
result would match.
...And 10 more matches
Vue conditional rendering: editing existing todos - Learn web development
to understand this better, it is a good idea to write out a flow chart, description, or diagram of what events are emitted where, where they are being listened for, and what happens as a
result of them firing.
...
result: addtodo() method invoked to add new todo item to the todoitems array.
...
result: updatedonestatus() method invoked to update done status of associated todo item.
...And 10 more matches
Add-on Repository
these searches are asynchronous;
results are passed to the provided searchcallback object when the search is completed.
...
results passed to the searchcallback object only include add-ons that are compatible with the current application and are not already installed or in the process of being installed.
... to import the add-on repository code module, use: components.utils.import("resource://gre/modules/addonrepository.jsm"); method overview string getrecommendedurl() string getsearchurl(in string searchterms) void cancelsearch() void retrieverecommendedaddons(in integer max
results, in searchcallback callback) void searchaddons(in string searchterms, in integer max
results, in searchcallback callback) properties property type description homepageurl string the url of the repository site's home page.
...And 10 more matches
Sqlite.jsm
sharing the memory cache likely
results in less memory utilization.
... when onrow is not defined, the full
results of the operation are buffered before the caller is notified of statement completion.
...if your select statement could return lots of data, this buffering of returned rows could
result in excessive memory usage.
...And 10 more matches
Storage
this can
result in significantly higher overhead file operation.
... no
results to be returned if you do not need to get any
results back, you can use mozistorageconnection.executesimplesql() api like this in javascript: dbconn.executesimplesql("create temp table table_name (column_name integer)"); similarly, the c++ looks like this: rv = mdbconn->executesimplesql(ns_literal_cstring("create temp table table_name (column_name integer)")); ns_ensure_success(rv, rv); res...
...ults to be returned however, if you need to get
results back, you should create the statement with the mozistorageconnection.createstatement() api like this in javascript: var statement = dbconn.createstatement("select * from table_name where column_name = :parameter"); this example uses a named placeholder called "parameter" to be bound later (described in binding parameters).
...And 10 more matches
XPIDL
this list, nearly every idl file includes nsrootidl.idl in some fashion, which also defines the following types: table 2: types provided by nsrootidl.idl idl typedef c++ in parameter c++ out parameter js type notes prtime (xpidl unsigned long long typedef, 64 bits) number prtime is in microseconds, while js date assumes time in milliseconds ns
result (xpidl unsigned long typedef, 32 bits) number nsrefcnt (xpidl unsigned long typedef, 32 bits) number size_t (xpidl unsigned long typedef, 32 bits) number voidptr void* void* not allowed charptr char* char** not allowed unicharptr char16_t* char16_t** not allowed nsidref co...
... nsqi
result void* void** object should only be used with methods that act like queryinterface autf8string const nsacstring& nsacstring& string full unicode set permitted (translated to utf-8) acstring const nsacstring& nsacstring& string only chars in range \u0000-\u00ff permitted astring const nsastring& nsastring& string full unicod...
...as a
result of vtable munging by the msvc++ compiler, an attribute with the name `iid' is forbidden.
...And 10 more matches
WebGL model view projection - Web APIs
box.draw({ top : 1, // x bottom : -1, // x left : -1, // y right : 1, // y depth : -1.5, // z color : [0.4, 0.4, 1, 1] // blue }); the
results view on jsfiddle exercise a helpful exercise at this point is to move the boxes around the clip space by varying the code to get a feel for how points get clipped and moved around in clip space.
...the more operations that are done on larger numbers, the more and more errors accumulate into the
result.
... box.draw({ top : 1, // y bottom : -1, // y left : -1, // x right : 1, // x w : 1.5, // w - bring this box into range depth : -1.5, // z color : [0.4, 0.4, 1, 1] // blue }); the
results view on jsfiddle exercises play around with these values to see how it affects what is rendered on the screen.
...And 10 more matches
Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
by extension, if you and another person are standing in an empty field of solid stone with nothing else visible as far as the eye can see, if you move three meters toward the other person, the
result looks the same as if the other person had moved three meters toward you.
...if you are a camera, you can achieve the same visual
result both by moving the camera or by moving everything around the camera.
...for example, if the object is facing an object located at (3, 1, -2)—that is, three meters to the right, one meter up, and two meters away from the origin point—the
result is: [31-2]\left [ \begin{matrix} 3 \\ 1 \\ -2 \end{matrix} \right ] this can also be represented as an array: let directionvector = [3, 1, -2]; for the purposes of performing operations involving both the coordinates and the facing direction vector, the vector needs to include the w component.
...And 10 more matches
places/bookmarks - Archive of obsolete content
let { search, unsorted } = require("sdk/places/bookmarks"); // simple query with one object search( { query: "firefox" }, { sort: "title" } ).on("end", function (
results) { //
results matching any bookmark that has "firefox" // in its url, title or tag, sorted by title }); // multiple queries are or'd together search( [{ query: "firefox" }, { group: unsorted, tags: ["mozilla"] }], { sort: "title" } ).on("end", function (
results) { // our first query is the same as the simple query above; // all of those
results are also returned here.
...the second query's properties // are and'd together, so
results that are in the platform's unsorted // bookmarks folder, and are also tagged with 'mozilla', get returned // as well in this query }); globals constructors bookmark(options) creates an unsaved bookmark instance.
... updating items: for an item referenced from a previous save() or from the
result of a search() query, changing the properties and calling save() will update the item on the server.
...And 9 more matches
Using Recursive Templates - Archive of obsolete content
after the data is generated, each
result is used as the new reference point for a nested iteration of the template.
...since the initial reference node is the root of the xml source document, the
results are two elements, one for each group element.
...as each group has children itself, each
result (in this case, each group) becomes the reference point for a futher iteration.
...And 9 more matches
Client-side storage - Learn web development
most major modern web sites are dynamic — they store data on the server using some kind of database (server-side storage), then run server-side code to retrieve needed data, insert it into static page templates, and serve the
resulting html to the client to be displayed by the user's browser.
...you don't want to hang the browser while you wait for the
results, so database operations are asynchronous, meaning that instead of happening immediately, they will happen at some point in the future, and you get notified when they're done.
...this is used a lot below db = request.
result; // run the displaydata() function to display the notes already in the idb displaydata(); }; the request.onerror handler will run if the system comes back saying that the request failed.
...And 9 more matches
Mozilla DOM Hacking Guide
static ns
result wrapnative(...): xpconnect fu, not our problem.
... static ns
result throwjsexception(jscontext *cx, ns
result a
result);: help me!
... static ns
result initdomjsclass(jscontext *cx, jsobject *obj);: help me!
...And 9 more matches
IAccessibleTableCell
1.0 66 introduced gecko 1.9.2 inherits from: iunknown last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview [propget] h
result columnextent([out] long ncolumnsspanned ); [propget] h
result columnheadercells([out, size_is(, ncolumnheadercells,)] iunknown cellaccessibles, [out] long ncolumnheadercells ); [propget] h
result columnindex([out] long columnindex ); [propget] h
result isselected([out] boolean isselected ); [propget] h
result rowcolumnextents([out] long row, [out] long column, [out] long rowextents, [out] long columnextents, [out] boolean isselected ); [propget] h
result rowextent([out] lo...
...ng nrowsspanned ); [propget] h
result rowheadercells([out, size_is(, nrowheadercells,)] iunknown cellaccessibles, [out] long nrowheadercells ); [propget] h
result rowindex([out] long rowindex ); [propget] h
result table([out] iunknown table ); methods columnextent() returns the number of columns occupied by this cell accessible.
... the
result is greater than 1 if the specified cell spans multiple columns.
...And 9 more matches
nsIAnnotationService
o(in long long aitemid, in autf8string aname, out long aflags, out unsigned short aexpiration, out autf8string amimetype, out unsigned short atype); pruint16 getpageannotationtype(in nsiuri auri, in autf8string aname); pruint16 getitemannotationtype(in long long aitemid, in autf8string aname); void getpageswithannotation(in autf8string name, [optional] out unsigned long
resultcount, [retval, array, size_is(
resultcount)] out nsiuri
results); void getitemswithannotation(in autf8string name, [optional] out unsigned long
resultcount, [retval, array, size_is(
resultcount)] out long long
results); void getpageannotationnames(in nsiuri auri, [optional] out unsigned long count, [retval, array, size_is(count)] out nsivariant
result); void getitemannota...
...tionnames(in long long aitemid, [optional] out unsigned long count, [retval, array, size_is(count)] out nsivariant
result); boolean pagehasannotation(in nsiuri auri, in autf8string aname); boolean itemhasannotation(in long long aitemid, in autf8string aname); void removepageannotation(in nsiuri auri, in autf8string aname); void removeitemannotation(in long long aitemid, in autf8string aname); void removepageannotations(in nsiuri auri); void removeitemannotations(in long long aitemid); void copypageannotations(in nsiuri asourceuri, in nsiuri adesturi, in boolean aoverwritedest); void copyitemannotations(in long long asourceitemid, in long long adestitemid, in boolean aoverwritedest); void addobserver(in nsiannotation...
... void getpageswithannotation( in autf8string name, [optional] out unsigned long
resultcount, [retval, array, size_is(
resultcount)] out nsiuri
results ); parameters name the annotation name.
...And 9 more matches
nsIErrorService
xpcom/base/nsierrorservice.idlscriptable this is a service that allows ns
result codes to be mapped to string bundles that can be used to look up error messages.
... inherits from: nsisupports last changed in gecko 1.7 implemented by: @mozilla.org/xpcom/error-service;1 method overview string geterrorstringbundle(in short errormodule); string geterrorstringbundlekey(in ns
result error); void registererrorstringbundle(in short errormodule, in string stringbundleurl); void registererrorstringbundlekey(in ns
result error, in string stringbundlekey); void unregistererrorstringbundle(in short errormodule); void unregistererrorstringbundlekey(in ns
result error); methods geterrorstringbundle() retrieves a string bundle url for an error module.
...error modules are obtained from ns
result code with ns_error_get_module.
...And 9 more matches
Getting Started Guide
*/ ns_if_release(mfooptr); // error: |release| is private mfooptr = afooptr; ns_if_addref(mfooptr); // error: |addref| is private second: you can't just pass the address of an nscomptr to a getter expecting to return a
result through a raw xpcom interface pointer parameter.
... nscomptr<nsifoo> foo; ns
result rv = bar->queryinterface(ns_get_iid(nsifoo), getter_addrefs(foo)); // or, if you're a savvy xpcom programmer, // you use the type-safe version...
... ns
result rv = callqueryinterface(bar, getter_addrefs(foo)); queryinterface is used so frequently, though, that nscomptr has a special facility to call it.
...And 9 more matches
Array.prototype.map() - JavaScript
the map() method creates a new array populated with the
results of calling a provided function on every element in the calling array.
... return value a new array with each element being the
result of the callback function.
... description map calls a provided callback function once for each element in an array, in order, and constructs a new array from the
results.
...And 9 more matches
Introduction - Archive of obsolete content
next » a xul template is a means of producing a block of content for each
result from some query or query-like operation.
... a good analogy is to the
results of a database query.
... for each
result returned from the query, generate some content.
...And 8 more matches
Simple Query Syntax - Archive of obsolete content
the member data, or
results, are held in the variable represented here by '?2'.
...the 'rdf:' prefix means look up a predicate pointing out of the node for that
result (the child or member node).
...this means look up the value of the predicate http://purl.org/dc/elements/1.1/title' pointing out of the current
result.
...And 8 more matches
Setting up your own test automation environment - Learn web development
as an example, the google_test.js test we looked at above is pretty good, as it just tests a single thing — whether the title of a search
results page is set correctly.
...perhaps
results_page_title_set_correctly.js would be slightly better?
... in addition, we should mention test
results/reporting — we've been reporting
results in our above examples using simple console.log() statements, but this is all done in javascript, so you can use whatever test running and reporting system you want, be it mocha, chai, or some other tool.
...And 8 more matches
Extending a Protocol
or.echo() in your favorite editor, open dom/webidl/navigator.webidl at the end of the file, add: partial interface navigator { [throws] promise<domstring> echo(domstring astring); }; now we need to implement the echo() method in c++, so open up ./dom/base/navigator.h and let's add the method definition, so under public:: already_addrefed<promise> echo(const nsastring& astring, error
result& arv); we use nsastring& as the domstring comes in from js as utf-16.
... now let's implement the method in ./dom/base/navigator.cpp - we add a little bit of error boilerplate stuff, as is customary: already_addrefed<promise> navigator::echo(const nsastring& astring, error
result& arv) { if (!mwindow || !mwindow->getdocshell()) { arv.throw(ns_error_unexpected); return nullptr; } refptr<promise> echopromise = promise::create(mwindow->asglobal(), arv); if (ns_warn_if(arv.failed())) { return nullptr; } // message passing magic will happen here!
...and we generally want the parent to let a child know when some work is done - and send some confirmation or
result data back to the child.
...And 8 more matches
nsILocalFile
there is no defined
result if this parameter is null.
... the
result returned from this method may be used with setrelativedescriptor() to initialize a nsilocalfile instance.
... load returns the
result of pr_loadlibrary() on the file.
...And 8 more matches
nsINavHistoryService
void markpageastyped(in nsiuri auri); boolean canadduri(in nsiuri auri); long long addvisit(in nsiuri auri, in prtime atime, in nsiuri areferringuri, in long atransitiontype, in boolean aisredirect, in long long asessionid); obsolete since gecko 22.0 nsinavhistoryquery getnewquery(); nsinavhistoryqueryoptions getnewqueryoptions(); nsinavhistory
result executequery(in nsinavhistoryquery aquery, in nsinavhistoryqueryoptions options); nsinavhistory
result executequeries([array,size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void querystringtoqueries(in autf8string aquerystring, [array, size_is(a
resultcount)] out nsinavhistoryquery aqueries, out unsigned lo...
...ng a
resultcount, out nsinavhistoryqueryoptions options); autf8string queriestoquerystring([array, size_is(aquerycount)] in nsinavhistoryquery aqueries, in unsigned long aquerycount, in nsinavhistoryqueryoptions options); void addobserver(in nsinavhistoryobserver observer, in boolean ownsweak); void removeobserver(in nsinavhistoryobserver observer); void runinbatchmode(in nsinavhistorybatchcallback acallback, in nsisupports aclosure); void importhistory(in nsifile file); astring getcharsetforuri(in nsiuri auri); astring setcharsetforuri(in nsiuri auri, in astring acharset); attributes attribute type description hashistoryentries boolean true if there is any history.
...it declares that the given uri is being opened as a
result of following a bookmark.
...And 8 more matches
SVGMatrix - Web APIs
many of svg's graphics operations utilize 2x3 matrices of the form: [a c e] [b d f] which, when expanded into a 3x3 matrix for the purposes of matrix arithmetic, become: [a c e] [b d f] [0 0 1] an svgmatrix object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
...this matrix is post-multiplied by another matrix, returning the
resulting new matrix as svgmatrix.
... svgmatrix.translate() post-multiplies a translation transformation on the current matrix and returns the
resulting matrix as svgmatrix.
...And 8 more matches
Running Tamarin performance tests - Archive of obsolete content
results from the two shells will be shown side to side and the percent speedup will be shown.
...specifying ./runtests.py -i 10 will run each tests 10 time and use the fastest
result.
...the confidence rating measures the percentage of the mean 95% of the
results were within the range.
...And 7 more matches
Filtering - Archive of obsolete content
for example, you wish the user to be able to select a value from a list, and the template
results should be filtered based on that value.
...for example, the
resulting triple for the netherlands might be: <triple subject="?photo" predicate="http://www.xulplanet.com/rdf/country" object="http://www.daml.org/2001/09/countries/iso#nl"/> this triple is then appended to the query.
...this method will remove all of the existing generated content, delete all of the internal information pertaining to the
results, and start again as if the template were just being examined for the first time.
...And 7 more matches
Rule Compilation - Archive of obsolete content
this will return a table of
result records which are then used to generate output.
...the job of the query is to generate a set of output
results.
...an attribute substitution syntax, explained later, is used to modify the attributes of elements generated from the template, to correspond with the data for each
result.
...And 7 more matches
Cooperative asynchronous JavaScript: Timeouts and intervals - Learn web development
this contains the finished html structure and css styling, giving us a game board that shows the two players' information (as seen above), but with the spinner and
results paragraph displayed on top of one another.
... inside the empty <script> element on your page, start by adding the following lines of code that define some constants and variables you'll need in the rest of the code: const spinner = document.queryselector('.spinner p'); const spinnercontainer = document.queryselector('.spinner'); let rotatecount = 0; let starttime = null; let raf; const btn = document.queryselector('button'); const
result = document.queryselector('.
result'); in order, these are: a reference to the spinner, so you can animate it.
... a reference to the
results paragraph.
...And 7 more matches
Eclipse CDT
using this plugin will
result in parts of the ui described below being hidden or disabled.
...this is useful if you have maximized the editor using ctrl-m and you want to quickly see your search
results.
...this is useful if you want to keep your existing search
results open, for example, and have a new search open in a separate tab rather than overriding the contents of the existing search tab.
...And 7 more matches
Using COM from js-ctypes
#include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { ispvoice* pvoice = null; h
result hr = cocreateinstance(clsid_spvoice, null, clsctx_all, iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->speak(l"hello, firefox!", spf_default, null); pvoice->release(); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called couninitialize(); ...
... #include <sapi.h> int main(void) { if (succeeded(coinitialize(null))) { struct ispvoice* pvoice = null; h
result hr = cocreateinstance(&clsid_spvoice, null, clsctx_all, &iid_ispvoice, (void**)&pvoice); if (succeeded(hr)) { pvoice->lpvtbl->speak(pvoice, l"hello, firefox!", 0, null); pvoice->lpvtbl->release(pvoice); } } // msdn documentation says that even if coinitalize fails, counitialize // must be called ...
... getnotifyeventhandle; /* end inherit from ispnotifysource */ /* start inherit from ispeventsource */ void* setinterest; void* getevents; void* getinfo; /* end inherit from ispeventsource */ /* start ispvoice */ void* setoutput; void* getoutputobjecttoken; void* getoutputstream; void* pause; void* resume; void* setvoice; void* getvoice; h
result (__stdcall *speak)(struct myispvoice*, lpcwstr pwcs, dword dwflags, ulong* pulstreamnumber); void* speakstream; void* getstatus; void* skip; void* setpriority; void* getpriority; void* setalertboundary; void* getalertboundary; void* setrate; void* getrate; void* setvolume; void* getvolume; void* waituntildone; void...
...And 7 more matches
Using microtasks in JavaScript with queueMicrotask() - Web APIs
generally, it's about capturing or checking
results, or performing cleanup, after the main body of a javascript execution context exits, but before any event handlers, timeouts and intervals, or other callbacks are processed.
... the main reason to use microtasks is simply that: to ensure consistent ordering of tasks, even when
results or data is available synchronously, but while simultaneously reducing the risk of user-discernible delays in operations.
...consider code such as this: customelement.prototype.getdata = url => { if (this.cache[url]) { this.data = this.cache[url]; this.dispatchevent(new event("load")); } else { fetch(url).then(
result =>
result.arraybuffer()).then(data => { this.cache[url] = data; this.data = data; this.dispatchevent(new event("load")); }); } }; the problem introduced here is that by using a task in one branch of the if...else statement (in the case in which the image is available in the cache) but having promises involved in the else clause, we have a situation in which the order of o...
...And 7 more matches
IDBRequest - Web APIs
the idbrequest interface of the indexeddb api provides access to
results of asynchronous requests to databases and database objects using event handler attributes.
... the request object does not initially contain any information about the
result of the operation, but once information becomes available, an event is fired on the request, and the information becomes available through the properties of the idbrequest instance.
...when the state is set to done, every request returns a
result and an error, and an event is fired on the request.
...And 7 more matches
SpeechRecognition - Web APIs
speechrecognition.continuous controls whether continuous
results are returned for each recognition, or only a single
result.
... defaults to single (false.) speechrecognition.interim
results controls whether interim
results should be returned (true) or not (false.) interim
results are
results that are not yet final (e.g.
... the speechrecognition
result.isfinal property is false.) speechrecognition.maxalternatives sets the maximum number of speechrecognitionalternatives provided per
result.
...And 7 more matches
Web audio codec guide - Web media technologies
sample rate the more samples available per second, the higher the
resulting encoded audio fidelity is likely to be.
... sample size the larger the samples, the more detail each sample can contain,
resulting in more accurate representation of each sample.
... on size lossless compression no loss of fidelity unlikely to get more than 40-50% compression lossy compression always some loss of fidelity; the higher the compression, the more the loss compression of up to 80-95% possible quality setting the higher the quality, the better the fidelity of the encoded audio the higher the fidelity, the larger the
resulting file becomes, though the amount of change varies from codec to codec bit rate the higher the bit rate, the higher the quality can be the higher the bit rate, the larger the encoded file is likely to be audio frequency bandwidth if there is any audio in the removed frequency band(s), there may be a noticeable loss of fidelity removing frequency bands means less dat...
...And 7 more matches
Digital audio concepts - Web media technologies
to provide additional room for a low-pass filter in order to avoid distortion caused by aliasing, an additional 2.05 khz transition band is added to the pre-sampling frequency (
resulting in 22,050 hz).
... doubling that per the nyquist theorem
results in a final minimum frequency of (you guessed it) 44.1 khz.
...as a
result, audio data is difficult to compress using traditional algorithms such as those used by generral-purpose tools like zip, which usually work by replacing repeating sequences of data with a shorthand representation.
...And 7 more matches
Using Breakpoints in Venkman - Archive of obsolete content
the following options are available: continue regardless of
result causes venkman to continue normal execution after running the breakpoint script.
... stop regardless of
result causes venkman to stop execution after executing the breakpoint script, allowing you to inspect program state.
... stop if
result is true effectively makes this a conditional breakpoint.
...And 6 more matches
LiveConnect Overview - Archive of obsolete content
when programming in javascript, you can use a wrapper object to access methods and fields of the java object; calling a method or accessing a property on the wrapper
results in a call on the java object.
... values which are too large or small to be represented
result in a run-time error.
... nan can not be converted and
results in a run-time error.
...And 6 more matches
Introducing asynchronous JavaScript - Learn web development
a lot of the functionality we have looked at in previous learning area modules is synchronous — you run some code, and the
result is returned as soon as the browser can do so.
...when you fetch an image from a server, you can't return the
result immediately.
...neither of the possible outcomes have happened yet, so the fetch operation is currently waiting on the
result of the browser trying to complete the operation at some point in the future.
...And 6 more matches
Tutorial: Embedding Rhino
embedding rhino can be done simply with good
results.
... in this document: runscript: a simple embedding entering a context initializing standard objects collecting the arguments evaluating a script printing the
result exiting the context expose java apis using java apis implementing interfaces adding java objects using javascript objects from java using javascript variables calling javascript functions javascript host objects defining host objects counter example counter's constructors class name dynamic properties defining javascript ...
...all it does it read a script from the command line, execute it, and print a
result.
...And 6 more matches
Redis Tips
in standard node fashion, first return value is error or null; second return value is
result of redis command.
... redis> set foo 42 ok redis> incr foo (integer) 43 redis> incrby foo 17 (integer) 60 notice that these
results come back as numbers, not strings.
... each redis command
results in one network round trip.
...And 6 more matches
IAccessibleEditableText
if endoffset is lower than startoffset, the
result is the same as a call with the two arguments exchanged.
...method overview h
result copytext([in] long startoffset, [in] long endoffset ); h
result cuttext([in] long startoffset, [in] long endoffset ); h
result deletetext([in] long startoffset, [in] long endoffset ); h
result inserttext([in] long offset, [in] bstr text ); h
result pastetext([in] long offset ); h
result replacetext([in] long startoffset, [in] long endoffset, [in] bstr text ); h
result setattributes([in] long...
...h
result copytext( [in] long startoffset, [in] long endoffset ); parameters startoffset start index of the text to moved into the clipboard.
...And 6 more matches
nsIComponentManager
66 introduced gecko 0.7 inherits from: nsisupports last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void addbootstrappedmanifestlocation(in nsilocalfile alocation); void createinstance(in nscidref aclass, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result); void createinstancebycontractid(in string acontractid, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result); void getclassobject(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result); void getclassobjectbycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result resu...
...(see also nsifactory.createinstance.) void createinstance( in nscidref aclass, in nsisupports adelegate, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result ); parameters aclass the classid of the object instance that is being requested.
...
result the
resulting interface pointer.
...And 6 more matches
nsIIOService
this is the document/element that will get access to the
result of this request.
...the principal of the document where the
result of this request will be used.
... the element or document where the
result of this request will be used.
...And 6 more matches
nsIPluginHost
void findproxyforurl(in string aurl, out string a
result); native code only!
... void getplugintags([optional] out unsigned long aplugincount, [retval, array, size_is(aplugincount)] out nsiplugintag a
results); void handlebadplugin(in prlibraryptr alibrary, in nsiplugininstance instance); native code only!
... void useragent(in nativechar
resultingagentstring); native code only!
...And 6 more matches
nsISelectionPrivate
void getrangesforinterval(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32
resultcount, [retval, array, size_is(
resultcount)] out nsidomrange
results); void getrangesforintervalarray(in nsinode beginnode, in print32 beginoffset, in nsinode endnode, in print32 endoffset, in boolean allowadjacent, in rangearray
results); native code only!
... void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray
results); native code only!
... void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32
resultcount, [retval, array, size_is(
resultcount)] out nsidomrange
results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection.
...And 6 more matches
Applying styles and colors - Web APIs
the
resulting image should look something like the screenshot.
...ction draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); for (var i = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.fillstyle = 'rgb(' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ', 0)'; ctx.fillrect(j * 25, i * 25, 25, 25); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the
result looks like this: screenshotlive sample a strokestyle example this example is similar to the one above, but uses the strokestyle property to change the colors of the shapes' outlines.
... = 0; i < 6; i++) { for (var j = 0; j < 6; j++) { ctx.strokestyle = 'rgb(0, ' + math.floor(255 - 42.5 * i) + ', ' + math.floor(255 - 42.5 * j) + ')'; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } } <canvas id="canvas" width="150" height="150"></canvas> draw(); the
result looks like this: screenshotlive sample transparency in addition to drawing opaque shapes to the canvas, we can also draw semi-transparent (or translucent) shapes.
...And 6 more matches
XPathEvaluator.evaluate() - Web APIs
the evaluate() method of the xpathevaluator interface executes an xpath expression on the given node or document and returns an xpath
result.
... syntax xpath
result xpathevaluator.evaluate(expression, contextnode, resolver, type,
result); parameters expression a domstring representing the xpath expression to be parsed and evaluated.
... type optional specifies the type of
result to be returned by evaluating the expression.
...And 6 more matches
XPathExpression.evaluate() - Web APIs
the evaluate() method of the xpathexpression interface executes an xpath expression on the given node or document and returns an xpath
result.
... syntax xpath
result node.evaluate(contextnode, type,
result); parameters contextnode a node representing the context to use for evaluating the expression.
... type optional specifies the type of
result to be returned by evaluating the expression.
...And 6 more matches
A re-introduction to JavaScript (JS tutorial) - JavaScript
several months after that, netscape submitted javascript to ecma international, a european standards organization, which
resulted in the first edition of the ecmascript standard that year.
...unless you're certain of your string format, you can get surprising
results on those older browsers: parseint('010'); // 8 parseint('0x10'); // 16 here, we see the parseint() function treat the first string as octal due to the leading 0, and the second string as hexadecimal due to the leading "0x".
... you can also use the unary + operator to convert values to numbers: + '42'; // 42 + '010'; // 10 + '0x10'; // 16 a special value called nan (short for "not a number") is returned if the string is non-numeric: parseint('hello', 10); // nan nan is toxic: if you provide it as an operand to any mathematical operation, the
result will also be nan: nan + 5; // nan you can test for nan using the built-in isnan() function: isnan(nan); // true javascript also has the special values infinity and -infinity: 1 / 0; // infinity -1 / 0; // -infinity you can test for infinity, -infinity and nan values using the built-in isfinite() function: isfinite(1 / 0); // false isfinite(-infinity); // false isfinite(nan); // false ...
...And 6 more matches
Expressions and operators - JavaScript
that means that (x = y) returns y, (x += y) returns the
resulting sum x + y, (x **= y) returns the
resulting power x ** y, and so on.
...this behavior generally
results in comparing the operands numerically.
... the operator is applied to each pair of bits, and the
result is constructed bitwise.
...And 6 more matches
Array.prototype.every() - JavaScript
let o be the
result of calling toobject passing the this // value as the argument.
...let lenvalue be the
result of calling the get internal method // of o with the argument "length".
...let kpresent be the
result of calling the hasproperty internal // method of o with argument pk.
...And 6 more matches
async function - JavaScript
the
result of the first promise fulfilment (if it was not rejected) is returned from the await expression.
... here 1 is assigned to
result1.
...the
result of the second promise resolution is returned from the second await expression.
...And 6 more matches
places/history - Archive of obsolete content
example let { search } = require("sdk/places/history"); // simple query search( { url: "https://developers.mozilla.org/*" }, { sort: "visitcount" } ).on("end", function (
results) { //
results is an array of objects containing // data about visits to any site on developers.mozilla.org // ordered by visit count }); // complex query // the query objects are or'd together // let's say we want to retrieve all visits from before a week ago // with the query of 'ruby', but from last week onwards, we want // all
results with 'javascript' in the url or title.
...uery with the following options let lastweek = date.now - (1000*60*60*24*7); search( // first query looks for all entries before last week with 'ruby' [{ query: "ruby", to: lastweek }, // second query searches all entries after last week with 'javascript' { query: "javascript", from: lastweek }], // we want to order chronologically by visit date { sort: "date" } ).on("end", function (
results) { //
results is an array of objects containing visit data, // sorted by visit date, with all entries from more than a week ago // that contain 'ruby', *in addition to* entries from this last week // that contain 'javascript' }); globals functions search(queries, options) queries can be performed on history entries by passing in one or more query options.
...for additional queries within the query, passing more query options in will or the total
results.
...And 5 more matches
Multiple Rule Example - Archive of obsolete content
« previousnext » the most common use of multiple rules is to apply different action bodies to different
results.
... often this will be because a particular
result has a property that others do not.
...the
resulting data will be: (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?title = palace from above ?description = view from the top of the tower looking east of the doges palace, ?date = 2005-04-30t14:55:00+01.00) (?start = http://www.xulplanet.com/rdf/myphotos, ?photo = http://www.xulplanet.com/ndeakin/images/t/palace.jpg, ?phototit...
...And 5 more matches
RDF Query Syntax - Archive of obsolete content
the builder needs to start with a single
result as the seed
result.
...the seed
result will be created like this: (?start = http://www.xulplanet.com/rdf/a) the variable ?start is determined from the tag's 'uri' attribute.
...for this discussion, assume that so far we have a single potential
result as above.
...And 5 more matches
Simple Example - Archive of obsolete content
<query> <content uri="?start"/> <member container="?start" child="?photo"/> <triple subject="?photo" predicate="http://purl.org/dc/elements/1.1/title" object="?title"/> </query> the seed is set in a similar manner as the previous examples, effectively creating a single
result with the ?start variable set to the reference resource 'http://www.xulplanet.com/rdf/myphotos'.
...first, any known variables are filled into the member statement for the current
result.
... there's only one
result so far; the member element's container attribute is set to value of the ?start variable of this
result.
...And 5 more matches
XML Templates - Archive of obsolete content
just place an expr attribute on the query element containing an xpath expression returns the set of
results to output.
...as there are five in the xml document, five
results will be generated.
... the action element defines the content to generate for each
result.
...And 5 more matches
JavaScript basics - Learn web development
*/ if your comment contains no line breaks, it's an option to put it behind two slashes like this: // this is a comment operators an operator is a mathematical symbol which produces a
result based on two values (or variables).
...it returns a true/false (boolean)
result.
... !, !== for "not", the basic expression is true, but the comparison returns false because we negate it: let myvariable = 3; !(myvariable === 3); "does-not-equal" gives basically the same
result with different syntax.
...And 5 more matches
IME handling guide
if one or more clauses were not converted as expected, the user can choose one of the clauses with arrow keys and look for the expected
result form the list in the drop down menu (in the following screenshot, the clause with the thicker underline is called "selected clause").
...it depends on the
result of nsiwidget::getimeupdatepreference() what is observed.
...the
result is always same as the
result of querying contents at receiving this notfication.
...And 5 more matches
Enc Dec MAC Using Key Wrap CertReq PKCS10 CSR
progname, dbdir, headerfilename, encryptedfilename); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return
result as secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_...
...q = null; } return certreq; } /* * sign cert */ static secitem * signcert(certcertdbhandle *handle, certcertificate *cert, prbool selfsign, secoidtag hashalgtag, seckeyprivatekey *privkey, char *issuernickname, void *pwarg) { secitem der; secstatus rv; secoidtag algid; void *dummy; prarenapool *arena = null; secitem *
result = null; seckeyprivatekey *caprivatekey = null; if (!selfsign) { certcertificate *issuer = pk11_findcertfromnickname(issuernickname, pwarg); if ((certcertificate *)null == issuer) { pr_fprintf(pr_stderr, "unable to find issuer with nickname %s\n", issuernickname); goto cleanup; } privkey ...
...up; } /* we only deal with cert v3 here */ *(cert->version.data) = 2; cert->version.len = 1; der.len = 0; der.data = null; dummy = sec_asn1encodeitem (arena, &der, cert, sec_asn1_get(cert_certificatetemplate)); if (!dummy) { pr_fprintf(pr_stderr, "could not encode certificate.\n"); goto cleanup; }
result = (secitem *) port_arenazalloc (arena, sizeof (secitem)); if (
result == null) { pr_fprintf(pr_stderr, "could not allocate item for certificate data.\n"); goto cleanup; } rv = sec_dersigndata(arena,
result, der.data, der.len, privkey, algid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not sign encoded certificate data : %s\n", ...
...And 5 more matches
JS_ValueToObject
on success, *objp receives null or a pointer to the
resulting object.
...on success, this function stores either null or a pointer to the
resulting object in *objp and returns true.
... if v is jsval_null or jsval_void, the
result is null.
...And 5 more matches
Retrieving part of the bookmarks tree
configure the query to get a hierarchical bookmarks
result, pass the folder id to setfolders in your query object: query.setfolders([toolbarfolder], 1); run the query the executequery and executequeries functions will return an nsinavhistory
result object containing the
results of your query: var
result = historyservice.executequery(query, options); get the
results when you are querying for exactly one folder grouped by folder with no fancy query parame...
...ters such as keywords or date ranges (as in this example), the root of the
result will be an nsinavhistorycontainer
resultnode corresponding to your folder.
... if you have a complex query the root will be a nsinavhistoryquery
resultnode.
...And 5 more matches
XPCOM array guide
since nsimutablearray derives from nsiarray, the
resulting array can be cast to a read-only array.
... c++ example void getlist(nsiarray** a
result) { nscomptr<nsimutablearray> array = do_createinstance(ns_array_contractid); // append some elements ...
... // return it to the caller *a
result = array; ns_addref(*a
result); } javascript example function getlist() { var array = components.classes["@mozilla.org/array;1"] .createinstance(components.interfaces.nsimutablearray); // append some elements ...
...And 5 more matches
Making cross-thread calls using runnables
for example, let's say we have a function, calculatepi(int digits), which will calculate π to an arbitrary number of digits: void calculatepi(int digits, nscstring&
result); // this is synchronous this can take a while, so we don't want to run this on the main thread.
... instead, we want to run it on a new thread and be notified when the
result is available.
... so we declare an asynchronous version of the same function: typedef void (*picallback)(const nscstring&
result); // callback function void calculatepiasynchronously(int digits, picallback callback); creating a runnable nsrunnable is a helper class: it already implements threadsafe refcounting, so all you need to do is override the run() function.
...And 5 more matches
IAccessibleAction
method overview [propget] h
result description([in] long actionindex, [out] bstr description ); h
result doaction([in] long actionindex ); [propget] h
result keybinding([in] long actionindex, [in] long nmaxbindings, [out, size_is(,nmaxbindings), length_is(, nbindings)] bstr keybindings, [out] long nbindings ); [propget] h
result localizedname([in] long actionindex, [out] bstr localizedname ); h
result nactions([out,retval] lon...
...g nactions ); [propget] h
result name([in] long actionindex, [out] bstr name ); methods description() returns a description of the specified action of the object.
... [propget] h
result description( [in] long actionindex, [out] bstr description ); parameters actionindex 0 based index specifying which action's description to return.
...And 5 more matches
mozIStorageAggregateFunction
last changed in gecko 1.9 (firefox 3) inherits from: nsisupports method overview void onstep(in mozistoragevaluearray afunctionarguments); nsivariant onfinal(); methods onstep() this is called for each row of
results returned by the query.
... onfinal() this is called after all
results have been obtained and notified via mozistorageaggregatefunction.
... the implementation should finish its calculations on the data, and return a
result.
...And 5 more matches
nsIDOMWindowUtils
ng alineorpagedeltay, in unsigned long aoptions); void sendnativekeyevent(in long anativekeyboardlayout, in long anativekeycode, in long amodifierflags, in astring acharacters, in astring aunmodifiedcharacters); void sendnativemouseevent(in long ascreenx, in long ascreeny, in long anativemessage, in long amodifierflags, in nsidomelement aelement); nsiquerycontentevent
result sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ax, in long ay); obsolete since gecko 31.0 nsiquerycontentevent
result sendquerycontentevent(in unsigned long atype, in unsigned long aoffset, in unsigned long alength, in long ax, in long ay, [optional] in unsigned long aadditionalflags); boolean sendselectionsetevent(in u...
...additionally, the offset, length and string of
result are also computed with native line breaks.
...additionally, the offset, length and string of
result are also computed with xp line breaks.
...And 5 more matches
nsINavBookmarksService
iner in gecko 1.9 obsolete since gecko 13.0 long long createfolder(in long long aparentfolder, in autf8string name, in long index); void endupdatebatch(); obsolete since gecko 1.9 void exportbookmarkshtml(in nsifile file); obsolete since gecko 1.9 nsiuri getbookmarkedurifor(in nsiuri auri); void getbookmarkfolderstarray(in nsiuri auri, in print64array a
result); native code only!
... obsolete since gecko 1.9 void getbookmarkidsforuri(in nsiuri auri, [optional] out unsigned long count, [array, retval, size_is(count)] out long long bookmarks); note: renamed from getbookmarkfolders in gecko 1.9 void getbookmarkidsforuritarray(in nsiuri auri, in print64array a
result); native code only!
...pass in a reference to a tarray; it will get cleared and filled with the
resulting list of folder ids.
...And 5 more matches
nsINavHistoryQuery
this will only work for
results_as_uri since there will be no visits for these items.
... begintime prtime begin time range for
results (inclusive).
... endtime prtime end time range for
results (inclusive).
...And 5 more matches
Mozilla
it currently allows you to run javascript code in the same scope as the main firefox browser window and report
results using the same functions as the mochitest test framework.
...if the bitmaps
resulting from displaying the two files in an 800x1000 window are identical, the test passes.
...use them to display nsinavhistory
result objects to the user.
...And 5 more matches
The JavaScript input interpreter - Firefox Developer Tools
the expression you type is echoed under the input prompt, followed by the
result.
...the snippet is echoed under the input prompt (in the right-side pane), followed by the
result.
... when the "instant evaluation" feature is enabled, the interpreter displays
results of expressions as you're typing them in single-line mode.
...And 5 more matches
Using the Media Capabilities API - Web APIs
handling the response instead of the assigning the promise to a variable, we can output the values returned by the promise to the console: navigator.mediacapabilities.decodinginfo(videoconfiguration).then(
result => { console.log('this configuration is ' + (
result.supported ?
... '' : 'not ') + 'supported, ' + (
result.smooth ?
... '' : 'not ') + 'smooth, and ' + (
result.powerefficient ?
...And 5 more matches
Capabilities, constraints, and settings - Web APIs
the
result has been a lot of very fragile code, or a reliance on libraries which figure this stuff out for you, then implement polyfills to patch the holes in the implementation on your behalf.
...the constraint exerciser lets you experiment with the
results of different constraint sets being applied to the audio and video tracks coming from the computer's a/v input devices (such as its webcam and microphone).
...there's no guarantee that the
resulting track will match any of these, but the user agent should do its best to match as many as possible.
...And 5 more matches
SpeechRecognitionEvent - Web APIs
the speechrecognitionevent interface of the web speech api represents the event object for the
result and nomatch events, and contains all the data associated with an interim or final speech recognition
result.
... speechrecognitionevent.emma read only returns an extensible multimodal annotation markup language (emma) — xml — representation of the
result.
... speechrecognitionevent.
resultindex read only returns the lowest index value
result in the speechrecognition
resultlist "array" that has actually changed.
...And 5 more matches
Matrix math for the web - Web APIs
this is a special transformation matrix which functions much like the number 1 does in scalar multiplication; just like n * 1 = n, multiplying any matrix by the identity matrix gives a
resulting matrix whose values match the original matrix.
... 6], c3r1 = matrix[ 7]; let c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11]; let c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15]; // now set some simple names for the point let x = point[0]; let y = point[1]; let z = point[2]; let w = point[3]; // multiply the point against each part of the 1st column, then add together let
resultx = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3); // multiply the point against each part of the 2nd column, then add together let
resulty = (x * c1r0) + (y * c1r1) + (z * c1r2) + (w * c1r3); // multiply the point against each part of the 3rd column, then add together let
resultz = (x * c2r0) + (y * c2r1) + (z * c2r2) + (w * c2r3); // multiply the point against each part of the 4...
...th column, then add together let
resultw = (x * c3r0) + (y * c3r1) + (z * c3r2) + (w * c3r3); return [
resultx,
resulty,
resultz,
resultw]; } now using the function above we can multiply a point by the matrix.
...And 5 more matches
Rendering and the WebXR frame animation callback - Web APIs
the
resulting value is the amount of time available for each frame to be rendered in order to not drop the frame.
...as a
result, you wind up with the visual effect of the top part of the screen showing the new frame, while the bottom part of the frame shows some combination of the previous frame and possibly even the frame before that one.
...because each eye is offset to one side or the other of the head's centerline, and each eye sees about the same field of view, the
result is that each eye sees a slightly different part of the world in front of it, and from a slightly different angle.
...And 5 more matches
<blend-mode> - CSS: Cascading Style Sheets
<div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: normal; } multiply the final color is the
result of multiplying the top and bottom colors.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: multiply; } screen the final color is the
result of inverting the colors, multiplying them, and inverting that value.
... <div id="div"></div> #div { width: 300px; height: 300px; background: url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'); background-blend-mode: screen; } overlay the final color is the
result of multiply if the bottom color is darker, or screen if the bottom color is lighter.
...And 5 more matches
<feComposite> - SVG: Scalable Vector Graphics
additionally, a component-wise arithmetic operation (with the
result clamped between [0..1]) can be applied.
...if the arithmetic operation is chosen, each
result pixel is computed using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively k1, k2, k3 and k4 indicate the values of the attributes with the same name usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <set> attributes global attributes core attributes » presentation attributes » filter primitive attributes » class style specific attributes in in2 operator k1 k2 k3 k4 ...
... the second set does not wipe out the background, with the
result that the background sometimes shines through and is other cases is blended into itself (i.e., "double-counting").</desc> <filter id="overflood" filterunits="objectboundingbox" x="-5%" y="-5%" width="110%" height="110%"> <feflood flood-color="#ffffff" flood-opacity="1"
result="flood"/> <fecomposite in="sourcegraphic" in2="backgroundimage" operator="over"
result=...
...And 5 more matches
XPath snippets - XPath
example: defining a custom node-specific evaluatexpath() utility function // evaluate an xpath expression aexpression against a given dom node // or document object (anode), returning the
results as an array // thanks wanderingstan at morethanwarm dot mail dot com for the // initial work.
... anode.documentelement : anode.ownerdocument.documentelement); var
result = xpe.evaluate(aexpr, anode, nsresolver, 0, null); var found = []; var res; while (res =
result.iteratenext()) found.push(res); return found; } this function uses the new xpathevaluator() constructor, which is supported in firefox, chrome, opera and safari, but not in edge or internet explorer.
...although walking the dom tree can achieve similar
results, using xpath expressions is much quicker and more powerful.
...And 5 more matches
Recursive Generation - Archive of obsolete content
after generating a
result's content, the builder starts again using a new parent and starting point.
... naturally, the parent will be the new
result's content, rather than the outer containing element, and the starting point will be the endpoint of the previous iteration.
...for nested
results, the insertion point is the generated element.
...And 4 more matches
What’s in the head? Metadata in HTML - Learn web development
the <title> contents are also used in search
results, as you'll see below.
... specifying a description that includes keywords relating to the content of your page is useful as it has the potential to make your page appear higher in relevant searches performed in search engines (such activities are termed search engine optimization, or seo.) active learning: the description's use in search engines the description is also used on search engine
result pages.
...ke this (although it may change over time): <meta name="description" content="the mdn web docs site provides information about open web technologies including html, css, and apis for both web sites and progressive web apps."> now search for "mdn web docs" in your favorite search engine (we used google.) you'll notice the description <meta> and <title> element content used in the search
result — definitely worth having!
...And 4 more matches
Making asynchronous programming easier with async and await - Learn web development
this can be put in front of any async promise-based function to pause your code on that line until the promise fulfills, then return the
resulting value.
...instead of needing to chain a .then() block on to the end of each promise-based method, you just need to add an await keyword before the method call, and then assign the
result to a variable.
... the await keyword causes the javascript runtime to pause your code on this line, allowing other code to execute in the meantime, until the async function call has returned its
result.
...And 4 more matches
Choosing the right approach - Learn web development
asynchronous callbacks generally found in old-style apis, involves a function being passed into another function as a parameter, which is then invoked when an asynchronous operation has been completed, so that the callback can in turn do something with the
result.
... further information cooperative asynchronous javascript: timeouts and intervals, in particular requestanimationframe() requestanimationframe() reference promises promises are a javascript feature that allows you to run asynchronous operations and wait until it is definitely complete before running another operation based on its
result.
...for example: remotedb.alldocs({ include_docs: true, attachments: true }).then(function (
result) { let docs =
result.rows; docs.foreach(function(element) { localdb.put(element.doc).then(function(response) { alert("pulled doc with id " + element.doc._id + " and added to local db."); }).catch(function (err) { if (err.name == 'conflict') { localdb.get(element.doc._id).then(function (resp) { localdb.remove(resp._id, resp._rev).then(function (resp) { // ...
...And 4 more matches
Test your skills: Conditionals - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the
results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...the different conditional tests (and
resulting responses) are as follows: score of less than 0 or more than 100 — "this is not possible, an error has occurred." score of 0 to 19 — "that was a terrible score — total fail!" score of 20 to 39 — "you know some things, but it's a pretty bad score.
... machine
result — begins uninitialized, but is later used to store a reponse that will be printed to the output panel, letting the user know whether the machine is switched on.
...And 4 more matches
Basic math in JavaScript — numbers and operators - Learn web development
for example, try typing these lines into your console: let mynumber = '74'; mynumber + 3; you end up with the
result 743, not 77, because mynumber is actually defined as a string.
...for example, in math.pow(7, 3), 7 is the base and 3 is the exponent, so the
result of the expression is 343.
...for example: let num1 = 10; let num2 = 50; 9 * num1; num1 ** 3; num2 / num1; last for this section, try entering some more complex expressions, such as: 5 + 10 * 3; num2 % 9 * num1; num2 + num1 / 8 + 2; some of this last set of calculations might not give you quite the
result you were expecting; the section below might well give the answer as to why.
...And 4 more matches
Silly story generator - Learn web development
this: adds a click event listener to the randomize variable so that when the button it represents is clicked, the
result() function is run.
... adds a partially-completed
result() function definiton to your code.
... completing the
result() function: create a new variable called newstory, and set its value to equal storytext.
...And 4 more matches
NetUtil.jsm
the callback receives a single parameter: the ns
result status code for the copy operation.
... createinstance(ci.nsistringinputstream); istream.setdata(test_data, test_data.length); netutil.asynccopy(istream, ostream, function(a
result) { if (!components.issuccesscode(a
result)) { // an error occurred!
...the callback receives three parameters: the input stream containing the data, if any (implementing nsiinputstream), an ns
result status code for the open operation, and a reference to the nsirequest object.
...And 4 more matches
sample2
rintf(pr_stderr, "%s -d -d %s -b %s -e %s -o : output file name is not found\n", progname, dbdir, headerfilename, encryptedfilename); validationfailed = pr_true; } if (validationfailed) { fprintf(stderr, "\nusage: %s %s \n\n", progname, "-d -d <dbdirpath> -b <headerfilename> -e <encryptfilename> -o <opfilename>\n"); exit(-1); } } /* * sign the contents of input file using private key and * return
result as secitem */ secstatus signdata(const char *infilename, seckeyprivatekey *pk, secitem *res) { secstatus rv = secfailure; unsigned int nb; unsigned char ibuf[4096]; prfiledesc *infile = null; sgncontext *sgn = null; /* open the input file for reading */ infile = pr_open(infilename, pr_rdonly, 0); if (!infile) { pr_fprintf(pr_stderr, "unable to open \"%s\" for reading.\n", infilename); rv = secfai...
...d certificate request\n"); if (arena) { port_freearena(arena, pr_false); } certreq = null; } return certreq; } /* * sign cert */ static secitem * signcert(certcertdbhandle *handle, certcertificate *cert, prbool selfsign, secoidtag hashalgtag, seckeyprivatekey *privkey, char *issuernickname, void *pwarg) { secitem der; secstatus rv; secoidtag algid; void *dummy; prarenapool *arena = null; secitem *
result = null; seckeyprivatekey *caprivatekey = null; if (!selfsign) { certcertificate *issuer = pk11_findcertfromnickname(issuernickname, pwarg); if ((certcertificate *)null == issuer) { pr_fprintf(pr_stderr, "unable to find issuer with nickname %s\n", issuernickname); goto cleanup; } privkey = caprivatekey = pk11_findkeybyanycert(issuer, pwarg); cert_destroycertificate(issuer); if (caprivatekey == nul...
...fprintf(pr_stderr, "could not set signature algorithm id.\n%s\n", port_errortostring(rv)); goto cleanup; } /* we only deal with cert v3 here */ *(cert->version.data) = 2; cert->version.len = 1; der.len = 0; der.data = null; dummy = sec_asn1encodeitem (arena, &der, cert, sec_asn1_get(cert_certificatetemplate)); if (!dummy) { pr_fprintf(pr_stderr, "could not encode certificate.\n"); goto cleanup; }
result = (secitem *) port_arenazalloc (arena, sizeof (secitem)); if (
result == null) { pr_fprintf(pr_stderr, "could not allocate item for certificate data.\n"); goto cleanup; } rv = sec_dersigndata(arena,
result, der.data, der.len, privkey, algid); if (rv != secsuccess) { pr_fprintf(pr_stderr, "could not sign encoded certificate data : %s\n", port_errortostring(rv)); /*
result allocated out of the arena...
...And 4 more matches
JS_CompareStrings
syntax bool js_comparestrings(jscontext *cx, jsstring *str1, jsstring *str2, int32_t *
result); name type description cx jscontext * the context to which both strings must belong.
...
result int32_t * the out parameter.
... see description for value of *
result.
...And 4 more matches
An Overview of XPCOM
the nsisupports interface is shown below: the nsisupports interface class sample: public nsisupports { private: nsrefcnt mrefcnt; public: sample(); virtual ~sample(); ns_imethod queryinterface(const nsiid &aiid, void **a
result); ns_imethod_(nsrefcnt) addref(void); ns_imethod_(nsrefcnt) release(void); }; the various types used in the interface are described in the xpcom types section below.
... implementation of nsisupports interface // initialize the reference count to 0 sample::sample() : mrefcnt(0) { } sample::~sample() { } // typical, generic implementation of qi ns_imethodimp sample::queryinterface(const nsiid &aiid, void **a
result) { if (!a
result) { return ns_error_null_pointer; } *a
result = null; if (aiid.equals(kisupportsiid)) { *a
result = (void *) this; } if (!*a
result) { return ns_error_no_interface; } // add a reference addref(); return ns_ok; } ns_imethodimp_(nsrefcnt) sample::addref() { return ++mrefcnt; } ns_imethodimp_(nsrefcnt) sample::release() { if (--mrefcnt == 0) { de...
...in xpcom, all interface methods should return an ns
result error value (see the xpcom api reference for a listing of these error codes).
...And 4 more matches
IAccessibleHyperlink
as a
result it may be removed in a later version of the idl and it is suggested that implementations should not rely on the inheritance.
... method overview [propget] h
result anchor([in] long index, [out] variant anchor ); [propget] h
result anchortarget([in] long index, [out] variant anchortarget ); [propget] h
result endindex([out] long index ); [propget] h
result startindex([out] long index ); [propget] h
result valid([out] boolean valid ); methods anchor() returns an object that represents the link anchor, as appropriate for the link at the specified index.
... [propget] h
result anchor( [in] long index, [out] variant anchor ); parameters index a 0 based index identifies the anchor when, as in the case of an image map, there is more than one link represented by this object.
...And 4 more matches
nsIAutoCompleteInput
gned long index); void onsearchbegin(); void onsearchcomplete(); boolean ontextentered(); boolean ontextreverted(); void selecttextrange(in long startindex, in long endindex); attributes attribute type description completedefaultindex boolean if a search
result has its defaultindex set, this will optionally try to complete the text in the textbox to the entire text of the
result at the default index as the user types.
... forcecomplete boolean if true, the text field automatically completes to the default
result whenever the user hits the enter key or the text field loses focus.
... min
resultsforpopup unsigned long specifies a minimum number of search
results that must be available before the autocomplete popup will open.
...And 4 more matches
nsIDOMXPathEvaluator
ponents.interfaces.nsidomxpathevaluator); method overview nsidomxpathexpression createexpression(in domstring expression, in nsidomxpathnsresolver resolver) nsidomxpathnsresolver creatensresolver(in nsidomnode noderesolver); nsisupports evaluate(in domstring expression, in nsidomnode contextnode, in nsidomxpathnsresolver resolver, in unsigned short type, in nsisupports
result) methods createexpression() creates an nsidomxpathexpression which can then be used for (repeated) evaluations.
...nsisupports evaluate( in domstring expression, in nsidomnode contextnode, in nsidomxpathnsresolver resolver, in unsigned short type, in nsisupports
result ); parameters expression a string representing the xpath to be evaluated.
... type a number that corresponds to one of the type constants of nsixpath
result.
...And 4 more matches
nsIDOMXPathExpression
dom/interfaces/xpath/nsidomxpathexpression.idlscriptable represents a compiled xpath query returned from nsidomxpathevaluator.createexpression or document.createexpression inherits from: nsisupports last changed in gecko 1.7 method overview nsisupports evaluate(in nsidomnode contextnode, in unsigned short type, in nsisupports
result) methods evaluate() evaluate the xpath expression.
... nsisupports evaluate( in nsidomnode contextnode, in unsigned short type, in nsisupports
result ); parameters contextnode a dom node to evaluate the xpath expression against.
... type a number that corresponds to one of the type constants of nsidomxpath
result.
...And 4 more matches
nsIDynamicContainer
1.0 66 introduced gecko 1.9 inherits from: nsisupports last changed in gecko 1.9 (firefox 3) the service can fill
result nodes directly into the container when it is opened.
... it can use the property bag on every
result node to store data associated with each item, such as a full path on disk.
...method overview void oncontainermoved(in long long aitemid, in long long anewparent, in long anewindex); void oncontainernodeclosed(in nsinavhistorycontainer
resultnode acontainer); void oncontainernodeopening(in nsinavhistorycontainer
resultnode acontainer, in nsinavhistoryqueryoptions aoptions); void oncontainerremoving(in long long aitemid); methods oncontainermoved() this method is called when the given container has just been moved, in case the service needs to do any bookkeeping.
...And 4 more matches
nsIFeedProgressListener
1.0 66 introduced gecko 1.8 inherits from: nsifeed
resultlistener last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void handleentry(in nsifeedentry entry, in nsifeed
result result); void handlefeedatfirstentry(in nsifeed
result result); void handlestartfeed(in nsifeed
result result); void reporterror(in astring errortext, in long linenumber, in boolean bozo); methods ha...
... void handleentry( in nsifeedentry entry, in nsifeed
result result ); parameters entry pointer to an nsifeedentry containing information about the entry that was just processed.
...
result pointer to an nsifeed
result containing the current information about the feed being processed.
...And 4 more matches
nsIProtocolProxyService
aflags); nsicancelable asyncresolve(in nsiuri auri, in unsigned long aflags,in nsiprotocolproxycallback acallback); nsiproxyinfo newproxyinfo(in acstring atype, in autf8string ahost,in long aport, in unsigned long aflags, in unsigned long afailovertimeout, in nsiproxyinfo afailoverproxy); nsiproxyinfo getfailoverforproxy(in nsiproxyinfo aproxyinfo, in nsiuri auri, in ns
result areason); void registerfilter(in nsiprotocolproxyfilter afilter, in unsigned long aposition); void unregisterfilter(in nsiprotocolproxyfilter afilter); constants constant value description resolve_non_blocking 1<<0 this flag may be passed to the resolve method to request that it fail instead of block the calling thread.
...so, calling resolve without this flag may
result in locking up the calling thread for a lengthy period of time.
...otherwise, the consumer may choose to treat the
result as type "direct" if desired.
...And 4 more matches
nsIXPConnect
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) to access the xpconnect service, use code like this: ns
result rv; nscomptr<nsixpconnect> xpconnect = do_getservice(nsixpconnect::getcid(), &rv); if (ns_succeeded(rv)) { /* use the object */ } method overview void addjsholder(in voidptr aholder, in nsscriptobjecttracerptr atracer); native code only!
... obsolete since gecko 2.0 jsval varianttojs(in jscontextptr ctx, in jsobjectptr scope, in nsivariant value); void wrapjs(in jscontextptr ajscontext, in jsobjectptr ajsobj, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result); void wrapjsaggregatedtonative(in nsisupports aouter, in jscontextptr ajscontext, in jsobjectptr ajsobj, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result); nsixpconnectjsobjectholder wrapnative(in jscontextptr ajscontext, in jsobjectptr ascope, in nsisupports acomobj, in nsiidref aiid); void wrapnativetojsval(in jscontextptr ajscontext, in jsobjectp...
... returnstringonly the only
results to come out of the computation (including exceptions) will be coerced into strings created in the sandbox.
...And 4 more matches
Intersection Observer API - Web APIs
deciding whether or not to perform tasks or animation processes based on whether or not the user will see the
result.
...as the user scrolls the page, these intersection detection routines are firing constantly during the scroll handling code,
resulting in an experience that leaves the user frustrated with the browser, the web site, and their computer.
... when recursion upward reaches the intersection root, the
resulting rectangle is mapped to the intersection root's coordinate space.
...And 4 more matches
Background audio processing using AudioWorklet - Web APIs
create module that defines a audio worklet processor class, based on audioworkletprocessor which takes audio from one or more incoming sources, performs its operation on the data, and outputs the
resulting audio data.
...the example creates an oscillator node and adds white noise to it using an audioworkletnode before playing the
resulting sound out.
...g the inputs (or not, as needed), write the output into each of the outputs */ return true; } }; registerprocessor("my-audio-processor", myaudioprocessor); after the implementation of the processor comes a call to the global function registerprocessor(), which is only available within the scope of the audio context's audioworklet, which is the invoker of the processor script as a
result of your call to audioworklet.addmodule().
...And 4 more matches
XRWebGLLayer.getNativeFramebufferScaleFactor() static method - Web APIs
if the scaling factor is greater than zero, then the frame buffer is smaller than the diplay's native dimensions,
resulting in the output being up-scaled for display to the screen after rendering into the frame buffer.
... if the scaling factor is less than zero, the frame buffer is larger than the native resolution of the display,
resulting in the frame buffer's contents being scaled down for display to the xr device.
... return value a floating-point value which, when multiplied by the xrsession's recommended framebuffer dimensions,
results in the xr device's native frame buffer resolution.
...And 4 more matches
system - CSS: Cascading Style Sheets
] | [ extends <counter-style-name> ]where <counter-style-name> = <custom-ident> examples cyclic counter if your browser supports it, this example will render a list like this: ◉ one ◉ two ◉ three css <ul> <li>one</li> <li>two</li> <li>three</li> </ul> @counter-style fisheye { system: cyclic; symbols: ◉; suffix: " "; } ul { list-style: fisheye; }
result fixed counter if your browser supports it, this example will render a list like this: ➀ one ➁ two ➂ three 4 four 5 five css <ul> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> @counter-style circled-digits { system: fixed; symbols: ➀ ➁ ➂; suffix: ' '; } ul { list-style: circled-digits; }
result symbolic counter if your...
..."; } ul { list-style: abc; }
result alphabetic counter if your browser supports it, this example will render a list like this: a.
..."; } ul { list-style: abc; }
result numeric counter if your browser supports it, this example will render a list like this: b.
...And 4 more matches
line-height - CSS: Cascading Style Sheets
in most cases, this is the preferred way to set line-height and avoid unexpected
results due to inheritance.
...values given in em units may produce unexpected
results (see example below).
...percentage values may produce unexpected
results (see the second example below).
...And 4 more matches
<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
basically creates same
result as setting css width property with a few specialities.
... incremental whether or not to send repeated search events to allow updating live search
results while the user is still editing the value of the field.
...
results the maximum number of items that should be displayed in the drop-down list of previous search queries.
...And 4 more matches
Filter effects - SVG: Scalable Vector Graphics
<svg width="250" viewbox="0 0 200 85" xmlns="http://www.w3.org/2000/svg" version="1.1"> <defs> <!-- filter declaration --> <filter id="myfilter" filterunits="userspaceonuse" x="0" y="0" width="200" height="120"> <!-- offsetblur --> <fegaussianblur in="sourcealpha" stddeviation="4"
result="blur"/> <feoffset in="blur" dx="4" dy="4"
result="offsetblur"/> <!-- litpaint --> <fespecularlighting in="blur" surfacescale="5" specularconstant=".75" specularexponent="20" lighting-color="#bbbbbb"
result="specout"> <fepointlight x="-5000" y="-10000" z="20000"/> </fespecularlighting> <fecomposite in="spec...
...out" in2="sourcealpha" operator="in"
result="specout"/> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"
result="litpaint"/> <!-- merge offsetblur + litpaint --> <femerge> <femergenode in="offsetblur"/> <femergenode in="litpaint"/> </femerge> </filter> </defs> <!-- graphic elements --> <g filter="url(#myfilter)"> <path fill="none" stroke="#d90000" stroke-width="10" d="m50,66 c-50,0 -50,-60 0,-60 h100 c50,0 50,60 0,60z" /> <path fill="#d90000" d="m60,56 c-30,0 -30,-40 0,-40 h80 c30,0 30,40 0,40z" /> <g fill="#ffffff" stroke="black" font-size="45" font-family="verdana" > <text x="52" y="52">svg</text> </g> </g> </svg> st...
...ep 1 <fegaussianblur in="sourcealpha" stddeviation="4"
result="blur"/> <fegaussianblur> takes in "sourcealpha", which is the alpha channel of the source graphic, applies a blur of 4, and stores the
result in a temporary buffer named "blur".
...And 4 more matches
core/promise - Archive of obsolete content
romptuserfortwitterhandle(function continuewith(error, handle) { if (error) return ui.displayerror(error); twitter.gettweetsfor(handle, funtion continuewith(error, tweets) { if (error) return ui.displayerror(error); ui.showtweets(tweets); }); }); }); doing things in parallel is even harder: var tweets, answers, checkins; twitter.gettweetsfor(user, function continuewith(
result) { tweets =
result; somethingfinished(); }); stackoverflow.getanswersfor(question, function continuewith(
result) { answers =
result; somethingfinished(); }); foursquare.getcheckinsby(user, function continuewith(
result) { checkins=
result; somethingfinished(); }); var finished = 0; function somethingfinished() { if (++finished === 3) ui.show(tweets, answers, checkins); } this ...
... promises consider another approach, instead of continuation via callbacks, a function returns an object that represents a eventual
result, either successful or failed.
... // extract sql query then(readdbasync); // exectue extracted query against db nested chaining flat chaining is not always an option though, as in some cases you may want to capture intermediate values of the chain: var
result = readasync(url).then(function(source) { var json = parse(source); return readdbasync(extractquery(json)).then(function(data) { return writeasync(json.url, data); }); }); in general, nesting is useful for computing values from more than one promise: function eventualadd(a, b) { return a.then(function (a) { return b.then(function (b) { return a + b; }); }); } var c =...
...And 3 more matches
ui/sidebar - Archive of obsolete content
to show what a sidebar looks like, here's a sidebar that displays the
results of running the w3c validator on the current page: specifying sidebar content the content of a sidebar is specified using html, which is loaded from the url supplied in the url option to the sidebar's constructor.
... events attach this event is emitted when a worker is attached to a sidebar, as a
result of any of the following: calling the sidebar's show() method, when the sidebar is not shown in the currently active window changing the sidebar's url property the user switching the sidebar on using the "sidebar" submenu in firefox, when the sidebar is not shown in the currently active window the user opening a new window from a window that has the sidebar showing it is passed a worker as...
... ready this event is emitted after the dom content for a sidebar has been loaded, as a
result of any of: calling the sidebar's show() method, when the sidebar is not shown in the currently active window changing the sidebar's url property the user switching the sidebar on using the "sidebar" submenu in firefox, when the sidebar is not shown in the currently active window the user opening a new window from a window that has the sidebar showing it is passed a worker as an argument, ...
...And 3 more matches
Communication between HTML and your extension - Archive of obsolete content
what i wanted to do was have an extension "look" for something on an html page and if it found that something perform some operation on the found thing and then update the status bar with the
results of the operation.
...i set the onblur action to a little javascript function that performed a standard ajax request to get a
result.
... the onreadystatechange was set to another little javascript function that would update a specific element on the html page with the
result.
...And 3 more matches
SQLite Templates - Archive of obsolete content
the action body, starting at the node with uri="?" is repeated for each
result returned from the query.
... if the query returns six
results, six listitems will be generated.
...it means, substitute the attribute value with the value of a column from the
result.
...And 3 more matches
Static Content - Archive of obsolete content
the template generates two
results as before, one for each country, and appends a menuitem for each one.
...the
result will be a xul display that looks just like the code above, except that the template and its content is hidden.
...next, the template is examined and two
results are generated.
...And 3 more matches
Splitters - Archive of obsolete content
one possibility would be to add the
results of the search in the dialog.
...a splitter will allow you to collapse, or hide, the search
results.
... </tabbox> <iframe src="
results.html"/> <splitter collapse="before" resizeafter="grow"> <grippy/> </splitter> <hbox> here, a splitter and an iframe have been added to the dialog.
...And 3 more matches
Gecko Compatibility Handbook - Archive of obsolete content
review your
results the following scenarios all relate to browser detection.
...inconsistent case between the css defining the style for html id's and classes
results in gecko browsers not applying the styles to id's or class names that differ in case.
...more info clicking a link
results in a 404-page not found but works in internet explorer the link may use an invalid form of a relative url.
...And 3 more matches
Index - MDN Web Docs Glossary: Definitions of Web-related terms
when multiple domains are used to serve multiple assets, browsers are able to download more resources simultaneously,
resulting in a faster page load time and improved user experience.
... 162 fuzz testing firefox, fuzzing, mozilla, qa, security, testing fuzzing is a technique for testing software using automated tools to provide invalid or unexpected input to a program or function in a program, then checking the
results to see if the program crashes or otherwise acts inappropriately.
... 281 nan codingscripting, computing, glossary, nan nan (not a number) is a numeric data type that means an undefined value or value that cannot be represented, especially
results of floating-point calculations.
...And 3 more matches
Advanced styling effects - Learn web development
imple"> <p><strong>warning</strong>: the thermostat on the cosmic transcender has reached a critical level.</p> </article> now the css: p { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .simple { box-shadow: 5px 5px 5px rgba(0,0,0,0.7); } this gives us the following
result: you'll see that we've got four items in the box-shadow property value: the first length value is the horizontal offset — the distance to the right the shadow is offset from the original box (or left, if the value is negative).
... { margin: 0; } article { max-width: 500px; padding: 10px; background-color: red; background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25)); } .multiple { box-shadow: 1px 1px 1px black, 2px 2px 1px black, 3px 3px 1px red, 4px 4px 1px red, 5px 5px 1px black, 6px 6px 1px black; } now we get this
result: we've done something fun here by creating a raised box with multiple coloured layers, but you could use it in any way you want, for example to create a more realistic look with shadows based on multiple light sources.
... inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } button:focus, button:hover { background-image: linear-gradient(to bottom right, #888, #eee); } button:active { box-shadow: inset 2px 2px 1px black, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } this gives us the following
result: here we've set up some button styling along with focus/hover/active states.
...And 3 more matches
Legacy layout methods - Learn web development
now we just need to float the columns, like so: div:nth-of-type(1) { width: 48%; float: left; } div:nth-of-type(2) { width: 48%; float: right; } putting this all together should give us a
result like so: simple two-column layout <h1>2 column layout example</h1> <div> <h2>first column</h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.
...each width is the
result of adding up the column width of that number of columns plus the gutter widths, which will always number one less than the number of columns.
... target / context =
result for our column width, our target width is 60 pixels and our context is the 960 pixel wrapper.
...And 3 more matches
Responsive design - Learn web development
if the user had a larger or smaller screen than the designer expected,
results ranged from unwanted scrollbars to overly long line lengths, and poor use of space.
... these two approaches tended to
result in a website that looked its best on the screen of the person designing the site!
... the liquid site
resulted in a squashed design on smaller screens (as seen below) and unreadably long line lengths on larger ones.
...And 3 more matches
Sending forms through JavaScript - Learn web development
the xmlhttprequest (xhr) dom object can build http requests, send them, and retrieve their
results.
... xhr.send( urlencodeddata ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live
result: note: this use of xmlhttprequest is subject to the same-origin policy if you want to send data to a third party web site.
...something went wrong.' ); } ); // set up our request xhr.open( 'post', 'https://example.com/cors.php' ); // send our formdata object; http headers are set automatically xhr.send( fd ); } btn.addeventlistener( 'click', function() { senddata( {test:'ok'} ); } ) here's the live
result: using formdata bound to a form element you can also bind a formdata object to an <form> element.
...And 3 more matches
Getting started with HTML - Learn web development
failing to include a closing tag is a common beginner error that can produce peculiar
results.
...this kind of guessing can
result in unexpected
results.
..., it is acceptable to write this as follows: <!-- using the disabled attribute prevents the end user from entering text into the input box --> <input type="text" disabled> <!-- text input is allowed, as it doesn't contain the disabled attribute --> <input type="text"> for reference, the example above also includes a non-disabled form input element.the html from the example above produces this
result: omitting quotes around attribute values if you look at code for a lot of other sites, you might come across a number of strange markup styles, including attribute values without quotes.
...And 3 more matches
Fetching data from the server - Learn web development
this is extremely wasteful and
results in a poor user experience, especially as pages get larger and more complex.
...these technologies allow web pages to directly handle making http requests for specific resources available on a server and formatting the
resulting data as needed before it is displayed.
...this is normally not the case these days (you'd be more likely to use xmlhttprequest or fetch to request json), but the
result is still the same, and the term "ajax" is still often used to describe the technique.
...And 3 more matches
Handling text — strings in JavaScript - Learn web development
let one = 'hello, '; let two = 'how are you?'; let joined = one + two; joined; the
result of this is a variable called joined, which contains the value "hello, how are you?".
... note: try entering the below examples into your browser's javascript console, to see what
results you get.
...so, taking a simple example: let song = 'fight the youth'; would be turned into a template literal like so: song = `fight the youth`; if we want to concatenate strings, or include expression
results inside them, traditional strings can be fiddly to write: let score = 9; let highestscore = 10; let output = 'i like the song "' + song + '".
...And 3 more matches
Research and prep
ensure that your suggestions follow these parameters: search there are typically five search plug-ins listed for firefox desktop (only four for firefox mobile): generic search the default option should expose the quickest path to the best
result on the world wide web for the user (indexing a large portion of the global www).
... global search the second position can be used for the next best local language provider, meaning coverage within the local language and/or locale (indexing a smaller portion of the www but producing better local language
results).
... local search a good test is if you were to run a set of comparative queries; the secondary engine should produce the best local language
results and the primary/default position should produce the best global
results.
...And 3 more matches
AsyncTestUtils extended framework
when i/o
results in newly read data it places an event in the queue.
...for example, {count: 1, subject: "my suitcase"} would
result in a single message with the subject "my suitcase" with a random sender and random recipient.
...for example, {count: 4, from: ["john doe", "john_doe@example.com"]} would
result in four messages from john doe to random recipients.
...And 3 more matches
Property cache
spidermonkey mainly uses type inference to determine which properties are being accessed; in cases where type inference does not find the exact shape of the object being accessed, spidermonkey uses a pic (polymorphic inline caches) to store the
result of the lookup.
... the property cache is a per-thread cache of the
results of steps 1 and 2.
...when recording a getprop, the jit needs to know the
result type before the interpreter executes the instruction.
...And 3 more matches
JS_ValueToString
the
result is like the javascript expression ""+v.
... if v is true, false, null, or undefined, conversion succeeds, and the
result is the string "true", "false", "null", or "undefined", accordingly.
... if v is a number, conversion succeeds, and the
result is a string representation of that number as specified in ecma 262-3 §9.8.1.
...And 3 more matches
Feed content access API
nsifeed
result describes the
result of parsing a feed.
... nsifeed
resultlistener implemented by the program that wants to parse an rss or atom feed to receive notification when parsing is complete.
.../network/io-service;1'] .getservice(components.interfaces.nsiioservice); var uri = ioservice.newuri(feedurl, null, null); if (data.length) { var parser = components.classes["@mozilla.org/feed-processor;1"] .createinstance(components.interfaces.nsifeedprocessor); var listener = new feedtest
resultlistener(); try { parser.listener = listener; parser.parsefromstring(data, uri); } catch(e) { alert("error parsing feed."); } } } httprequest = new xmlhttprequest(); httprequest.open("get", feedurl, true); try { httprequest.onload = inforeceived; httprequest.send(null); } catch(e) { aler...
...And 3 more matches
History Service Design
queries
results maintenance: allows easy access to queries
results.
... a places query is made of of a query object (nsinavhistoryquery) and a query options object (nsinavhistoryqueryoptions) that defines the constraints
results must obey to.
...query uris (for example place:querytype=0&sort=8&max
results=10) can be easily built and read by users (through a built-in advanced search builder ui) and can be bookmarked, creating a so called smart bookmark.
...And 3 more matches
Using XPCOM Utilities to Make Things Easier
given the class name concreteclass, the factory macro declaration is: ns_generic_factory_constructor(concreteclass) this
results in a function called concreteclassconstructor that can be used in the nsmodulecomponentinfo structure.
...this is a common pattern when you have a local nscomptr in a function and you must pass back a reference to it, as in the following: someclass::get(nsisupports** a
result) { if (!a
result) return ns_error_null_pointer; nscomptr<nsisupports> value; object->method(getter_addrefs(value)); *a
result = value.get(); ns_if_addref(*a
result); return ns_ok; } the first thing that this method does is check to see that the caller passed a valid address.
...be very careful with the
result of .get(), however.
...And 3 more matches
Components.utils.evalInWindow
the
result is structured cloned back to the original context, unless it is native (for example, if it returns a dom node, this is not structured cloned, because the original context will see that through an xraywrapper already), so it's guaranteed to behave predictably.
...syntax var
result = components.utils.evalinwindow(script, window); parameters script : string the script to evaluate in the other window.
... returns the
result of evaluating the script.
...And 3 more matches
IAccessibleRelation
1.0 66 introduced gecko 1.9 inherits from: iunknown last changed in gecko 1.9 (firefox 3) method overview [propget] h
result localizedrelationtype([out] bstr localizedrelationtype ); [propget] h
result ntargets([out] long ntargets ); [propget] h
result relationtype([out] bstr relationtype ); [propget] h
result target([in] long targetindex, [out] iunknown target ); [propget] h
result targets([in] long maxtargets, [out, size_is(maxtargets), length_is( ntargets)] iunknown targets, [out] long ntargets ); methods localizedrelationtype() returns a localized version of the relation type.
... [propget] h
result localizedrelationtype( [out] bstr localizedrelationtype ); parameters localizedrelationtype return value s_ok.
...[propget] h
result ntargets( [out] long ntargets ); parameters ntargets return value s_ok.
...And 3 more matches
mozIStorageFunction
let stmt = dbconn.createstatement("select square(value) from some_table"); try { while (stmt.executestep()) { // handle the
results } } finally { stmt.reset(); } in earlier versions of gecko, however, you'll need to actually create an object containing the onfunctioncall method.
...let stmt = dbconn.createstatement("select square(value) from some_table"); try { while (stmt.executestep()) { // handle the
results } } finally { stmt.reset(); } c++ // first, create our class that will represent our function.
... class squarefunction : public mozistoragefunction { public: ns_imethod onfunctioncall(mozistoragevaluearray *aarguments, nsivariant **_
result) { print32 value; ns
result rv = aarguments->getint32(&value); ns_ensure_success(rv, rv); nscomptr<nsiwritablevariant>
result = do_createinstance("@mozilla.org/variant;1"); ns_ensure_true(
result, ns_error_out_of_memory); rv =
result->setasint64(value * value); ns_ensure_success(rv, rv); ns_addref(*_
result =
result); return ns_ok; } }; // now, register our function with the database connection.
...And 3 more matches
mozIStorageRow
the mozistoragerow interface represents a row in the
result set from a storage database query.
... last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: mozistoragevaluearray method overview nsivariant get
resultbyindex(in unsigned long aindex); nsivariant get
resultbyname(in autf8string aname); methods get
resultbyindex() returns the value from a specific column in the row, using a zero-based index to identify the column.
... nsivariant get
resultbyindex( in unsigned long aindex ); parameters aindex the zero-based index of the column number whose value is to be returned.
...And 3 more matches
mozIStorageStatementCallback
the mozistoragestatementcallback interface represents a callback handler that the storage api calls with
result, error, and completion notifications while handling asynchronous database queries.
... last changed in gecko 1.9.1 (firefox 3.5 / thunderbird 3.0 / seamonkey 2.0) inherits from: nsisupports method overview void handlecompletion(in unsigned short areason); void handleerror(in mozistorageerror aerror); void handle
result(in mozistorage
resultset a
resultset); constants constant value description reason_finished 0 the statement has finished executing normally.
... handle
result() called when
results from the statement are available.
...And 3 more matches
mozIVisitInfoCallback
toolkit/components/places/public/moziasynchistory.idlscriptable this interface provides callback handling functionality for moziasynchistory.updateplaces() 1.0 66 introduced gecko 2.0 inherits from: nsisupports last changed in gecko 9.0 (firefox 9.0 / thunderbird 9.0 / seamonkey 2.6) method overview void handleerror(in ns
result a
resultcode, in moziplaceinfo aplaceinfo); void handle
result(in moziplaceinfo aplaceinfo); void oncomplete(in ns
result a
resultcode, in moziplaceinfo aplaceinfo);obsolete since gecko 8.0 methods handleerror() called when a moziplaceinfo couldn't be processed.
... void handleerror( in ns
result a
resultcode, in moziplaceinfo aplaceinfo ); parameters a
resultcode ns
result indicating the reason why the change failed.
... handle
result() called for each visit added, title change, or guid change when passed to moziasynchistory.updateplaces().
...And 3 more matches
nsIAutoCompleteObserver
inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void onsearch
result(in nsiautocompletesearch search, in nsiautocomplete
result result); void onupdatesearch
result(in nsiautocompletesearch search, in nsiautocomplete
result result); methods onsearch
result() called when a search is complete and the
results are ready.
... void onsearch
result( in nsiautocompletesearch search, in nsiautocomplete
result result ); parameters search the search object that processed this search.
...
result the search
result object.
...And 3 more matches
nsIPromptService
var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var
result = prompts.confirm(null, "title of this dialog", "are you sure?"); //
result is now true if ok was clicked, and false if cancel was clicked confirmcheck example confirmcheck displays a dialog with ok/cancel and a checkbox var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var check = {value: tr...
...ue}; // default the checkbox to true var
result = prompts.confirmcheck(null, "title of this dialog", "are you sure?", "don't ask again", check); // check.value is now true if the box was checked and ok was pressed, false if // the box was cleared and ok was pressed, and is the default of true if cancel was pressed.
...var prompts = components.classes["@mozilla.org/embedcomp/prompt-service;1"] .getservice(components.interfaces.nsipromptservice); var check = {value: false}; // default the checkbox to false var input = {value: "bob"}; // default the edit field to bob var
result = prompts.prompt(null, "title", "what is your name?", input, null, check); //
result is true if ok is pressed, false if cancel.
...And 3 more matches
nsISelection2
method overview void getrangesforinterval(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32
resultcount, [retval, array, size_is(
resultcount)] out nsidomrange
results); void getrangesforintervalcomarray(in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, in rangearray
results); native code only!
... void getrangesforinterval( in nsidomnode beginnode, in print32 beginoffset, in nsidomnode endnode, in print32 endoffset, in prbool allowadjacent, out pruint32
resultcount, [retval, array, size_is(
resultcount)] out nsidomrange
results ); parameters beginnode beginoffset endnode endoffset these four parameters represent the range to compare against the selection.
...
resultcount returns the number of ranges that overlap (or touch) the input range.
...And 3 more matches
nsITransport
method overview void close(in ns
result areason); nsiinputstream openinputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); nsioutputstream openoutputstream(in unsigned long aflags, in unsigned long asegmentsize, in unsigned long asegmentcount); void seteventsink(in nsitransporteventsink asink, in nsieventtarget aeventtarget); constants open flags.
...void close( in ns
result areason ); parameters areason the reason for closing the stream.
...flags have the following meaning: open_blocking if specified, then the
resulting stream will have blocking stream semantics.
...And 3 more matches
nsIVariant
ns
result getasarray(out pruint16 type, out nsiid iid, out pruint32 count, out voidptr ptr); violates the xpcom interface guidelines astring getasastring(); native code only!
... ns
result getasid(out nsid retval); violates the xpcom interface guidelines print16 getasint16(); native code only!
... void getasinterface(out nsiidptr iid, [iid_is(iid), retval] out nsqi
result iface); native code only!
...And 3 more matches
XPCOM Interface Reference
rmozijssubscriptloadermozipersonaldictionarymoziplaceinfomoziplacesautocompletemoziregistrymozirepresentativecolorcallbackmozispellcheckingenginemozistorageaggregatefunctionmozistorageasyncstatementmozistoragebindingparamsmozistoragebindingparamsarraymozistoragecompletioncallbackmozistorageconnectionmozistorageerrormozistoragefunctionmozistoragependingstatementmozistorageprogresshandlermozistorage
resultsetmozistoragerowmozistorageservicemozistoragestatementmozistoragestatementcallbackmozistoragestatementparamsmozistoragestatementrowmozistoragestatementwrappermozistoragevacuumparticipantmozistoragevaluearraymozitxttohtmlconvmozithirdpartyutilmozivisitinfomozivisitinfocallbackmozivisitstatuscallbacknsiabcardnsiaboutmodulensiabstractworkernsiaccelerometerupdatensiaccessnodensiaccessibilityservicens...
...vicensiapplicationupdateservicensiarraynsiasyncinputstreamnsiasyncoutputstreamnsiasyncstreamcopiernsiasyncverifyredirectcallbacknsiauthinformationnsiauthmodulensiauthpromptnsiauthprompt2nsiauthpromptadapterfactorynsiauthpromptcallbacknsiauthpromptprovidernsiauthpromptwrappernsiautocompletecontrollernsiautocompleteinputnsiautocompleteitemnsiautocompletelistenernsiautocompleteobservernsiautocomplete
resultnsiautocompletesearchnsibadcertlistener2nsibidikeyboardnsibinaryinputstreamnsibinaryoutputstreamnsiblocklistpromptnsiblocklistservicensiboxobjectnsibrowserboxobjectnsibrowserhistorynsibrowsersearchservicensicrlinfonsicrlmanagernsicachensicachedeviceinfonsicacheentrydescriptornsicacheentryinfonsicachelistenernsicachemetadatavisitornsicacheservicensicachesessionnsicachevisitornsicachingchannelnsican...
...ensidomofflineresourcelistnsidomorientationeventnsidomparsernsidomprogresseventnsidomserializernsidomsimplegestureeventnsidomstoragensidomstorage2nsidomstorageeventobsoletensidomstorageitemnsidomstoragelistnsidomstoragemanagernsidomstoragewindownsidomuserdatahandlernsidomwindownsidomwindow2nsidomwindowinternalnsidomwindowutilsnsidomxpathevaluatornsidomxpathexceptionnsidomxpathexpressionnsidomxpath
resultnsidomxulcontrolelementnsidomxulelementnsidomxullabeledcontrolelementnsidomxulselectcontrolelementnsidomxulselectcontrolitemelementnsidatasignatureverifiernsidebugnsidebug2nsidevicemotionnsidevicemotiondatansidevicemotionlistenernsidialogcreatornsidialogparamblocknsidictionarynsidirindexnsidirindexlistenernsidirindexparsernsidirectoryenumeratornsidirectoryiteratornsidirectoryservicensidirectoryser...
...And 3 more matches
Debugger.Object - Firefox Developer Tools
this accessor returns whatever name appeared after the function keyword in the source code, regardless of whether the function is the
result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function’s body).
...this does not unwrap cross-compartment wrappers: if the referent is a wrapper, the
result refers to the wrapper’s global, not the wrapped object’s global.
... the
result refers to the global directly, not via a wrapper.
...And 3 more matches
Debugger.Object - Firefox Developer Tools
this accessor returns whatever name appeared after the function keyword in the source code, regardless of whether the function is the
result of instantiating a function declaration (which binds the function to its name in the enclosing scope) or evaluating a function expression (which binds the function to its name only within the function's body).
...this does not unwrap cross-compartment wrappers: if the referent is a wrapper, the
result refers to the wrapper's global, not the wrapped object's global.
... the
result refers to the global directly, not via a wrapper.
...And 3 more matches
Compositing example - Web APIs
a darker picture is the
result.', 'the pixels are inverted, multiplied, and inverted again.
... a lighter picture is the
result (opposite of multiply)', 'a combination of multiply and screen.
... dark parts on the base layer become darker, and light parts become lighter.', 'retains the darkest pixels of both layers.', 'retains the lightest pixels of both layers.', 'divides the bottom layer by the inverted top layer.', 'divides the inverted bottom layer by the top layer, and then inverts the
result.', 'a combination of multiply and screen like overlay, but with top and bottom layer swapped.', 'a softer version of hard-light.
...And 3 more matches
DOMMatrixReadOnly.scale() - Web APIs
the scale() method of the dommatrixreadonly interface creates a new matrix being the
result of the original matrix with a scale transform applied.
... if this value is anything other than 1, the
resulting matrix will be 3d.
...if this value is anything other than 0, the
resulting matrix will be 3d.
...And 3 more matches
Element.innerHTML - Web APIs
the
resulting string is returned.
...as a
result, the document contents are replaced with a display of the page's entire source code.
...doing so causes the user agent to follow these steps: the specified value is parsed as html or xml (based on the document type),
resulting in a documentfragment object representing the new set of dom nodes for the new elements.
...And 3 more matches
EventTarget.addEventListener() - Web APIs
result event listener with anonymous function here, we'll take a look at how to use an anonymous function to pass parameters into the event listener.
...
result event listener with an arrow function this example demonstrates a simple event listener implemented using arrow function notation.
...1">one</td></tr> <tr><td id="t2">two</td></tr> </table> javascript // function to change the content of t2 function modifytext(new_text) { const t2 = document.getelementbyid("t2"); t2.firstchild.nodevalue = new_text; } // add event listener to table with an arrow function const el = document.getelementbyid("outside"); el.addeventlistener("click", () => { modifytext("four"); }, false);
result please note that while anonymous and arrow functions are similar, they have different this bindings.
...And 3 more matches
FileReader - Web APIs
file objects may be obtained from a filelist object returned as a
result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
... filereader.
result read only the file's contents.
... filereader.readasarraybuffer() starts reading the contents of the specified blob, once finished, the
result attribute contains an arraybuffer representing the file's data.
...And 3 more matches
FileHandle API - Web APIs
var idbreq = indexeddb.open("myfilestoragedatabase"); idbreq.onsuccess = function(){ var db = this.
result; var buildhandle = db.mozcreatefilehandle("test.txt", "plain/text"); buildhandle.onsuccess = function(){ var myfilehandle = this.
result; console.log('handle', myfilehandle); }; }; mozcreatefilehandle() takes two arguments: a name and an optional type.
... // get a lockedfile object from the handle var myfile = myfilehandle.open('readwrite'); // retrieve the size of the file var getmeta = myfile.getmetadata(); getmeta.onsuccess = function () { var size = this.
result.size; // the reading operation will start with the byte at index 0 in the file myfile.location = 0; // start a reading operation for the whole file content var reading = myfile.readastext(size); reading.onsuccess = function () { console.log('the content of the file is:'); console.log(this.
result); } reading.onerror = function () { console.log('something goes wrong in...
... var mysnapshot = null; var request = myfilehandle.getfile(); request.onsuccess = function () { mysnapshot = this.
result; } managing progress all the methods from the lockedfile interface return a filerequest object.
...And 3 more matches
ReadableStreamDefaultReader.read() - Web APIs
return value a promise, which fulfills/rejects with a
result depending on the state of the stream.
... function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { //
result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); para.textcontent =
result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
...And 3 more matches
SpeechRecognitionAlternative.transcript - Web APIs
the transcript read-only property of the speechrecognition
result interface returns a string containing the transcript of the recognised word(s).
... for continuous recognition, leading or trailing whitespace will be included where necessary so that concatenation of consecutive speechrecognition
results produces a proper transcript of the session.
... recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
...And 3 more matches
Using readable streams - Web APIs
in the pump() function seen above we first invoke read(), which returns a promise containing a
results object — this has the
results of our read in it, in the form { done, value }: return reader.read().then(({ done, value }) => { the
results can be one of three different types: if a chunk is available to read, the promise will be fulfilled with an object of the form { value: thechunk, done: false }.
... if done is not true, we process the new chunk we’ve read (contained in the value property of the
results object) and then call the pump() function again to read the next chunk.
... function readstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { //
result objects contain two properties: // done - true if the stream has already given you all its data.
...And 3 more matches
SubtleCrypto.verify() - Web APIs
syntax const
result = crypto.subtle.verify(algorithm, key, signature, data); parameters algorithm is a domstring or object defining the algorithm to use, and for some algorithm choices, some extra parameters.
... return value
result is a promise that fulfills with a boolean: true if the signature is valid, false otherwise.
...*/ async function verifymessage(publickey) { const signaturevalue = document.queryselector(".rsassa-pkcs1 .signature-value"); signaturevalue.classlist.remove("valid", "invalid"); let encoded = getmessageencoding(); let
result = await window.crypto.subtle.verify( "rsassa-pkcs1-v1_5", publickey, signature, encoded ); signaturevalue.classlist.add(
result ?
...And 3 more matches
TextEncoder.prototype.encodeInto() - Web APIs
the textencoder.prototype.encodeinto() method takes a usvstring to encode and a destination uint8array to put
resulting utf-8 encoded text into, and returns a dictionary object indicating the progress of the encoding.
... uint8array is a uint8array object instance to place the
resulting utf-8 encoded text into.
... return value a textencoderencodeinto
result dictionary, which contains two members: read the number of utf-16 units of code from the source that has been converted over to utf-8.
...And 3 more matches
Touch events - Web APIs
drawing as the touches move each time one or more fingers move, a touchmove event is delivered,
resulting in our handlemove() function being called.
...the
result is that we stop tracking that touchpoint.
... = touch.identifier % 16; var g = math.floor(touch.identifier / 3) % 16; var b = math.floor(touch.identifier / 7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; console.log("color for touch with identifier " + touch.identifier + " = " + color); return color; } the
result from this function is a string that can be used when calling <canvas> functions to set drawing colors.
...And 3 more matches
USBDevice - Web APIs
usbdevice.controltransferin() returns a promise that resolves with a usbtransferin
result when a command or status operation has been transmitted to the usb device.
... usbdevice.controltransferout() returns a promise that resolves with a usbtransferout
result when a command or status operation has been transmitted from the usb device.
... usbdevice.isochronoustransferin() returns a promise that resolves with a usbisochronousintransfer
result when time sensitive information has been transmitted to the usb device.
...And 3 more matches
content - CSS: Cascading Style Sheets
otherwise, for uri values, the absolute uri; for attr() values, the
resulting string; for other keywords, as specified.animation typediscrete formal syntax normal | none | [ <content-replacement> | <content-list> ] [/ <string> ]?where <content-replacement> = <image><content-list> = [ <string> | contents | <image> | <quote> | <target> | <leader()> ]+where <image> = <url> | <image()> | <image-set()> | <element()> | <paint()> | <cross-fade()> | <gradient><quote> = open-q...
...</p> css q { color: blue; } q::before { content: open-quote; } q::after { content: close-quote; } h1::before { content: "chapter "; /* the trailing space creates separation between the added content and the rest of the content */ }
result image combined with text this example inserts an image before the link.
... html <a href="http://www.mozilla.org/">mozilla home page</a> css a::before { content: url("https://mozorg.cdn.mozilla.net/media/img/favicon.ico") / " mozilla: "; font: x-small arial, sans-serif; color: gray; }
result targeting classes this example inserts additional text after special items in a list.
...And 3 more matches
Applying color to HTML elements using CSS - HTML: Hypertext Markup Language
let's take a look at an example, starting by looking at the
results we're trying to achieve: html the html responsible for creating the above example is shown here: <div class="wrapper"> <div class="box boxleft"> <p> this is the first box.
... css we'll look at the css to create the above
results a piece at a time, so we can review the interesting parts one by one.
...worse still, if using the wrong colors can
result in your content being outright unusable by people withcertain vision problems, particularly color blindness.
...And 3 more matches
<input type="search"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be relied upon to be so; the
resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
... incremental whether or not to send repeated search events to allow updating live search
results while the user is still editing the value of the field.
...
results the maximum number of items that should be displayed in the drop-down list of previous search queries.
...And 3 more matches
<tr>: The Table Row element - HTML: Hypertext Markup Language
table { border: 1px solid black; } th, td { border: 1px solid black; }
result row and column spanning now, let's introduce another column that shows the date the user's membership ended, along with a super-heading above the "joined" and "canceled" dates called "membership dates".
...
result let's actually look at the output first this time: notice how the heading area here is actually two rows, one with "name", "id", "membership dates", and "balance" headings, and the other with "joined" and "canceled", which are sub-headings below "membership dates".
... table { border: 1px solid black; } th, td { border: 1px solid black; }
result the output is entirely unchanged, despite the addition of useful contextual information under the hood: basic styling as is the case with all parts of a table, you can change the appearance of a table row and its contents using css.
...And 3 more matches
itemprop - HTML: Hypertext Markup Language
examples the example below shows the source for a set of elements marked up with itemprop attributes, followed by a table showing the
resulting structured data.
...me as the previous one, but all the properties are separated from their items <div itemscope id="amanda" itemref="a b"></div> <p id="a">name: <span itemprop="name">amanda</span></p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span></p> <p>size: <span itemprop="size">12</span> players</p> </div> this gives the same
result as the previous example.
... ice cream with two flavors <div itemscope> <p>flavors in my favorite ice cream:</p> <ul> <li itemprop="flavor">lemon sorbet</li> <li itemprop="flavor">apricot sorbet</li> </ul> </div> this
results in an item with two properties, both with the name "flavor" and having the values "lemon sorbet" and "apricot sorbet".
...And 3 more matches
Meta programming - JavaScript
the
result of object.getownpropertydescriptor(target) can be applied to target using object.defineproperty and will not throw an exception.
... handler.ownkeys() object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() the
result of ownkeys is a list.
... the type of each
result list element is either string or symbol.
...And 3 more matches
Regular expression syntax cheatsheet - JavaScript
however, neither "sprat" nor "frost" is part of the match
results.
...however, neither "jack" nor "tom" is part of the match
results.
...in
results, matches to capturing groups typically in an array whose members are in the same order as the left parentheses in the capturing group.
...And 3 more matches
Math.sign() - JavaScript
polyfill if (!math.sign) { math.sign = function(x) { // if x is nan, the
result is nan.
... // if x is -0, the
result is -0.
... // if x is +0, the
result is +0.
...And 3 more matches
eval() - JavaScript
function test() { var x = 2, y = 4; console.log(eval('x + y')); // direct call, uses local scope,
result is 6 var geval = eval; // equivalent to calling eval in the global scope console.log(geval('x + y')); // indirect call, uses global scope, throws referenceerror because `x` is undefined (0, eval)('x + y'); // another example of indirect call } never use eval()!
...this can be done with eval(): var obj = { a: 20, b: 30 }; var propname = getpropname(); // returns "a" or "b" eval( 'var
result = obj.' + propname ); however, eval() is not necessary here.
...instead, use the property accessors, which are much faster and safer: var obj = { a: 20, b: 30 }; var propname = getpropname(); // returns "a" or "b" var
result = obj[ propname ]; // obj[ "a" ] is the same as obj.a you can even use this method to access descendant properties.
...And 3 more matches
isNaN() - JavaScript
origin of nan values nan values are generated when arithmetic operations
result in undefined or unrepresentable values.
...a nan also
results from attempted coercion to numeric values of non-numeric values for which no primitive numeric value is available.
... for example, dividing zero by zero
results in a nan — but dividing other numbers by zero does not.
...And 3 more matches
The building blocks of responsive design - Progressive web apps (PWAs)
note: media queries are a css3 feature that allow you to selectively apply css depending on the
results of media feature tests — for more on the basics, read media queries.
... this
results in the following layout: note: another solution with respect to orientation might be to just lock the orientation of your app, to portrait or landscape.
...instead, they render pages at a higher assumed viewport width (something approaching a laptop screen), and then shrink the
result down to fit inside the mobile screen.
...And 3 more matches
in - SVG: Scalable Vector Graphics
the value can be either one of the six keywords defined below, or a string which matches a previous
result attribute value within the same <filter> element.
...if no value is provided and this is a subsequent filter primitive, then this filter primitive will use the
result from the previous filter primitive as its input.
... if the value for
result appears multiple times within a given <filter> element, then a reference to that
result will use the closest preceding filter primitive with the given value for attribute
result.
...And 3 more matches
Exported WebAssembly functions - WebAssembly
when you call them, you get some activity in the background to convert the arguments into types that wasm can work with (for example converting javascript numbers to int32), the arguments are passed to the function inside your wasm module, the function is invoked, and the
result is converted and passed back to javascript.
... we then get the function exported from the module, retrieve the functions it references via tbl.get() and log the
result of invoking each one to the console.
... to prove this, we then retrieve these references back from othertable and print their
results to console too, which gives the same
results.
...And 3 more matches
Classes and Inheritance - Archive of obsolete content
moreover, if the constructor does not return a value, the
result of the call defaults to the value of this.
...the
resulting constructor looks as follows: function circle(x, y, radius) { if (!this) return new circle(x, y, radius); shape.call(this, x, y); this.radius = radius; } note that the constructor for shape is called as an ordinary function, and reuses the object created for the constructor call to circle.
...the
resulting behavior is what we were aiming for.
...And 2 more matches
Modules - Archive of obsolete content
to prevent scripts from interfering with each other, loadscript should evaluate each script to be loaded in the scope of their own global object, and then return the global object as its
result.
...passing an xul url will
result in a compartment with chrome privileges (note, however, that if you ever actually do this in any of your code, gabor will be forced to hunt you down and kill you).
...this function takes the id to be resolved and the requiring module as an argument, and returns the resolved id as its
result.
...And 2 more matches
util/array - Archive of obsolete content
fromiterator(iterator) iterates over an iterator and returns the
results as an array.
... let { fromiterator } = require('sdk/util/array'); let i = new set(); i.add('otoro'); i.add('unagi'); i.add('keon'); fromiterator(i) // ['otoro', 'unagi', 'keon'] parameters iterator : iterator the iterator object over which to iterate and place
results into an array.
... returns array : the iterator's
results in an array.
...And 2 more matches
Search Extension Tutorial (Draft) - Archive of obsolete content
in particular, changing the location bar search keyword url in a way which is not automatically reset when the add-on is removed will
result in a reset prompt for users.
... other settings violations designed to restrict user choice will
result in stronger action, such as blacklisting of the add-ons in question.
...the following example bootstrap.js file illustrates the method: const { classes: cc, interfaces: ci, utils: cu,
results: cr } = components; // import the services module.
...And 2 more matches
MCD, Mission Control Desktop, AKA AutoConfig - Archive of obsolete content
if it is not possible to give access to anonymous, //you have to enable this function first, please see //http://technet.microsoft.com/de-de/library/cc816788(ws.10).aspx // // //put everything in a try/catch try { var userinfo = new object(); // this will hold ldap
results userinfo.envuser = getenv("username"); // username userinfo.envhome = getenv("home"); // user home directory var ldaphost = "example.com"; var ldapbase = "dc=company,dc=local"; if( userinfo.envuser ) { var ldapfilter = "samaccountname=" + userinfo.envuser; } else { throw("couldn't get uid from the environment"); } // ldap attributes to retrieve from the server var ldapattrs = new...
... array( "cn", "mail", "samaccountname" ); // add more attributes here, if needed) // define how to process ldap
results before we make the call function processldapvalues(query
results) { if( query
results ) { // build the userinfo object for later use for( var attr in ldapattrs ) { userinfo[ ldapattrs[attr] ] = getldapvalue( query
results, ldapattrs[attr] ); } } else { throw( "no ldap
results" ); } } // call upon ldap for the values in ldapattrs array, // uses the previous processldapvalues() getldapattributes( ldaphost, ldapbase, ldapfilter, ldapattrs.join(",") ); // create account // see also http://blog.deanandadie.net/2010/06/easy-thunderbird-account-management-using-mcd/ // identity defaultpref("mail.identity.id1.fullname", userinfo.cn ); defaultpref("mail.identi...
..."component returned failure code: 0xc1f30001 (ns_error_not_initialized) [nsildapurl.spec]" ns
result: "0xc1f30001 (ns_error_not_initialized)" location: "js frame :: file:////usr/lib/thunderbird-3.0b2/defaults/autoconfig/prefcalls.js :: getldapattributes :: line 174" data: no] bug 295329 had been re-opened .
...And 2 more matches
Creating a Help Content Pack - Archive of obsolete content
the glossary and index data sources will be hidden - information found only in them will not be displayed unless the user conducts a search of the help pack that would return glossary or index
results.xxx this sentence is ugly - a little rewording help here would be nice a data source description is pretty much the same no matter which type you're defining, and the syntax is pretty simple.
... nc:emptysearchtext specifies the text that is shown when a search through help returns no
results.
... nc:emptysearchlink specifies what uri should be shown when the pseudo-
result "no
results found" is accessed.
...And 2 more matches
Monitoring downloads - Archive of obsolete content
the
result is a window you can open by choosing "download log" in the tools menu, which lists all downloads that have been started since you installed the extension.
... to iterate over the
results, we use a while loop that calls the mozistoragestatement object's executestep() method.
... each time that method is called, one row of the
results is fetched.
...And 2 more matches
Nanojit - Archive of obsolete content
the
result of compilation is a function that the application can call from c via a pointer to the first instruction.
... out.ins0(lir_start); lins *two = out.insimm(2); lins *firstparam = out.insparam(0, 0); lins *
result = out.ins2(lir_add, firstparam, two); out.ins1(lir_ret,
result); // emit a lir_loop instruction.
... out.ins0(lir_start); lins *two = out.insimm(2); lins *firstparam = out.insparam(0, 0); lins *
result = out.ins2(lir_add, firstparam, two); out.ins1(lir_ret,
result); basically, what the code provided above is doing is feeding raw lir into the lir buffer, using the lirwriter's writer object.
...And 2 more matches
How to implement a custom XUL query processor component - Archive of obsolete content
here is our sample javascript xpcom query processor: components.utils.import("resource://gre/modules/xpcomutils.jsm"); // basic wrapper for nsixultemplate
result function template
result(adata) { this._data = adata; // just make a random number for the id this._id = math.random(100000).tostring(); } template
result.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplate
result]), // private storage _data: null, // right now our
results are flat lists, so no containing/recursion take place iscontainer: fals...
... rulematched: function(aquery, arulenode) { }, // the output for a
result has been removed and the
result is no longer being used by the builder hasbeenremoved: function() { } }; // basic wrapper for nsisimpleenumerator function template
resultset(aarrayofdata) { this._index = 0; this._array = aarrayofdata; } template
resultset.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsisimpleenumerator]), hasmoreelements: function() { ...
... return this._index < this._array.length; }, getnext: function() { return new template
result(this._array[this._index++]); } }; // the query processor class - implements nsixultemplatequeryprocessor function templatequeryprocessor() { // our basic list of data this._data = [ {name: "mark", age: 36, hair: "brown", eye: "brown"}, {name: "bill", age: 25, hair: "red", eye: "black"}, {name: "joe", age: 15, hair: "blond", eye: "blue"}, {name: "jimmy", age: 65, hair: "gray", eye: "dull"} ]; } templatequeryprocessor.prototype = { queryinterface: xpcomutils.generateqi([components.interfaces.nsixultemplatequeryprocessor]), classdescription: "sample xul template query processor", classid: components.id("{2...
...And 2 more matches
Creating an Installer - Archive of obsolete content
here is an example: function donefn ( name ,
result ){ alert("the package " + name + " was installed with a
result of " +
result); } var xpi = new object(); xpi["calendar"] = "calendar.xpi"; installtrigger.install(xpi,donefn); first, we define a callback function donefn() which will be called when the install is complete.
...the second argument is a
result code.
... if the
result is 0, the installation completed successfully.
...And 2 more matches
NPN_Invoke - Archive of obsolete content
syntax #include <npruntime.h> bool npn_invoke(npp npp, npobject *npobj, npidentifier methodname, const npvariant *args, uint32_t argcount, npvariant *
result); parameters the function has the following parameters: npp the npp indicating which plugin wants to call the method on the object.
...
result a pointer to an npvariant to receive the
result returned by the method.
...if the method was invoked successfully, any return value is stored in the npvariant specified by
result.
...And 2 more matches
NPN_InvokeDefault - Archive of obsolete content
syntax #include <npruntime.h> bool npn_invokedefault(npp npp, npobject *npobj, const npvariant *args, uint32_t argcount, npvariant *
result); parameters the function has the following parameters: npp the npp indicating which plugin wants to call the default method on the object.
...
result a pointer to an npvariant to receive the
result returned by the default method.
...if the default method was invoked successfully, any return value is stored in the npvariant specified by
result.
...And 2 more matches
Positioning - Learn web development
go ahead and update the position declaration in your code: position: relative; if you save and refresh at this stage, you won't see a change in the
result at all.
... if you now save and refresh, you'll get a
result something like this: <h1>relative positioning</h1> <p>i am a basic block level element.
... absolute positioning absolute positioning brings very different
results.
...And 2 more matches
Fundamental text and font styling - Learn web development
a font-family example let's add to our previous example, giving the paragraphs a sans-serif font: p { color: red; font-family: helvetica, arial, sans-serif; } this gives us the following
result: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat.
...this is an absolute unit — it
results in the same final computed value for the font on the page in pretty much any situation.
... our new
result is like so: <h1>tommy the cat</h1> <p>well i remember it as though it were a meal ago...</p> <p>said tommy the cat as he reeled back to clear whatever foreign matter may have nestled its way into his mighty throat.
...And 2 more matches
General asynchronous programming concepts - Learn web development
if a function relies on the
result of another function, it has to wait for the other function to finish and return, and until that happens, the entire program is essentially stopped from the perspective of the user.
...this becomes a problem when a function relies on the
results of multiple previous processes to function.
... main thread: task a --> task b --> |task d| worker thread: task c -----------> | | in this case, let's say task d makes use of the
results of both task b and task c.
...And 2 more matches
Function return values - Learn web development
in the code above, the
result of this return value is saved in the variable newstring.
...you want to get to a final
result, which involves some values that need to be calculated by a function.
... after the function calculates the value, it can return the
result so it can be stored in a variable; and you can use this variable in the next stage of the calculation.
...And 2 more matches
What went wrong? Troubleshooting JavaScript - Learn web development
logic errors: these are errors where the syntax is actually correct but the code is not what you intended it to be, meaning that program runs successfully but gives incorrect
results.
... save and refesh, and you should now see the console.log()
result in your console.
... math.random() next, we pass the
result of invoking math.random() through math.floor(), which rounds the number passed to it down to the nearest whole number.
...And 2 more matches
Introduction to the server side - Learn web development
companies like amazon use server-side programming to construct search
results for products, make targeted product suggestions based on client preferences and previous buying habits, simplify purchases, etc.
... the server is not limited to sending information from databases, and might alternatively return the
result of software tools, or data from communications services.
... search for a number of keywords and note how the page structure doesn't change, even though the
results do.
...And 2 more matches
Handling common accessibility problems - Learn web development
tenon: another nice online tool that goes through the code at a provided url and returns
results on accessibility errors including metrics, specific errors along with the wcag criteria they affect, and suggested fixes.
... it requires a free trial signup to view the
results.
... check out the description of the accessibility problems on the
results page (the icons you can click to see what problems are occuring where are rather useful).
...And 2 more matches
Introduction to automated testing - Learn web development
use a browser automation system like selenium to run specific tests on installed browsers and return
results, alerting you to failures in browsers as they crop up.
...it is possible to set up a task runner to access a service like sauce labs, or lambdatest via an api, run cross browser tests, and return
results.
...jshint = require('gulp-jshint'); add the following test to the bottom of gulpfile.js: function js(cb) { return gulp.src('src/main.js') .pipe(jshint()) .pipe(jshint.reporter('default')) .pipe(babel({ presets: ['@babel/env'] })) .pipe(gulp.dest('build')); cb(); } here we grab our main.js file, run jshint on it and output the
results to the terminal using jshint.reporter; we then pass the file to babel, which converts it to old style syntax and outputs the
result into the build directory.
...And 2 more matches
Eclipse CDT Manual Setup
if you set up eclipse as detailed below, you will experience much better
results.
... to be able to provide really good code assistance for a project's source code, ides like eclipse need to carry out a thorough static analysis of the project's source files, to build up a picture of the code (what eclipse is trying to do when it "indexes" the source.) static analysis involves parsing the source files, so naturally it can only produce good
results if it has a sensible set of preprocessor defines, include paths and pre-include files for each source file.
...finally, the build must not be parallelized, since that would
result in the interleaving of build output from different directories (breaking resolution of relative paths by interleaving the "entering directory..."/"leaving directory..." lines), and the build must not be silenced/quietened.
...And 2 more matches
Performance
do some work on the window } function dosomething(message) {
result = helper(content, message.data) sendasyncmessage("my-addon:response-from-child", {something:
result}) } addmessagelistener("my-addon:request-from-parent", dosomething) why is this bad?
...do some work on the window } function dosomething(message) { frameglobal = message.target
result = helper(frameglobal.content, message.data) frameglobal.sendasyncmessage("my-addon:response-from-child", {something:
result}) } function addframe(frameglobal) { frameglobal.addmessagelistener("my-addon:request-from-parent", dosomething) } javascript modules are per-process singletons and thus all their objects are only initialized once, which makes them suitable for stateless callbacks.
...essage) => { tabmm.removemessagelistener("my-addon:paragraph-count", callback) decoratebutton(button, message.data.num) } tabmm.addmessagelistener("my-addon:paragraph-count", callback); tabmm.loadframescript("data:,sendasyncmessage('my-addon:paragraph-count', {num: content.document.queryselectorall('p').length})", false) } function decoratebutton(button, count) { // do stuff with
result } this executes the script only when it is needed and only in one tab and allows it to be garbage-collected immediately after execution.
...And 2 more matches
Performance best practices for Firefox front-end engineers
normally, the changes to the dom just
result in the standard style calculation occurring immediately after the javascript has finished running during the 16ms window, inside the "style" step.
...normally, however, the changes to the dom just
result in the standard style calculation that occurs immediately after the javascript has finished running during the 16ms window.
... here’s a simple example, cribbed from this blog post by paul rouget: div1.style.margin = "200px"; // line 1 var height1 = div1.clientheight; // line 2 div2.classlist.add("foobar"); // line 3 var height2 = div2.clientheight; // line 4 dosomething(height1, height2); // line 5 at line 1, we’re setting some style information on a dom node that’s going to
result in a reflow - but (at just line 1) it’s okay, because that reflow will happen after the style calculation.
...And 2 more matches
HTTP Cache
unimplemented or underimplemented functionality: asyncevictstorage (bug 977766), asyncvisitstorage (bug 916052) nsicacheentryopencallback //github.com/realityripple/uxp/blob/master/netwerk/cache2/nsicacheentryopencallback.idl the
result of nsicachestorage.asyncopenuri is always and only sent to callbacks on this interface.
...d as 'new', state = empty otherwise: cachefile is created and load on it started cacheentry::onfileready notification is now expected state == loading: just do nothing and exit call to cacheentry::invokecallbacks cacheentry::invokecallbacks (entry atomic): called on: a new opener has been added to the fifo via an asyncopen call asynchronous
result of cachefile open the writer throws the entry away the output stream of the entry has been opened or closed metadataready or setvalid on the entry has been called the entry has been doomed state == empty: on oper_readonly flag use: oncacheentryavailable with null for the cache entry otherwise: state = writing opener is removed from the fifo and remembered...
... as the current 'writer' oncacheentryavailable with anew = true and this entry is invoked (on the caller thread) for the writer state == ready: oncacheentrycheck with the entry is invoked on the first opener in fifo - on the caller thread if demanded
result == recheck_after_write_finished: opener is left in the fifo with a flag recheckafterwrite such openers are skipped until the output stream on the entry is closed, then oncacheentrycheck is re-invoked on them note: here is a potential for endless looping when recheck_after_write_finished is abused
result == entry_needs_revalidation: state = revalidating, this prevents invocation of any callback until cacheentry::setvalid is called continue as in state entry_wanted (jus...
...And 2 more matches
Implementing QueryInterface
else if ( aiid.equals(nscomtypeinfo<nsisupports>::getiid()) ) foundinterface = ns_static_cast(nsisupports*, ns_static_cast(nsix*, this)); // i (may) have multiple |nsisupports| in me, // so first i cast to a specific base to avoid ambiguity else foundinterface = 0; ns
result status; if ( !foundinterface ) status = ns_nointerface; else { ns_addref(foundinterface); status = ns_ok; } *ainstanceptr = foundinterface; return status; } what's so good about it?
... it addrefs the
resulting interface, not this, thus following the com-correct way (particularly important in aggregation) it uses nscomtypeinfo<t>::getiid() instead of ktiid thus saving a global declaration and global space it uses c 's static_cast, via ns_static_cast, which detects errors when you can't really get to the desired interface.
... it clears the
result, *ainstanceptr, when returning an error.
...And 2 more matches
JavaScript-DOM Prototypes in Mozilla
it is not standard and cannot be expected to have any
result.
... here is an attempt to modify a host object: (function(){ try { image.prototype.src = 1; } catch(ex){ alert(ex); } })(); this demonstrates that the image constructor, a host object supported in nearly all browsers for mac and windows, has a prototype property, and that an attempt to modify the prototype's src - property
results in an error.
...
results in other browsers is not guaranteed.
...And 2 more matches
Task.jsm
method overview function async(atask); promise spawn(atask); properties attribute type description
result read only constructor constructs a special exception that, when thrown inside a legacy generator function, allows the associated task to be resolved with a specific value.
...; throw new task.
result("value"); } note: if you want to exit early from a generator function, without returning a value for the task, you can just use the return statement without any arguments.
... note: if you want to return a
result from a non-legacy generator function, don't use this.
...And 2 more matches
Running NSPR tests
to run the test suite, run the shell script mozilla/nsprpub/pr/tests/runtests.sh in the directory where the test program binaries reside, for example, cvs -q co -r nspr_4_6_6_rtm mozilla/nsprpub mkdir linux.debug cd linux.debug ../mozilla/nsprpub/configure gmake cd pr/tests gmake ../../../mozilla/nsprpub/pr/tests/runtests.sh the output of the test suite looks like this: nspr test
results - tests begin mon mar 12 11:44:41 pdt 2007 nspr_test_logfile /dev/null test
result accept passed acceptread passed acceptreademu passed affinity passed alarm passed anonfm passed atomic passed attach ...
... passed tpd passed udpsrv passed vercheck passed version passed writev passed xnotify passed zerolen passed end mon mar 12 11:55:47 pdt 2007 how to determine if the test suite passed if all the tests reported passed as the
results, the test suite passed.
... what if some of the tests crashed or reported failed as the
results?
...And 2 more matches
Building NSS
you can also build nss on the windows subsystem for linux, but the
resulting binaries aren't usable by other windows applications.
... build with make alternatively, there is a make target called "nss_build_all", which produces a similar
result.
... test
results running all tests can take a considerable amount of time.
...And 2 more matches
JS::Evaluate
on success, if rval is not null, *rval receives the
result value.
...if it is non-null, then on success, the
result value is stored in *rval.
...in the common case where the script is just an expression, the
result value is simply the value of that expression.
...And 2 more matches
JS_EvaluateScript
on success, if rval is not null, *rval receives the
result value.
...if it is non-null, then on success, the
result value is stored in *rval.
...in the common case where the script is just an expression, the
result value is simply the value of that expression.
...And 2 more matches
Web Replay
both of these involve inter-thread communication and calls to non-deterministic apis, and the
resulting non-determinism must be allowed within the replaying process.
... when a call/message is intercepted, the wrapped call/message is not performed, but rather the
results of the call/message are read from the data stream and returned to the caller, emulating the behavior of the call/message.
... failed operations currently just produce a placeholder "incomplete"
result.
...And 2 more matches
Secure Development Guidelines
ed to by an existing function pointer a vulnerability is required to modify the eip or sensitive memory saved return addr or function pointer get altered introduction: gaining control (3) common issues used to gain control buffer overflows format string bugs integer overflows/underflows writing secure code: input validation input validation most vulnerabilities are a
result of un-validated input always perform input validation could save you without knowing it examples: if it doesn’t have to be negative, store it in an unsigned int if the input doesn’t have to be > 512, cut it off there if the input should only be [a-za-z0-9], enforce it cross site scripting (xss) xss is a type of code injection attack typically occurs in web applicatio...
...t is mixed with a sql string sql is a language used to interact with databases code injection attack that is similar to xss but targeted at sql rather than html and javascript if input is mixed with sql, it could itself become an sql instruction and be used to: query data from the database (passwords) insert value into the database (a user account) change application logic based on
results returned by the database sql injection: example snprintf(str, sizeof(str), "select * from account where name ='%s'", name); sqlite3_exec(db, str, null, null, null); sql injection: prevention use parameterized queries insert a marker for every piece of dynamic content so data does not get mixed with sql instructions example: sqlite3_stmt *stmt; char *str = "select * f...
... bbv: array indexing issues always ensure that the index is within the bounds of the array never use signed integers as index buf[strlen(buf) - 1] = '\0'; strlen() could return 0;
resulting in a negative index!
...And 2 more matches
Language bindings
these exception objects may be thrown when implementing xpcom interfaces in javascript, and they can provide better diagnostics in the error console if not caught than simply throwing an ns
result's value will.components.idcomponents.id is a constructor that creates native objects that conform to the nsijsid interface.components.interfacescomponents.interfaces is a read-only object whose properties are interfaces indexed by their names.components.interfacesbyidcomponents.interfacesbyid is a read-only array of classes indexed by iid.components.issuccesscodedetermines whether a given xpcom r...
...eturn code (that is, an ns
result value) indicates the success or failure of an operation, returning true or false respectively.components.last
resultcomponents.managercomponents.manager is a convenience reflection of the global native component manager service.
... the scriptable methods on the nsicomponentmanager interface can be called directly on this object.components.
resultscomponents.
results is a read-only object whose properties are the names listed as the first parameters of the macros in js/xpconnect/src/xpc.msg (also at table of errors), with the value of each corresponding to that constant's value.components.returncodecomponents.stackcomponents.stack is a read only property of type nsistackframe (idl definition) that represents a snapshot of the current javascript callstack.
...And 2 more matches
IAccessibleApplication
method overview [propget] h
result appname([out] bstr name ); [propget] h
result appversion([out] bstr version ); [propget] h
result toolkitname([out] bstr name ); [propget] h
result toolkitversion([out] bstr version ); methods appname() returns the application name.
... [propget] h
result appname( [out] bstr name ); parameters name the application name.
...[propget] h
result appversion( [out] bstr version ); parameters version the application version.
...And 2 more matches
IAccessibleValue
method overview [propget] h
result currentvalue([out] variant currentvalue ); [propget] h
result maximumvalue([out] variant maximumvalue ); [propget] h
result minimumvalue([out] variant minimumvalue ); h
result setcurrentvalue([in] variant value ); methods currentvalue() returns the value of this object as a number.
...[propget] h
result currentvalue( [out] variant currentvalue ); parameters currentvalue returns the current value represented by this object.
...[propget] h
result maximumvalue( [out] variant maximumvalue ); parameters maximumvalue returns the maximal value in an implementation dependent type.
...And 2 more matches
jsdIStackFrame
attempting to alter this bit will
result in an ns_error_illegal_value.
...method overview boolean eval(in astring bytes, in autf8string filename, in unsigned long line, out jsdivalue
result); attributes attribute type description callee jsdivalue function object running in this stack frame.
... isdebugger boolean true if stack frame represents a frame created as a
result of a debugger evaluation.
...And 2 more matches
nsICryptoHash
in this example we take the binary data and produce a hexadecimal string of the
result, as is commonly output by hashing programs.
...you should always use the same encoding if you intend to compare
results.
...the
result is computed as a hex string as in the previous example.
...And 2 more matches
nsIFileProtocolHandler
the
resulting string may contain url-escaped characters.
...the
resulting string may contain url-escaped characters.
...if the nsifile is a local file, then the
result will be a file:// url string.
...And 2 more matches
nsINavHistoryObserver
it's possible for a history entry to be deleted even though it has no visits if something is out of sync after a bookmark with no visits is deleted; this
results in the entire history entry being freed).
... awholeentry true if this expiration will
result in the entire history entry being deleted from the history store; if false, only the specified visit is being deleted.
...normally, transition types of transition_embed (corresponding to images in a page, for example) are not displayed in history
results (unless includehidden is set).
...And 2 more matches
nsIProperties
to get an instance, use: var properties = components.classes["@mozilla.org/file/directory_service;1"] .getservice(components.interfaces.nsiproperties); method overview void get(in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqi
result result); void getkeys(out pruint32 count, [array, size_is(count), retval] out string keys); boolean has(in string prop); void set(in string prop, in nsisupports value); void undefine(in string prop); methods get() gets the xpcom object associated with a particular name.
... void get( in string prop, in nsiidref iid, [iid_is(iid),retval] out nsqi
result result ); parameters prop the property name.
...
result the
resulting object instance.
...And 2 more matches
nsIServiceManager
inherits from: nsisupports last changed in gecko 1.0 method overview void getservice(in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result); void getservicebycontractid(in string acontractid, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result); boolean isserviceinstantiated(in nscidref aclass, in nsiidref aiid); boolean isserviceinstantiatedbycontractid(in string acontractid, in nsiidref aiid); methods getservice() this method returns a reference to a particular xpcom service giv...
... void getservice( in nscidref aclass, in nsiidref aiid, [iid_is(aiid),retval] out nsqi
result result ); parameters aclass the classid of the service that is being requested.
...
result the
resulting interface pointer.
...And 2 more matches
nsIXmlRpcClient
last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) inherits from: nsisupports method overview void init(in string serverurl); void setauthentication(in string username, in string password); void clearauthentication(in string username, in string password); void setencoding(in string encoding); void setencoding(in unsigned long type, out nsiidref uuid, out nsqi
result result); void asynccall (in nsixmlrpcclientlistener listener, in nsisupports ctxt, in string methodname, in nsisupports arguments, in pruint32 count); attributes attribute type description serverurl readonly nsiurl the url of the xml-rpc server inprogress readonly boolean whether or not a call is in progress fault readonly nsixmlrpcfault the most recent xml-rpc fault from returned f...
...
result readonly nsisupports the most recent xml-rpc call
result returned from this server.
... null if the last call didn't return a valid
result.
...And 2 more matches
Working with data
the
resulting data is then copied into a new cdata object.
... if the type is an array of 8-bit characters and value is a utf-16 string, the new cdata object is the
result of converting the utf-16 string to utf-8, with a null terminator.
... you can work around this by serializing these values using the tostring() method and comparing using the
resulting string.
...And 2 more matches
AbstractRange - Web APIs
a collapsed range is one whose start position and end position are the same,
resulting in a zero-character-long range.
... <h2>section 1: an interesting thing...</h2> <p>a <em>very</em> interesting thing happened on the way to the forum...</p> <aside class="callout"> <h2>aside</h2> <p>an interesting aside to share with you...</p> </aside> </section> </article> <pre id="log"></pre> </div> after loading the html and constructing the dom representation of the document, the
resulting dom tree looks like this: in this diagram, the nodes representing html elements are shown in green.
...what should the
result look like?
...And 2 more matches
CanvasRenderingContext2D.arcTo() - Web APIs
note: be aware that you may get unexpected
results when using a relatively large radius: the arc's connecting line will go in whatever direction it must to meet the specified radius.
...estyle = 'black'; ctx.linewidth = 5; ctx.moveto(200, 20); ctx.arcto(200,130, 50,20, 40); ctx.stroke(); // start point ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.arc(200, 20, 5, 0, 2 * math.pi); ctx.fill(); // control points ctx.beginpath(); ctx.fillstyle = 'red'; ctx.arc(200, 130, 5, 0, 2 * math.pi); // control point one ctx.arc(50, 20, 5, 0, 2 * math.pi); // control point two ctx.fill();
result in this example, the path created by arcto() is thick and black.
...'2d'); const p0 = { x: 230, y: 20 } const p1 = { x: 90, y: 130 } const p2 = { x: 20, y: 20 } const labelpoint = function (p) { const offset = 15; ctx.filltext('(' + p.x + ',' + p.y + ')', p.x + offset, p.y + offset); } ctx.beginpath(); ctx.moveto(p0.x, p0.y); ctx.arcto(p1.x, p1.y, p2.x, p2.y, 50); ctx.lineto(p2.x, p2.y); labelpoint(p0); labelpoint(p1); labelpoint(p2); ctx.stroke();
result result of a large radius if you use a relatively large radius, the arc may appear in a place you didn't expect.
...And 2 more matches
CanvasRenderingContext2D.scale() - Web APIs
for instance, a scaling factor of 0.5
results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size.
...a value of 1
results in no horizontal scaling.
...a value of 1
results in no vertical scaling.
...And 2 more matches
Drawing shapes with canvas - Web APIs
uld look something like this: <html> <body onload="draw();"> <canvas id="canvas" width="100" height="100"></canvas> </body> </html> function draw() { var canvas = document.getelementbyid('canvas'); if (canvas.getcontext) { var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(75, 50); ctx.lineto(100, 75); ctx.lineto(100, 25); ctx.fill(); } } the
result looks like this: screenshotlive sample moving the pen one very useful function, which doesn't actually draw anything but becomes part of the path list described above, is the moveto() function.
...= canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(75, 75, 50, 0, math.pi * 2, true); // outer circle ctx.moveto(110, 75); ctx.arc(75, 75, 35, 0, math.pi, false); // mouth (clockwise) ctx.moveto(65, 65); ctx.arc(60, 65, 5, 0, math.pi * 2, true); // left eye ctx.moveto(95, 65); ctx.arc(90, 65, 5, 0, math.pi * 2, true); // right eye ctx.stroke(); } } the
result looks like this: screenshotlive sample if you'd like to see the connecting lines, you can remove the lines that call moveto().
... the statement for the clockwise parameter
results in the first and third row being drawn as clockwise arcs and the second and fourth row as counterclockwise arcs.
...And 2 more matches
EXT_disjoint_timer_query.getQueryObjectEXT() - Web APIs
must be ext.query_
result_ext or ext.query_
result_available_ext.
... return value depends on pname: if pname is ext.query_
result_ext: a gluint64ext containing the query
result.
... if pname is ext.query_
result_available_ext: a glboolean indicating whether or not a query
result is available.
...And 2 more matches
Using Fetch - Web APIs
const formdata = new formdata(); const filefield = document.queryselector('input[type="file"]'); formdata.append('username', 'abc123'); formdata.append('avatar', filefield.files[0]); fetch('https://example.com/profile/avatar', { method: 'put', body: formdata }) .then(response => response.json()) .then(
result => { console.log('success:',
result); }) .catch(error => { console.error('error:', error); }); uploading multiple files files can be uploaded using an html <input type="file" multiple /> input element, formdata() and fetch().
... const formdata = new formdata(); const photos = document.queryselector('input[type="file"][multiple]'); formdata.append('title', 'my vegas vacation'); for (let i = 0; i < photos.files.length; i++) { formdata.append('photos', photos.files[i]); } fetch('https://example.com/posts', { method: 'post', body: formdata, }) .then(response => response.json()) .then(
result => { console.log('success:',
result); }) .catch(error => { console.error('error:', error); }); processing a text file line by line the chunks that are read from a response are not broken neatly at line boundaries and are uint8arrays, not strings.
...utf8decoder.decode(chunk) : ''; const re = /\n|\r|\r\n/gm; let startindex = 0; let
result; for (;;) { let
result = re.exec(chunk); if (!
result) { if (readerdone) { break; } let remainder = chunk.substr(startindex); ({ value: chunk, done: readerdone } = await reader.read()); chunk = remainder + (chunk ?
...And 2 more matches
FileReader.readAsDataURL() - Web APIs
at that time, the
result attribute contains the data as a data: url representing the file's data as a base64 encoded string.
... note: the blob's
result cannot be directly decoded as base64 without first removing the data-url declaration preceding the base64-encoded data.
... to retrieve only the base64 encoded string, first remove data:*/*;base64, from the
result.
...And 2 more matches
IDBObjectStore.get() - Web APIs
if a value is successfully found, then a structured clone of it is created and set as the
result of the request object.
... note: this method produces the same
result for: a) a record that doesn't exist in the database and b) a record that has an undefined value.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
...And 2 more matches
Basic concepts - Web APIs
they also have readystate,
result, and errorcode properties that tell you the status of the request.
... the
result property is particularly magical, as it can be many different things, depending on how the request was generated (for example, an idbcursor instance, or the key for a value that you just inserted into the database).
... indexeddb uses dom events to notify you when
results are available.
...And 2 more matches
MediaDevices.getUserMedia() - Web APIs
the following requests both audio and video without any specific requirements: { audio: true, video: true } if true is specified for a media type, the
resulting stream is required to have that type of track in it.
... if one cannot be included for any reason, the call to getusermedia() will
result in an error.
... overconstrainederror the specified constraints
resulted in no candidate devices which met the criteria requested.
...And 2 more matches
RTCPeerConnection.addTrack() - Web APIs
s getusermedia() to obtain a stream from a user's camera and microphone, then adds each track from the stream to the peer connection, without specifying a stream for each track: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) { pc.addtrack(track); } } the
result is a set of tracks being sent to the remote peer, with no stream associations.
... if all of those criteria are met, the sender gets reused, which
results in these changes occurring to the existing rtcrtpsender and its rtcrtptransceiver: the rtcrtpsender's track is set to the specified track.
...this also
results in the creation of the associated objects that must exist.
...And 2 more matches
SpeechRecognitionAlternative.confidence - Web APIs
the confidence read-only property of the speechrecognition
result interface returns a numeric estimate of how confident the speech recognition system is that the recognition is correct.
... recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
... // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognition
result at position 0.
...And 2 more matches
Using multi-column layouts - CSS: Cascading Style Sheets
</p> </div> css #col { column-count: 2; }
result will display the content in two columns (if you're using a multi-column compliant browser): the column-width property sets the minimum desired column width.
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #wid { column-width: 100px; }
result the exact details are described in the css3 specification.
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </div> css #columns_4 { columns: 4; }
result the two css declarations column-width: 8em and column-count: 12 can be replaced by columns: 12 8em.
...And 2 more matches
Testing media queries programmatically - CSS: Cascading Style Sheets
the dom provides features that can test the
results of a media query programmatically, via the mediaquerylist interface and its methods and properties.
... once you've created a mediaquerylist object, you can check the
result of the query or receive notifications when the
result changes.
... creating a media query list before you can evaluate the
results of a media query, you need to create the mediaquerylist object representing the query.
...And 2 more matches
box-decoration-break - CSS: Cascading Style Sheets
results in: adding box-decoration-break: clone to the above styles: -webkit-box-decoration-break: clone; box-decoration-break: clone; ...
...
results in: you can try the two inline examples above in your browser.
...note that if you stack the rendering of the two fragments horizontally next to each other it will
result in the non-fragmented rendering.
...And 2 more matches
filter - CSS: Cascading Style Sheets
when a single filter property has two or more functions it's
results will be different from when two or more filter properties are separately applied with the same functions.
...values of an amount over 100% are allowed, providing brighter
results.
...values of an amount over 100% are allowed, providing
results with more contrast.
...And 2 more matches
Challenge solutions - Developer guides
the
resulting file looks like this: p {color: blue; } strong {color: orange; text-decoration: underline;} later sections of this tutorial describe style rules and declarations in greater detail.
... color three-digit color codes challenge in your css file, change all the color names to 3-digit color codes without affecting the
result.
... solution the following rule achieves the desired
result: #fixed-pin { position:fixed; top: 3px; right: 3px; } tables borders on data cells only challenge change the stylesheet to make the table have a green border around only the data cells.
...And 2 more matches
<base>: The Document Base URL element - HTML: Hypertext Markup Language
target a keyword or author-defined name of the default browsing context to show the
results of navigation from <a>, <area>, or <form> elements without explicit target attributes.
... the following keywords have special meanings: _self (default): show the
result in the current browsing context.
... _blank: show the
result in a new, unnamed browsing context.
...And 2 more matches
HTML documentation index - HTML: Hypertext Markup Language
specifying the itemscope attribute for an element creates a new item, which
results in a number of name-value pairs that are associated with the element.
...it is expected that the <keygen> element will be used in an html form along with other information needed to construct a certificate request, and that the
result of the process will be a signed certificate.
... 164 <nobr>: the non-breaking text element (obsolete) element, html, non-standard, obsolete, reference, web, nobr the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially
resulting in the user having to scroll horizontally to see the entire width of the text.
...And 2 more matches
Working with objects - JavaScript
for example, in the above code, when the key obj is added to the myobj, javascript will call the obj.tostring() method, and use this
result string as the new key.
...to illustrate how this works, the following function displays the properties of the object when you pass the object and the object's name as arguments to the function: function showprops(obj, objname) { var
result = ``; for (var i in obj) { // obj.hasownproperty() is used to filter out properties from the object's prototype chain if (obj.hasownproperty(i)) {
result += `${objname}.${i} = ${obj[i]}\n`; } } return
result; } so, the function call showprops(mycar, "mycar") would return the following: mycar.make = ford mycar.model = mustang mycar.year = 1969 enumerate the properties o...
...however, this can be achieved with the following function: function listallproperties(o) { var objecttoinspect; var
result = []; for(objecttoinspect = o; objecttoinspect !== null; objecttoinspect = object.getprototypeof(objecttoinspect)) {
result =
result.concat( object.getownpropertynames(objecttoinspect) ); } return
result; } this can be useful to reveal "hidden" properties (properties in the prototype chain which are not accessible through the object, because anot...
...And 2 more matches
Array.prototype.indexOf() - JavaScript
let o be the
result of calling toobject passing // the this value as the argument.
...let lenvalue be the
result of calling the get // internal method of o with the argument "length".
...let kpresent be the
result of calling the // hasproperty internal method of o with argument pk.
...And 2 more matches
Array - JavaScript
as a
result, '2' and '02' would refer to two different slots on the years object, and the following example could be true: console.log(years['2'] != years['02']) relationship between length and numerical properties a javascript array's length property and numerical properties are connected.
... other methods (e.g., push(), splice(), etc.) also
result in updates to an array's length property.
... creating an array using the
result of a match the
result of a match between a regexp and a string can create a javascript array.
...And 2 more matches
Math.hypot() - JavaScript
if your numbers are larger than about 10154, taking the square of them will
result in infinity.
... if no arguments are given, the
result is +0.
... if any of the arguments is ±infinity, the
result is infinity.
...And 2 more matches
RegExp.prototype[@@match]() - JavaScript
return value an array containing the entire match
result and any parentheses-captured matched
results, or null if there were no matches.
... for example, the following two examples return same
result.
... let re = /[0-9]+/g; let str = '2016-01-02'; let
result = re[symbol.match](str); console.log(
result); // ["2016", "01", "02"] using @@match in subclasses subclasses of regexp can override the [@@match]() method to modify the default behavior.
...And 2 more matches
String.prototype.match() - JavaScript
the match() method retrieves the
result of matching a string against a regular expression.
... if the g flag is used, all
results matching the complete regular expression will be returned, but capturing groups will not.
... additional properties as explained above, some
results contain additional properties as described below.
...And 2 more matches
String.prototype.split() - JavaScript
the
result is an empty (i.e.
... if separator is a regular expression with capturing parentheses, then each time separator matches, the
results (including any undefined
results) of the capturing parentheses are spliced into the output array.
...namelist is the array returned as a
result of split().
...And 2 more matches
this - JavaScript
as a
result, they incorrectly returned the window object.
...as a
result, function b's this is permanently set to the this of obj.bar (function a) when called.
...doing so
results in the same behavior: var o = {prop: 37}; function independent() { return this.prop; } o.f = independent; console.log(o.f()); // 37 this demonstrates that it matters only that the function was invoked from the f member of o.
...And 2 more matches
<feConvolveMatrix> - SVG: Scalable Vector Graphics
a convolution combines pixels in the input image with neighboring pixels to produce a
resulting image.
... a matrix convolution is based on an n-by-m matrix (the convolution kernel) which describes how a given pixel value in the input image is combined with its neighboring pixel values to produce a
resulting pixel value.
... each
result pixel is determined by applying the kernel matrix to the corresponding source pixel and its neighboring pixels.
...And 2 more matches
Caching compiled WebAssembly modules - WebAssembly
function opendatabase() { return new promise((resolve, reject) => { var request = indexeddb.open(dbname, dbversion); request.onerror = reject.bind(null, 'error opening wasm cache database'); request.onsuccess = () => { resolve(request.
result) }; request.onupgradeneeded = event => { var db = request.
result; if (db.objectstorenames.contains(storename)) { console.log(`clearing out version ${event.oldversion} wasm cache`); db.deleteobjectstore(storename); } console.log(`creating version ${event.newversion} wasm cache`); db.createobjectstore(storename) }; }); ...
... function lookupindatabase(db) { return new promise((resolve, reject) => { var store = db.transaction([storename]).objectstore(storename); var request = store.get(url); request.onerror = reject.bind(null, `error getting wasm module ${url}`); request.onsuccess = event => { if (request.
result) resolve(request.
result); else reject(`module ${url} was not found in wasm cache`); } }); } storing and instantiating modules next, we define a function storeindatabase() that fires off an async operation to store a given wasm module in a given database.
...ate it with the given import object: console.log(`found ${url} in wasm cache`); return webassembly.instantiate(module, importobject); }, if not, we compile it from scratch and then store the compiled module in the database with a key of url, for next time we want to use it: errmsg => { console.log(errmsg); return webassembly.instantiatestreaming(fetch(url)).then(
results => { storeindatabase(db,
results.module); return
results.instance; }); }) }, note: it is for this kind of usage that webassembly.instantiate() returns both a module and an instance: the module represents the compiled code and can be stored/retrieved in idb or shared between workers via postmessage(); the instance is stateful and contains the callable javascript func...
...And 2 more matches
Using the WebAssembly JavaScript API - WebAssembly
add the following to your script, below the first block: webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the net
result of this is that we call our exported webassembly function exported_func, which in turn calls our imported javascript function imported_func, which logs the value provided inside the webassembly instance (42) to the console.
... the equivalent code would look like this: fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(
results => {
results.instance.exports.exported_func(); }); viewing wasm in developer tools in firefox 54+, the developer tool debugger panel has functionality to expose the text representation of any wasm code included in a web page.
... go back to your memory.html sample file, and fetch, compile, and instantiate your wasm module as before — add the following to the bottom of your script: webassembly.instantiatestreaming(fetch('memory.wasm'), { js: { mem: memory } }) .then(
results => { // add code here }); since this module exports its memory, given an instance of this module called instance we can use an exported function accumulate() to create and populate an input array directly in the module instance’s linear memory (mem).
...And 2 more matches
Migrating from Internal Linkage to Frozen Linkage - Archive of obsolete content
use += or append() instead of using +, and use nsstring or nscstring instead of promiseflatstring: nsstring firststring = somestring; nsstring secondstring = someotherstring; - nsstring combostring = firststring + secondstring; + nsstring combostring = firststring;+ combostring += secondstring; // or: combostring.append(secondstring); - ns
result rv = somefunc(promiseflatstring(combostring)); + ns
result rv = somefunc(combostring); removing the nsreadableutils.h from the headers list also means that we would not have access to appendutf16toutf8 kind of functions.
...instead of passing getter_copies(astring) to a method expecting a character pointer out parameter, you will need to use a temporary variable and copy the
result.missing headers some headers are included from idl files only when mozilla_internal_api is defined (actually, they shouldn't be there at all).
...#define tointeger(prv, radix) tointeger(reinterpret_cast<print32*>(prv), radix) this allows you to pass a pointer to an ns
result to the tointeger method, when it normally accepts a print32.
...#define compare(str1, str2, comp) (str1).compare(str2, comp) #define last() endreading()[-1] #define setcharat(c, i) replace(i, 1, ch) #define ns_newisupportsarray(
result) callcreateinstance(ns_supportsarray_contractid, static_cast<nsisupportsarray**>(
result)); ideally we would switch to nsimutablearray, but in the mean time there's no point changing the same code twice.
Chapter 3: Introduction to XUL—How to build a more intuitive UI - Archive of obsolete content
figure 2 shows how setting align="center" pack="start" on two elements will
result in completely different output with the only difference being the value for orient.
...efox.png"/> <toolbarbutton label="menu button type" type="menu-button" popup="button-popup" image="firefox.png"/> <menupopup id="button-popup"> <menuitem label="item 1"/> <menuitem label="item 2"/> <menuitem label="item 3"/> </menupopup> </toolbar> listing 13: various toolbar buttons figure 9: output of listing 13 - checkbox-type toolbar buttons specifying type="checkbox"
results in a button that stays depressed when clicked, and pops up when clicked again.
... - menu-button-type toolbar buttons specifying type="menu-button"
results in a special button that combines features of both a normal toolbar button and one with type="menu", so that clicking the button itself does issue a command event.
...overlaydocument.xul gets read in at the same time as base.xul,
resulting in what we see in figure 19, where overlaydocument.xul gets appended to the end of base.xul.
Chapter 5: Let's build a Firefox extension - Archive of obsolete content
check to make sure that, when you click on the “customize toolbar” button at the top-right of the window that the new toolbar icon appears in the
resulting window.
... zip the content, locale, and skin directories1, rename the
resulting archive helloworld.jar, and place it inside the chrome directory you created in step 1.
... zip install.rdf, chrome.manifest, and the chrome folder together, and rename the
resulting archive helloworld.xpi.
...in line 3, you see the block that prevents the bubbling that would
result in this being called by the oncommand handler in the menupop element, which is the parent of the menuitem element.
Intercepting Page Loads - Archive of obsolete content
asubject.cancel(components.
results.ns_binding_aborted); } } } this example shows how you can obtain the url for the request, analyze it using regular expressions, and perform actions on it such as modifying http headers, or even canceling the request.
...a good filter would look like this: shouldload : function(acontenttype, acontentlocation, arequestorigin, acontext, amimetypeguess, aextra) { let
result = components.interfaces.nsicontentpolicy.accept; // we should check for type_subdocument as well if we want frames.
... if ((components.interfaces.nsicontentpolicy.type_document == acontenttype) && some_regular_expression.test(acontentlocation.spec)) { // do stuff here, possibly changing
result.
... } return
result; } the content policy is applied very early in the process, even before the request is made, allowing a very clean cancel operation.
Supporting search suggestions in search plugins - Archive of obsolete content
s this <url> entry: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command={searchterms}"/> if the user types "fir" into the search bar, then pauses, firefox inserts "fir" in place of {searchterms} and queries that url: <url type="application/x-suggestions+json" template="http://ff.search.yahoo.com/gossip?output=fxjson&command=fir"/> the
results are used to construct the suggestion list box.
... your server should then decide upon the suggestions to offer using whatever means it sees fit, and return a json array of
results: query string the first element in the array is the original query string.
...these can be any additional information the search engine might want to return to be displayed by the browser, such as the number of
results available for that search.
...for example, if you want to offer a map link instead of just a search
result page for a given suggestion, you can return an url to a map in this array.
Using Dependent Libraries In Extension Components - Archive of obsolete content
}; // component.dll on windows, libcomponent.so on linux static char krealcomponent[] = moz_dll_prefix "component" moz_dll_suffix; ns
result nsgetmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *a
result) { ns
result rv; // this is not the real component.
... } library->setnativeleafname(ns_literal_cstring(krealcomponent)); prlibrary *lib; rv = library->load(&lib); if (ns_failed(rv)) return rv; nsgetmoduleproc getmoduleproc = (nsgetmoduleproc) pr_findfunctionsymbol(lib, ns_get_module_symbol); if (!getmoduleproc) return ns_error_failure; return getmoduleproc(acompmgr, alocation, a
result); } extensions/stub/bdsstubloader.cpp (for mac os x) the code as written above won't work for mac os x.
...static void* lookupsymbol(const mach_header* alib, const char* asymbolname); extern "c" ns_export ns
result nsgetmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *a
result) { ns
result rv; // this is not the real component.
... nsgetmoduleproc getmoduleproc = (nsgetmoduleproc)lookupsymbol(componentlib, "_nsgetmodule"); if (!getmoduleproc) return ns_error_failure; return getmoduleproc(acompmgr, alocation, a
result); } // convienience method grabbed from // http://mxr.mozilla.org/mozilla-central/source/xpcom/glue/standalone/nsgluelinkingosx.cpp .
MMgc - Archive of obsolete content
the
result will be an object that your code has a pointer to, but which the gc thinks is unreachable.
...well, memory leaks that
result from programmer error tend to be bad leaks...
...the
result will be at the end of the mark cycle fewer things need to be marked.
...the ideal solution will
result in only one mark incremental per frame unless the mutator is allocating memory so fast we need to mark more aggressively to get to the sweep.
Bookmark Keywords - Archive of obsolete content
you should end up with the
result shown in figure 4, without the red highlighting.
...once you get a
result page, bookmark that page.
... once this
result page has been bookmarked, we need only adjust the boookmark's properties.
...thus we could type any of the following into the address bar and get back useful
results: <tt>google geitost</tt> <tt>google mozilla keyword bookmark</tt> <tt>google bookmark site:developer.netscape.com</tt> <tt>google netscape xml support -site:netscape.com</tt> a few examples in the course of writing this article, a number of potentially useful bookmarks were considered as possible examples.
Layout System Overview - Archive of obsolete content
this causes the style system to apply all style rules that correspond to the element and
results in a resolved style context - the style data specific to that element.
...in the normal in-flow case this is quite natural because the sequential addition of new content
results in sequential addition of new frames, and because everything is in-flow, the new frames do not influence the geometry of the frames that have already been formatted.
...in both cases, the content is manipulated by the user (via the dom) and the
resulting visual impacts must be shown as quickly as possible, without disconcerting flicker or other artifacts that might bother the user.
...this mapping facilitates updates to frames that
result in changes to content (see discussion above).
popChallengeResponse - Archive of obsolete content
resultstring = crypto.popchallengeresponse("challengestring"); argument description "challengestring" a base-64 encoded cmmf popodeckeychallcontent message.
... the
resultstring will either be a base-64 encoded popodeckeyrespcontent message, or one of the following error strings: error string description "error:invalidparameter:xxx" the parameter xxx was an invalid value.
... witness octet string, -- the
result of applying the one-way function (owf) to a -- randomly-generated integer, a.
... -- request is being made) of rand, where rand is specified as -- rand ::= sequence { -- int integer, -- - the randomly-generated integer a (above) -- senderhash octet string -- - the
result of applying the one-way function (owf) to -- - the sender's general name -- } -- the size of "int" must be small enough such that "rand" can be -- contained within a single pkcs #1 encryption block.
Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
as a
result, mozilla is not fully backwards-compatible with netscape navigator 4.x and microsoft internet explorer legacy code; for example, mozilla does not support <layer> as i will discuss later.
...internet explorer's event model only has the bubbling phase; therefore, setting the third parameter to false
results in internet explorer-like behavior: <div id="mydiv">click me!</div> <script> function handleevent(aevent) { // if aevent is null, it is the internet explorer event model, // so get window.event.
... rich text differences mozilla supports the w3c standard of accessing iframe's document object through iframeelmref.contentdocument, while internet explorer requires you to access it through document.frames["iframename"] and then access the
resulting document: <script> function getiframedocument(aid) { var rv = null; // if contentdocument exists, w3c compliant (mozilla) if (document.getelementbyid(aid).contentdocument){ rv = document.getelementbyid(aid).contentdocument; } else { // ie rv = document.frames[aid].document; } return rv; } </script> another difference between mozilla and internet explorer is the html...
...", "example1.xsl", false); myxmlhttprequest.send(null); // get the xml document and import it xslstylesheet = myxmlhttprequest.responsexml; xsltprocessor.importstylesheet(xslstylesheet); // load the xml file, example1.xml myxmlhttprequest = new xmlhttprequest(); myxmlhttprequest.open("get", "example1.xml", false); myxmlhttprequest.send(null); var xmlsource = myxmlhttprequest.responsexml; var
resultdocument = xsltprocessor.transformtodocument(xmlsource); after creating an xsltprocessor, you load the xslt file using xmlhttprequest.
LIR - Archive of obsolete content
5 allocp pointer allocate stack space (
result is an address) 6 reti void return an int 7 retq void 64 bit return a quad 8 retd void return a double 9 livei void extend live range of an int 10 liveq void 64 bit extend live range of a quad 11 lived void extend live range of a double 12 file void source filename for debug symbols 13 line void ...
... the operand is the
result of a lir_divi because on i386/x64 div and mod
results are computed by the same instruction.
... it indicates that the double
result is returned via two 32-bit integer registers.
... the
result is always used as the second operand of a lir_ii2d.
Tamarin Build System Documentation - Archive of obsolete content
compile, smoke, or test to show the build slaves from the most recent phase run or click on an individual box to display the test
result below the phase table the waterfall displays each buildstep and
result the left side contains the time column and the user/revision link to represent the revision triggering a build, mouse over the user to see the revision and submission notes each buildstep run on a slave is a box with color indicating status, red is failed, green passed, yellow has warnings click the stdio link to see the outp...
...ut click on the build yellow box at the bottom of a set of buildsteps to see the
result of all of the buildsteps for a build and the time each buildstep took scroll down to see previous builds triggered at the bottom of the page click on the [next page] link to display more previous builds what are the goals of the build system (qos)?
... to provide quick and accurate
results of building and testing tamarin on supported platforms and configurations to represent the build
results in a clear and concise manor please give use feedback if you have any comments or suggestions to improve the build system how to add tests to the smokes?
... expectedfail or skip expectedfail means the test is run and the assertion is the test fails, if the test passes and is marked expectedfail the test
result is unexpectedpass and treated like a failure skip means the test is not run, the test may fail intermittently or harm the system altering the
results of other tests ...
Bindings - Archive of obsolete content
<rdf:description rdf:about="http://www.xulplanet.com/ndeakin/images/t/palace.jpg" dc:title="palace from above"/> dc:description="view from the top of the tower looking east of the doges palace"/> if you try a full example based on this data, you will notice that only one
result has been generated.
...for the second photo, the datasource doesn't have any matches for the description, so that potential
result will be removed.
...sometimes, it would be useful to have triples that match conditionally; that is, a triple that doesn't cause a
result to be removed as a possible match.
...the template builder examines bindings after the query has generated
results.
Building Hierarchical Trees - Archive of obsolete content
three
results will be generated from a simple rule with no extra conditions.
... it is the
result, or the photo, that will be checked, not the container of photos.
...when the user opens the row, the template will be re-examined for
results using the photo as the starting point instead of the top level ref value.
... <rdf:bag rdf:about="http://www.xulplanet.com/rdf/myneighbourhood"> <rdf:li> <rdf:seq rdf:about="http://www.xulplanet.com/rdf/marion" dc:title="marion street"> the
result is a two level tree with two columns.
Building Trees - Archive of obsolete content
rather than generate content for every row in the tree, the
results are stored in a list inside the builder.
... as a
result, the builder only has a few pieces of information to keep track of.
...however, it will generate the same
result on screen to the user as with the tree builder.
... </query> <action> <treechildren> <treeitem uri="?photo"> <treerow properties="?countrytitle"> <treecell src="?photo"/> </treerow> </treeitem> </treechildren> </action> </rule> you might use the following css to change the border around rows listing a particular country: treechildren::-moz-tree-row(netherlands) { border: green 1px solid; } the
result of this example is a tree where one row has a green border around it.
Containment Properties - Archive of obsolete content
« previousnext » so far, we've seen how the simple query syntax can generate
results from the children of an rdf container.
...if the resource 'http://www.xulplanet.com/rdf/a' was also an rdf seq with some children, then those children would also be added to the
results.
...the only difference between this and the previous example is a a couple of additional lines added to the rdf/xml: <rdf:seq rdf:about="http://www.xulplanet.com/rdf/a"> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/e"/> <rdf:li rdf:resource="http://www.xulplanet.com/rdf/f"/> </rdf:seq> the effect is that there are five
results instead of three.
...what happens is that the builder generates additional possible values for the ?child variable, so it creates an additional
result for each one.
Special Condition Tests - Archive of obsolete content
.xml" ref="*" querytype="xml"> <template> <query expr="*"/> <rule parent="vbox"> <action> <groupbox uri="?"> <caption label="?name"/> </groupbox> </action> </rule> <rule> <action> <label uri="?" value="?name"/> </action> </rule> </template> </vbox> previously, an assign element was used to assign the tagname of the
result to a variable, which was then compared in a rule condition.
...as the outer element is a vbox, this will match for all
results in the first iteration of the template.
...the
result can be seen if you try the example.
...llowing to the previous example: <button label="houses in my neighbourhood" type="menu" datasources="template-guide-streets.rdf" containment="http://www.xulplanet.com/rdf/address" ref="http://www.xulplanet.com/rdf/myneighbourhood"> the houses do have a value for the 'http://www.xulplanet.com/rdf/address' predicate, so they will also be considered to be containers as well,
resulting in another level of menus.
XML Assignments - Archive of obsolete content
however, you cannot use a expression that returns a number in the query, as the query must return dom nodes as
results.
...note that while the query expression uses the root node (or reference node) as the xpath context, the expressions for the assign element are evaluated using each
result node as the context.
... for each
result, the ?namelength variable will be assigned the length of the name attribute on the
result node, and the ?siblings variable will be assigned the number of sibling nodes the
result has.
...if a variable is used in the action that doesn't correspond to one declared in an assign element, the default behaviour is to take the corresponding attribute on the
result node.
Anonymous Content - Archive of obsolete content
the
result of using the above binding is that the line of xul below will be expanded as follows, assuming that the scrollbar is bound to the xbl above: <scrollbar/> expands to: <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"> <xul:thumb/> </xul:slider> <xul:scrollbarbutton type="increment"/> </scrollbar> the elements within the content tag are added to the scrol...
...the second scroll bar has its own content so it will use that instead of the xbl content,
resulting in something that isn't much of a scroll bar at all.
...the
resulting content would be: <menu class="dropbox"> <menupopup> <menuitem label="1000"/> <menuitem label="2000"/> </menupopup> <textbox flex="1"/> <button src="chrome://global/skin/images/dropbox.jpg"/> </menu> includes attribute in some cases, you may wish to only include specific types of content and not others.
...this
results in a display that is equivalent to the following: <binding id="zoombox"> <content> <xul:box flex="1"> <xul:button label="zoom in"/> <xul:box flex="1" style="border: 1px solid black"> <xul:image src="images/happy.jpg"/> <xul:image src="images/angry.jpg"/> </xul:box> <xul:button label="zoom out"/> </xul:box> </content> </binding> from the dom's ...
Broadcasters and Observers - Archive of obsolete content
the
result is that both the button and the checkbox will have the same label 'open'.
...this
results in these elements having a new label.
...the
result here is that the button will receive its label from the broadcaster, and when the label is changed, the label on the button is changed.
...this
results in an alert message appearing.
The Implementation of the Application Object Model - Archive of obsolete content
the
resulting structure is what the user actually ends up viewing.
...the
resultant file, although still relatively easy to manipulate, is bloated needlessly with extra syntax that is not strictly necessary.
...if a conventional tree structure is used as the intermediate representation of our data, then the column reordering could
result in a potentially enormous and time-consuming walk through the tree in order to reorder the children of each item.
...the
resultant aggregated graph is fed into the xul content model builder.
Scratchpad - Archive of obsolete content
you can write, run, and examine the
results of code that interacts with the web page.
...this is what you'd use to execute a function or other code that manipulates the content of your page without needing to see the
result.
... for example, if you enter the code: window then choose inspect, the object inspector is shown that looks something like this: display the display option executes the selected code, then inserts the
result directly into your scratchpad editor window as a comment, so you can use it as a repl.
... keyboard shortcuts command windows macos linux open the scratchpad shift + f4 shift + f4 shift + f4 run scratchpad code ctrl + r cmd + r ctrl + r run scratchpad code, display the
result in the object inspector ctrl + i cmd + i ctrl + i run scratchpad code, insert the
result as a comment ctrl + l cmd + l ctrl + l re-evaluate current function ctrl + e cmd + e ctrl + e reload the current page, then run scratchpad code ctrl + shift + r cmd + shift + r ctrl + shift + r save the pad ctrl + s cmd + s ctrl ...
XUL Parser in Python - Archive of obsolete content
results the
results from the script are written to a file called res.html.
...if you want to test this script you should change the filename "res.html" specified in the fourth line and compare different
results files.
... or, since the dictionary is already storing the values of all the attributes it finds, you can write the values of a particular attribute (e.g., id) to the
results file by checking the attribute in sys.argv[1]: for attr in a.keys(): if strip(attr) == sys.argv[1]: el_list[name][strip(attr)] = strip(a[attr]) and writing thevalues to the html
results file instead of thekeys: for item in elements: w.write('<tr><td class="head">' + item + '</td></tr>\n') for a in el_list[item].values(): w.write('<tr><td class="at">' + a + '</td>') with these ...
... please feel free to suggest changes, change the format of the
results output, or adapt this script in any way you want.
GLSL Shaders - Game development
the calculations
result in a variable containing the information about the rgba color.
... the vertex shader code let's continue by writing a simple vertex shader — add the code below inside the body's first <script> tag: void main() { gl_position = projectionmatrix * modelviewmatrix * vec4(position.x+10.0, position.y, position.z+5.0, 1.0); } the
resulting gl_position is calculated by multiplying the model-view and the projection matrices by each vector to get the final vertex position, in each case.
... both projectionmatrix and modelviewmatrix are provided by three.js and the vector is passed with the new 3d position, which
results in the original cube moving 10 units along the x axis and 5 units along the z axis, translated via a shader.
...: document.getelementbyid( 'fragmentshader' ).textcontent }); var cube = new three.mesh(boxgeometry, shadermaterial); scene.add(cube); cube.rotation.set(0.4, 0.2, 0); function render() { requestanimationframe(render); renderer.render(scene, camera); } render(); css body { margin: 0; padding: 0; font-size: 0; } canvas { width: 100%; height: 100%; }
result conclusion this article has taught the very basics of shaders.
NaN - MDN Web Docs Glossary: Definitions of Web-related terms
nan (not a number) is a numeric data type that means an undefined value or value that cannot be represented, especially
results of floating-point calculations.
... for example, nans can represent infinity,
result of division by zero, missing value, or the square root of a negative (which is imaginary, whereas a floating-point number is real).
... practically speaking, if i divide two variables in a javascript program, the
result may be nan, which is predefined in javascript as "undefined".
...fortunately, since the
result will be nan and i know my divisor may turn out to be 0, i can set up testing conditions that prevent any such computations in the first place or notify me of where they happen.
WAI-ARIA basics - Learn web development
as a
result, developers quite often rely on javascript libraries that generate such controls as a series of nested <div>s or table elements with classnames, which are then styled using css and controlled using javascript.
... enhancing keyboard accessibility: there are built-in html elements that have native keyboard accessibility; when other elements are used along with javascript to simulate similar interactions, keyboard accessibility and screenreader reporting suffers as a
result.
... if the disabled state of an input is likely to change, then it is also a good idea to indicate when it happens, and what the
result is.
...when this is checked/unchecked, we update the text inside the hidden live region to tell screenreader users what the
result of checking this checkbox is, as well as updating the aria-disabled state, and some visual indicators too: function togglemusician(bool) { let instruitem = formitems[formitems.length-1]; if(bool) { instruitem.input.disabled = false; instruitem.label.style.color = '#000'; instruitem.input.setattribute('aria-disabled', 'false'); hiddenalert.textcontent = 'instruments played fie...
Styling tables - Learn web development
to start with, make a local copy of the sample markup, download both images (noise and leopardskin), and put the three
resulting files in a working directory somewhere on your local computer.
...normally, table columns tend to be sized according to how much content they contain, which produces some strange
results.
... the
result looks a bit neater: graphics and colors now onto graphics and colors!
... this color explosion
results in the following look: now, this may be a bit over the top and not to your taste, but the point we are trying to make here is that tables don't have to be boring and academic.
Introduction to CSS layout - Learn web development
these serve to move the affected element down and to the right — this might seem like the opposite of what you were expecting, but you need to think of it as the element being pushed on its left and top sides, which
result in it moving right and down.
... adding this code will give the following
result: relative positioning example <h1>relative positioning</h1> <p>i am a basic block level element.</p> <p class="positioned">this is my relatively positioned element.</p> <p>i am a basic block level element.</p> body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: relative; background: rgba(255,84,104,.3); border: 2px solid rgb(255,84,104); top: 30px; left: 30px; } absolute positioning absolute positioning is used to completely remove an element from normal flow, and place it using offsets from the edges of a containing block.
...adding this code, however, will give the following
result: absolute positioning example <h1>absolute positioning</h1> <p>i am a basic block level element.</p> <p class="positioned">this is my absolutely positioned element.</p> <p>i am a basic block level element.</p> body { width: 500px; margin: 0 auto; } p { background-color: rgb(207,232,220); border: 2px solid rgb(79,185,227); padding: 10px; margin: 10px; border-radius: 5px; } .positioned { position: absolute...
...{ display: table; margin: 0 auto; } form div { display: table-row; } form label, form input { display: table-cell; margin-bottom: 10px; } form label { width: 200px; padding-right: 5%; text-align: right; } form input { width: 300px; } form p { display: table-caption; caption-side: bottom; width: 300px; color: #999; font-style: italic; } this gives us the following
result: you can also see this example live at css-tables-example.html (see the source code too.) multi-column layout the multi-column layout module gives us a way to lay out content in columns, similar to how text flows in a newspaper.
How to build custom form controls - Learn web development
here is the
result we want to achieve: this screenshot shows the three main states of our control: the normal state (on the left); the active state (in the middle) and the open state (on the right).
... .select .option { padding: .2em .3em; /* 2px 3px */ } .select .highlight { background: #000; color: #ffffff; } so here's the
result with our three states: basic state active state open state check out the source code bringing your control to life with javascript now that our design and structure are ready, we can write the javascript code to make the control actually work.
...here's the
result: live example check out the source code but wait a second, are we really done?
... here is the final
result of all these changes (you'll get a better feel for this by trying it with an assistive technology such as nvda or voiceover): live example check out the final source code if you want to move forward, the code in this example needs some improvement before it becomes generic and reusable.
HTML basics - Learn web development
failing to add a closing tag is one of the standard beginner errors and can lead to strange
results.
...if they overlap as shown above, then your web browser will try to make the best guess at what you were trying to say, which can lead to unexpected
results.
...this includes things like keywords and a page description that you want to appear in search
results, css to style our content, character set declarations and more.
... wrap the text in an <a> element, as shown below: <a>mozilla manifesto</a> give the <a> element an href attribute, as shown below: <a href="">mozilla manifesto</a> fill in the value of this attribute with the web address that you want the link to link to: <a href="https://www.mozilla.org/about/manifesto/">mozilla manifesto</a> you might get unexpected
results if you omit the https:// or http:// part, called the protocol, at the beginning of the web address.
Images in HTML - Learn web development
our above code would give us the following
result: note: elements like <img> and <video> are sometimes referred to as replaced elements.
...returning to our example, we could do this: <img src="images/dinosaur.jpg" alt="the head and torso of a dinosaur skeleton; it has a large head with long sharp teeth" width="400" height="341"> this doesn't
result in much difference to the display, under normal circumstances.
... but if the image isn't being displayed, for example, the user has just navigated to the page, and the image hasn't yet loaded, you'll notice the browser is leaving a space for the image to appear in: this is a good thing to do,
resulting in the page loading quicker and more smoothly.
...for example, to place a background image on every paragraph on a page, you could do this: p { background-image: url("images/dinosaur.jpg"); } the
resulting embedded image, is arguably easier to position and control than html images.
Test your skills: Functions - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the
results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...the three improvements we want you to make are: refactor the code that generates the random number into a separate function called random(), which takes as parameters two generic bounds that the random number should be between, and returns the
result.
... update the choosename() function so that it makes use of the random number function, takes the array to choose from as a parameter (making it more flexible), and returns the
result.
... print the returned
result into the paragraph (para)'s textcontent.
Getting started with Svelte - Learn web development
it also compiles the markup and <script> section of every component and stores the
result in public/build/bundle.js.
... using the svelte repl a repl (read–eval–print loop) is an interactive environment that allows you to enter commands and immediately see the
results — many programming languages provide a repl.
... on the right side you have three tabs: the
result tab shows your app output, and provides a console at the bottom.
... whenever you change any file on the repl, svelte will recompile the app and update the
result tab.
Handling common HTML and CSS problems - Learn web development
let's go forth and look at how we can reduce cross browser errors that
result from html/css.
... in your code, you can select sections of css you want to add prefixes to, open the command pallette (cmd/ctrl + shift + p), then type in autoprefixer and select the autoprefixer
result that autocompletes.
...this
results in some interesting browser prefix juggling if you want to try to use flexbox across all these browsers (see advanced cross-browser flexbox to get an idea).
...because of this, you need to use feature detection to detect whether visiting browsers support those layout features, and selectively apply different layouts depending on the
result (we will cover feature detection in detail in a later article).
Deploying our app - Learn web development
however, doing this step manually isn't our final aim — what we want is for the build to happen automatically and the
result of the dist directory to be deployed live on our website.
... and even better, whenever we make a change and push the change to our remote git repository (on github), this will trigger a notification to netlify which will then run our specified build task and then deploy the
resulting dist directory to our published site.
... now to manually run the test, from the command line we can run: npm run test the
result, if successful, is … nothing.
...git commit -m ‘adding test’ git push github master in some cases you might want to test the
result of the built code (since this isn't quite the original code we wrote), so the test might need to be run after the build command.
Accessibility/LiveRegionDevGuide
both events should not be acted upon or double announcements would
result.
... filtering user actions this paragraph describes object properties and event naming schemes that are used to help an at determine if an event is an actual live region event or is the
result of user action.
...as a
result, care must be taken in an at-spi based application to minimize performance degradation by only acting on events that are truly live regions.
...the
result being that only the change will be presented.
Android-specific test suites
running android-test to run android-test, first build firefox for android with your changes; then run ./mach android test this will run the tests and report the
results to stdout, as well as produce an html report.
... running android-checkstyle to run android-checkstyle, first build firefox for android with your changes; then run ./mach android checkstyle this will run the tests and report the
results to stdout, as well as produce an html report.
... running android-findbugs to run android-findbugs, first build firefox for android with your changes; then run ./mach android findbugs this will run the tests and report the
results to stdout, as well as produce an html report.
... running android-lint to run android-lint, first build firefox for android with your changes; then run ./mach android lint this will lint the code and report the
results to stdout, as well as produce an html report.
Browser chrome tests
it currently allows you to run javascript code in the same scope as the main firefox browser window and report
results using the same functions as the mochitest test framework.
... running the browser chrome tests to run mochitest, first build mozilla with your changes; then run ./mach mochitest -f browser this will launch your build and open a "browser chrome tests" window, and report the
results in the ui and to stdout.
...call waitforexplicitfinish() from test() if you want to delay reporting a
result until after test() has returned.
...in a timeout, event handler, etc) will not be caught, but will
result in a timed out test if they prevent finish() from being called.
Using the Browser API
we did this with the following functions: function canmovebwd() { var request = browser.getcangoback(); request.onsuccess = function() { if (request.
result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } } } function canmovefwd() { var request = browser.getcangoforward(); request.onsuccess = function() { if (request.
result) { fwd.disabled = false; consol...
...for example: function canmovebwd() { browser.getcangoback().then(function(
result) { if (
result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } implementing the url bar the url bar for our simple browser is a <form> containing a single text <input>.
... searchform.addeventlistener('submit',function(e) { e.preventdefault(); browser.findall(searchbar.value, 'case-sensitive'); searchactive = true; prev.disabled = false; next.disabled = false; searchbar.blur(); }); with this all done, you'll see your search
results are highlighted; you can cycle through these using the htmliframeelement.findnext() method (specify forward and backward to go in either direction through the
results), which is what our next two event listeners do: prev.addeventlistener('touchend',function() { browser.findnext("backward"); }); next.addeventlistener('touchend',function() { browser.findnext("forward"); }); the last event l...
...if searchactive is true, meaning that a search has been done, we want to disable the search as we hide the search options — we disable the buttons, make searchactive false, clear the entered search value, and run htmliframeelement.clearmatch(), which gets rid of any stored/highlighted search
results from the browser.
HTMLIFrameElement.findNext()
the findnext() method of the htmliframeelement highlights the next or previous instance of a search
result after a findall() search has been carried out.
... invoking this method
results in a mozbrowserfindchange event firing, which carries details about the search
results.
... parameters direction a string indicating the direction in which you want to cycle through the available search
results.
... examples the following functions are taken from our browser api demo, and cycle through the available search
results.
DeferredTask.jsm
multiple "arm" calls within the same tick of the event loop are guaranteed to
result in a single execution of the task.
... by design, this method doesn't provide a way for the caller to detect when the next execution terminates, or collect a
result.
... in fact, doing that would often
result in duplicate processing or logging.
... the "arm" method can be used to start the internal timer that will
result in the eventual execution of the task.
OS.File for the main thread
the
result is a promise.
...g/1999/xhtml', 'canvas'); canvas.width = img.naturalwidth; canvas.height = img.naturalheight; var ctx = canvas.getcontext('2d'); ctx.drawimage(img, 0, 0); (canvas.toblobhd || canvas.toblob).call(canvas, function(b) { var r = cc['@mozilla.org/files/filereader;1'].createinstance(ci.nsidomfilereader); //new filereader(); r.onloadend = function() { // r.
result contains the arraybuffer.
... var writepath = os.path.join(os.constants.path.desktopdir, 'savedimage.png'); var promise = os.file.writeatomic(writepath, new uint8array(r.
result), { tmppath: writepath + '.tmp' }); promise.then( function(aval) { console.log('successfully saved image to disk'); }, function(areason) { console.log('writeatomic failed for reason:', areason); } ); }; r.readasarraybuffer(b); }, 'image/png'); }; //var path = os.path.tofileuri(os.path.join(os.contants.path.desktopdir, 'my.png')); //do it like this for images on disk var path = 'https://mozorg.cdn.mozilla.net/media/img/firefox/channel/toggler-beta.png?2013-06'; //do like this for im...
... if you need to convert the
result of this function to a string, you may do so by using the stringencoding api.
Localizing with Koala
if the sidebar with the
results of the comparison doesn't show up automatically: open the projects sidebar by choosing view > tabs & sidebars > projects from the menu.
... you should now see the
results of the comparison in the "koala file view" sidebar.
...koala will re-run the comparison of your local localization files with the newest en-us reference and display the
results in the sidebar on the left.
... to see the
results of the comparison for locale's all files (including searchbar.dtd), switch to "locale files" view in the "koala file view" sidebar.
Investigating leaks using DMD heap scan mode
the
result of that grep will contain output that looks something like this: cc-edges.15873.log:0x7f0897082c00 [rc=1285] nsglobalwindowinner # 2147483662 inner https://www.example.com/ * cc-edges.15873.log: the first part is the file name where it was found.
...you can pass some additional options to affect how the
results are displayed.
... example analysis of block_analyzer.py
results in one debugging session where i was investigating the leak from bug 1451985, i eventually reduced the list of entries until this was the most suspicious looking entry: 0x7f0892f29630 size = 392 bytes at byte offset 56 mozilla::dom::scriptloader::processexternalscript[...] [...] i went to that line of scriptloader::processexternalscript(), and it contained a call to scriptloader::createlo...
...that gave a
result that contained this: 0x7f0882fe3230 [fragmentorelement (xhtml) script [...] --[mnodeinfo]--> 0x7f0897431f00 [nodeinfo (xhtml) script] [...] --[mloadingasyncrequests]--> 0x7f0892f29630 [scriptloadrequest] this confirms that this block is actually a scriptloadrequest.
Leak Gauge
you must exit the browser before post-processing the log file or the
results will be unreliable.
...
results of processing log leak.log : summary: leaked 0 out of 11 dom windows leaked 0 out of 44 documents leaked 0 out of 3 docshells leaked content nodes in 0 out of 0 documents if there are leaks, output will look like the following.
...
results of processing log leak2.log : leaked outer window 2c6e410 at address 2c6e410.
...summary: leaked 13 out of 15 dom windows leaked 35 out of 46 documents leaked 4 out of 4 docshells leaked content nodes in 42 out of 53 documents if you see such a
results, please file a bug.
PR_dtoa
*rve if not null this location is set to the address of the end of the
result.
... buf the address of the buffer in which to store the
result.
... bufsz the size of the buffer provided to hold the
result.
...
results the principle output is the null-terminated string stored in buf.
Index
as a
result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level).
... -o output_file gives the output file to which to write the
results.
...this can
result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window.
...id < 1> rsa 40defeeb522ade11090eacebaaf1196a172127df example domain administrator cert < 2> rsa 1d0b06f44f6c03842f7d4f4a1dc78b3bcd1b85a5 john smith user cert there are ways to narrow the keys listed in the search
results: o to return a specific key, use the -n name argument with the name of the key.
Pork Tools
<caption>rewrites performed</caption> ns
result getter(nsifoo **a
result) { *a
result = ...
... if (!*a
result) return ns_error_failure; return ns_ok; } nsifoo* getter() { nsifoo *
result = null; // a
result below is kept for complicated cases // typically it wont be needed and can be removed nsifoo **a
result = &
result; // *a
result patterns are replaced with
result result = ...
... if (
result) return nsnull; // error returns are changed to nsnull //instead ns_ok, actual
result is returned return
result; } caller1 { //case 1 ns
result rv; rv = getter(&var); ns_ensure_success(rv,rv); //case 2: naked call getter(&var); //case 3: ns
result decl ns
result rv2 = getter(&var); ns_ensure_success(rv2,rv2); } caller1 { // case 1 // figure out that rv was only used for the rewritten // outparam call + ns_ensure_success.
... then nuke the declaration // ns
result rv; // move outparam to lhs var = getter(); // detect ns_ensure_success immediately following // and change it to an equivalent ns_ensure_true ns_ensure_true(var, ns_error_failure); // case 2 var = getter(); // case 3, eliminate rv2 decl given that it's not used elsewhere var = getter(); ns_ensure_true(var, ns_error_failure) } outparamdel also support rewriting getters such that they return already_addrefed<nsifoo>.
Hacking Tips
/* open your png viewer with the
result of iongraph */ this gdb instrumentation is supposed to work with debug builds, or with optimized build compiled with --enable-jitspew configure flag.
... hacking tips benchmarking (shell) arewefastyet.com display the benchmark
results of the javascript shell, and browser for b2g.
... break 'mozilla::dom::canvasrenderingcontext2d::drawwindow(nsglobalwindow&, double, double, double, double, nsastring_internal const&, unsigned int, mozilla::error
result&)' cont break 'presshell::renderdocument(nsrect const&, unsigned int, unsigned int, gfxcontext*)' set print object on set $x = <your x value> set $y = <your y value> print &((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).data[$y * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).stride + $x * ((cairo_image_surface_t*)athebescontext->mdt.mrawptr->msurface).dept...
... $ cgset -r cpuset.mems=0 /benchmarks $ cgset -r cpuset.mems=0 /benchmarks/mask $ cgset -r cpuset.mems=0 /benchmarks/negate-mask then we limit the performance of the cpu, as a proportion such as the
result approximately correspond to what you might have if you were running on a phone.
JS_ConvertValue
the
result is undefined value.
... converting to jstype_object works exactly like js::toobject if v.isnullorundefined() is false, otherwise the
result is nullptr.
... converting to jstype_function works like js_valuetofunction, but better: the
result is a function object that has not been stripped of its lexical scope.
... it is safe to call the
result (e.g.
JS_ExecuteRegExp
test bool pass true to avoid creating match
result array and store boolean value to rval.
...receives the
result match
result array or boolean value.
... if test is false, js_executeregexp and js_newregexpobjectnostatics store the match
result array to *rval if matches, otherwise stores null to *rval.
... if successful, js_executeregexp and js_newregexpobjectnostatics returns true and stores the
result to *rval, otherwise returns false and the value of *rval is undefined see also mxr id search for js_executeregexp mxr id search for js_executeregexpnostatics regexp bug 571355 - added js_executeregexpnostatics function ...
Shell global objects
stoptimingmutator() stop accounting time to mutator vs gc and dump the
results.
... entrypoints(params) carry out some jsapi operation as directed by params, and return an array of objects describing which javascript entry points were invoked as a
result.
... the return value is an array of strings, with one element for each javascript invocation that occurred as a
result of the given operation.
... getwaitforallpromise(densepromisesarray) calls the getwaitforallpromise jsapi function and returns the
result promise.
Fun With XBL and XPConnect
<method name="autocomplete"> <argument name="asearchstring"/> <argument name="
resultlistener"/> <body> <![cdata[ return this.autocompletesession.autocomplete(null, anonymouscontent[0], asearchstring, this.autocompletelistener); ]]> </body> </method> you can see that the body of the method is just getting the auto complete session object and calling the auto complete method on it.
...i wanted the auto complete session to call back into the widget with search
results.
... i could apply a trick similar to what i did for the xpcom object: <property name="autocompletelistener"> <![cdata[ ({ onautocomplete
result: function(aitem, aoriginalstring, amatch) { if ( aitem ) { anonymouscontent[0].value = amatch; } } }) ]]> </property> as long as the js for the value of autocompletelistener evaluates to an object (and wrapping the expression with a set of parens like i did, does this), then the value of autocompletelistener is an object that implements my interface.
... now i can pass the
result of autocompletelistener into methods that require an auto complete listener (like my auto complete session object).
Generic factory
*/ class nsigenericfactory : public nsifactory { public: static const nsiid& iid() { static nsiid iid = ns_igenericfactory_iid; return iid; } typedef ns_callback(constructorprocptr) (nsisupports *aouter, refnsiid aiid, void **a
result); /** * establishes the generic factory's constructor function, which will be called * by createinstance.
... examples class nsicomponent : public nsisupports { public: ns_imethod dosomething() = 0; }; class mycomponent : public nsicomponent { public: mycomponent(); virtual ~mycomponent(); static ns_method create(nsisupports *aouter, refnsiid aiid, void **a
result); ns_impl_isupports ns_imethod dosomething(); }; to create a factory for this class, simply write the following: nsifactory* newcomponentfactory(nsirepository* repository) { nsigenericfactory* factory = null; nscid kgenericfactorycid = ns_genericfactory_cid; ns
result res = repository->createinstance(kgenericfactorycid, null, nsigenericfactory::iid(), &factory); if (res ==...
... #include "nsifactory.h" class nsgenericfactory : public nsifactory { public: typedef ns
result (*creatorprocptr) (nsisupports *aouter, refnsiid aiid, void **a
result); nsgenericfactory(creatorprocptr creator); virtual ~nsgenericfactory(); ns_decl_isupports ns_imethod createinstance(nsisupports *aouter, refnsiid aiid, void **a
result); ns_imethod lockfactory(prbool alock); private: creatorprocptr mcreator; }; nsgenericfa...
...ctory::nsgenericfactory(creatorprocptr creator) : mcreator(creator) { ns_init_refcnt(); } nsgenericfactory::~nsgenericfactory() {} static ns_define_iid(kifactoryiid, ns_ifactory_iid); ns_impl_isupports(nsgenericfactory, kifactoryiid) ns_imethodimp nsgenericfactory::createinstance(nsisupports *aouter, refnsiid aiid, void **a
result) { return mcreator(aouter, aiid, a
result); } ns_imethodimp nsgenericfactory::lockfactory(prbool alock) { return ns_ok; } many of our classes already have a static entry point that serves as the creator function, so in most cases, creating a new factory for a class is just: nsifactory* newmallocfactory() { nsifactory* factory = new nsgenericfactory(&nsmalloc::create); factory->addre...
Components.isSuccessCode
summary determines whether a given xpcom return code (that is, an ns
result value) indicates the success or failure of an operation, returning true or false respectively.
... syntax var succeeded = components.issuccesscode(returncode); parameters returncode the return code (of type ns
result) to be checked.
... description components.issuccesscode() may be used to determine whether an xpcom return code (an ns
result) indicates success or failure.
... const cc = components.classes; const ci = components.interfaces; const cr = components.
results; // global flags polled externally var copyfailed = false; var copyinprogress = false; function copybufferedstream(instream, outstream) { var copyobserver = { onstartrequest: function(request, context) { copyinprogress = true; }, onstoprequest: function(request, context, statuscode) { copyinprogress = false; // did the copy fail?
IAccessibleComponent
method overview [propget] h
result background([out] ia2color background ); [propget] h
result foreground([out] ia2color foreground ); [propget] h
result locationinparent([out] long x, [out] long y ); methods background() returns the background color of this object.
... [propget] h
result background( [out] ia2color background ); parameters background the returned color is the background color of this object or, if that is not supported, the default background color.
...[propget] h
result foreground( [out] ia2color foreground ); parameters foreground the returned color is the foreground color of this object or, if that is not supported, the default foreground color.
...[propget] h
result locationinparent( [out] long x, [out] long y ); parameters x the x coordinate of the upper left corner of the object's bounding box relative to the immediate parent object.
IAccessibleHypertext
method overview [propget] h
result hyperlink([in] long index, [out] iaccessiblehyperlink hyperlink ); [propget] h
result hyperlinkindex([in] long charindex, [out] long hyperlinkindex ); [propget] h
result nhyperlinks([out] long hyperlinkcount ); methods hyperlink() returns the specified link.
...[propget] h
result hyperlink( [in] long index, [out] iaccessiblehyperlink hyperlink ); parameters index this 0 based index specifies the hyperlink to return.
...[propget] h
result hyperlinkindex( [in] long charindex, [out] long hyperlinkindex ); parameters charindex a 0 based index of the character for which to return the link index.
...[propget] h
result nhyperlinks( [out] long hyperlinkcount ); parameters hyperlinkcount the number of links and link groups within this hypertext paragraph.
IAccessibleImage
method overview [propget] h
result description([out] bstr description ); [propget] h
result imageposition([in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); [propget] h
result imagesize([out] long height, [out] long width ); methods description() returns the localized description of the image.
... [propget] h
result description( [out] bstr description ); parameters description the localized description of the image.
...[propget] h
result imageposition( [in] enum ia2coordinatetype coordinatetype, [out] long x, [out] long y ); parameters coordinatetype specifies whether the returned coordinates should be relative to the screen or the parent object.
...[propget] h
result imagesize( [out] long height, [out] long width ); parameters height the height of the image.
mozIStorageStatement
executestep() executes a query with the currently bound parameters, and steps through the
results one row at a time.
... boolean step() return value true if there are more rows left in the
results, otherwise false.
... execute() execute the query, ignoring any
results.
... void execute(); see also storage introduction and how-to article mozistorageconnection database connection to a specific file or in-memory data storage mozistoragevaluearray wraps an array of sql values, such as a
result row.
nsIArray
method overview nsisimpleenumerator enumerate(); unsigned long indexof(in unsigned long startindex, in nsisupports element); void queryelementat(in unsigned long index, in nsiidref uuid, [iid_is(uuid), retval] out nsqi
result result); attributes attribute type description length unsigned long the number of elements in the array.
...null is a valid
result for this method, but exceptions are thrown in other circumstances.
... void queryelementat( in unsigned long index, in nsiidref uuid, [iid_is(uuid), retval] out nsqi
result result ); parameters index position of element.
...
result the object, queryinterface'd to the requested interface.
nsIAutoCompleteSearch
results can be sent to the listener either synchronously or asynchronously, depending on the implementation.
... method overview void startsearch(in astring searchstring, in astring searchparam, in nsiautocomplete
result previous
result, in nsiautocompleteobserver listener); void stopsearch(); methods startsearch() search for a given string and notify a listener (either synchronously or asynchronously) of the
result.
... void startsearch( in astring searchstring, in astring searchparam, in nsiautocomplete
result previous
result, in nsiautocompleteobserver listener ); parameters searchstring the string to search for.
...previous
result the previous nsiautocomplete
result to use for faster searching.
nsIContentPrefCallback2
dom/interfaces/base/nsicontentprefservice2.idlscriptable callback used by nsicontentprefservice2 methods 1.0 66 introduced gecko 20.0 inherits from: nsisupports last changed in gecko 20.0 (firefox 20.0 / thunderbird 20.0 / seamonkey 2.17) method overview void handlecompletion(in unsigned short reason); void handleerror(in ns
result error); void handle
result(in nsicontentpref pref); constants constant value description complete_ok 0 complete_error 1 methods handlecompletion() called when the method finishes.
...void handleerror( in ns
result error ); parameters error a number in components.
results describing the error.
... handle
result() for the retrieval methods, this is called once for each retrieved preference.
...void handle
result( in nsicontentpref pref ); parameters pref the retrieved preference.
nsIContentPrefService
acallback an optional nsicontentprefcallback to receive the
result.
...the
result may be null (nsidatatype:vtype_empty) if the preference's value is either null, or undefined (nsidatatype:vtype_void) if there is no saved preference by the specified name.
... return value the
result is an nsipropertybag2 containing the preferences and their values.
... return value the
result is an nsipropertybag2 containing the preferences and their values.
nsIContentPrefService2
callback handle
result is called once unless no such preference exists, in which case handle
result is not called at all.
... callback handle
result is called once for each preference.
... if no such preferences exist, handle
result is not called at all.
... callback handle
result is called once unless no such preference exists, in which case handle
result is not called at all.
nsIContentViewManager
method overview void getcontentviewsin(in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, [optional] out unsigned long alength, [retval, array, size_is(alength)] out nsicontentview a
result); attributes attribute type description rootcontentview nsicontentview the root content view.
... void getcontentviewsin( in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, out unsigned long alength, optional [retval, array, size_is(alength)] out nsicontentview a
result ); parameters axpx the x coordinate of the anchor point of the rectangle, in css pixels.
... alength optional if specified, on return this parameter indicates the number of nsicontentview objects returned in the a
result array.
... a
result on return, an array of nsicontentview objects representing the content views in the specified rectangle.
nsIDOMMozNetworkStatsManager
if successful, the request
result is an nsidommoznetworkstats object describing the network statistics.
...if successful, the
result field of the domrequest keeps the alarm id.
...if successful, the
result field of the domrequest holds an array of the currently available network interfaces.
...if successful, the
result field of the domrequest holds an array of the currently available service types.
nsIMsgDBView
lue sortorder); void docommand(in nsmsgviewcommandtypevalue command); void docommandwithfolder(in nsmsgviewcommandtypevalue command, in nsimsgfolder destfolder); void getcommandstatus(in nsmsgviewcommandtypevalue command, out boolean selectable_p, out nsmsgviewcommandcheckstatevalue selected_p); void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey
resultid, out nsmsgviewindex
resultindex, out nsmsgviewindex threadindex, in boolean wrap); boolean navigatestatus(in nsmsgnavigationtypevalue motion); nsmsgkey getkeyat(in nsmsgviewindex index); nsimsgdbhdr getmsghdrat(in nsmsgviewindex index); nsimsgfolder getfolderforviewindex(in nsmsgviewindex index); acstring geturiforviewindex(in nsmsgviewindex index); ...
... void viewnavigate(in nsmsgnavigationtypevalue motion, out nsmsgkey
resultid, out nsmsgviewindex
resultindex, out nsmsgviewindex threadindex, in boolean wrap); parameters motion the nsmsgnavigationtypevalue.
... return values
resultid the key of the
result message.
...
resultindex the index of the
result message.
nsIMsgFolder
ages(); void clearrequirescleanup(); void setflag(in unsigned long flag); void clearflag(in unsigned long flag); boolean getflag(in unsigned long flag); void toggleflag(in unsigned long flag); void onflagchange(in unsigned long flag); void setprefflag(); nsimsgfolder getfolderswithflag(in unsigned long flags, in unsigned long
resultsize, out unsigned long numfolders); nsisupportsarray getallfolderswithflag(in unsigned long aflag); void getexpansionarray(in nsisupportsarray expansionarray); acstring geturiformsg(in nsimsgdbhdr msghdr); void deletemessages(in nsisupportsarray messages,in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listene...
... gettingnewmessages boolean are we running a url as a
result of the user clicking get msg.
... note: do not call from js with
resultsize > 1.
... void setprefflag(); getfolderswithflag() nsimsgfolder getfolderswithflag(in unsigned long flags, in unsigned long
resultsize, out unsigned long numfolders); getallfolderswithflag() nsisupportsarray getallfolderswithflag(in unsigned long aflag); getexpansionarray() void getexpansionarray(in nsisupportsarray expansionarray); geturiformsg() acstring geturiformsg()(in nsimsgdbhdr msghdr); deletemessages() void deletemessages(in nsisupportsarray messages, in nsimsgwindow msgwindow, in boolean deletestorage, in boolean ismove, in nsimsgcopyservicelistener listener, in boolean a...
nsIProtocolProxyCallback
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void onproxyavailable(in nsicancelable arequest, in nsiuri auri, in nsiproxyinfo aproxyinfo, in ns
result astatus); methods onproxyavailable() this method is called when proxy info is available or when an error in the proxy resolution occurs.
... void onproxyavailable( in nsicancelable arequest, in nsiuri auri, in nsiproxyinfo aproxyinfo, in ns
result astatus ); parameters arequest the value returned from asyncresolve.
... aproxyinfo the
resulting proxy info or null if there is no associated proxy info for auri.
... as with the
result of nsiprotocolproxyservice's resolve method, a null
result implies that a direct connection should be used.
nsIRequest
method overview void cancel(in ns
result astatus); boolean ispending(); void resume(); void suspend(); attributes attribute type description loadflags nsloadflags the load flags of this request.
... status ns
result the error status associated with the request.
...breaking this requirement could
result in incorrect and potentially undesirable side-effects.
... void cancel( in ns
result astatus ); parameters astatus the reason for canceling this request.
nsIXPCException
inherits from: nsiexception last changed in gecko 1.9.2 (firefox 3.6 / thunderbird 3.1 / fennec 1.0) method overview void initialize(in string amessage, in ns
result a
result, in string aname, in nsistackframe alocation, in nsisupports adata, in nsiexception ainner); xpcexjsval stealjsval(); native code only!
... methods initialize() void initialize( in string amessage, in ns
result a
result, in string aname, in nsistackframe alocation, in nsisupports adata, in nsiexception ainner ); parameters amessage a
result aname alocation adata ainner native code only!stealjsval xpcexjsval stealjsval(); parameters none.
...the call signature of the constructor is: components.exception(message,
result, stack, data, inner) all parameters are optional and the appropriate placeholder is 'unknown'.
... message - a custom message set by the thrower (defaults to 'exception')
result - the ns
result associated with this exception (defaults to components.
results.ns_error_failure) stack - the stack chain (defaults to the current stack) data - additional data object of your choice (defaults to null) inner - an inner exception that triggered this, if available ...
nsPIPromptService
this is also used for the
result of the dialog.
...this is also used for the
result of the dialog.
...this is used for the
result of the dialog.
...this is the default checkbox state and the
result of it.
NS_CStringToUTF16
« xpcom api reference summary the ns_cstringtoutf16 function converts the value of a nsacstring instance to utf-16 and stores the
result in a nsastring instance.
... #include "nsstringapi.h" ns
result ns_cstringtoutf16( const nsacstring& asrc, nscstringencoding asrcencoding, nsastring& adest ); parameters asrc [in] a nsacstring instance containing the source string to be converted.
... adest [out] a nsastring instance that will contain the
result of the conversion.
... the
result will be encoded using the host byte order.
Frequently Asked Questions
e.g., using blocks as in this sample // the most efficient scheme is to scope your |nscomptr| to live exactly as long // as you need to hold the reference ns
result somelongfunction( nsibar* abar ) { ns
result rv; // ...
... call a getter that doesn't addref its
result?
...no matter which code pattern you use to solve this problem, you should comment it, e.g., // warning: this getter doesn't addref() its
result.
... if the getter returns the new pointer as its function
result, no worries, general does nscomptr bloat the code?
Working with Multiple Versions of Interfaces
to do this i used the accessibility framework: hwnd gethwnd(nsidomnode *node){ hwnd self = null; ns
result rv; nscomptr<nsiaccessibleretrieval> refp; refp = do_createinstance( "@mozilla.org/accessibleretrieval;1", &rv); if (ns_failed(rv)){ return self; } //line 6.
...what happens is that the call to do_createinstance fails with ns
result ns_error_no_interface.
... hwnd gethwndb(nsidomnode *node){ hwnd self = null; ns
result rv; nscomptr<nsicomponentmanager> compmgr; rv = ns_getcomponentmanager(getter_addrefs(compmgr)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessibleretrieval> refp; rv = compmgr->createinstancebycontractid(accretcid, 0, iar_iid_old, getter_addrefs(refp)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessible> accnode; rv = refp->getaccessiblefor(node, getter_addrefs(acc...
...i did have to delve into my old versions and change: ns_define_static_iid_accessor(...) to ns_declare_static_iid_accessor(...) this ugliness aside, my plan b routine now looks like: hwnd gethwndb(nsidomnode *node){ hwnd self = null; ns
result rv; nscomptr<nsicomponentmanager> compmgr; rv = ns_getcomponentmanager(getter_addrefs(compmgr)); if (ns_failed(rv)){ return self; } nscomptr<nsiaccessibleretrieval_old> refp; //n.b.
Mail and RDF
answering queries: when rdf asks for information about a resource, datasources answer with the
results of the query.
...this is basically what happens, behind the scenes: var target = rdf.getresource("mailbox://alecf@pop.myisp.com/inbox"); var property = rdf.getresource("http://home.netscape.com/nc-rdf#totalmessages"); var
resultnode = datasource.gettarget(target, property, true); in the folder datasource's gettarget(), target would be queryinterfaced to a nsimsgfolder.
...finally, it would convert the
result of this call to an rdf literal, and pass it back through the return parameter of gettarget().
... an example of how this might work inside the datasource: var msgcountarc = rdf.getresource("http://home.netscape.com/nc-rdf#totalmessages"); function gettarget(target, property, unused) { var folder = target.queryinterface(components.interfaces.nsimsgfolder); if (property == msgcountarc) { var msgcount = folder.gettotalmessages(false); var
result = rdf.getliteral(msgcount.tostring()); return
result; } } asynchronously notifying rdf when a mail object's data changes and the data is reflected in rdf by notifying all of the observers that rdf has registered with the datasource.
URLs - Plugins
if the browser cannot locate the url and retrieve the data, it does not create a stream for the instance; in this case, the plug-in receives notification of the
result.
... to request a stream and receive notification of the
result in all cases, use npn_geturlnotify.
... both the npn_geturlnotify and npn_posturlnotify functions call the npp_urlnotify method to notify the plug-in of the
result of a request.
...the
result from the server can also be sent to a particular browser window or frame for display, or delivered to the plug-in instance in a new stream.
Gecko Plugin API Reference - Plugins
warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredictable
results.
... npn_geturlnotify requests creation of a new stream with the contents of the specified url; gets notification of the
result.
... npn_posturlnotify posts data to a url, and receives notification of the
result.
..._evaluate npn_getproperty npn_setproperty npn_removeproperty npn_hasproperty npn_hasmethod npn_setexception npclass structures npanycallbackstruct npbyterange npembedprint npevent npfullprint npp np_port npprint npprintcallbackstruct nprect npregion npsaveddata npsetwindowcallbackstruct npstream npwindow constants error codes
result codes plug-in version constants version feature constants external resources external projects and articles for plugin creation original document information copyright information: netscape communication ...
Debugger - Firefox Developer Tools
note that the
result may include sources that can no longer ever be used by the debuggee: say, eval code that has finished running, or source for unreachable functions.
... whether such sources appear can be affected by the garbage collector’s behavior, so this function’s
result is not entirely deterministic.
... note that the
result may include debugger.script instances for scripts that can no longer ever be used by the debuggee, say, those for eval code that has finished running, or unreachable functions.
... the
results of this call can be affected in non-deterministic ways by the details of the javascript implementation.
Call Tree - Firefox Developer Tools
by analyzing its
results, you can find bottlenecks in your code - places where the browser is spending a disproportionately large amount of time.
... we've zoomed into the part of the recording that shows a long javascript marker: the call tree presents the
results in a table.
... this
result means that bubble sort is even less efficient than we had thought!
...let's expand that: this
result is telling us that 614 of those samples, or about 20% of the total cost, are coming from our sort() call.
Web Console Helpers - Firefox Developer Tools
$_ stores the
result of the last expression executed in the console's command line.
... $x(xpath, element,
resulttype) evaluates the xpath xpath expression in the context of element and returns an array of matching nodes.
...the
resulttype parameter specifies the type of
result to return; it can be an xpath
result constant, or a corresponding string: "number", "string", "bool", "node", or "nodes"; if not provided, any_type is used.
...otherwise, json.stringify will be called on the argument, and the
result will be copied to the clipboard.
Web Console remoting - Firefox Developer Tools
the response packet: { "from": "conn0.console9", "input": "document", "
result": { "type": "object", "classname": "htmldocument", "actor": "conn0.consoleobj20" "extensible": true, "frozen": false, "sealed": false }, "timestamp": 1347306273605, "exception": null, "exceptionmessage": null, "helper
result": null } exception holds the json-ification of the exception thrown during evaluation.
... exceptionmessage holds the exception.tostring()
result.
...
result has the
result objectactor instance.
... helper
result is anything that might come from a jsterm helper
result, json stuff (not content objects!).
CanvasRenderingContext2D.setTransform() - Web APIs
a value of 1
results in no scaling.
...a value of 1
results in no scaling.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.settransform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100);
result retrieving and passing a dommatrix object in the following example, we have two <canvas> elements.
...script const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.settransform' in that specification.
Using images - Web APIs
var img = new image(); // create new img element img.src = 'data:image/gif;base64,r0lgodlhcwalaiaaaaaa3pn/zih5baeaaaealaaaaaalaasaaaiuha+hkcuo4lmnvindo7qyrixigbyaow=='; one advantage of data urls is that the
resulting image is available immediately without another round trip to the server.
.../body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { ctx.drawimage(img, 0, 0); ctx.beginpath(); ctx.moveto(30, 96); ctx.lineto(70, 66); ctx.lineto(103, 76); ctx.lineto(170, 15); ctx.stroke(); }; img.src = 'https://mdn.mozillademos.org/files/5395/backdrop.png'; } the
resulting graph looks like this: screenshotlive sample scaling the second variant of the drawimage() method adds two new parameters and lets us place scaled images on the canvas.
...0" height="150"></canvas> </body> </html> function draw() { var ctx = document.getelementbyid('canvas').getcontext('2d'); var img = new image(); img.onload = function() { for (var i = 0; i < 4; i++) { for (var j = 0; j < 3; j++) { ctx.drawimage(img, j * 50, i * 38, 50, 38); } } }; img.src = 'https://udn.realityripple.com/samples/db/f374e9c6fc.jpg'; } the
resulting canvas looks like this: screenshotlive sample slicing the third and last variant of the drawimage() method has eight parameters in addition to the image source.
... // insert before the image document.images[i].parentnode.insertbefore(canvas,document.images[i]); ctx = canvas.getcontext('2d'); // draw image to canvas ctx.drawimage(document.images[i], 15, 20); // add frame ctx.drawimage(document.getelementbyid('frame'), 0, 0); } } } controlling image scaling behavior as mentioned previously, scaling images can
result in fuzzy or blocky artifacts due to the scaling process.
DOMMatrixReadOnly.translate() - Web APIs
the translate() method of the dommatrixreadonly interface creates a new matrix being the
result of the original matrix with a translation applied.
... if this is anything other than 0, the
resulting matrix will be 3d.
... return value returns a dommatrix containing a new matrix being the
result of the matrix being translated by the given vector.
... if a translation is applied about the z-axis, the
resulting matrix will be a 4x4 3d matrix.
How whitespace is handled by HTML, CSS, and in the DOM - Web APIs
this article explores when difficulties can occur, and looks at what can be done to mitigate
resulting problems.
...if there is formatting whitespace between adjacent inline elements, this will
result in space in the layout, just like the spaces between words in text.
...for example, if you have a reference to a parent node and want to affect its first element child using node.firstchild, if there is a rogue whitespace node just after the opening parent tag you will not get the
result you are expecting.
... as another example, if you have a certain subset of elements that you want to do something to based on whether they are empty (have no child nodes) or not, you could check whether each element is empty using something like node.haschildnodes(), but again, if any target elements contain text nodes, you could end up with false
results.
EffectTiming.fill - Web APIs
otherwise, the
result is "both".
...
result below we see what the
result looks like.
... in order to avoid leaking memory when many filling animations overlap, the browser is required to remove overlapped animations which can lead to surprising
results in some cases.
... elem.addeventlistener('click', async evt => { const animation = elem.animate( { transform: `translate(${evt.clientx}px, ${evt.clienty}px)` }, { duration: 800, fill: 'forwards' } ); await animation.finished; // commitstyles will record the style up to and including `animation` and // update elem’s specified style with the
result.
FileSystemDirectoryEntry.getDirectory() - Web APIs
values and
results the table below describes the
result of each possible combination of these flags depending on whether or not the target file or directory path already exists.
... option values file/directory condition
result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
...nction loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.
result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
... the success callback for this takes the
resulting directory entry object and calls getfile() to get a filesystemfileentry object representing the dictionary file; the success callback for this, in turn, creates a new filereader and uses it to load the contents of the file.
FileSystemDirectoryEntry.getFile() - Web APIs
values and
results the table below describes the
result of each possible combination of these flags depending on whether or not the target file or directory path already exists.
... option values file/directory condition
result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
...nction loaddictionaryforlanguage(appdatadirentry, lang) { dictionary = null; appdatadirentry.getdirectory("dictionaries", {}, function(direntry) { direntry.getfile(lang + "-dict.json", {}, function(fileentry) { fileentry.file(function(dictfile)) { let reader = new filereader(); reader.addeventlistener("loadend", function() { dictionary = json.parse(reader.
result); }); reader.readastext(dictfile); }); }); }); } the loaddictionaryforlanguage() function starts by using getdirectory() to obtain the filesystemdirectoryentry object representing a subfolder named "dictionaries" located inside the specified app data directory.
... the success callback for this takes the
resulting directory entry object and calls getfile() to get a filesystemfileentry object representing the dictionary file; the success callback for this, in turn, creates a new filereader and uses it to load the contents of the file.
IDBIndex.openCursor() - Web APIs
a success event is always fired on the
result object.
... if at least one record matches the key range, then the
result property of the event is set to the new idbcursorwithvalue object; the value of the cursor object is set to a structured clone of the referenced value.
... if no records match the key range then then the
result property of the event is set to null.
...lete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBIndex.openKeyCursor() - Web APIs
a success event is always fired on the
result object.
... if at least one key matches the key range, then the
result property of the event is set to the new idbcursor object; the key property of the cursor object is set to the found key and the primarykey property is set to the the corresponding primary key of the found record.
... if no keys match the key range, then then the
result property of the event is set to null.
... function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.openkeycursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.key + '</td>' + '<td>' + cursor.primarykey + '</td>'; tableentry.appendchild(tablerow); cursor.continue(); } else { console.log('all last names displayed.'); } }; }; specification specification status commen...
IDBObjectStore.put() - Web APIs
if the record is successfully stored, then a success event is fired on the returned request object with the
result set to the key for the stored record, and the transaction set to the transaction in which this object store is opened.
...if unspecified, it
results to null.
... example the following example requests a given record title; when that request is successful the onsuccess function gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store in another request with put().
...o-do notifications app (view example live.) const title = "walk dog"; // open up a transaction as usual const objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title const objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = () => { // grab the data object returned as the
result const data = objectstoretitlerequest.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back into the database const updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.trans...
IDBRequest: error event - Web APIs
roperty onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objects...
...tore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }); dbopenrequest.addeventlistener('success', event => { const db = dbopenrequest.
result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); }); the same example, using the onerror property instead...
... of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { cons...
...t db = dbopenrequest.
result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); objectstorerequest.onerror = () => { console.log(`error adding new item: ${newitem.tasktitle}`); }; }; ...
MediaStreamConstraints.audio - Web APIs
nt.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ audio: true }).then(stream => audioelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain an audio-only stream with no specific constraints, then attaches the
resulting stream to an <audio> element once the stream is returned.
...
result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <audio id="audio" autoplay controls></audio><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } audio { margin-top: 20px; border: 1px solid black; width: 160px; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let audioelement = document.getelementbyid("audio"); let logelement ...
...as long as an audio input device is available and the user allows it to be used, an audio track will be included in the
resulting stream, and it will match the specified constraints as well as possible.
...
result specifications specification status comment media capture and streamsthe definition of 'mediastreamconstraints.audio' in that specification.
MediaStreamConstraints.video - Web APIs
t.getelementbyid("startbutton").addeventlistener("click", function() { navigator.mediadevices.getusermedia({ video: true }).then(stream => videoelement.srcobject = stream) .catch(err => log(err.name + ": " + err.message)); }, false); here we see an event handler for a click event which uses getusermedia() to obtain a video-only stream with no specific constraints, then attaches the
resulting stream to a <video> element once the stream is returned.
...
result using a mediatrackconstraints object now let's look at a similar example that uses a set of constraints based on the mediatrackconstraints dictionary: html content <p>click the start button below to begin the demonstration.</p> <div id="startbutton" class="button"> start </div> <video id="video" width="160" height="120" autoplay></video><br> <div id="log"></div> css content body { font: 14px "open sans", "arial", sans-serif; } video { margin-top: 20px; border: 1px solid black; } .button { cursor: pointer; width: 160px; border: 1px solid black; font-size: 16px; text-align: center; padding-top: 2px; padding-bottom: 4px; color: white; background-color: darkgreen; } javascript content let videoelement = document.getelementbyid("video"); let logelement ...
...as long as a video input device is available and the user allows it to be used, a video track will be included in the
resulting stream, and it will match the specified constraints as well as possible.
...
result specifications specification status comment media capture and streamsthe definition of 'mediastreamconstraints.video' in that specification.
Using the Permissions API - Web APIs
function handlepermission() { navigator.permissions.query({name:'geolocation'}).then(function(
result) { if (
result.state == 'granted') { report(
result.state); geobtn.style.display = 'none'; } else if (
result.state == 'prompt') { report(
result.state); geobtn.style.display = 'none'; navigator.geolocation.getcurrentposition(revealposition,positiondenied,geosettings); } else if (
result.state == 'denied') { report(
result.state); geobtn.style.displ...
...ay = 'inline'; }
result.onchange = function() { report(
result.state); } }); } function report(state) { console.log('permission ' + state); } handlepermission(); permission descriptors the permissions.query() method takes a permissiondescriptor dictionary as a parameter — this contains the name of the api you are interested in.
... function revokepermission() { navigator.permissions.revoke({name:'geolocation'}).then(function(
result) { report(
result.state); }); } the revoke() function has been disabled by default starting in firefox 51, since its design has been brought into question in the web applications security working group.
...in the
resulting dialog, find the location section and select ask when a site tries to...
Using Pointer Events - Web APIs
drawing as the pointers move each time one or more pointers moves, a pointermove event is delivered,
resulting in our handlemove() function being called.
...the
result is that we stop tracking that touch point.
...h) { var r = touch.pointerid % 16; var g = math.floor(touch.pointerid / 3) % 16; var b = math.floor(touch.pointerid / 7) % 16; r = r.tostring(16); // make it a hex digit g = g.tostring(16); // make it a hex digit b = b.tostring(16); // make it a hex digit var color = "#" + r + g + b; log("color for touch with identifier " + touch.pointerid + " = " + color); return color; } the
result from this function is a string that can be used when calling <canvas> functions to set drawing colors.
... for example, for a pointerevent.pointerid value of 10, the
resulting string is "#aaa".
RTCDtlsTransport.state - Web APIs
closed the transport has been closed intentionally as the
result of receipt of a close_notify alert, or calling rtcpeerconnection.close().
... failed the transport has failed as the
result of an error (such as receipt of an error alert or failure to validate the remote fingerprint).
...*/ function tallysenders(pc) { let
results = { transportmissing: 0, connectionpending: 0, connected: 0, closed: 0, failed: 0, unknown: 0 }; let senderlist = pc.getsenders(); senderlist.foreach(sender => { let transport = sender.transport; if (!transport) {
results.transportmissing++; } else { switch(transport.state) { case "new": case "connecting":
results.
...connectionpending++; break; case "connected":
results.connected++; break; case "closed":
results.closed++; break; case "failed":
results.failed++; break; default:
results.unknown++; break; } } }); return
results; } note that in this code, the new and connecting states are being treated as a single connectionpending status in the returned object.
RTCPeerConnection - Web APIs
the event is sent immediately after the call setremotedescription() and doesn't wait for the
result of the sdp negotiation.onconnectionstatechangethe rtcpeerconnection.onconnectionstatechange property specifies an eventhandler which is called to handle the connectionstatechange event when it occurs on an instance of rtcpeerconnection.
...this happens when the ice gathering state—that is, whether or not the ice agent is actively gathering candidates—changes.onidentity
result the rtcpeerconnection.onidentity
result event handler is a property containing the code to execute when the identity
result event, of type rtcidentityevent, is received by this rtcpeerconnection.
... identity
result in old versions of the webrtc specification, this event was used to indicate that an identity assertion is available.
... also available using the onidentity
result event handler property.
RTCRemoteOutboundRtpStreamStats.localId - Web APIs
it takes as input the rtcpeerconnection being tested, calls getstats() to get a new rtcstatsreport with current statistics, then computes the
results it's looking for, outputting those
results as appropriate to the user by appending appropriate html to the contents of the <div> element whose class is stats-box.
... now we can begin to process the
results, starting with the ending statistics found in endreport.
...we then divide by 1000 to convert the
result from milliseconds to seconds.
... the remainder of the networkteststop() function constructs the html used to display the output of the collected and computed
results to the user, then append it to the element statsbox, which we're using to show the status updates to the user.
Range.setStart() - Web APIs
setting the start point below (lower in the document) the end point will
result in a collapsed range with the start and end points both set to the specified start position.
...const endoffset = 5; // end at fifth node: dodge city, ks const range = document.createrange(); range.setstart(address, startoffset); range.setend(address, endoffset); const mark = document.createelement('mark'); range.surroundcontents(mark);
result get characters from a text node this example uses the range.setstart() and range.setend() methods to define the contents of a range.
... the
resulting range contains the first through fifth characters within a text node.
... html <p id="content">0123456789</p> <p id="log"></p> javascript const element = document.getelementbyid('content'); const textnode = element.childnodes[0]; const range = document.createrange(); range.setstart(textnode, 0); // start at first character range.setend(textnode, 5); // end at fifth character document.getelementbyid('log').textcontent = range;
result specifications specification status comment domthe definition of 'range.setstart()' in that specification.
ReadableStream.getReader() - Web APIs
values can be: "byob", which
results in a readablestreambyobreader being created that can read readable byte streams (i.e.
... undefined (or not specified at all — this is the default), which
results in a readablestreamdefaultreader being created that can read individual chunks from a stream.
... function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { //
result objects contain two properties: // done - true if the stream has already given you all its data.
...current chunk = ' + chunk; list2.appendchild(listitem);
result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'getreader()' in that specification.
ReadableStream.tee() - Web APIs
the tee() method of the readablestream interface tees the current readable stream, returning a two-element array containing the two
resulting branches as new readablestream instances.
... to cancel the stream you then need to cancel both
resulting branches.
... examples in the following simple example, a previously-created stream is teed, then both
resulting streams (contained in two members of a generated array) are passed to a function that reads the data out of the two streams and prints each stream's chunks sequentially to a different part of the ui.
... function teestream() { const teedoff = stream.tee(); fetchstream(teedoff[0], list2); fetchstream(teedoff[1], list3); } function fetchstream(stream, list) { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { //
result objects contain two properties: // done - true if the stream has already given you all its data.
Using the Screen Capture API - Web APIs
see options and constraints, below, for more on both how to specify the type of surface you want as well as other ways to adjust the
resulting stream.
... options and constraints the constraints object passed into getdisplaymedia() is a displaymediastreamconstraints object which is used to configuring the
resulting stream.
...the contraints alter what you see in the
resulting stream.
... #video { border: 1px solid #999; width: 98%; max-width: 860px; } .error { color: red; } .warn { color: orange; } .info { color: darkgreen; }
result the final product looks like this.
SpeechRecognition.continuous - Web APIs
the continuous property of the speechrecognition interface controls whether continuous
results are returned for each recognition, or only a single
result.
... it defaults to single
results (false.) syntax var mycontinuous = myspeechrecognition.continuous; myspeechrecognition.continuous = true; value a boolean representing the current speechrecognition's continuous status.
... true means continuous, and false means not continuous (single
result each time.) examples this code is excerpted from our speech color changer example.
... | plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; recognition.continuous = false; recognition.lang = 'en-us'; recognition.interim
results = false; recognition.maxalternatives = 1; ...
SpeechRecognitionAlternative - Web APIs
recognition.on
result = function(event) { // the speechrecognitionevent
results property returns a speechrecognition
resultlist object // the speechrecognition
resultlist object contains speechrecognition
result objects.
... // it has a getter so it can be accessed like an array // the first [0] returns the speechrecognition
result at position 0.
... // each speechrecognition
result object contains speechrecognitionalternative objects that contain individual
results.
... // we then return the transcript property of the speechrecognitionalternative object var color = event.
results[0][0].transcript; diagnostic.textcontent = '
result received: ' + color + '.'; bg.style.backgroundcolor = color; } specifications specification status comment web speech apithe definition of 'speechrecognitionalternative' in that specification.
Using writable streams - Web APIs
the constructor call in our example looks like this: const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " ...
...+ decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); the write() method contains a promise including code that decodes each written chunk into a format that can be written to the ui.
... the close() method is called automatically when writing has finished — it prints the entire decoded
result to the ui in one string.
... with the chunks encoded, we then call array/foreach on the
resulting array.
SubtleCrypto.generateKey() - Web APIs
syntax const
result = crypto.subtle.generatekey(algorithm, extractable, keyusages); parameters algorithm is a dictionary object defining the type of key to generate and providing extra algorithm-specific parameters.
... return value
result is a promise that fulfills with a cryptokey (for symmetric algorithms) or a cryptokeypair (for public-key algorithms).
... exceptions the promise is rejected when the following exception is encountered: syntaxerror raised when the
result is a cryptokey of type secret or private but keyusages is empty.
... syntaxerror raised when the
result is a cryptokeypair and its privatekey.usages attribute is empty.
SubtleCrypto.importKey() - Web APIs
syntax const
result = crypto.subtle.importkey( format, keydata, algorithm, extractable, usages ); parameters format is a string describing the data format of the key to import.
... return value
result is a promise that fulfills with the imported key as a cryptokey object.
... convert the
resulting string into an arraybuffer.
... convert the
resulting string into an arraybuffer.
WebGL constants - Web APIs
unsigned_int_5_9_9_9_rev 0x8c3e float_32_unsigned_int_24_8_rev 0x8dad unsigned_int_24_8 0x84fa half_float 0x140b rg 0x8227 rg_integer 0x8228 int_2_10_10_10_rev 0x8d9f queries constant name value description current_query 0x8865 query_
result 0x8866 query_
result_available 0x8867 any_samples_passed 0x8c2f any_samples_passed_conservative 0x8d6a draw buffers constant name value description max_draw_buffers 0x8824 draw_buffer0 0x8825 draw_buffer1 0x8826 draw_buffer2 0x8827 draw...
... ext_disjoint_timer_query constant name value description query_counter_bits_ext 0x8864 the number of bits used to hold the query
result for the given target.
... query_
result_ext 0x8866 the query
result.
... query_
result_available_ext 0x8867 a boolean indicating whether or not a query
result is available.
Fundamentals of WebXR - Web APIs
the overlapping area, which is sort of a shade of purple, is the area in which the viewer has binocular vision and, as a
result, depth perception.
...these devices include phones, which show the
resulting scene on the device's screen in a 2d presentation, as well as goggles that use a pair of cameras, one for each eye, to capture the scene in stereo in order to retain the world's depth, with the webxr scene then rendered for each eye with that eye's captured background in place.
... important health and safety reminders because the entire act of creating a virtual 3d world is, in essence, a trick which takes advantage of our understanding of how eyes collect light and how the brain interprets the collected data, it is important to keep in mind that as such, software designers and developers have a responsibility to be even more careful than usual to ensure that the
results are correct.
... defects, misalignments, or distortion can confuse the eyes and the brain,
resulting in anything from aching eyes or headache to in some cases vertigo, dizziness, or potentially severe nausea.
Example and tutorial: Simple synth keyboard - Web APIs
= 2637.020455302959437; notefreq[7]["f"] = 2793.825851464031075; notefreq[7]["f#"] = 2959.955381693075191; notefreq[7]["g"] = 3135.963487853994352; notefreq[7]["g#"] = 3322.437580639561108; notefreq[7]["a"] = 3520.000000000000000; notefreq[7]["a#"] = 3729.310092144719331; notefreq[7]["b"] = 3951.066410048992894; notefreq[8]["c"] = 4186.009044809578154; return notefreq; } the
result is an array, notefreq, with an object for each octave.
...in part, the
resulting object looks like this: octave notes 0 "a" ⇒ 27.5 "a#" ⇒ 29.14 "b" ⇒ 30.87 1 "c" ⇒ 32.70 "c#" ⇒ 34.65 "d" ⇒ 36.71 "d#" ⇒ 38.89 "e" ⇒ 41.20 "f" ⇒ 43.65 "f#" ⇒ 46.25 "g" ⇒ 49 "g#" ⇒ 51.9 "a" ⇒ 55 "a#" ⇒ 58.27 "b" ⇒ 61.74 2 .
...if we want the frequency for the note g# in octave 1, we simply use notefreq[1]["g#"] and get the value 51.9 as a
result.
...
result put all together, the
result is a simple but working point-and-click musical keyboard: ...
ARIA: grid role - Accessibility
), parseint(event.target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.row, 10) + 1, parseint(event.target.dataset.col, 10)); break; case "arrowup": moveto(parseint(event.target.dataset.row, 10) - 1, parseint(event.target.dataset.col, 10)); break; case "home": if (event.ctrlkey) { var i = 0; var
result; do { var j = 0; var
result; do {
result = moveto(i, j); j++; } while (
result == false); i++; } while (
result == false); } else { moveto(parseint(event.target.dataset.row, 10), 0); } break; case "end": if (event.ctrlkey) { var i = maxrow; var
result; ...
... do { var j = maxcol; do {
result = moveto(i, j); j--; } while (
result == false); i--; } while (
result == false); } else { moveto(parseint(event.target.dataset.row, 10), document.queryselector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); } break; case "pageup": var i = 0; var
result; do {
result = moveto(i, event.target.dataset.col); i++; } while (
result == false); break; case "pagedown": var i = maxrow; var
result; do {
result = moveto(i, event.target.dataset.col); i--; } while (
result == false); break; case "enter": alert(event.target.textcontent); bre...
...), parseint(event.target.dataset.col, 10) - 1); break; case "arrowdown": moveto(parseint(event.target.dataset.row, 10) + 1, parseint(event.target.dataset.col, 10)); break; case "arrowup": moveto(parseint(event.target.dataset.row, 10) - 1, parseint(event.target.dataset.col, 10)); break; case "home": if (event.ctrlkey) { var i = 0; var
result; do { var j = 0; var
result; do {
result = moveto(i, j); j++; } while (
result == false); i++; } while (
result == false); } else { moveto(parseint(event.target.dataset.row, 10), 0); } break; case "end": if (event.ctrlkey) { var i = maxrow; var
result; ...
... do { var j = maxcol; do {
result = moveto(i, j); j--; } while (
result == false); i--; } while (
result == false); } else { moveto(parseint(event.target.dataset.row, 10), document.queryselector('[data-row="' + event.target.dataset.row + '"]:last-of-type').dataset.col); } break; case "pageup": var i = 0; var
result; do {
result = moveto(i, event.target.dataset.col); i++; } while (
result == false); break; case "pagedown": var i = maxrow; var
result; do {
result = moveto(i, event.target.dataset.col); i--; } while (
result == false); break; case "enter": alert(event.target.textcontent); bre...
Accessibility documentation index - Accessibility
4 aria test cases aria, accessibility for each example we test the "expected"
results with assistive technologies, for each browser that at supports wai-aria in.
... 7 aria live regions aria, accessibility, arialive using javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search
results on the fly, or to display a discreet alert or notification which does not require user interaction.
...aria-invalid can also be used to indicate that a required field has not been filled in.the attribute should be programmatically set as a
result of a validation process.
...while this
results in a widget that looks like its desktop counterpart, there usually isn't enough semantic information in the markup to be usable by an assistive technology.
::before (:before) - CSS: Cascading Style Sheets
html <q>some quotes,</q> he said, <q>are better than none.</q> css q::before { content: "«"; color: blue; } q::after { content: "»"; color: red; }
result decorative example we can style text or images in the content property almost any way we want.
... html <span class="ribbon">notice where the orange box is.</span> css .ribbon { background-color: #5bc8f7; } .ribbon::before { content: "look at this orange box."; background-color: #ffba10; border-color: black; border-style: dotted; }
result to-do list in this example we will create a simple to-do list using pseudo-elements.
...
result special characters as this is css; not html, you can not use markup entities in content values.
...flat frying pan</li> <li>fry until the top of the pancake loses its gloss</li> <li>flip it over and fry for a couple more minutes</li> <li>serve with your favorite topping</li> </ol> css li { padding:0.5em; } li[aria-current='step'] { font-weight:bold; } li[aria-current='step']::after { content: " \21e6"; /* hexadecimal for unicode leftwards white arrow*/ display: inline; }
result specifications specification status comment css pseudo-elements level 4the definition of '::before' in that specification.
:scope - CSS: Cascading Style Sheets
</p> <p id="output"></p>
result direct children a situation where the :scope pseudo-class prove to be useful is when you need to get direct descendant of an already retrieved element.
... javascript var context = document.getelementbyid('context'); var selected = context.queryselectorall(':scope > div'); document.getelementbyid('
results').innerhtml = array.prototype.map.call(selected, function (element) { return '#' + element.getattribute('id'); }).join(', '); html <div id="context"> <div id="element-1"> <div id="element-1.1"></div> <div id="element-1.2"></div> </div> <div id="element-2"> <div id="element-2.1"></div> </div> </div> <p> selected elements ids : <span id="
results"></span> </p>
result specifications specification status comment selectors level 4the definition of ':scope' in that specification.
...<style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations
resulted in the decision to remove it.
...<style scoped> made it possible to explicitly set up element scopes, but ongoing discussions about the design of this feature as well as lack of other implementations
resulted in the decision to remove it.
Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
this will
result in the flex-basis being taken from the content size even if there is a width set on the item.
...the end
result is three equal width, flexible items.
...to test that out change the values assigned in the above example to .25, .25, and .50 — you should see the same
result.
... in practice the shrinking behaviour does tend to give you reasonable
results.
display - CSS: Cascading Style Sheets
this will
result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.
...this will
result in expected behavior; for example if you specify an element to be display: grid, you would expect that the box created on the grid container would be a block level box.
... the <display-legacy> methods allow the same
results with single keyword values, and should be favoured by developers until the two keyword values are better supported.
...px; } article, span { padding: 10px; border-radius: 7px; } article, div { margin: 20px; } javascript const articles = document.queryselectorall('.container'); const select = document.queryselector('select'); function updatedisplay() { articles.foreach((article) => { article.style.display = select.value; }); } select.addeventlistener('change', updatedisplay); updatedisplay();
result note: you can find more examples in the pages for each separate display data type, linked above.
<length> - CSS: Cascading Style Sheets
300px, 50%, 30vw) to set the width of a
result bar that will appear below it once you've pressed return.
... html <div class="outer"> <div class="input-container"> <label>enter width:</label> <input type="text" id="length"> </div> <div class="inner"> </div> </div> <div class="
results"> </div> css html { font-family: sans-serif; font-weight: bold; box-sizing: border-box; } .outer { width: 100%; height: 50px; background-color: #eee; position: relative; } .inner { height: 50px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); } .
result { height: 20px; background-color: #999; box-shadow: inset 3px 3px 5px rgba(255,255,255,0.5), inset -3px -3px 5px rgba(0,0,0,0.5); background-color: ora...
...nge; display: flex; align-items: center; margin-top: 10px; } .
result code { position: absolute; margin-left: 20px; } .
results { margin-top: 10px; } .input-container { position: absolute; display: flex; justify-content: flex-start; align-items: center; height: 50px; } label { margin: 0 10px 0 20px; } javascript const inputdiv = document.queryselector('.inner'); const inputelem = document.queryselector('input'); const
resultsdiv = document.queryselector('.
results'); inputelem.addeventlistener('change', () => { inputdiv.style.width = inputelem.value; const
result = document.createelement('div');
result.classname = '
result';
result.style.width = inputelem.value;
result.innerhtml = `<code>width: ${inputelem.value}</code>`;
resultsdiv.appendchild(
result); ...
... inputelem.value = ''; inputelem.focus(); })
result specifications specification status comment css values and units module level 4the definition of '<length>' in that specification.
text-align - CSS: Cascading Style Sheets
nations understanding success criterion 1.4.8 | understanding wcag 2.0 formal definition initial valuestart, or a nameless value that acts as left if direction is ltr, right if direction is rtl if start is not supported by the browser.applies toblock containersinheritedyescomputed valueas specified, except for the match-parent value which is calculated against its parent's direction value and
results in a computed value of either left or rightanimation typediscrete formal syntax start | end | left | right | center | justify | match-parent examples left alignment html <p class="example"> integer elementum massa at nulla placerat varius.
...</p> css .example { text-align: left; border: solid; }
result centered text html <p class="example"> integer elementum massa at nulla placerat varius.
...</p> css .example { text-align: center; border: solid; }
result justify html <p class="example"> integer elementum massa at nulla placerat varius.
...</p> css .example { text-align: justify; border: solid; }
result notes the standard-compatible way to center a block itself without centering its inline content is setting the left and right margin to auto, e.g.: .something { margin: auto; } .something { margin: 0 auto; } .something { margin-left: auto; margin-right: auto; } specifications specification status comment css logical properties and values level 1the definition of 'text-align' in that specification.
text-rendering - CSS: Cascading Style Sheets
but if you request a font size of, say, 9 with a scale of 140%, the
resulting font size of 12.6 doesn't explicitly exist in the font system, so the browser rounds the font size to 12 instead.
... this
results in stair-step scaling of text.
... html <p class="small">lyowat - ff fi fl ffl</p> <p class="big">lyowat - ff fi fl ffl</p> css .small { font: 19.9px "constantia", "times new roman", "georgia", "palatino", serif; } .big { font: 20px "constantia", "times new roman", "georgia", "palatino", serif; }
result optimizespeed vs optimizelegibility this example shows the difference between the appearance of optimizespeed and optimizelegibility (in your browser; other browsers may vary).
... html <p class="speed">lyowat - ff fi fl ffl</p> <p class="legibility">lyowat - ff fi fl ffl</p> css p { font: 1.5em "constantia", "times new roman", "georgia", "palatino", serif } .speed { text-rendering: optimizespeed; } .legibility { text-rendering: optimizelegibility; }
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'text-rendering' in that specification.
scale() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...if it is negative, the
result a point reflection in that dimension.
...if not defined, its default value is sx,
resulting in a uniform scaling that preserves the element's aspect ratio.
...rstanding wcag, guideline 2.3 explanations understanding success criterion 2.3.3 | w3c understanding wcag 2.1 examples scaling the x and y dimensions together html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(0.7); /* equal to scalex(0.7) scaley(0.7) */ background-color: pink; }
result scaling x and y dimensions separately, and translating the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scale(2, 0.5); /* equal to scalex(2) scaley(0.5) */ transform-origin: left; background-color: pink; }
result specifications specification status comm...
<abbr>: The Abbreviation element - HTML: Hypertext Markup Language
html <p>using <abbr>html</abbr> is fun and easy!</p>
result styling abbreviations you can use css to set a custom style to be used for abbreviations, as seen in this simple example.
... html <p>using <abbr>css</abbr>, you can style your abbreviations!</p> css abbr { font-variant: all-small-caps; }
result providing an expansion adding a title attribute lets you provide an expansion or definition for the abbreviation or acronym.
... html <p>ashok's joke made me <abbr title="laugh out loud">lol</abbr> big time.</p>
result defining an abbreviation you can use <abbr> in tandem with <dfn> to more formally define an abbreviation, as shown here.
... html <p><dfn id="html"><abbr title="hypertext markup language">html</abbr> </dfn> is a markup language used to create the semantics and structure of a web page.</p> <p>a <dfn id="spec">specification</dfn> (<abbr title="specification">spec</abbr>) is a document that outlines in detail how a technology or api is intended to function and how it is accessed.</p>
result accessibility concerns spelling out the acronym or abbreviation in full the first time it is used on a page is beneficial for helping people understand it, especially if the content is technical or industry jargon.
<details>: The Details disclosure element - HTML: Hypertext Markup Language
an input device as well as some form of output device is recommended.</p> </details> the
result from this html is this: creating an open disclosure box to start the <details> box in its open state, add the boolean open attribute: <details open> <summary>system requirements</summary> <p>requires a computer running an operating system.
... an input device as well as some form of output device is recommended.</p> </details> this
results in: customizing the appearance now let's apply some css to customize the appearance of the disclosure box.
... an input device as well as some form of output device is recommended.</p> </details>
result customizing the disclosure widget the disclosure triangle itself can be customized, although this is not as broadly supported.
... an input device as well as some form of output device is recommended.</p> </details>
result specifications specification status comment html living standardthe definition of '<details>' in that specification.
<input type="color"> - HTML: Hypertext Markup Language
note: setting the value to anything that isn't a valid, fully-opaque, rgb color in hexadecimal notation will
result in the value being set to #000000.
...#009900aa) will also
result in the color being set to #000000.
...because users can write colors in many different ways (such as rgb(255, 255, 0)), one way to work around this is to set a pattern attribute equal to either #[0-9a-f]{6} or #[0-9a-fa-f]{6} (preferably the latter because some users may not expect a different
result with just a letter-case change) and set a placeholder attribute equal to a color representing the expected format of the user's input, such as #ff0000.
...
result the final
result looks like this: specifications specification status comment html living standard living standard initial definition html5 recommendation initial definition ...
<input type="date"> - HTML: Hypertext Markup Language
the
resulting value includes the year, month, and day, but not the time.
... basic uses of date the simplest use of <input type="date"> involves one <input> combined with its <label>, as seen below: <form action="https://example.com"> <label> enter your birthday: <input type="date" name="bday"> </label> <p><button>submit</button></p> </form> this html submits the entered date under the key bday to https://example.com —
resulting in a url like https://example.com/?bday=1955-06-08.
...in the following example, we set a minimum date of 2017-04-01 and a maximum date of 2017-04-30: <form> <label for="party">choose your preferred party date: <input type="date" name="party" min="2017-04-01" max="2017-04-30"> </label> </form> the
result is that only days in april 2017 can be selected — the month and year parts of the textbox will be uneditable, and dates outside april 2017 can't be selected in tte picker widget.
...however, you'll need to double-check the submitted
results to ensure the value is within these dates, if the date picker isn't fully supported on the user's device.
<input type="email"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be relied upon to be so; the
resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
...as a
result, we wind up with a validation which says "make sure this resembles a valid e-mail address, and if it is, make sure it's also a beststartupever.com address." it's advisable to use the title attribute along with pattern.
...if your title is something like "e-mail address", the
result would be the message "the entered text doesn't match the required pattern.
... that's why, instead, we specify the string "please provide only a best startup ever corporate e-mail address" by doing that, the
resulting full error message might be something like "the entered text doesn't match the required pattern.
<output>: The Output element - HTML: Hypertext Markup Language
the html output element (<output>) is a container element into which a site or app can inject the
results of a calculation or the outcome of a user action.
...the two numbers are added together, and the
result is displayed in the <output> element each time the value of any of the controls changes.
... <form oninput="
result.value=parseint(a.value)+parseint(b.value)"> <input type="range" id="b" name="b" value="50" /> + <input type="number" id="a" name="a" value="10" /> = <output name="
result" for="a b">60</output> </form> accessibility concerns many browsers implement this element as an aria-live region.
... assistive technology will thereby announce the
results of ui interactions posted inside it without requiring that focus is switched away from the controls that produce those
results.
<title>: The Document Title element - HTML: Hypertext Markup Language
the content of the title is one of the components used by search engine algorithms to decide the order in which to list pages in search
results.
... also, the title is the initial "hook" by which you grab the attention of readers glancing at the search
results page.
... don't use "keyword blobs." if your title is just a list of words, algorithms often reduce your page's position in the search
results.
...duplicate—or near-duplicate—titles can contribute to inaccurate search
results.
<u>: The Unarticulated Annotation (Underline) element - HTML: Hypertext Markup Language
result the
result should be familiar to anyone who has used any of the more popular word processors available today.
... html <span class="underline">today's special</span> <br> chicken noodle soup with carrots css .underline { text-decoration: underline; }
result presenting a book title book titles should be presented using the <cite> element instead of <u> or even <i>.
... html <p>the class read <cite>moby dick</cite> in the first term.</p>
result with default style note that the default styling for the <cite> element renders the text in italics.
... you can, if you wish, override that using css: cite { font-style: normal; text-decoration: underline; }
result with custom style specifications specification status comment html living standardthe definition of '<u>' in that specification.
HTTP Index - HTTP
44 http conditional requests conditional requests, guide, http http has a concept of conditional requests, where the
result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator.
... 60 access-control-max-age cors, http, reference, header the access-control-max-age response header indicates how long the
results of a preflight request (that is the information contained in the access-control-allow-methods and access-control-allow-headers headers) can be cached.
...the principal use is to indicate the url of a resource transmitted as the
result of content negotiation.
...this response code is usually sent back as a
result of put or post.
Proxy Auto-Configuration (PAC) file - HTTP
if both values are specified, the
result is true between those times, including bounds, but the bounds are ordered.
...if both values are specified, the
result is true between those times, including bounds, but the bounds are ordered.
...y resolve internal host names, and the goal is to use a proxy only for hosts that aren't resolvable: function findproxyforurl(url, host) { if (isresolvable(host)) return "direct"; else return "proxy proxy.mydomain.com:8080"; } the above requires consulting the dns every time; it can be grouped intelligently with other rules so that dns is consulted only if other rules do not yield a
result: function findproxyforurl(url, host) { if ( isplainhostname(host) || dnsdomainis(host, ".mydomain.com") || isresolvable(host) ) { return "direct"; } else { return "proxy proxy.mydomain.com:8080"; } } example 4 subnet based decisions in this example all of the hosts in a given subnet are connected-to directly, others are connected through the proxy: function findpr...
...most of the time these functions are not necessary to achieve the desired
result.
Functions - JavaScript
function map(f, a) { let
result = []; // create a new array let i; // declare variable for (i = 0; i != a.length; i++)
result[i] = f(a[i]); return
result; } in the following code, the function receives a function defined by a function expression and executes it for every element of the array received as a second argument.
... function map(f, a) { let
result = []; // create a new array let i; // declare variable for (i = 0; i != a.length; i++)
result[i] = f(a[i]); return
result; } const f = function(x) { return x * x * x; } let numbers = [0, 1, 2, 5, 10]; let cube = map(f,numbers); console.log(cube); function returns: [0, 1, 8, 125, 1000].
.../ returns 25 c = addsquares(4, 5); // returns 41 since the inner function forms a closure, you can call the outer function and specify arguments for both the outer and inner function: function outside(x) { function inside(y) { return x + y; } return inside; } fn_inside = outside(3); // think of it like: give me a function that adds 3 to whatever you give // it
result = fn_inside(5); // returns 8
result1 = outside(3)(5); // returns 8 preservation of variables notice how x is preserved when inside is returned.
...the function is defined as follows: function myconcat(separator) { var
result = ''; // initialize list var i; // iterate through arguments for (i = 1; i < arguments.length; i++) {
result += arguments[i] + separator; } return
result; } you can pass any number of arguments to this function, and it concatenates each argument into a string "list": // returns "red, orange, blue, " myconcat(', ', 'red', 'orange', 'blue'); // returns "elephant; giraffe; l...
Grammar and types - JavaScript
an attempt to access an undeclared variable
results in a referenceerror exception being thrown: var a; console.log('the value of a is ' + a); // the value of a is undefined console.log('the value of b is ' + b); // the value of b is undefined var b; // this one may puzzle you until you read 'variable hoisting' below console.log('the value of c is ' + c); // uncaught referenceerror: c is not defined let x; console.log('the value of x is ' + x)...
...referencing the variable in the block before the variable declaration
results in a referenceerror, because the variable is in a "temporal dead zone" from the start of the block until the declaration is processed.
...the first element of the car object defines a property, mycar, and assigns to it a new string, "saturn"; the second element, the getcar property, is immediately assigned the
result of invoking the function (cartypes("honda")); the third element, the special property, uses an existing variable (sales).
...service."; console.log(quote); the
result of this would be: he read "the cremation of sam mcgee" by r.w.
Indexed collections - JavaScript
let arr = new array(arraylength) // ...
results in the same array as this let arr = array(arraylength) // this has exactly the same effect let arr = [] arr.length = arraylength note: in the above code, arraylength must be a number.
... // // this is equivalent to: let arr = [] arr.length = 42 calling array(n)
results in a rangeerror, if n is a non-whole number whose fractional portion is non-zero.
... let myarray = new array('wind', 'rain', 'fire') let list = myarray.join(' - ') // list is "wind - rain - fire" push() adds one or more elements to the end of an array and returns the
resulting length of the array.
... const arr = [1, 2, 3]; arr.property = "value"; console.log(arr.property); // logs "value" arrays and regular expressions when an array is the
result of a match between a regular expression and a string, the array returns properties and elements that provide information about the match.
Groups and ranges - JavaScript
in
results, matches to capturing groups typically in an array whose members are in the same order as the left parentheses in the capturing group.
...matches are accessed using the index of the the
result's elements ([1], ..., [n]) or from the predefined regexp object's properties ($1, ..., $9).
...the
resulting number would appear under matches.groups.area.
...the matched substring cannot be recalled from the
resulting array's elements ([1], ..., [n]) or from the predefined regexp object's properties ($1, ..., $9).
Inheritance and the prototype chain - JavaScript
function dosomething(){} dosomething.prototype.foo = "bar"; console.log( dosomething.prototype ); this
results in: { foo: "bar", constructor: ƒ dosomething(), __proto__: { constructor: ƒ object(), hasownproperty: ƒ hasownproperty(), isprototypeof: ƒ isprototypeof(), propertyisenumerable: ƒ propertyisenumerable(), tolocalestring: ƒ tolocalestring(), tostring: ƒ tostring(), valueof: ƒ valueof() } } we can now use the new ope...
... try the following code: function dosomething(){} dosomething.prototype.foo = "bar"; // add a property onto the prototype var dosomeinstancing = new dosomething(); dosomeinstancing.prop = "some value"; // add a property onto the object console.log( dosomeinstancing ); this
results in an output similar to the following: { prop: "some value", __proto__: { foo: "bar", constructor: ƒ dosomething(), __proto__: { constructor: ƒ object(), hasownproperty: ƒ hasownproperty(), isprototypeof: ƒ isprototypeof(), propertyisenumerable: ƒ propertyisenumerable(), tolocalestring: ƒ tolocales...
...meinstancing.prop: " + dosomeinstancing.prop); console.log("dosomeinstancing.foo: " + dosomeinstancing.foo); console.log("dosomething.prop: " + dosomething.prop); console.log("dosomething.foo: " + dosomething.foo); console.log("dosomething.prototype.prop: " + dosomething.prototype.prop); console.log("dosomething.prototype.foo: " + dosomething.prototype.foo); this
results in the following: dosomeinstancing.prop: some value dosomeinstancing.foo: bar dosomething.prop: undefined dosomething.foo: undefined dosomething.prototype.prop: undefined dosomething.prototype.foo: bar different ways to create objects and the
resulting prototype chain objects created with syntax constructs var o = {a: 1}; // the newly created object o has ob...
...all of the examples listed below create exactly the same
resulting inst object (thus logging the same
results to the console), except in different ways for the purpose of illustration.
Array.prototype.reduce() - JavaScript
the reduce() method executes a reducer function (that you provide) on each element of the array,
resulting in single output value.
... the reducer function takes four arguments: accumulator (acc) current value (cur) current index (idx) source array (src) your reducer function's returned value is assigned to the accumulator, whose value is remembered across each iteration throughout the array, and ultimately becomes the final, single
resulting value.
... return value the single value that
results from the reduction.
...the code below will produce the same output as the code in the block above: [0, 1, 2, 3, 4].reduce( (accumulator, currentvalue, currentindex, array) => accumulator + currentvalue ) if you were to provide an initialvalue as the second argument to reduce(), the
result would look like this: [0, 1, 2, 3, 4].reduce((accumulator, currentvalue, currentindex, array) => { return accumulator + currentvalue }, 10) callback iteration accumulator currentvalue currentindex array return value first call 10 0 0 [0, 1, 2, 3, 4] 10 second call 10 1 1 [0, 1, 2, 3, 4] 11 third call 11...
Array.prototype.reduceRight() - JavaScript
return value the value that
results from the reduction.
... and if you were to provide an initialvalue, the
result would look like this: [0, 1, 2, 3, 4].reduceright(function(accumulator, currentvalue, index, array) { return accumulator + currentvalue; }, 10); callback accumulator currentvalue index array return value first call 10 4 4 [0, 1, 2, 3, 4] 14 second call 14 3 3 [0, 1, 2, 3, 4] 17 third call 17 2 2 ...
...urn value; }; } examples sum up all values within an array var sum = [0, 1, 2, 3].reduceright(function(a, b) { return a + b; }); // sum is 6 flatten an array of arrays var flattened = [[0, 1], [2, 3], [4, 5]].reduceright(function(a, b) { return a.concat(b); }, []); // flattened is [4, 5, 2, 3, 0, 1] run a list of asynchronous functions with callbacks in series each passing their
results to the next const waterfall = (...functions) => (callback, ...args) => functions.reduceright( (composition, fn) => (...
results) => fn(composition, ...
results), callback )(...args); const randint = max => math.floor(math.random() * max) const add5 = (callback, x) => { settimeout(callback, randint(1000), x + 5); }; const mult3 = (callback, x) => { settimeout(callback, randint(10...
... /** * function composition is way in which
result of one function can * be passed to another and so on.
JSON.stringify() - JavaScript
if this value is null or not provided, all properties of the object are included in the
resulting json string.
... out properties if (typeof value === 'string') { return undefined; } return value; } var foo = {foundation: 'mozilla', model: 'box', week: 45, transport: 'car', month: 7}; json.stringify(foo, replacer); // '{"week":45,"month":7}' example replacer, as an array if replacer is an array, the array's values indicate the names of the properties in the object that should be included in the
resulting json string.
...urrogates if the input contained any lone surrogates; such strings could not be encoded in valid utf-8 or utf-16: json.stringify("\ud800"); // '"�"' but with this change json.stringify represents lone surrogates using json escape sequences that can be encoded in valid utf-8 or utf-16: json.stringify("\ud800"); // '"\\ud800"' this change should be backwards-compatible as long as you pass the
result of json.stringify to apis such as json.parse that will accept any valid json text, because they will treat unicode escapes of lone surrogates as identical to the lone surrogates themselves.
... only if you are directly interpreting the
result of json.stringify do you need to carefully handle json.stringify's two possible encodings of these code points.
Math.imul() - JavaScript
the math.imul() function returns the
result of the c-like 32-bit multiplication of the two parameters.
... return value the
result of the c-like 32-bit multiplication of the given arguments.
...0x003fffff /*opa & 0x000fffff*/ * 0x7fffffff /*opb*/ = 0x1fffff7fc00001 // 0x1fffff7fc00001 < number.max_safe_integer /*0x1fffffffffffff*/ var
result = (opa & 0x003fffff) * opb; // 2.
... we can remove an integer coersion from the statement above because: // 0x1fffff7fc00001 + 0xffc00000 = 0x1fffffff800001 // 0x1fffffff800001 < number.max_safe_integer /*0x1fffffffffffff*/ if (opa & 0xffc00000 /*!== 0*/)
result += (opa & 0xffc00000) * opb |0; return
result |0; }; examples using math.imul() math.imul(2, 4); // 8 math.imul(-1, 8); // -8 math.imul(-2, -2); // 4 math.imul(0xffffffff, 5); // -5 math.imul(0xfffffffe, 5); // -10 specifications specification ecmascript (ecma-262)the definition of 'math.imul' in that specification.
RegExp.prototype[@@search]() - JavaScript
for example, the following two examples return the same
result.
... var re = /-/g; var str = '2016-01-02'; var
result = re[symbol.search](str); console.log(
result); // 4 using @@search in subclasses subclass of regexp can override [@@search]() method to modify the behavior.
... class myregexp extends regexp { constructor(str) { super(str) this.pattern = str; } [symbol.search](str) { return str.indexof(this.pattern); } } var re = new myregexp('a+b'); var str = 'ab a+b'; var
result = str.search(re); // string.prototype.search calls re[@@search].
... console.log(
result); // 3 specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@search]' in that specification.
RegExp.prototype[@@split]() - JavaScript
for example, the following two examples return the same
result.
... let re = /-/g; let str = '2016-01-02'; let
result = re[symbol.split](str); console.log(
result); // ["2016", "01", "02"] using @@split in subclasses subclasses of regexp can override the [@@split]() method to modify the default behavior.
... class myregexp extends regexp { [symbol.split](str, limit) { let
result = regexp.prototype[symbol.split].call(this, str, limit); return
result.map(x => "(" + x + ")"); } } let re = new myregexp('-'); let str = '2016-01-02'; let
result = str.split(re); // string.prototype.split calls re[@@split].
... console.log(
result); // ["(2016)", "(01)", "(02)"] specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@split]' in that specification.
RegExp - JavaScript
the following three expressions create the same regular expression: /ab+c/i new regexp(/ab+c/, 'i') // literal notation new regexp('ab+c', 'i') // constructor the literal notation
results in compilation of the regular expression when the expression is evaluated.
... the constructor of the regular expression object—for example, new regexp('ab+c')—
results in runtime compilation of the regular expression.
... regexp.prototype[@@match]() performs match to given string and returns match
result.
... in the replacement text, the script uses $1 and $2 to indicate the
results of the corresponding matching parentheses in the regular expression pattern.
WebAssembly.instantiateStreaming() - JavaScript
syntax promise<
resultobject> webassembly.instantiatestreaming(source, importobject); parameters source a response object or a promise that will fulfill with one, representing the underlying source of a .wasm module you want to stream, compile, and instantiate.
... return value a promise that resolves to a
resultobject which contains two fields: module: a webassembly.module object representing the compiled webassembly module.
... examples instantiating streaming the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a
resultobject.
... var importobject = { imports: { imported_func: arg => console.log(arg) } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the
resultobject's instance member is then accessed, and the contained exported function invoked.
parseInt() - JavaScript
6.022e23 for 6.022 × 1023), using parseint to truncate numbers will produce unexpected
results when used on very large or very small numbers.
...you can call the isnan function to determine if the
result of parseint is nan.
... if nan is passed on to arithmetic operations, the operation
result will also be nan.
...the following may have an octal
result, or it may have a decimal
result.
yield - JavaScript
the yield keyword causes the call to the generator's next() method to return an iterator
result object with two properties: value and done.
... the value property is the
result of evaluating the yield expression, and done is false, indicating that the generator function has not fully completed.
...in this case, execution of the generator ends and an iterator
result is returned to the caller in which the value is undefined and done is true.
...in this case, execution of the generator ends and an iterator
result is returned to the caller in which the value is the value specified by the return statement and done is true.
<feSpecularLighting> - SVG: Scalable Vector Graphics
the
resulting image is an rgba image based on the light color.
...the
resulting image depends on the light color, light position and surface geometry of the input bump map.
... the
result of the lighting calculation is added.
... example <svg height="200" width="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id = "filter"> <fespecularlighting
result="specout" specularexponent="20" lighting-color="#bbbbbb"> <fepointlight x="50" y="75" z="200"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="specout" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> <circle cx="110" cy="110" r="100" style="filter:url(#filter)"/> </svg>
result specifications specification status comme...
SVG Filters Tutorial - SVG: Scalable Vector Graphics
filters svg allows us to use similar tools as the bitmap description language such as the use of shadow, blur effects or even merging the
results of different filters.
...by adding feoffset and
result, the effect layer is defined <
result> attribute is a reference that can be use later.
...<feoffset> primitive has the blur
result from the gaussian blur.
... <femerge> primitive contains the nodes <femergenode> taking as input the
result offsetblur , this will allow it to appear below the sourcegraphic implementation of more primitives <defs> <filter id="drop-shadow"> <fegaussianblur in="sourcealpha" stddeviation="3"
result="blur"/> <feoffset in="blur" dx="4" dy="4"
result="offsetblur"/> </filter> <femerge> <femergenode in="offsetblur"/> <femergenode in="sourcegraphic"/> </femerge> </defs> ...
XSLT elements reference - XSLT: Extensible Stylesheet Language Transformations
a third type of element, not discussed here, is the literal
result element (lre).
...it consists of any non-instruction element that should be copied as-is to the
result document, for example, an <hr> element in an html conversion stylesheet.
...at run-time the expression is evaluated and the
result of the evaluation is substituted for the xpath expression.
... for example, assume that a variable "image-dir" is defined as follows: <xsl:variable name="image-dir">/images</xsl:variable> the expression to be evaluated is placed inside curly brackets: <img src="{$image-dir}/mygraphic.jpg"/> this would
result in the following: <img src="/images/mygraphic.jpg"/> the element annotations that follow include a description, a syntax listing, a list of required and optional attributes, a description of type and position, its source in the w3c recommendation and an explanation of the degree of present gecko support.
Index - XSLT: Extensible Stylesheet Language Transformations
a third type of element, not discussed here, is the literal
result element (lre).
...it consists of any non-instruction element that should be copied as-is to the
result document, for example, an <hr> element in an html conversion stylesheet.
...to prevent a normally xsl:-prefixed literal
result element (which should simply be copied as-is to the
result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree.
... 51 <xsl:value-of> element, reference, xslt, value-of the <xsl:value-of> element evaluates an xpath expression, converts it to a string, and writes that string to the
result tree.
Loading and running WebAssembly code - WebAssembly
the quickest, most efficient way to fetch a wasm module is using the newer webassembly.instantiatestreaming() method, which can take a fetch() call as its first argument, and will handle fetching, compiling, and instantiating the module in one step, accessing the raw byte code as it streams from the server: webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(
results => { // do something with the
results!
... }); if we used the older webassembly.instantiate() method, which doesn't work on the direct stream, we'd need an extra step of converting the fetched byte code to an arraybuffer, like so: fetch('module.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(
results => { // do something with the
results!
... note: the second overload form takes a webassembly.module object as an argument, and returns a promise directly containing the instance object as the
result.
... the final code looks like this: request = new xmlhttprequest(); request.open('get', 'simple.wasm'); request.responsetype = 'arraybuffer'; request.send(); request.onload = function() { var bytes = request.response; webassembly.instantiate(bytes, importobject).then(
results => {
results.instance.exports.exported_func(); }); }; note: you can see an example of this in action in xhr-wasm.html.
Compiling an Existing C Module to WebAssembly - WebAssembly
the
result of the encoding operation is an output buffer and its length.
...but this is a fair shortuct for keeping things simple: int
result[2]; emscripten_keepalive void encode(uint8_t* img_in, int width, int height, float quality) { uint8_t* img_out; size_t size; size = webpencodergba(img_in, width, height, width * 4, quality, &img_out);
result[0] = (int)img_out;
result[1] = size; } emscripten_keepalive void free_
result(uint8_t*
result) { webpfree(
result); } emscripten_keepalive int get_
result_pointer() { return
result[0]; } emscripten_keepalive int get_
result_size() { return
result[1]; } now with all of that in place, y...
...ou can call the encoding function, grab the pointer and image size, put it in a javascript buffer of your own, and release all the wasm buffers allocated in the process: api.encode(p, image.width, image.height, 100); const
resultpointer = api.get_
result_pointer(); const
resultsize = api.get_
result_size(); const
resultview = new uint8array(module.heap8.buffer,
resultpointer,
resultsize); const
result = new uint8array(
resultview); api.free_
result(
resultpointer); note: new uint8array(somebuffer) will create a new view onto the same memory chunk, while new uint8array(sometypedarray) will copy the data.
...to prove that it worked, turn your
result buffer into a blob and use it on an <img> element: const blob = new blob([
result], {type: 'image/webp'}); const bloburl = url.createobjecturl(blob); const img = document.createelement('img'); img.src = bloburl; document.body.appendchild(img) behold, the glory of a new webp image.
lang/functional - Archive of obsolete content
memoize(fn, hasher) memoizes a given function by caching the computed
result.
...if passed an optional hashfunction, it will be used to compute the hash key for storing the
result, based on the arguments to the original function.
... hasher : function an optional function that takes the memoized function's parameter and returns a hash key for storing the
result.
loader/sandbox - Archive of obsolete content
evaluate(sandbox, code, uri, line, version) evaluate code in sandbox, and return the
result.
... returns
result : returns whatever the evaluated code returns.
... returns
result : returns whatever the evaluated code returns.
platform/xpcom - Archive of obsolete content
if the factory or service is already registered, this function throws components.
results.ns_error_factory_exists.
...if the factory or service isn't registered, this function throws components.
results.ns_error_factory_not_registered.
... if it finds a match, it returns this, otherwise it throws components.
results.ns_error_no_interface.
How to convert an overlay extension to restartless - Archive of obsolete content
it's available in the global for a window, but in jsm you'll need to fetch it from an interface: const xmlhttprequest = components.constructor("@mozilla.org/xmlextras/xmlhttprequest;1", "nsixmlhttprequest"); here's how to load a file using it: function loadfile(url,type,return
result) { var request = new xmlhttprequest(); request.open("get", url, true); // async=true request.responsetype = type; request.onerror = function(event) { logerrormessage("error attempting to load: " + url); return
result(null); }; request.onload = function(event) { if (request.response) return
result(request.response); else ...
...even though it says that the default type is "text", firefox will attempt to autodetect and fail,
resulting in an error message in the console.
...doing anuncompressed internal jar (aka, another zip) acts like a poor-man's solid archive and significantly boosts the overall compression ratio of the xpi,
resulting in smaller installers and updates.
Chapter 6: Firefox extensions and XUL applications - Archive of obsolete content
what if you attempt to run with nothing in the stack—what
result will you return then?
... nearly all components inherit from nsisupports (fixme: why 'nearly' ?), so adding a trailing space when you search serves as a delimiter on the inheritance position, and makes it easier to specify what you’re looking for (see figures 6, 7).4 this
results in the file nsilocalfile.idl.
...drop the i from nsilocalfile, double the colons, and capitalize the first letter of the function name,
resulting in nslocalfile::initwithpath.
Chapter 4: Using XPCOM—Implementing advanced processes - Archive of obsolete content
listing 2: setting privileges netscape.security.privilegemanager.enableprivilege('universalxpconnect'); note: this is unneeded when the code is part of an extension, and will
result in rejection if submitted to addons.mozilla.org.
...running this code should produce the output "58 55 4c" so you can check your
results.
...open the output file to check your
results.
Appendix C: Avoiding using eval in Add-ons - Archive of obsolete content
this is important to know in particular when you later want to call removeeventlistener: you'll have to pass the
resulting function from the first .bind() call.
... try { myaddon.doneaddtab(rv); } catch (ex) { /* might handle this */ } // return the original
result return rv; }; })(); this is admittedly a bit more verbose, but at the same time it should be easier to understand.
... you don't have to parse what the
resulting function will look like in your mind.
Appendix D: Loading Scripts - Archive of obsolete content
advantages namespacing: since scripts executed via evalinsandbox run in a defined namespace, global namespace contamination and the
resultant extension compatibility issues are not usually a problem.
... advantages namespacing: global namespace contamination and the
resultant extension compatibility issues can often be avoided by loading sub-scripts into private namespaces.
...namespace contamination and the
resulting compatibility issues are only an issue when they are imported into shared global namespaces.
Setting Up a Development Environment - Archive of obsolete content
we recommend you set up make in your system, since our examples come with all the necessary files to build and install the
resulting xpi using this tool.
...ultimately you can just compress the contents of the src directory using any zip or archive tool and get a similar
result.
...this is where all the
resulting build files will be created, and where you'll find the extension xpi file once you get it to build.
The Box Model - Archive of obsolete content
if we add flexibility to the hbox in our first example, we get the following
result: the box flexes to cover the available horizontal space.
...so, in a flexed hbox, having center alignment and end packing
results in this: one important thing to notice is that aligment and flexibility can't be mixed in some cases.
...go to <html:a onclick="%s">our site</html:a> for more information to include html in a xul document, you need to add the namespace for it in the document root: <overlay id="xulschoolhello-browser-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul" xmlns:html="http://www.w3.org/1999/xhtml"> then you can have an html:p (paragraph) element where you insert the
result of parsing the property string.
XPCOM Objects - Archive of obsolete content
trying to access methods or attributes without having the right interface set will
result in an exception being thrown.
...childarray = childarrayobj.value; the general rule for out parameters is that you can pass an empty object, and then you can get the
result by accessing the value attribute in this object after the method call.
... const cc = components.classes; const ci = components.interfaces; const cr = components.
results; const ce = components.exception; you should be familiar with this already, although there are a couple of additions, components.
results and components.exception.
Promises - Archive of obsolete content
yield db.execute( "update owners, nodes \ set owners.name = nodes.name \ where owners.id = nodes.owner and nodes.key = 'name';"); // process some
results.
... yield db.execute( "select owners.group as group, nodes.value as task \ from nodes \ inner join owners on owner.id = nodes.owner \ where nodes.key = 'task';", { onrow: row => { runtask(row.get
resultbyname("task"), row.get
resultbyname("group")); } }); // and quickly grab a single row value.
... let [row] = yield db.execute( "select value from nodes where key = 'timestamp' \ order by value desc limit 1"); latesttimestamp = row.get
resultbyindex(0); } finally { // make sure to close the database when finished.
Exception logging in JavaScript - Archive of obsolete content
as a
result, if, for example, c++ code called a javascript component, which threw an exception, that exception would be logged to the console before control was returned to the c++ caller.
...javascript code is sometimes designed to throw exceptions to report a
result condition back to the c++ caller.
... any exceptions that are generated by xpconnect -- that is, those exceptions whose
result codes are defined in nsixpconnect.idl -- are always logged into the error console.
Building accessible custom components in XUL - Archive of obsolete content
developers have been doing this for some time, but the
resulting controls were never as accessible as similar controls in desktop applications.
... grid.spreadsheet label { border-bottom: 1px solid black; border-left: 1px solid black; margin: 0; padding: 3px; } grid.spreadsheet description { color: black; background-color: white; margin: 0px; padding: 2px; border-left: thin solid; border-bottom: thin solid; font-family: monospace; font-size: 12pt; text-align: center; font-weight: bold; } </code> you can see the
results by installing stage-1.xpi, restarting firefox, and selecting accjax from the tools menu.
...irole:gridcell" value="dinner" flex="1"/> <label x2:role="wairole:gridcell" value="lodging" flex="1"/> <label x2:role="wairole:gridcell" value="breakfast" flex="1"/> <label x2:role="wairole:gridcell" value="lunch" flex="1"/> <label x2:role="wairole:gridcell" value="dinner" flex="1"/> </column> <-- several columns omitted for brevity --> </columns> </grid> </code> the
resulting spreadsheet looks exactly the same visually, but the difference to an assistive technology is enormous.
Building Menus With Templates - Archive of obsolete content
the menuitem elements however will be repeated for each
result from the query.
...the uri attribute is on the menu element since we don't want to repeat the popup for every
result.
...here is the
result of the above example after both levels have been handled.
XUL element attributes - Archive of obsolete content
center extra space is split equally along each side of the child elements,
resulting in the children being placed in the center of the box.
...this
results in a performance enhancement, but you will not be able to use the dom functions to retrieve the tree rows.
... center extra space is split equally along each side of the child elements,
resulting the children being placed in the center of the box.
NPClass - Archive of obsolete content
any attempt to use an invalidated object will
result in undefined behavior.
... *aclass); typedef void (*npdeallocatefunctionptr)(npobject *npobj); typedef void (*npinvalidatefunctionptr)(npobject *npobj); typedef bool (*nphasmethodfunctionptr)(npobject *npobj, npidentifier name); typedef bool (*npinvokefunctionptr)(npobject *npobj, npidentifier name, const npvariant *args, uint32_t argcount, npvariant *
result); typedef bool (*npinvokedefaultfunctionptr)(npobject *npobj, const npvariant *args, uint32_t argcount, npvariant *
result); typedef bool (*nphaspropertyfunctionptr)(npobject *npobj, npidentifier name); typedef bool (*npgetpropertyfunctionptr)(npobject *npobj, npidentifi...
...er name, npvariant *
result); typedef bool (*npsetpropertyfunctionptr)(npobject *npobj, npidentifier name, const npvariant *value); typedef bool (*npremovepropertyfunctionptr)(npobject *npobj, npidentifier name); typedef bool (*npenumerationfunctionptr)(npobject *npobj, npidentifier **value, uint32_t *count); typedef bool (*npconstructfunctionptr)(npobject *npobj, const npvariant *args, uint32_t argcount, npvariant *
result); see also npobject ...
Introduction to Public-Key Cryptography - Archive of obsolete content
instead it concatenates the password with a random per-user value (so called "salt") and stores the hash value of the
result along with the salt.
...if the
result of the evaluation is positive, the server allows the client to access the requested resource.
...after receiving a response from the ca, the ra notifies the end entity of the
results.
Using workers in extensions - Archive of obsolete content
every 10 minutes, it calls xmlhttprequest, and, when the
results are received, sends an event back to the main thread with the received data.
... when the
result is received from xmlhttprequest, instead of immediately updating the displayed information in the status bar, a message is sent to the main thread using the worker's postmessage() method.
...this
results in the ticker's onmessage handler being called.
Processing XML with E4X - Archive of obsolete content
the first is to pass a string to the xml constructor: var languages = new xml('<languages type="dynamic"><lang>javascript</lang><lang>python</lang></languages>'); the second is to embed the xml directly in your script, as an xml literal: var languages = <languages type="dynamic"> <lang>javascript</lang> <lang>python</lang> </languages>; in both cases, the
resulting object will be an e4x xml object, which provides convenient syntax for both accessing and updating the encapsulated data.
...the preceding example would
result in an xml object which looks like this: <foo bar="2">"hi"</foo>.
...operator accesses all children no matter how deeply nested: alert(person..*.length()); // 11 the length() method here returns 11 because both elements and text nodes are included in the
resulting xmllist.
Generator comprehensions - Archive of obsolete content
iterator which would create doubled values on demand as they were needed: var it2 = (for (i in it) i * 2); console.log(it2.next()); // the first value from it, doubled console.log(it2.next()); // the second value from it, doubled when a generator comprehension is used as the argument to a function, the parentheses used for the function call means that the outer parentheses can be omitted: var
result = dosomething(for (i in it) i * 2); the significant difference between the two examples being that by using the generator comprehension, you would only have to loop over the 'obj' structure once, total, as opposed to once when comprehending the array, and again when iterating through it.
... var numbers = [1, 2, 3]; // generator function (function*() { for (let i of numbers) { yield i * i; } })(); // generator comprehension (for (i of numbers) i * i ); //
result: both return a generator which yields [1, 4, 9] example 2: using if in generator.
... var numbers = [1, 2, 3]; // generator function (function*() { for (let i of numbers) { if (i < 3) { yield i * 1; } } })(); // generator comprehension (for (i of numbers) if (i < 3) i); //
result: both return a generator which yields [1, 2] specifications generator comprehensions were initially in the ecmascript 2015 draft, but got removed in revision 27 (august 2014).
Back to the Server: Server-Side JavaScript On The Rise - Archive of obsolete content
listing 1 - querying a mysql database from rhino // import the java sql packages importpackage( java.sql ); // load the mysql driver java.lang.class.forname( "com.mysql.jdbc.driver" ); // create connection to the database var conn = drivermanager.getconnection( "jdbc:mysql://localhost/rhino", "urhino", "prhino" ); // create a statement handle var stmt = conn.createstatement(); // get a
resultset var rs = stmt.executequery( "select * from employee" ); // get the metadata from the
resultset var meta = rs.getmetadata(); // loop over the records, dump out column names and values while( rs.next() ) { for( var i = 1; i <= meta.getcolumncount(); i++ ) { print( meta.getcolumnname( i ) + ": " + rs.getobject( i ) + "\n" ); } print( "----------\n" ); } // cleanup rs.close(); stmt.close(...
...the sql statement is prepared, executed, and printed with the help of the metadata obtained from the
resultset.
... listing 8 - submitting comment data <script> function formhandler() { // get the form values var name = txt_name.getvalue(); var email = txt_email.getvalue(); var message = txt_message.getvalue(); // if the form passes validation client-side, submit
results to the processor if( validatecomments( name, email, message ) ) { formprocessor( name, email, message ); // update the logger with the most recent entry document.getelementbyid( "out-logger" ).innerhtml += "name: " + name + "<br/>email: " + email + "<br/>message: " + message + "<br/><br/>"; } else { ext.msg.alert( "error", "please enter the required fields" ); } } </script> <!-- proc...
The Business Benefits of Web Standards - Archive of obsolete content
separating presentation from content increases the information/markup ratio, making css-based documents more pertinent with regard to the search terms, which makes them rank higher in search
results.
...instead of worrying about each engine and attempting to artificially manipulate the
results, web standards pages index and rank properly (where they deserve to) across all search engines.
...that has been the real impact of the zen garden, in helping to demonstrate the stunning
results which are possible without altering the markup, and indeed keeping the amount of presentational markup to an acceptable minimum.
Anatomy of a video game - Game development
present, accept, interpret, calculate, repeat the goal of every video game is to present the user(s) with a situation, accept their input, interpret those signals into actions, and calculate a new situation
resulting from those acts.
...these games present two images to the user; they accept their click (or touch); they interpret the input as a success, failure, pause, menu interaction, etc.; finally, they calculate an updated scene
resulting from that input.
...to acquire one of these timestamps, you can call window.performance.now() and store the
result as a variable.
Audio for Web games - Game development
although the situation is soon going to get better with the adoption of the web audio api, the current most widely-supported method — using the vanilla <audio> element — leads to patchy
results on mobile devices.
... element —
results in patchy
results on mobile devices.
... here's a bit of code that given a tempo (the time in seconds of your beat/bar) will calculate how long to wait until you play the next part — you feed the
resulting value to the start() function with the first parameter, which takes the absolute time of when that playback should commence.
Plug-in Development Overview - Gecko Plugin API Reference
the npn_geturlnotify function operates like npn_geturl, except that it notifies the plug-in of the
result when the operation completes.
...the
result from the server can also be sent to a particular browser window or frame for display, or delivered to the plug-in instance in a new stream.
... the npn_posturlnotify function operates like npn_posturl, except that it notifies the plug-in of the
result when the operation completes.
Hoisting - MDN Web Docs Glossary: Definitions of Web-related terms
for example: function catname(name) { console.log("my cat's name is " + name); } catname("tiger"); /* the
result of the code above is: "my cat's name is tiger" */ the above code snippet is how you would expect to write the code for it to work.
... now, let's see what happens when we call the function before we write it: catname("chloe"); function catname(name) { console.log("my cat's name is " + name); } /* the
result of the code above is: "my cat's name is chloe" */ even though we call the function in our code first, before the function is written, the code still works.
...no hoisting happens so trying to read the variable
results in referenceerror exception.
SEO - MDN Web Docs Glossary: Definitions of Web-related terms
seo (search engine optimization) is the process of making a website more visible in search
results, also termed improving search rankings.
...if you follow those rules closely when doing seo for a website, you give the site the best chances of showing up among the first
results, increasing traffic and possibly revenue (for ecommerce and ads).
... search engines give some guidelines for seo, but big search engines keep
result ranking as a trade secret.
How do you make sure your website works properly? - Learn web development
304: not modified the file has not changed since the last time you asked for it, so your browser can display the version from its cache,
resulting in faster response times and more efficient use of bandwidth.
... 503: service unavailable usually
resulting from a shortterm system overload.
... 404 errors many times the error just
results just from a typo, but sometimes maybe you either forgot to upload a resource or you lost your network connection while you were uploading your resources.
What are hyperlinks? - Learn web development
companies naturally want their sites to rank highly in search
results.
... the more incoming links a webpage can boast of, the higher it ranks in search
results.
... seo (search engine optimization) is the study of how to make websites rank highly in search
results.
Client-side form validation - Learn web development
the number is not required, so removing the value will still
result in a valid value.
... here is the live
result: note: you can find this example live on github as detailed-custom-validation.html (see also the source code.) the constraint validation api gives you a powerful tool to handle form validation, letting you have enormous control over the user interface above and beyond what you can do with html and css alone.
...lue.length === 0 || emailregexp.test(email.value); if (!test) { email.classname = "invalid"; error.innerhtml = "i expect an e-mail, darling!"; error.classname = "error active"; // some legacy browsers do not support the event.preventdefault() method return false; } else { email.classname = "valid"; error.innerhtml = ""; error.classname = "error"; } }); the
result looks like this: as you can see, it's not that hard to build a validation system on your own.
Example 1 - Learn web development
padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; }
result for basic state active state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ .
...; padding: 0; background: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; }
result for active state open state html <div class="select active"> <span class="value">cherry</span> <ul class="optlist"> <li class="option highlight">cherry</li> <li class="option">lemon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> css /* --------------- */ /* required styles */ /* --------------- */ ...
...: #f0f0f0; border: .2em solid #000; border-top-width : .1em; border-radius: 0 0 .4em .4em; box-shadow: 0 .2em .4em rgba(0,0,0,.4); -moz-box-sizing : border-box; box-sizing : border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #fff; }
result for open state ...
UI pseudo-classes - Learn web development
the
result is seen below.
... see the live
result below: note: you can also find the example live on github at radios-checked-default.html (also see the source code.) for the :indeterminate example, we've got no default selected radio button — this is important — if there was, then there would be no indeterminate state to style.
... see the live
result below: note: you can also find the example live on github at radios-checked-indeterminate.html (also see the source code.) note: you can find an interesting example involving indeterminate states on the <input type="checkbox"> reference page.
Creating hyperlinks - Learn web development
</p> this gives us the following
result: i'm creating a link to the mozilla homepage.
...</p> this gives us the following
result and hovering over the link displays the title as a tooltip.
...for example: <a href="mailto:nowhere@mozilla.org">send email to nowhere</a> this
results in a link that looks like this: send email to nowhere.
Debugging HTML - Learn web development
html is not compiled into a different form before the browser parses it and shows the
result (it is interpreted, not compiled).
... in the dom inspector, you can see what the rendered markup looks like: using the dom inspector, let's explore our code in detail to see how the browser has tried to fix our html errors (we did the review in firefox; other modern browsers should give the same
result): the paragraphs and list items have been given closing tags.
...the line numbers point to the last few lines of the file, and this error message comes with a line of code that points out an example of an open element: example: <a href="https://www.mozilla.org/>link to mozilla homepage</a> ↩ </ul>↩ </body>↩</html> note: an attribute missing a closing quote can
result in an open element because the rest of the document is interpreted as the attribute's content.
Video and audio content - Learn web development
here is a <a href="rabbit320.mp4">link to the video</a> instead.</p> </video> the
resulting ui looks something like this: the new features are: width and height you can control the video size either with these attributes or with css.
... note: "transcribe" means "to write down spoken words as text." the
resulting text is a "transcript." webvtt is a format for writing text files containing multiple strings of text along with metadata such as the time in the video at which each text string should be displayed, and even limited styling/positioning information.
... here's an example: <video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video> this will
result in a video that has subtitles displayed, kind of like this: for more details, please read adding captions and subtitles to html5 video.
HTML table basics - Learn web development
this can
result in the code being harder to write, maintain, and debug.
... this should
result in a table that looks something like the following: hi, i'm your first cell.
... take the following simple example: <table> <tr> <th>data 1</th> <th style="background-color: yellow">data 2</th> </tr> <tr> <td>calcutta</td> <td style="background-color: yellow">orange</td> </tr> <tr> <td>robots</td> <td style="background-color: yellow">jazz</td> </tr> </table> which gives us the following
result: data 1 data 2 calcutta orange robots jazz this isn't ideal, as we have to repeat the styling information across all three cells in the column (we'd probably have a class set on all three in a real project and specify the styling in a separate stylesheet).
Introduction to events - Learn web development
as a
result, the plane can safely takeoff.
...now try changing btn.onclick to the following different values in turn, and observing the
results in the example: btn.onfocus and btn.onblur — the color changes when the button is focused and unfocused; try pressing the tab to focus on the button and press the tab again to focus away from the button.
... we can, therefore, fix our current problem by changing the second handler function in the previous code block to this: video.onclick = function(e) { e.stoppropagation(); video.play(); }; you can try making a local copy of the show-video-box.html source code and fixing it yourself, or looking at the fixed
result in show-video-box-fixed.html (also see the source code here).
Looping code - Learn web development
first, some simple html — a text <input> allowing us to enter a name to search for, a <button> element to submit a search, and a <p> element to display the
results in: <label for="search">search by contact name: </label> <input id="search" type="text"> <button>search</button> <p></p> now on to the javascript: const contacts = ['chris:2232322', 'sarah:3453456', 'bill:7654322', 'mary:9998769', 'dianne:9384975']; const para = document.queryselector('p'); const input = document.queryselector('input'); const btn = document.queryselector('button'); btn.adde...
... next, we attach an event listener to the button (btn), so that when it is pressed, some code is run to perform the search and return the
results.
... inside the loop, we first split the current contact (contacts[i]) at the colon character, and store the
resulting two values in an array called splitcontact.
Object building practice - Learn web development
in this article we dive into a practical exercise, giving you some more practice in building custom javascript objects, with a fun and colorful
result.
...the
resulting constant (ctx) is the object that directly represents the drawing area of the canvas and allows us to draw 2d shapes on it.
...the bottom of your code now: function loop() { ctx.fillstyle = 'rgba(0, 0, 0, 0.25)'; ctx.fillrect(0, 0, width, height); for (let i = 0; i < balls.length; i++) { balls[i].draw(); balls[i].update(); } requestanimationframe(loop); } all programs that animate things generally involve an animation loop, which serves to update the information in the program and then render the
resulting view on each frame of the animation; this is the basis for most games and other such programs.
Test your skills: Object-oriented JavaScript - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the
results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...we want you to: add a new method to the shape class's prototype, calcperimeter(), which calculates its perimeter (the length of the shape's outer edge) and logs the
result to the console.
... call your calcperimeter() method on the instance, to see whether it logs the calculation
result to the browser devtools' console as expected.
Client-Server Overview - Learn web development
as a
result url parameters/get requests are not used for requests that update data on the server.
...websites created using this style of application push a lot of computational cost from the server to the web browser, and can
result in websites that appear to behave a lot more like native apps (highly responsive, etc.).
...we can also control the order and the number of
results returned.
Website security - Learn web development
for example, consider a site search function where the search terms are encoded as url parameters, and these terms are displayed along with the
results.
...if the target user clicks this "interesting link", the script will be executed when the search
results are displayed.
... the
result is that any user who clicks the submit button while they are logged in to the trading site will make the transaction.
Dynamic behavior in Svelte: working with variables and props - Learn web development
update it with a click event, like so: <button type="button" class="btn btn__danger" on:click={() => removetodo(todo)} > delete <span class="visually-hidden">{todo.name}</span> </button> a very common mistake with handlers in svelte is to pass the
result of executing a function as a handler, instead of passing the function.
... for example, if you specify on:click={removetodo(todo)}, it will execute removetodo(todo) and the
result will be passed as a handler, which is not what we had in mind.
...instead, we'll take out the push() method and use spread syntax to achieve the same
result — we'll assign a value to the todos array equal to the todos array plus the new object.
Strategies for carrying out testing - Learn web development
you should get them to follow some steps and report the
results they get.
... it is useful to provide a set of steps (sometimes called a script) so that you get more reliable
results pertaining to what you were trying to test.
...there is nothing installed that could affect the
results of the tests.
Testopia
it is designed to be a generic tool for tracking test cases, allowing for testing organizations to integrate bug reporting with their test case run
results.
...the main new features are: support xml export and import of test plans and children support csv export of test cases and
results.
... testopia allows users to attach bugs to test case run
results for centralized management of the software engineering process.
What to do and what not to do in Bugzilla
reports of problems with specific websites that
result from bad coding practices already determined to be “tech evangelism” cases by the module owner or peer, or problems that
result from the use of proprietary technology, should be be moved to the tech evangelism product rather than being resolved as invalid.
...as a
result, bugs which are unconfirmed for more than a few days do not qualify for the blocker severity.
...continued abuse will
result in revocation of your bugzilla privileges.
Continuous Integration
the
results of taskcluster jobs (both builds and tests) are displayed in treeherder.
...
results in treeherder are ordered by mercurial pushes.
...the
result is the treeherder intermittent failures view.
Creating Sandboxed HTTP Connections
est failed this.mcallbackfunc(null); } gchannel = null; }, // nsichanneleventsink onchannelredirect: function (aoldchannel, anewchannel, aflags) { // if redirecting, store the new channel gchannel = anewchannel; }, // nsiinterfacerequestor getinterface: function (aiid) { try { return this.queryinterface(aiid); } catch (e) { throw components.
results.ns_nointerface; } }, // nsiprogresseventsink (not implementing will cause annoying exceptions) onprogress : function (arequest, acontext, aprogress, aprogressmax) { }, onstatus : function (arequest, acontext, astatus, astatusarg) { }, // nsihttpeventsink (not implementing will cause annoying exceptions) onredirect : function (aoldchannel, anewchannel) { }, // we are faking a...
...nents.interfaces.nsisupports) || aiid.equals(components.interfaces.nsiinterfacerequestor) || aiid.equals(components.interfaces.nsichanneleventsink) || aiid.equals(components.interfaces.nsiprogresseventsink) || aiid.equals(components.interfaces.nsihttpeventsink) || aiid.equals(components.interfaces.nsistreamlistener)) return this; throw components.
results.ns_nointerface; } }; quick note: storing the channel in a global (especially in an extension) isn't a good idea, but was done to make the code easier to read.
... } } }, queryinterface : function(aiid) { if (aiid.equals(components.interfaces.nsisupports) || aiid.equals(components.interfaces.nsiobserver)) return this; throw components.
results.ns_nointerface; } }; // get the observer service and register for the two coookie topics.
Debugging on Mac OS X
as a
result, it is not possible to attach a debugger to these official firefox releases on macos 10.14+ without disabling system integrity protection (sip).
...as a
result, some functionality will be permitted on local builds, but blocked on production builds which have hardened runtime enabled.
...these directions were written using xcode 6.3.1 complete all the steps above under "creating the project" from the "product" menu, ensure the scheme you created is selected under "scheme", then choose "scheme > edit scheme" in the
resulting popup, click "duplicate scheme" give the
resulting scheme a more descriptive name than "copy of scheme" select "run" on the left-hand side of the settings window, then select the "info" tab.
Error codes returned by Mozilla APIs
these constants can be accessed through components.
results.
... for example, by using components.
results.ns_error_not_initialized general errors the following errors are general and can occur when using any component.
... components.
results ...
HTMLIFrameElement.getScreenshot()
its request.onsuccess handler handles the success case (the screenshot is contained in request.
result as a blob object), and its request.onerror handler handles the failure case.
...use image/png to capture the alpha channel of the rendered
result by returning a png-format image.
... examples var browser = document.queryselector('iframe'); var request = browser.getscreenshot(100, 100); request.onsuccess = function() { var blob = request.
result; var url = url.createobjecturl(blob); } specification not part of any specification.
IPDL Best Practices
consider the following protocol: async protocol pasyncquerier { child: pasyncquery(); } async protocol pasyncquery { child: kickoffquery(nsstring query); parent: return
result(nsstring
result); __delete__(); } in this situation, there is a guaranteed sequence of messages that will be sent.
... following actor construction, the parent will send a kickoffquery message and presumably ignore the actor until it receives return
result, at which point it will be deleted.
... it makes sense to fold construction and the first message together, as well as the penultimate and deletion messages, so that the final protocol looks like this: async protocol pasyncquerier { child: pasyncquery(nsstring query); } async protocol pasyncquery { parent: __delete__(nsstring
result); } ...
Infallible memory allocation
choosing a memory allocator as you write new code that needs to allocate memory, there are some simple rules to follow to help you decide whether to use a fallible or an infallible memory allocator: if you're allocating what may be a large chunk of memory, you should allocate the memory fallibly (using malloc() for example), and check the
result to be sure it's not null.
...be sure to check the
result for null.
...when using these, you must check to ensure the
resulting value isn't null before attempting to use the returned memory.
UpdateCheckListener
updatechecklisteners are passed the
results of update checks performed by the addonupdatechecker.
... method overview void onupdatecheckcomplete(in updateinfo
results[]) void onupdatecheckerror(in integer status) methods onupdatecheckcomplete() called when the update check completed successfully.
... void onupdatecheckcomplete( in updateinfo
results[] ) parameters
results an array of updateinfo objects representing the available add-on versions onupdatecheckerror() called when the update check fails.
Interfacing with the Add-on Repository
importing the repository code module before you can use the add-on repository api, you need to import the code module: components.utils.import("resource://gre/modules/addonrepository.jsm"); having done this, you can then access the api through the
resulting addonrepository object.
...nents.interfaces.nsiprefservice); var prefbranch = prefsservice.getbranch("extensions."); var recurl = ""; try { recurl = prefbranch.getcharpref("getaddons.recommended.url"); } catch(e) { recurl = ""; } if (recurl == "") { prefbranch.setcharpref("getaddons.recommended.url", "https://services.addons.mozilla.org/%locale%/%app%/api/%api_version%/list/recommended/all/%max_
results%/%os%/%version%?src=firefox"); prefsservice.savepreffile(null); } this fetches the value of the extensions.getaddons.recommended.url preference, and, if the preference doesn't exist or has no value, sets the value of the preference to the correct one for the amo site.
... for example: searchsucceeded: function(addons, addoncount, total
results) { var num = math.floor(math.random() * addoncount); this.shownotification("would you like to try the " + addons[num].name + " addon?", "install", addons[num].install); }, this routine randomly selects one of the returned add-ons, then calls the previously mentioned shownotification() routine, passing in as parameters a prompt including the name of the returned add-on, a label f...
mozilla::CondVar
wait() ns
result wait( in printervaltime interval = pr_interval_no_timeout ); wait on this condvar until it is notifyed.
... notify() ns
result notify(void); notify one thread waiting on this condvar.
... notifyall() ns
result notifyall(void); notify all threads waiting on this condvar.
mozilla::Monitor
wait() ns
result wait( in printervaltime interval = pr_interval_no_timeout ); wait on this monitor until it is notifyed.
... notify() ns
result notify(void); notify one thread waiting on this monitor.
... notifyall() ns
result notifyall(void); notify all threads waiting on this monitor.
mozilla::MonitorAutoEnter
methods wait() ns
result wait( in printervaltime interval = pr_interval_no_timeout ); wait on the underlying monitor until it is notifyed.
... notify() ns
result notify(void); notify one thread waiting on the underlying monitor.
... notifyall() ns
result notifyall(void); notify all threads waiting on the underlying monitor.
Profiling with the Firefox Profiler
for example:in the
results above we can see that we're spending ~287 milliseconds in startup::xre_initchildprocess, 194 ms of which are spent in pvsync::msg_notify and all child functions that it calls.
...*/ ); ' -f ./run.js -e ' var profileobj = profiler.getprofiledata(); print(json.stringify(profileobj)); ' | tail -n 1 > run.cleo the xpcshell output all benchmark information and on its last line it output the
result of the profiling, you can filter it with tail -n 1 and redirect it to a file to prevent printing it in your shell.
...to do so, paste the layer dump into the "enter your profile data here" text field on the front page of cleopatra: the
resulting "profile" will have the layer tree view enabled (but nothing else).
Leak And Bloat Tests
results printed on tinderbox output, these consist of: mail rlk reference count leaks mail lk total bytes malloc'ed and not free'd mail mh maximum heap size mail a allocations - number of calls to malloc and friends.
... there are currently no graphs for these
results.
... manually running tests setting up build set up build thunderbird or seamonkey with your standard mozconfig file, but with the following options set: ac_add_options --enable-debug ac_add_options --enable-trace-malloc running the tests in your <objdir> run the following command: make mailbloat this will run the tests and produce some
result files.
PR EnumerateAddrInfo
syntax #include <prnetdb.h> void *pr_enumerateaddrinfo( void *enumptr, const praddrinfo *addrinfo, pruint16 port, prnetaddr *
result); parameters the function has the following parameters: enumptr the index pointer of the enumeration.
...
result on input, a pointer to a prnetaddr structure.
... on output, this structure is filled in by the runtime if the
result of the call is not null.
PR_GetProtoByName
syntax #include <prnetdb.h> prstatus pr_getprotobyname( const char* protocolname, char* buffer, print32 bufsize, prprotoent*
result); parameters the function has the following parameters: protocolname a pointer to the character string of the protocol's name.
... buffer a pointer to a scratch buffer for the runtime to return
result.
...
result on input, a pointer to a prprotoent structure.
PR_GetProtoByNumber
syntax #include <prnetdb.h> prstatus pr_getprotobynumber( print32 protocolnumber, char* buffer, print32 bufsize, prprotoent*
result); parameters the function has the following parameters: protocolnumber the number assigned to the protocol.
... buffer a pointer to a scratch buffer for the runtime to return
result.
...
result on input, a pointer to a prnetaddr structure.
PR_cnvtf
syntax #include <prdtoa.h> void pr_cnvtf ( char *buf, printn bufsz, printn prcsn, prfloat64 fval); parameters the function has these parameters: buf the address of the buffer in which to store the
result.
... bufsz the size of the buffer provided to hold the
result.
... on return, the
result is written to the buffer pointed to by buf of size bufsz.
Enc Dec MAC Output Public Key as CSR
treq(seckeyprivatekey *privk, seckeypublickey *pubk, keytype keytype, secoidtag hashalgtag, certname *subject, prbool ascii, const char *certreqfilename) { certsubjectpublickeyinfo *spki = null; certcertificaterequest *cr = null; secitem *encoding = null; secoidtag signalgtag; secitem
result; secstatus rv = secsuccess; print32 numbytes; void *exthandle; prarenapool *arena = null; prfiledesc *outfile = null; /* open the certificate request file to write */ outfile = pr_open(certreqfilename, pr_create_file | pr_rdwr | pr_truncate, 00660); if (!outf...
... pr_fprintf(pr_stderr, "der encoding of request failed\n"); rv = secfailure; goto cleanup; } /* sign the request */ signalgtag = sec_getsignaturealgorithmoidtag(keytype, hashalgtag); if (signalgtag == sec_oid_unknown) { pr_fprintf(pr_stderr, "unknown key or hash type\n"); rv = secfailure; goto cleanup; } rv = sec_dersigndata(arena, &
result, encoding->data, encoding->len, privk, signalgtag); if (rv) { pr_fprintf(pr_stderr, "signing of data failed\n"); rv = secfailure; goto cleanup; } /* encode request in specified format */ if (ascii) { char *obuf; char *name, *email, *org, *state, *country; secitem *it; int total; it = &
result...
... pr_fprintf(outfile, "%s\n", ns_certreq_header); numbytes = pr_write(outfile, obuf, total); if (numbytes != total) { pr_fprintf(pr_stderr, "write error\n"); return secfailure; } pr_fprintf(outfile, "\n%s\n", ns_certreq_trailer); if (obuf) { port_free(obuf); } } else { numbytes = pr_write(outfile,
result.data,
result.len); if (numbytes != (int)
result.len) { pr_fprintf(pr_stderr, "write error\n"); rv = secfailure; goto cleanup; } } cleanup: if (spki) { seckey_destroysubjectpublickeyinfo(spki); } if (cr) { cert_destroycertificaterequest (cr); } if (arena) { port_freearena(arena, pr_false); } if (outfil...
NSS Sample Code sample2
xd3, 0xc3, 0x71, 0x2e, 0x58}; int main(int argc, char **argv) { ck_mechanism_type ciphermech; pk11slotinfo* slot = null; pk11symkey* symkey = null; secitem* secparam = null; pk11context* enccontext = null; secitem keyitem, ivitem; secstatus rv, rv1, rv2; unsigned char data[1024], buf1[1024], buf2[1024]; int i,
result_len, tmp1_outlen, tmp2_outlen; /* initialize nss * if your application code has already initialized nss, you can skip it * here.
...text = pk11_createcontextbysymkey(ciphermech, cka_encrypt, symkey, secparam); rv1 = pk11_cipherop(enccontext, buf1, &tmp1_outlen, sizeof(buf1), data, strlen(data)+1); rv2 = pk11_digestfinal(enccontext, buf1+tmp1_outlen, &tmp2_outlen, sizeof(buf1)-tmp1_outlen); pk11_destroycontext(enccontext, pr_true);
result_len = tmp1_outlen + tmp2_outlen; if (rv1 != secsuccess || rv2 != secsuccess) goto out; fprintf(stderr, "encrypted data: "); for (i=0; i<
result_len; i++) fprintf(stderr, "%02x ", buf1[i]); fprintf(stderr, "\n"); /* decrypt buf1 into buf2.
... buf2 len must be atleast buf1 len */ tmp1_outlen = tmp2_outlen = 0; /* create cipher context */ enccontext = pk11_createcontextbysymkey(ciphermech, cka_decrypt, symkey, secparam); rv1 = pk11_cipherop(enccontext, buf2, &tmp1_outlen, sizeof(buf2), buf1,
result_len); rv2 = pk11_digestfinal(enccontext, buf2+tmp1_outlen, &tmp2_outlen,
result_len-tmp1_outlen); pk11_destroycontext(enccontext, pr_true);
result_len = tmp1_outlen + tmp2_outlen; if (rv1 != secsuccess || rv2 != secsuccess) goto out; fprintf(stderr, "decrypted data: %s\n", buf2); /* =========================== end section ============================= */ out: if (symkey) pk11_freesymkey(symkey); if (secparam) sec...
Introduction to the JavaScript shell
if you specified options on the command line, the
results of calling options will indicate which options you requested.
... print([expression ...]) evaluates the expression(s) and displays the
result(s) on stdout, separated by spaces (" ") and terminated by a newline ("\n").
... putstr(expression) evaluates the expression and displays the
result on stdout.
JS::GetFirstArgumentAsTypeHint
syntax bool js::getfirstargumentastypehint(jscontext* cx, callargs args, jstype *
result); name type description cx jscontext * the context in which to define functions.
... behavior jstype * receives the
result of conversion.
... if args.get(0) is one of the strings "string", "number", or "default", set *
result to jstype_string, jstype_number, or jstype_void accordingly and return true.
JS_DefineProperty
s::handleobject obj, const char16_t *name, size_t namelen, double value, unsigned attrs, jsnative getter = nullptr, jsnative setter = nullptr); // ---- added in spidermonkey 45 ---- bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc, js::objectop
result &
result); bool js_definepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::handle<jspropertydescriptor> desc); bool js_defineucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::handle<jspropertydescriptor> desc); // ---- added in spidermonkey 1.8.1 ---- bool js_definepropertybyid(jscontext *cx...
...
result js::objectop
result & (out parameter) receives the
result of the operation.
... see also mxr id search for js_defineproperty mxr id search for js_defineucproperty mxr id search for js_definepropertybyid js_defineelement bug 461163 bug 1113369 -- added desc and
result parameters ...
JS_DeleteElement
syntax bool js_deleteelement(jscontext *cx, js::handleobject obj, uint32_t index); // added in spidermonkey 45 bool js_deleteelement(jscontext *cx, js::handleobject obj, uint32_t index, js::objectop
result &
result); name type description cx jscontext * pointer to a js context from which to derive runtime information.
...
result js::objectop
result & (out parameter) receives the
result of the operation.
... see also mxr id search for js_deleteelement bug 1113369 -- added
result parameter ...
JS_DeleteProperty
syntax bool js_deleteproperty(jscontext *cx, js::handleobject obj, const char *name); bool js_deletepropertybyid(jscontext *cx, js::handleobject obj, jsid id); // added in spidermonkey 1.8.1 // added in spidermonkey 45 bool js_deleteproperty(jscontext *cx, js::handleobject obj, const char *name, js::objectop
result &
result); bool js_deletepropertybyid(jscontext *cx, js::handleobject obj, js::handleid id, js::objectop
result &
result); bool js_deleteucproperty(jscontext *cx, js::handleobject obj, const char16_t *name, size_t namelen, js::objectop
result &
result); name type description cx jscontext * pointer to a js context from which to derive runtime inf...
...
result js::objectop
result & (out parameter) receives the
result of the operation.
... see also mxr id search for js_deleteproperty mxr id search for js_deletepropertybyid js_deleteproperty2 js_deletepropertybyid2 bug 461163 bug 1113369 -- added
result parameter and js_deleteucproperty ...
JS_LooselyEqual
receives the comparison
result.
...if the comparison attempt was successful, the method returns js_true and stores the
result in *equal; otherwise it returns js_false.
... comparing jsvals directly in c++, as in v1 == v2, does not produce a meaningful
result, since it is possible for two distinct jsstrings or jsdoubles to represent the same string or number.
JS_PreventExtensions
syntax // added in spidermonkey 45 bool js_preventextensions(jscontext *cx, js::handleobject obj, js::objectop
result &
result); // obsolete since jsapi 39 bool js_preventextensions(jscontext *cx, js::handleobject obj, bool *succeeded); name type description cx jscontext * the context.
...
result js::objectop
result & (out parameter) receives the
result of the operation.
... see also mxr id search for js_preventextensions bug 1113369 -- added
result parameter ...
JS_StrictlyEqual
receives the comparison
result.
...if the comparison attempt was successful, the method returns true and stores the
result in *equal; otherwise it returns false.
... comparing jsvals directly in c++, as in v1 == v2, does not produce a meaningful
result, since it is possible for two distinct jsstrings or jsdoubles to represent the same string or number.
JS_StringEqualsAscii
received the comparison
result.
... on successful, js_stringequalsascii stores the comparison
result into *match and returns true, otherwise returns false.
... js_flatstringequalsascii always succeeds, and returns the comparison
result.
Finishing the Component
when your component runs in a version of gecko in which this interface is updated, your method calls will be routed through a different v-table than the one the component expected, most likely
resulting in a crash.
...he weblockregistration callback function so that it looks like this: static ns_method weblockregistration(nsicomponentmanager *acompmgr, nsifile *apath, const char *registrylocation, const char *componenttype, const nsmodulecomponentinfo *info) { ns
result rv; nscomptr<nsiservicemanager> servman = do_queryinterface((nsisupports*)acompmgr, &rv); if (ns_failed(rv)) return rv; nscomptr<nsicategorymanager> catman; servman->getservicebycontractid(ns_categorymanager_contractid, ns_get_iid(nsicategorymanager), getter_addrefs(catman)); if (ns_failed(rv)) return rv; ch...
... *_retval = pr_false; ns
result rv; nscomptr<nsiservicemanager> servman; rv = ns_getservicemanager(getter_addrefs(servman)); if (ns_failed(rv)) return rv; nscomptr<nsiioservice> mioservice; // get a pointer to the ioservice rv = servman->getservicebycontractid("@mozilla.org/network/io-service;1", ns_get_iid(nsiioservice), getter_addr...
Using XPCOM Components
managing cookies from cpp nscomptr<nsiservicemanager> servman; ns
result rv = ns_getservicemanager(getter_addrefs(servman)); if (ns_failed(rv)) return -1; nscomptr<nsicookiemanager> cookiemanager; rv = servman->getservicebycontractid("@mozilla.org/cookiemanager", ns_get_iid(nsicookiemanager), getter_addrefs(cookiemanager)); if (ns_failed(rv)) return -1; pruint32 len; deletedcookies->getle...
...to instantiate an xpcom component in javascript, you create a new component object and pass in the contract id for the component you want and ask for either a singleton or an instance of that component to be returned: var cmgr = components.classes["@mozilla.org/cookiemanager;1"] .getservice(); the
resulting cookiemanager object then provides access to all of the methods for that component that have been defined in idl and compiled into the type library.
...actually, the getservice() method in the example here calls through to the createinstance() method that is also available from the component object and caches the
result, making it a singleton rather than a normal instance.
Introduction to XPCOM for the DOM
pure virtual methods are declared with the following syntax: virtual ns
result functionfoo() = 0; an interface is thus simply a c++ class where all the member functions are declared as pure virtual functions.
... ns_imethod is a macro that basically means "virtual ns
result".
... return ns_ok; } ns_imethodimp nshtmldocument::getneat(prbool *aneat) { if(!aneat) { return ns_error_null_pointer; } ns
result rv = fabian(); if( rv == ns_ok ) { *aneat = pr_true; } else { *aneat = pr_false; } return ns_ok; } this code is of course written in nshtmldocument.cpp.
Components.returnCode
usage components.returncode is a property that can be used to indicate to an xpcom caller of the javascript method that the method is returning a specific ns
result code.
... generally, xpconnect does a fine job of making it unnecessary for javascript code to worry about ns
result codes.
... by default the successful completion of the javascript method will cause xpconnect to return a
result code of ns_ok to the caller.
NS_NewLocalFile
#include "nsxpcom.h" #include "nsilocalfile.h" ns
result ns_newlocalfile( const nsastring& apath, prbool afollowlinks, nsilocalfile** a
result ); parameters apath [in] a utf-16 string object that specifies an absolute filesystem path.
... a
result [out] a reference to the newly created nsilocalfile instance.
... example code // create a local file that references c:\foo.txt ns
result rv; nscomptr<nsilocalfile> file; rv = ns_newlocalfile(nsembedstring(l"c:\\foo.txt"), pr_false, getter_addrefs(file)); if (ns_failed(rv)) return rv; note: gcc requires the -fshort-wchar option to compile this example since prunichar is an unsigned short.
NS_NewNativeLocalFile
#include "nsxpcom.h" #include "nsilocalfile.h" ns
result ns_newnativelocalfile( const nsacstring& apath, prbool afollowlinks, nsilocalfile** a
result ); parameters apath [in] a string object that specifies an absolute filesystem path.
... a
result [out] a reference to the newly created nsilocalfile instance.
... example code // create a local file that references c:\foo.txt ns
result rv; nscomptr<nsilocalfile> file; rv = ns_newnativelocalfile(nsembedcstring("c:\\foo.txt"), pr_false, getter_addrefs(file)); if (ns_failed(rv)) return rv; here, nsembedcstring is used to convert the ascii string literal to an object that can be passed as a const nsacstring& parameter.
NS ConvertASCIItoUTF16 external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
NS ConvertUTF16toUTF8 external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
NS ConvertUTF8toUTF16 external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
NS LossyConvertUTF16toASCII external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
PromiseFlatCString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
PromiseFlatString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsACString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsAString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsAutoString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsCAutoString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsCStringContainer (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result aerrorcode pruint32 aradix ...
nsCString external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsDependentCString external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsDependentCSubstring external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsDependentString external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsDependentSubstring external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result aerrorcode pruint32 aradix ...
nsLiteralCString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsLiteralString (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsStringContainer (External)
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
nsString external
parameters int aint print32 aradix tointeger print32 tointeger(ns
result*, pruint32) const - source convert this string to an integer.
... @param aerrorcode pointer to contain
result code.
... @param aradix must be 10 or 16 parameters ns
result* aerrorcode pruint32 aradix ...
imgIRequest
inherits from: nsirequest last changed in gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5) method overview void cancelandforgetobserver(in ns
result astatus); imgirequest clone(in imgidecoderobserver aobserver); void decrementanimationconsumers(); imgirequest getstaticrequest(); void incrementanimationconsumers(); void lockimage(); void requestdecode(); void unlockimage(); attributes attribute type description corsmode long the cors mode that this image was loaded with.
... status_load_partial 0x2 used internally by imgrequest to flag that a request is being cancelled as a
result of a failure of a proxy holder and not an internal failure.
...void cancelandforgetobserver( in ns
result astatus ); parameters astatus clone() clone this request; the returned request will have aobserver as the observer.
mozIAsyncHistory
aplaceidentifiers, in mozivisitinfocallback acallback); void isurivisited(in nsiuri auri, in mozivisitedstatuscallback acallback); void updateplaces(in moziplaceinfo, [optional] in mozivisitinfocallback acallback); methods getplacesinfo() starts an asynchronous request to determine whether or not a given uri has been visited; you must implement a callback to receive the
result of the request.
... isurivisited() starts an asynchronous request to determine whether or not a given uri has been visited; you must implement a callback to receive the
result of the request.
... acallback an object implementing the mozivisitedstatuscallback.isvisited() method; this method will be called with the
results once the request has been completed.
mozIStorageConnection
the
resulting statement will be faster to execute.
...as a
result, this method of modifying the database is strongly discouraged!
... mozistoragevaluearray wraps an array of sql values, such as a
result row.
mozIThirdPartyUtil
(we have already checked that auri is not foreign with respect to the channel uri.) otherwise, return the
result of isthirdpartywindow() with arguments of the channel's bottommost window and the channel uri, respectively.
...for example, if auri is "http://mail.google.com/", achannel has a uri of "http://google.com/", and its parent is the topmost content window with a uri of "http://mozilla.com", the
result will be true.
...(this means that nested iframes with different base domains, even though the bottommost and topmost uris might be equal, will be considered third party.) for example, if auri is "http://mail.google.com/", 'awindow' has a uri of "http://google.com/", and its parent is the topmost content window with a uri of "http://mozilla.com", the
result will be true.
nsIAsyncInputStream
method overview void asyncwait(in nsiinputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtarget aeventtarget); void closewithstatus(in ns
result astatus); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the oninputstreamready notification to be suppressed until the stream becomes closed (either as a
result of closewithstatus()/close being called on the stream or possibly due to some error in the underlying stream).
...the notification is one-shot, meaning that each asyncwait call will
result in exactly one notification callback.
...void closewithstatus( in ns
result astatus ); parameters astatus the error that will be reported if this stream is accessed after it has been closed.
nsIAsyncOutputStream
method overview void asyncwait(in nsioutputstreamcallback acallback, in unsigned long aflags, in unsigned long arequestedcount, in nsieventtarget aeventtarget); void closewithstatus(in ns
result reason); constants constant value description wait_closure_only (1<<0) if passed to asyncwait(), this flag overrides the default behavior, causing the onoutputstreamready notification to be suppressed until the stream becomes closed (either as a
result of closewithstatus()/close being called on the stream or possibly due to some error in the underlying stream).
...the notification is one-shot, meaning that each asyncwait call will
result in exactly one notification callback.
...void closewithstatus( in ns
result reason ); parameters reason the error that will be reported if this stream is accessed after it has been closed.
nsIAsyncVerifyRedirectCallback
method overview void onredirectverifycallback(in ns
result result); methods onredirectverifycallback() implements the asynchronous callback passed to nsichanneleventsink.asynconchannelredirect().
... the
result of the redirect decision is passed through this callback.
... void onredirectverifycallback( in ns
result result ); parameters
result result of the redirect veto decision.
nsIAuthPrompt
to create an instance, use: var authprompt = components.classes["@mozilla.org/login-manager/prompter;1"] .createinstance(components.interfaces.nsiauthprompt); method overview boolean prompt(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, in wstring defaulttext, out wstring
result); boolean promptpassword(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, inout wstring pwd); boolean promptusernameandpassword(in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, inout wstring user, inout wstring pwd); constants constant value description save_pa...
... boolean prompt( in wstring dialogtitle, in wstring text, in wstring passwordrealm, in pruint32 savepassword, in wstring defaulttext, out wstring
result ); parameters dialogtitle the title of the dialog.
...
result the
result of the dialog box, ok or cancel buttons.
nsIAuthPromptProvider
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void getauthprompt(in pruint32 apromptreason, in nsiidref iid, [iid_is(iid),retval] out nsqi
result result); constants constant value description prompt_normal 0 normal (non-proxy) prompt request.
...void getauthprompt( in pruint32 apromptreason, in nsiidref iid, [iid_is(iid),retval] out nsqi
result result ); parameters apromptreason the reason for the authentication prompt, one of the prompt_* constants.
...
result a nsiauthprompt2 interface.
nsIAutoCompleteListener
inherits from: nsisupports last changed in gecko 1.7 method overview void onautocomplete(in nsiautocomplete
results
result, in autocompletestatus status); void onstatus(in wstring statustext); attributes attribute type description param nsisupports private parameter used by the autocomplete widget.
...as of gecko 1.9.1, can also be called with partial
results, in a similar manner to the toolkit autocomplete interface.
... void onautocomplete( in nsiautocomplete
results
result, in nsiautocompletestatus status ); parameters
result an nsiautocomplete
results object containing the (partial)
results of the autocomplete.
nsIBinaryInputStream
readarraybuffer() read opaque bytes from the stream, storing the
results in an arraybuffer.
... aarraybuffer the arraybuffer in which to store the
results.
... readbytearray() reads an opaque byte array from the stream, storing the
results as an array of pruint8s.
nsICacheListener
inherits from: nsisupports last changed in gecko 14 (firefox 14 / thunderbird 14 / seamonkey 2.11) method overview void oncacheentryavailable(in nsicacheentrydescriptor descriptor, in nscacheaccessmode accessgranted, in ns
result status); void oncacheentrydoomed(in ns
result status); methods oncacheentryavailable() this method is called when the requested access (or appropriate subset) is acquired.
...void oncacheentryavailable( in nsicacheentrydescriptor descriptor, in nscacheaccessmode accessgranted, in ns
result status ); parameters descriptor the cache entry descriptor.
...void oncacheentrydoomed( in ns
result status ); parameters status the status is ns_ok when the entry was doomed, or ns_error_not_available when there is no such entry.
nsICategoryManager
return value a simple enumerator, each
result qis to nsisupportscstring.
... return value a simple enumerator, each
result qis to nsisupportscstring.
... ns
result printallcategories() { ns
result rv; nscomptr<nsiservicemanager> svcmgr; rv = ns_getservicemanager(getter_addrefs(svcmgr)); if (ns_failed(rv)) return rv; nscomptr<nsicategorymanager> catmgr; rv = svcmgr->getservicebycontractid(ns_categorymanager_contractid, ns_get_iid(nsicategorymanager), getter_add...
nsICollection
inherits from: nsiserializable last changed in gecko 1.7 method overview void appendelement(in nsisupports item); void clear(); pruint32 count(); nsienumerator enumerate(); nsisupports getelementat(in pruint32 index); void queryelementat(in pruint32 index, in nsiidref uuid, [iid_is(uuid),retval] out nsqi
result result); void removeelement(in nsisupports item); void setelementat(in pruint32 index, in nsisupports item); methods appendelement() appends a new item to the collection.
...void queryelementat( in pruint32 index, in nsiidref uuid, [iid_is(uuid),retval] out nsqi
result result ); parameters index position of the item to be queried.
...
result comparison
result of the previous two parameters.
nsIDocumentLoader
); obsolete since gecko 1.8 void createdocumentloader(out nsidocumentloader aninstance); obsolete since gecko 1.8 void destroy(); obsolete since gecko 1.8 void fireonlocationchange(in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri); obsolete since gecko 1.8 void fireonstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in ns
result astatus, in wstring amessage); obsolete since gecko 1.8 void getcontentviewercontainer(in nsisupports adocumentid, out nsicontentviewercontainer a
result); native code only!
... void fireonlocationchange( in nsiwebprogress awebprogress, in nsirequest arequest, in nsiuri auri ); parameters awebprogress arequest auri fireonstatuschange() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) void fireonstatuschange( in nsiwebprogress awebprogress, in nsirequest arequest, in ns
result astatus, in wstring amessage ); parameters awebprogress arequest astatus amessage native code only!getcontentviewercontainer obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete.
...void getcontentviewercontainer( in nsisupports adocumentid, out nsicontentviewercontainer a
result ); parameters adocumentid a
result getloadgroup() obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) nsiloadgroup getloadgroup(); parameters none.
nsIDownloadProgressListener
g acurselfprogress, in long long amaxselfprogress, in long long acurtotalprogress, in long long amaxtotalprogress, in nsidownload adownload); void onsecuritychange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astate, in nsidownload adownload); void onstatechange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in ns
result astatus, in nsidownload adownload); void onstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in ns
result astatus, in wstring amessage, in nsidownload adownload); obsolete since gecko 1.9.1 attributes attribute type description document nsidomdocument document the document of the download manager frontend.
... void onstatechange( in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in ns
result astatus, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads.
... void onstatuschange( in nsiwebprogress awebprogress, in nsirequest arequest, in ns
result astatus, in wstring amessage, in nsidownload adownload ); parameters awebprogress the nsiwebprogress instance used by the download manager to monitor downloads.
nsIDownloader
the
resulting file is valid from the time the downloader completes until the last reference to the downloader is released.
...if null, the downloader will select a location and the
resulting file will be deleted (or otherwise made invalid) when the downloader object is destroyed.
... if an explicit download location is specified then the
resulting file will not be deleted, and it will be the callers responsibility to keep track of the file, and so on.
nsIFactory
inherits from: nsisupports last changed in gecko 0.9.5 method overview void createinstance(in nsisupports aouter, in nsiidref iid, [retval, iid_is(iid)] out nsqi
result result); void lockfactory(in prbool lock); methods createinstance() creates an instance of the class associated with this factory.
...(see also nsicomponentmanager.createinstance.) void createinstance( in nsisupports aouter, in nsiidref iid, [retval, iid_is(iid)] out nsqi
result result ); parameters aouter pointer to a component that wishes to be aggregated in the
resulting instance.
...
result pointer to the newly created instance, if successful.
nsIIDNService
this combines two operations: running the rfc 3490 "tounicode" operation on the original string, then converting the
resulting unicode string into utf-8 format.
...the
resulting string is useful for display purposes, and ensures that the encoding is consistent with nsiuri.gethost().
...isascii on return, this is set to true if the
result is ascii or ace encoded; otherwise it's false.
nsIInputStream
ns
result consumestream(nsiinputstream* astream) { ns
result rv; uint32_t numread; char buf[512]; while (1) { rv = astream->read(buf, sizeof(buf), &numread); if (ns_failed(rv)) { printf("### error reading stream: %x\n", rv); break; } if (numread == 0) break; // buf now contains numread bytes of data } return rv; } consume all data from an input st...
... nsacstring* pbuf = (nsacstring*) aclosure; pbuf->append(afromsegment, acount); // indicate that we have consumed all of afromsegment *awritecount = acount; return ns_ok; } // copy the contents of astream into a
resultbuf as one contiguous // buffer.
...ns
result copystream(nsiinputstream* astream, nsacstring& a
resultbuf) { uint32_t numread; return astream->readsegments(appendsegment, (void*) &a
resultbuf, pr_uint32_max, &numread); } remarks this interface was frozen for gecko 1.0.
nsIInterfaceRequestor
method overview void getinterface(in nsiidref uuid, [iid_is(uuid),retval] out nsqi
result result); methods getinterface() retrieves the specified interface pointer.
... void getinterface( in nsiidref uuid, [iid_is(uuid),retval] out nsqi
result result ); parameters uuid the iid of the interface being requested.
...
result the interface pointer to be filled in if the interface is accessible.
nsILoginManager
to create an instance, use: var loginmanager = components.classes["@mozilla.org/login-manager;1"] .getservice(components.interfaces.nsiloginmanager); method overview void addlogin(in nsilogininfo alogin); nsiautocomplete
result autocompletesearch(in astring asearchstring, in nsiautocomplete
result aprevious
result, in nsidomhtmlinputelement aelement); unsigned long countlogins(in astring ahostname, in astring aactionurl, in astring ahttprealm); boolean fillform(in nsidomhtmlformelement aform); void findlogins(out unsigned long count, in astring ahostname, in astring aactionurl, in astring ahttp...
... autocompletesearch() generates
results for a user field autocomplete menu.
... nsiautocomplete
result autocompletesearch( in astring asearchstring, in nsiautocomplete
result aprevious
result, in nsidomhtmlinputelement aelement ); parameters asearchstring missing description aprevious
result missing description aelement missing description return value missing description countlogins() returns the number of logins matching the specified criteria.
nsIModule
inherits from: nsisupports last changed in gecko 0.9.9 method overview boolean canunload(in nsicomponentmanager acompmgr); void getclassobject(in nsicomponentmanager acompmgr, in nscidref aclass, in nsiidref aiid, [retval, iid_is(aiid)] out nsqi
result a
result); void registerself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr, in string atype); void unregisterself(in nsicomponentmanager acompmgr, in nsifile alocation, in string aloaderstr); methods canunload() this method may be queried to determine whether or not the component module can be unloaded by xpcom.
...void getclassobject( in nsicomponentmanager acompmgr, in nscidref aclass, in nsiidref aiid, [retval, iid_is(aiid)] out nsqi
result a
result ); parameters acompmgr the global component manager.
... a
result the
resulting interface pointer.
nsIMsgHeaderParser
this param may be null if the caller does not want this part of the
result.
...this param may be null if the caller does not want this part of the
result.
...addresses in this list will not be added to the
result.
nsIMsgSearchSession
ters); boolean isstringattribute(in nsmsgsearchattribvalue attrib); void addallscopes(in nsmsgsearchscopevalue attrib); void search(in nsimsgwindow awindow); void interruptsearch(); void pausesearch(); void resumesearch(); [noscript] nsmsgsearchtype setsearchparam(in nsmsgsearchtype type, in voidptr param); [noscript] void add
resultelement(in nsmsg
resultelement element); boolean matchhdr(in nsimsgdbhdr amsghdr, in nsimsgdatabase adatabase); void addsearchhit(in nsimsgdbhdr header, in nsimsgfolder folder); attributes attribute type description searchterms nsisupportsarray readonly: numsearchterms unsigned long readonly: runningadapter nsimsgs...
...earchadapter readonly: searchparam voidptr not scriptable and readonly: searchtype nsmsgsearchtype readonly: num
results long readonly: window nsimsgwindow constants name value description booleanor 0 booleanand 1 methods addsearchterm() void addsearchterm(in nsmsgsearchattribvalue attrib, in nsmsgsearchopvalue op, in nsimsgsearchvalue value, in boolean booleanand, in string arbitraryheader); parameters attrib attribute for this term.
... void pausesearch(); resumesearch() void resumesearch(); setsearchparam() [noscript] nsmsgsearchtype setsearchparam(in nsmsgsearchtype type, in voidptr param); parameters type param add
resultelement() [noscript] void add
resultelement(in nsmsg
resultelement element); parameters element matchhdr() boolean matchhdr(in nsimsgdbhdr amsghdr, in nsimsgdatabase adatabase); parameters amsghdr adatabase addsearchhit() void addsearchhit(in nsimsgdbhdr header, in nsimsgfolder folder); parameters header folder ...
nsIParserUtils
return value an nsidomdocumentfragment object for the
resulting sanitized document fragment.
... sanitize() parses a string into an html document, sanitizes the document, and returns the
result serialized to a string.
... return value the
resulting text.
nsIPrinterEnumerator
inherits from: nsisupports last changed in gecko 1.9 (firefox 3) method overview void displaypropertiesdlg(in wstring aprinter, in nsiprintsettings aprintsettings); void enumerateprinters(out pruint32 acount,[retval, array, size_is(acount)] out wstring a
result); obsolete since gecko 1.9 void initprintsettingsfromprinter(in wstring aprintername, in nsiprintsettings aprintsettings); attributes attribute type description defaultprintername wstring the name of the system default printer.
...void enumerateprinters( out pruint32 acount, [retval, array, size_is(acount)] out wstring a
result ); parameters acount returns number of printers returned.
... a
result returns array of names.
nsIPropertyBag2
g(in astring prop); autf8string getpropertyasautf8string(in astring prop); boolean getpropertyasbool(in astring prop); double getpropertyasdouble(in astring prop); print32 getpropertyasint32(in astring prop); print64 getpropertyasint64(in astring prop); void getpropertyasinterface(in astring prop, in nsiidref iid, [iid_is(iid), retval] out nsqi
result result); pruint32 getpropertyasuint32(in astring prop); pruint64 getpropertyasuint64(in astring prop); prbool haskey(in astring prop); methods get() this method returns null if the value does not exist, or exists but is null.
...void getpropertyasinterface( in astring prop, in nsiidref iid, [iid_is(iid), retval] out nsqi
result result ); parameters prop property to return the value of.
...
result the
resulting interface pointer.
nsISupports
last changed in gecko 1.0 method overview nsrefcnt addref();violates the xpcom interface guidelines void queryinterface(in nsiidref uuid, [iid_is(uuid),retval] out nsqi
result result); nsrefcnt release();violates the xpcom interface guidelines methods violates the xpcom interface guidelines addref() notifies the object that an interface pointer has been duplicated.
... note: the interface pointer, a
result, returned by queryinterface must be released by a call to release() when it is no longer needed.
... void queryinterface( in nsiidref uuid, [iid_is(uuid),retval] out nsqi
result result ); parameters uuid the uuid of the requested interface
result the
resulting interface pointer.
nsITXTToHTMLConv
methods preformathtml() specifies whether or not to wrap the
resulting html in an <pre> block.
... void preformathtml( in boolean value ); parameters value true to wrap the
resulting html in a <pre> block.
... settitle() sets the title to use on the
resulting html document.
nsIURI
the
result is strictly ascii.
... warning: setting this is highly discouraged outside of a protocol handler implementation, since doing so will generally lead to unpredictable
results.
... warning: because parsing the string is done using the current uri's scheme, setting the spec to a uri with a different scheme will produce incorrect
results.
nsIWeakReference
method overview void queryreferent( in nsiidref uuid, [iid_is(uuid), retval] out nsqi
result result ); methods queryreferent() this method queries an interface on the referent if it exists, and like nsisupports.queryinterface(), produces an owning reference to the desired interface.")}} it is designed to look and act exactly like (a proxied) nsisupports.queryinterface().
...void queryreferent( in nsiidref uuid, [iid_is(uuid), retval] out nsqi
result result ); parameters uuid the uuid of the requested interface.
...
result the
resulting interface pointer.
nsIWebProgressListener
ange(in nsiwebprogress awebprogress, in nsirequest arequest, in long acurselfprogress, in long amaxselfprogress, in long acurtotalprogress, in long amaxtotalprogress); void onsecuritychange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astate); void onstatechange(in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in ns
result astatus); void onstatuschange(in nsiwebprogress awebprogress, in nsirequest arequest, in ns
result astatus, in wstring amessage); constants state transition flags these flags indicate the various states that requests may transition through as they are being loaded.
... void onstatechange( in nsiwebprogress awebprogress, in nsirequest arequest, in unsigned long astateflags, in ns
result astatus ); parameters awebprogress the nsiwebprogress instance that fired the notification.
... void onstatuschange( in nsiwebprogress awebprogress, in nsirequest arequest, in ns
result astatus, in wstring amessage ); parameters awebprogress the nsiwebprogress instance that fired the notification.
nsIZipReader
if you show filenames from the findentries()
result in the user interface, the character matching is only fine on utf-8 zip archives.
...subsequent attempts to extract() files or read from its input stream will
result in an error.
...this may be used to perform filtering upon the
results of one pattern to remove all matches which also match another pattern.
XPCOM Interface Reference by grouping
bletreecache nsiaccessiblevalue nsiaccessnode nsisyncmessagesender script nsiscriptableunescapehtml nsiscriptableunicodeconverter nsiscripterror nsiscripterror2 stylesheet nsistylesheetservice url nsiuri nsiurl util nsidomserializer nsidomxpathevaluator nsidomxpathexception nsidomxpathexpression nsidomxpath
result xslt nsixsltexception nsixsltprocessor download nsidownload nsidownloadmanager nsidownloadprogresslistener element internal nsiworker nsiworkerglobalscope nsiworkermessageevent nsiworkermessageport nsiworkerscope tree nsitreeboxobject nsitreecolumn nsitreecolumns nsitreecontentview nsitreeselection n...
...offlinestorage nsiapplicationcache nsiapplicationcachechannel nsiapplicationcachecontainer nsiapplicationcachenamespace nsiapplicationcacheservice places nsiannotationobserver rss feed nsifeed nsifeedcontainer nsifeedelementbase nsifeedentry nsifeedgenerator nsifeedperson nsifeedprocessor nsifeedprogresslistener nsifeed
result nsifeed
resultlistener nsifeedtextconstruct script mozijssubscriptloader storage mozistoragevacuumparticipant util nsieffectivetldservice worker nsiabstractworker data nsiarray nsicategorymanager nsicollection nsidictionary nsimutablearray nsisimpleenumerator nsisupportschar nsisupportsdouble nsisup...
... nsicancelable application application nsiapplicationupdateservice nsiappshell nsiappshellservice nsiappstartup xul nsixulappinfo nsixulruntime nsixultemplatebuilder nsixultemplatequeryprocessor nsixultemplate
result bookmark livemark nsilivemarkservice nsinavbookmarkobserver nsinavbookmarksservice nsinavhistoryservice browser dom nsiwebbrowser nsiwebbrowserpersist cache ...
NS_UTF16ToCString
« xpcom api reference summary the ns_utf16tocstring function converts the value of a nsastring instance from utf-16 to the specified multi-byte encoding and stores the
result in a nsacstring instance.
... #include "nsstringapi.h" ns
result ns_utf16tocstring( const nsastring& asrc, nscstringencoding adestencoding, nsacstring& adest ); parameters asrc [in] a nsastring instance containing the source utf-16 string to be converted.
... adest [out] a nsacstring instance that will contain the
result of the conversion.
nsIAbCard/Thunderbird3
a value must be convertible to a string; if this convention is not followed, consumers of cards may fail unpredictably or return incorrect
results.
... the exact nature of equality is still undefined, and actual
results may not match theoretical
results.
...in particular, calling equals on cards from different address books may return inaccurate
results.
Performance
for example, explain select * from moz_history; the
results are hard to understand, but you should be able to see whether it is using indices.
...as a
result, mozilla enables the sqlite_secure_delete preprocessor flag in db/sqlite3/src/makefile.in.
...as a
result, this bug introduced incremental history expiration eliminating the need to write many 0s to disk on shutdown.
Weak reference
ns
result addobserver( nsiobserver* ); ns
result notifyobservers( nsimessage* ); // ...
... ns
result nsobservable::addobserver( nsiobserver* aobserver ) { mobserver = getter_addrefs( ns_getweakreference(aobserver) ); // ...or append this to the list of observers return ns_ok; } ns
result nsobservable::notifyobservers( nsimessage* amessage ) { nscomptr<nsiobserver> observer = do_queryreferent(mobserver); if ( observer ) observer->noticemessage(amessage); else mobserver = 0; // or remove this observer from the list, he's gone away return ns_ok; } // ...
...among these requirements is that every call to queryinterface against the same (aggragate) object for the same interface must yield the same
result, no matter what interface pointer you call it through, and no matter when you call it.
XUL Overlays
though overlays often define ui elements that have been added as a
result of an update or enhancement of some kind, they can be used in many different ways.
...and given the following overlay: <?xml version="1.0"?> <overlay id="singleitemex" xmlns:html="http://www.w3.org/1999/xhtml" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <menupopup id="menu_filepopup"> <menu id="file_menu"> <menuitem name="super stream player"/> </menu> </menupopup> </overlay> the
result will be: ...
...the layout engine loads any overlay files and then flows the
resulting xul document, so problems associated with incremental insertion in menus, boxes, tables, and forms are avoided.
Index
28 gloda thunderbird 3, thunderbird thunderbird includes a new message indexing and search system (gloda) that improves search performance, provides sophisticated full-text search capabilities and categorized search
results.
...the
result is a javascript file that will add a "numbers" container to the end of thunderbird's "all folders" mode.
...depending on the installed theme the
result will look something like this: 80 building a thunderbird extension 7: installation extensions, thunderbird while you are developing the extension, there are two ways you can make thunderbird load it so you can test it as you go.
Mail composition back end
ns_imethod onstopsending(const char *amsgid, - the message id for the message being sent ns
result astatus, - the
resulting status for the send operation const prunichar *amsg, - a message concerning the status of the send operation nsifilespec *returnfilespec) = 0; - an nsifilespec which will specify the file that was created (this is used if the dont_deliver_p argument is set to pr_true) nsimsgcopyservicelistener ...
... ns_imethod onstopcopy( ns
result astatus, - the
resulting status for the send operation nsisupports *listenerdata) = 0; - the nsisupports pointer passed in to the original copy operation copy operations there are various copy operations that can
result as a part of message creation and delivery.
... ns_imethod onstopsending( ns
result astatus, - the
resulting status for the send operation const prunichar *amsg, - a status message pruint32 atotaltried, - the total messages that were attempted pruint32 asuccessful) = 0; - the number of successful messages quoting quoting a mail message is made possible via the nsimsgquo...
Activity Manager examples
////////////////////////////////////////////////////////////// //// undo handler implementation class mycopyeventundo : public nsiactivityundohandler { public: ns_decl_isupports ns_decl_nsiactivityundohandler mycopyeventundo() {} private: ~mycopyeventundo() {} }; ns_impl_isupports1(mycopyeventundo, nsiactivityundohandler) ns_imethodimp mycopyeventundo::undo(nsiactivityevent *event, ns
result *
result) { ns
result rv; // get the subjects of this copy event pruint32 length; nsivariant **subjectlist; rv = event->getsubjects(&length, &subjectlist); if(ns_failed(rv)) return rv; // first subject in the list is the source folder in this particular case nscomptr<nsimsgfolder> folder = do_queryinterface(subjectlist[0]); // get the initiator nsivariant *initiator; eve...
...nt->getinitiator(&initiator); if (initiator) { nsisupports* ptr; rv = object->getasisupports(&ptr); if(ns_failed(rv)) return rv; nscomptr<nsimsgcopyservice> copyservice = do_queryinterface(ptr); if (copyservice) copyservice->undo(folder); } return (*
result = ns_ok); } ///////////////////////////////////////////////////////////////////////////// //// creating an undoable copy event nscomptr<nsiactivityundohandler> undohandler = new mycopyeventundo(); nscomptr<nsiactivityevent> copyevent(do_createinstance("@mozilla.org/activity-event;1")); // the initiator of this particular event is copyservice.
...as a
result, all junk processing activities (assuming that we process accounts in parallel) dealing with messages coming from the same sender will be grouped together.
Debugging Tips
let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p); let pp = p.address(); console.log(pp); the
result will be as following: cdata { value: 10 } cdata { x: 10, y: 20 } cdata { contents: cdata } to see more descriptive information, you can use .tosource().
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.tosource()); let pp = p.address(); console.log(pp.tosource()); the
result will be : ctypes.int32_t(10) point(10, 20) point.ptr(ctypes.uint64("0x15fdafb08")) to see the complete type information, you can use .constructor.tosource(), to print the source of ctype.
... let { ctypes } = components.utils.import("resource://gre/modules/ctypes.jsm", {}); let i = ctypes.int32_t(10); console.log(i.constructor.tosource()); let point = ctypes.structtype("point", [{ x: ctypes.int32_t }, { y: ctypes.int32_t }]) let p = point(10, 20); console.log(p.constructor.tosource()); let pp = p.address(); console.log(pp.constructor.tosource()); the
result will be as per the following: ctypes.int32_t ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]) ctypes.structtype("point", [{ "x": ctypes.int32_t }, { "y": ctypes.int32_t }]).ptr ...
Browser Side Plug-in API - Plugins
warning: you must only call these from the main thread; calling them from other threads is not supported and may have unpredictable
results.
... npn_geturlnotify requests creation of a new stream with the contents of the specified url; gets notification of the
result.
... npn_posturlnotify posts data to a url, and receives notification of the
result.
Drawing and Event Handling - Plugins
nperror
result = npn_setvalue(instance, nppvpluginwindowbool, (void*)false); } invalidating the drawing area before it can repaint or refresh part of its drawing area, a windowless plug-in must first invalidate the area with either of these browser methods: npn_invalidaterect or npn_invalidateregion.
... void npn_forceredraw(npp instance); this method
results in a synchronous update event or paint message for the plug-in.
...the plug-in can use this to deal with wm_command messages sent to it as a
result of tracking the pop-up menu or modal dialog box.
Initialization and Destruction - Plugins
*/ char*
result = npn_useragent(); if (
result == null) return nperr_out_of_memory_error; /* allocate some memory so that you can keep a copy of it.
... */ useragent = (char*) npn_memalloc(strlen(
result) + 1); if (useragent == null) return nperr_out_of_memory_error; /* copy the string to your memory.
... */ strcpy(useragent,
result); return nperr_no_error; } /* shutdown function */ nperror np_shutdown(void) { /* delete the memory you allocated.
Plug-in Development Overview - Plugins
the npn_geturlnotify function operates like npn_geturl, except that it notifies the plug-in of the
result when the operation completes.
...the
result from the server can also be sent to a particular browser window or frame for display, or delivered to the plug-in instance in a new stream.
... the npn_posturlnotify function operates like npn_posturl, except that it notifies the plug-in of the
result when the operation completes.
Streams - Plugins
in the first call, npp_writeready could return 8192,
resulting in a call to npp_write with a buffer of up to 8k bytes.
...to avoid allocating additional buffers, the plug-in could return 4096,
resulting in a call to npp_write with a buffer of up to 4k bytes.
... for the complete list of codes, see "
result codes." for an example that demonstrates using this function with npn_newstream and npn_write, see "example of sending a stream." example of sending a stream the following code creates a new stream of html text displayed by the browser in a new window, writes it, and destroys the stream.
Debugger.Memory - Firefox Developer Tools
function properties of the debugger.memory.prototype object memory use analysis exposes implementation details memory analysis may yield surprising
results, because browser implementation details that are transparent to content javascript often have visible effects on memory consumption.
...this representation may
result in a small string retaining a very large string.
... concatenations: when asked to concatenate two strings, spidermonkey may elect to delay copying the strings’ data, and represent the
result simply as a pointer to the two original strings.
AudioConfiguration - Web APIs
} }; // check support and performance navigator.mediacapabilities.decodinginfo(mediaconfig).then(
result => { console.log('this configuration is ' + (
result.supported ?
... '' : 'not ') + 'supported, ' + (
result.smooth ?
... '' : 'not ') + 'smooth, and ' + (
result.powerefficient ?
Background Tasks API - Web APIs
getting the most out of idle callbacks because idle callbacks are intended to give your code a way to cooperate with the event loop to ensure that the system is utilized to its full potential without over-tasking it,
resulting in lag or other performance problems, you should be thoughtful about how you go about using them.
... as a
result, while our shim doesn't constrain itself to the amount of idle time left in the current event loop pass like the true requestidlecallback(), it does at least limit the callback to no more than 50 milliseconds of run time per pass.
...
result below is the actual functioning
result of the code above.
Cache - Web APIs
cache.add(request) takes a url, retrieves it and adds the
resulting response object to the given cache.
... this is functionally equivalent to calling fetch(), then using put() to add the
results to the cache.
... cache.addall(requests) takes an array of urls, retrieves them, and adds the
resulting response objects to the given cache.
CanvasRenderingContext2D.shadowColor - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 10; ctx.shadowoffsety = 10; // filled rectangle ctx.fillrect(20, 20, 100, 100); // stroked rectangle ctx.linewidth = 6; ctx.strokerect(170, 20, 100, 100);
result shadows on translucent shapes a shadow's opacity is affected by the transparency level of its parent object (even when shadowcolor specifies a completely opaque value).
... html <canvas id="canvas"></canvas> javascript the
resulting alpha value of the fill shadow is .8 * .2, or .16.
...cument.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'rgba(255, 0, 0, .8)'; ctx.shadowblur = 8; ctx.shadowoffsetx = 30; ctx.shadowoffsety = 20; // filled rectangle ctx.fillstyle = 'rgba(0, 255, 0, .2)'; ctx.fillrect(10, 10, 150, 100); // stroked rectangle ctx.linewidth = 10; ctx.strokestyle = 'rgba(0, 0, 255, .6)'; ctx.strokerect(10, 10, 150, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowcolor' in that specification.
CanvasRenderingContext2D.stroke() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.stroke();
result re-stroking paths typically, you'll want to call beginpath() for each new thing you want to stroke.
...t ctx = canvas.getcontext('2d'); // first sub-path ctx.linewidth = 26; ctx.strokestyle = 'orange'; ctx.moveto(20, 20); ctx.lineto(160, 20); ctx.stroke(); // second sub-path ctx.linewidth = 14; ctx.strokestyle = 'green'; ctx.moveto(20, 80); ctx.lineto(220, 80); ctx.stroke(); // third sub-path ctx.linewidth = 4; ctx.strokestyle = 'pink'; ctx.moveto(20, 140); ctx.lineto(280, 140); ctx.stroke();
result stroking and filling if you want to both stroke and fill a path, the order in which you perform these actions will determine the
result.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 16; ctx.strokestyle = 'red'; // stroke on top of fill ctx.beginpath(); ctx.rect(25, 25, 100, 100); ctx.fill(); ctx.stroke(); // fill on top of stroke ctx.beginpath(); ctx.rect(175, 25, 100, 100); ctx.stroke(); ctx.fill();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroke' in that specification.
CanvasRenderingContext2D.transform() - Web APIs
a value of 1
results in no scaling.
...a value of 1
results in no scaling.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.transform(1, .2, .8, 1, 0, 0); ctx.fillrect(0, 0, 100, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.transform' in that specification.
Manipulating video using canvas - Web APIs
the
result is: line 3 fetches a copy of the raw graphics data for the current frame of video by calling the getimagedata() method on the first context.
... as a
result, the final image has the entire green screen area 100% transparent, so that when it's drawn into the destination context in line 13, the
result is an overlay onto the static backdrop.
... the
resulting image looks like this: this is done repeatedly as the video plays, so that frame after frame is processed and displayed with the chroma-key effect.
EXT_disjoint_timer_query - Web APIs
ext.query_counter_bits_ext a glint indicating the number of bits used to hold the query
result for the given target.
... ext.query_
result_ext a gluint64ext containing the query
result.
... ext.query_
result_available_ext a glboolean indicating whether or not a query
result is available.
Element: contextmenu event - Web APIs
any right-click event that is not disabled (by calling the event's preventdefault() method) will
result in a contextmenu event being fired at the targeted element.
...as a
result, the first paragraph will do nothing when right-clicked, while the second paragraph will show the standard context menu offered by your browser.
... html <p id="nocontextmenu">the context menu has been disabled on this paragraph.</p> <p>but it has not been disabled on this one.</p> javascript nocontext = document.getelementbyid('nocontextmenu'); nocontext.addeventlistener('contextmenu', e => { e.preventdefault(); });
result specifications specification status comment html living standardthe definition of 'contextmenu' in that specification.
Using files from web applications - Web APIs
const reader = new filereader(); reader.onload = (function(aimg) { return function(e) { aimg.src = e.target.
result; }; })(img); reader.readasdataurl(file); } } here our loop handling the user-selected files looks at each file's type attribute to see if its mime type begins with the string "image/").
...our implementation of this routine sets the img element's src attribute to the loaded image which
results in the image appearing in the thumbnail on the user's screen.
...stener("load", function(e){ self.ctrl.update(100); const canvas = self.ctrl.ctx.canvas; canvas.parentnode.removechild(canvas); }, false); xhr.open("post", "http://demos.hacks.mozilla.org/paul/demos/resources/webservices/devnull.php"); xhr.overridemimetype('text/plain; charset=x-user-defined-binary'); reader.onload = function(evt) { xhr.send(evt.target.
result); }; reader.readasbinarystring(file); } the fileupload() function shown above creates a throbber, which is used to display progress information, and then creates an xmlhttprequest to handle uploading the data.
GeolocationCoordinates.longitude - Web APIs
examples in this simple example, we fetch the user's location and display the
resulting coordinates once they're returned.
... html the html used to present the
results looks like this: <p> your location is <span id="latitude">0.00</span>° latitude by <span id="longitude">0.00</span>° longitude.
... </p> <button id="get-location"> get my location </button>
result take this example for a test drive here: specifications specification status comment geolocation apithe definition of 'coordinates.longitude' in that specification.
HTMLCanvasElement.toBlob() - Web APIs
syntax canvas.toblob(callback, mimetype, qualityargument); parameters callback a callback function with the
resulting blob object as a single argument.
... var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); function blobcallback(iconname) { return function(b) { var r = new filereader(); r.onloadend = function () { // r.
result contains the arraybuffer.
... cu.import('resource://gre/modules/osfile.jsm'); var writepath = os.path.join(os.constants.path.desktopdir, iconname + '.ico'); var promise = os.file.writeatomic(writepath, new uint8array(r.
result), {tmppath:writepath + '.tmp'}); promise.then( function() { console.log('successfully wrote file'); }, function() { console.log('failure writing file') } ); }; r.readasarraybuffer(b); } } canvas.toblob(blobcallback('passthisstring'), 'image/vnd.microsoft.icon', '-moz-parse-options:format=bmp;bpp=32'); specifications specification status comment html living standardthe definition of 'htmlcanvaselement.toblob' in that specificati...
HTMLImageElement.alt - Web APIs
ut nunc neque, porta eu auctor at, tempor et arcu.</p> </div> </div> css the css for this example simply sets up the styles for the layout as shown in the
result below.
... background-color: rgb(241, 240, 237, 255); width: 9em; height: 100%; float: left; margin-right: 5px; padding-right: 1em; display: flex; align-items: center; justify-content: center; } .left-margin img { width: 6em; } .contents { background-color: rgb(241, 240, 235, 255); height: 100%; margin-left: 2em; padding-top: 1em; padding-left: 2em; padding-right: 1em; }
result images used as buttons when using an image as a button (by using it as the only visible child of an <a> element representing a hyperlink), the alt attribute must be used to convey the purpose of the button.
...container { max-width: 500px; } .pageinfo-badge { width: 9em; padding-right: 1em; float: left; clip-path: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); shape-outside: polygon(100% 0, 100% 50%, 90% 70%, 80% 80%, 70% 90%, 50% 100%, 0 100%, 0 0); } .contents { margin-top: 1em; font: 16px arial,helvetica,verdana,sans-serif; }
result other images images simply showing objects or scenes should have alt text describing what's seen in the image.
HTMLImageElement.src - Web APIs
examples specifying a single image html <img src="https://udn.realityripple.com/samples/d6/7ab36d79bb.jpg" width="160" alt="slices of grapefruit, looking yummy.">
result using src with an image set when using a set of images with the srcset property, the src serves as either a fallback for older browsers, or as the 1x size of the image.
... html
result specifying a fallback for viewport-based selection when using viewport-bases selection of an image from a srcset by also specifying the sizes property, the src property serves as the fallback to be used on browsers that don't support viewport-based selection.
... html
result specifications specification status comment html living standardthe definition of 'htmlimageelement.src' in that specification.
HTMLInputElement.stepDown() - Web APIs
mytime.step(), with no parameter, would have
resulted in 16:45, as n defaults to 1.
...throws an invalid_state_err exception: if the method is not applicable to for the current type value, if the element has no step value, if the value cannot be converted to a number, if the
resulting value is above the max or below the min.
...*/ input.stepdown(); } } css input:invalid { border: red solid 3px; }
result note if you don't pass a parameter to the stepdown() method, it defaults to 1.
HTMLMediaElement - Web APIs
using any other size
results in an exception being thrown.
... abort fired when the resource was not fully loaded, but not as the
result of an error.
... play fired when the paused property is changed from true to false, as a
result of the htmlmediaelement.play() method, or the autoplay attribute playing fired when playback is ready to start after having been paused or delayed due to lack of data progress fired periodically as the browser loads a resource.
In depth: Microtasks and the JavaScript runtime environment - Web APIs
this allows the javascript runtime to track the levels of recursion and the return of
results through that recursion, but it also means that each time a function recurses, more memory is needed to create the new context.
... this is further alleviated by using asynchronous javascript techniques such as promises to allow the main code to continue to run while waiting for the
results of a request.
... however, code running at a more fundamental level—such as code comprising a library or framework—may need a way to schedule code to be run at a safe time while still executing on the main thread, independent of the
results of any single request or task.
IDBDatabase: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.create...
...index('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.
result; db.addeventlistener('abort', () => { console.log('transaction aborted'); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: ...
...ill contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.
result; db.onabort = () => { console.log('transaction aborted'); }; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // abort the transaction transaction.abort(); }; ...
IDBDatabase: close event - Web APIs
bubbles no cancelable no interface event event handler property onerror examples this example opens a database and listens for the close event: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.create...
...index('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.
result; db.addeventlistener('close', () => { console.log('database connection closed'); }); }; the same example, using the onclose property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes'...
..., 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.
result; db.onclose = () => { console.log('database connection closed'); }; }; ...
IDBDatabase: error event - Web APIs
vent handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.create...
...index('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.
result; db.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); const objectstore = transaction.objectstore('todolist'); const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4...
...); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const db = dbopenrequest.
result; db.onerror = () => { consol...
IDBDatabase.name - Web APIs
example this example shows a database connection being opened, the
resulting idbdatabase object being stored in a db variable, and the name property then being logged.
... // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being // opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.
result; // this line will log the name of the database, which should be "todolist" console.log(db.name); }; specifications specification status comment indexed database api 2.0the definition of 'name' in that specification.
IDBDatabase: versionchange event - Web APIs
bubbles no cancelable no interface event event handler property onversionchange examples this example opens a database and, on success, adds a listener to versionchange: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createi...
...ndex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.addeventlistener('success', event => { const db = event.target.
result; db.addeventlistener('versionchange', event => { console.log('the version of this database has changed'); }); }); the same example, using the onversionchange event handler property: // open the database const dbopenrequest = window.indexeddb.open('nonexistent', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objec...
...tstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = event.target.
result; db.onversionchange = event => { console.log('the version of this database has changed'); }; }; ...
IDBFactory.cmp() - Web APIs
syntax var
result = indexeddb.cmp(first, second); parameters first the first key to compare.
... return value an integer that indicates the
result of the comparison; the table below lists the possible values and their meanings: returned value description -1 1st key is less than the 2nd key 0 1st key is equal to the 2nd key 1 1st key is greater than the 2nd key exceptions this method may raise a domexception of the following types: attribute description dataerror one of the supplied keys was not a valid key.
... example var a = 1; var b = 2; var
result = window.indexeddb.cmp(a, b); console.log( "comparison
results: " +
result ); specifications specification status comment indexed database api 2.0the definition of 'cmp()' in that specification.
IDBFactory.open() - Web APIs
if the operation is successful, a success event is fired on the request object that is returned from this method, with its
result attribute set to the new idbdatabase object for the connection.
... us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db // variable.
... db = dbopenrequest.
result; }; specifications specification status comment indexed database api 2.0the definition of 'open()' in that specification.
IDBFactory - Web APIs
idbfactory.cmp a method that compares two keys and returns a
result indicating which one is greater in value.
...need window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { console.error("error loading database."); }; dbopenrequest.onsuccess = function(event) { console.info("database initialised."); // store the
result of opening the database in the db variable.
... db = dbopenrequest.
result; }; specifications specification status comment indexed database api 2.0the definition of 'idbfactory' in that specification.
IDBIndex.get() - Web APIs
if a value is found, then a structured clone of it is created and set as the
result of the request object: this returns the record the key is associated with.
... myindex.get('bungle') is then used to retrieve the record with an lname of bungle, and the
result of that request is logged to the console when its success callback returns.
...ee our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getrequest = myindex.get('bungle'); getrequest.onsuccess = function() { console.log(getrequest.
result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>'...
IDBIndex.getKey() - Web APIs
if a primary key is found, it is set as the
result of the request object.
... myindex.getkey('bungle') is then used to retrieve the primary key of the record with an lname of bungle, and the
result of that request is logged to the console when its success callback returns.
...dex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var getkeyrequest = myindex.getkey('bungle'); getkeyrequest.onsuccess = function() { console.log(getkeyrequest.
result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>'...
IDBObjectStore.add() - Web APIs
if unspecified, it
results to null.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore.createIndex() - Web APIs
dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... db = request.
result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // this handler fires when a new database is created and indicates // either that one has not been created before, or a new version // was submitted with window.indexeddb.open().
...dbopenrequest.onupgradeneeded = function(event) { var db = event.target.
result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: false }); objectstore.createindex("month", "month", { unique: false }); objectstore.createindex("year", "year", { unique: false }); objectstore.createindex("notified", "notified", { unique: ...
IDBObjectStore.delete() - Web APIs
the request.
result attribute is set to undefined.
...for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.
result; // run the deletedata() function to delete a record from the database deletedata(); }; function deletedata() { // open a read/write db transaction, ready for deleting the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to delete the specified record out of the o...
IDBObjectStore.openKeyCursor() - Web APIs
the openkeycursor() method of the idbobjectstore interface returns an idbrequest object whose
result will be set to an idbcursor that can be used to iterate through matching
results.
... to determine if the add operation has completed successfully, listen for the
results’s success event.
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.openkeycursor(); request.onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { // cursor.key contains the key of the current record being iterated through // note that there is no cursor.value, unlike for opencursor // this is where you'd do something with the
result cursor.continue(); } else { // no more
results } }; specifications specification status comment indexed database api 2.0the definition of 'openk...
IDBOpenDBRequest.onblocked - Web APIs
}; example var db; // let us open our database var request = indexeddb.open("todolist", 4); // these two event handlers act on the database being opened // successfully, or not request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = request.
result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the // database needs to be created.
... either one has not been created // before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers request.onupgradeneeded = function(event) { var db = event.target.
result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); ...
IDBOpenDBRequest - Web APIs
the idbopendbrequest interface of the indexeddb api provides access to the
results of requests to open or delete databases (performed using idbfactory.open and idbfactory.deletedatabase), using specific event handler attributes.
...dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db // variable.
... this is used a lot below db = dbopenrequest.
result; // run the displaydata() function to populate the task // listwith all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above // it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.
result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will ...
IDBRequest.error - Web APIs
for example, if the the request failed and the
result is not available, the invalidstateerror exception is thrown.
... example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store.
...xample, see our to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the do-do list with the specified title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the
result var data = objectstoretitlerequest.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function()...
IDBRequest.onsuccess - Web APIs
the onsuccess event handler of the idbrequest interface handles the success event, fired when the
result of a request is successfully returned.
...}; example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store.
...to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the
result var data = objectstoretitlerequest.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function()...
IDBRequest.transaction - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store in another request.
...to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the
result var data = objectstoretitlerequest.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // log the transaction that originated this request console.log("the transaction that originated this request is " + updatetitlerequest.tran...
... var db = openrequest.
result; if (event.oldversion < 1) { // new database, create "books" object store.
IDBTransaction: abort event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objects...
...tore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.
result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.addeventlistener('abort', () => { console.log('transaction was aborted'); }); // abort the transaction transaction.abort(); }; the same example, but assigning the event handler to the onabort property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; ...
... will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.
result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `abort` transaction.onabort = (event) => { console.log('transaction was aborted'); }; // abort the transaction transaction.abort(); }; ...
IDBTransaction: complete event - Web APIs
bubbles no cancelable no interface event event handler property oncomplete examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore...
....createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.
result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); // add a listener for `complete` transaction.addeventlistener('complete', event => { console.log('transaction was competed'); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2019 }; const objectstorerequest = objectstore.add(newitem); }; using the oncomplete property: // open the database cons...
...t dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = event => { const db = dbopenrequest.
result; // open a read/wri...
IDBTransaction: error event - Web APIs
vent handler property onerror examples this example opens a database and tries to add a record, listening for the error event for the add() operation (this will occur if, for example, a record with the given tasktitle already exists): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.create...
...index('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.
result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite'); transaction.addeventlistener('error', () => { console.log(`error adding new item: ${newitem.tasktitle}`); }); const objectstore = transaction.objectstore('todolist'); const newitem = { tasktitle: 'my task', hours: 10, minutes: 10, day: 10, month: 'january', year: 2020 }; const objectstorerequest = objectstore.add(newitem); }; the same example, using the onerror property instead of addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('t...
...odolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; // create an objectstore for this database const objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'day', { unique: false }); objectstore.createindex('month', 'month', { unique: false }); objectstore.createindex('year', 'year', { unique: false }); }; dbopenrequest.onsuccess = (event) => { const db = dbopenrequest.
result; // open a read/write db transaction, ready for adding the data const transaction = db.transaction(['todolist'], 'readwrite');...
IDBVersionChangeEvent - Web APIs
the idbversionchangeevent interface of the indexeddb api indicates that the version of the database has changed, as the
result of an idbopendbrequest.onupgradeneeded event handler function.
...let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... db = dbopenrequest.
result; }; specifications specification status comment indexed database api 2.0the definition of 'idbversionchangeevent' in that specification.
Timing element visibility with the Intersection Observer API - Web APIs
this way, the user sees a variety of ads over time, but the ads are only replaced while they can't be seen,
resulting in a smooth experience.
... a random ad is selected by computing math.floor(math.random() * ads.length); the
result is a value between 0 and one less than the number of ads.
...
result the
resulting page looks like this.
KeyboardEvent.charCode - Web APIs
example html <p>type anything into the input box below to log a <code>charcode</code>.</p> <input type="text" /> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.queryselector('#log'); input.addeventlistener('keypress', function(e) { log.innertext = `key pressed: ${string.fromcharcode(e.charcode)}\ncharcode: ${e.charcode}`; });
result notes in a keypress event, the unicode value of the key pressed is stored in either the keycode or charcode property, but never both.
...actually with the chinese ime i'm using, entering the ime
results in a keypress event with keycode = 229 and no other key events fire until the ime exits (which may happen after multiple characters are inputted).
... for a list of the charcode values associated with particular keys, run example 7: displaying event object properties and view the
resulting html table.
Location - Web APIs
itle][id]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = '#' + $(this).attr('id'); }); }); [].foreach.call(document.queryselectorall('[title]'), function (node) { node.addeventlistener("click", function(e) { e.preventdefault(); e.stoppropagation(); window.location.hash = ''; }); });
result properties location.ancestororigins is a static domstringlist containing, in reverse order, the origins of all ancestor browsing contexts of the document associated with the given location object.
... examples // create anchor element and use href property for the purpose of this example // a more correct alternative is to browse to the url and use document.location or window.location var url = document.createelement('a'); url.href = 'https://developer.mozilla.org:8080/search?q=url#search-
results-close-container'; console.log(url.href); // https://developer.mozilla.org:8080/search?q=url#search-
results-close-container console.log(url.protocol); // https: console.log(url.host); // developer.mozilla.org:8080 console.log(url.hostname); // developer.mozilla.org console.log(url.port); // 8080 console.log(url.pathname); // /search console.log(url.search); // ?q=url console.
...log(url.hash); // #search-
results-close-container console.log(url.origin); // https://developer.mozilla.org:8080 specifications specification status comment html living standardthe definition of 'location' in that specification.
MediaCapabilities.decodingInfo() - Web APIs
}, }; // check support and performance navigator.mediacapabilities.decodinginfo(mediaconfig).then(
result => { console.log('this configuration is ' + (
result.supported ?
... '' : 'not ') + 'supported, ' + (
result.smooth ?
... '' : 'not ') + 'smooth, and ' + (
result.powerefficient ?
MediaCapabilities.encodingInfo() - Web APIs
} }; // check support and performance navigator.mediacapabilities.encodinginfo(mediaconfig).then(
result => { console.log('this configuration is ' + (
result.supported ?
... '' : 'not ') + 'supported, ' + (
result.smooth ?
... '' : 'not ') + 'smooth, and ' + (
result.powerefficient ?
MediaCapabilitiesInfo - Web APIs
example // mediaconfiguration to be tested const mediaconfig = { type : 'file', audio : { contenttype : "audio/ogg", channels : 2, bitrate : 132700, samplerate : 5200 }, }; // check support and performance navigator.mediacapabilities.decodinginfo(mediaconfig).then(
result => { //
result contains the media capabilities information console.log('this configuration is ' + (
result.supported ?
... '' : 'not ') + 'supported, ' + // can the media, as configured, be decoded by the user agent (
result.smooth ?
... (
result.powerefficient ?
MediaDeviceInfo.groupId - Web APIs
the function starts by initializing the
result array, devlist, to be an empty array.
... this could be altered easily to either leave out the passed-in device from the returned list, or to place it at the top of the list, by comparing the two objects' deviceid values, only pushing the device onto the
result list if it doesn't match.
... this version of the example puts the passed-in device at the top of the
result list, then adds any other members of the group that are found: const getdevicegroup = maindevinfo => { let devlist = [maindevinfo]; navigator.mediadevices.enumeratedevices() .then(devices => { devices.foreach(device => { if ((device.groupid === maindevinfo.groupid) && (device.deviceid !== maindevinfo.deviceid)) { devlist.push(device); } }); }); return devlist; }; ...
MediaQueryList.media - Web APIs
examples this example runs the media query (max-width: 600px) and displays the value of the
resulting mediaquerylist's media property in a <span>.
... javascript let mql = window.matchmedia('(max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.media; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the
result's media property.
... css .mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; }
result specifications specification status comment css object model (cssom) view modulethe definition of 'media' in that specification.
Media Capabilities API - Web APIs
if ('mediacapabilities' in navigator) { const audiofileconfiguration = { type : 'file', audio : { contenttype: "audio/mp3", channels: 2, bitrate: 132700, samplerate: 5200 } }; navigator.mediacapabilities.decodinginfo(audiofileconfiguration).then(
result => { console.log('this configuration is ' + (
result.supported ?
... '' : 'not ') + 'supported, ' + (
result.smooth ?
... '' : 'not ') + 'smooth, and ' + (
result.powerefficient ?
Navigator.mediaCapabilities - Web APIs
examples navigator.mediacapabilities.decodinginfo({ type : 'file', audio : { contenttype : "audio/mp3", channels : 2, bitrate : 132700, samplerate : 5200 } }).then(function(
result) { console.log('this configuration is ' + (
result.supported ?
... '' : 'not ') + 'supported, ' + (
result.smooth ?
... '' : 'not ') + 'smooth, and ' + (
result.powerefficient ?
Node - Web APIs
when multiple prefixes are possible, the
result is implementation-dependent.
... node.issupported() returns a boolean flag containing the
result of a test whether the dom implementation implements a specific feature and this feature is supported by the specific node.
... sample usage the following example prints the textcontent properties of each <span> tag in a <div> element named "box": <div id="box"> <span>foo</span> <span>bar</span> <span>baz</span> </div> const box = document.getelementbyid("box") eachnode(box, function(node) { if (null != node.textcontent) { console.log(node.textcontent) } }) the above will
result in the following strings printing to the user's console: "\n\t", "foo", "\n\t", "bar", "\n\t", "baz" note: whitespace forms part of a text node, meaning indentation and newlines form separate text between the element nodes.
PaymentRequest.show() - Web APIs
once one paymentrequest's show() method has been called, any other call to show() will by rejected with an aborterror until the returned promise has been concluded, either by being fulfilled with a paymentresponse indicating the
results of the payment request, or by being rejected with an error.
... processing the
result and, if necessary, calling paymentresponse.retry() to retry a failed payment can all be done either asynchronously or synchronously, depending on your needs.
...most examples on mdn and elsewhere use async/await to wait asynchronously while
results are validated and so forth.
Using the Payment Request API - Web APIs
it returns a promise that fulfills with a boolean indicating whether it is or not, for example: // dummy payment request to check whether payment can be made new paymentrequest(buildsupportedpaymentmethoddata(), {total: {label: 'stub', amount: {currency: 'usd', value: '0.01'}}}) .canmakepayment() .then(function(
result) { if(
result) { // real payment request var request = new paymentrequest(buildsupportedpaymentmethoddata(), checkoutobject); request.show().then(function(paymentresponse) { // here we would process the payment.
...let shouldcallpaymentrequest = true; let fallbacktolegacyonpaymentrequestfailure = false; (new paymentrequest(supportedpaymentmethods, {total: {label: 'stub', amount: {currency: 'usd', value: '0.01'}}}) .canmakepayment() .then(function(
result) { shouldcallpaymentrequest =
result; }).catch(function(error) { console.log(error); // the user may have turned off query ability in their privacy settings.
...function onservercheckoutdetailsretrieved(checkoutobject) { if (shouldcallpaymentrequest) { const request = new paymentrequest(supportedpaymentmethods, checkoutobject); request.show().then(function(paymentresponse) { // post the
results to the server and call `paymeresponse.complete()`.
Pointer events - Web APIs
pointer capture pointer capture allows the events for a pointer to be retargeted to a particular element other than the normal hit test
result of the pointer's location.
... pointerenter onpointerenter fired when a pointer is moved into the hit test boundaries of an element or one of its descendants, including as a
result of a pointerdown event from a device that does not support hover (see pointerdown).
...if the target area is too small, touching it could
result in firing other events for adjacent elements.
PublicKeyCredential - Web APIs
it is either of type authenticatorattestationresponse if the publickeycredential was the
results of a navigator.credentials.create() call, or of type authenticatorassertionresponse if the publickeycredential was the
result of a navigator.credentials.get() call.
... methods publickeycredential.getclientextension
results()secure context if any extensions were requested, this method will return the
results of processing those extensions.
...{ name: "example corp", id : "login.example.com" }, user: { id: new uint8array(16), name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { var response = newcredentialinfo.response; var clientextensions
results = newcredentialinfo.getclientextension
results(); }).catch(function (err) { console.error(err); }); getting an existing instance of publickeycredential here, we fetch an existing credential from an authenticator, using navigator.credentials.get().
PushManager.registrations() - Web APIs
if the method call is successful, the request's
result will be an array of pushregistration objects.
... example var req = navigator.push.registrations(); req.onsuccess = function(e) { if (req.
result.length > 0) { for (var i = 0, l = req.
result.length; i < l; i++) { console.log("existing registration", req.
result[i].pushendpoint, req.
result[i].version); } // reuse existing endpoints.
... var register = navigator.push.register(); register.onsuccess = function(e) { console.log("registered new endpoint", register.
result); } } } specification specification status comment push api working draft defines the pushmanager interface.
Push API - Web APIs
this lets developers deliver asynchronous notifications and updates to users that opt in,
resulting in better engagement with timely new content.
... the
resulting pushsubscription includes all the information that the application needs to send a push message: an endpoint and the encryption key needed for sending data.
... activating a service worker to deliver a push message can
result in increased resource usage, particularly of the battery.
ReadableStreamDefaultReader.ReadableStreamDefaultReader() - Web APIs
function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { //
result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); para.textcontent =
result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem);
result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'readablestreamdefaultreader()' in that specification.
ReadableStreamDefaultReader.cancel() - Web APIs
function fetchstream() { const reader = stream.getreader(); let charsreceived = 0; // read() returns a promise that resolves // when a value has been received reader.read().then(function processtext({ done, value }) { //
result objects contain two properties: // done - true if the stream has already given you all its data.
... if (done) { console.log("stream complete"); reader.cancel(); para.textcontent =
result; return; } // value for fetch streams is a uint8array charsreceived += value.length; const chunk = value; let listitem = document.createelement('li'); listitem.textcontent = 'received ' + charsreceived + ' characters so far.
... current chunk = ' + chunk; list2.appendchild(listitem);
result += chunk; // read some more, and call this function again return reader.read().then(processtext); }); } specifications specification status comment streamsthe definition of 'cancel()' in that specification.
Response - Web APIs
you can create a new response object using the response.response() constructor, but you are more likely to encounter a response object being returned as the
result of another api operation—for example, a service worker fetchevent.respondwith, or a simple windoworworkerglobalscope.fetch().
... response.redirected read only indicates whether or not the response is the
result of a redirect (that is, its url list has more than one entry).
...it returns a promise that resolves with the
result of parsing the body text as json.
SVGLength - Web APIs
an svglength object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
...val.converttospecifiedunits(svglength.svg_lengthtype_in); console.log("value: " + val.value + ", valueinspecifiedunits " + val.unittype + ": " + val.valueinspecifiedunits + ", valueasstring: " + val.valueasstring); } ]]></script> <rect id="myrect" x="1cm" y="1cm" fill="green" stroke="black" stroke-width="1" width="1cm" height="1cm" /> </svg>
results on a desktop monitor (pixel units will be dpi-dependent): value: 37.7952766418457, valueinspecifiedunits: 6: 1, valueasstring: 1cm value: 26.66666603088379, valueinspecifiedunits 9: 20, valueasstring: 20pt value: 26.66666603088379, valueinspecifiedunits 8: 0.277777761220932, valueasstring: 0.277778in constants name value description svg_lengthtype_unknown 0 ...
...object attributes unittype, valueinspecifiedunits, and valueasstring might be modified as a
result of this method.
SVGRect - Web APIs
an svgrect object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
... svgrect.width this represents the width of the rectangle.a value that is negative
results to an error.
... a value of zero disables rendering of the element svgrect.height this represents the height of the rectangle.a value that is negative
results to an error.a value of zero disables rendering of the element.
SVGTransform - Web APIs
an svgtransform object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
... for svg_transform_skewx and svg_transform_skewy, a, b, c and d represent the matrix which will
result in the given skew (e=0 and f=0).
... for svg_transform_rotate, a, b, c, d, e and f together represent the matrix which will
result in the given rotation.
SVGTransformList - Web APIs
an svgtransformlist object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
... methods name & arguments return description clear() void clears all existing current items from the list, with the
result being an empty list.
... consolidate() svgtransform consolidates the list of separate svgtransform objects by multiplying the equivalent transformation matrices together to
result in a list consisting of a single svgtransform object of type svg_transform_matrix.
SpeechRecognition.maxAlternatives - Web APIs
the maxalternatives property of the speechrecognition interface sets the maximum number of speechrecognitionalternatives provided per speechrecognition
result.
... syntax var mymaxalternativenumber = myspeechrecognition.maxalternatives; myspeechrecognition.maxalternatives = 2; value a number representing the maximum returned alternatives for each
result.
... plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interim
results = false; recognition.maxalternatives = 1; ...
SubtleCrypto.encrypt() - Web APIs
syntax const
result = crypto.subtle.encrypt(algorithm, key, data); parameters algorithm is an object specifying the algorithm to be used and any extra parameters if required: to use rsa-oaep, pass an rsaoaepparams object.
... return value
result is a promise that fulfills with an arraybuffer containing the "ciphertext".
...authentication helps protect against chosen-ciphertext attacks, in which an attacker can ask the system to decrypt arbitrary messages, and use the
result to deduce information about the secret key.
USBDevice.controlTransferIn() - Web APIs
the controltransferin() method of the usbdevice interface returns a promise that resolves with a usbintransfer
result when the
result of a command or status request has been received from the usb device.
...the actual data is in the usbintransfer
result in the resolved promise.
... return value promise that resolves with a usbintransfer
result.
USBDevice.transferIn() - Web APIs
the transferin() method of the usbdevice interface returns a promise that resolves with a usbtransferin
result when bulk or interrupt data is received from the usb device.
...the actual data is in the usbintransfer
result in the resolved promise.
... return value a promise that resolves with a usbtransferin
result.
WebGL2RenderingContext.getQueryParameter() - Web APIs
possible values: gl.query_
result: returns a gluint containing the query
result.
... gl.query_
result_available: returns a glboolean indicating whether or not a query
result is available.
... examples var query = gl.createquery(); gl.beginquery(gl.any_samples_passed, query); var
result = gl.getqueryparameter(query, gl.query_
result); specifications specification status comment webgl 2.0the definition of 'getqueryparameter' in that specification.
Detect WebGL - Web APIs
« previousnext » this example demonstrates how to detect a webgl rendering context and reports the
result to the user.
... <p>[ here would go the
result of webgl feature detection ]</p> <button>press here to detect webglrenderingcontext</button> body { text-align : center; } button { display : block; font-size : inherit; margin : auto; padding : 0.6em; } // run everything inside window load event handler, to make sure // dom is fully loaded and styled before trying to manipulate it.
... var gl = canvas.getcontext("webgl") || canvas.getcontext("experimental-webgl"); // report the
result.
WebGL best practices - Web APIs
flush when expecting
results (like queries or rendering frame completion) flush tells the implementation to push all pending commands out for execution, flushing them out of the queue, instead of waiting for more commands to enqueue before sending for execution.
... consider rendering to a smaller backbuffer size a common (and easy) way to trade off quality for speed is rendering into a smaller backbuffer, and upscaling the
result.
... while you can use mediump float instead, but be aware that this often
results in corrupted rendering due to lack of precision (particularly mobile systems) though the corruption is not going to be visible on a typical desktop computer.
WebRTC API - Web APIs
adapter.js also handles prefixes and other naming differences to make the entire webrtc development process easier, with more broadly compatible
results.
...this happens as a
result of a call to either setlocaldescription() or setremotedescription().
...the only event sent with this type is identity
result.
Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
the first is described above: applying a reference space to an offset (or vice-versa, since the
result is the same) to determine the transform matrix that represents the
resulting location in the space's coordinate system.
... getpose() computes the position of an xrreferencespace relative to the origin of a specified xrspace and then creates a pose representing the
resulting position and orientation.
... a reset may occur because the xr hardware lost connectivity for a time,
resulting in the user's movements not being properly tracked for a while.
Web Authentication API - Web APIs
note most javascript programmers that are creating an application will only really care about steps 1 and 5 where the create() function is called and subsequently returns; however, steps 2, 3, and 4 are essential to understanding the processing that takes place in the browser and authenticator and what the
resulting data means.
...the specific options for authenticating can be found in the publickeycredentialrequestoptions dictionary, and the
resulting data can be found in the publickeycredential interface (where publickeycredential.response is the authenticatorassertionresponse interface) .
... server validates and finalizes authentication - upon receiving the
result of the authentication request, the server performs validation of the response such as: using the public key that was stored during the registration request to validate the signature by the authenticator.
Web Speech API - Web APIs
speechrecognitionevent the event object for the
result and nomatch events, and contains all the data associated with an interim or final speech recognition
result.
... speechrecognition
result represents a single recognition match, which may contain multiple speechrecognitionalternative objects.
... speechrecognition
resultlist represents a list of speechrecognition
result objects, or a single one if
results are being captured in continuous mode.
Window.matchMedia() - Web APIs
examples this example runs the media query (max-width: 600px) and displays the value of the
resulting mediaquerylist's matches property in a <span>; as a
result, the output will say "true" if the viewport is less than or equal to 600 pixels wide, and will say "false" if the window is wider than that.
... javascript let mql = window.matchmedia('(max-width: 600px)'); document.queryselector(".mq-value").innertext = mql.matches; the javascript code simply passes the media query to match into matchmedia() to compile it, then sets the <span>'s innertext to the value of the
results' matches property, so that it indicates whether or not the document matches the media query at the moment the page was loaded.
... css .mq-value { font: 18px arial, sans-serif; font-weight: bold; color: #88f; padding: 0.4em; border: 1px solid #dde; }
result see testing media queries programmatically for additional code examples.
WindowOrWorkerGlobalScope.setTimeout() - Web APIs
html <p>live example</p> <button onclick="delayedalert();">show an alert box after two seconds</button> <p></p> <button onclick="clearalert();">cancel alert before it happens</button> javascript var timeoutid; function delayedalert() { timeoutid = window.settimeout(window.alert, 2*1000, 'that was really slow!'); } function clearalert() { window.cleartimeout(timeoutid); }
result see also cleartimeout() example.
...currently-executing code must complete before functions on the queue are executed, thus the
resulting execution order may not be as expected.
...this causes an integer overflow when using delays larger than 2,147,483,647 ms (about 24.8 days),
resulting in the timeout being executed immediately.
XSLTProcessor - Web APIs
if the given node is a document node, you can pass in a full xsl transform or a literal
result element transform; otherwise, it must be an <xsl:stylesheet> or <xsl:transform> element.
...the owner document of the
resulting document fragment is the owner node.
... the
resultant object depends on the output method of the stylesheet: output method
result type html htmldocument xml xmldocument text xmldocument with a single root element <transformiix:
result> with the text as a child [throws] void xsltprocessor.setparameter(string namespaceuri, string localname, any value) sets a parameter in the xslt stylesheet that was imported.
Web APIs
er serviceworkercontainer serviceworkerglobalscope serviceworkermessageevent serviceworkerregistration serviceworkerstate shadowroot sharedworker sharedworkerglobalscope slottable sourcebuffer sourcebufferlist speechgrammar speechgrammarlist speechrecognition speechrecognitionalternative speechrecognitionerror speechrecognitionerrorevent speechrecognitionevent speechrecognition
result speechrecognition
resultlist speechsynthesis speechsynthesiserrorevent speechsynthesisevent speechsynthesisutterance speechsynthesisvoice staticrange stereopannernode storage storageestimate storageevent storagemanager storagequota stylepropertymap stylepropertymapreadonly stylesheet stylesheetlist submitevent subtlecrypto syncevent syncmanager t taskattributiontiming te...
...xt textdecoder textencoder textmetrics textrange texttrack texttrackcue texttracklist timeevent timeranges touch touchevent touchlist trackdefault trackdefaultlist trackevent transferable transformstream transitionevent treewalker typeinfo u uievent ulongrange url urlsearchparams urlutilsreadonly usb usbalternateinterface usbconfiguration usbdevice usbendpoint usbintransfer
result usbinterface usbisochronousintransferpacket usbisochronousintransfer
result usbisochronousouttransferpacket usbisochronousouttransfer
result usbouttransfer
result usvstring userdatahandler userproximityevent v vttcue vttregion validitystate videoconfiguration videoplaybackquality videotrack videotracklist visualviewport w webgl_color_buffer_float webgl_compressed_texture_astc webg...
...ent window windowclient windoweventhandlers windoworworkerglobalscope worker workerglobalscope workerlocation workernavigator worklet writablestream writablestreamdefaultcontroller writablestreamdefaultwriter x xdomainrequest xmldocument xmlhttprequest xmlhttprequesteventtarget xmlhttprequestresponsetype xmlserializer xpathevaluator xpathexception xpathexpression xpathnsresolver xpath
result xrboundedreferencespace xrenvironmentblendmode xreye xrframe xrframerequestcallback xrhandedness xrinputsource xrinputsourcearray xrinputsourceevent xrinputsourceeventinit xrinputsourceschangeevent xrinputsourceschangeeventinit xrpermissiondescriptor xrpermissionstatus xrpose xrreferencespace xrreferencespaceevent xrreferencespaceeventinit xrreferencespacetype xrrenderstate xrrenderstateinit ...
Cognitive accessibility - Accessibility
providing warnings about inactivity that could
result in data loss.
... when a timeout is used, tell people exactly how much time will cause the session to time out and
result in lost data.
... change setting based on an active request form control operation and data entry should
result in predictable behavior.
::after (:after) - CSS: Cascading Style Sheets
html <p class="boring-text">here is some plain old boring text.</p> <p>here is some normal text that is neither boring nor exciting.</p> <p class="exciting-text">contributing to mdn is easy and fun.</p> css .exciting-text::after { content: " <- exciting!"; color: green; } .boring-text::after { content: " <- boring"; color: red; }
result decorative example we can style text or images in the content property almost any way we want.
...</span> css .ribbon { background-color: #5bc8f7; } .ribbon::after { content: "this is a fancy orange box."; background-color: #ffba10; border-color: black; border-style: dotted; }
result tooltips this example uses ::after, in conjunction with the attr() css expression and a data-descr custom data attribute, to create tooltips.
...] { position: relative; text-decoration: underline; color: #00f; cursor: help; } span[data-descr]:hover::after, span[data-descr]:focus::after { content: attr(data-descr); position: absolute; left: 0; top: 24px; min-width: 200px; border: 1px #aaaaaa solid; border-radius: 10px; background-color: #ffffcc; padding: 12px; color: #000000; font-size: 14px; z-index: 1; }
result specifications specification status comment css pseudo-elements level 4the definition of '::after' in that specification.
:placeholder-shown - CSS: Cascading Style Sheets
html <input placeholder="type something here!"> css input { border: 1px solid black; padding: 3px; } input:placeholder-shown { border-color: teal; color: purple; font-style: italic; }
result overflowing text when form fields are too small, placeholder text can get cropped in an undesirable way.
... html <input id="input1" placeholder="name, rank, and serial number"> <br><br> <input id="input2" placeholder="name, rank, and serial number"> css #input2:placeholder-shown { text-overflow: ellipsis; }
result customized input field the following example highlights the branch and id code fields with a custom style.
...student branch"/> </p> <p> <label for="sid">enter student id:</label> <input type="number" pattern="[0-9]{8}" title="8 digit id" id="sid" class="studentid" placeholder="8 digit id"/> </p> <input type="submit"/> </form> css input { background-color: #e8e8e8; color: black; } input.studentid:placeholder-shown { background-color: yellow; color: red; font-style: italic; }
result specifications specification status comment selectors level 4the definition of ':placeholder-shown' in that specification.
Attribute selectors - CSS: Cascading Style Sheets
"https" and end in ".org" */ a[href^="https"][href$=".org"] { color: green; } html <ul> <li><a href="#internal">internal link</a></li> <li><a href="http://example.com">example link</a></li> <li><a href="#insensitive">insensitive internal link</a></li> <li><a href="http://example.org">example org link</a></li> <li><a href="https://example.org">example https org link</a></li> </ul>
result languages css /* all divs with a `lang` attribute are bold.
...*/ /* note: you could also use hyphenated attributes without double quotes */ div[data-lang="zh-tw"] { color: purple; } html <div lang="en-us en-gb en-au en-nz">hello world!</div> <div lang="pt">olá mundo!</div> <div lang="zh-cn">世界您好!</div> <div lang="zh-tw">世界您好!</div> <div data-lang="zh-tw">世界您好!</div>
result html ordered lists the html specification requires the type attribute to be matched case-insensitively due to it primarily being used in the <input> element, trying to use attribute selectors to with the type attribute of an ordered list doesn't work without the case-sensitive modifier.
...*/ ol[type="a"] { list-style-type: lower-alpha; background: red; } ol[type="a" s] { list-style-type: lower-alpha; background: lime; } ol[type="a" s] { list-style-type: upper-alpha; background: lime; } html <ol type="a"> <li>example list</li> </ol>
result specifications specification status comment selectors level 4the definition of 'attribute selectors' in that specification.
Resizing background images with background-size - CSS: Cascading Style Sheets
html <div class="tiledbackground"> </div> css .tiledbackground { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: 150px; width: 300px; height: 300px; border: 2px solid; color: pink; }
result stretching an image you can also specify both the horizontal and vertical sizes of the image, like this: background-size: 300px 150px; the
result looks like this: scaling an image up on the other end of the spectrum, you can scale an image up in the background.
... html <div class="bgsizecontain"> <p>try resizing this element!</p> </div> css .bgsizecontain { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: contain; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; }
result cover the cover value specifies that the background image should be sized so that it is as small as possible while ensuring that both dimensions are greater than or equal to the corresponding size of the container.
... html <div class="bgsizecover"> <p>try resizing this element!</p> </div> css .bgsizecover { background-image: url(https://www.mozilla.org/media/img/logos/firefox/logo-quantum.9c5e96634f92.png); background-size: cover; width: 160px; height: 160px; border: 2px solid; color: pink; resize: both; overflow: scroll; }
result see also background-size background scaling of svg backgrounds ...
Basic Concepts of Multicol - CSS: Cascading Style Sheets
this css would give the same
result as example 1, column-count set to 3.
... .container { columns: 3; } this css would give the same
result as example 2, with column-width of 200px.
... .container { columns: 200px; } this css would give the same
result as example 3, with both column-count and column-width set.
Scaling of SVG backgrounds - CSS: Cascading Style Sheets
source image examples before diving in to look at the
results of using different kinds of source images and seeing how they look when used with background-size, it would be helpful to look at a few example source images that have different dimensions and sizing settings.
...but if there is no intrinsic ratio specified, cover/fit isn't sufficient, so the large/small constraints choose the
resulting size.
...the auto value for the height is computed using that width and the 1:1 aspect ratio to be 150px as well,
resulting in the image above.
Cubic Bezier Generator - CSS: Cascading Style Sheets
vas.width - rulers - margin); canvas.onmousedown = mousedown; canvas.onmouseup = mouseup; } else { alert('you need safari or firefox 1.5+ to see this demo.'); } } function cx(x) { return x * scaling + rulers; } function reversex(x) { return (x - rulers) / scaling; } function lx(x) { //used when drawing vertical lines to prevent subpixel blur var
result = cx(x); return math.round(
result) ==
result ?
...
result + 0.5 :
result; } function cy(y) { return (1 - y) * scaling + margin; } function reversey(y) { return (margin - y) / scaling + 1; } function ly(y) { // used when drawing horizontal lines to prevent subpixel blur var
result = cy(y); return math.round(
result) ==
result ?
...
result + 0.5 :
result; } function drawbeziercurve(x1, y1, x2, y2) { // get the canvas element using the dom var canvas = document.getelementbyid('bezier'); // make sure we don't execute when canvas isn't supported if (canvas.getcontext) { // use getcontext to use the canvas for drawing var ctx = canvas.getcontext('2d'); // clear canvas ctx.clearrect(0, 0, canvas.width, canvas.height); // draw the rulers ctx.beginpath(); ctx.strokestyle = "black"; // draw the y axis ctx.moveto(cx(0), cy(0)); ctx.lineto(cx(1), cy(0)); ctx.textalign = "right"; for (var i = 0.1; i <= 1; i = i + 0.1) { ctx.moveto(-basic_scale_size + cx(0), ly(i)); if ((i == 0.5) || (i > 0.
Using CSS custom properties (variables) - CSS: Cascading Style Sheets
margin: 10px; width: 75px; } .four { color: white; background-color: var(--main-bg-color); margin: 10px; width: 100px; } .five { background-color: var(--main-bg-color); } <div> <div class="one"></div> <div class="two">text <span class="five">- more text</span></div> <input class="three"> <textarea class="four">lorem ipsum</textarea> </div> this leads to the same
result as the previous example, yet allows for one canonical declaration of the desired property value; very useful if you want to change the value across the entire page later.
...with the following css: .two { --test: 10px; } .three { --test: 2em; } in this case, the
results of var(--test) are: for the class="two" element: 10px for the class="three" element: 2em for the class="four" element: 10px (inherited from its parent) for the class="one" element: invalid value, which is the default value of any custom property keep in mind that these are custom properties, not actual variables like you might find in other programming languages.
...
result the paragraph color will not be blue because invalid substitution is replaced by the initial value, not by the fallback.
Actual value - CSS: Cascading Style Sheets
calculating a property's actual value the user agent performs four steps to calculate a property's actual (final) value: first, the specified value is determined based on the
result of cascading, inheritance, or using the initial value.
... then, layout is calculated,
resulting in the used value.
... finally, the used value is transformed according to the limitations of the local environment,
resulting in the actual value.
background-position - CSS: Cascading Style Sheets
essentially what happens is the background image dimension is subtracted from the corresponding container dimension, and then a percentage of the
resulting value is used as the direct offset from the left (or top) edge.
...are using it in a container that is 100px wide, with background-size set to auto: 100px - 300px = -200px (container & image difference) so that with position percentages of -25%, 0%, 50%, 100%, 125%, we get these image-to-container edge offset values: -200px * -25% = 50px -200px * 0% = 0px -200px * 50% = -100px -200px * 100% = -200px -200px * 125% = -250px so with these
resultant values for our example, the left edge of the image is offset from the left edge of the container by: + 50px (putting the left image edge in the center of the 100-pixel-wide container) 0px (left image edge coincident with the left container edge) -100px (left image edge 100px to the left of the container, in this example that means the middle 100px image area is centered in the contain...
...*/ .examplethree { background-image: url("https://mdn.mozillademos.org/files/11987/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-position: 0px 0px, right 3em bottom 2em; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-position' in that specification.
calc() - CSS: Cascading Style Sheets
syntax /* property: calc(expression) */ width: calc(100% - 80px); the calc() function takes a single expression as its parameter, with the expression's
result used as the value.
... division by zero
results in an error being generated by the html parser.
...this includes any division, even if it
results in an integer.
<color> - CSS: Cascading Style Sheets
</div>
result rgb colors the rgb color model defines a given color according to its red, green, and blue components.
...the wcag 2.0 recommendation strongly advises against using color as the only means of conveying a specific message, action, or
result.
... = "rgb(255, 255, 255)"; image.style.color = stringtotest; return image.style.color !== "rgb(255, 255, 255)"; } inputelem.addeventlistener('change', () => { if(validtextcolor(inputelem.value)) { divelem.style.backgroundcolor = inputelem.value; divelem.textcontent = ''; } else { divelem.style.backgroundcolor = 'white'; divelem.textcontent = 'invalid color value'; } });
result rgb syntax variations this example shows the many ways in which a single color can be created with the various rgb color syntaxes.
cross-fade() - CSS: Cascading Style Sheets
if the
result is greater than 0%, the
result is then divided equally between all images with omitted percentages.
...the
result, if greater than 0, is then divided equally between all images with omitted percentages.
...e { width: 300px; height: 300px; background-image: -webkit-cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); background-image: cross-fade( url('https://mdn.mozillademos.org/files/8543/br.png'), url('https://mdn.mozillademos.org/files/8545/tr.png'), 75%); }
result specifications specification status comment css images module level 4the definition of 'cross-fade()' in that specification.
font-size - CSS: Cascading Style Sheets
the
results may vary slightly across browsers, as they may use different algorithms to achieve a similar effect.
...take the following html and css: html { font-size: 62.5%; /* font-size 1em = 10px on default browser settings */ } span { font-size: 1.6em; } <div> <span>outer <span>inner</span> outer</span> </div> the
result is: assuming that the browser's default font-size is 16px, the words “outer” would be rendered at 16px, but the word “inner” would be rendered at 25.6px.
... | xxx-large<relative-size> = larger | smaller<length-percentage> = <length> | <percentage> examples setting font sizes css .small { font-size: xx-small; } .larger { font-size: larger; } .point { font-size: 24pt; } .percent { font-size: 200%; } html <h1 class="small">small h1</h1> <h1 class="larger">larger h1</h1> <h1 class="point">24 point h1</h1> <h1 class="percent">200% h1</h1>
result specifications specification status comment css fonts module level 4the definition of 'font-size' in that specification.
outline-style - CSS: Cascading Style Sheets
html <div> <p class="auto">outline demo</p> </div> css .auto { outline-style: auto; /* same
result as "outline: auto" */ } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; }
result setting outline style to dashed and dotted html <div> <div class="dotted"> <p class="dashed">outline demo</p> </div> </div> css .dotted { outline-style: dotted; /* same
result as "outline: dotted" */ } .dashed { outline-style: dashed; } /* to make the demo clearer */ * {...
... outline-width: 10px; padding: 15px; }
result setting outline style to solid and double html <div> <div class="solid"> <p class="double">outline demo</p> </div> </div> css .solid { outline-style: solid; } .double { outline-style: double; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; }
result setting outline style to groove and ridge html <div> <div class="groove"> <p class="ridge">outline demo</p> </div> </div> css .groove { outline-style: groove; } .ridge { outline-style: ridge; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; }
result setting outline style to inset and outset html <div> <div class="inset"> <p class="outset">outline demo</p> </div> </div> css .inset { outline-style:...
... inset; } .outset { outline-style: outset; } /* to make the demo clearer */ * { outline-width: 10px; padding: 15px; }
result specifications specification status comment css basic user interface module level 3the definition of 'outline-style' in that specification.
position - CSS: Cascading Style Sheets
new line if not, much like this image will do: <img src="https://udn.realityripple.com/samples/9e/6ff6af6fd4.jpg"></p> css body { width: 500px; margin: 0 auto; } p { background: aqua; border: 3px solid blue; padding: 10px; margin: 10px; } span { background: red; border: 1px solid black; } .positioned { position: absolute; background: yellow; top: 30px; left: 30px; }
result fixed positioning fixed positioning is similar to absolute positioning, with the exception that the element's containing block is the initial containing block established by the viewport, unless any ancestor has transform, perspective, or filter property set to something other than none (see css transforms spec), which then causes that ancestor to take the place of the elements containing blo...
... </p> <div class="box" id="one">one</div> </div> css .box { width: 100px; height: 100px; background: red; color: white; } #one { position: fixed; top: 80px; left: 10px; background: blue; } .outer { width: 500px; height: 300px; overflow: scroll; padding-left: 150px; }
result sticky positioning sticky positioning can be thought of as a hybrid of relative and fixed positioning.
...order-bottom: 1px solid #989ea4; border-top: 1px solid #717d85; color: #fff; font: bold 18px/21px helvetica, arial, sans-serif; margin: 0; padding: 2px 0 0 12px; position: -webkit-sticky; position: sticky; top: -1px; } dd { font: bold 20px/45px helvetica, arial, sans-serif; margin: 0; padding: 0 0 0 12px; white-space: nowrap; } dd + dd { border-top: 1px solid #ccc; }
result specifications specification status comment css level 2 (revision 1)the definition of 'position' in that specification.
repeat() - CSS: Cascading Style Sheets
the user-agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would
result in honoring the percentage.
...(this can
result in all tracks being collapsed, if they’re all empty.) a collapsed track is treated as having a single fixed track sizing function of 0px, and the gutters on either side of it collapse.
... </div> </div> css #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200px; width: 100%; background-color: #8cffa0; padding: 10px; } #container > div { background-color: #8ca0ff; padding: 5px; }
result specifications specification status comment css grid layoutthe definition of 'repeat()' in that specification.
text-combine-upright - CSS: Cascading Style Sheets
the
resulting composition is treated as a single upright glyph for layout and decoration.
... html <p lang="ja" class="exampletext">平成20年4月16日に</p> css .exampletext { writing-mode: vertical-lr; text-combine-upright: digits 2; font: 36px serif; }
results screenshotlive sample all the all value requires markup around every piece of horizontal text, but it is currently supported by more browsers than the digits value.
... html <p lang="zh-hant">民國<span class="num">105</span >年<span class="num">4</span >月<span class="num">29</span>日</p> css html { writing-mode: vertical-rl; font: 24px serif } .num { text-combine-upright: all }
results screenshotlive sample specifications specification status comment css writing modes level 4the definition of 'text-combine-upright' in that specification.
matrix3d() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...otatey(180deg) translatez(50px); } .right { background: rgba(210,0,0,.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0,0,210,.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(210,210,0,.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); }
result matrix translation and scale example another transform3d() example, which implements an animated combined translate and scale.
...100px translates every z point by 0 scales down by 10% */ transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, -50,-100,0,1.1 ); } 50% { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,0.9 ); } to { transform: matrix3d( 1,0,0,0, 0,1,0,0, 0,0,1,0, 50,100,0,1.1 ) } }
result specifications specification status comment css transforms level 2the definition of 'matrix3d()' in that specification.
rotate() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...(a)0001 cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00sin(a)cos(a)0000100001 [cos(a) sin(a) -sin(a) cos(a) 0 0] examples basic example html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate(45deg); /* equal to rotatez(45deg) */ background-color: pink; }
result combining rotation with another transformation if you want apply multiple transformations to an element, be careful about the order in which you specify your transformations.
...sition: absolute; left: 40px; top: 40px; width: 100px; height: 100px; background-color: lightgray; } .rotate { background-color: transparent; outline: 2px dashed; transform: rotate(45deg); } .rotate-translate { background-color: pink; transform: rotate(45deg) translatex(180px); } .translate-rotate { background-color: gold; transform: translatex(180px) rotate(45deg); }
result specifications specification status comment css transforms level 1the definition of 'rotate()' in that specification.
rotate3d() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...in other words, the order in which the rotations are applied impacts the
result.
...n(a) + xz(1-cos(a))-xsin(a)+yz(1-cos(a))1+(1-cos(a))(z2-1)t0001 homogeneous coordinates on ℝℙ3 examples rotating on the y-axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(0, 1, 0, 60deg); background-color: pink; }
result rotating on a custom axis html <div>normal</div> <div class="rotated">rotated</div> css body { perspective: 800px; } div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotate3d(1, 2, -1, 192deg); background-color: pink; }
result specifications specification status comment css transforms level 2the definition o...
rotateX() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...in other words, the order in which the rotations are applied impacts the
result.
... 1000cos(a)-sin(a)0sin(a)cos(a) 10000cos(a)-sin(a)00sin(a)cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatex(45deg); background-color: pink; }
result specifications specification status comment css transforms level 2the definition of 'rotatex()' in that specification.
rotateY() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...in other words, the order in which the rotations are applied impacts the
result.
... cos(a)0sin(a)010-sin(a)0cos(a) cos(a)0sin(a)00100-sin(a)0cos(a)00001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatey(60deg); background-color: pink; }
result specifications specification status comment css transforms level 2the definition of 'rotatey()' in that specification.
rotateZ() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...in other words, the order in which the rotations are applied impacts the
result.
... cos(a)-sin(a)0sin(a)cos(a)0001 cos(a)-sin(a)00 sin(a)cos(a)00 0010 0001 examples html <div>normal</div> <div class="rotated">rotated</div> css div { width: 80px; height: 80px; background-color: skyblue; } .rotated { transform: rotatez(45deg); background-color: pink; }
result specifications specification status comment css transforms level 2the definition of 'rotatez()' in that specification.
scale3d() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...if it is negative, the
result a point reflection in that dimension.
... sx000sy000sz sx0000sy0000sz00001 examples without changing the origin html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); background-color: pink; }
result translating the origin of the transformation html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: perspective(500px) scale3d(2, 0.7, 0.2) translatez(100px); transform-origin: left; background-color: pink; }
result specifications specification status comment ...
skew() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...if not defined, its default value is 0,
resulting in a purely horizontal skewing.
...ay)1 1tan(ax)0tan(ay)10001 1tan(ax)0tan(ay)10001 1tan(ax)00tan(ay)10000100001 [1 tan(ay) tan(ax) 1 0 0] examples using a single x-angle html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg); /* equal to skewx(10deg) */ background-color: pink; }
result using two angles html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skew(10deg, 10deg); background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'skew()' in that specification.
white-space - CSS: Cascading Style Sheets
lements pre { word-wrap: break-word; /* ie 5.5-7 */ white-space: pre-wrap; /* modern browsers */ } in action html <div id="css-code" class="box"> p { white-space: <select> <option>normal</option> <option>nowrap</option> <option>pre</option> <option>pre-wrap</option> <option>pre-line</option> <option>break-spaces</option> </select> } </div> <div id="
results" class="box"> <p> lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
... excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> </div> .box { width: 300px; padding: 16px; border-radius: 10px; } #css-code { background-color: rgb(220, 220, 220); font-size: 16px; font-family: monospace; } #css-code select { font-family: inherit; } #
results { background-color: rgb(230, 230, 230); overflow-x: scroll; height: 400px; white-space: normal; font-size: 14px; } var select = document.queryselector("#css-code select"); var
results = document.queryselector("#
results p"); select.addeventlistener("change", function(e) {
results.setattribute("style", "white-space: "+e.target.value); }) <p> lorem ipsum dolor sit amet, consectetur ...
...excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
result specifications specification status comment css text module level 3the definition of 'white-space' in that specification.
Event reference
nomatch speechrecognitionevent web speech api the speech recognition service returns a final
result with no significant recognition.
...
result speechrecognitionevent web speech api the speech recognition service returns a
result — a word or phrase has been positively recognized and this has been communicated back to the app.
... mozbrowseropentab firefox os browser api-specific sent when a new tab is opened within a browser <iframe> as a
result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) mozbrowseropenwindow firefox os browser api-specific sent when window.open() is called within a browser iframe.
<h1>–<h6>: The HTML Section Heading elements - HTML: Hypertext Markup Language
using more than one will not
result in an error, but using only one is seen as a best practice.
... <h1>heading level 1</h1> <h2>heading level 2</h2> <h3>heading level 3</h3> <h4>heading level 4</h4> <h5>heading level 5</h5> <h6>heading level 6</h6> here is the
result of this code: example page the following code shows a few headings with some content under them.
... <h1>heading elements</h1> <h2>summary</h2> <p>some text here...</p> <h2>examples</h2> <h3>example 1</h3> <p>some text here...</p> <h3>example 2</h3> <p>some text here...</p> <h2>see also</h2> <p>some text here...</p> here is the
result of this code: accessibility concerns navigation a common navigation technique for users of screen reading software is jumping from heading to heading to quickly determine the content of the page.
<bdi>: The Bidirectional Isolate element - HTML: Hypertext Markup Language
the
result will be garbled: 1 - embedded-textst place if you know the directionality of embedded-text in advance, you can fix this problem by wrapping embedded-text in a <span> with the dir attribute set to the known directionality.
...when the names only contain ltr text the
results look fine: <ul> <li><span class="name">henrietta boffin</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } no <bdi> with rtl text this example lists the winners of a competition using...
...in this case the "- 1", which consists of characters with neutral or weak directionality, will adopt the directionality of the rtl text, and the
result will be garbled: <ul> <li><span class="name">اَلأَعْشَى</span> - 1st place</li> <li><span class="name">jerry cruncher</span> - 2nd place</li> </ul> body { border: 1px solid #3f87a6; max-width: calc(100% - 40px - 6px); padding: 20px; width: calc(100% - 40px - 6px); border-width: 1px 1px 1px 5px; } using <bdi> with ltr and rtl text this example lists the winners of a competition using <bdi> elements.
<big>: The Bigger Text element - HTML: Hypertext Markup Language
examples here we see examples showing the use of <big> followed by an example showing how to accomplish the same
results using modern css syntax instead.
...<big>this whole sentence is in bigger letters.</big> </p>
result using css font-size this example uses the css font-size property to increase the font size by one level.
...<span class="bigger">this whole sentence is in bigger letters.</span> </p>
result dom interface this element implements the htmlelement interface.
<dfn>: The Definition element - HTML: Hypertext Markup Language
result this looks like this rendered in your browser: links to definitions to add links to the definitions, you create the link the same way you always do, with the <a> element.
...
result the
resulting content looks like this: using abbreviations and definitions together in some cases, you may wish to use an abbreviation for a term when defining it.
...
result the output of the above code looks like this: specifications specification status comment html living standardthe definition of '<dfn>' in that specification.
<em>: The Emphasis element - HTML: Hypertext Markup Language
<em> new developers are often confused at seeing multiple elements that produce similar
results.
... by default, the visual
result is the same.
...</p>
result specifications specification status comment html living standardthe definition of '<em>' in that specification.
<input type="datetime-local"> - HTML: Hypertext Markup Language
some browsers may resort to a text-only input element that validates that the
results are legitimate date/time values before letting them be delivered to the server, as well, but you shouldn't rely on this behavior since you can't easily predict it.
...in the following example we are setting a minimum datetime of 2017-06-01t08:30 and a maximum datetime of 2017-06-30t16:30: <form> <label for="party">enter a date and time for your party booking:</label> <input id="party" type="datetime-local" name="partydate" min="2017-06-01t08:30" max="2017-06-30t16:30"> </form> the
result here is that: only days in june 2017 can be selected — only the "days" part of the date value will be editable, and dates outside june can't be scrolled to in the datepicker widget.
...as a
result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.
<input type="password"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be relied upon to be so; the
resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
... html <label for="userpassword">password: </label> <input id="userpassword" type="password" size="12"> <button id="selectall">select all</button> javascript document.getelementbyid("selectall").onclick = function() { document.getelementbyid("userpassword").select(); }
result you can also use selectionstart and selectionend to get (or set) what range of characters in the control are currently selected, and selectiondirection to know which direction selection occurred in (or will be extended in, depending on your platform; see its documentation for an explanation).
... var ssn = document.getelementbyid("ssn"); var current = document.getelementbyid("current"); ssn.oninput = function(event) { current.innerhtml = ssn.value; }
result specifications specification status comment html living standardthe definition of '<input type="password">' in that specification.
<input type="radio"> - HTML: Hypertext Markup Language
the
resulting html looks like this: <form> <p>please select your preferred contact method:</p> <div> <input type="radio" id="contactchoice1" name="contact" value="email"> <label for="contactchoice1">email</label> <input type="radio" id="contactchoice2" name="contact" value="phone"> <label for="contactchoice2">phone</label> <input type="radio" id="contactchoice3" nam...
...in this scenario, if the user clicked on the "phone" option and submitted the form, the
resulting form data would be contact=on, which isn't helpful.
...form = document.queryselector("form"); var log = document.queryselector("#log"); form.addeventlistener("submit", function(event) { var data = new formdata(form); var output = ""; for (const entry of data) { output = output + entry[0] + "=" + entry[1] + "\r"; }; log.innertext = output; event.preventdefault(); }, false); try this example out and see how there's never more than one
result for the contact group.
<input type="range"> - HTML: Hypertext Markup Language
similarly, an attempt to set the value higher than the maximum
results in it being set to the maximum.
... standards according to the specification, making it vertical requires adding css to change the dimensions of the control so that it's taller than it is wide, like this: css #volume { height: 150px; width: 50px; } html <input type="range" id="volume" min="0" max="11" value="7" step="1">
result screenshotlive sample unfortunately, no major browsers currently support vertical range controls directly.
...the
result: a range input which is rotated so the maximum value is at the top and the minimum value is at the bottom.
<input type="url"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be relied upon to be so; the
resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
...if your title is something like "url", the
result would be the message "the entered text doesn't match the required pattern.
...by doing that, the
resulting full error message might be something like "the entered text doesn't match the required pattern.
<kbd>: The Keyboard Input element - HTML: Hypertext Markup Language
result the output looks like this without a style sheet applied: with custom styles we can make more sense of this by adding some css: css we add a new style for <kbd> elements, key, which we can apply when rendering keyboard keys: kbd.key { border-radius: 3px; padding: 1px 2px 0; border: 1px solid black; } html then we update the html to use this class on the keys in the output to be pr...
...esented: <p>you can also create a new document by pressing <kbd><kbd class="key">ctrl</kbd>+<kbd class="key">n</kbd></kbd>.</p>
result the
result is just what we want!
...
result specifications specification status comment html living standardthe definition of '<kbd>' in that specification.
<mark>: The Mark Text element - HTML: Hypertext Markup Language
</blockquote> the
resulting output looks like this: identifying context-sensitive passages this example demonstrates using <mark> to mark search
results within a passage.
...ar has been destroyed, <mark class="match">imperial</mark> troops have driven the rebel forces from their hidden base and pursued them across the galaxy.</p> <p>evading the dreaded <mark class="match">imperial</mark> starfleet, a group of freedom fighters led by luke skywalker has established a new secret base on the remote ice world of hoth.</p> to help distinguish the use of <mark> for search
results from other potential usage, this example applies the custom class "match" to each match.
... the
results look like this: accessibility concerns the presence of the mark element is not announced by most screen reading technology in its default configuration.
<menu> - HTML: Hypertext Markup Language
s context menu html <!-- a <div> element with a context menu --> <div contextmenu="popup-menu"> right-click to see the adjusted context menu </div> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu> css div { width: 300px; height: 80px; background-color: lightgreen; }
result menu button menu buttons haven't been implemented in any known browsers yet.
...--> <button type="menu" menu="popup-menu"> dropdown </button> <menu type="context" id="popup-menu"> <menuitem>action</menuitem> <menuitem>another action</menuitem> <hr/> <menuitem>separated action</menuitem> </menu>
result toolbar toolbar menus haven't been implemented in any known browsers yet.
...="new..." onclick="newfile()"> <menuitem label="save..." onclick="savefile()"> </menu> </li> <li> <button type="menu" menu="edit-menu">edit</button> <menu type="context" id="edit-menu"> <menuitem label="cut..." onclick="cutedit()"> <menuitem label="copy..." onclick="copyedit()"> <menuitem label="paste..." onclick="pasteedit()"> </menu> </li> </menu>
result specifications specification status comment html living standardthe definition of '<menu>' in that specification.
HTML elements reference - HTML: Hypertext Markup Language
<output> the html output element (<output>) is a container element into which a site or app can inject the
results of a calculation or the outcome of a user action.
...it is expected that the <keygen> element will be used in an html form along with other information needed to construct a certificate request, and that the
result of the process will be a signed certificate.
... <nobr> the non-standard, obsolete html <nobr> element prevents the text it contains from automatically wrapping across multiple lines, potentially
resulting in the user having to scroll horizontally to see the entire width of the text.
Microdata - HTML: Hypertext Markup Language
search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant
results to users.
...rely on the schema.org vocabulary to improve search
results.
... itemprop applicationcategory gameapplication (http://schema.org/gameapplication) itemscope itemprop[itemtype] aggregaterating [aggregaterating] itemprop ratingvalue 4.6 itemprop ratingcount 8864 itemscope itemprop[itemtype] offers [offer] itemprop price 1.00 itemprop pricecurrency usd
result note: a handy tool for extracting microdata structures from html is google's structured data testing tool.
Cross-Origin Resource Sharing (CORS) - HTTP
cors failures
result in errors, but for security reasons, specifics about the error are not available to javascript.
... access-control-max-age the access-control-max-age header indicates how long the
results of a preflight request can be cached.
... access-control-max-age: <delta-seconds> the delta-seconds parameter indicates the number of seconds the
results can be cached.
HTTP caching - HTTP
common forms of caching entries are: successful
results of a retrieval request: a 200 (ok) response to a get request containing a resource like html documents, images or files.
... error responses: a 404 (not found)
result page.
... incomplete
results: a 206 (partial content) response.
HTTP conditional requests - HTTP
http has a concept of conditional requests, where the
result, and even the success of a request, can be changed by comparing the affected resources with the value of a validator.
...these headers define a precondition, and the
result of the request will be different if the precondition is matched or not.
...we want predictable
results, and expect that the clients are notified when their changes are rejected.
Access-Control-Max-Age - HTTP
the access-control-max-age response header indicates how long the
results of a preflight request (that is the information contained in the access-control-allow-methods and access-control-allow-headers headers) can be cached.
... header type response header forbidden header name no syntax access-control-max-age: <delta-seconds> directives <delta-seconds> maximum number of seconds the
results can be cached.
... examples cache
results of a preflight request for 10 minutes: access-control-max-age: 600 specifications specification status comment fetchthe definition of 'access-control-max-age' in that specification.
Protocol upgrade mechanism - HTTP
using more than one sec-websocket-extension header in a request is permitted; the
result is the same as if you included all of the listed extensions in one such header.
...you can use this more than once in the header, as well; the
result is the same as if you used a comma-delineated list of subprotocol identifiers in a single header.
... sec-websocket-accept: hash hash if a sec-websocket-key header was provided, the value of this header is computed by taking the value of the key, concatenating the string "258eafa5-e914-47da-95ca-c5ab0dc85b11" to it, taking the sha-1 hash of that concatenated string,
resulting in a 20-byte value.
HTTP response status codes - HTTP
put or post: the resource describing the
result of the action is transmitted in the message body.
... trace: the message body contains the request message as received by the server 201 created the request has succeeded and a new resource has been created as a
result.
... 226 im used (http delta encoding) the server has fulfilled a get request for the resource, and the response is a representation of the
result of one or more instance-manipulations applied to the current instance.
Iterators and generators - JavaScript
function makerangeiterator(start = 0, end = infinity, step = 1) { let nextindex = start; let iterationcount = 0; const rangeiterator = { next: function() { let
result; if (nextindex < end) {
result = { value: nextindex, done: false } nextindex += step; iterationcount++; return
result; } return { value: iterationcount, done: true } } }; return rangeiterator; } using the iterator then looks like this: const it = makerangeiterator(1, 10, 2); let
result ...
...= it.next(); while (!
result.done) { console.log(
result.value); // 1 3 5 7 9
result = it.next(); } console.log("iterated over sequence of size: ",
result.value); // [5 numbers returned, that took interval in between: 0 to 10] note: it is not possible to know reflectively whether a particular object is an iterator.
... if the exception is not caught from within the generator, it will propagate up through the call to throw(), and subsequent calls to next() will
result in the done property being true.
Regular expressions - JavaScript
results of regular expression execution.
... var re = /\w+\s/g; var str = 'fee fi fo fum'; var myarray = str.match(re); console.log(myarray); // ["fee ", "fi ", "fo "] you could replace the line: var re = /\w+\s/g; with: var re = new regexp('\\w+\\s', 'g'); and get the same
result.
...phone"> <button onclick="testinfo(document.getelementbyid('phone'));">check</button> </form> javascript var re = /(?:\d{3}|\(\d{3}\))([-\/\.])\d{3}\1\d{4}/; function testinfo(phoneinput) { var ok = re.exec(phoneinput.value); if (!ok) { console.error(phoneinput.value + ' isn\'t a phone number with area code!'); } else { console.log('thanks, your phone number is ' + ok[0]);} }
result tools regexr an online tool to learn, build, & test regular expressions.
Functions - JavaScript
attempting to use it outside the function's body
results in an error (or undefined if the function name was previously declared via a var statement).
...for example, the following would
result in an error: var foo = new function("alert(anonymous);"); foo(); unlike functions defined by function expressions or by the function constructor, a function defined by a function declaration can be used before the function declaration itself.
... var
result;
result = padzeros(42,4); // returns "0042"
result = padzeros(42,2); // returns "42"
result = padzeros(5,4); // returns "0005" determining whether a function exists you can determine whether a function exists by using the typeof operator.
Array.prototype.find() - JavaScript
let test
result be toboolean(?
...if test
result is true, return kvalue.
...tity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; function ischerries(fruit) { return fruit.name === 'cherries'; } console.log(inventory.find(ischerries)); // { name: 'cherries', quantity: 5 } using arrow function and destructuring const inventory = [ {name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5} ]; const
result = inventory.find( ({ name }) => name === 'cherries' ); console.log(
result) // { name: 'cherries', quantity: 5 } find a prime number in an array the following example finds an element in the array that is a prime number (or returns undefined if there is no prime number): function isprime(element, index, array) { let start = 2; while (start <= math.sqrt(element)) { if (element % start++...
Array.from() - JavaScript
more clearly, array.from(obj, mapfn, thisarg) has the same
result as array.from(obj).map(mapfn, thisarg), except that it does not create an intermediate array.
...as a
result, static methods such as array.from() are "inherited" by subclasses of array, and create new instances of the subclass, not array.
...let a be the
result of calling the [[construct]] internal method // of c with an argument list containing the single item len.
Date.parse() - JavaScript
(other formats may be used, but
results are implementation-dependent.) return value a number representing the milliseconds elapsed since january 1, 1970, 00:00:00 utc and the date obtained by parsing the given string representation of a date.
... however, invalid values in date strings not recognized as simplified iso format as defined by ecma-262 may or may not
result in nan, depending on the browser and values provided, e.g.: // non-iso string with invalid date values new date('23/25/2014'); will be treated as a local date of 25 november, 2015 in firefox 30 and an invalid date in safari 7.
...this means that two date strings that appear equivalent may
result in two different values depending on the format of the string that is being converted.
Function.prototype.bind() - JavaScript
calling the bound function generally
results in the execution of its wrapped function.
... function list() { return array.prototype.slice.call(arguments); } function addarguments(arg1, arg2) { return arg1 + arg2 } const list1 = list(1, 2, 3); // [1, 2, 3] const
result1 = addarguments(1, 2); // 3 // create a function with a preset leading argument const leadingthirtysevenlist = list.bind(null, 37); // create a function with a preset first argument.
... const addthirtyseven = addarguments.bind(null, 37); const list2 = leadingthirtysevenlist(); // [37] const list3 = leadingthirtysevenlist(1, 2, 3); // [37, 1, 2, 3] const
result2 = addthirtyseven(5); // 37 + 5 = 42 const
result3 = addthirtyseven(5, 10); // 37 + 5 = 42 // (the second argument is ignored) with settimeout() by default within window.settimeout(), the this keyword will be set to the window (or global) object.
Intl.Collator - JavaScript
examples using collator the following example demonstrates the different potential
results for a string occurring before, after, or at the same level as another: console.log(new intl.collator().compare('a', 'c')); // → a negative value console.log(new intl.collator().compare('c', 'a')); // → a positive value console.log(new intl.collator().compare('a', 'a')); // → 0 note that the
results shown in the code above can vary between browsers and browser versions.
... using locales the
results provided by collator.prototype.compare() vary between languages.
...ge used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: // in german, ä sorts with a console.log(new intl.collator('de').compare('ä', 'z')); // → a negative value // in swedish, ä sorts after z console.log(new intl.collator('sv').compare('ä', 'z')); // → a positive value using options the
results provided by collator.prototype.compare() can be customized using the options argument: // in german, ä has a as the base letter console.log(new intl.collator('de', { sensitivity: 'base' }).compare('ä', 'a')); // → 0 // in swedish, ä and a are separate base letters console.log(new intl.collator('sv', { sensitivity: 'base' }).compare('ä', 'a')); // → a positive value specifications ...
JSON.parse() - JavaScript
an optional reviver function can be provided to perform a transformation on the
resulting object before it is returned.
... var j; function walk(holder, key) { // the walk method is used to recursively walk the
resulting structure so // that modifications can be made.
... if the reviver only transforms some values and not others, be certain to return all untransformed values as-is, otherwise, they will be deleted from the
resulting object.
Math.min() - JavaScript
the
result is infinity if no parameters are provided.
... if no arguments are given, the
result is infinity.
... if at least one of arguments cannot be converted to a number, the
result is nan.
Math - JavaScript
this means that different browsers can give a different
result.
... even the same javascript engine on a different os or architecture can give different
results!
... math.imul(x, y) returns the
result of the 32-bit integer multiplication of x and y.
Promise.all() - JavaScript
the promise.all() method takes an iterable of promises as an input, and returns a single promise that resolves to an array of the
results of the input promises.
... description this method can be useful for aggregating the
results of multiple promises.
...consequently, it will always return the final
result of every promise and function from the input iterable.
handler.ownKeys() - JavaScript
interceptions this trap can intercept these operations: object.getownpropertynames() object.getownpropertysymbols() object.keys() reflect.ownkeys() invariants if the following invariants are violated, the proxy will throw a typeerror: the
result of ownkeys() must be an array.
... the
result list must contain the keys of all non-configurable own properties of the target object.
... if the target object is not extensible, then the
result list must contain all the keys of the own properties of the target object and no other values.
RegExp.prototype[@@matchAll]() - JavaScript
for example, the following two examples return same
result.
... let re = /[0-9]+/g; let str = '2016-01-02'; let
result = re[symbol.matchall](str); console.log(array.from(
result, x => x[0])); // ["2016", "01", "02"] using @@matchall in subclasses subclasses of regexp can override the [@@matchall]() method to modify the default behavior.
... for example, to return an array instead of an iterator: class myregexp extends regexp { [symbol.matchall](str) { const
result = regexp.prototype[symbol.matchall].call(this, str); if (!
result) { return null; } else { return array.from(
result); } } } const re = new myregexp('([0-9]+)-([0-9]+)-([0-9]+)', 'g'); const str = '2016-01-02|2019-03-07'; const
result = str.matchall(re); console.log(
result[0]); // [ "2016-01-02", "2016", "01", "02" ] console.log(
result[1]); // [ "2019-03-07", "2019", "03", "07" ] specifications specification ecmascript (ecma-262)the definition of 'regexp.prototype[@@matchall]' in that specification.
RegExp.prototype[@@replace]() - JavaScript
the [@@replace]() method replaces some or all matches of a this pattern in a string by a replacement, and returns the
result of the replacement as a new string.
... for example, following two examples return same
result.
... var
result = str; for (var i = 0; i < this.count; i++) {
result = regexp.prototype[symbol.replace].call(this,
result, replacement); } return
result; } } var re = new myregexp('\\d', '', 3); var str = '01234567'; var newstr = str.replace(re, '#'); // string.prototype.replace calls re[@@replace].
RegExp.prototype.exec() - JavaScript
returns a
result array, or null.
... description consider the following example: // match "quick brown" followed by "jumps", ignoring characters in between // remember "brown" and "jumps" // ignore case let re = /quick\s(brown).+?(jumps)/ig; let
result = re.exec('the quick brown fox jumps over the lazy dog'); the following table shows the
results for this script: object property/index description example
result [0] the full string of characters matched "quick brown fox jumps" [1], ...[n] the parenthesized substring matches, if any.
...
result[1] === "brown"
result[2] === "jumps" index the 0-based index of the match in the string.
String.prototype.localeCompare() - JavaScript
negative and positive integer
results vary between browsers (as well as between browser versions) because the w3c specification only mandates negative and positive values.
... to check whether an implementation supports them, use the "i" argument (a requirement that illegal language tags are rejected) and look for a rangeerror exception: function localecomparesupportslocales() { try { 'foo'.localecompare('bar', 'i'); } catch (e) { return e.name === 'rangeerror'; } return false; } using locales the
results provided by localecompare() vary between languages.
...r to get the sort order of the language used in the user interface of your application, make sure to specify that language (and possibly some fallback languages) using the locales argument: console.log('ä'.localecompare('z', 'de')); // a negative value: in german, ä sorts before z console.log('ä'.localecompare('z', 'sv')); // a positive value: in swedish, ä sorts after z using options the
results provided by localecompare() can be customized using the options argument: // in german, ä has a as the base letter console.log('ä'.localecompare('a', 'de', { sensitivity: 'base' })); // 0 // in swedish, ä and a are separate base letters console.log('ä'.localecompare('a', 'sv', { sensitivity: 'base' })); // a positive value numeric sorting // by default, "2" > "10" console.log("2".locale...
String.prototype.replace() - JavaScript
the function's
result (return value) will be used as the replacement string.
... because we want to further transform the
result of the match before the final substitution is made, we must use a function.
... let newstring = propertyname.replace(/[a-z]/g, '-' + '$&'.tolowercase()); // won't work this is because '$&'.tolowercase() would first be evaluated as a string literal (
resulting in the same '$&') before using the characters as a pattern.
String.prototype.toLocaleUpperCase() - JavaScript
in most cases, this will produce the same
result as touppercase(), but for some locales, such as turkish, whose case mappings do not follow the default case mappings in unicode, there may be a different
result.
... also notice that conversion is not necessarily a 1:1 character mapping, as some characters might
result in two (or even more) characters when transformed to upper-case.
... therefore the length of the
result string can differ from the input length.
String - JavaScript
in javascript, you just use the less-than and greater-than operators: let a = 'a' let b = 'b' if (a < b) { // true console.log(a + ' is less than ' + b) } else if (a > b) { console.log(a + ' is greater than ' + b) } else { console.log(a + ' and ' + b + ' are equal.') } a similar
result can be achieved using the localecompare() method inherited by string instances.
... let s_prim = 'foo' let s_obj = new string(s_prim) console.log(typeof s_prim) // logs "string" console.log(typeof s_obj) // logs "object" string primitives and string objects also give different
results when using eval().
... that form looks like this: let longstring = "this is a very long string which needs \ to wrap across multiple lines because \ otherwise my code is unreadable." both of the above methods
result in identical strings.
WebAssembly.instantiate() - JavaScript
syntax primary overload — taking wasm binary code promise<
resultobject> webassembly.instantiate(buffersource, importobject); parameters buffersource a typed array or arraybuffer containing the binary code of the .wasm module you want to compile.
... return value a promise that resolves to a
resultobject which contains two fields: module: a webassembly.module object representing the compiled webassembly module.
... var importobject = { imports: { imported_func: function(arg) { console.log(arg); } } }; fetch('simple.wasm').then(response => response.arraybuffer() ).then(bytes => webassembly.instantiate(bytes, importobject) ).then(
result =>
result.instance.exports.exported_func() ); note: you can also find this example at index.html on github (view it live also).
Operator precedence - JavaScript
assignment operators are right-associative, so you can write: a = b = 5; // same as writing a = (b = 5); with the expected
result that a and b get the value 5.
...thus, doing (2 ** 3) ** 2 changes the order and
results in the 64 seen in the table above.
...for example, 2 ** 3 / 3 ** 2
results in 0.8888888888888888 because it is the same as (2 ** 3) / (3 ** 2).
Optional chaining (?.) - JavaScript
this
results in shorter and simpler expressions when accessing chained properties when the possibility exists that a reference may be missing.
... using optional chaining with function calls causes the expression to automatically return undefined instead of throwing an exception if the method isn't found: let
result = someinterface.custommethod?.(); note: if there is a property with such a name and which is not a function, using ?.
...the
result is therefore undefined.
Unsigned right shift (>>>) - JavaScript
the sign bit becomes 0, so the
result is always non-negative.
...the sign bit becomes 0, so the
result is always non-negative.
... for non-negative numbers, zero-fill right shift and sign-propagating right shift yield the same
result.
typeof - JavaScript
type
result undefined "undefined" null "object" (see below) boolean "boolean" number "number" bigint (new in ecmascript 2020) "bigint" string "string" symbol (new in ecmascript 2015) "symbol" function object (implements [[call]] in ecma-262 terms) "function" any other object "object" note: ...
...== 'undefined'; typeof declaredbutundefinedvariable === 'undefined'; typeof undeclaredvariable === 'undefined'; // objects typeof {a: 1} === 'object'; // use array.isarray or object.prototype.tostring.call // to differentiate regular objects from arrays typeof [1, 2, 4] === 'object'; typeof new date() === 'object'; typeof /regex/ === 'object'; // see regular expressions section for historical
results // the following are confusing, dangerous, and wasteful.
...it would have
resulted in typeof null === 'null'.
let - JavaScript
accessing the variable before the initialization
results in a referenceerror.
...defined console.log(foo); // referenceerror var bar = 1; let foo = 2; } the temporal dead zone and typeof unlike with simply undeclared variables and variables that hold a value of undefined, using the typeof operator to check for the type of a variable in that variable's temporal dead zone will throw a referenceerror: // prints out 'undefined' console.log(typeof undeclaredvariable); //
results in a 'referenceerror' console.log(typeof i); let i = 10; another example of temporal dead zone combined with lexical scoping due to lexical scoping, the identifier foo inside the expression (foo + 55) evaluates to the if block's foo, and not the overlying variable foo with the value of 33.
...this
results in an implicit re-declaration of the variable.
switch - JavaScript
syntax switch (expression) { case value1: //statements executed when the //
result of expression matches value1 [break;] case value2: //statements executed when the //
result of expression matches value2 [break;] ...
... case valuen: //statements executed when the //
result of expression matches valuen [break;] [default: //statements executed when none of //the values match the value of the expression [break;]] } expression an expression whose
result is matched against each case clause.
...it then looks for the first case clause whose expression evaluates to the same value as the
result of the input expression (using the strict comparison, ===) and transfers control to that clause, executing the associated statements.
JavaScript
jsfiddle edit javascript, css, html and get live
results.
...edit your javascript, css, html files and get live
results and file structure.
... codepen codepen is another collaborative web development tool used as a live
result playground.
Autoplay guide for media and Web Audio APIs - Web media technologies
the exact situations that
result in blocking, and the specifics of how sites become whitelisted vary from browser to browser, but the above are good guidelines to go by.
... }).catch(error => { if (error.name === "notallowederror") { showplaybutton(videoelem); } else { // handle a load or playback error } }); } the first thing we do with the
result of play() is make sure it's not undefined.
...example: allowing autoplay only from the document's domain to use the feature-policy header to only allow media to autoplay from the document's origin: feature-policy: autoplay 'self' to do the same for an <iframe>: <iframe src="mediaplayer.html" allow="autoplay 'src'"> </iframe> example: allowing autoplay and fullscreen mode adding fullscreen api permission to the previous example
results in a feature-policy header like the following if fullscreen access is allowed regardless of the domain; a domain restriction can be added as well as needed.
Mapping the width and height attributes of media container elements to their aspect-ratio - Web media technologies
this wasn't an attractive thing for your users to see, and could also
result in performance issues due to the repainting required after each image loads, hence adding the attributes being a good idea.
... note: currently this effect is being limited to actual <img> elements, as applying to other such elements may have undesirable
results.
... once such an image loads, if the internal aspect ratio is still applied it will
result in the <img> not displaying the image correctly.
Introduction to progressive web apps - Progressive web apps (PWAs)
success stories there are many success stories of companies trying the pwa route, opting for an enhanced website experience rather than a native app, and seeing significant measurable benefits as a
result.
...india's largest e-commerce site was rebuilt as a progressive web app in 2015, which
resulted in 70% increase in conversions.
... the aliexpress pwa has also seen much better
results than either the web or the native app, with a 104% increase in conversion rates for new users.
How to make PWAs re-engageable using Notifications and Push - Progressive web apps (PWAs)
instead of showing the notification immediately though, best practice dictates that we should show the popup when the user requests it by clicking on a button: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(
result) { if(
result === 'granted') { randomnotification(); } }); }); this shows a popup using the operating system’s own notifications service: when the user confirms to receive notifications, the app can then show them.
... the
result of the user action can be default, granted or denied.
...in this particular case, after registering, we use the registration object to subscribe, and then use the
resulting subscription object to complete the whole process.
in2 - SVG: Scalable Vector Graphics
value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise
result of previous filter primitive animatable yes fecomposite for <fecomposite>, in2 defines the second input image to the compositing operation.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise
result of previous filter primitive animatable yes fedisplacementmap for <fedisplacementmap>, in2 defines the second input image, which is used to displace the pixels in the image defined in the in attribute.
... value sourcegraphic | sourcealpha | backgroundimage | backgroundalpha | fillpaint | strokepaint | <filter-primitive-reference> default value sourcegraphic for first filter primitive, otherwise
result of previous filter primitive animatable yes specifications specification status comment filter effects module level 1the definition of 'in2 for <fedisplacementmap>' in that specification.
<feDiffuseLighting> - SVG: Scalable Vector Graphics
the
resulting image, which is an rgba opaque image, depends on the light color, light position and surface geometry of the input bump map.
... <svg width="440" height="140" xmlns="http://www.w3.org/2000/svg"> <!-- no light is applied --> <text text-anchor="middle" x="60" y="22">no light</text> <circle cx="60" cy="80" r="50" fill="green" /> <!-- the light source is a fepointlight element --> <text text-anchor="middle" x="170" y="22">fepointlight</text> <filter id="lightme1"> <fediffuselighting in="sourcegraphic"
result="light" lighting-color="white"> <fepointlight x="150" y="60" z="20" /> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="170" cy="80" r="50" fill="green" filter="url(#lightme1)" /> <!-- the light source is a fedistantlight element --> <text text-anchor="...
...middle" x="280" y="22">fedistantlight</text> <filter id="lightme2"> <fediffuselighting in="sourcegraphic"
result="light" lighting-color="white"> <fedistantlight azimuth="240" elevation="20"/> </fediffuselighting> <fecomposite in="sourcegraphic" in2="light" operator="arithmetic" k1="1" k2="0" k3="0" k4="0"/> </filter> <circle cx="280" cy="80" r="50" fill="green" filter="url(#lightme2)" /> <!-- the light source is a fespotlight source --> <text text-anchor="middle" x="390" y="22">fespotlight</text> <filter id="lightme3"> <fediffuselighting in="sourcegraphic"
result="light" lighting-color="white"> <fespotlight x="360" y="5" z="30" limitingconeangle="20" pointsatx="390" pointsaty="80" pointsatz="0"/>...
Types of attacks - Web security
the web server reflects the injected script back to the user's browser, such as in an error message, search
result, or any other response that includes data sent to the server as part of the request.
... dom-based xss attacks the payload is executed as a
result of modifying the dom environment (in the victim’s browser) used by the original client-side script.
...the end
result would be much the same, with the browser storing the illegitimate cookie and sending it to all other pages under example.com.
Index - XPath
21 concat xslt, xslt_reference the concat function concatenates two or more strings and returns the
resulting string.
... 25 document xslt, xslt_reference the document finds a node-set in an external document, or multiple external documents, and returns the
resulting node-set.
... 39 normalize-space xslt, xslt_reference the normalize-space function strips leading and trailing white-space from a string, replaces sequences of whitespace characters by a single space, and returns the
resulting string.
<xsl:namespace-alias> - XSLT: Extensible Stylesheet Language Transformations
to prevent a normally xsl:-prefixed literal
result element (which should simply be copied as-is to the
result tree) from being misunderstood by the processor, it is assigned a temporary namespace which is appropriately re-converted back to the xslt namespace in the output tree.
... syntax <xsl:namespace-alias stylesheet-prefix=name
result-prefix=name /> required attributes stylesheet-prefix specifies the temporary namespace.
...
result-prefix specifies the desired namespace for the output tree.
<xsl:stylesheet> - XSLT: Extensible Stylesheet Language Transformations
syntax <xsl:stylesheet version="number" xmlns:xsl="http://www.w3.org/1999/xsl/transform" id="name" extension-element-prefixes="list-of-names" exclude-
result-prefixes="list-of-names"> entire stylesheet </xsl:stylesheet> required attributes version specifies the version of xslt required by this stylesheet.
... optional attributes exclude-
result-prefixes specifies any namespace used in this document that should not be sent to the output document.
... input-type-annotations specifies whether type annotations are stripped from the element so the same
results are produced whether the source documents have been validated against a schema or not.
Using the Mozilla JavaScript interface to XSL Transformations - XSLT: Extensible Stylesheet Language Transformations
if that node is a document node, you can pass in a full xsl transform or a literal
result element transform, otherwise it must be an xsl:stylesheet or xsl:transform element.
... transformtodocument xsltprocessor.transformtodocument() takes one argument, the source node to transform, and returns a new document with the
results of the transformation: var newdocument = processor.transformtodocument(domtobetransformed); the
resultant object depends on the output method of the stylesheet: html - htmldocument xml - xmldocument text - xmldocument with a single root element <transformiix:
result> with the text as a child transformtofragment you can also use xsltprocessor.transformtofragment() which will return a documentfragment node.
...it will not produce an html dom objects if only the toplevel element of the
result is <html> as xsltprocessor.transformtofragment() is rarely used to create this element.
indexed-db - Archive of obsolete content
var { indexeddb, idbkeyrange } = require('sdk/indexed-db'); var database = {}; database.onerror = function(e) { console.error(e.value) } function open(version) { var request = indexeddb.open("stuff", version); request.onupgradeneeded = function(e) { var db = e.target.
result; e.target.transaction.onerror = database.onerror; if(db.objectstorenames.contains("items")) { db.deleteobjectstore("items"); } var store = db.createobjectstore("items", {keypath: "time"}); }; request.onsuccess = function(e) { database.db = e.target.
result; }; request.onerror = database.onerror; }; function additem(name) { var db = database.db; var ...
... function getitems(callback) { var cb = callback; var db = database.db; var trans = db.transaction(["items"], "readwrite"); var store = trans.objectstore("items"); var items = new array(); trans.oncomplete = function() { cb(items); } var keyrange = idbkeyrange.lowerbound(0); var cursorrequest = store.opencursor(keyrange); cursorrequest.onsuccess = function(e) { var
result = e.target.
result; if(!!
result == false) return; items.push(
result.value.name);
result.continue(); }; cursorrequest.onerror = database.onerror; }; function listitems(itemlist) { console.log(itemlist); } open("1"); var add = require("sdk/ui/button/action").actionbutton({ id: "add", label: "add", icon: "./add.png", onclick: function() { additem(require("sdk/...
test/utils - Archive of obsolete content
let { before, after } = require('sdk/test/utils'); let { search } = require('sdk/places/bookmarks'); exports.testcountbookmarks = function (assert, done) { search().on('end', function (
results) { assert.equal(
results, 0, 'should be no bookmarks'); done(); }); }; before(exports, function (name, assert) { removeallbookmarks(); }); require('sdk/test').run(exports); both before and after may be asynchronous.
... to make them asynchronous, pass a third argument done, which is a function to call when you have finished: let { before, after } = require('sdk/test/utils'); let { search } = require('sdk/places/bookmarks'); exports.testcountbookmarks = function (assert, done) { search().on('end', function (
results) { assert.equal(
results, 0, 'should be no bookmarks'); done(); }); }; before(exports, function (name, assert, done) { removeallbookmarksasync(function () { done(); }); }); require('sdk/test').run(exports); globals functions before(exports, beforefn) runs beforefn before each test in the file.
console - Archive of obsolete content
for example, if the logging level is set to "info", then calls to info(), log(), warn(), and error() will all
result in output being written.
... the complete set of logging levels is given in the table below, along with the set of functions that will
result in output at each level: level will log calls to: all any console method debug debug(), error(), exception(), info(), log(), time(), timeend(), trace(), warn() info error(), exception(), info(), log(), time(), timeend(), trace(), warn() warn error(), exception(), warn() error error(), exception() off nothing ...
Finding window handles - Archive of obsolete content
once you have a docshell, queryinterface it into nsibasewindow, call getmainwidget on
result, and then call getnativedata(ns_native_window).
... .queryinterface(components.interfaces.nsidocshelltreeitem) .treeowner .queryinterface(components.interfaces.nsiinterfacerequestor) .getinterface(components.interfaces.nsibasewindow); then in c++ part, a function take nsibasewindow as param hwnd getparentwindowhwnd(nsibasewindow *window) { nativewindow hwnd; ns
result rv = window->getparentnativewindow(&hwnd); if (ns_failed(rv)) return null; return (hwnd)hwnd; } that's it; use with caution!
StringView - Archive of obsolete content
regsize optional the number of bytes of which the length must
result in a multiple (1 or omitted for ascii, binary strings or utf-8-encoded strings, 2 for utf-16 strings, 4 for utf-32 strings).
... advanced examples edit an ascii part contained within a binary file let's compile this c program: #include <stdio.h> int main () { printf("hello world!\n"); return 0; } in a 64-bit machine it will
result in an output like the following first alert.
XPath - Archive of obsolete content
notes and sample code for xpath and ajax (the following was moved from document.evaluate) obj.evaluate(xpathexpression,contextnode,namespaceresolver,
resulttype,
result); //obj and contextnode should be the same object, if context is a ajax xml object (example: returnedxml) this should be used as : returnedxml.evaluate(xpathexpression,returnedxml,namespaceresolver,returntype,
result); //contextnode should be used in the one in which it was created //add by mooring 2008-11-15 16:00 china var xhr = new ajax('post','demo.xml',parsexml,'xml'); //ajax is a class written by javascript which return responsexml object to parsexml function function parsexml(obj)//obj is the returnxml object now { if(!obj.documentelement) { alert("your browser does't support this script!"); return; ...
...} var fields = [];//store the
results if(window.activexobject) { var tobj = obj.documentelement.selectnodes("/root/field/item"); for(var i=0;i<tobj.length; i++) { fields.push(tobj[i].text); } } else { var tobj = obj.evaluate("/root/field/item",obj.documentelement,null, xpath
result.any_type, null); var tmp = tobj.iteratenext(); while(tmp) { fields.push(tmp.textcontent); tmp = tobj.iteratenext(); } } alert(fields); } //here is the demo xml file for xpath <?xml version="1.0"?> <root> <field> <item>art_id</item> <item>psection</item> <item>qkind</item> <item>qtitle</item> <item>question</item> <item>pic</item> <item>answer1</item> <item>answer2</item> <item>answer3</item> <item>answer4</item> </field> </root> //add by mooring 2008-11-...
getAttributeNS - Archive of obsolete content
em.getattributens) { return thisitem.getattributens(ns, nsatt); } else if (ns === null) { return thisitem.getattribute(nsatt); } else if (ns === 'http://www.w3.org/xml/1998/namespace') { // this is assumed so don't try to get an xmlns for the 'xml' prefix return thisitem.getattribute('xml:'+nsatt); // prefix must be 'xml' per the specs } var attrs2,
result; var attrs = thisitem.attributes; var prefixatt = new regexp('^(.*):'+nsatt.replace(/\./g, '\\.')+'$'); // e.g., xlink:href // find any prefixes with the local-name being searched (escape period since only character (besides colon) allowed in an xml name which needs escaping) for (var j = 0; j < attrs.length; j++) { // thisitem's atts // e.g., abc:href, xlink:href while ((...
...(
result = prefixatt.exec(attrs[j].nodename)) !== null) && thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { var xmlnsprefix = new regexp('^xmlns:'+
result[1]+'$'); // e.g., xmnls:xl, xmlns:xlink // check higher up for xmlns:prefix // check the current node and if necessary, check for the next matching local name up in the hierarchy (until reaching the document root) while (thisitem.nodename !== '#document' && thisitem.nodename !== '#document-fragment') { attrs2 = thisitem.attributes; for (var i = 0; i < attrs2.length; i++) { // search for any prefixed xmlns declaration on thisitem which match prefixes found above with desired local name if (attrs2[i].node...
Common Pitfalls - Archive of obsolete content
object you want to use the newuri method on the nsiioservice interface, like so: javascript: try { var ioserv = components.classes["@mozilla.org/network/io-service;1"] .getservice(components.interfaces.nsiioservice); var uriobj = ioserv.newuri(uristring, uricharset, baseuri); } catch (e) { // may want to catch ns_error_malformed_uri for some applications } c++: ns
result rv; nscomptr<nsiioservice> ioserv = do_getservice("@mozilla.org/network/io-service;1"); ns_ensure_success(rv, rv); nscomptr<nsiuri> uriobj; rv = ioserv->newuri(uristring, uricharset, baseuri, getter_addrefs(uriobj)); if (ns_failed(rv)) { // may want to handle ns_error_malformed_uri for // some applications return rv; } or, if the code can include nsnetutil.h: nscompt...
...r<nsiuri> uriobj; ns
result rv = ns_newuri(getter_addrefs(uriobj), uristring, uricharset, baseuri); in all cases the baseuri can be null if the uristring should be treated as an absolute uri and uricharset can be null if there is no clear origin charset for the string (e.g.
Creating custom Firefox extensions with the Mozilla build system - Archive of obsolete content
finally, we define the variable force_static_lib,
resulting in a makefile that starts something like this: depth = ../../../../..
...the component implementation will include the methods for retrieving the path or file for the extension's home directory: mylocation.prototype = { queryinterface: function(iid) { if (iid.equals(nsisupports)) return this; if (iid.equals(myilocation)) return this; components.returncode = components.
results.ns_error_no_interface; return null; }, get locationfile() { return __location__.parent.parent; } } this assumes that the component resides in a subdirectory of the extension directory (by convention, this directory is called components/).
Extension Versioning, Update and Compatibility - Archive of obsolete content
other tags aren't included in the
result but do have their contents displayed, so the following snippet: <span><q>text</q></span> would be rendered exactly the same as: <q>text</q> sample file <!doctype html public "-//w3c//dtd xhtml 1.0 strict//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd"> <html lang="en-us" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> <h2>my extension</h2> <ul> <li>this update fixes some stabilit...
...the
resultant data is der encoded then base 64 encoded for inclusion in the update.rdf as an signature entry.
Adding windows and dialogs - Archive of obsolete content
let somevalue = 2; let returnvalue = { accepted : false ,
result : "" }; window.opendialog( "chrome://xulschoolhello/content/somedialog.xul", "xulschoolhello-some-dialog", "chrome,centerscreen", somevalue, returnvalue); // you can send as many extra parameters as you need.
... // if (returnvalue.accepted) { do stuff } the optional parameters are available in the dialog code through the window.arguments property: let somevalue = window.arguments[0]; let returnvalue = window.arguments[1]; // returnvalue.accepted = true; // returnvalue.
result = "something"; the parameter named returnvalue is an object that the dialog will modify to reflect what the user did in it.
Appendix F: Monitoring DOM changes - Archive of obsolete content
monkey patching in many instances, especially when dealing with chrome code, the best way to modify actions which
result in dom mutations is by wrapping the functions that trigger those changes.
... for instance, when you want to modify the
result of dom mutations that you know are the
result of the doawesomedomstuff() function, you can wrap it as follows: { let originaldoawesomedomstuff = doawesomedomstuff; doawesomedomstuff = function _doawesomedomstuff() { let res = originaldoawesomedomstuff.apply(this, arguments); doawesomerdomstuff(res, arguments); return res; }; } now, whenever doawesomedomstuff() is called, the original function will be called, followed by your own doawesomerdomstuff() function, which can then further modify the dom as needed.
Connecting to Remote Content - Archive of obsolete content
the nsixsltprocessor.transformtodocument() method returns a dom document with the
results of the transformation, whereas, the nsixsltprocessor.transformtofragment() method returns a dom documentfragment node.
...you can use it to view or even modify the data in a request, and then inspect the
result.
Inner-browsing extending the browser navigation paradigm - Archive of obsolete content
introduction when you click a link on a web page, your web browser makes a request to a web server which usually
results in a new web page as a response.
...to demonstrate how the callback mechanism is implemented, imagine the following html page loaded into the iframe as a
result of a request (retrievedata method requested the html file in to be loaded in the iframe): <body onload="top.iframecallback(document);" > <mydata> this is the content that comes from the server </mydata> </body> note that when the page is loaded into the iframe, the onload event is fired and the parent.iframecallback function is called in the context of the parent document (the originator).
Images, Tables, and Mysterious Gaps - Archive of obsolete content
thus you might have: tr.decoration img {display: block;} ...along with the following change in the markup: <tr class="decoration"><td style="background: red;"> <img src="smallred.gif" height="1" width="1"> </td></tr> the
result is that of only making the spacer gif block-level, thus leaving the other images alone.
... this leads to the
result seen in figure 9.
No Proxy For configuration - Archive of obsolete content
hostnames filter test destination
result basic filtering unit tests (local host) localhost localhost direct localhost.
... hostname.domain.com hostname.domain.com domain.com proxy hostname.domain.com hostname.domain.com direct hostname.domain.com host.hostname.domain.com direct .domain.com .domain.com domain.com hostname.domain.com host.hostname.domain.com proxy direct direct *.domain.com *.domain.com same
results as ".domain.com" *domain.com same
results as "domain.com" ip address host ip address 127.0.0.1 127.0.0.1 direct 127.0.0.0 127.0.0.1 proxy network range 127.0.0.0/8 127.0.0.1 direct 127/8 127.0.0.1 proxy 127.*.*.* 127.0.0.1 proxy 127.
Compiling The npruntime Sample Plugin in Visual Studio - Archive of obsolete content
again note that the
resulting dll filename must start with "np", so either call your project like this or rename the file later delete the .cpp and .h and readme files from the project and disk (if you did not create an empty project) copy the npruntime sample plugin source code into the dir of the new vs project and add the files to the project using the vs gui (.cpp files to "source files", .h files to "header files", ...
...to reflect your plugin remove the function npp_getjavaclass from npp_gate.cpp build rename the
resulting dll so that the filename starts with "np" and ends with ".dll" (or "32.dll"?
Using Dehydra - Archive of obsolete content
mptypes.js: function process_type(t) { print("type found: " + t.name + " location: " + t.loc); } function input_end() { print("hello, world!"); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/dumptypes.js -o/dev/null -c dumptypes.cc note:for g++4.5 and up use -fplugin-arg-gcc_dehydra-script= rather than -fplugin-arg it should print the following
results: type found: foo location: test.cc:2:12 type found: myint location: test.cc:1:13 hello, world!
... == 'final') return true; return false; } function process_type(t) { if (t.bases) for each (let base in t.bases) if (isfinal(base.type)) error("class " + t.name + " extends final class " + base.type.name, t.loc); } compile using the following command: $ g++ -fplugin=~/dehydra/gcc_dehydra.so -fplugin-arg=~/final.js -o/dev/null -c final.cc it should print the following
results and return with an error code: final.cc:8: error: class subclass extends final class myclass see documentation for: process_type, error, .bases property, .attributes property ...
Using microformats - Archive of obsolete content
if provided, this is an array of microformat objects to which the search
results are added.
... return value if the specified node is a microformat, the
result is a space-delineated string listing all the microformat names that correspond to the node.
Mozilla Crypto FAQ - Archive of obsolete content
also see the documents "into the black box: a case study in obtaining visibility into commercial software", "netscape certificate database information", and "netscape communicator key database format", the
results of independent attempts to describe the format of the netscape communicator 4.x key and certificate database (with which the psm key and certificate database format is compatible).
...see also the request for an advisory opinion made to the bureau of export administration by bernstein's lawyers and the
resulting advisory opinion issued by bxa in response to that request.
New Security Model for Web Services - Archive of obsolete content
any syntax error in the document will
result in the rest of the file to be ignored.
...an entry is created if and only if the declaration file is considered valid (validation based on the syntax described above); an invalid document will
result in access denial.
String Quick Reference - Archive of obsolete content
ring // fix caller to be // void handlestring(const nsastring& str); handlestring(nsdependentstring(foo)); stack-based strings what: use of special stack-oriented classes why: to avoid excess heap allocations and memory leaks wrong: use nsstring/nscstring or raw characters // call getstringvalue(nsastring& out); nsstring value; getstringvalue(value); // call getstringvalue(char** out); char *
result; getstringvalue(&
result); // don't forget to free
result!
... right: use nsautostring/nscautostring and nsxpidlstring/nsxpidlcstring // call getstringvalue(nsastring& out); nsautostring value; // 64-character buffer on stack getstringvalue(value); // call getstringvalue(char** out); nsxpidlcstring
result; getstringvalue(getter_copies(
result)); //
result will free automatically original document information author: alec flett last updated date: april 30, 2003 copyright information: portions of this content are © 1998–2007 by individual mozilla.org contributors; content available under a creative commons license | details.
Tamarin Acceptance Test Template - Archive of obsolete content
addtestcase is a function that is defined * in shell.as and takes three arguments: * - a string representation of what is being tested * - the expected
result * - the actual
result * * for example, a test might look like this: * * var helloworld = "hello world"; * * addtestcase( * "var helloworld = 'hello world'", // description of the test * "hello world", // expected
result * helloworld ); // actual
result * */ // add your tests here var helloworld = "hello world"; addtestcase( "var helloworld...
... this executes the test cases and // displays
results.
Tamarin build documentation - Archive of obsolete content
the
resulting debug executable for the command above would be built at /platform/mac/avmshell/build/debug/avm.
... execute the following commands to build: $ cd tamarin-central/platform/unix $ make the
resulting executable "shell" is built in the current directory.
Elements - Archive of obsolete content
</html:b><children/></content> </binding> </bindings> you can view the
result by opening helloworld.html in firefox.
...in firefox 3 and later, the constructor is called when reflow can take place, which
results in up-to-date information being returned.
confirm - Archive of obsolete content
the value is calculated by multiplying the corresponding button position constant with a button title constant for each button, then adding the
results and any additional options (see other constants).
...the following examples show the
result of calling confirm() with three buttons 0='a', 1='b' and 2='c'.
Properties - Archive of obsolete content
startsoftwareupdate("http://webserver/argstest.xpi?argument_string") will
result in the value of install.arguments being argument_string #).
...note that due to branching (different versions of gecko with different feature sets might be built on the same day), using this property to "detect" the application version may produce false
results.
Introduction to XUL - Archive of obsolete content
the
resulting ui will be created using an xml content model.
... </window> </package> and a window (or other service) could be instantiated by first parsing the whole package and then picking out a window from its contents package *package = loadpackage("http://xxx/package.xul"); instantiatewindow(package, getnodewithid("main"); this happy scheme doesn't work today, because the code expects the
result of parsing an xml document to be a window.
Methods - Archive of obsolete content
« xul reference home acceptdialog additemtoselection addpane addprogresslistener addsession addtab addtabsprogresslistener advance advanceselectedtab appendcustomtoolbar appendgroup appenditem appendnotification blur cancel canceldialog centerwindowonscreen checkadjacentelement clear
results clearselection click close collapsetoolbar contains decrease decreasepage docommand ensureelementisvisible ensureindexisvisible ensureselectedelementisvisible expandtoolbar extra1 extra2 focus getbrowseratindex getbrowserfordocument getbrowserfortab getbrowserindexfordocument getbutton getdefaultsession geteditor getelementsbyattribute getelementsbyattributens getformattedstring gethtmleditor getindexoffirstv...
...isiblerow getindexofitem getitematindex getnextitem getnotificationbox getnotificationwithvalue getnumberofvisiblerows getpagebyid getpreviousitem get
resultat get
resultcount get
resultvalueat getrowcount getsearchat getselecteditem getsession getsessionbyname getsession
resultat getsessionstatusat getsessionvalueat getstring goback gobackgroup godown goforward goforwardgroup gohome goto gotoindex goup hidepopup increase increasepage insertitem insertitemat invertselection loadgroup loadonetab loadtabs loaduri loaduriwithflags makeeditable movebyoffset moveto movetoalertposition onsearchcomplete ontextentered ontextreverted openpopup openpopupatscreen opensubdialog openwindow preferenceforelement...
Property - Archive of obsolete content
hour hourleadingzero id ignoreblurwhilesearching image increment inputfield inverted is24hourclock ispm issearching iswaiting itemcount label labelelement lastpermanentchild lastselected left linkedpanel listboxobject locked markupdocumentviewer max maxheight maxlength maxrows maxwidth menu menuboxobject menupopup min minheight min
resultsforpopup minwidth minute minuteleadingzero mode month monthleadingzero name next nomatch notificationshidden object observes onfirstpage onlastpage open ordinal orient pack pagecount pageid pageincrement pageindex pagestep parentcontainer palette persist persistence placeholder pmindicator popup popupboxobject popupopen position ...
... predicate preferenceelements preferencepanes preferences priority radiogroup readonly readonly ref resource
resultspopup scrollboxobject scrollincrement scrollheight scrollwidth searchbutton searchcount searchlabel searchparam searchsessions second secondleadingzero securityui selected selectedbrowser selectedcount selectedindex selecteditem selecteditems selectedpanel selectedtab selectionend selectionstart selstyle seltype sessioncount sessionhistory showcommentcolumn showpopup size smoothscroll spinbuttons src state statusbar statustext stringbundle strings style subject suppressonselect tabcontainer tabindex tabs tabscrolling tabpanels tag textlength textvalue timeout ti...
Template Guide - Archive of obsolete content
basics of xul templates introduction rule compilation rdf template syntax
result generation rdf query syntax actions recursive generation simple example bindings additional navigation filtering static content simple query syntax containment properties xml template syntax xml templates xml assignments sql template syntax sqlite templates common template syntax attribute substitution multiple rules using recursive templates building menus with templates special condition tests multiple queries using multiple queries to generate more
results building trees with templates building trees building hierarchical trees template modifications template builder interface template and tree listeners rdf modifications additional topics sorting...
...
results additional template attributes template logging xml namespaces alternative approaches javascript templates xuljsdatasource: a component for extensions, which bring a "javascript template syntax".
The Joy of XUL - Archive of obsolete content
in fact, many developers invest a significant amount of effort to achieve these
results in their dhtml web applications but at the cost of complexity and performance and without any supporting standards.
... this degree of separation
results in applications that are easier to maintain by programmers and readily customized by designers and language translators.
Box Model Details - Archive of obsolete content
the
result is that the buttons will be centered in the box in both directions.
...the
result is that the check box and the find button will be spaced apart from each other by some space of no more than 30 pixels.
Localization - Archive of obsolete content
<menupopup> <menuitem label="rdf:http://www.xulplanet.com/rdf/recent#label" uri="rdf:*"/> </menupopup> </template> </menulist> </groupbox> </tabpanel> <tabpanel id="optionspanel" orient="vertical"> <checkbox id="casecheck" label="&casesensitive;"/> <checkbox id="wordscheck" label="&matchfilename;"/> </tabpanel> </tabpanels> </tabbox> <tree id="
results" style="display: none;" flex="1"> <treecols> <treecol id="name" label="&
results.filename;" flex="1"/> <treecol id="location" label="&
results.location;" flex="2"/> <treecol id="size" label="&
results.size;" flex="1"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="mozilla"/> <treecell label="/usr/local"/> <treecell l...
...> <!entity finddescription "enter your search criteria below and select the find button to begin the search."> <!entity findcriteria "search criteria"> <!entity type.name "name"> <!entity type.size "size"> <!entity type.date "date modified"> <!entity mode.is "is"> <!entity mode.isnot "is not"> <!entity casesensitive "case sensitive search"> <!entity matchfilename "match entire filename"> <!entity
results.filename "filename"> <!entity
results.location "location"> <!entity
results.size "size"> <!entity bytes.before ""> <!entity bytes.after "bytes"> <!entity button.find "find"> <!entity button.cancel "cancel"> now, to add text for a new language all you need to do is create another dtd file.
Property Files - Archive of obsolete content
resultmessage=%2$s files found in the %1$s directory.
...var dir = "/usr/local/document"; var count = 10; var strbundle = document.getelementbyid("strings"); var
result = strbundle.getformattedstring("
resultmessage", [ dir, count ]); alert(
result); this example will display following message in an alert box.
Stack Positioning - Archive of obsolete content
in this example, the
resulting width of the top-most hbox will be 400px: <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here.
... --> </hbox> </stack> in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredictable and undesireable
results.
Tree View Details - Archive of obsolete content
the
result is that 'toinsert' will be set to one of the child arrays, for example ["silver", "gold", "lead"] if the solids row is the one being opened.
...the tree will then redraw the tree as needed and the
result is that the child rows will appear inside the container.
Using the Editor from XUL - Archive of obsolete content
note: these callbacks also fire for every subdocument that loads as a
result of the parent document load, for example with frameset documents, or html documents with their own embedded <iframe>s.
...when the last reference to the nseditorshell goes away (as a
result of nseditorboxobject releasing its reference) it releases the owning reference on the editor.
stack - Archive of obsolete content
in some case, setting the width or height this way may even be necessary because using the width/height attributes (eg, "width", "minwidth" and "maxwidth") inside a stack can sometimes produce unpredictable and undesireable
results.
...--> </hbox> </stack> in this example, the
resulting width of the top-most hbox will be 400px (600px - 200px - 0) : <stack width="600"> <hbox flex="1"> <!-- content --> </hbox> <hbox left="0" right="200" > <!-- some content here.
where - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] indicate a condition that must match for a template
result to be used.
... if the condition is true, the corresponding action body is generated; otherwise the
result is ignored and no content is generated.
CommandLine - Archive of obsolete content
4-0800200c9a66"); const class_name = "applicationnameclh"; const contract_id = "@example.com/applicationname/clh;1"; const cld_category = "m-applicationname"; var apphandler = { /* nsisupports */ queryinterface : function clh_qi(aiid) { if (aiid.equals(nsicommandlinehandler) || aiid.equals(nsifactory) || aiid.equals(nsisupports)) return this; throw components.
results.ns_error_no_interface; }, /* nsicommandlinehandler */ handle : function clh_handle(acmdline) { var observerservice = components.classes["@mozilla.org/observer-service;1"] .getservice(components.interfaces.nsiobserverservice); observerservice.notifyobservers(acmdline, "commandline-args-changed", null); }, helpinfo : " -test <value> ...
... a test attribute\n", /* nsifactory */ createinstance : function mdh_ci(aouter, aiid) { if (aouter != null) { throw components.
results.ns_error_no_aggregation; } return this.queryinterface(aiid); }, lockfactory : function mdh_lock(alock) { /* no-op */ } }; var apphandlermodule = { /* nsisupports */ queryinterface : function mod_qi(aiid) { if (aiid.equals(nsimodule) || aiid.equals(nsisupports)) return this; throw components.
results.ns_error_no_interface; }, /* nsimodule */ getclassobject : function mod_gch(acompmgr, acid, aiid) { if (acid.equals(class_id)) return apphandler.queryinterface(aiid); throw components.
results.ns_error_failure; }, registerself : function mod_regself(acompmgr, afilespec, alo...
Using LDAP XPCOM with XULRunner - Archive of obsolete content
es[] = { #ifdef ns_win32 moz_dll_prefix "nsldap32v50" moz_dll_suffix, moz_dll_prefix "nsldappr32v50" moz_dll_suffix, #endif //ns_win32 #ifdef ns_unix moz_dll_prefix "ldap50" moz_dll_suffix, moz_dll_prefix "prldap50" moz_dll_suffix, #endif //ns_unix nsnull }; // component.dll on windows, libcomponent.dll on linux static char krealcomponent[] = moz_dll_prefix "mozldap" moz_dll_suffix; ns
result nsgetmodule(nsicomponentmanager* acompmgr, nsifile* alocation, nsimodule* *a
result) { ns
result rv; nscomptr<nsifile> libraries; rv = alocation->getparent(getter_addrefs(libraries)); if (ns_failed(rv)) return rv; nscomptr<nsilocalfile> library(do_queryinterface(libraries)); if (!library) return ns_error_unexpected; library->setnativeleafname(ns_lite...
... } library->setnativeleafname(ns_literal_cstring(krealcomponent)); prlibrary *lib; rv = library->load(&lib); if (ns_failed(rv)) return rv; nsgetmoduleproc getmoduleproc = (nsgetmoduleproc) pr_findfunctionsymbol(lib, ns_get_module_symbol); if (!getmoduleproc) return ns_error_failure; return getmoduleproc(acompmgr, alocation, a
result); } then change your .mozconfig to add this line: ac_add_options --enable-extensions=ldapstub rebuild xulrunner.
Mozilla release FAQ - Archive of obsolete content
regarding shells, i would like to recommend the following: if you are using unix, use bash-family shells for the build because of the better control over redirection (in case you want to log errors and messages) if you are using win32, using the default shell cmd.exe (as opposed to 4dos or 4nt) will probably yield better
results.
...as a
result, the project is in dire need of documentation work.
2006-09-29 - Archive of obsolete content
* @param amargin the sum of the left and right margins of the * frame, including actual values
resulting from * percentages, but not including actual values *
resulting from 'auto'.
... * @param apadding the sum of the left and right margins of the * frame, including actual values
resulting from * percentages.
2006-11-17 - Archive of obsolete content
summary: mozilla.dev.tech.xul - nov 11-nov 17, 2006 return to mozilla-dev-tech-xul announcements processing instructions are now added to xul document's dom on november 12, 2006, nickolay ponomarev announces the
results of the recently fixed bug 319654.
... the
result of the bug fix is that you may no longer use document.firstchild in xul scripts.
NPN_Evaluate - Archive of obsolete content
syntax #include <npruntime.h> bool npn_evaluate(npp npp, npobject *npobj, npstring *script, npvariant *
result); parameters the function has the following parameters: npp the npp indicating which plugin instance's window to evaluate the script in.
...
result on return, contains the value returned by the script.
NPN_GetAuthenticationInfo - Archive of obsolete content
if the function succeeds, the
result buffer will be allocated with npn_memalloc; the plugin is responsible for freeing the buffer.
...if the function succeed, the
result buffer will be allocated with npn_memalloc; the plugin is responsible for freeing the buffer.
NPN_GetProperty - Archive of obsolete content
syntax #include <npruntime.h> bool npn_getproperty(npp npp, npobject *npobj, npidentifier propertyname, npvariant *
result); parameters the function has the following parameters: <tt>npp</tt> the npp indicating which plugin instance's is making the request.
...<tt>
result</tt> on return, contains the value of the specified property.
NPAPI plugin reference - Archive of obsolete content
npn_geturlnotify requests creation of a new stream with the contents of the specified url; gets notification of the
result.
... npn_posturlnotify posts data to a url, and receives notification of the
result.
SAX - Archive of obsolete content
ignorablewhitespace: function(whitespace) { // don't care }, startprefixmapping: function(prefix, uri) { // don't care }, endprefixmapping: function(prefix) { // don't care }, // nsisupports queryinterface: function(iid) { if(!iid.equals(components.interfaces.nsisupports) && !iid.equals(components.interfaces.nsisaxcontenthandler)) throw components.
results.ns_error_no_interface; return this; } }; start parsing the xml reader component can parse xml from a string, an nsiinputstream, or asynchronously via the nsistreamlistener interface.
... below is an example of parsing from a string: xmlreader.parsefromstring("<f:a xmlns:f='g' d='1'><bbq/></f:a>", "text/xml"); this call
results in the following output (assuming the content handler from the example above is used): startdocument startelement: namespace='g', localname='a', qname='f:a', attributes={d='1'} startelement: namespace='', localname='bbq', qname='bbq', attributes={} endelement: namespace='', localname='bbq', qname='bbq' endelement: namespace='g', localname='a', qname='f:a' enddocument ...
Encryption and Decryption - Archive of obsolete content
with most modern cryptography, the ability to keep encrypted information secret is based not on the cryptographic algorithm, which is widely known, but on a number called a key that must be used with the algorithm to produce an encrypted
result or to decrypt previously encrypted information.
... implementations of symmetric-key encryption can be highly efficient, so that users do not experience any significant time delay as a
result of the encryption and decryption.
Common Firefox theme issues and solutions - Archive of obsolete content
the url bar of the
resulting popup window is disabled.
...z-margin-end: 4px; list-style-image: url("chrome://mozapps/skin/places/defaultfavicon.png"); } web developer tools web developer toolbar {to be added} web console web console buttons do not change appearance on the web console (tools > web developer > web console), the toolbar buttons on the left-hand side do not change their appearance between their toggled on and toggled off status as a
result it is not possible to determine which buttons are enabled.
Browser Feature Detection - Archive of obsolete content
it is clear from these test
results that netscape 7.0x and mozilla firefox have the greatest dom support although internet explorer, safari, and opera have sufficient dom css 1 and dom level 1 & 2 document property and method support to enable cross browser web development.
...-9.0 internet explorer 6 / 7 dom core 1 100% 100% 100% 75% / 91% 75% / 75% dom core 2 100% 100% 100% 70% / 94% 58% / 58% dom 1 html 100% 100% 100% 100% / 100% 100% / 100% dom css 1 100% 100% 100% 100% / 100% 96% / 96% dom css 2 100% 98% 67% 71% / 83% 38% / 42% test
results cross reference dom core level 1 support for properties/methods in document name firefox 1.5 ie 6 & 7 opera 8.54 - 9.01 document.doctype true true true document.implementation true true true document.documentelement true true true document.createelement() true true true document.createdocumentfr...
E4X for templating - Archive of obsolete content
inline functions as explained in the tutorial, it is possible to use anonymous functions inline (returning the desired content, including potentially xmllist's) in order to execute more than a single related statement, keeping this logic together with the
resulting xml.
...l: var a = <a><b/><c/><d/></a>; var b = <bar>{function () { var content = <></>; for each (var el in a) { el.@att = 'val'; content += el; } return content; }()}</bar>; giving: <bar> <b att="val"/> <c att="val"/> <d att="val"/> </bar> one may still wish to remove complex business logic and supply as variables to the e4x, but the above allows the shaping of
resulting content to be made more clear (and sometimes design logic also calls for extra processing).
Date.prototype.toLocaleFormat() - Archive of obsolete content
extension and xulrunner developers should know that just loading the format string from a .dtd or .properties file using a chrome://somedomain/locale/somefile.ext uri should be avoided, as the .dtd/.properties file and the tolocaleformat() method does not not necessarily use the same locale, which could
result in odd looking or even ambiguous or unreadable dates.
...note that the format string in this example is not properly localized, which will
result in the problems described above.
Old Proxy API - Archive of obsolete content
receiver turns out to be the proxy, so calling print
results in calling the get trap.
...d traps has: function(name) { return name in obj; }, hasown: function(name) { return object.prototype.hasownproperty.call(obj, name); }, get: function(receiver, name) { return obj[name]; }, set: function(receiver, name, val) { obj[name] = val; return true; }, // bad behavior when set fails in non-strict mode enumerate: function() { var
result = []; for (name in obj) {
result.push(name); }; return
result; }, keys: function() { return object.keys(obj) } }; } // ...
XForms Custom Controls - Archive of obsolete content
but there is a way for you to achieve the same
result.
...this will also allow you to be up to date with our current approaches (often the
result of hard-learned lessons) and that will hopefully help you to more easily write your own controls.
Index - Game development
this
results in performance and memory usage gains — big image files containing entire level maps are not needed, as they are constructed by small images or image fragments multiple times.
...this will
result in a better, more entertaining experience.
Building up a basic demo with PlayCanvas editor - Game development
creating a new project start a brand new project by clicking on the new button: the
resulting dialog box will show a few different options.
...in our case we're modifying the scale of the cylinder on the y axis, giving it as a value the math.sin() of the timer, with math.abs() applied to the
result of that to have the values always above zero (0-1; sin values are normally between -1 and 1.) this gives us a nice scaling effect as a
result.
Physics - Game development
adding gravity would
result in the ball falling down while friction would eventually stop the ball.
...as a
result it will be launched upwards, but then fall due to the effects of gravity pulling it down.
Asynchronous - MDN Web Docs Glossary: Definitions of Web-related terms
for example, the ajax (asynchronous javascript and xml) programming technique—now usually simply "ajax", even though json is usually used rather than xml in modern applications—is a mechanism that requests relatively small amounts of data from the server using http, with the
result being returned when available rather than immediately.
...when the secondary task is completed, the original task is notified using an agreed-upon mechanism so that it knows the work is done, and that the
result, if any, is available.
Type coercion - MDN Web Docs Glossary: Definitions of Web-related terms
examples const value1 = '5'; const value2 = 9; let sum = value1 + value2; console.log(sum); in the above example, javascript has coerced the 9 from a number into a string and then concatenated the two values together,
resulting in a string of 59.
...to return this
result, you'd have to explicitly convert the 5 to a number using the number() method: sum = number(value1) + value2; ...
XInclude - MDN Web Docs Glossary: Definitions of Web-related terms
00 || request.status === 0) && request[responsetype] !== null) { response = request[responsetype]; if (responsetype === 'responsexml') { // apply xpointer (only xpath1() subset is supported) var responsenodes; if (xpointer) { var xpath
result = response.evaluate( xpointer, response, null, xpath
result.ordered_node_snapshot_type, ...
... null ); var a = []; for(var k = 0; k < xpath
result.snapshotlength; k++) { a[k] = xpath
result.snapshotitem(k); } responsenodes = a; } else { // otherwise, the response must be a single well-formed document response responsenodes = [response.documentelement]; // put in array so can be treated the same way as the above } // prepend any node(s) (as xml) then remove xinclude for (j=0; j < responsenode...
Accessible multimedia - Learn web development
depending on how clear the spoken audio is, the
resulting transcript quality will vary greatly.
... here's an example: <video controls> <source src="example.mp4" type="video/mp4"> <source src="example.webm" type="video/webm"> <track kind="subtitles" src="subtitles_en.vtt" srclang="en"> </video> this will
result in a video that has subtitles displayed, kind of like this: for more details, please read adding captions and subtitles to html5 video.
What is accessibility? - Learn web development
this kind of disability can also be a
result of old age, rather than any specific trauma or condition, and it could also
result from hardware limitations — some users might not have a mouse.
..."100% accessibility" is an unobtainable ideal — you will always come across some kind of edge case that
results in a certain user finding certain content difficult to use — but you should do as much as you can.
Organizing your CSS - Learn web development
typically they tend to
result in more verbose use of css than you might have if you wrote and optimised every selector to a custom set of rules for that project.
...'footer' @use 'links' if the partials are all loaded into an index file, as implied above, you can then load that entire directory into another stylesheet in one go: // style.sass @use 'foundation' note: a simple way to try out sass is to use codepen — you can enable sass for your css in the settings for a pen, and codepen will then run the sass parser for you, in order that you can see the
resulting webpage with regular css applied.
Beginner's guide to media queries - Learn web development
non-responsive sites commonly look really bad when rendered in a narrow viewport, so mobile browsers usually render the site with a viewport width wider than the real device width by default (usually 960 pixels), and then shrink the rendered
result so that it fits in the display.
...however, in practice you will find that good use of modern layout methods, enhanced with media queries, will give the best
results.
Styling links - Learn web development
id; background: #bae498; } a:hover { border-bottom: 1px solid; background: #cdfeaa; } a:active { background: #265301; color: #cdfeaa; } we'll also provide some sample html to apply the css to: <p>there are several browsers available, such as <a href="#">mozilla firefox</a>, <a href="#">google chrome</a>, and <a href="#">microsoft edge</a>.</p> putting the two together gives us this
result: so what did we do here?
...{ display: inline; } a { outline: none; text-decoration: none; display: inline-block; width: 19.5%; margin-right: 0.625%; text-align: center; line-height: 3; color: black; } li:last-child a { margin-right: 0; } a:link, a:visited, a:focus { background: yellow; } a:hover { background: orange; } a:active { background: red; color: white; } this gives us the following
result: let's explain what's going on here, focusing on the most interesting parts: our second rule removes the default padding from the <ul> element, and sets its width to span 100% of the outer container (the <body>, in this case).
Advanced form styling - Learn web development
you can see the live
result: we've also created a couple of other examples to give you more ideas: styled radio buttons: custom radio button styling.
...icker as expected: label[for="file"] { box-shadow: 1px 1px 3px #ccc; background: linear-gradient(to bottom, #eee, #ccc); border: 1px solid rgb(169, 169, 169); border-radius: 5px; text-align: center; line-height: 1.5; } label[for="file"]:hover { background: linear-gradient(to bottom, #fff, #ddd); } label[for="file"]:active { box-shadow: inset 1px 1px 3px #ccc; } you can see the
result of the above css styling in the below live example (see also styled-file-picker.html live, and the source code).
Example 2 - Learn web development
border-box; min-width : 100%; max-height: 10em; /* 100px */ overflow-y: auto; overflow-x: hidden; } .select .option { padding: .2em .3em; } .select .highlight { background: #000; color: #ffffff; } javascript content window.addeventlistener("load", function () { var form = document.queryselector('form'); form.classlist.remove("no-widget"); form.classlist.add("widget"); });
result for js no js html content <form class="no-widget"> <select name="myfruit"> <option>cherry</option> <option>lemon</option> <option>banana</option> <option>strawberry</option> <option>apple</option> </select> <div class="select"> <span class="value">cherry</span> <ul class="optlist hidden"> <li class="option">cherry</li> <li class="option">l...
...emon</li> <li class="option">banana</li> <li class="option">strawberry</li> <li class="option">apple</li> </ul> </div> <form> css content .widget select, .no-widget .select { position : absolute; left : -5000em; height : 0; overflow : hidden; }
result for no js ...
HTML Cheatsheet - Learn web development
usage code snippet
result a simple link <a href="https://realityripple.com/">a link to realityripple</a> a link to realityripple a simple image <img src="https://udn.realityripple.com/samples/6e/d6ed76c6c7.png" width="25" /> a generic inline container <p>p its used to <span style="color:blue">style and group</span> particular elements </p> p its used to style and grou...
... usage code snippet
result a simple paragraph <p>i'm a paragraph</p> <p>i'm another paragraph</p> i'm a paragraph i'm another paragraph an extended quotation <blockquote>the blockquote element indicates an extended quotation.</blockquote> the blockquote element indicates an extended quotation.
HTML table advanced features and accessibility - Learn web development
these elements don't make the table any more accessible to screenreader users, and don't
result in any visual enhancement on their own.
...inside this element, add the following lines of css code: tbody { font-size: 95%; font-style: italic; } tfoot { font-weight: bold; } save and refresh, and have a look at the
result.
Test your skills: Loops - Learn web development
name — contains a name to search for para — contains a reference to a paragraph, which will be used to report the
results.
... para — contains a reference to a paragraph, which will be used to report the
results.
Making decisions in your code — conditionals - Learn web development
her animals) make decisions all the time that affect their lives, from small ("should i eat one cookie or two?") to large ("should i stay in my home country and work on my father's farm, or should i move to america and study astrophysics?") conditional statements allow us to represent such decision making in javascript, from the choice that must be made (for example, "one cookie or two"), to the
resulting outcome of those choices (perhaps the outcome of "ate one cookie" might be "still felt hungry", and the outcome of "ate two cookies" might be "felt full, but mom scolded me for eating all the cookies".) if...else statements let's look at by far the most common type of conditional statement you'll use in javascript — the humble if...else statement.
...if you help me by going and doing the shopping, i'll give you some extra allowance so you can afford that toy you wanted." in javascript, we could represent this like so: let shoppingdone = false; if (shoppingdone === true) { let childsallowance = 10; } else { let childsallowance = 5; } this code as shown always
results in the shoppingdone variable returning false, meaning disappointment for our poor child.
Test your skills: Arrays - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the
results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...save the
result in a variable called myarray.
Test your skills: Strings - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the
results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...save the
result inside a variable called finalquote.
Test your skills: variables - Learn web development
note: in the examples below, if there is an error in your code it will be outputted into the
results panel on the page, to help you try to figure out the answer (or into the browser's javascript console, in the case of the downloadable version).
...the
results panel should be outputting the name chris, and a statement about how old chris will be in 20 years' time.
Storing the information you need — Variables - Learn web development
this is a good thing — declaring a variable after you initialize it
results in confusing, harder to understand code.
... a value enclosed in quotes, the browser treats the variable as a string: let mystring = 'hello'; even if the value contains numbers, it is still a string, so be careful: let mynumber = '500'; // oops, this is still a string typeof mynumber; mynumber = 500; // much better — now this is a number typeof mynumber; try entering the four lines above into your console one by one, and see what the
results are.
What is JavaScript? - Learn web development
in interpreted languages, the code is run from top to bottom and the
result of running the code is immediately returned.
... server-side code on the other hand is run on the server, then its
results are downloaded and displayed in the browser.
Object-oriented JavaScript for beginners - Learn web development
let's look at the constructor calls again: let person1 = new person('bob'); let person2 = new person('sarah'); in each case, the new keyword is used to tell the browser we want to create a new object instance, followed by the function name with its required parameters contained in parentheses, and the
result is stored in a variable — very similar to how a standard function is called.
... further exercises to start with, try adding a couple more object creation lines of your own, and try getting and setting the members of the
resulting object instances.
Aprender y obtener ayuda - Learn web development
codecademy for example is a learning site where the tutorials mainly consist of interactive code editors where you have to directly write code and see if the desired
result was achieved.
... many mdn web docs reference pages provide interactive examples too, where you can alter the code and see how the live
result changes.
Multimedia: Images - Learn web development
a quality setting of 75% should yield decent
results.
... <picture> <source type="video/mp4" src="giphy.mp4"> <source type="image/webp" src="giphy.webp"> <img src="giphy.gif"> </picture> serving the optimal size in image delivery the "one size fits all" approach will not yield the best
results, meaning that for smaller screens you would want to serve images with smaller resolution and vis-versa for larger screens.
Framework main features - Learn web development
javascript lets us use the + operator to concatenate strings together, so this function would technically still work if a and b were strings — it just might not give you the
result you'd expect.
...as with other features, the exact mechanism will differ between frameworks, but the end
result is the same.
Working with Svelte stores - Learn web development
the end
result of this nifty trick is that you can access global stores just as easily as using reactive local variables.
... a transition is applied with the transition:fn directive, and is triggered by an element entering or leaving the dom as a
result of a state change.
Creating our first Vue component - Learn web development
{{}} is a special template syntax in vue, which lets us print the
result of javascript expressions defined in our class, inside our template, including values and methods.
...this would
result in errors with assistive technology since the id is needed to correctly map labels to their checkboxes.
Focus management with Vue refs - Learn web development
since reading and writing actual dom nodes is often more expensive than virtual nodes, this can
result in better performance.
... however, it also means you often should not edit your html elements directly through native browser apis (like document.getelementbyid) when using frameworks, because it
results in the vdom and real dom going out of sync.
Implementing feature detection - Learn web development
note: the double not in the above example (!!) is a way to force a return value to become a "proper" boolean value, rather than a truthy/falsy value that may skew the
results.
...it does this by making the global modernizr object available to the page it is applied to, which contains
results of the feature detects as true/false properties.
Introduction to cross browser testing - Learn web development
this could be a group of friends or family, a group of other employees, a class at a local university, or a professional user testing setup, where people are paid to test out your site and provide
results.
...you can set up your own testing automation system (selenium being the popular app of choice) that could for example load your site in a number of different browsers, and: see if a button click causes something to happen successfully (like for example, a map displaying), displaying the
results once the tests are completed take a screenshot of each, allowing you to see if a layout is consistent across the different browsers.
Command line crash course - Learn web development
below is a screenshot with a “vanilla” macos terminal at the top, and a customised terminal with some extra icons and colors to keep it looking lively — both showing the
results of running ls -l: note: to find out exactly what options each command has available, you can look at its man page.
...ach the final page: curl /docs/web/api/fetch -l -i | grep location your output should look something like this (curl will first output some download counters and suchlike): location: /docs/web/api/fetch location: /docs/web/api/globalfetch/globalfetch.fetch() location: /docs/web/api/globalfetch/fetch location: /docs/web/api/windoworworkerglobalscope/fetch although contrived, we could take this
result a little further and transform the location: line contents, adding the base origin to the start of each one so that we get complete urls printed out.
Client-side tooling overview - Learn web development
if you jump on your favourite search engine and look for "front-end developer tools" you're going to hit a huge spectrum of
results ranging from text editors, to browsers, to the type of pens you can use to take notes.
...when you get
results, have a look at information such as how many stars or downloads the extension has, as an indicator of its quality.
CSUN Firefox Materials
as a
result, nearly everyone who tries firefox finds themselves hooked..
...the mozilla firefox community welcomes bug reports, ideas, documentation, answering questions in the support forums -- and nearly any kind of community involvement
resulting in a browser built for a broader audience of users and developers.
Adding a new CSS property
make sure to call ungettoken() if you have called gettoken() but the
result is unexpected.
... note that use of setcoord (if the
resulting value needs to be a tagged union) or setdiscrete is preferred when it's possible to use those functions.
Creating reftest-based unit tests
if the bitmaps
resulting from displaying the two files in an 800x1000 window are identical, the test passes.
... other comparisons note that it should also be possible to create a reftest that tests markup against an actual graphic image of the visual construct that should
result.
Listening to events on all tabs
void onstatechange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, unsigned long astateflags, ns
result astatus ); parameters abrowser the browser that fired the notification.
...void onstatuschange( nsidomxulelement abrowser, nsiwebprogress awebprogress, nsirequest arequest, ns
result astatus, prunichar *amessage ); parameters abrowser the browser that fired the notification.
Cross Process Object Wrappers
when you access a property of the wrapper, it sends a synchronous message to the content process and returns the
result.
...it’s also a bad idea to use cpows for anything security-related, since you may get
results that are not consistent with surrounding code that might use the message manager.
Storage access policy: Block cookies from trackers
report broken sites if you find a website broken as a
result of this change, file a bug under the tracking protection component within the firefox product on bugzilla.
...on the social media website, the network annotates the advertisement landing page url with a query parameter that signals that the visit was the
result of a click on an advertisement.
HTMLIFrameElement.clearMatch()
invoking this method
results in a mozbrowserfindchange event firing, which carries details about the search
results.
... examples the following function is taken from our browser api demo, and (amongst other things) clears the search
results when the search bar is hidden, if an existing search is active.
HTMLIFrameElement.executeScript()
examples var request1 = browser.executescript( var a = 3; a + 3 , {url: 'http://example.com/index.html'}); request1.onsuccess = function() { console.log(request1.
result); // 6 } var request2 = browser.executescript( new promise((resolve, reject) => { settimeout(function() { resolve(6); }, 1000}) ) , {origin: 'http://example.com'}); request2.onsuccess = function() { console.log(request2.
result); // 6 } if the script value is a not a promise, it is simply returned as the request value.
... if the script value is a promise, the
result of the request will be the promise-resolved value.
HTMLIFrameElement.getCanGoBack()
syntax instanceofhtmliframeelement.getcangoback() .then(function(
result) { ...
... example function canmovebwd() { browser.getcangoback().then(function(
result) { if (
result) { back.disabled = false; console.log("it's possible to navigate the history backward."); } else { back.disabled = true; console.log("it's not possible to navigate the history backward."); } }); } specification not part of any specification.
HTMLIFrameElement.getCanGoForward()
syntax instanceofhtmliframeelement.getcangoforward() .then(function(
result) { ...
... example function canmovefwd() { browser.getcangoforward().then(function(
result) { if (
result) { fwd.disabled = false; console.log("it's possible to navigate the history forward."); } else { fwd.disabled = true; console.log("it's not possible to navigate the history forward."); } }); } specification not part of any specification.
HTMLIFrameElement.getContentDimensions()
the x and y dimensions are available in the request.
result.x and request.
result.y properties, respectively.
... examples var browser = document.queryselector('iframe'); var request = browser.getcontentdimensions(); request.onsuccess = function() { console.log("page size:", request.
result.width + "x" + request.
result.height); } request.onerror = function() { console.log("download error"); } specification not part of any specification.
HTMLIFrameElement.getMuted()
the muted value is available in the request.
result property, and is a boolean value — true means muted, and false means unmuted.
... example callback version: var browser = document.queryselector('iframe'); var request = browser.getmuted(); request.onsuccess = function() { if(request.
result) { console.log('the browser is muted.'); } else { console.log('the browser is unmuted.'); } } promise version: var browser = document.queryselector('iframe'); browser.getmuted().then(function(muted) { if(muted) { console.log('the browser is muted.'); } else { console.log('the browser is unmuted.'); } }); specification not part of any specification.
HTMLIFrameElement.getStructuredData()
if the request is successful, the request.
result is a json object representation of all microdata contained on the page loaded in the browser.
... examples var browser = document.queryselector('iframe'); browser.addeventlistener('mozbrowserloadend',function() { var request = browser.getstructureddata(); request.onsuccess = function() { console.log(request.
result); } }); running this code in a browser api app and then loading up a page that contains microdata (such as the website of british alt-country band salter cane) will
result in a json object being returned, along the lines of: { "items": [ { "type":["http://microformats.org/profile/hcard"], "properties":{"fn":["chris askew"], "n":[ { "properties": { "given-name":["chris"], "family-name":["askew"], ...
HTMLIFrameElement.getVisible()
if the request is successful, the request's
result is a boolean indicating the visible state of the browser <iframe>.
... example var browser = document.queryselector('iframe'); var request = browser.getvisible(); request.onsuccess = function() { console.log('the visible state is: ' + this.
result ?
HTMLIFrameElement.getVolume()
the volume value is available in the request.
result property, and is a floating point number between 0 and 1.
... example callback version: var browser = document.queryselector('iframe'); var request = browser.getvolume(); request.onsuccess = function() { console.log('the current browser volume is ' + request.
result); } promise version: var browser = document.queryselector('iframe'); browser.getvolume().then(function(volume) { console.log('the current browser volume is ' + volume); }); specification not part of any specification.
mozbrowseractivitydone
if the activity has a returnvalue set to true, then the activity is consumed when post
result or posterror is invoked on the activity by the receiving app.
...post
result and posterror calls made on such an activity will be ignored and have no effect.
Browser API
htmliframeelement.findnext() highlights the next or previous instance of a search
result after a findall() search has been carried out.
... mozbrowseropentab sent when a new tab is opened within a browser <iframe> as a
result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) mozbrowserresize sent when the browser <iframe>'s window size has changed.
How test harnesses work
mozilla test harnesses are typically composed of a python runner that invokes firefox, utilizes the browser to run tests, and reports the
results.
...ile via mozrunner) sets appropriate test preferences inserts a shim extension in the profile (for non-marionette tests) gathers the tests (manifestdestiny) potentially sets up an http server for test data (mozhttpd) invokes the binary (mozrunner) it is the job of the shim extension to shut down the browser logging (mozlog, in theory) (run tests, accrue
results) cleanup: shutdown the browser check for crashes (mozcrash) reporting (moztest) marionette tests list of testing extensions pageloader (talos) mochitest: //github.com/realityripple/uxp/blob/master/testing/mochitest/install.rdf (mochitest) ...
IPDL Tutorial
the generated c++ will
result in something containing: class pplugininstanceparent { public: typedef mozpromise<tuple<bool, bool> responserejectreason, true> asyncinitpromise; typedef mozpromise<bool, responserejectreason, true> otherfunctionpromise; void sendasyncinit(mozilla::ipc::resolvecallback<tuple<bool, bool>>&& aresolve, mozilla::ipc::rejectcallback&& areject); refptr<asyncinitpromise> ...
... the generated c++ will
result in something like: class pplugininstancechild { public: typedef std::function<void(tuple<const bool&, const bool&>)> asyncinitresolver; typedef std::function<void(const bool&)> otherfunctionresolver; virtual mozilla::ipc::ipc
result recvasyncinit(asyncinitresolver&& aresolve) = 0; virtual mozilla::ipc::ipc
result recvotherfunction(otherfunctionresolver&& aresolver) = 0 }; to make ...
IPDL Type Serialization
each type specializes ipc::paramtraits as follows: namespace ipc { template <> struct paramtraits<mytype> { typedef mytype paramtype; static void write(message* amsg, const paramtype& aparam) { // implement serialization here } static bool read(const message* amsg, void** aiter, paramtype* a
result) { // implement deserialization here.
... nscstring j; int k[4]; }; namespace ipc { template <> struct paramtraits<examplestruct> { typedef examplestruct paramtype; static void write(message* amsg, const paramtype& aparam) { writeparam(amsg, aparam.i); writeparam(amsg, aparam.j); for (int i = 0; i < 4; ++i) writeparam(amsg, aparam.k[i]); } static bool read(const message* amsg, void** aiter, paramtype* a
result) { if (!readparam(amsg, aiter, &(a
result->i)) || !readparam(amsg, aiter, &(a
result->j))) return false; for (int i = 0; i < 4; ++i) if (!readparam(amsg, aiter, &(a
result->k[i]))) return false; return true; } }; } // namespace ipc once you have a serializer for a type, you can serialize a collection of it (ex: an nstarray<examplestruct>) by simply dec...
JavaScript Tips
it is often faster to store the
result in a temporary variable.
...ript this is quite simple even in the case of a weak reference which in c++ requires a helper class: var weakobserver = { queryinterface: function queryinterface(aiid) { if (aiid.equals(components.interfaces.nsiobserver) || aiid.equals(components.interfaces.nsisupportsweakreference) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.
results.ns_nointerface; }, observe: function observe(asubject, atopic, astate) { } } when declaring xpcom methods, try to use the same names for method parameters as are used in the interface definition.
AsyncShutdown.jsm
this function is evaluated during the phase and the phase is guaranteed to not terminate until the
resulting promise is either resolved or rejected.
...note that a
result of false may mean either that the blocker has never been installed or that the phase has completed and the blocker has already been resolved.
source-editor.jsm
lastfind object an object describing the
result of the last find operation performed using the find(), findnext(), or findprevious() method.
... index number an integer value indicating the
result of the most recent find operation; this is the index into the text at which str was found, or -1 if the string wasn't found.
Localization content best practices
date and time formats for example, you shouldn't hard code date formats into applications: %a, %b %e //
resulting in wednesday, may 20 this is fine in english, but in italian
results in "mercoledì, mag 20", which sounds unnatural.
...for example, by proceeding you accept the {{terms of service}} will
result in the gaelic translation ma leanas tu air adhart, bidh tu a' gabhail ri {{teirmichean na seirbheise}}.
Localizing with Mercurial
ps c:\users\your_id> cd c:\mozilla-build\hg ps c:\mozilla-build\hg> .\add_path.exe /
result .
...ode): [paths] default = https://hg.mozilla.org/l10n-central/ab-cd/ default-push = ssh://hg.mozilla.org/l10n-central/ab-cd/ you’ll also need to tell ssh which account to use for your pushes, too, by editing ~/.ssh/config and adding these lines, where user@host.domain is your account: host hg.mozilla.org user user@host.domain now you can push your work to the repository (and check the
result on the dashboard) by entering this command from your local directory: hg push and tah dah!
Uplifting a localization from Central to Aurora
that's gonna conflict, and you need to resolve that with your merge tool so that the
resulting localized file doesn't have the string any more.
...at this point, your
resulting workrepo has no more conflicts, and thus it's time to publish it again.
Creating localizable web applications
if you indent "second part", the
resulting string (interpreted by php and gettext) will end up indented as well.
...good: image file (/img/tignish/firefox/performance-chart.png): html: (in this case, no gettext was used and the localizers worked on pure html files) <div id="performance-chart"> <h4>firefox performance: fast — faster — <em>fastest</em></h4> <p>
results of a sunspider test on a windows xp machine</p> <img src="/img/tignish/firefox/performance-chart.png" alt="firefox 2, firefox 3, firefox 3.5 performance chart" /> <ul> <li>18,148 ms</li> <li>3,669 ms</li> <li>1,524 ms!</li> </ul> </div> in the above example, not only does the text above the clock charts require translation, but so do the milliseconds captions below them.
What every Mozilla translator should know
if so, change the state of the bug to verified and write verified1.8.xxx in the keyword field tinderbox in tinderbox you can see the
result of the build process.
...in this case the
resultant installable file will be available in the mozilla ftp servers: firefox nightly builds thunderbird nightly builds qa (quality assurance) in order to assure the quality of a build we should make some tests using http://litmus.mozilla.org ...
gettext
the second part is evaluated and the
result of the evaluation is used to choose the right msgstr.
...xgettext --language=php \ --add-comments=l10n \ --keyword=___:1 \ --keyword=___:1,2c \ --keyword=n___:1,2 \ --keyword=n___:1,2,4c \ file.php running xgettext will
result in the following messages.po file: # some descriptive title.
Using the viewport meta tag to control layout on mobile browsers
mobiles) render pages in a virtual window or viewport, which is usually wider than the screen, and then shrink the rendered
result down so it can all be seen at once.
...the
result is horizontal scroll is suppressed in any orientation and the user can zoom in if they want to.
Leak-hunting strategies and tips
double-addref: this happens most often when assigning the
result of a function that returns an addrefed pointer (bad!) into an nscomptr without using dont_addref().
...it may just involve setting the xpc_shutdown_heap_dump environment variable to a file name, but i haven't tested that.) post-processing of stack traces on mac and linux, the stack traces generated by our internal debugging tools don't have very good symbol information (since they just show the
results of dladdr).
Memory reporting
and if amallocsizeof is passed a pointer that doesn't point to the start of an object it will give bogus
results or even crash.
... it's important that no memory is measured twice; this can lead to strange
results in about:memory.
Power profiling overview
as a
result, it is worth optimizing (i.e.
... devices such as ammeters give the best
results, but these can be expensive and difficult to set up.
Profiling with Xperf
the 'stack' view will give
results similar to shark.
...to start a trace session, launching a new firefox instance: xperf -on base xperf -start heapsession -heap -pidnewprocess "./firefox.exe -p test -no-remote" -stackwalk heapalloc+heaprealloc -buffersize 512 -minbuffers 128 -maxbuffers 512 to stop a session and merge the
resulting files: xperf -stop heapsession -d heap.etl xperf -d main.etl xperf -merge main.etl heap.etl
result.etl "
result.etl" will contain your merged data; you can delete main.etl and heap.etl.
Refcount tracing and balancing
refcount balancing is a follow-up step that analyzes the
resulting log to help a developer figure out where refcounting went wrong.
...this
results in slower code, but at least you get some data about where the leaks might be occurring from.
powermetrics
the first column counts interrupt-level wakeups that
resulted in a thread being dispatched in the process.
...
results in lower power consumption — for all of these measurements.
browser.search.context.loadInBackground
type:boolean default value:false exists by default: yes application support: firefox 13.0 status: active; last updated 2012-02-17 introduction: pushed to nightly on 2012-02-15 bugs: bug 727131 values true new tab with search
results will be opened in the background, focus stays on the current tab.
... false (default) new tab with search
results will be opened in the foreground.
L20n Javascript API
ctx.requestlocales('pl'); if registerlocales hasn't been called, the special i-default locale is used, which means that the following minimal code is valid and will
result in a fully operational context instance.
... context.translationerror, when the translation is present but broken in one of supported locales; the context instance will try to retrieve a fallback translation from the next locale in the fallback chain, parser.error, when l20n is unable to parse the syntax of a resource; this might
result in entities being broken which in turn can lead to above error being emitted.
NSPR's Position On Abrupt Thread Termination
i resist including this function in nspr because it
results in bad programming practice and unsupportable programs.
...in that environment, exit() may be called and any time, and
results in the calling thread's immediate termination.
NSPR LOG MODULES
to enable all log module calls to pr_log, set the variable as follows: set nspr_log_modules=all:5 timestamp including timestamp
results in a timestamp of the form "2015-01-15 21:24:26.049906 utc - " prefixing every logged line.
... append including append
results in log entries being appended to the existing contents of the file referenced by nspr_log_file.
PR_AtomicIncrement
returns the function returns the incremented value (i.e., the
result).
...the
result of the function is the value of the memory after the operation.
HTTP delegation
one might expect the api defines a simple function that accepts the uri and data to be sent, and returns the
result data.
...once the http response has been obtained from the http server, the function will provide the
results in its "out parameters".
HTTP delegation
one might expect the api defines a simple function that accepts the uri and data to be sent, and returns the
result data.
...once the http response has been obtained from the http server, the function will provide the
results in its "out parameters".
NSS_3.12.1_release_notes.html
bug 311432: ecc's ecl_use_fp code (for linux x86) fails pairwise consistency test bug 330622: certutil's usage messages incorrectly document certain options bug 330628: coreconf/linux.mk should _not_ default to x86 but
result in an error if host is not recognized bug 359302: remove the sslsample code from nss source tree bug 372241: need more versatile form of cert_nametoascii bug 390296: nss ignores subject cn even when san contains no dnsname bug 401928: support generalized pkcs#5 v2 pbes bug 403543: pkix: need a way to enable/disable aia cert fetching bug 408847: pkix_ocspchecker_check does not support ...
...specified responder (and given signercert) bug 414003: crash [[@ cert_decodecertpackage] sometimes with this testcase bug 415167: memory leak in certutil bug 417399: arena allocation
results are not checked in pkix_pl_infoaccess_parselocation bug 420644: improve ssl tracing of key derivation bug 426886: use const char* in pk11_importcertforkey bug 428103: cert_encodesubjectkeyid is not defined in any public header file bug 429716: debug builds of libpkix unconditionally dump socket traffic to stdout bug 430368: vfychain -t option is undocumented bug 430369: vfychain -o succeeds even if -pp is not specified bug 430399: vfychain -pp crashes bug 430405: error log is not produced by cert_pkixverifycert bug 430743: update ssltap to understand the tls session ticket extension ...
NSS_3.12_release_notes.html
bug 354403: nsslist_createiterator returns pointer to a freed memory if the function fails to allocate a lock bug 399236: pkix wrapper must print debug output into stderr bug 399300: pkix error
results not freed after use.
...sage of uninitialized variable in ckfw/mechanism.c(719) bug 401986: mac os x leopard build failure in legacydb bug 325805: diff considers mozilla/security/nss/cmd/pk11util/scripts/pkey a binary file bug 385151: remove the link time dependency from nss to softoken bug 387892: add entrust root ca certificate(s) to nss bug 433386: when system clock is off by more than two days, oscp check fails, can
result in crash if user tries to view certificate [[@ secitem_compareitem_util] [[@ memcmp] bug 396256: certutil and pp do not print all the generalnames in a crldp extension bug 398019: correct confusing and erroneous comments in der_asciitotime bug 422866: vfychain -pp command crashes in nss_shutdown bug 345779: useless assignment statements in ec_gf2m_pt_mul_mont bug 349011: please stop exporting the...
NSS 3.16.2.3 release notes
new functionality tls_fallback_scsv is a signaling cipher suite value that indicates a handshake is the
result of tls version fallback.
... in sslproto.h tls_fallback_scsv - a a signaling cipher suite value that indicates a handshake is the
result of tls version fallback.
NSS 3.17.1 release notes
new functionality tls_fallback_scsv is a signaling cipher suite value that indicates a handshake is the
result of tls version fallback.
... in sslproto.h tls_fallback_scsv - a a signaling cipher suite value that indicates a handshake is the
result of tls version fallback.
NSS 3.35 release notes
parallel database access, by multiple applications, is forbidden as it will likely
result in data corruption.
...experimental functions will always return this
result if they are disabled or removed from a later nss release.
NSS 3.45 release notes
if no such certificates can be found, returns secsuccess and sets *
results to null.
... if a failure is encountered while fetching any of the matching certificates, secfailure is returned and *
results will be null.
NSS Sample Code Sample1
// utility function to print hex data static void printbuffer(unsigned char *digest, unsigned int len) { int i; cout << "length: " << len << endl; for(i = 0;i < len;i++) printf("%02x ", digest[i]); cout << endl; } // xxx data protection // - takes an input buffer, applies the encryption // and mac, and generates a buffer with the
result.
... // - the application sends or uses the
result (possibly // after base64 encoding it.
NSS Sample Code sample4
p; } modulus_len = seckey_publickeystrength(pubkey); fprintf(stderr, "public key modulus %d bytes\n", modulus_len); buf1 = (char *)malloc(modulus_len); buf2 = (char *)malloc(modulus_len); /* initialize buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= (i %26) + 'a'; } buf1[modulus_len-1] = '\0'; fprintf(stderr, "buffer being encrypted = \n%s\n", buf1); /* encrypt buf1,
result will be in buf2 */ rv = pk11_pubencryptraw(pubkey, buf2, buf1, modulus_len, null); if (rv != secsuccess) { fprintf(stderr, "encrypt with public key failed (err %d)\n", pr_geterror()); goto cleanup; } pvtkey = pk11_findkeybyanycert(cert, null); if (pvtkey == null) { fprintf(stderr, "couldn't find private key for cert testca (err %d)\n", pr_geterro...
...r()); goto cleanup; } /* clear buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= '\0'; } /* decrypt buf2,
result will be in buf1 */ rv = pk11_pubdecryptraw(pvtkey, buf1, &outlen, modulus_len, buf2, modulus_len); if (rv != secsuccess) { fprintf(stderr, "decrypt with private key failed (err %d)\n", pr_geterror()); goto cleanup; } fprintf(stderr, "
result of decryption, outlen = %d\n", outlen); fprintf(stderr, "
result of decryption, buf = \n%s\n", buf1); exit(0); cleanup: if (cert) cert_destroycertificate(cert); if (pubkey) seckey_destroypublickey(pubkey); if (pvtkey) seckey_destroyprivatekey(pvtkey); if (buf1) free(buf1); if (buf2) free(buf2); exit(1); } char *passwdcb(pk11slotinfo *in...
NSS Sample Code sample5
p; } modulus_len = seckey_publickeystrength(pubkey); fprintf(stderr, "public key modulus %d bytes\n", modulus_len); buf1 = (char *)malloc(modulus_len); buf2 = (char *)malloc(modulus_len); /* initialize buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= (i %26) + 'a'; } buf1[modulus_len-1] = '\0'; fprintf(stderr, "buffer being encrypted = \n%s\n", buf1); /* encrypt buf1,
result will be in buf2 */ rv = pk11_pubencryptraw(pubkey, buf2, buf1, modulus_len, null); if (rv != secsuccess) { fprintf(stderr, "encrypt with public key failed (err %d)\n", pr_geterror()); goto cleanup; } nickname.type = sibuffer; nickname.data = "pvtkeynickname"; nickname.len = strlen("pvtkeynickname"); rv = atob_convertasciitoitem(&der, pvtkstr); if (rv!= secsu...
...ll, null, pr_false, pr_true, ku_all, &pvtkey, null); secitem_freeitem(&der, pr_false); if (pvtkey == null) { fprintf(stderr, "couldn't extract private key (err %d)\n", pr_geterror()); goto cleanup; } /* clear buf1 */ for (i=0;i<modulus_len;i++) { buf1[i]= '\0'; } /* decrypt buf2,
result will be in buf1 */ rv = pk11_pubdecryptraw(pvtkey, buf1, &outlen, modulus_len, buf2, modulus_len); if (rv != secsuccess) { fprintf(stderr, "decrypt with private key failed (err %d)\n", pr_geterror()); goto cleanup; } fprintf(stderr, "
result of decryption, outlen = %d\n", outlen); fprintf(stderr, "
result of decryption, buf = \n%s\n", buf1)...
NSS sources building testing
you can find the test suite
results in directory nss/../tests_
results (i.e.
... the
results directory ends up next to the nss directory, not within it).
Small Footprint
to build such minimalist jar without debug information, run the following command from the top directory of rhino distribution: ant clean ant -ddebug=off -dno-regexp=true -dno-e4x=true smalljar if you omit -dno-regexp=true, then the
resulting smalljs.jar will include regular expression support.
... similarly omitting -dno-e4x=true
results in smalljs.jar that includes runtime support for e4x.
Rhino JavaScript compiler
the
resulting java class files can then be loaded and executed at another time, providing a convenient method for transferring javascript, and for avoiding translation cost.
...this option can be used to avoid distributing source or simply to save space in the
resulting class file.
GC Rooting Guide
if (!waserror) *valueout =
resultvalue; return waserror; } void otherfunction(jscontext *cx) { js::value value; bool success = maybegetvalue(cx, &value); // ...
... if (!waserror) valueout.set(
resultvalue); return waserror; } void otherfunction(jscontext *cx) { js::rootedvalue value(cx); bool success = maybegetvalue(cx, &value); // ...
Invariants
(it would
result in a bug where the wrong variable is used.
...(wrong
results or a potentially exploitable crash.
SpiderMonkey Internals
it translates postfix bytecode into infix source by consulting a separate byte-sized code, called source notes, to disambiguate bytecodes that
result from more than one grammatical production.
... } } delete sumofdivisors; print("that's all."); } the line number to pc and back mappings can be tested using the js program with the following script: load("perfect.js"); print(perfect); dis(perfect); print(); for (var ln = 0; ln <= 40; ln++) { var pc = line2pc(perfect, ln); var ln2 = pc2line(perfect, pc); print("\tline " + ln + " => pc " + pc + " => line " + ln2); } the
result of the for loop over lines 0 to 40 inclusive is: line 0 => pc 0 => line 16 line 1 => pc 0 => line 16 line 2 => pc 0 => line 16 line 3 => pc 0 => line 16 line 4 => pc 0 => line 16 line 5 => pc 0 => line 16 line 6 => pc 0 => line 16 line 7 => pc 0 => line 16 line 8 => pc 0 => line 16 line 9 => pc 0 => line 16 line 10 => pc 0 => line 16 line 11 => pc 0 => line 16 line 12 => pc 0 => line 16 line 13 ...
JSAPI User Guide
* if there's no error it just keeps going.) */ jsbool compileandrepeat(jscontext *cx, const char *filename) { jsscript *script; script = js_compileutf8file(cx, js_getglobalobject(cx), filename); if (!script) return false; /* compilation error */ for (;;) { jsval
result; if (!js_executescript(cx, js_getglobalobject(cx), script, &
result)) break; js_maybegc(cx); } return false; } the lifetime of the compiled script is tied to the lifetime of a javascript object, the garbage collector destroys the script when it is no longer reachable.
...pt = js_compileutf8file(cx, js_getglobalobject(cx), filename); if (!script) return false; /* compilation error */ scriptobj = js_newscriptobject(cx, script); if (!scriptobj) { js_destroyscript(cx, script); return false; } if (!js_addnamedobjectroot(cx, &scriptobj, "compileandrepeat script object")) return false; for (;;) { jsval
result; if (!js_executescript(cx, js_getglobalobject(cx), script, &
result)) break; js_maybegc(cx); } js_removeobjectroot(cx, &scriptobj); /* scriptobj becomes unreachable and will eventually be collected.
BOOLEAN_TO_JSVAL
if b is false, the
result is jsval_false.
... if b is true, the
result is jsval_true.
JS::CompileOffThread
afterwards, js::finishoffthreadscript must be invoked on the main thread to get the
result script or nullptr.
... the characters passed in to js::compileoffthread must remain live until the callback is invoked, and the
resulting script will be rooted until the call to finishoffthreadscript.
JS::NewFunctionFromSpec
behavior handleid the
result of a successful call to propertyspecnametopermanentid(cx, fs->name, &id).
... id is the
result of a successful call to propertyspecnametopermanentid(cx, fs->name, &id).
JSVAL_TO_GCTHING
the type of the
result is void *.
...otherwise the
resulting pointer is undefined.
JS_CompileScript
if the jsoption_compile_n_go option is set in cx, the
resulting script must be executed in this scope, and at most once.
...on success, script receives the
result script.
JS_ConcatStrings
description js_concatstrings concatenates two js strings, str1 and str2, and returns the
result.
... the
result could be the same as one of the input strings, if the other string is zero length.
JS_EncodeCharacters
*/ js_free(cx, dst); return js_true; on success, js_encodecharacters sets *dstlenp to the real
result length and returns js_true.
... this happens if the destination is too small for the
resulting string or if the source buffer isn't proper utf-16 because it contains unpaired surrogate values.
JS_EnterLocalRootScope
js_leavelocalrootscope(cx); return ok; } note: js_leavelocalrootscope or js_leavelocalrootscopewith
result must be called once for every prior successful call to js_enterlocalrootscope.
...local root scopes do not cover objects that are the
result of jsapi calls like js_getproperty or js_callfunction.
JS_GetFunctionArity
specifically, if fun is a native function, the
result is the value that was passed to the nargs parameter of js_definefunction.
... otherwise fun is implemented in javascript, and the
result is the number of identifiers in its formal parameter list (see ecma 262-3 §13).
JS_HasInstance
on success, *bp receives the
result of the test.
... on success, js_hasinstance stores the
result of the instanceof test in *bp and returns true.
JS_NewArrayObject
js_newarrayobject with length parameter creates a new array object with the specified length; the
result is like the javascript expression new array(length).
...(this means that if length is nonzero and vector is null, the
result is like the javascript expression new array(length).
JS_PropertyStub
syntax bool js_propertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp); bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, js::mutablehandlevalue vp, js::objectop
result &
result); // added in spidermonkey 45 bool js_strictpropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool strict, js::mutablehandlevalue vp); // obsolete since jsapi 39 bool js_resolvestub(jscontext *cx, js::handleobject obj, js::handleid id, bool *resolvedp); // obsolete since jsapi 37 bool js_deletepropertystub(jscontext *cx, js::handleobject obj, js::handleid id, bool *succeede...
... see also mxr id search for js_propertystub mxr id search for js_strictpropertystub jspropertyop jsstrictpropertyop bug 1103152 - removed js_deletepropertystub, js_enumeratestub, js_resolvestub, and js_convertstub bug 736978 - removed js_finalizestub bug 1113369 -- added
result parameter ...
JS_ValueToInt32
if the
result is nan, an infinity, or a number outside the 32-bit range, js_valuetoint32 reports an error and conversion fails.
...js::toint32 rounds as specified in ecma 262-3 §9.5, while this routine rounds by adding 0.5 to the converted float-point number and truncating the
result at the decimal point.
JS_ValueToNumber
if v is undefined, null, false, or true, conversion succeeds, and the
result is nan, 0, 0, or 1 respectively.
... otherwise, the
resulting object's tostring method, if any, is called.
SpiderMonkey 1.8.5
jsautorequest jsautosuspendrequest jsautocheckrequest jsautoentercompartment js::anchor<> js::call obsolete apis js_clearnewbornroots js_enterlocalrootscope js_leavelocalrootscope js_leavelocalrootscopewith
result js_forgetlocalroot js_newgrowablestring deleted apis js_addnamedroot – use js_add*root js_addnamedrootrt – use js_add*root js_addroot – use js_add*root js_clearnewbornroots – no longer needed js_clearoperationcallback js_clearregexproots js_decompilescript js_destroyscript js_enterlocalrootscope js_executescriptpart js_forgetlocalroot js_getfunctionname js_getoperationlim...
...it js_getscriptobject js_getstringbytes js_getstringchars js_isassigning js_leavelocalrootscope js_leavelocalrootscopewith
result js_newdouble js_newdoublevalue js_newscriptobject js_newstring js_poparguments js_pusharguments js_pushargumentsva js_removeroot js_removerootrt js_sealobject js_setbranchcallback js_setcallreturnvalue2 js_setcheckobjectaccesscallback js_setobjectprincipalsfinder js_setoperationlimit js_setprincipalstranscoder api changes operation callback js_setoperationcallback was introduced in js 1.8.0, replacing the branch callback, in anticipation of the addition of the tracing jit (tracemonkey).
SpiderMonkey 1.8
a handful of changes are not backwards-compatible: the
result of assigning to a property with a setter has changed (bug 312354).
...specifically, if a property lookup first calls a resolve hook which does not define the property, then finds the property on a prototype, that
result can be cached.
Frecency algorithm
places with this value can show up in autocomplete
results.
... invalid places have a frecency value of zero, and will not show up in autocomplete
results.
Using the Places annotation service
value_type constants in mozistoragevaluearray.idl: after bug 377066 the value_type_* type handling was changed to this: type_int32 = 1 type_double = 2 type_string = 3 type_binary = 4 type_int64 = 5 try { var value = annotationservice.getpageannotation(uri, "my_extension/some_annotation"); } catch(e) { // annotation does not exist } other functions getpageswithannotation(aname,
resultcount,
results); getitemswithannotation(aname,
resultcount,
results); retrieves a list of all pages/items with the given annotation.
... getpageannotationnames(auri, count,
result); getitemannotationnames(aitem, count,
result); retrieves a list of all the annotations on a given uri or id.
Using the Places history service
to maintain backwards compatibility, each version has implemented the older interfaces,
resulting in functionality spread across many interfaces.
...the parameters within on query as anded together as in executequery(), then the
results of the different queries in the array are ored together.
places.sqlite Database Troubleshooting
then open an sqlite shell: my_work_folder> sqlite3 places.sqlite-corrupt sqlite> pragma integrity_check; if the
result is ok, this guide won't help; stop here and please file a bug.
... sqlite> .exit open a new shell for the new database: my_work_folder> sqlite3 places.sqlite sqlite> pragma integrity_check; if the
result is not ok, the file cannot be recovered; stop here and please file a bug.
Aggregating the In-Memory Datasource
for us to preserve symmetry, our queryinterface() implementation needs to forward nsirdfdatasource to the delegate3: ns_imethodimp myclass::queryinterface(refnsiid aiid, void** a
result) { ns_precondition(a
result != nsnull, "null ptr"); if (!
... a
result) return ns_error_null_pointer; if (aiid.equals(nscomtypeinfo<nsimyinterface>::getiid()) || aiid.equals(nscomtypeinfo<nsisupports>::getiid())) { *a
result = ns_static_cast(nsiglobalhistory*, this); } else if (aiid.equals(nscomtypeinfo<nsirdfdatasource>::getiid())) { return minner->queryinterface(aiid, a
result); } else { *a
result = nsnull; return ns_nointerface; } ns_addref(ns_static_cast(nsisupports*, a
result)); return ns_ok; } the only other thing that you'll need to be aware of is that you'll need to queryinterface() from nsisupports to nsirdfdatasource before you can actually do anything useful with the datasource from within your object.
Avoiding leaks in JavaScript XPCOM components
it's also worth noting that failing to unregister an observer that's attached to something temporary (such as a controller or event listener) can cause the garbage collector to take an extra cycle to clean up everything that was associated with a document if the temporary object itself is destroyed as a
result of garbage collection.
... var private_data = 0; var
result = new array();
result[0] = function() { return (private_data += 1); }
result[1] = function() { return (private_data *= 2); } return
result; } // this function returns the string "
results: 1, 2, 4, 0, 5, 1, 10." function test() { var fns1 = function_array(); var fns2 = function_array(); return "
results: " + fns1[0]() + ", " + // increments first private_data to...
Components.Exception
these exception objects may be thrown when implementing xpcom interfaces in javascript, and they can provide better diagnostics in the error console if not caught than simply throwing an ns
result's value will.
... syntax var exception = [ new ] components.exception([ message [,
result [, stack [, data ] ] ] ]); parameters message a string which can be displayed in the error console when your exception is thrown or in other developer-facing locations, defaulting to 'exception'
result the ns
result value of the exception, which defaults to components.
results.ns_error_failure stack an xpcom stack to be set on the exception (defaulting to the current stack chain) data any additional data you might want to store, defaulting to null example throw components.exception("i am throwing an exception from a javascript xpcom component."); ...
Using components
var { cu: utils, ci: interfaces, cc: classes, cr:
results, cs: stack, cm: manager, ce: exception, } = components; here is a full breakdown of what is contained in components.
... any of the below can be accessed by components.blah (ie: components.issuccesscode) utils=[object nsxpccomponents_utils] interfaces=[object nsxpccomponents_interfaces] classes=[object nsxpccomponents_classes]
results=[object nsxpccomponents_
results] issuccesscode=function issuccesscode() { [native code] } constructor=[object nsxpccomponents_constructor] queryinterface=function queryinterface() { [native code] } interfacesbyid=[object nsxpccomponents_interfacesbyid] classesbyid=[object nsxpccomponents_classesbyid] stack=js frame :: scratchpad/4 :: cdump :: line 8 manager=[xpconnect wrapped nsicomponentmanager] id=[object nsxpccomponents_id] exception=[object nsxpccomponents_exception] reporterror=function reporterror() { [native code] } cancreatewrapper=function cancreatewrapper() { [native code]...
nsDirectoryService
*/ ns
result gettempdir(nsifile **a
result) { ns
result rv; nscomptr<nsiservicemanager> svcmgr; rv = ns_getservicemanager(getter_addrefs(svcmgr)); if (ns_failed(rv)) return rv; nscomptr<nsiproperties> directory; rv = svcmgr->getservicebycontractid("@mozilla.org/file/directory_service;1", ns_get_iid(nsiproperties), gett...
...er_addrefs(directory)); if (ns_failed(rv)) return rv; rv = directory->get(ns_os_temp_dir, ns_get_iid(nsifile), a
result); return rv; } note that ns_os_temp_dir is defined in nsdirectoryservicedefs.h along with a number of other directory service keys.
NS_InitXPCOM2
#include "nsxpcom.h" ns
result ns_initxpcom2( nsiservicemanager** a
result, nsifile* abindirectory, nsidirectoryserviceprovider* aappfilelocationprovider ); parameters a
result [out] the
resulting xpcom service manager.
...the
resulting interface pointer is addref'd upon return and must either be release'd explicitly or passed to ns_shutdownxpcom when the application is finished with xpcom.
NS_InitXPCOM3
#include "nsxpcom.h" ns
result ns_initxpcom3( nsiservicemanager** a
result, nsifile* abindirectory, nsidirectoryserviceprovider* aappfilelocationprovider, nsstaticmoduleinfo const* astaticmodules, pruint32 astaticmodulecount ); parameters a
result [out] the
resulting xpcom service manager.
...the
resulting interface pointer is addref'd upon return and must either be release'd explicitly or passed to ns_shutdownxpcom when the application is finished with xpcom.
Core XPCOM functions
calfile that provides a platform independent representation of a file path.ns_newnativelocalfilethe ns_newnativelocalfile function creates an instance of nsilocalfile that provides a platform independent representation of a file path.ns_reallocreallocates a block of memory using the xpcom memory manager.ns_shutdownxpcomthe ns_shutdownxpcom function terminates use of xpcom in the calling process.ns
resultthe ns
result data type is a strongly-typed enum used to represent a value returned by an xpcom function; these are typically error or status codes.
... for a list of defined
result values, see error codes returned by mozilla apis.
BeginReading
const char_type* beginreading() const; remarks the
resulting character array is not necessarily null-terminated.
... the length of the array is determined by the
result of the length method.
BeginReading
const char_type* beginreading() const; remarks the
resulting character array is not necessarily null-terminated.
... the length of the array is determined by the
result of the length method.
nsCStringEncoding
the conversion may
result in loss and/or corruption of information if the strings do not strictly contain ascii data.
...ns_cstring_encoding_native_filesystem conversion from utf-16 to the native filesystem charset may
result in a loss of information.
nsDependentCString
this is similar to using substring(str, startpos), except that the
resulting string is flat.
... @param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
imgIDecoderObserver
startcontainer(in imgirequest arequest, in imgicontainer acontainer); void onstartdecode(in imgirequest arequest); void onstartframe(in imgirequest arequest, in unsigned long aframe); void onstartrequest(in imgirequest arequest); void onstopcontainer(in imgirequest arequest, in imgicontainer acontainer); void onstopdecode(in imgirequest arequest, in ns
result status, in wstring statusarg); void onstopframe(in imgirequest arequest, in unsigned long aframe); void onstoprequest(in imgirequest arequest, in boolean aislastpart); methods native code only!ondataavailable decode notification.
...void onstopdecode( in imgirequest arequest, in ns
result status, in wstring statusarg ); parameters arequest the request on which data is available, or null if being called for an imgidecoder object.
imgILoader
this means that callers of loadimage should make sure to cancel() the
resulting request before the observer goes away.
...this means that callers of loadimagewithchannel should make sure to cancel() the
resulting request before the observer goes away.
nsIAccessibleTable
the
result differs from 1 if the specified cell spans multiple columns.
...the
result differs from 1 if the specified cell spans multiple rows.
nsIAccessibleTableCell
the
result differs from 1 if the specified cell spans multiple columns.
...the
result differs from 1 if the specified cell spans multiple rows.
nsIAutoCompleteItem
xpfe/components/autocomplete/public/nsiautocomplete
results.idlscriptable please add a summary to this article.
... value astring the
result value using astring to avoid excess allocations.
nsIBrowserHistory
this method designates the url as having been explicitly typed in by the user, so it can be used as an autocomplete
result.
...any pages that become unvisited as a
result are also deleted.
nsICacheEntryDescriptor
inherits from: nsicacheentryinfo last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) method overview void close(); void doom(); void doomandfailpendingrequests(in ns
result status); string getmetadataelement(in string key); void markvalid(); nsiinputstream openinputstream(in unsigned long offset); nsioutputstream openoutputstream(in unsigned long offset); void setdatasize(in unsigned long size); void setexpirationtime(in pruint32 expirationtime); void setmetadataelement(in string key, in string value); void visitmetadata(in nsicachemetadatavisitor visitor); attributes attribute type description accessgranted nscacheaccessmode get t...
...void doomandfailpendingrequests( in ns
result status ); parameters status the access status.
nsICancelable
1.0 66 introduced gecko 1.8 inherits from: nsisupports last changed in gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0) method overview void cancel(in ns
result areason); methods cancel() call this method to request that this object abort whatever operation it may be performing.
... void cancel( in ns
result areason ); parameters areason a failure code indicating why the operation is being canceled.
nsIChannel
after a request has been completed, the channel is still valid for accessing protocol-specific
results.
... this is also used as the ri of the document
resulting from the channel, unless the channel has the load_replace flag set.
nsIClassInfo
void getinterfaces( out pruint32 count, [array, size_is(count), retval] out nsiidptr array ); parameters count the length of the
resulting array.
... array the
resulting array of nsiidptr values.
nsICookiePermission
afirsturi the uri initiated by the user that
resulted in auri being loaded.
...this may
result in other uris being blocked as well, such as uris that share the same host name.
nsICookieService
return value returns the
resulting cookie string.
... return value returns the
resulting cookie string.
nsIDBFolderInfo
ty(in string propertyname, in boolean defaultvalue); void getcharacterset(out acstring charset, out boolean overriden); void getcharactersetoverride(out boolean charactersetoverride); obsolete since gecko 1.8 string getcharptrcharacterset(); string getcharptrproperty(in string propertyname); void getlocale(in nsstring
result); native code only!
...void getlocale( in nsstring
result ); parameters
result missing description exceptions thrown missing exception missing description native code only!getmailboxname obsolete since gecko 1.8 (firefox 1.5 / thunderbird 1.5 / seamonkey 1.0)this feature is obsolete.
nsIDNSListener
inherits from: nsisupports last changed in gecko 1.7 method overview void onlookupcomplete(in nsicancelable arequest, in nsidnsrecord arecord, in ns
result astatus); methods onlookupcomplete() called when an asynchronous host lookup completes.
... void onlookupcomplete( in nsicancelable arequest, in nsidnsrecord arecord, in ns
result astatus ); parameters arequest the value returned from asyncresolve.
nsIDOMXPathException
dom/interfaces/xpath/nsidomxpathexception.idlscriptable describes an exception
resulting from xpath operations.
... see also introduction to using xpath in javascript document object model (dom) level 3 xpath specification nsidomxpathevaluator document.evaluate nsidomxpath
result ...
getFile
if true, this lets the directory service cache
results to improve the performance of directory lookups.
... if false, then the directory service will not cache the
results of this method.
nsIDownloadObserver
inherits from: nsisupports last changed in gecko 1.7 method overview void ondownloadcomplete(in nsidownloader downloader, in nsirequest request, in nsisupports ctxt, in ns
result status, in nsifile
result); methods ondownloadcomplete() called to signal a download that has completed.
... void ondownloadcomplete( in nsidownloader downloader, in nsirequest request, in nsisupports ctxt, in ns
result status, in nsifile
result ); parameters downloader request ctxt status
result ...
nsIException
name string the name of the error code (a string representation of
result) read only.
...
result ns
result the ns
result associated with this exception.
nsIFaviconService
for a given page will give you a uri that, when displayed in chrome, will
result in the given page's favicon.
...getfaviconlinkforicon() this method, for a given icon uri will return a uri that will
result in the image.
nsIFeedProcessor
] .createinstance(components.interfaces.nsifeedprocessor); method overview void parseasync(in nsirequestobserver requestobserver, in nsiuri uri); void parsefromstream(in nsiinputstream stream, in nsiuri uri); void parsefromstring(in astring str, in nsiuri uri); attributes attribute type description listener nsifeed
resultlistener the feed
result listener that will respond to feed events.
... see also nsistreamlistener nsifeed
resultlistener interwiki link ...
nsIFileView
o create an instance, use: var fileview = components.classes["@mozilla.org/filepicker/fileview;1"] .createinstance(components.interfaces.nsifileview); method overview void setdirectory(in nsifile directory); void setfilter(in astring filterstring); void sort(in short sorttype, in boolean reversesort); attributes attribute type description reversesort boolean if true
results will be sorted in ascending order.
...reversesort true,
results will be sorted in ascending order.
nsIHttpChannel
netwerk/protocol/http/nsihttpchannel.idlscriptable this interface allows for the modification of http request parameters and the inspection of the
resulting http response status and headers when they become available.
... note: an http redirect
results in a new channel being created.
nsIJSON
don't forget to gcroot the
result before using it.
...don't forget to gcroot the
result before using it.
nsILoadGroup
inherits from: nsirequest last changed in gecko 1.7 method overview void addrequest(in nsirequest arequest, in nsisupports acontext); void removerequest(in nsirequest arequest, in nsisupports acontext, in ns
result astatus); attributes attribute type description activecount unsigned long returns the count of "active" requests (that is requests without the load_background bit set).
...void removerequest( in nsirequest arequest, in nsisupports acontext, in ns
result astatus ); parameters arequest the request to be removed from the load group.
nsILoginInfo
when an http server sends a 401
result, the www-authenticate header includes a realm to identify the "protection space." see rfc 2617.
... if the
result did not include a realm, or it was blank, the hostname is used instead.
nsIMemory
the
result must be freed with a call to free() when it is no longer needed.
...the
result must be freed with a call to free() when it is no longer needed.
nsIPlacesImportExportService
three nsiobserverservice notifications are fired as a
result of the import.
... three nsiobserverservice notifications are fired as a
result of the import.
Component; nsIPrefBranch
54 [optional] in string adefaultvalue); requires gecko 58 utf8tring getstringpref(in string aprefname, [optional] in utf8string adefaultvalue); void getchildlist(in string astartingat, [optional] out unsigned long acount, [array, size_is(acount), retval] out string achildarray); void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqi
result avalue); long getintpref(in string aprefname,requires gecko 54 [optional] in long adefaultvalue); long getpreftype(in string aprefname); void lockpref(in string aprefname); boolean prefhasuservalue(in string aprefname); boolean prefislocked(in string aprefname); void removeobserver(in string adomain, in nsiobserver aobserver); void r...
... void getcomplexvalue( in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqi
result avalue ); parameters aprefname the complex preference to get the value of.
nsIProgressEventSink
method overview void onprogress(in nsirequest arequest, in nsisupports acontext, in unsigned long long aprogress, in unsigned long long aprogressmax); void onstatus(in nsirequest arequest, in nsisupports acontext, in ns
result astatus, in wstring astatusarg); methods onprogress() called to notify the event sink that progress has occurred for the given request.
...void onstatus( in nsirequest arequest, in nsisupports acontext, in ns
result astatus, in wstring astatusarg ); parameters arequest the request being observed (may qi to nsichannel).
nsIPushService
.getservice(components.interfaces.nsipushservice); method overview void subscribe(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback); void getsubscription(in domstring scope, in nsiprincipal principal, in nsipushsubscriptioncallback callback); void unsubscribe(in domstring scope, in nsiprincipal principal, in nsiunsubscribe
resultcallback callback); methods subscribe() creates a push subscription.
... void unsubscribe( in domstring scope, in nsiprincipal principal, in nsiunsubscribe
resultcallback callback ); parameters scope the unique scope url, as passed to nsipushservice.subscribe().
nsIRequestObserver
inherits from: nsisupports last changed in gecko 1.0 method overview void onstartrequest(in nsirequest arequest, in nsisupports acontext); void onstoprequest(in nsirequest arequest, in nsisupports acontext, in ns
result astatuscode); methods onstartrequest() called to signify the beginning of an asynchronous request.
...void onstoprequest( in nsirequest arequest, in nsisupports acontext, in ns
result astatuscode ); parameters arequest request being observed.
nsIServerSocketListener
inherits from: nsisupports last changed in gecko 1.7 method overview void onsocketaccepted(in nsiserversocket aserv, in nsisockettransport atransport); void onstoplistening(in nsiserversocket aserv, in ns
result astatus); methods onsocketaccepted() this method is called when a client connection is accepted.
...void onstoplistening( in nsiserversocket aserv, in ns
result astatus ); parameters aserv the server socket.
nsIStringBundleService
var stringbundleservice = components.classes["@mozilla.org/intl/stringbundle;1"] .getservice(components.interfaces.nsistringbundleservice); method overview nsistringbundle createbundle(in string aurlspec); nsistringbundle createextensiblebundle(in string aregistrykey); void flushbundles(); wstring formatstatusmessage(in ns
result astatus, in wstring astatusarg); methods createbundle() nsistringbundle createbundle( in string aurlspec ); parameters aurlspec the url of the properties file to load.
... wstring formatstatusmessage( in ns
result astatus, in wstring astatusarg ); parameters astatus the status code.
nsISupports proxies
it has two entry points: ns_imethod getproxyforobject(nsieventqueue *destqueue, const nsiid & iid, nsisupports *object, print32 proxytype, void * *
result); ns_imethod getproxy(nsieventqueue *destqueue, const nsiid & cid, nsisupports *aouter, const nsiid & iid, print32 proxytype, void * *
result); the two apis are essentially the same.
... example usage ns
result rv = ns_ok; nscomptr<nsiproxyobjectmanager> piproxyobjectmanager(do_getservice("@mozilla.org/xpcomproxy;1", &rv)); if(ns_failed(rv)) return rv; nscomptr<ifoo> ptestobj(do_createinstance(foo_contractid, &rv)); if(ns_failed(rv)) return rv; nscomptr<ifoo> pproxy; rv = piproxyobjectmanager->getproxyforobject(ns_proxy_to_main_thread, ifoo::getiid(), ptestobj, ns_proxy_sync | ns_proxy_always, ge...
nsITransferable
failure to do so will
result in fatal assertions in debug builds.
... return value true if the data is large; otherwise, the
result is false.
nsITransportEventSink
inherits from: nsisupports last changed in gecko 1.7 method overview void ontransportstatus(in nsitransport atransport, in ns
result astatus, in unsigned long long aprogress, in unsigned long long aprogressmax); methods ontransportstatus() transport status notification.
... void ontransportstatus( in nsitransport atransport, in ns
result astatus, in unsigned long long aprogress, in unsigned long long aprogressmax ); parameters atransport the transport sending this status notification.
nsITreeView
a value of true will
result in the tree popping up a text field when the user tries to inline edit the cell.
...a value of true will
result in the tree drawing a horizontal separator.
nsIURLParser
out parameters of the methods are all optional (that is the caller may pass-in a null value if the corresponding
results are not needed).
... signed out parameters may hold a value of -1 if the corresponding
result is not part of the string being parsed.
nsIUpdateChecker
methods checkforupdates() checks for available updates, notifying a listener of the
results.
... void checkforupdates( in nsiupdatechecklistener listener, in boolean force ); parameters listener an object implementing nsiupdatechecklistener to be notified of the
results of an update check.
nsIWebBrowserChrome
inherits from: nsisupports last changed in gecko 0.9.6 method overview void destroybrowserwindow(); void exitmodaleventloop(in ns
result astatus); boolean iswindowmodal(); void setstatus(in unsigned long statustype, in wstring status); void showasmodal(); void sizebrowserto(in long acx, in long acy); attributes attribute type description chromeflags unsigned long the chrome flags for this browser chrome.
...void exitmodaleventloop( in ns
result astatus ); parameters astatus the
result code to return from showasmodal().
nsIWebBrowserPersist
result unsigned long value indicating the success or failure of the persist operation.
... persist_flags_from_cache 1 only use cached data (could
result in failure if data is not cached).
nsIWebSocketListener
orts acontext, in pruint32 asize); void onbinarymessageavailable(in nsisupports acontext, in acstring amsg); void onmessageavailable(in nsisupports acontext, in autf8string amsg); void onserverclose(in nsisupports acontext, in unsigned short acode, in autf8string areason); void onstart(in nsisupports acontext); void onstop(in nsisupports acontext, in ns
result astatuscode); methods onacknowledge() called to acknowledge a message sent via nsiwebsocketchannel.sendmsg() or nsiwebsocketchannel.sendbinarymsg().
...void onstop( in nsisupports acontext, in ns
result astatuscode ); parameters acontext user defined context.
nsIXSLTProcessor
return value an document containing the
result of the transformation.
... return value a documentfragment containing the
resulting transform.
NS ENSURE SUCCESS
summary macro returns return-value if ns_failed(ns
result) evaluates to true, and shows a warning on stderr in that case.
... syntax ns_ensure_success(ns
result, return-value); usage ns
result mozmyclass::mozstringmucking() { ns
result rv = ns_cstringcopy(mdeststring, msrcstring); ns_ensure_success(rv, rv); // this is the same as doing: ns
result rv = ns_cstringcopy(mdeststring, msrcstring); if (ns_failed(rv)) return rv; return ns_ok; } ...
XPCOM string functions
this is a low-level api.ns_cstringtoutf16the ns_cstringtoutf16 function converts the value of a nsacstring instance to utf-16 and stores the
result in a nsastring instance.
...this is a low-level api.ns_utf16tocstringthe ns_utf16tocstring function converts the value of a nsastring instance from utf-16 to the specified multi-byte encoding and stores the
result in a nsacstring instance.
nsGetModuleProc
#include "nsxpcom.h" typedef ns
result (pr_callback *nsgetmoduleproc)( nsicomponentmanager *acompmgr, nsifile* alocation, nsimodule** a
result ); parameters acompmgr [in] the xpcom component manager.
... a
result [out] the nsimodule instance.
XPCOM reference
many xpcom pages return an ns
result.
...this causes compile-time errors to occur when improper values are returned as ns
result values, thereby making it easier to catch many bugs.
Setting HTTP request headers
.getservice(components.interfaces.nsiobserverservice); os.addobserver(this, "http-on-modify-request", false); return; } }, queryinterface: function (iid) { if (iid.equals(components.interfaces.nsiobserver) || iid.equals(components.interfaces.nsisupports)) return this; components.returncode = components.
results.ns_error_no_interface; return null; }, }; var mymodule = { registerself: function (compmgr, filespec, location, type) { var compmgr = compmgr.queryinterface(components.interfaces.nsicomponentregistrar); compmgr.registerfactorylocation(this.mycid, this.myname, this.myprogid, ...
...rn this.myfactory; }, mycid: components.id("{9cf5f3df-2505-42dd-9094-c1631bd1be1c}"), myprogid: "@dougt/myhttplistener;1", myname: "simple http listener", myfactory: { queryinterface: function (aiid) { if (!aiid.equals(components.interfaces.nsisupports) && !aiid.equals(components.interfaces.nsifactory)) throw components.
results.ns_error_no_interface; return this; }, createinstance: function (outer, iid) { log("----------------------------> createinstance"); return new myhttplistener(); } }, canunload: function(compmgr) { return true; } }; function nsgetmodule(compmgr, filespec) { return mymodule; } privacy and security good practice a...
XPCOM Thread Synchronization
prlock* mlock; prmonitor* mmonitor; prcondvar* mcvar; fooconstructor() { } ns
result init() { mlock = nsautolock::newlock("foo lock"); // check for null mmonitor = nsautomonitor::newmonitor("foo monitor"); // check for null mcvar = pr_newcondvar(mrawlock); // check for null // ...
... } new construction using namespace mozilla; mutex mlock; monitor mmonitor; condvar mcvar; fooconstructor() : mlock("foo lock"), mmonitor("foo monitor"), mcvar(mlock, "foo condvar") { } ns
result init() { // ...
Xptcall Porting Guide
the invoke functionality requires the implementation of the following on each platform (from xptcall/public/xptcall.h): xptc_public_api(ns
result) ns_invokebyindex(nsisupports* that, pruint32 methodindex, pruint32 paramcount, nsxptcvariant* params); calling code is expected to supply an array of nsxptcvariant structs.
... ns_imethod getinterfaceinfo(nsiinterfaceinfo** info) = 0; // call this method and return
result ns_imethod callmethod(pruint16 methodindex, const nsxptmethodinfo* info, nsxptcminivariant* params) = 0; }; code that wishes to make use of this stubs functionality (such as xpconnect) implement a class which inherits from nsxptcstubbase and implements the getinterfaceinfo and callmethod to let the platform specific code know how to get int...
Address Book examples
search across multiple directories: let abmanager = components.classes["@mozilla.org/abmanager;1"] .getservice(components.interfaces.nsiabmanager); let alladdressbooks = abmanager.directories; while (alladdressbooks.hasmoreelements()) { let ab = alladdressbooks.getnext(); if (ab instanceof components.interfaces.nsiabdirectory && !ab.isremote) { let search
result = abmanager.getdirectory(ab.uri + "?" + searchquery).childcards; // ...
... use search
result as required.
Address book sync client design
*/ void onstopauthoperation(in ns
result astatus, in wstring amsg, in string acookie); /** * notify the observer that the ab sync operation has begun.
... */ void onstopoperation(in print32 atransactionid, in ns
result astatus, in wstring amsg); }; ...
Adding items to the Folder Pane
the
result is a javascript file that will add a "numbers" container to the end of thunderbird's "all folders" mode.
...add_code.js also includes code to accomplish this
result.
Add to iPhoto
these are declared near the top of the code: const osstatus = ctypes.int32_t; const cfindex = ctypes.long; const optionbits = ctypes.uint32_t; osstatus used to represent the status code
resulting from an operation.
... ctypes.voidptr_t, // inaeparam this.struct_lsapplicationparameters.ptr, // description of the app to launch ctypes.voidptr_t, // psn array pointer cfindex); // max psn count this function returns an osstatus indicating the
result of the launch attempt, and accepts these parameters: a cfarrayref providing a list of cfurl objects for the files to open in the application.
ArrayType
exceptions thrown typeerror type is not a ctype, or type.size is undefined.if the length is specifed but if it is not a valid one,then it is also thrown rangeerror the size of the
resulting array can't be represented as both a size_t and as a javascript number.
...this is the
result of calling ctypes.pointertype(the_type).
StructType
you can call the
resulting type's define() method to assign it a non-opaque type later.
...this is the
result of calling ctypes.pointertype(the_type).
Browser Console - Firefox Developer Tools
input/output messages: commands send to the browser via the command line, and the
result of executing them.
...if the
result of a command is an object, you can click on the object to see its details.
Search - Firefox Developer Tools
the debugger will display the number of matches in the code and highlight each
result: using the outline tab if you are searching for a specific function within the current javascript file, you can use the outline tab in the debugger to find it quickly.
...enter text into the text input above the list to limit the
results in the outline.
Deprecated tools - Firefox Developer Tools
you can write, run, and examine the
result of code that interacts with the web page.
... the
results are displayed in the console output, to the right of the input, providing immediate feedback.
Network request details - Firefox Developer Tools
if you select copy all, the entire header is copied in json format, giving you something like this (after running the
results through a json validator): { "response headers (1.113 kb)": { "headers": [ { "name": "accept-ranges", "value": "bytes" }, { "name": "age", "value": "0" }, { "name": "backend-timing", "value": "d=74716 t=1560258099074460" }, { "name": "cache-control", "value": "private, must-revalidate...
..., max-age=0" }, { "name": "content-disposition", "value": "inline; filename=api-
result.js" }, { "name": "content-encoding", "value": "gzip" }, { "name": "content-length", "value": "673" }, { "name": "content-type", "value": "text/javascript; charset=utf-8" }, { "name": "date", "value": "tue, 11 jun 2019 13:01:39 gmt" }, { "name": "mediawiki-login-suppressed", "value": "true" }, { "name": "p3p", "value": "cp=\"this is not a p3p policy!
Network request list - Firefox Developer Tools
the search
results area below the search field displays the requests that contain that string in the request or response headers or in the content of the response.
...clicking an item in the search
results highlights that item in the monitor list, and displays the corresponding information in the request details pane.
Sorting algorithms comparison - Firefox Developer Tools
sort() calls each of bubblesort(), selectionsort(), quicksort() in turn and logs the
result.
... its call graph looks like this: sortall() // (generate random array, then call sort) x 200 -> sort() // sort with each algorithm, log the
result -> bubblesort() -> swap() -> selectionsort() -> swap() -> quicksort() -> partition() the implementations of the sorting algorithms in the program are taken from https://github.com/nzakas/computer-science-in-javascript/ and are used under the mit license.
Animating CSS properties - Firefox Developer Tools
the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can
result in jank as the browser struggles to hit a smooth frame rate.
...animating expensive css properties can
result in jank as the browser struggles to hit a smooth frame rate.
Cookies - Firefox Developer Tools
note: some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the
resulting context menu to show/hide the columns.
... you can edit cookies by double-clicking inside cells in the table widget and editing the values they contain, and add new cookies by clicking the "plus" (+) button and then editing the
resulting new row to the value you want.
Console messages - Firefox Developer Tools
filtering and searching filtering by category you can use the toolbar along the top to constrain the
results displayed.
...for example, the following video shows the
results when filtering on two simple regular expressions: /(cool|rad)/ and /(cool)/.
AddressErrors - Web APIs
addresserrors is the type of the object returned by shippingaddresserrors in the paymentdetailsupdate passed into paymentrequestupdateevent.updatewith() by the shippingaddresschange event handler if a change to the address
resulted in a validation error occurring.
... <p>donate us $65 to our worthwhile cause and we will send you a totally not-useless gift as a token of our thanks!</p> <button id="pay">donate now</button>
result the final product is below.
AnalyserNode - Web APIs
analysernode.mindecibels is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this specifies the minimum value for the range of
results when using getbytefrequencydata().
... analysernode.maxdecibels is a double value representing the maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte values — basically, this specifies the maximum value for the range of
results when using getbytefrequencydata().
AudioBufferSourceNode.playbackRate - Web APIs
a value of 1.0 indicates it should play at the same speed as its sampling rate, values less than 1.0 cause the sound to play more slowly, while values greater than 1.0
result in audio playing faster than normal.
... you can run the example live (or view the source.) play the song and alter the playback rate for some fun
results.
BaseAudioContext.createPeriodicWave() - Web APIs
if normalized, the
resulting wave will have a maximum absolute peak value of 1.
...you can think of it as the
result of a fourier transform, where you get frequency domain values from time domain value.
BaseAudioContext.createScriptProcessor() - Web APIs
lower values for buffersize will
result in a lower (better) latency.
...for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that
result to be the output sample in each case.
Beacon API - Web APIs
sending the data any sooner may
result in a missed opportunity to gather data.
... not only do these techniques represent poor coding patterns, some of them are unreliable and
result in the perception of poor page load performance for the next navigation.
Blob - Web APIs
ction typedarraytourl(typedarray, mimetype) { return url.createobjecturl(new blob([typedarray.buffer], {type: mimetype})) } const bytes = new uint8array(59); for(let i = 0; i < 59; i++) { bytes[i] = 32 + i; } const url = typedarraytourl(bytes, 'text/plain'); const link = document.createelement('a'); link.href = url; link.innertext = 'open the array url'; document.body.appendchild(link);
result click the link in the example to see the browser decode the object url.
...the following code reads the content of a blob as a typed array: const reader = new filereader(); reader.addeventlistener('loadend', () => { // reader.
result contains the contents of blob as a typed array }); reader.readasarraybuffer(blob); another way to read content from a blob is to use a response.
Body.json() - Web APIs
it returns a promise that resolves with the
result of parsing the body text as json.
...when the fetch is successful, we read and parse the data using json(), then read values out of the
resulting objects as you'd expect and insert them into list items to display our product data.
BroadcastChannel: message event - Web APIs
there are two "receiver" iframes that listen to the broadcast message and write the
result into a <div> element.
...iver 2 <h1>receiver 2</h1> <div id="received"></div> body { border: 1px solid black; padding: .5rem; height: 100px; font-family: "fira sans", sans-serif; } h1 { font: 1.6em "fira sans", sans-serif; margin-bottom: 1rem; } const channel = new broadcastchannel('example-channel'); channel.addeventlistener('message', (event) => { received.textcontent = event.data; });
result specifications specification status html living standard living standard ...
Cache.addAll() - Web APIs
the addall() method of the cache interface takes an array of urls, retrieves them, and adds the
resulting response objects to the given cache.
... note: addall() will overwrite any key/value pairs previously stored in the cache that match the request, but will fail if a
resulting put() operation would overwrite a previous cache entry stored by the same addall() method.
Cache.put() - Web APIs
often, you will just want to fetch() one or more requests, then add the
result straight to your cache.
...as a
result, cache.add/cache.addall can't be used to store opaque responses, whereas cache.put can.
CanvasRenderingContext2D.arc() - Web APIs
const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(100, 75, 50, 0, 2 * math.pi); ctx.stroke();
result different shapes demonstrated this example draws various shapes to show what is possible with arc().
... // arc radius let startangle = 0; // starting point on circle let endangle = math.pi + (math.pi * j) / 2; // end point on circle let anticlockwise = i % 2 == 1; // draw anticlockwise ctx.arc(x, y, radius, startangle, endangle, anticlockwise); if (i > 1) { ctx.fill(); } else { ctx.stroke(); } } }
result screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.arc' in that specification.
CanvasRenderingContext2D.bezierCurveTo() - Web APIs
// start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(start.x, start.y, 5, 0, 2 * math.pi); // start point ctx.arc(end.x, end.y, 5, 0, 2 * math.pi); // end point ctx.fill(); // control points ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(cp1.x, cp1.y, 5, 0, 2 * math.pi); // control point one ctx.arc(cp2.x, cp2.y, 5, 0, 2 * math.pi); // control point two ctx.fill();
result in this example, the control points are red and the start and end points are blue.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(30, 30); ctx.beziercurveto(120,160, 180,10, 220,140); ctx.stroke();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beziercurveto' in that specification.
CanvasRenderingContext2D.clip() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create circular clipping region ctx.beginpath(); ctx.arc(100, 75, 50, 0, math.pi * 2); ctx.clip(); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height); ctx.fillstyle = 'orange'; ctx.fillrect(0, 0, 100, 100);
result specifying a path and a fillrule this example saves two rectangles to a path2d object, which is then made the current clipping region using the clip() method.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create clipping path let region = new path2d(); region.rect(80, 10, 20, 130); region.rect(40, 50, 100, 50); ctx.clip(region, "evenodd"); // draw stuff that gets clipped ctx.fillstyle = 'blue'; ctx.fillrect(0, 0, canvas.width, canvas.height);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clip' in that specification.
CanvasRenderingContext2D.closePath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 140); // move pen to bottom-left corner ctx.lineto(120, 10); // line to top corner ctx.lineto(220, 140); // line to bottom-right corner ctx.closepath(); // line to bottom-left corner ctx.stroke();
result closing just one sub-path this example draws a smiley face consisting of three disconnected sub-paths.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.arc(240, 20, 40, 0, math.pi); ctx.moveto(100, 20); ctx.arc(60, 20, 40, 0, math.pi); ctx.moveto(215, 80); ctx.arc(150, 80, 65, 0, math.pi); ctx.closepath(); ctx.linewidth = 6; ctx.stroke();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.closepath' in that specification.
CanvasRenderingContext2D.drawImage() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.drawimage(image, 33, 71, 104, 124, 21, 20, 87, 104); });
result understanding source element size the drawimage() method uses the source element's intrinsic size in css pixels when drawing.
...idth; canvas.height = this.naturalheight; // will draw the image as 300x227, ignoring the custom size of 60x45 // given in the constructor ctx.drawimage(this, 0, 0); // to use the custom size we'll have to specify the scale parameters // using the element's width and height properties - lets draw one // on top in the corner: ctx.drawimage(this, 0, 0, this.width, this.height); }
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d: drawimage' in that specification.
CanvasRenderingContext2D.ellipse() - Web APIs
id="canvas" width="200" height="200"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw the ellipse ctx.beginpath(); ctx.ellipse(100, 100, 50, 75, math.pi / 4, 0, 2 * math.pi); ctx.stroke(); // draw the ellipse's line of reflection ctx.beginpath(); ctx.setlinedash([5, 5]); ctx.moveto(0, 200); ctx.lineto(200, 0); ctx.stroke();
result various elliptical arcs this example creates three elliptical paths with varying properties.
...tbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'red'; ctx.beginpath(); ctx.ellipse(60, 75, 50, 30, math.pi * .25, 0, math.pi * 1.5); ctx.fill(); ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.ellipse(150, 75, 50, 30, math.pi * .25, 0, math.pi); ctx.fill(); ctx.fillstyle = 'green'; ctx.beginpath(); ctx.ellipse(240, 75, 50, 30, math.pi * .25, 0, math.pi, true); ctx.fill();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ellipse' in that specification.
CanvasRenderingContext2D.fill() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 150, 100); ctx.fill();
result specifying a path and a fillrule this example saves some intersecting lines to a path2d object.
...id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // create path let region = new path2d(); region.moveto(30, 90); region.lineto(110, 20); region.lineto(240, 130); region.lineto(60, 130); region.lineto(190, 20); region.lineto(270, 90); region.closepath(); // fill path ctx.fillstyle = 'green'; ctx.fill(region, 'evenodd');
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fill' in that specification.
CanvasRenderingContext2D.fillStyle - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100);
result creating multiple fill colors using loops in this example, we use two for loops to draw a grid of rectangles, each having a different fill color.
... <canvas id="canvas" width="150" height="150"></canvas> const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.fillstyle = `rgb( ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)}, 0)`; ctx.fillrect(j * 25, i * 25, 25, 25); } } the
result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.fillstyle' in that specification.
CanvasRenderingContext2D.fillText() - Web APIs
result restricting the text size this example writes the words "hello world," restricting its width to 140 pixels.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.filltext('hello world', 50, 90, 140);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filltext' in that specification.
CanvasRenderingContext2D.filter - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.filter = 'blur(4px)'; ctx.font = '48px serif'; ctx.filltext('hello world', 50, 100);
result applying multiple filters you can combine as many filters as you like.
...<img id="source" src="https://udn.realityripple.com/samples/90/a34a525ace.jpg"> </div> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const image = document.getelementbyid('source'); image.addeventlistener('load', e => { ctx.filter = 'contrast(1.4) sepia(1) drop-shadow(9px 9px 2px #e81)'; ctx.drawimage(image, 10, 10, 180, 120); });
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.filter' in that specification.
CanvasRenderingContext2D.getLineDash() - Web APIs
for example, setting the line dash to [5, 15, 25] will
result in getting back [5, 15, 25, 5, 15, 25].
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([10, 20]); console.log(ctx.getlinedash()); // [10, 20] // draw a dashed line ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getlinedash' in that specification.
CanvasRenderingContext2D.isPointInPath() - Web APIs
html <canvas id="canvas"></canvas> <p>in path: <code id="
result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const
result = document.getelementbyid('
result'); ctx.rect(10, 10, 100, 100); ctx.fill();
result.innertext = ctx.ispointinpath(30, 70);
result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in a circular path2d...
... ctx.fillstyle = 'red'; ctx.fill(circle); // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside circle if (ctx.ispointinpath(circle, event.offsetx, event.offsety)) { ctx.fillstyle = 'green'; } else { ctx.fillstyle = 'red'; } // draw circle ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(circle); });
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ispointinpath' in that specification.
CanvasRenderingContext2D.isPointInStroke() - Web APIs
html <canvas id="canvas"></canvas> <p>in stroke: <code id="
result">false</code></p> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); const
result = document.getelementbyid('
result'); ctx.rect(10, 10, 100, 100); ctx.stroke();
result.innertext = ctx.ispointinstroke(50, 10);
result checking a point in the specified path whenever you move the mouse, this example checks whether the cursor is in the stroke of...
... // listen for mouse moves canvas.addeventlistener('mousemove', function(event) { // check whether point is inside ellipse's stroke if (ctx.ispointinstroke(ellipse, event.offsetx, event.offsety)) { ctx.strokestyle = 'green'; } else { ctx.strokestyle = 'red'; } // draw ellipse ctx.clearrect(0, 0, canvas.width, canvas.height); ctx.fill(ellipse); ctx.stroke(ellipse); });
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.ispointinstroke' in that specification.
CanvasRenderingContext2D.lineTo() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); // start a new path ctx.moveto(30, 50); // move the pen to (30, 50) ctx.lineto(150, 100); // draw a line to (150, 100) ctx.stroke(); // render the path
result drawing connected lines each call of lineto() (and similar methods) automatically adds to the current sub-path, which means that all the lines will all be stroked or filled together.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.moveto(90, 130); ctx.lineto(95, 25); ctx.lineto(150, 80); ctx.lineto(205, 25); ctx.lineto(210, 130); ctx.linewidth = 15; ctx.stroke();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.lineto' in that specification.
CanvasRenderingContext2D.quadraticCurveTo() - Web APIs
tic bézier curve ctx.beginpath(); ctx.moveto(50, 20); ctx.quadraticcurveto(230, 30, 50, 100); ctx.stroke(); // start and end points ctx.fillstyle = 'blue'; ctx.beginpath(); ctx.arc(50, 20, 5, 0, 2 * math.pi); // start point ctx.arc(50, 100, 5, 0, 2 * math.pi); // end point ctx.fill(); // control point ctx.fillstyle = 'red'; ctx.beginpath(); ctx.arc(230, 30, 5, 0, 2 * math.pi); ctx.fill();
result in this example, the control point is red and the start and end points are blue.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 110); ctx.quadraticcurveto(230, 150, 250, 20); ctx.stroke();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.quadraticcurveto' in that specification.
CanvasRenderingContext2D.resetTransform() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw a rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillrect(60, 0, 100, 30); // reset transformation matrix to the identity matrix ctx.resettransform();
result continuing with a regular matrix whenever you're done drawing transformed shapes, you should call resettransform() before rendering anything else.
...vas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // skewed rectangles ctx.transform(1, 0, 1.7, 1, 0, 0); ctx.fillstyle = 'gray'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20); // non-skewed rectangles ctx.resettransform(); ctx.fillstyle = 'red'; ctx.fillrect(40, 40, 50, 20); ctx.fillrect(40, 90, 50, 20);
result the skewed rectangles are gray, and the non-skewed rectangles are red.
CanvasRenderingContext2D.rotate() - Web APIs
s.getcontext('2d'); // point of transform origin ctx.arc(0, 0, 5, 0, 2 * math.pi); ctx.fillstyle = 'blue'; ctx.fill(); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(100, 0, 80, 20); // rotated rectangle ctx.rotate(45 * math.pi / 180); ctx.fillstyle = 'red'; ctx.fillrect(100, 0, 80, 20); // reset transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0);
result the center of rotation is blue.
... const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fillstyle = 'gray'; ctx.fillrect(80, 60, 140, 30); // matrix transformation ctx.translate(150, 75); ctx.rotate(math.pi / 2); ctx.translate(-150, -75); // rotated rectangle ctx.fillstyle = 'red'; ctx.fillrect(80, 60, 140, 30);
result the non-rotated rectangle is gray, and the rotated rectangle is red.
CanvasRenderingContext2D.setLineDash() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // dashed line ctx.beginpath(); ctx.setlinedash([5, 15]); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // solid line ctx.beginpath(); ctx.setlinedash([]); ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke();
result some common patterns this example illustrates a variety of common line dash patterns.
...x.moveto(0, y); ctx.lineto(300, y); ctx.stroke(); y += 20; } const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let y = 15; drawdashedline([]); drawdashedline([1, 1]); drawdashedline([10, 10]); drawdashedline([20, 5]); drawdashedline([15, 3, 3, 3]); drawdashedline([20, 3, 3, 3, 3, 3, 3, 3]); drawdashedline([12, 3, 3]); // equals [12, 3, 3, 12, 3, 3]
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.setlinedash' in that specification.
CanvasRenderingContext2D.strokeRect() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.strokestyle = 'green'; ctx.strokerect(20, 10, 160, 100);
result applying various context settings this example draws a rectangle with a drop shadow and thick, beveled outlines.
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.shadowcolor = '#d53'; ctx.shadowblur = 20; ctx.linejoin = 'bevel'; ctx.linewidth = 15; ctx.strokestyle = '#38f'; ctx.strokerect(30, 30, 160, 90);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokerect' in that specification.
CanvasRenderingContext2D.strokeStyle - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.strokestyle = 'blue'; ctx.strokerect(10, 10, 100, 100);
result creating multiple stroke colors using loops in this example, we use two for loops and the arc() method to draw a grid of circles, each having a different stroke color.
...idth="150" height="150"></canvas> var ctx = document.getelementbyid('canvas').getcontext('2d'); for (let i = 0; i < 6; i++) { for (let j = 0; j < 6; j++) { ctx.strokestyle = `rgb( 0, ${math.floor(255 - 42.5 * i)}, ${math.floor(255 - 42.5 * j)})`; ctx.beginpath(); ctx.arc(12.5 + j * 25, 12.5 + i * 25, 10, 0, math.pi * 2, true); ctx.stroke(); } } the
result looks like this: screenshotlive sample specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.strokestyle' in that specification.
CanvasRenderingContext2D.strokeText() - Web APIs
result restricting the text size this example writes the words "hello world," restricting its width to 140 pixels.
... html <canvas id="canvas" width="400" height="150"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '50px serif'; ctx.stroketext('hello world', 50, 90, 140);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.stroketext' in that specification.
CanvasRenderingContext2D.textAlign - Web APIs
id('canvas'); canvas.width = 350; const ctx = canvas.getcontext('2d'); const x = canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130);
result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end".
... html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification.
Transformations - Web APIs
if we apply, for instance, a scaling factor of 0.5, the
resulting unit would become 0.5 pixels and so shapes would be drawn at half size.
...this
results in shapes being drawn twice as large.
Clipboard.read() - Web APIs
navigator.permissions.query({name: "clipboard-read"}).then(
result => { // if permission to read the clipboard is granted or if the user will // be prompted to allow it, we proceed.
... if (
result.state == "granted" ||
result.state == "prompt") { navigator.clipboard.read().then(data => { for (let i=0; i<data.items.length; i++) { if (data.items[i].type != "image/png") { alert("clipboard contains non-image data.
console - Web APIs
you can see the
resulting profile in the browser's performance tool (for example, the firefox performance tool).
...each of these
results in output styled differently in the log, and you can use the filtering controls provided by your browser to only view the kinds of output that interest you.
DOMMatrix - Web APIs
if the array has six values, the
result is a 2d matrix; if the array has 16 values, the
result is a 3d matrix.
...if the array has six values, the
result is a 2d matrix; if the array has 16 values, the
result is a 3d matrix.
DOMMatrixReadOnly.flipX() - Web APIs
the flipx() method of the dommatrixreadonly interface creates a new matrix being the
result of the original matrix flipped about the x-axis.
... syntax dommatrix.flipx() return value returns a dommatrix containing a new matrix being the
result of the original matrix flipped about the x-axis, which is equivalent to multiplying the matrix by dommatrix(-1, 0, 0, 1, 0, 0).
DOMMatrixReadOnly - Web APIs
if the array has six values, the
result is a 2d matrix; if the array has 16 values, the
result is a 3d matrix.
...if the array has six values, the
result is a 2d matrix; if the array has 16 values, the
result is a 3d matrix.
DOMParser - Web APIs
there are three different
results possible, selected by the mime type given.
... if the mime type is text/xml, the
result will be an xmldocument if the mime type is image/svg+xml, the
result will be an svgdocument if the mime type is text/html, the
result will be an htmldocument let parser = new domparser() let doc = parser.parsefromstring(stringcontainingxmlsource, "application/xml") // returns a document, but not an svgdocument nor an htmldocument parser = new domparser(); doc = parser.parsefromstring(stringcontainingsvgsource, "image/svg+xml") // returns a svgdocument, which also is a document.
DOMTokenList.contains() - Web APIs
we then test for the existence of "c" in the list, and write the
result into the <span>'s node.textcontent.
... first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let
result = classes.contains("c"); if (
result) { span.textcontent = "the classlist contains 'c'"; } else { span.textcontent = "the classlist does not contain 'c'"; } the output looks like this: specifications specification status comment domthe definition of 'contains()' in that specification.
DataTransfer.getData() - Web APIs
this may
result in unexpected behavior, being datatransfer.getdata() not returning an expected value.
...eventdefault(); } function drag(dragevent) { dragevent.datatransfer.setdata("text", dragevent.target.id); dragevent.target.style.color = 'green'; } function drop(dropevent) { dropevent.preventdefault(); var data = dropevent.datatransfer.getdata("text"); dropevent.target.appendchild(document.getelementbyid(data)); document.getelementbyid("drag").style.color = 'black'; }
result specifications specification status comment html living standardthe definition of 'getdata()' in that specification.
DedicatedWorkerGlobalScope.onmessage - Web APIs
var myworker = new worker("worker.js"); first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.onmessage = function(e) {
result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, a dedicatedworkerglobalscope.onmessage handler is used to handle messages from the main script: onmessage = function(e) { console.log('message received from main script'); var worker
result = '
result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage...
...(worker
result); } notice how in the main script, onmessage has to be called on myworker, whereas inside the worker script you just need onmessage because the worker is effectively the global scope (the dedicatedworkerglobalscope, in this case).
DirectoryEntrySync - Web APIs
object literal condition
result create: true exclusive: true path already exists an error is thrown.
... object literal condition
result create: true exclusive: true path already exists an error is thrown.
Document.createDocumentFragment() - Web APIs
historically, using document fragments could
result in better performance.
...> </ul> javascript var element = document.getelementbyid('ul'); // assuming ul exists var fragment = document.createdocumentfragment(); var browsers = ['firefox', 'chrome', 'opera', 'safari', 'internet explorer']; browsers.foreach(function(browser) { var li = document.createelement('li'); li.textcontent = browser; fragment.appendchild(li); }); element.appendchild(fragment);
result specifications specification status comment domthe definition of 'document.createdocumentfragment()' in that specification.
Document.getElementsByClassName() - Web APIs
html <span class="orange fruit">orange fruit</span> <span class="orange juice">orange juice</span> <span class="apple juice">apple juice</span> <span class="foo bar">something random</span> <textarea id="
resultarea" style="width:98%;height:7em"></textarea> javascript // getelementsbyclassname only selects elements that have both given classes var allorangejuicebyclass = document.getelementsbyclassname('orange juice'); var
result = "document.getelementsbyclassname('orange juice')"; for (var i=0, len=allorangejuicebyclass.length|0; i<len; i=i+1|0) {
result += "\n " + allorangejuicebyclass[i].textco...
...ntent; } // queryselector only selects full complete matches var allorangejuicequery = document.queryselectorall('.orange.juice');
result += "\n\ndocument.queryselectorall('.orange.juice')"; for (var i=0, len=allorangejuicequery.length|0; i<len; i=i+1|0) {
result += "\n " + allorangejuicequery[i].textcontent; } document.getelementbyid("
resultarea").value =
result;
result specifications specification status comment domthe definition of 'document.getelementsbyclassname' in that specification.
DocumentOrShadowRoot.elementFromPoint() - Web APIs
if the specified point is outside the visible bounds of the document or either coordinate is negative, the
result is null.
...
result specifications specification status shadow domthe definition of 'elementsfrompoint()' in that specification.
Element.attributes - Web APIs
<!doctype html> <html> <head> <title>attributes example</title> <script type="text/javascript"> function listattributes() { var paragraph = document.getelementbyid("paragraph"); var
result = document.getelementbyid("
result"); // first, let's verify that the paragraph has some attributes if (paragraph.hasattributes()) { var attrs = paragraph.attributes; var output = ""; for(var i = attrs.length - 1; i >= 0; i--) { output += attrs[i].name + "->" + attrs[i].value; }
result.value = output; } else {
result.value = "no at...
...tributes to show"; } } </script> </head> <body> <p id="paragraph" style="color: green;">sample paragraph</p> <form action=""> <p> <input type="button" value="show first attribute name and value" onclick="listattributes();"> <input id="
result" type="text" value=""> </p> </form> </body> </html> specifications specification status comment domthe definition of 'element.attributes' in that specification.
Element: blur event - Web APIs
ample html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; });
result event delegation there are two ways of implementing event delegation for this event: by using the focusout event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true);
result specifications specification status comment ui events working draft added info that this event is composed.
Element: focus event - Web APIs
ample html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const password = document.queryselector('input[type="password"]'); password.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }); password.addeventlistener('blur', (event) => { event.target.style.background = ''; });
result event delegation there are two ways of implementing event delegation for this event: by using the focusin event, or by setting the usecapture parameter of addeventlistener() to true.
... html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focus', (event) => { event.target.style.background = 'pink'; }, true); form.addeventlistener('blur', (event) => { event.target.style.background = ''; }, true);
result specifications specification status comment ui events working draft added info that this event is composed.
Element.getBoundingClientRect() - Web APIs
the
result is the smallest rectangle which contains the entire element, with read-only left, top, right, bottom, x, y, width, and height properties describing the overall border-box in pixels.
... rect = elt.getboundingclientrect() // the
result in emptyobj is {} emptyobj = object.assign({}, rect) emptyobj = { ...rect } {width, ...emptyobj} = rect domrect properties top, left, right, and bottom are computed using the values of the object's other properties.
Element.getClientRects() - Web APIs
when called on svg elements other than an outer-<svg>, the "viewport" that the
resulting rectangles are relative to is the viewport that the element's outer-<svg> establishes (and to be clear, the rectangles are also transformed by the outer-<svg>'s viewbox transform, if any).
...; tablerectdiv.style.height = (rect.height - 2) + 'px'; document.body.appendchild(tablerectdiv); } } (function() { /* call function addclientrectsoverlay(elt) for all elements with assigned class "withclientrectsoverlay" */ var elt = document.getelementsbyclassname('withclientrectsoverlay'); for (var i = 0; i < elt.length; i++) { addclientrectsoverlay(elt[i]); } })();
result specifications specification status comment css object model (cssom) view modulethe definition of 'element.getclientrects()' in that specification.
Element.getElementsByClassName() - Web APIs
(): element.getelementsbyclassname('test'); this example finds all elements that have a class of test, which are also a descendant of the element that has the id of main: document.getelementbyid('main').getelementsbyclassname('test'); matching multiple classes to find elements whose class lists include both the red and test classes: element.getelementsbyclassname('red test'); examining the
results you can use either the item() method on the returned htmlcollection or standard array syntax to examine individual elements in the collection.
... filtering the
results using array methods we can also use methods of array.prototype on any htmlcollection by passing the htmlcollection as the method's this value.
Element.matches() - Web APIs
syntax var
result = element.matches(selectorstring); parameters selectorstring is a string representing the selector to test.
... return value
result is a boolean.
Element.querySelector() - Web APIs
the
resulting elements are then examined to see if they are descendants of baseelement.
... html <div> <h5>original content</h5> <p> inside paragraph <span>inside span</span> inside paragraph </p> </div> <div> <h5>output</h5> <div id="output"></div> </div> javascript var baseelement = document.queryselector("p"); document.getelementbyid("output").innerhtml = (baseelement.queryselector("div span").innerhtml);
result the
result looks like this: notice how the "div span" selector still successfully matches the <span> element, even though the baseelement's child nodes do not include the div element (it is still part of the specified selector).
Event.cancelable - Web APIs
most browser-native events that can be canceled are the ones that
result from the user interacting with the page.
... syntax bool = event.cancelable; value the
result is a boolean, which is true if the event can be canceled.
Event.preventDefault() - Web APIs
<code>preventdefault()</code> won't let you check this!<br>"; event.preventdefault(); }, false); html <p>please click on the checkbox control.</p> <form> <label for="id-checkbox">checkbox:</label> <input type="checkbox" id="id-checkbox"/> </form> <div id="output-box"></div>
result stopping keystrokes from reaching an edit field the following example demonstrates how invalid text input can be stopped from reaching the input field with preventdefault().
...sg) { warningbox.innerhtml = msg; if (document.body.contains(warningbox)) { window.cleartimeout(warningtimeout); } else { // insert warningbox after mytextbox mytextbox.parentnode.insertbefore(warningbox, mytextbox.nextsibling); } warningtimeout = window.settimeout(function() { warningbox.parentnode.removechild(warningbox); warningtimeout = -1; }, 2000); }
result notes calling preventdefault() during any stage of event flow cancels the event, meaning that any default action normally taken by the implementation as a
result of the event will not occur.
FetchEvent() - Web APIs
replacesclientid read only a domstring which identifies the client which is being replaced by
resultingclientid.
...
resultingclientid read only a domstring containing the new clientid if the client changes as a
result of the page load.
FetchEvent.respondWith() - Web APIs
there are a few, though, where it does matter: if a fetch() is intercepted, then you can observe the final url on the
result's response.url.
... the way the html specification handles redirects for navigations ends up using the request url for the
resulting window.location.
Fetch API - Web APIs
instead, these are more likely to be created as
results of other api actions (for example, fetchevent.respondwith() from service workers).
... headers represents response/request headers, allowing you to query them and take different actions depending on the
results.
FileReader: abort event - Web APIs
t = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.
result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlo...
...g.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } reader.abort(); } fileinput.addeventlistener('change', handleselected);
result specifications specification status file api working draft ...
FileReader: load event - Web APIs
t = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.
result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlo...
...g.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected);
result specifications specification status file api working draft ...
FileReader: loadend event - Web APIs
t = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.
result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlo...
...g.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected);
result specifications specification status file api working draft ...
FileReader: loadstart event - Web APIs
t = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.
result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlo...
...g.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected);
result specifications specification status file api working draft ...
FileReader: progress event - Web APIs
t = document.queryselector('input[type="file"]'); const preview = document.queryselector('img.preview'); const eventlog = document.queryselector('.event-log-contents'); const reader = new filereader(); function handleevent(event) { eventlog.textcontent = eventlog.textcontent + `${event.type}: ${event.loaded} bytes transferred\n`; if (event.type === "load") { preview.src = reader.
result; } } function addlisteners(reader) { reader.addeventlistener('loadstart', handleevent); reader.addeventlistener('load', handleevent); reader.addeventlistener('loadend', handleevent); reader.addeventlistener('progress', handleevent); reader.addeventlistener('error', handleevent); reader.addeventlistener('abort', handleevent); } function handleselected(e) { eventlo...
...g.textcontent = ''; const selectedfile = fileinput.files[0]; if (selectedfile) { addlisteners(reader); reader.readasdataurl(selectedfile); } } fileinput.addeventlistener('change', handleselected);
result specifications specification status file api working draft ...
FileReader.readAsBinaryString() - Web APIs
at that time, the
result attribute contains the raw binary data from the file.
...s = document.createelement('canvas'); var height = 200; var width = 200; canvas.width = width; canvas.height = height; var ctx = canvas.getcontext('2d'); ctx.strokestyle = '#090'; ctx.beginpath(); ctx.arc(width/2, height/2, width/2 - width/10, 0, math.pi*2); ctx.stroke(); canvas.toblob(function (blob) { var reader = new filereader(); reader.onload = function () { console.log(reader.
result); } reader.readasbinarystring(blob); }); specifications specification status comment file apithe definition of 'readasbinarystring' in that specification.
FileSystemFlags.create - Web APIs
syntax filesystemflags.create = booleanvalue values the table below describes the
result of each possible combination of these flags depending on whether or not the target file or directory path already exists.
... option values file/directory condition
result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
FileSystemFlags.exclusive - Web APIs
syntax filesystemflags.exclusive = booleanvalue values the table below describes the
result of each possible combination of these flags depending on whether or not the target file or directory path already exists.
... option values file/directory condition
result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
FileSystemFlags - Web APIs
values and
results the table below describes the
result of each possible combination of these flags depending on whether or not the target file or directory path already exists.
... option values file/directory condition
result create exclusive false n/a[1] path exists and matches the desired type (depending on whether the function called is getfile() or getdirectory() the successcallback is called with a filesystemfileentry if getfile() was called or a filesystemdirectoryentry if getdirectory() was called.
File and Directory Entries API - Web APIs
if the
result isn't null, then it's a dropped file or directory, and you can use file system calls to work with it.
... synchronous api the synchronous api is should only be used in workers; these calls block until they're finished executing, and simply return the
results instead of using callbacks.
Using the Geolocation API - Web APIs
note: by default, getcurrentposition() tries to answer as fast as possible with a low accuracy
result.
...e} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme);
result ...
GlobalEventHandlers.onclick - Web APIs
html <div id="demo">click here</div> javascript document.getelementbyid('demo').onclick = function changecontent() { document.getelementbyid('demo').innerhtml = "help me"; document.getelementbyid('demo').style = "color: red"; }
result getting the coordinates of clicks this example displays the coordinates at which the most recent mouse button click occurred.
... html <p>click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.onclick = inputchange; function inputchange(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; }
result specification specification status comment html living standardthe definition of 'onclick' in that specification.
GlobalEventHandlers.oncontextmenu - Web APIs
is it disabled?<p> javascript window.oncontextmenu = (e) => { e.preventdefault(); }
result pausing an animation this example pauses a spinning shape whenever you open the context menu.
...} .paused .shape { animation-play-state: paused; } javascript function pause(e) { body.classlist.add('paused'); note.removeattribute('hidden'); } function play(e) { body.classlist.remove('paused'); note.setattribute('hidden', ''); } const body = document.queryselector('body'); const note = document.queryselector('.note'); window.oncontextmenu = pause; window.onpointerdown = play;
result specifications specification status comment html living standardthe definition of 'oncontextmenu' in that specification.
GlobalEventHandlers.onkeypress - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeypress = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; }
result filter keys with a regular expression this example filters the characters typed into a form field using a regular expression.
... html <label>enter numbers only: <input> </label> javascript function numbersonly(event) { return event.charcode === 0 || /\d/.test(string.fromcharcode(event.charcode)); } const input = document.queryselector('input'); input.onkeypress = numbersonly; // prevent pasting (since pasted content might include non-number characters) input.onpaste = event => false;
result capture the typing of a hidden word the following javascript function will do something after the user types the word "exit" in any point of a page.
HTMLDialogElement: cancel event - Web APIs
bubbles no cancelable yes interface event event handler oncancel examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="
result"></div> css button, div { margin: .5rem; } js const
result = document.queryselector('.
result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('cancel', (event) => {
result.textcontent = 'dialog was canceled'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal ...
...=== 'function') { dialog.showmodal();
result.textcontent = ''; } else {
result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); });
result specifications specification status html living standardthe definition of 'cancel' in that specification.
HTMLDialogElement: close event - Web APIs
bubbles no cancelable no interface event event handler property onclose examples live example html <dialog class="example-dialog"> <button class="close" type="reset">close</button> </dialog> <button class="open-dialog">open dialog</button> <div class="
result"></div> css button, div { margin: .5rem; } js const
result = document.queryselector('.
result'); const dialog = document.queryselector('.example-dialog'); dialog.addeventlistener('close', (event) => {
result.textcontent = 'dialog was closed'; }); const opendialog = document.queryselector('.open-dialog'); opendialog.addeventlistener('click', () => { if (typeof dialog.showmodal ==...
...= 'function') { dialog.showmodal();
result.textcontent = ''; } else {
result.textcontent = 'the dialog api is not supported by this browser'; } }); const closebutton = document.queryselector('.close'); closebutton.addeventlistener('click', () => { dialog.close(); });
result specifications specification status html living standardthe definition of 'close' in that specification.
HTMLElement: change event - Web APIs
examples <select> element html <label>choose an ice cream flavor: <select class="ice-cream" name="ice-cream"> <option value="">select one …</option> <option value="chocolate">chocolate</option> <option value="sardine">sardine</option> <option value="vanilla">vanilla</option> </select> </label> <div class="
result"></div> body { display: grid; grid-template-areas: "select
result"; } select { grid-area: select; } .
result { grid-area:
result; } javascript const selectelement = document.queryselector('.ice-cream'); selectelement.addeventlistener('change', (event) => { const
result = document.queryselector('.
result');
result.textcontent = `you like ${event.target.value}`; });
result ...
... html <input placeholder="enter some text" name="name"/> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.addeventlistener('change', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; }
result specifications specification status html living standardthe definition of 'change' in that specification.
HTMLElement.innerText - Web APIs
html <h3>source element:</h3> <p id="source"> <style>#source { color: red; } #text { text-transform: uppercase; }</style> <span id=text>take a look at<br>how this text<br>is interpreted below.</span> <span style="display:none">hidden text</span> </p> <h3>
result of textcontent:</h3> <textarea id="textcontentoutput" rows="6" cols="30" readonly>...</textarea> <h3>
result of innertext:</h3> <textarea id="innertextoutput" rows="6" cols="30" readonly>...</textarea> javascript const source = document.getelementbyid("source"); const textcontentoutput = document.getelementbyid("textcontentoutput"); const innertextoutput = document.getelementbyid("innertextoutpu...
...t"); textcontentoutput.value = source.textcontent; innertextoutput.value = source.innertext;
result specification specification status comment html living standardthe definition of 'innertext' in that specification.
HTMLImageElement.srcset - Web APIs
let box = document.queryselector(".box"); let image = box.queryselector("img"); let newelem = document.createelement("p"); newelem.innerhtml = `image: <code>${image.currentsrc}</code>`; box.appendchild(newelem);
result in the displayed output below, the selected url will correspond with whether your display
results in selecting the 1x or the 2x version of the image.
... if you happen to have both standard and high density displays, try moving this window between them and reloading the page to see the
results change.
HTMLInputElement.webkitdirectory - Web APIs
understanding the
results after the user makes a selection, each file object in files has its file.webkitrelativepath property set to the relative path within the selected directory at which the file is located.
...e /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false);
result specifications specification status comment file and directory entries apithe definition of 'webkitdirectory' in that specification.
HTMLInputElement - Web APIs
throws an invalid_state_err exception: if the method is not applicable to for the current type value, if the element has no step value, if the value cannot be converted to a number, if the
resulting value is above the max or below the min.
...throws an invalid_state_err exception: if the method is not applicable to for the current type value., if the element has no step value, if the value cannot be converted to a number, if the
resulting value is above the max or below the min.
HTMLMediaElement.play() - Web APIs
failure to begin playback for any reason, such as permission issues,
result in the promise being rejected.
... note: the play() method may cause the user to be asked to grant permission to play the media,
resulting in a possible delay before the returned promise is resolved.
HTMLElement.focus() - Web APIs
examples focus on a text field javascript focusmethod = function getfocus() { document.getelementbyid("mytextfield").focus(); } html <input type="text" id="mytextfield" value="text field."> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the text field!</button>
result focus on a button javascript focusmethod = function getfocus() { document.getelementbyid("mybutton").focus(); } html <button type="button" id="mybutton">click me!</button> <p></p> <button type="button" onclick="focusmethod()">click me to focus on the button!</button>
result focus with focusoption javascript focusscrollmethod = function getfocus() { document.
...cus({preventscroll:true}); } html <button type="button" onclick="focusscrollmethod()">click me to focus on the button!</button> <button type="button" onclick="focusnoscrollmethod()">click me to focus on the button without scrolling!</button> <div id="container" style="height: 1000px; width: 1000px;"> <button type="button" id="mybutton" style="margin-top: 500px;">click me!</button> </div>
result specification specification status comment html living standardthe definition of 'focus' in that specification.
HTMLSelectElement.selectedOptions - Web APIs
in other words, any option contained within the <select> element may be part of the
results, but option groups are not included in the list.
...
result the
resulting content looks like this in action: specifications specification status comment html living standardthe definition of 'htmlselectelement.selectedoptions' in that specification.
HTMLTableElement.insertRow() - Web APIs
if index is greater than the number of rows, an indexsizeerror exception will
result.
...let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call addrow() with the table's id addrow('my-table');
result specifications specification status comment html living standardthe definition of 'htmltableelement.insertrow()' in that specification.
HTMLTableRowElement.insertCell() - Web APIs
if index is greater than the number of cells, an indexsizeerror exception will
result.
...let tableref = document.getelementbyid(tableid); // insert a row at the end of the table let newrow = tableref.insertrow(-1); // insert a cell in the row at index 0 let newcell = newrow.insertcell(0); // append a text node to the cell let newtext = document.createtextnode('new bottom row'); newcell.appendchild(newtext); } // call addrow() with the table's id addrow('my-table');
result specifications specification status comment html living standardthe definition of 'htmltablerowelement.insertcell()' in that specification.
Recommended Drag Types - Web APIs
as a
result, the contains method no longer works; the includes method should be used instead to check if a specific type of data is provided, using code like the following: if ([...event.datatransfer.types].includes('text/html')) { // do something } you could use feature detection to determine which method is supported on types, then run code as appropriate.
...lication/x-moz-file-promise', new dataprovider(success,error), 0, components.interfaces.nsisupports); function dataprovider(){} dataprovider.prototype = { queryinterface : function(iid) { if (iid.equals(components.interfaces.nsiflavordataprovider) || iid.equals(components.interfaces.nsisupports)) return this; throw components.
results.ns_nointerface; }, getflavordata : function(atransferable, aflavor, adata, adatalen) { if (aflavor == 'application/x-moz-file-promise') { var urlprimitive = {}; var datasize = {}; atransferable.gettransferdata('application/x-moz-file-promise-url', urlprimitive, datasize); var url = urlprimitive.value.queryinterface(components.interfaces.nsisupportsstring).da...
IDBCursor.advance() - Web APIs
here we use cursor.advance(2) to jump 2 places forward each time, meaning that only every other
result will be displayed.
...for a complete working example, see our idbcursor example (view example live.) function advance
result() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.va...
IDBCursor.continuePrimaryKey() - Web APIs
calling this method more than once before new cursor data has been loaded - for example, calling continueprimarykey() twice from the same onsuccess handler -
results in an invalidstateerror being thrown on the second call because the cursor’s got value flag has been unset.
... example here’s how you can resume an iteration of all articles tagged with "javascript" since your last visit: let request = articlestore.index("tag").opencursor(); let count = 0; let unreadlist = []; request.onsuccess = (event) => { let cursor = event.target.
result; if (!cursor) { return; } let lastprimarykey = getlastiteratedarticleid(); if (lastprimarykey > cursor.primarykey) { cursor.continueprimarykey("javascript", lastprimarykey); return; } // update lastiteratedarticleid setlastiteratedarticleid(cursor.primarykey); // preload 5 articles into the unread list; unreadlist.push(cursor.value); if (++count < 5...
IDBCursor.delete() - Web APIs
the
result attribute is set to undefined.
...for a complete working example, see our idbcursor example (view example live.) function delete
result() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readwrite'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { if(cursor.value.albumtitle === 'grace under pressure') { var request = cursor.delete(); request.onsuccess =...
IDBDatabase.close() - Web APIs
// create event handlers for both success and failure of dbopenrequest.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += "<li>database initialised.</li>"; // store the
result of opening the database in the db variable.
... db = dbopenrequest.
result; // now let"s close the database again!
IDBDatabase.objectStoreNames - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.
result; // this line will log the version of the connected database, which should be // an object that looks like { ['my-store-name'] } console.log(db.objectstorenames); }; specifications specification status comment indexed database api 2.0the definition of 'objectstorenames' in that specification.
IDBDatabase.transaction() - Web APIs
for a complete example, see our to-do notifications app (view example live.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the displaydata() function to populate the task list with // all the to-do list data already in the idb displaydata(); }; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBDatabase.version - Web APIs
example // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database // being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.
result; // this line will log the version of the connected database, which should be "4" console.log(db.version); }; specifications specification status comment indexed database api 2.0the definition of 'version' in that specification.
IDBDatabase - Web APIs
our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the idbdatabase object, // when the database is opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db // variable.
... this is used a lot later on db = dbopenrequest.
result; // run the displaydata() function to populate the task // list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.
result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database using // idbdatabase.createobjectstore var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objects...
IDBFactory.deleteDatabase() - Web APIs
if the database is successfully deleted, then a success event is fired on the request object returned from this method, with its
result set to undefined.
... example var dbdeleterequest = window.indexeddb.deletedatabase("todolist"); dbdeleterequest.onerror = function(event) { console.log("error deleting database."); }; dbdeleterequest.onsuccess = function(event) { console.log("database deleted successfully"); console.log(event.
result); // should be undefined }; specifications specification status comment indexed database api draftthe definition of 'deletedatabase()' in that specification.
IDBIndex.count() - Web APIs
myindex.count() is then used to count the number of records in the index, and the
result of that request is logged to the console when its success callback returns.
...ee our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); var countrequest = myindex.count(); countrequest.onsuccess = function() { console.log(countrequest.
result); } myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>'...
IDBIndex.getAllKeys() - Web APIs
the getallkeys() method of the idbindex interface instantly retrieves the primary keys of all objects inside the index, setting them as the
result of the request object.
... example var myindex = objectstore.index('index'); var getallkeysrequest = myindex.getallkeys(); getallkeysrequest.onsuccess = function() { console.log(getallkeysrequest.
result); } specification specification status comment indexed database api draftthe definition of 'getall()' in that specification.
IDBIndex.multiEntry - Web APIs
the multientry read-only property of the idbindex interface returns a boolean value that affects how the index behaves when the
result of evaluating the index's key path yields an array.
...dex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.multientry); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBIndex - Web APIs
idbindex.multientry read only affects how the index behaves when the
result of evaluating the index's key path yields an array.
...plete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBObjectStore.autoIncrement - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore.clear() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // clear all the data form the object store cleardata(); }; function cleardata() { // open a read/write db transaction, ready for clearing the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error + '</li>'; }; // create an object store on the transaction var objectstore = transaction.objectstore("todolist"); // make a request to clear all the data out of the object store var objectstorereq...
IDBObjectStore.deleteIndex() - Web APIs
ve.) var db; // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened successfully, or not dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... this is used a lot below db = this.
result; // run the displaydata() function to populate the task list with all the to-do list data already in the idb displaydata(); }; // this event handles the event whereby a new version of the database needs to be created // either one has not been created before, or a new version number has been submitted via the // window.indexeddb.open line above //it is only implemented in recent browsers dbopenrequest.onupgradeneeded = function(event) { var db = this.
result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain ob...
IDBObjectStore.getAll() - Web APIs
if a value is successfully found, then a structured clone of it is created and set as the
result of the request object.
... this method produces the same
result for: a record that doesn't exist in the database a record that has an undefined value to tell these situations apart, you either call the opencursor() method with the same key.
IDBObjectStore.getAllKeys() - Web APIs
if a value is successfully found, then a structured clone of it is created and set as the
result of the request object.
... this method produces the same
result for: a record that doesn't exist in the database a record that has an undefined value to tell these situations apart, you need to call the opencursor() method with the same key.
IDBObjectStore.getKey() - Web APIs
if a key is successfully found, then a structured clone of it is created and set as the
result of the request object.
... example let openrequest = indexeddb.open("telemetry"); openrequest.onsuccess = (event) => { let db = event.target.
result; let store = db.transaction("netlogs").objectstore("netlogs"); let today = new date(); let yesterday = new date(today); yesterday.setdate(today.getdate() - 1); let request = store.getkey(idbkeyrange(yesterday, today)); request.onsuccess = (event) => { let when = event.target.
result; alert("the 1st activity in last 24 hours was occurred at " + when); }; }; specifications ...
IDBObjectStore.indexNames - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = this.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore.keyPath - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore.name - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore.openCursor() - Web APIs
to determine if the add operation has completed successfully, listen for the
results’s success event.
... example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the object store: var transaction = db.transaction("name", "readonly"); var objectstore = transaction.objectstore("name"); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { // cursor.value contains the current record being iterated through // this is where you'd do something with the
result cursor.continue(); } else { // no more
results } }; specification specification status comment indexed database api 2.0the definition of 'opencursor()' in that specification.
IDBObjectStore.transaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of the transaction completing, when everything is done transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBObjectStore - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in db.
... db = dbopenrequest.
result; }; // this event handles the event whereby a new version of // the database needs to be created either one has not // been created before, or a new version number has been // submitted via the window.indexeddb.open line above dbopenrequest.onupgradeneeded = function(event) { var db = event.target.
result; db.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { unique: false }); objectstore.createindex("day", "day", { unique: fa...
IDBOpenDBRequest: blocked event - Web APIs
bubbles no cancelable no interface idbversionchangeevent event handler property onblocked examples using addeventlistener(): // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objects...
... revision version const req2 = indexeddb.open('todolist', 5); // in this case the onblocked handler will be executed req2.addeventlistener('blocked', () => { console.log('request was blocked'); }); }; using the onblocked property: // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = (event) => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objects...
IDBOpenDBRequest.onupgradeneeded - Web APIs
request.onupgradeneeded = function(event) { db = request.
result; db.onerror = function(errorevent) { note.innerhtml += '<li>error loading database.</li>'; }; if (event.oldversion < 1) { // version 1 is the first version of the database.
...db.createobjectstore("magazines"); var publisherindex = magazines.createindex("by_publisher", "publisher"); var frequencyindex = magazines.createindex("by_frequency", "frequency"); } }; request.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; request.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; db = request.
result; populateanddisplaydata(); }; specifications specification status comment indexed database api 2.0the definition of 'onupgradeneeded' in that specification.
IDBOpenDBRequest: upgradeneeded event - Web APIs
// open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.addeventlistener('upgradeneeded', event => { const db = event.target.
result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('da...
... // open the database const dbopenrequest = window.indexeddb.open('todolist', 4); dbopenrequest.onupgradeneeded = event => { const db = event.target.
result; console.log(`upgrading to version ${db.version}`); // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objectstore.createindex('day', 'da...
IDBRequest.onerror - Web APIs
}; example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store.
...to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the
result var data = objectstoretitlerequest.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back // into the database var updatetitlerequest = objectstore.put(data); // when this new request succeeds, run the displaydata() // function again to update the display updatetitlerequest.onsuccess = function()...
IDBRequest.readyState - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store in another request.
...to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the
result var data = objectstoretitlerequest.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the readystate of this request is " + updatetitlerequest.readystate); // when this new req...
IDBRequest.source - Web APIs
example the following example requests a given record title, onsuccess gets the associated record from the idbobjectstore (made available as objectstoretitlerequest.
result), updates one property of the record, and then puts the updated record back into the object store in another request.
... to-do notifications app (view example live.) var title = "walk dog"; // open up a transaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as its title var objectstoretitlerequest = objectstore.get(title); objectstoretitlerequest.onsuccess = function() { // grab the data object returned as the
result var data = objectstoretitlerequest.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item // back into the database var updatetitlerequest = objectstore.put(data); // log the source of this request console.log("the source of this request is " + updatetitlerequest.source); // when this new request succ...
IDBRequest: success event - Web APIs
bubbles no cancelable no interface event event handler property onsuccess examples this example tries to open a database and listens for the success event using addeventlistener(): // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objects...
...false }); objectstore.createindex('year', 'year', { unique: false }); }; openrequest.addeventlistener('success', (event) => { console.log('database opened successfully!'); }); the same example, but using the onsuccess event handler property: // open the database const openrequest = window.indexeddb.open('todolist', 4); openrequest.onupgradeneeded = (event) => { const db = event.target.
result; db.onerror = () => { console.log('error creating database'); }; // create an objectstore for this database var objectstore = db.createobjectstore('todolist', { keypath: 'tasktitle' }); // define what data items the objectstore will contain objectstore.createindex('hours', 'hours', { unique: false }); objectstore.createindex('minutes', 'minutes', { unique: false }); objects...
IDBTransaction.abort() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBTransaction.db - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBTransaction.error - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error ...
IDBTransaction.mode - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBTransaction.objectStore() - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBTransaction.onabort - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error +...
IDBTransaction.oncomplete - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error +...
IDBTransaction.onerror - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... // this is used a lot below db = dbopenrequest.
result; // run the adddata() function to add the data to the database adddata(); }; function adddata() { // create a new object ready for being inserted into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready for adding the data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error: ' + transaction.error ...
IDBTransaction - Web APIs
for a full working example, see our to-do notifications app (view example live.) // let us open our database var dbopenrequest = window.indexeddb.open("todolist", 4); dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db // variable.
... this is used a lot below db = dbopenrequest.
result; // add the data to the database adddata(); }; function adddata() { // create a new object to insert into the idb var newitem = [ { tasktitle: "walk dog", hours: 19, minutes: 30, day: 24, month: "december", year: 2013, notified: "no" } ]; // open a read/write db transaction, ready to add data var transaction = db.transaction(["todolist"], "readwrite"); // report on the success of opening the transaction transaction.oncomplete = function(event) { note.innerhtml += '<li>transaction completed: database modification finished.</li>'; }; transaction.onerror = function(event) { note.innerhtml += '<li>transaction not opened due to error.
IDBVersionChangeEvent.newVersion - Web APIs
window.mozidb*) // let us open version 4 of our database var dbopenrequest = window.indexeddb.open("todolist", 4); // these two event handlers act on the database being opened dbopenrequest.onerror = function(event) { note.innerhtml += '<li>error loading database.</li>'; }; dbopenrequest.onsuccess = function(event) { note.innerhtml += '<li>database initialised.</li>'; // store the
result of opening the database in the db variable.
... db = dbopenrequest.
result; }; specifications specification status comment indexed database api 2.0the definition of 'newversion' in that specification.
Checking when a deadline is due - Web APIs
for this, as getday() returns the day of the week, 1-7), month (returns a number from 0-11, see below), and year (getfullyear() is needed; getyear() is deprecated, and returns a weird value that is not much use to anyone!) var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { next we create another indexeddb objectstore, and use the opencursor() method to open a cursor, which is basically a way in indexeddb to iterate through all the items in the store.
...lar data object, so the // notification won't be set off on it again // first open up a tranaction as usual var objectstore = db.transaction(['todolist'], "readwrite").objectstore('todolist'); // get the to-do list object that has this title as it's title var request = objectstore.get(title); request.onsuccess = function() { // grab the data object returned as the
result var data = request.
result; // update the notified value in the object to "yes" data.notified = "yes"; // create another request that inserts the item back into the database var requestupdate = objectstore.put(data); // when this new request succeeds, run the displaydata() function again to update the display requestupdate.onsuccess = function() { ...
IndexedDB API - Web APIs
idbrequest generic interface that handles database requests and provides access to
results.
... custom event interfaces this specification fires events with the following custom interface: idbversionchangeevent the idbversionchangeevent interface indicates that the version of the database has changed, as the
result of an idbopendbrequest.onupgradeneeded event handler function.
KeyboardEvent.key - Web APIs
if the key produces a character key that would
result in a character being inserted into possibly an <input>, <textarea> or an element with htmlelement.contenteditable set to true, the beforeinput and input event types are fired in that order.
...; }); textarea.addeventlistener('input', (e) => { logmessage(`key "${e.data}" input [event: input]`); }); textarea.addeventlistener('keyup', (e) => { logmessage(`key "${e.key}" released [event: keyup]`); }); btnclearconsole.addeventlistener('click', (e) => { let child = consolelog.firstchild; while (child) { consolelog.removechild(child); child = consolelog.firstchild; } });
result note: on browsers that don't fully implement the inputevent interface which is used for the beforeinput and input events, you may get incorrect output on those lines of the log output.
LockedFile.readAsArrayBuffer() - Web APIs
summary the readasarraybuffer method is used to read the content of the lockedfile object and provide the
result of that reading as an arraybuffer.
...in case of success, the request's
result is an arraybuffer representing the data that have been read.
LockedFile.readAsText() - Web APIs
summary the readastext method is used to read the content of the lockedfile object and provide the
result of that reading as a string.
...in case of success, the request's
result is a string representing the data that have been read.
MediaError.message - Web APIs
then the
resulting text is output to the log.
...
result you can try out this example below, and can see the example in action outside this page here.
MediaQueryList - Web APIs
the
resulting object handles sending notifications to listeners when the media query state changes (i.e.
... events the following events are delivered to mediaquerylist objects: change sent to the mediaquerylist when the
result of running the media query against the document changes.
MediaRecorder.mimeType - Web APIs
this is the file format of the file that would
result from writing all of the recorded data to disk.
... keep in mind that not all codecs are supported by a given container; if you write media using a codec that is not supported by a given media container, the
resulting file may not work reliably if at all when you try to play it back.
MessageEvent - Web APIs
d handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) {
result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworkerglobalscope.onconnect handler to connect to the same port discussed above.
... onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var worker
result = '
result: ' + (e.data[0] * e.data[1]); port.postmessage(worker
result); }); port.start(); // required when using addeventlistener.
Microdata DOM API - Web APIs
var cat = document.getitems('http://example.org/animals#cat')[0]; var colors = cat.properties['http://example.com/color'].getvalues(); var
result; if (colors.length == 0) {
result = 'color unknown.'; } else if (colors.length == 1) {
result = 'color: ' + colors[0]; } else {
result = 'colors:'; for (var i = 0; i < colors.length; i += 1)
result += ' ' + colors[i]; } it's also possible to get a list of all the property names using the object's names idl attribute.
...//example.org/animals#cat"> <h1 itemprop="name http://example.com/fn">hedral</h1> <p itemprop="desc">hedral is a male american domestic shorthair, with a fluffy <span itemprop="http://example.com/color">black</span> fur with <span itemprop="http://example.com/color">white</span> paws and belly.</p> <img itemprop="img" src="hedral.jpeg" alt="" title="hedral, age 18 months"> </section> ...it would
result in the following output: name http://example.com/fn desc http://example.com/color img (the duplicate occurrence of "http://example.com/color" is not included in the list.) htmlpropertiescollection the htmlpropertiescollection interface is used for collections of elements that add name-value pairs to a particular item in the microdata model.
MouseEvent.clientX - Web APIs
for example, clicking on the left edge of the client area will always
result in a mouse event with a clientx value of 0, regardless of whether the page is scrolled horizontally.
... html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; }
result specifications specification status comment css object model (cssom) view modulethe definition of 'clientx' in that specification.
MouseEvent.clientY - Web APIs
for example, clicking on the top edge of the client area will always
result in a mouse event with a clienty value of 0, regardless of whether the page is scrolled vertically.
... html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; }
result specifications specification status comment css object model (cssom) view modulethe definition of 'clienty' in that specification.
MouseEvent.pageX - Web APIs
even though numeric types both are represented by number in javascript, they may be handled differently internally in the browser's code,
resulting in potential behavior differences.
... .box { width: 400px; height: 250px; border: 2px solid darkblue; background-color: blue; color: white; font: 16px "zilla", "open sans", "helvetica", "arial", sans-serif; }
result try this out here: specifications specification status comment css object model (cssom) view modulethe definition of 'pagex' in that specification.
Using Navigation Timing - Web APIs
html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } in tandem with appropriate html and css, the
result is: the values listed are for the <iframe> in which the sample is presented above.
... html <div class="output"> </div> css .output { border: 1px solid #bbb; font: 16px "open sans", "helvetica", "arial", sans-serif; } with this code in place, the
result looks like this: the values listed are for the <iframe> in which the sample is presented.
Node.isDefaultNamespace() - Web APIs
syntax
result = node.isdefaultnamespace(namespaceuri); parameters namespaceuri is a string representing the namespace against which the element will be checked.
... return value
result is a boolean that holds the return value true or false.
Node.isEqualNode() - Web APIs
then we run some javascript to compare the nodes using isequalnode() and output the
results.
... block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 equals div 0: " + divlist[0].isequalnode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 equals div 1: " + divlist[0].isequalnode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 equals div 2: " + divlist[0].isequalnode(divlist[2]) + "<br/>";
results specifications specification status comment domthe definition of 'node.isequalnode' in that specification.
Node.isSameNode() - Web APIs
then we run some javascript to compare the nodes using issamenode() and output the
results.
...block; } javascript let output = document.getelementbyid("output"); let divlist = document.getelementsbytagname("div"); output.innerhtml += "div 0 same as div 0: " + divlist[0].issamenode(divlist[0]) + "<br/>"; output.innerhtml += "div 0 same as div 1: " + divlist[0].issamenode(divlist[1]) + "<br/>"; output.innerhtml += "div 0 same as div 2: " + divlist[0].issamenode(divlist[2]) + "<br/>";
results specifications specification status comment domthe definition of 'node: issamenode' in that specification.
Using the Notifications API - Web APIs
in its simplest form, we just include the following: notification.requestpermission().then(function(
result) { console.log(
result); }); this uses the promise-based version of the method.
... if (i++ == 9) { window.clearinterval(interval); } }, 200); } // otherwise, we can fallback to a regular modal alert else { alert("hi!"); } }); } // if the user refuses to get notified else { // we can fallback to a regular modal alert alert("hi!"); } }); }); see the live
result below: specifications specification status comment notifications api living standard living standard ...
PannerNode.refDistance - Web APIs
const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 6; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given refdistance // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time,
resulting in a decrease in volume (decay) const scheduletesttone = (refdistance, starttime) => { const osc = new oscillatornode(context); const panner = new pannernode(context); panner.refdistance = refdistance; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_length); ...
...length); }; // this tone should decay immediately and fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower and later than the previous one scheduletesttone(4, context.currenttime + note_length); // this tone should decay only slightly, and only start decaying fairly late scheduletesttone(7, context.currenttime + note_length * 2); after running this code, the
resulting waveforms should look something like this: specifications specification status comment web audio apithe definition of 'refdistance' in that specification.
PannerNode.rolloffFactor - Web APIs
increasing distance from the listener: const context = new audiocontext(); // all our test tones will last this many seconds const note_length = 4; // this is how far we'll move the sound const z_distance = 20; // this function creates a graph for the test tone with a given rollofffactor // and schedules it to move away from the listener along the z (depth-wise) axis // at the given start time,
resulting in a decrease in volume (decay) const scheduletesttone = (rollofffactor, starttime) => { const osc = new oscillatornode(context); const panner = new pannernode(context); panner.rollofffactor = rollofffactor; // set the initial z position, then schedule the ramp panner.positionz.setvalueattime(0, starttime); panner.positionz.linearramptovalueattime(z_distance, starttime + note_len...
...ion); osc.start(starttime); osc.stop(starttime + note_length); }; // this tone should decay fairly quickly scheduletesttone(1, context.currenttime); // this tone should decay slower than the previous one scheduletesttone(0.5, context.currenttime + note_length); // this tone should decay only slightly scheduletesttone(0.1, context.currenttime + note_length * 2); after running this code, the
resulting waveforms should look something like this: specifications specification status comment web audio apithe definition of 'rollofffactor' in that specification.
ParentNode.querySelectorAll() - Web APIs
if you need only a single
result, consider the queryselector() method instead.
...ribute selector is used to return a list of the list items contained within a list whose id is userlist which have a data-active attribute whose value is 1: var container = document.queryselector("#userlist"); var matches = container.queryselectorall("li[data-active=1]"); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected
results.
PaymentAddress - Web APIs
const json = response.tojson(); const httpresponse = await fetch("/pay/", { method: "post", body: json }); const
result = httpresponse.ok ?
... "success" : "failure"; await response.complete(
result); } dopaymentrequest(); once the payment flow has been triggered using paymentrequest.show() and the promise resolves successfully, the paymentresponse object available inside the fulfilled promise (instrumentresponse above) will have a paymentresponse.details property that will contain response details.
PaymentResponse.complete() - Web APIs
syntax completepromise = paymentrequest.complete(
result); parameters
result optional a domstring indicating the state of the payment operation upon completion.
... note: in older versions of the specification, an empty string, "", was used instead of unknown to indicate a completion without a known
result state.
Payment processing concepts - Web APIs
verify that the information provided by the user
results in a valid transaction.
... this
results in the creation and returning of a payment method-specific object that contains the information needed to handle the transaction.
Permissions.revoke() - Web APIs
returns a promise that calls its fulfillment handler with a permissionstatus object indicating the
result of the request.
... function revokepermission() { navigator.permissions.revoke({name:'geolocation'}).then(function(
result) { report(
result.state); }); } ...
PositionOptions.enableHighAccuracy - Web APIs
the positionoptions.enablehighaccuracy property is a boolean that indicates the application would like to receive the best possible
results.
...note that this can
result in slower response times or increased power consumption (with a gps chip on a mobile device for example).
PositionOptions - Web APIs
properties positionoptions.enablehighaccuracy secure context is a boolean that indicates the application would like to receive the best possible
results.
...note that this can
result in slower response times or increased power consumption (with a gps chip on a mobile device for example).
PublicKeyCredential.response - Web APIs
in order to validate the creation of credentials, a relying party's server needs both: this response the extensions of the client (given by publickeycredential.getclientextension
results()) to validate the demand.
...rp", id : "login.example.com" }, user: { id: new uint8array(16) /* from the server */, name: "jdoe@example.com", displayname: "john doe" }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey: options }) .then(function (pubkeycredential) { var response = pubkeycredential.response; var clientext
results = pubkeycredential.getclientextension
results(); // send response and client extensions to the server so that it can validate // and create credentials }).catch(function (err) { // deal with any error }); specifications specification status comment web authentication: an api for accessing public key credentials level 1the definition of 'response' in that ...
PushManager.register() - Web APIs
if the method call is successful, the request's
result will be a string, which is the endpoint url.
... example var req = navigator.push.register(); req.onsuccess = function(e) { var endpoint = req.
result; debug("new endpoint: " + endpoint ); } req.onerror = function(e) { debug("error getting a new endpoint: " + json.stringify(e)); } specification specification status comment push api working draft defines the pushmanager interface.
PushManager.unregister() - Web APIs
if the method call is successful, the request's
result will be a pushregistration object representing the endpoint that has been unregistered.
... example var req = navigator.push.unregister(pushendpoint); req.onsuccess = function(e) { var endpoint = req.
result; debug("unregistered endpoint: " + endpoint ); } req.onerror = function(e) { debug("error unregistering the endpoint: " + json.stringify(e)); } specification specification status comment push api working draft defines the pushmanager interface.
PushMessageData.json() - Web APIs
the json()method of the pushmessagedata interface extracts push message data by parsing it as a json string and returning the
result.
... returns the
result of parsing push event data as json.
RTCDtlsTransport - Web APIs
*/ function tallysenders(pc) { let
results = { transportmissing: 0, connectionpending: 0, connected: 0, closed: 0, failed: 0, unknown: 0 }; let senderlist = pc.getsenders(); senderlist.foreach(sender => { let transport = sender.transport; if (!transport) {
results.transportmissing++; } else { switch(transport.state) { case "new": case "connecting":
results.
...connectionpending++; break; case "connected":
results.connected++; break; case "closed":
results.closed++; break; case "failed":
results.failed++; break; default:
results.unknown++; break; } } }); return
results; } note that in this code, the new and connecting states are being treated as a single connectionpending status in the returned object.
RTCIdentityEvent - Web APIs
the only event sent with this type is identity
result..
... examples pc.onidentity
result = function( ev ) { alert("a new identity assertion (blob: '" + ev.assertion + "') has been generated."); } ...
RTCRtpSender.setParameters() - Web APIs
operationerror any error condition which occurs that isn't covered by one of the other error codes
results in an operationerror.
... rangeerror the value specified for scaleresolutiondownby is less than 1.0, which would
result in scaling up rather than down, which is not allowed; or one or more of the specified encodings' maxframerate values is less than 0.0.
ReadableStream.cancel() - Web APIs
var searchterm = "service workers"; // chars to show either side of the
result in the match var contextbefore = 30; var contextafter = 30; var caseinsensitive = true; var url = 'https://html.spec.whatwg.org/'; console.log(`searching '${url}' for '${searchterm}'`); fetch(url).then(response => { console.log('received headers'); var decoder = new textdecoder(); var reader = response.body.getreader(); var tomatch = caseinsensitive ?
... searchterm.tolowercase() : searchterm; var buffersize = math.max(tomatch.length - 1, contextbefore); var bytesreceived = 0; var buffer = ''; var matchfoundat = -1; return reader.read().then(function process(
result) { if (
result.done) { console.log('failed to find match'); return; } bytesreceived +=
result.value.length; console.log(`received ${bytesreceived} bytes of data so far`); buffer += decoder.decode(
result.value, {stream: true}); // already found match & just context-gathering?
Request.mode - Web APIs
the associated mode, available values of which are: same-origin — if a request is made to another origin with this mode set, the
result is simply an error.
...in addition, javascript may not access any properties of the
resulting response.
SVGAngle - Web APIs
an svgangle object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
...object attributes unittype, valueinspecifiedunits, and valueasstring might be modified as a
result of this method.
SVGLengthList - Web APIs
an svglengthlist object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
... methods name & arguments return description clear() void clears all existing current items from the list, with the
result being an empty list.
SVGNumberList - Web APIs
an svgnumberlist object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
... methods name & arguments return description clear() void clears all existing current items from the list, with the
result being an empty list.
SVGPointList - Web APIs
an svgpointlist object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
... methods name & arguments return description clear() void clears all existing current items from the list, with the
result being an empty list.
SVGStringList - Web APIs
an svgstringlist object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
... methods name & arguments return description clear() void clears all existing current items from the list, with the
result being an empty list.
SharedWorker - Web APIs
d handle messages sent from it using port.postmessage() and port.onmessage, respectively: first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) {
result1.textcontent = e.data; console.log('message received from worker'); } inside the worker we use the sharedworkerglobalscope.onconnect handler to connect to the same port discussed above.
... onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var worker
result = '
result: ' + (e.data[0] * e.data[1]); port.postmessage(worker
result); }); port.start(); // required when using addeventlistener.
SharedWorkerGlobalScope: connect event - Web APIs
self.onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var worker
result = '
result: ' + (e.data[0] * e.data[1]); port.postmessage(worker
result); } port.start(); } for a complete running example, see our basic shared worker example (run shared worker.) addeventlistener equivalent you could also set up an event handler using the addeventlistener() method: self.addeventlistener('connect', function(e) { var port = e.ports[0]; port.onmessage = funct...
...ion(e) { var worker
result = '
result: ' + (e.data[0] * e.data[1]); port.postmessage(worker
result); } }); specifications specification status html living standardthe definition of 'connect event' in that specification.
SpeechRecognitionEvent.emma - Web APIs
the emma read-only property of the speechrecognitionevent interface returns an extensible multimodal annotation markup language (emma) — xml — representation of the
result.
... examples recognition.on
result = function(event) { var color = event.
results[0][0].transcript; diagnostic.textcontent = '
result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.emma); } ...
SubtleCrypto.decrypt() - Web APIs
syntax const
result = crypto.subtle.decrypt(algorithm, key, data); parameters algorithm is an object specifying the algorithm to be used, and any extra parameters as required.
... return value
result is a promise that fulfills with an arraybuffer containing the plaintext.
SubtleCrypto.deriveBits() - Web APIs
syntax const
result = crypto.subtle.derivebits( algorithm, basekey, length ); parameters algorithm is an object defining the derivation algorithm to use.
... return value
result is a promise that fulfills with an arraybuffer containing the derived bits.
SubtleCrypto.deriveKey() - Web APIs
syntax const
result = crypto.subtle.derivekey( algorithm, basekey, derivedkeyalgorithm, extractable, keyusages ); parameters algorithm is an object defining the derivation algorithm to use.
... return value
result is a promise that fulfills with a cryptokey.
SubtleCrypto.exportKey() - Web APIs
syntax const
result = crypto.subtle.exportkey(format, key); parameters format is a string value describing the data format in which the key should be exported.
... return value
result is a promise.
SubtleCrypto.unwrapKey() - Web APIs
syntax const
result = crypto.subtle.unwrapkey( format, wrappedkey, unwrappingkey, unwrapalgo, unwrappedkeyalgo, extractable, keyusages ); parameters format is a string describing the data format of the key to unwrap.
... unwrapkey: the key may be used to unwrap a key return value
result is a promise that fulfills with the unwrapped key as a cryptokey object.
SubtleCrypto.wrapKey() - Web APIs
syntax const
result = crypto.subtle.wrapkey( format, key, wrappingkey, wrapalgo ); parameters format is a string describing the data format in which the key will be exported before it is encrypted.
... return value
result is a promise that fulfills with an arraybuffer containing the encrypted exported key.
Using Touch Events - Web APIs
if the target area is too small, touching it could
result in firing other events for adjacent elements.
... the introduction of new input mechanisms
results in increased application complexity to handle various input events, such as key events, mouse events, pen/stylus events, and touch events.
USBDevice.clearHalt() - Web APIs
example the following example shows how to test for and clear a 'stall' condition in the
result of a data transfer.
... while (true) { let
result = await data.transferin(1, 6); if (
result.data &&
result.data.bytelength === 6) { console.log('channel 1: ' +
result.data.getuint16(0)); console.log('channel 2: ' +
result.data.getuint16(2)); console.log('channel 5: ' +
result.data.getuint16(4)); } if (
result.status === 'stall') { console.warn('endpoint stalled.
USBDevice.controlTransferOut() - Web APIs
the controltransferout() method of the usbdevice interface returns a promise that resolves with a usbouttransfer
result when a command or status operation has been transmitted to the usb device.
... return value a promise that resolves with a usbouttransfer
result.
USBDevice.isochronousTransferIn() - Web APIs
the isochronoustransferin() method of the usbdevice interface returns a promise that resolves with a usbisochronousintransfer
result when time sensitive information has been transmitted received from the usb device.
... return value a promise that resolves with a usbisochronousintransfer
result specifications specification status comment webusbthe definition of 'isochronoustransferin()' in that specification.
USBDevice.isochronousTransferOut() - Web APIs
the isochronoustransferout() method of the usbdevice interface returns a promise that resolves with a usbisochronousouttransfer
result when time sensitive information has been transmitted to the usb device.
... return value a promise that resolves with a usbisochronousouttransfer
result.
USBDevice.transferOut() - Web APIs
the transferout() method of the usbdevice interface returns a promise that resolves with a usbtransferout
result when bulk or interrupt data is sent to the usb device.
... return value a promise that resolves with a usbtransferout
result.
WaveShaperNode.oversample - Web APIs
this leads to better
results by avoiding some aliasing, but comes at the expense of a lower precision shaping curve.
...their s-shape, for instance, helps create a smoother sounding
result.
WebGLRenderingContext.enableVertexAttribArray() - Web APIs
= gl.getattriblocation(shaderprogram, "avertexposition"); gl.enablevertexattribarray(avertexposition); gl.vertexattribpointer(avertexposition, vertexnumcomponents, gl.float, false, 0, 0); gl.drawarrays(gl.triangles, 0, vertexcount); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the
resulting animation in action.
...but as a
result, accessing avertexposition now obtains data from the vertex buffer.
A basic 2D WebGL animation example - Web APIs
but as a
result, accessing avertexposition now obtains data from the vertex buffer.
...
result this is a pretty simple example, since it's just drawing one simple object, but the concepts used here extend to much more complex animations.
Adding 2D content to a WebGL context - Web APIs
that position is then multiplied by two 4x4 matrices we provide called uprojectionmatrix and umodelviewmatrix; gl_position is set to the
result.
... const fieldofview = 45 * math.pi / 180; // in radians const aspect = gl.canvas.clientwidth / gl.canvas.clientheight; const znear = 0.1; const zfar = 100.0; const projectionmatrix = mat4.create(); // note: glmatrix.js always has the first argument // as the destination to receive the
result.
Lighting in WebGL - Web APIs
it just runs two functions you supply — a vertex shader and a fragment shader — and expects you to write creative functions to get the
results you want.
...as a
result, we now have an rgb value that will be used by the fragment shader to adjust the color of each pixel we render.
Introduction to the Real-time Transport Protocol (RTP) - Web APIs
the sdp answer is generated and sent using a method called sendanswer(), which generates the answer using createanswer() then sends the
resulting sdp to the other peer over the signaling service.
... just like when hold was engaged, this triggers negotiation again,
resulting in your code sending a new offer to the remote peer.
Signaling and video calling - Web APIs
note: we could restrict the set of permitted media inputs to a specific device or set of devices by calling navigator.mediadevices.enumeratedevices() to get a list of devices, filtering the
resulting list based on our desired criteria, then using the selected devices' deviceid values in the deviceid field of the the mediaconstraints object passed into getusermedia().
...in this example, we ignore "securityerror" and "permissiondeniederror"
results, treating refusal to grant permission to use the media hardware the same as the user canceling the call.
Window.devicePixelRatio - Web APIs
this is useful when dealing with the difference between rendering on a standard display versus a hidpi or retina display, which use more screen pixels to draw the same objects,
resulting in a sharper image.
...22px arial, sans-serif; } .container { top: 2em; width: 22em; height: 14em; border: 2px solid #22d; margin: 0 auto; padding: 0; background-color: #a9f; } .inner-container { padding: 1em 2em; text-align: justify; text-justify: auto; } .pixel-ratio { position: relative; margin: auto; height: 1.2em; text-align: right; bottom: 0; right: 1em; font-weight: bold; }
result specifications specification status comment css object model (cssom) view modulethe definition of 'window.devicepixelratio' in that specification.
Window.getComputedStyle() - Web APIs
ding: 20px; font: 2rem/2 sans-serif; text-align: center; background: purple; color: white; } javascript let para = document.queryselector('p'); let compstyles = window.getcomputedstyle(para); para.textcontent = 'my computed font-size is ' + compstyles.getpropertyvalue('font-size') + ',\nand my computed line-height is ' + compstyles.getpropertyvalue('line-height') + '.';
result description the returned object is the same cssstyledeclaration type as the object returned from the element's style property.
... <style> h3::after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 = document.queryselector('h3'); var
result = getcomputedstyle(h3, ':after').content; console.log('the generated content is: ',
result); // returns ' rocks!' </script> notes the returned cssstyledeclaration object contains active values for css property longhand names.
Window.pageYOffset - Web APIs
ementbyid("info"); var target = framedoc.getelementbyid("overview"); framedoc.scrollingelement.scrolltop = target.offsettop; info.innertext = "y offset after scrolling: " + frame.contentwindow.pageyoffset + " pixels"; the javascript code begins by getting into frame and info the <iframe> element that contains our content as well as the <div> element into which we'll output the
result of our scroll position check.
... css iframe { width: 620px; height: 450px; border: 1px solid black; } #info { margin-top: 20px; font: 16px "open sans", "helvetica", "arial"; }
result the
result follows.
Window.prompt() - Web APIs
syntax
result = window.prompt(message, default); parameters message optional a string of text to display to the user.
... please note that
result is a string.
WritableStream.WritableStream() - Web APIs
defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " ...
...+ decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStream.getWriter() - Web APIs
defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " ...
...+ decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStream - Web APIs
defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " ...
...+ decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.WritableStreamDefaultWriter() - Web APIs
defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " ...
...+ decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.close() - Web APIs
defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " ...
...+ decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter.write() - Web APIs
defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk decoded: " ...
...+ decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
WritableStreamDefaultWriter - Web APIs
defaultwriter.ready .then(() => { defaultwriter.close(); }) .then(() => { console.log("all chunks written"); }) .catch((err) => { console.log("stream error:", err); }); } const decoder = new textdecoder("utf-8"); const queuingstrategy = new countqueuingstrategy({ highwatermark: 1 }); let
result = ""; const writablestream = new writablestream({ // implement the sink write(chunk) { return new promise((resolve, reject) => { var buffer = new arraybuffer(2); var view = new uint16array(buffer); view[0] = chunk; var decoded = decoder.decode(view, { stream: true }); var listitem = document.createelement('li'); listitem.textcontent = "chunk d...
...ecoded: " + decoded; list.appendchild(listitem);
result += decoded; resolve(); }); }, close() { var listitem = document.createelement('li'); listitem.textcontent = "[message received] " +
result; list.appendchild(listitem); }, abort(err) { console.log("sink error:", err); } }, queuingstrategy); sendmessage("hello, world.", writablestream); you can find the full code in our simple writer example.
Using XMLHttpRequest - Web APIs
after the transaction completes, the object will contain useful information such as the response body and the http status of the
result.
...submitting..."); */ submitdata (odata); } function pushsegment (ofrevt) { this.owner.segments[this.segmentidx] += ofrevt.target.
result + "\r\n"; this.owner.status--; processstatus(this.owner); } function plainescape (stext) { /* how should i treat a text/plain form encoding?
XMLSerializer.serializeToString() - Web APIs
notes on the
resulting xml there are some things worth noting about the xml output by serializetostring(): for xml serializations, element and attr nodes are always serialized with their namespaceuri intact.
... the
resulting xml is compatible with the html parser.
XPathEvaluator - Web APIs
xpathevaluator.evaluate() evaluates an xpath expression string and returns a
result of the specified type if possible.
... html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var
result = expression.evaluate(document, xpath
result.ordered_node_snapshot_type); document.queryselector("output").textcontent =
result.snapshotlength;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator' in that specification.
XRInputSourceEvent.frame - Web APIs
however, since the event frame isn't an animation frame, there is no viewer pose available to represent the viewer's current point of view; the
results of calling getviewerpose() will be an xrviewerpose with an empty views list.
... then, if the
result isn't null, the target ray pose's transform is passed into a function called mycheckandhandlehit() to see if the ray was pointing at anything when the select was triggered.
XRView.projectionMatrix - Web APIs
this should be used to integrate perspective to everything in the scene, in order to ensure the
result is consistent with what the eye expects to see.
... important: failure to apply proper perspective, or inconsistencies in perspective, may
result in possibly serious user discomfort or distress.
XRWebGLLayer.framebuffer - Web APIs
calling functions such as framebuffertexture2d(), framebufferrenderbuffer(), deleteframebuffer(), or getframebufferattachmentparameter() on an opaque framebuffer
results in the webgl error invalid_operation (0x0502).
...attempting to clear, draw to, or read from the framebuffer
results in a webgl invalid_framebuffer_operation error (0x0506).
Generating HTML - Web APIs
since there is no html namespace, and using the xhtml namespace would force the xsl to create an xml document that would not behave like a html document, the xsl:output in the xsl stylesheet will make sure the
resulting document will be handled as html.
...by setting the output to be html and not having a namespace on the
resulting elements (colored in blue), those elements will be treated as html elements.
Introduction - Web APIs
this allows xslt to add, remove and reorganize elements from the original xml document and thus allows more fine-grain control of the
resulting document's structure.
...each template matches (using xpath) a certain fragment of the input xml document and then applies the substitution part on that fragment to create the new
resulting document.
Web applications and ARIA FAQ - Accessibility
as a
result, pages that include aria may not validate using tools such as the w3c's markup validator.
...as a
result, the user potentially gets a more consistent user experience, where dynamic javascript-driven widgets on the web are comparable to their equivalents on the desktop.
Implementing a Microsoft Active Accessibility (MSAA) Server - Accessibility
the easiest way to do this is to objid_client object cache its parent's window handle and then implement its get_accparent() method to return the
results of accessibleobjectfromwindow(mparenthwnd objid_window, iid_iaccessible, &ptr); not all msaa objects implemented by 3rd party vendors problem: as described above, screen readers tend to look first for window classes they know, such as button, listbox, combobox, msctls_statusbar32, msctls_trackbar32, #32770 (dialog class), systreeview32, static, edit and richedit.
...implement only what's needed -- supporting everything would take too long for zero
results.
::first-letter (:first-letter) - CSS: Cascading Style Sheets
stet clita kasd gubergren, no sea takimata sanctus est.</p> <p>duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat.</p> css p { width: 500px; line-height: 1.5; } h2 + p::first-letter { color: white; background-color: black; border-radius: 2px; box-shadow: 3px 3px 0 red; font-size: 250%; padding: 6px 3px; margin-right: 6px; float: left; }
result effect on special punctuation and non-latin characters this example illustrates the effect of ::first-letter on special punctuation and non-latin characters.
...ning of a special punctuation mark.</p> <p>'the beginning of a special punctuation mark.</p> <p>*the beginning of a special punctuation mark.</p> <p>#the beginning of a special punctuation mark.</p> <p>「特殊的汉字标点符号开头。</p> <p>《特殊的汉字标点符号开头。</p> <p>“特殊的汉字标点符号开头。</p> css p::first-letter { color: red; font-size: 150%; }
result specifications specification status comment css pseudo-elements level 4the definition of '::first-letter' in that specification.
:checked - CSS: Cascading Style Sheets
{ margin: 8px; } /* labels for checked inputs */ input:checked + label { color: red; } /* radio element, when checked */ input[type="radio"]:checked { box-shadow: 0 0 0 3px orange; } /* checkbox element, when checked */ input[type="checkbox"]:checked { box-shadow: 0 0 0 3px hotpink; } /* option elements, when selected */ option:checked { box-shadow: 0 0 0 3px lime; color: red; }
result toggling elements with a hidden checkbox this example utilizes the :checked pseudo-class to let the user toggle content based on the state of a checkbox, all without using javascript.
...on */ #expand-btn { display: inline-block; margin-top: 12px; padding: 5px 11px; background-color: #ff7; border: 1px solid; border-radius: 3px; } /* show hidden content when the checkbox is checked */ #expand-toggle:checked ~ * .expandable { visibility: visible; } /* style the button when the checkbox is checked */ #expand-toggle:checked ~ #expand-btn { background-color: #ccc; }
result image gallery you can use the :checked pseudo-class to build an image gallery with full-size images that show only when the user clicks on a thumbnail.
:first-of-type - CSS: Cascading Style Sheets
syntax :first-of-type examples styling the first paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:first-of-type { color: red; font-style: italic; }
result nested elements this example shows how nested elements can also be targeted.
... html <article> <div>this `div` is first!</div> <div>this <span>nested `span` is first</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <div>this <span>nested `span` gets styled</span>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`.</div> </article> css article :first-of-type { background-color: pink; }
result specifications specification status comment selectors level 4the definition of ':first-of-type' in that specification.
:last-of-type - CSS: Cascading Style Sheets
syntax :last-of-type examples styling the last paragraph html <h2>heading</h2> <p>paragraph 1</p> <p>paragraph 2</p> css p:last-of-type { color: red; font-style: italic; }
result nested elements this example shows how nested elements can also be targeted.
... html <article> <div>this `div` is first.</div> <div>this <span>nested `span` is last</span>!</div> <div>this <em>nested `em` is first</em>, but this <em>nested `em` is last</em>!</div> <b>this `b` qualifies!</b> <div>this is the final `div`!</div> </article> css article :last-of-type { background-color: pink; }
result specifications specification status comment selectors level 4the definition of ':last-of-type' in that specification.
:not() - CSS: Cascading Style Sheets
/* selects any element that is not a paragraph */ :not(p) { color: blue; } the :not() pseudo-class has a number of quirks, tricks, and unexpected
results that you should be aware of before using it.
...*/ body :not(.crazy, .fancy) { font-family: sans-serif; }
result specifications specification status comment selectors level 4the definition of ':not()' in that specification.
:nth-child() - CSS: Cascading Style Sheets
the first one to be returned as a
result of the formula is 0 [=5x0],
resulting in a no-match, since the elements are indexed from 1, whereas n starts from 0.
... is an `em`.</em> <span>span!</span> <span>span</span> <span>span!</span> <span>span</span> <span>span!</span> </div> css html { font-family: sans-serif; } span, div em { padding: 5px; border: 1px solid green; display: inline-block; margin-bottom: 3px; } .first span:nth-child(2n+1), .second span:nth-child(2n+1), .third span:nth-of-type(2n+1) { background-color: lime; }
result specifications specification status comment selectors level 4the definition of ':nth-child' in that specification.
:nth-last-child() - CSS: Cascading Style Sheets
<tr> <td>fifth line</td> </tr> </tbody> </table> css table { border: 1px solid blue; } /* selects the last three elements */ tr:nth-last-child(-n+3) { background-color: pink; } /* selects every element starting from the second to last item */ tr:nth-last-child(n+2) { color: blue; } /* select only the last second element */ tr:nth-last-child(2) { font-weight: 600; }
result quantity query a quantity query styles elements depending on how many of them there are.
... html <h4>a list of four items (styled):</h4> <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> </ol> <h4>a list of two items (unstyled):</h4> <ol> <li>one</li> <li>two</li> </ol> css /* if there are at least three list items, style them all */ li:nth-last-child(n+3), li:nth-last-child(n+3) ~ li { color: red; }
result specifications specification status comment selectors level 4the definition of ':nth-last-child' in that specification.
:only-child - CSS: Cascading Style Sheets
syntax :only-child examples basic example html <div> <div>i am an only child.</div> </div> <div> <div>i am the 1st sibling.</div> <div>i am the 2nd sibling.</div> <div>i am the 3rd sibling, <div>but this is an only child.</div></div> </div> css div:only-child { color: red; } div { display: inline-block; margin: 6px; outline: 1px solid; }
result a list example html <ol> <li>first <ul> <li>this list has just one element.</li> </ul> </li> <li>second <ul> <li>this list has three elements.</li> <li>this list has three elements.</li> <li>this list has three elements.</li> </ul> </li> </ol> css li li { list-style-type: disc; } li:only-child { color: red; list-style-type: square; } ...
...
result specifications specification status comment selectors level 4the definition of ':only-child' in that specification.
:target - CSS: Cascading Style Sheets
isn't that delightful?</p> css p:target { background-color: gold; } /* add a pseudo-element inside the target element */ p:target::before { font: 70% sans-serif; content: "►"; color: limegreen; margin-right: .25em; } /* style italic elements within the target element */ p:target i { color: red; }
result pure-css lightbox you can use the :target pseudo-class to create a lightbox without using any javascript.
... position: absolute; display: flex; z-index: 1; align-items: center; justify-content: center; background-color: black; border-radius: 50%; color: white; content: "×"; cursor: pointer; } /* lightbox overlay */ .lightbox .close::before { left: 0; top: 0; width: 100%; height: 100%; position: fixed; background-color: rgba(0,0,0,.7); content: ""; cursor: default; }
result specifications specification status comment html living standardthe definition of ':target' in that specification.
Using CSS counters - CSS: Cascading Style Sheets
ection; /* increment the value of section counter by 1 */ content: "section " counter(section) ": "; /* display the word 'section ', the value of section counter, and a colon before the content of each h3 */ } html <h3>introduction</h3> <h3>body</h3> <h3>conclusion</h3>
result nesting counters a css counter can be especially useful for making outlined lists, because a new instance of the counter is automatically created in child elements.
.../ol> <ol> <li>item</li> <!-- 2.3.1 --> <li>item</li> <!-- 2.3.2 --> <li>item</li> <!-- 2.3.3 --> </ol> </li> <li>item</li> <!-- 2.4 --> </ol> </li> <li>item</li> <!-- 3 --> <li>item</li> <!-- 4 --> </ol> <ol> <li>item</li> <!-- 1 --> <li>item</li> <!-- 2 --> </ol>
result specifications specification status comment css lists module level 3the definition of 'css counters' in that specification.
Stacking context example 1 - CSS: Cascading Style Sheets
in terms of stacking contexts, div #1 and div #3 are simply assimilated into the root element, and the
resulting hierarchy is the following: root stacking context div #2 (z-index 1) div #4 (z-index 2) note: div #1 and div #3 are not translucent.
... width: 150px; height: 200px; top: 20px; left: 170px; border: 1px dashed #990000; background-color: #ffdddd; text-align: center; } #div4 { opacity: 0.8; z-index: 2; position: absolute; width: 200px; height: 70px; top: 65px; left: 50px; border: 1px dashed #000099; background-color: #ddddff; text-align: left; padding-left: 10px; }
result ...
The stacking context - CSS: Cascading Style Sheets
in our example (sorted according to the final rendering order): root div #2 - z-index is 2 div #3 - z-index is 4 div #5 - z-index is 1, stacked under an element with a z-index of 4, which
results in a rendering order of 4.1 div #6 - z-index is 3, stacked under an element with a z-index of 4, which
results in a rendering order of 4.3 div #4 - z-index is 6, stacked under an element with a z-index of 4, which
results in a rendering order of 4.6 div #1 - z-index is 5 example html <div id="div1"> <h1>division element #1</h1> <code>positio...
...{ border: 1px dashed #996; background-color: #ffc; } #div4 { z-index: 6; margin-bottom: 15px; padding: 25px 10px 5px; } #div5 { z-index: 1; margin-top: 15px; padding: 5px 10px; } #div6 { z-index: 3; position: absolute; top: 20px; left: 180px; width: 150px; height: 125px; border: 1px dashed #009; padding-top: 125px; background-color: #ddf; text-align: center; }
result ...
Using CSS transforms - CSS: Cascading Style Sheets
0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; }
result the second element to configure is the position of the viewer, with the perspective-origin property.
...z(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); }
result once you have done this, you can work on the element in the 3d space.
Media queries - CSS: Cascading Style Sheets
in css, use the @media at-rule to conditionally apply part of a style sheet based on the
result of a media query.
... testing media queries programmatically describes how to use media queries in your javascript code to determine the state of a device, and to set up listeners that notify your code when the
results of media queries change (such as when the user rotates the screen or resizes the browser).
background-attachment - CSS: Cascading Style Sheets
</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"); background-attachment: fixed; }
result multiple background images this property supports multiple background images.
...</p> css p { background-image: url("https://mdn.mozillademos.org/files/12057/starsolid.gif"), url("https://mdn.mozillademos.org/files/12059/startransparent.gif"); background-attachment: fixed, scroll; background-repeat: no-repeat, repeat-y; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-attachment' in that specification.
<basic-shape> - CSS: Cascading Style Sheets
for this specification, this
results in an empty float area.
...th: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); animation: 4s poly infinite alternate ease-in-out; margin: 10px auto; } @keyframes poly { from { clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%); } to { clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0%); } }
result specifications specification status comment css shapes module level 1the definition of '<basic-shape>' in that specification.
border-bottom-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise
result when using one of them is implementation-specific.
... or 0 if border-bottom-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing bottom border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-bottom-width: thick; } div:nth-child(2) { border-bottom-width: 2em; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-width' in that specification.
border-bottom - CSS: Cascading Style Sheets
since the default value of border-bottom-style is none, not specifying the border-style part
results in no border.
...</div> css div { border-bottom: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; }
results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom' in that specification.
border-left-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise
result when using one of them is implementation-specific.
...solute length or 0 if border-left-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-left-width: thick; } div:nth-child(2) { border-left-width: 2em; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-width' in that specification.
border-left - CSS: Cascading Style Sheets
since the default value of border-left-style is none, not specifying the border-style part
results in no border.
...</div> css div { border-left: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; }
results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left' in that specification.
border-right-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise
result when using one of them is implementation-specific.
...ute length or 0 if border-right-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples comparing border widths html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-right-width: thick; } div:nth-child(2) { border-right-width: 2em; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-width' in that specification.
border-right - CSS: Cascading Style Sheets
since the default value of border-right-style is none, not specifying the border-style part
results in no border.
...</div> css div { border-right: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; }
results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right' in that specification.
border-top-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise
result when using one of them is implementation-specific.
...eritednocomputed valuethe absolute length or 0 if border-top-style is none or hiddenanimation typea length formal syntax <line-width>where <line-width> = <length> | thin | medium | thick examples html <div>element 1</div> <div>element 2</div> css div { border: 1px solid red; margin: 1em 0; } div:nth-child(1) { border-top-width: thick; } div:nth-child(2) { border-top-width: 2em; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-width' in that specification.
border-top - CSS: Cascading Style Sheets
since the default value of border-top-style is none, not specifying the border-style part
results in no border.
...</div> css div { border-top: 4px dashed blue; background-color: gold; height: 100px; width: 100px; font-weight: bold; text-align: center; }
results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top' in that specification.
border-width - CSS: Cascading Style Sheets
if it's a keyword, it must be one of the following values: thin a thin border medium a medium border thick a thick border note: because the specification doesn't define the exact thickness denoted by each keyword, the precise
result when using one of them is implementation-specific.
...ifferent values: "thin" top, "medium" right, "thick" bottom, and 1em left</p> css #sval { border: ridge #ccc; border-width: 6px; } #bival { border: solid red; border-width: 2px 10px; } #treval { border: dotted orange; border-width: 0.3em 0 9px; } #fourval { border: solid lightgreen; border-width: thin medium thick 1em; } p { width: auto; margin: 0.25em; padding: 0.25em; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-width' in that specification.
box-shadow - CSS: Cascading Style Sheets
tml <blockquote><q>you may shoot me with your words,<br/> you may cut me with your eyes,<br/> you may kill me with your hatefulness,<br/> but still, like air, i'll rise.</q> <p>— maya angelou</p> </blockquote> css blockquote { padding: 20px; box-shadow: inset 0 -3em 3em rgba(0,0,0,0.1), 0 0 0 2px rgb(255,255,255), 0.3em 0.3em 1em rgba(0,0,0,0.3); }
result setting zero for offset and blur when the x-offset, y-offset, and blur are all zero, the box shadow will be a solid-colored outline of equal-size on all sides.
... html <div><p>hello world</p></div> css p { box-shadow: 0 0 0 2em #f4aab9, 0 0 0 4em #66ccff; margin: 4em; padding:1em; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'box-shadow' in that specification.
clamp() - CSS: Cascading Style Sheets
the preferred value is the expression whose value will be used as long as the
result is between the minimum and maximum values.
...this means that the width will be set at 1000px, unless the
result of calc(70% + 100px) is less than 1000px, in which case it will be set to that value instead.
clip-path - CSS: Cascading Style Sheets
note: a computed value other than none
results in the creation of a new stacking context the same way that css opacity does for values other than 1.
...">inset</option> <option value="path('m 0 200 l 0,110 a 110,90 0,0,1 240,100 l 200 340 z')">path</option> </select> css #clipped { margin-bottom: 20px; clip-path: url(#cross); } javascript const clippathselect = document.getelementbyid("clippath"); clippathselect.addeventlistener("change", function (evt) { document.getelementbyid("clipped").style.clippath = evt.target.value; });
result specifications specification status comment css masking module level 1the definition of 'clip-path' in that specification.
column-fill - CSS: Cascading Style Sheets
content takes up only the room it needs, this may
result in some columns remaining empty.
...</p> css .content-box { column-count: 4; column-rule: 1px solid black; column-fill: balance; }
result specifications specification status comment css multi-column layout modulethe definition of 'column-fill' in that specification.
column-gap (grid-column-gap) - CSS: Cascading Style Sheets
mation typea length, percentage or calc(); formal syntax normal | <length-percentage>where <length-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; height: 100px; column-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: auto; }
result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-column-gap: 20px; } #grid { display: grid; height: 100px; grid-template-columns: repeat(3, 1fr); grid-template-rows: 100px; column-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; }
result multi-column layout html <p class="content-box"> ...
...</p> css .content-box { column-count: 3; column-gap: 40px; }
result specifications specification status comment css box alignment module level 3the definition of 'column-gap' in that specification.
counters() - CSS: Cascading Style Sheets
<ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::marker { content: counters(listcounter, '.', upper-roman) ') '; } li::before { content: counters(listcounter, ".") " == " counters(listcounter, ".", lower-roman) ; }
result decimal-leading-zero compared to lower-alpha html <ol> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> <li></li> <li></li> <li> <ol> <li></li> <li> <ol> <li></li> <li></li> <li></li> </ol> </li> </ol> </li> </ol> css ol { counter-reset: cou...
...nt; } li { counter-increment: count; } li::marker { content: counters(count, '.', upper-alpha) ') '; } li::before { content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha); }
result specifications specification status comment css lists module level 3the definition of 'css counters' in that specification.
<display-box> - CSS: Cascading Style Sheets
display: none html <p>visible text</p> <p class="secret">invisible text</p> css p.secret { display: none; }
result display: contents in this example the outer <div> has a 2-pixel red border and a width of 300px.
... html <div class="outer"> <div>inner div.</div> </div> css .outer { border: 2px solid red; width: 300px; display: contents; } .outer > div { border: 1px solid green; }
result specifications specification status css display module level 3the definition of 'display-box' in that specification.
<display-inside> - CSS: Cascading Style Sheets
this will
result in expected behavior; for example if you specify an element to be display: grid, you would expect that the box created on the grid container would be a block level box.
... html <div class="box"> <div class="float">i am a floated box!</div> <p>i am content inside the container.</p> </div> css .box { background-color: rgb(224, 206, 247); border: 5px solid rebeccapurple; display: flow-root; } .float { float: left; width: 200px; height: 150px; background-color: white; border:1px solid black; padding: 10px; }
result specifications specification status css display module level 3the definition of 'display-inside' in that specification.
<display-outside> - CSS: Cascading Style Sheets
this will
result in expected behavior; for example if you specify an element to be block, you would expect that the children of that element would participate in block and inline normal flow layout.
... html <span>span 1</span> <span>span 2</span> css span { display: block; border: 1px solid rebeccapurple; }
result specifications specification status css display module level 3the definition of 'display-outside' in that specification.
<filter-function> - CSS: Cascading Style Sheets
each function requires an argument which, if invalid,
results in no filter being applied.
...etattribute('data-unit')})`; } else { divelem.style.filter = `${selectelem.value}(${slider.value}${slider.getattribute('data-unit')}`; } updateoutput(); updatecurvalue(); } function updateoutput() { output.textcontent = slider.value; } function updatecurvalue() { curvalue.textcontent = `filter: ${divelem.style.filter}`; } setslider(selectelem.value); setdiv(selectelem.value);
result specifications specification status filter effects module level 1the definition of 'filter-function' in that specification.
font-size-adjust - CSS: Cascading Style Sheets
this will still produce reasonable
results in browsers that do not support font-size-adjust, where a 14px font will be used.
...rdana font (10px), which has relatively large lowercase letters.</p> <p class="adjtimes">this is the 10px times, but now adjusted to the same aspect ratio as the verdana.</p> css .times { font-family: times, serif; font-size: 10px; } .verdana { font-family: verdana, sans-serif; font-size: 10px; } .adjtimes { font-family: times, serif; font-size-adjust: 0.58; font-size: 10px; }
results specifications specification status comment css fonts module level 3the definition of 'font-size-adjust' in that specification.
font-variant-ligatures - CSS: Cascading Style Sheets
this leads to more harmonized forms in the
resulting text.
...ary-ligatures { font-variant-ligatures: no-discretionary-ligatures; } .historical-ligatures { font-variant-ligatures: historical-ligatures; } .no-historical-ligatures { font-variant-ligatures: no-historical-ligatures; } .contextual { font-variant-ligatures: contextual; } .no-contextual { font-variant-ligatures: no-contextual; } .contextual { font-variant-ligatures: contextual; }
result specifications specification status comment css fonts module level 3the definition of 'font-variant-ligatures' in that specification.
gap (grid-gap) - CSS: Cascading Style Sheets
examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; gap: 20px 5px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; }
result grid layout html <div id="grid"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #grid { grid-gap: 20px 5px; } #grid { display: grid; height: 200px; grid-template: repeat(3, 1fr) / repeat(3, 1fr); gap: 20px 5px; } #grid > div { border: 1px solid green; background-color: lime; } res...
...</p> css .content-box { column-count: 3; gap: 40px; }
result specifications specification status comment css box alignment module level 3the definition of 'gap' in that specification.
grid-template-columns - CSS: Cascading Style Sheets
the intrinsic size contributions of the track may be adjusted to the size of the grid container and increase the final size of the track by the minimum amount that would
result in honoring the percentage.
...ontent | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid column sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; width: 100%; grid-template-columns: 50px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; }
result specifications specification status comment css grid layoutthe definition of 'grid-template-columns' in that specification.
grid-template-rows - CSS: Cascading Style Sheets
the intrinsic size contributions of the track may be adjusted to the size of the grid container, and increase the final size of the track by the minimum amount that would
result in honoring the percentage.
...in-content | max-content | auto<fixed-breadth> = <length-percentage>where <length-percentage> = <length> | <percentage> examples specifying grid row sizes html <div id="grid"> <div id="areaa">a</div> <div id="areab">b</div> </div> css #grid { display: grid; height: 100px; grid-template-rows: 30px 1fr; } #areaa { background-color: lime; } #areab { background-color: yellow; }
result specifications specification status comment css grid layoutthe definition of 'grid-template-rows' in that specification.
mask-type - CSS: Cascading Style Sheets
www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:alpha"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> </svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); }
result setting a luminance mask html <div class="redsquare"></div> <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0"> <defs> <mask id="m" maskcontentunits="objectboundingbox" style="mask-type:luminance"> <rect x=".1" y=".1" width=".8" height=".8" fill="red" fill-opacity="0.7"/> </mask> </defs> ...
...</svg> css .redsquare { height: 100px; width: 100px; background-color: rgb(128, 128, 128); border: solid 1px black; mask: url("#m"); mask-type:luminance; }
result specifications specification status comment css masking module level 1the definition of 'mask-type' in that specification.
minmax() - CSS: Cascading Style Sheets
the user agent may adjust the intrinsic size contributions of the track to the size of the grid container and increase the final size of the track by the minimum amount that would
result in honoring the percentage.
... </div> </div>
result specifications specification status comment css grid layoutthe definition of 'minmax()' in that specification.
object-fit - CSS: Cascading Style Sheets
scale-down the content is sized as if none or contain were specified, whichever would
result in a smaller concrete object size.
...flex-direction: column; flex-wrap: wrap; align-items: flex-start; height: 940px; } img { width: 150px; height: 100px; border: 1px solid #000; } .narrow { width: 100px; height: 150px; margin-top: 10px; } .fill { object-fit: fill; } .contain { object-fit: contain; } .cover { object-fit: cover; } .none { object-fit: none; } .scale-down { object-fit: scale-down; }
result specifications specification status comment css images module level 4the definition of 'object-fit' in that specification.
overflow-wrap - CSS: Cascading Style Sheets
formal definition initial valuenormalapplies tonon-replaced inline elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | break-word | anywhere examples comparing overflow-wrap, word-break, and hyphens this example compares the
results of overflow-wrap, word-break, and hyphens when breaking up a long word.
...(<code>hyphens</code>, german rules)</p> css p { width: 13em; margin: 2px; background: gold; } .ow-anywhere { overflow-wrap: anywhere; } .ow-break-word { overflow-wrap: break-word; } .word-break { word-break: break-all; } .hyphens { hyphens: auto; }
result specifications specification status comment css text module level 3the definition of 'overflow-wrap' in that specification.
quotes - CSS: Cascading Style Sheets
that's the question!</q> css q { quotes: '"' '"' "'" "'"; } q::before { content: open-quote; } q::after { content: close-quote; }
result auto quotes for most browsers, the default value of quotes is auto (firefox 70+), or the browser otherwise had this default behavior (chromiums, safari, edge), so this example works without it being explicitly being set.
... html <div lang="fr"> <q>ceci est une citation française.</q> <div> <hr> <div lang="ru"> <q>Это русская цитата</q> <div> <hr> <div lang="de"> <q>dies ist ein deutsches zitat</q> <div> <hr> <div lang="en"> <q>this is an english quote.</q> <div> css /*q { quotes: auto; }*/
result specifications specification status comment css generated content module level 3the definition of 'quotes' in that specification.
repeating-linear-gradient() - CSS: Cascading Style Sheets
the function's
result is an object of the <gradient> data type, which is a special kind of <image>.
...thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will
result in a sharp visual transition.
repeating-radial-gradient() - CSS: Cascading Style Sheets
the function's
result is an object of the <gradient> data type, which is a special kind of <image>.
...thus, the position of each ending color stop coincides with a starting color stop; if the color values are different, this will
result in a sharp visual transition, which can be mitigated by repeating the first color as the last color.
resize - CSS: Cascading Style Sheets
html <textarea>type some text here.</textarea> css textarea { resize: none; /* disables resizability */ }
result using resize with arbitrary elements you can use the resize property to make any element resizable.
... </p> </div> css .resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height: 300px; width: 300px; } p { height: 200px; width: 200px; }
result specifications specification status comment css logical properties and values level 1the definition of 'resize' in that specification.
right - CSS: Cascading Style Sheets
relative positioning using right html <div id="relative">relatively positioned</div> <div id="absolute">absolutely positioned</div> css #relative { width: 100px; height: 100px; background-color: #ffc7e4; position: relative; top: 20px; left: 20px; } #absolute { width: 100px; height: 100px; background-color: #ffd7c2; position: absolute; bottom: 10px; right: 20px; }
result declaring both left and right when both left and right are declared, the element will stretch to meet both, unless other constraints prevent it from doing so.
...>no width</div> <div id="width">width: 100px</div> </div> css div { outline: 1px solid #cccccc; } #parent { width: 200px; height: 200px; background-color: #ffc7e4; position: relative; } /* declare both a left and a right */ #width, #nowidth { background-color: #c2ffd7; position: absolute; left: 0; right: 0; } /* declare a width */ #width { width: 100px; top: 60px; }
result specifications specification status comment css positioned layout module level 3the definition of 'right' in that specification.
ruby-align - CSS: Cascading Style Sheets
uby bases, ruby annotations, ruby base containers, ruby annotation containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax start | center | space-between | space-around examples ruby aligned at the start of the base text html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: start; }
result ruby aligned at the center of the base text html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: center; }
result extra space distributed between ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-between;...
... }
result extra space distributed between and around ruby elements html <ruby> <rb>this is a long text to check</rb> <rp>(</rp><rt>short ruby</rt><rp>)</rp> </ruby> css ruby { ruby-align: space-around; }
result specifications specification status comment css ruby layout module level 1the definition of 'ruby-align' in that specification.
shape-outside - CSS: Cascading Style Sheets
if this
results in network errors such that there is no valid fallback image, the effect is as if the value none had been specified.
...0%); float: left; -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); } .right { -webkit-shape-outside: polygon(100% 0, 100% 100%, 0 100%); shape-outside: polygon(100% 0, 100% 100%, 0 100%); float: right; -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); } p { text-align: center; }
result specifications specification status comment css shapes module level 1the definition of 'shape-outside' in that specification.
text-overflow - CSS: Cascading Style Sheets
w */ text-overflow: " [..]"; } html <p class="overflow-visible">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-clip">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-ellipsis">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-string">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
result note: live
results in the following table may be shown incorrectly due to a limitation of the mdn editor which removes the all contents of style attributes which have text-overflow properties with string value.
... css value direction: ltr direction: rtl expected
result live
result expected
result live
result visible overflow 1234567890 1234567890 0987654321 1234567890 text-overflow: clip 1234567890 1234567890 text-overflow: '' 12345 1234567890 54321 1234567890 text-overflow: ellipsis 1234… 1234567890 …4321 1234567890 text-overflow: '.' 1234.
matrix() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...0txbd0ty00100001 [a b c d tx ty] the values represent the following functions: matrix( scalex(), skewy(), skewx(), scaley(), translatex(), translatey() ) examples html <div>normal</div> <div class="changed">changed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .changed { transform: matrix(1, 2, -1, 1, 80, 80); background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'matrix()' in that specification.
perspective() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...ive(9cm) rotatex(-15deg) rotatey(30deg); } .perspective-box-closer { transform: perspective(4cm) rotatex(-15deg) rotatey(30deg); } .top { background-color: skyblue; transform: rotatex(90deg) translate3d(0, 0, 50px); } .left { background-color: pink; transform: rotatey(-90deg) translate3d(0, 0, 50px); } .front { background-color: limegreen; transform: translate3d(0, 0, 50px); }
result specifications specification status comment css transforms level 2the definition of 'perspective()' in that specification.
scaleX() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 s0 01 s00010001 s00010001 s000010000100001 [s 0 0 1 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scalex(0.6); background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'scalex()' in that specification.
scaleY() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...s on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10 0s 1000s0001 1000s0001 10000s0000100001 [1 0 0 s 0 0] examples html <div>normal</div> <div class="scaled">scaled</div> css div { width: 80px; height: 80px; background-color: skyblue; } .scaled { transform: scaley(0.6); background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'scaley()' in that specification.
scaleZ() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...</div> css div { width: 80px; height: 80px; background-color: skyblue; } .perspective { /* includes a perspective to create a 3d space */ transform: perspective(400px) translatez(-100px); background-color: limegreen; } .scaled-translated { /* includes a perspective to create a 3d space */ transform: perspective(400px) scalez(2) translatez(-100px); background-color: pink; }
result specifications specification status comment css transforms level 2the definition of 'scalez()' in that specification.
skewX() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...mogeneous coordinates on ℝℙ3 1tan(a)01 1tan(a)0010001 1tan(a)0010001 1tan(a)00010000100001 [1 0 tan(a) 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewx(10deg); /* equal to skew(10deg) */ background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'skewx()' in that specification.
skewY() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...n coordinates on ℝ3 homogeneous coordinates on ℝℙ3 10tan(a)1 100tan(a)10001 100tan(a)10001 1000tan(a)10000100001 [1 tan(a) 0 1 0 0] examples html <div>normal</div> <div class="skewed">skewed</div> css div { width: 80px; height: 80px; background-color: skyblue; } .skewed { transform: skewy(40deg); background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'skewy()' in that specification.
translate() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...tx ty] formal syntax translate(<length-percentage> , <length-percentage>?) examples using a single-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px); /* equal to: translatex(10px) or translate(10px, 0) */ background-color: pink; }
result combining y-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px, 10px); background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'translat...
translate3d() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
... 100tx010ty001tz0001 examples using a single axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { /* equivalent to perspective(500px) translatex(10px) */ transform: perspective(500px) translate3d(10px, 0, 0px); background-color: pink; }
result combining z-axis and x-axis translation html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: perspective(500px) translate3d(10px, 0, 100px); background-color: pink; }
result specifications specification status comment css transforms level 2th...
translateX() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
... 10t010001 10t010001 100t010000100001 [1 0 0 1 t 0] formal syntax translatex(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatex(10px); /* equal to translate(10px) */ background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'translatex()' in that specification.
translateY() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
... 10001t001 10001t001 1000010t00100001 [1 0 0 1 0 t] formal syntax translatey(<length-percentage>) examples html <div>static</div> <div class="moved">moved</div> <div>static</div> css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translatey(10px); background-color: pink; }
result specifications specification status comment css transforms level 1the definition of 'translatey()' in that specification.
translateZ() - CSS: Cascading Style Sheets
its
result is a <transform-function> data type.
...
result specifications specification status comment css transforms level 2the definition of 'transform' in that specification.
Used value - CSS: Cascading Style Sheets
>no explicit width.</p> <p class="show-used-width">..</p> <div id="width-50"> <p>explicit width: 50%.</p> <p class="show-used-width">..</p> <div id="width-inherit"> <p>explicit width: inherit.</p> <p class="show-used-width">..</p> </div> </div> </div> css #no-width { width: auto; } #width-50 { width: 50%; } #width-inherit { width: inherit; } /* make
results easier to see */ div { border: 1px solid red; padding: 8px; } javascript function updateusedwidth(id) { var div = document.queryselector(`#${id}`); var par = div.queryselector('.show-used-width'); var wid = window.getcomputedstyle(div)["width"]; par.textcontent = `used width: ${wid}.`; } function updateallusedwidths() { updateusedwidth("no-width"); updateusedwidth("width-50");...
... updateusedwidth("width-inherit"); } updateallusedwidths(); window.addeventlistener('resize', updateallusedwidths);
result difference from computed value css 2.0 defined only computed value as the last step in a property's calculation.
zoom - CSS: Cascading Style Sheets
ormalapplies toall elementsinheritednocomputed valueas specifiedanimation typean integer formal syntax normal | reset | <number> | <percentage> examples first example html <p class="small">small</p> <p class="normal">normal</p> <p class="big">big</p> css p.small { zoom: 75%; } p.normal { zoom: normal; } p.big { zoom: 2.5; } p { display: inline-block; } p:hover { zoom: reset; }
result second example html <div id="a" class="circle"></div> <div id="b" class="circle"></div> <div id="c" class="circle"></div> css div.circle { width: 25px; height: 25px; border-radius: 100%; text-align: center; vertical-align: middle; display: inline-block; zoom: 1.5; } div#a { background-color: gold; zoom: normal; } div#b { background-color: green; zoom: 200%; } div#c { ...
... background-color: blue; zoom: 2.9; }
result specifications not part of any standard.
Video player styling basics - Developer guides
styling the
resultant video player style used here is rather basic — this is intentional, as the purpose is to show how such a video player could be styled and be made responsive.
...each image was then converted to a base64 encoded string (using an online base64 image encoder), since the images are quite small, the
resultant encoded strings are quite short.
Writing Web Audio API code that works in every browser - Developer guides
furthermore, as a
result of the spec being still in flux, some browsers use deprecated properties and method names that are not present in standards-compliant browsers: safari uses the old method names, firefox uses the new ones, and chrome and opera use both.
...for example, up until a couple of days ago pannernode did not support the default hrtf panning model yet, and attempting to use a pannernode with that configuration simply
resulted in silence or a mono output coming out from that node, depending on the build you used.
Audio and Video Delivery - Developer guides
you take the stream you receive from getusermedia, pass it to a mediarecorder object, take the
resulting output and feed it to your audio or video source*.
...instead of the error event being dispatched to the media element itself, it now gets delivered to the child <source> elements corresponding to the sources
resulting in the error.
Mouse gesture events - Developer guides
if you only care about the end
results of the pinch gesture, you can simply watch for this event; however, if you want to provide feedback during the handling of the gesture, you should also watch the mozmagnifygesturestart and mozmagnifygestureupdate events.
...if you only care about the end
results of the rotate gesture, you can simply watch for this event; however, if you want to provide feedback during the handling of the gesture, you should also watch the mozrotategesturestart and mozrotategestureupdate events.
HTML5 Parser - Developer guides
this will
result in more consistent behavior across browser implementations.
...this
results in improved performance compared to older parsers, because most of the time, gecko can complete these tasks in parallel.
Parsing and serializing XML - Developer guides
if the document is xml, the
resulting object is actually a xmldocument.
... var dochtml = document.documentelement.innerhtml; as a
result, dochtml is a domstring containing the html of the contents of the document; that is, the <body> element's contents.
<a>: The Anchor element - HTML: Hypertext Markup Language
when href attribute is present: button checkbox menuitem menuitemcheckbox menuitemradio option radio switch tab treeitem when href attribute is not present: any dom interface htmlanchorelement examples linking to an absolute url html <a href="https://www.mozilla.com"> mozilla </a>
result linking to relative urls html <a href="//example.com">scheme-relative url</a> <a href="/docs/web/html">origin-relative url</a> <a href="./p">directory-relative url</a> css a { display: block; margin-bottom: 0.5em }
result linking to an element on the same page <!-- <a> element links to the section below --> <p><a href="#section_further_down"> jump to the heading below </a></p> <...
...th(); c.arc(x, y, 10, 0, math.pi*2); c.closepath(); c.fill(); } } canvas.addeventlistener('mousemove', event => draw(event.offsetx, event.offsety) ); canvas.addeventlistener('mousedown', () => isdrawing = true); canvas.addeventlistener('mouseup', () => isdrawing = false); document.queryselector('a').addeventlistener('click', event => event.target.href = canvas.todataurl() );
result security and privacy <a> elements can have consequences for users’ security and privacy.
<b>: The Bring Attention To element - HTML: Hypertext Markup Language
further, stylesheets can change the default style of these elements, with the
result that they are not necessarily displayed in bold.
...</p> keywords are displayed with the default style of the <b>element, likely in bold.</b>
result specifications specification status comment html living standardthe definition of '<b>' in that specification.
<div>: The Content Division element - HTML: Hypertext Markup Language
you name it!</p> </div> the
result looks like this: a styled example this example creates a shadowed box by applying a style to the <div> using css.
... html <div class="shadowbox"> <p>here's a very interesting note displayed in a lovely shadowed box.</p> </div> css .shadowbox { width: 15em; border: 1px solid #333; box-shadow: 8px 8px 5px #444; padding: 8px 12px; background-image: linear-gradient(180deg, #fff, #ddd 40%, #ccc); }
result specifications specification status comment html living standardthe definition of '<div>' in that specification.
<input type="image"> - HTML: Hypertext Markup Language
on the url to which to submit the data formenctype the encoding method to use when submitting the form data formmethod the http method to use when submitting the form formnovalidate a boolean which, if present, indicates that the form shouldn't be validated before submission formtarget a string indicating a browsing context from where to load the
results of submitting the form height the height, in css pixels, at which to draw the image src the url from which to load the image width the width, in css pixels, at which to draw the image alt the alt attribute provides an alternate string to use as the button's label if the image cannot be shown (due to error, a user agent that cannot or is configured not ...
... get: the data from the form is appended to the form attribute uri, with a '?' as a separator, and the
resulting uri is sent to the server.
<input type="month"> - HTML: Hypertext Markup Language
in the following example we specify a minimum month of 1900-01 and a maximum month of 1999-12: <form> <label for="bday-month">what month were you born in?</label> <input id="bday-month" type="month" name="bday-month" min="1900-01" max="1999-12"> </form> the
result here is that: only months between in january 1900 and december 1999 can be selected; months outside that range can't be scrolled to in the control.
...as a
result, supporting browsers will display an error if you try to submit a date that is outside the set bounds, or an empty date field.
<input type="time"> - HTML: Hypertext Markup Language
div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the
result here is that: only times between 12:00 and 18:00 will be seen as valid; times outside that range will be denoted as invalid.
...as a
result, supporting browsers will display an error if you try to submit a time that is outside the set bounds, or an empty time field.
<input type="week"> - HTML: Hypertext Markup Language
div { margin-bottom: 10px; position: relative; } input[type="number"] { width: 100px; } input + span { padding-right: 30px; } input:invalid+span:after { position: absolute; content: '✖'; padding-left: 5px; } input:valid+span:after { position: absolute; content: '✓'; padding-left: 5px; } the
result here is that only weeks between w01 and w52 in 2017 will be seen as valid and be selectable in supporting browsers.
...as a
result, supporting browsers will display an error if you try to submit an empty week field.
<isindex> - HTML: Hypertext Markup Language
the user fills in the fields, clicks ok, and the query
results come up in the table of contents window." a thread about isindex in november 1992, kevin hoadley questioned the need for an isindex element and proposed to drop it.
...tim berners-lee explains the purpose of isindex
resulting in aggregated search
results.
Standard metadata names - HTML: Hypertext Markup Language
by specification, only dark is not valid, because forcing a document to render in dark mode when it isn't truly compatible with it can
result in unreadable content; all major browsers default to light mode if not otherwise configured.
... google, yahoo, bing nosnippet prevents displaying any description of the page in search engine
results.
<meter>: The HTML Meter element - HTML: Hypertext Markup Language
examples simple example html <p>heat the oven to <meter min="200" max="500" value="350">350 degrees</meter>.</p>
result on google chrome, the
resulting meter looks like this: high and low range example note that in this example the min attribute is omitted.
... html <p>he got a <meter low="69" high="80" max="100" value="84">b</meter> on the exam.</p>
result on google chrome, the
resulting meter looks like this: specifications specification status comment html living standardthe definition of '<meter>' in that specification.
<noscript> - HTML: Hypertext Markup Language
examples <noscript> <!-- anchor linking to external file --> <a href="https://www.mozilla.com/">external link</a> </noscript> <p>rocks!</p>
result with scripting enabled rocks!
...
result with scripting disabled external link rocks!
<p>: The Paragraph element - HTML: Hypertext Markup Language
this is the second paragraph.</p>
result styling paragraphs by default, browsers separate paragraphs with a single blank line.
... ¶ "; } javascript document.queryselector('button').addeventlistener('click', function (event) { document.queryselectorall('p').foreach(function (paragraph) { paragraph.classlist.toggle('pilcrow'); }); var newbuttontext = event.target.dataset.toggletext; var oldtext = event.target.innertext; event.target.innertext = newbuttontext; event.target.dataset.toggletext = oldtext; });
result accessibility concerns breaking up content into paragraphs helps make a page more accessible.
<pre>: The Preformatted Text element - HTML: Hypertext Markup Language
in modern browser this hint is ignored and no visual effect
results in its present; to achieve such an effect, use css white-space instead.
... example html <p>using css to change the font color is easy.</p> <pre> body { color: red; } </pre>
result accessibility concerns it is important to provide an alternate description for any images or diagrams created using preformatted text.
<samp>: The Sample Output element - HTML: Hypertext Markup Language
found <em>n</em>
results.</samp> you can then proceed to the next step.</p> the
resulting output looks like this: sample output including user input you can nest the <kbd> element within a <samp> block to present an example that includes text entered by the user.
...
result the
resulting output is this: specifications specification status comment html living standardthe definition of '<samp>' in that specification.
<sub>: The Subscript element - HTML: Hypertext Markup Language
this is a common use case for <sub>: <p>according to the computations by nakamura, johnson, and mason<sub>1</sub> this will
result in the complete annihilation of both particles.</p> the
resulting output looks like this: variable subscripts in mathematics, families of variables related to the same concept (such as distances along the same axis) are represented using the same variable name with a subscript following.
...<var>x<sub>n</sub></var>.</p> the
resulting output: chemical formulas when writing a chemical formula, such as h20, the number of atoms of a given element within the described molecule is represented using a subscripted number; in the case of water, the subscripted "2" indicates that there are two atoms of hydrogen in the molecule.
<sup>: The Superscript element - HTML: Hypertext Markup Language
for example: <p>one of the most common equations in all of physics is <var>e</var>=<var>m</var><var>c</var><sup>2</sup>.<p> the
resulting output looks like this: superior lettering superior lettering is not technically the same thing as superscript.
...among the most common uses of superior lettering is the presentation of certain abbreviations in french: <p>robert a présenté son rapport à m<sup>lle</sup> bernard.</p> the
resulting output: ordinal numbers ordinal numbers, such as "fourth" in english or "quinto" in spanish may be abbreviated using numerals and language-specific text rendered in superscript: <p>the ordinal number "fifth" can be abbreviated in various languages as follows:</p> <ul> <li>english: 5<sup>th</sup></li> <li>french: 5<sup>ème</sup></li> </ul> the output: specifications specification status comment html living standardthe definition of '<sub> and <sup>' in that specification.
<tbody>: The Table Body element - HTML: Hypertext Markup Language
result the
resulting table looks like this: multiple bodies you can create multiple sections within a table by using multiple <tbody> elements.
...
result first, the
resulting table, so you know what we're building: html the revised html looks like this: <table> <thead> <tr> <th>student id</th> <th>name</th> </tr> </thead> <tbody> <tr> <th colspan="2">computer science</th> </tr> <tr> <td>3741255</td> <td>jones, martha</td> </tr> <tr> <td>4077830</td> <td>pierce, benja...
<template>: The Content Template element - HTML: Hypertext Markup Language
} the
result is the original html table, with two new rows appended to it via javascript: table { background: #000; } table td { background: #fff; } avoiding documentfragment pitfall a documentfragment is not a valid target for various events, as such it is often preferable to clone or refer to the elements within it.
...ocument.getelementbyid("template"); function clickhandler(event) { alert("clicked a div"); } const firstclone = template.content.clonenode(true); firstclone.addeventlistener("click", clickhandler); container.appendchild(firstclone); const secondclone = template.content.firstelementchild.clonenode(true); secondclone.addeventlistener("click", clickhandler); container.appendchild(secondclone);
result firstclone is a documentfragment instance, so while it gets appended inside the container as expected, clicking on it does not trigger the click event.
<tt>: The Teletype Text element (obsolete) - HTML: Hypertext Markup Language
<p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local echo is on</tt></p>
result overriding the default font you can override the browser's default font—if the browser permits you to do so, which it isn't required to do—using css: css tt { font-family: "lucida console", "menlo", "monaco", "courier", monospace; } html <p>enter the following at the telnet command prompt: <code>set localecho</code><br /> the telnet client should display: <tt>local e...
...cho is on</tt></p>
result usage notes the <tt> element is, by default, rendered using the browser's default non-proportional font.
itemscope - HTML: Hypertext Markup Language
specifying the itemscope attribute for an element creates a new item, which
results in a number of name-value pairs that are associated with the element.
... </div> </div>
results html the following is an example rendering of the preceding code example.
title - HTML: Hypertext Markup Language
some caution must be taken, as this means the following renders across two lines: html <p>newlines in <code>title</code> should be taken into account, like <abbr title="this is a multiline title">example</abbr>.</p>
result title attribute inheritance if an element has no title attribute, then it inherits it from its parent node, which in turn may inherit it from its parent, and so on.
... html <div title="cooltip"> <p>hovering here will show “cooltip”.</p> <p title="">hovering here will show nothing.</p> </div>
result accessibility concerns use of the title attribute is highly problematic for: people using touch-only devices people navigating with keyboards people navigating with assistive technology such as screen readers or magnifiers people experiencing fine motor control impairment people with cognitive concerns this is due to inconsistent browser support, compounded by the additional assistive technology parsing of the browser-rendered page.
MIME types (IANA media types) - HTTP
no other values are considered valid, and using any of those may
result in scripts that do not load or run.
...this is not valid, and in most cases will
result in a script not being loaded.
Browser detection using the user agent - HTTP
only in this particular scenario, it is appropriate to provide no fallback for the flexboxes/multicolumns,
resulting in a single column of very wide boxes on old browsers.
...always be very deliberate about choosing the right media query and choosing the right >=, <=, >, or < in any corresponding javascript because it is very easy to get these mixed up,
resulting in the website looking wonking right at the screen size where the layout changes.
Content-Location - HTTP
the principal use is to indicate the url of a resource transmitted as the
result of content negotiation.
... indicating the url of a transaction's
result say you have a <form> for sending money to another user of a site.
Index - HTTP
12 access-control-max-age cors, http, reference, header the access-control-max-age response header indicates how long the
results of a preflight request (that is the information contained in the access-control-allow-methods and access-control-allow-headers headers) can be cached.
...the principal use is to indicate the url of a resource transmitted as the
result of content negotiation.
HTTP headers - HTTP
access-control-max-age indicates how long the
results of a preflight request can be cached.
... x-robots-tag the x-robots-tag http header is used to indicate how a web page is to be indexed within public search engine
results.
POST - HTTP
a post request is typically sent via an html form and
results in a change on the server.
...as described in the http 1.1 specification, post is designed to allow a uniform method to cover the following functions: annotation of existing resources posting a message to a bulletin board, newsgroup, mailing list, or similar group of articles; adding a new user through a signup modal; providing a block of data, such as the
result of submitting a form, to a data-handling process; extending a database through an append operation.
Redirections in HTTP - HTTP
used to redirect after a put or a post, so that refreshing the
result page doesn't re-trigger the operation.
...if you serve the response as the
result of this request, a simple press of the reload button will resend the request (possibly after a confirmation message).
200 OK - HTTP
post: the resource describing the
result of the action is transmitted in the message body.
... the successful
result of a put or a delete is often not a 200 ok but a 204 no content (or a 201 created when the resource is uploaded for the first time).
Assertions - JavaScript
however, neither "sprat" nor "frost" is part of the match
results.
...however, neither "jack" nor "tom" is part of the match
results.
Text formatting - JavaScript
with simple unicode escapes it is often necessary to write the surrogate halves separately to achieve the same
result.
...(the
result is different in another time zone.) const msperday = 24 * 60 * 60 * 1000; // july 17, 2014 00:00:00 utc.
Memory Management - JavaScript
s // (like object) allocates memory for the array and // contained values var a = [1, null, 'abra']; function f(a) { return a + 2; } // allocates a function (which is a callable object) // function expressions also allocate an object someelement.addeventlistener('click', function() { someelement.style.backgroundcolor = 'blue'; }, false); allocation via function calls some function calls
result in object allocation.
...however, the reference-counting algorithm will not consider them reclaimable since each of the two objects has at least one reference pointing to them,
resulting in neither of them being marked for garbage collection.
arguments.callee - JavaScript
this example isn't very practical, and there are nearly no cases where the same
result cannot be achieved with named function expressions.
... function create() { return function(n) { if (n <= 1) return 1; return n * arguments.callee(n - 1); }; } var
result = create()(5); // returns 120 (5 * 4 * 3 * 2 * 1) a use of arguments.callee with no good alternative however, in a case like the following, there are not alternatives to arguments.callee, so its deprecation could be a bug (see bug 725398): function createperson(sidentity) { var operson = new function('alert(arguments.callee.identity);'); operson.identity = sidentity; return operson; } var john = createperson('john smith'); john(); specifications specification ecmascript (ecma-262)the definition of 'arguments exotic objects' in that specification.
Array.prototype.concat() - JavaScript
examples concatenating two arrays the following code concatenates two arrays: const letters = ['a', 'b', 'c']; const numbers = [1, 2, 3]; letters.concat(numbers); //
result in ['a', 'b', 'c', 1, 2, 3] concatenating three arrays the following code concatenates three arrays: const num1 = [1, 2, 3]; const num2 = [4, 5, 6]; const num3 = [7, 8, 9]; const numbers = num1.concat(num2, num3); console.log(numbers); //
results in [1, 2, 3, 4, 5, 6, 7, 8, 9] concatenating values to an array the following code concatenates three values to an array: const letters = ['a'...
..., 'b', 'c']; const alphanumeric = letters.concat(1, [2, 3]); console.log(alphanumeric); //
results in ['a', 'b', 'c', 1, 2, 3] concatenating nested arrays the following code concatenates nested arrays and demonstrates retention of references: const num1 = [[1]]; const num2 = [2, [3]]; const numbers = num1.concat(num2); console.log(numbers); //
results in [[1], 2, [3]] // modify the first element of num1 num1[0].push(4); console.log(numbers); //
results in [[1, 4], 2, [3]] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.concat' in that specification.
Array.prototype.flatMap() - JavaScript
the flatmap() method first maps each element using a mapping function, then flattens the
result into a new array.
... return value a new array with each element being the
result of the callback function and flattened to a depth of 1.
Array.prototype.forEach() - JavaScript
when the entry containing the value two is reached, the first entry of the whole array is shifted off—
resulting in all remaining entries moving up one position.
... function flatten(arr) { const
result = [] arr.foreach((i) => { if (array.isarray(i)) {
result.push(...flatten(i)) } else {
result.push(i) } }) return
result } // usage const nested = [1, 2, 3, [4, 5, [6, 7], 8, 9]] flatten(nested) // [1, 2, 3, 4, 5, 6, 7, 8, 9] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.foreach' in that specification...
Array.prototype.sort() - JavaScript
if inconsistent
results are returned, then the sort order is undefined.
...alpha', 'charlie', 'bravo']; // temporary array holds objects with position and sort-value var mapped = list.map(function(el, i) { return { index: i, value: el.tolowercase() }; }) // sorting the mapped array containing the reduced values mapped.sort(function(a, b) { if (a.value > b.value) { return 1; } if (a.value < b.value) { return -1; } return 0; }); // container for the
resulting order var
result = mapped.map(function(el){ return list[el.index]; }); there is an open source library available called mapsort which applies this approach.
Array.prototype.unshift() - JavaScript
hence, calling unshift with n arguments once, or calling it n times with 1 argument (with a loop, for example), don't yield the same
results.
... see example: let arr = [4, 5, 6] arr.unshift(1, 2, 3) console.log(arr); // [1, 2, 3, 4, 5, 6] arr = [4, 5, 6] // resetting the array arr.unshift(1) arr.unshift(2) arr.unshift(3) console.log(arr) // [3, 2, 1, 4, 5, 6] examples using unshift let arr = [1, 2] arr.unshift(0) //
result of the call is 3, which is the new array length // arr is [0, 1, 2] arr.unshift(-2, -1) // the new array length is 5 // arr is [-2, -1, 0, 1, 2] arr.unshift([-4, -3]) // the new array length is 6 // arr is [[-4, -3], -2, -1, 0, 1, 2] arr.unshift([-7, -6], [-5]) // the new array length is 8 // arr is [ [-7, -6], [-5], [-4, -3], -2, -1, 0, 1, 2 ] specifications specification ecmascript (ecma-262)the definition of 'array.prototype.unshift' in that specific...
DataView() constructor - JavaScript
exceptions rangeerror thrown if the byteoffset or bytelength parameter values
result in the view extending past the end of the buffer.
... for example, if the buffer is 16 bytes long, the byteoffset is 8, and the bytelength is 10, this error is thrown because the
resulting view tries to extend 2 bytes past the total length of the buffer.
Date.prototype.toLocaleString() - JavaScript
want to use the japanese calendar, // where 2012 was the year 24 of the heisei era console.log(date.tolocalestring('ja-jp-u-ca-japanese')); // → "24/12/20 12:00:00" // when requesting a language that may not be supported, such as // balinese, include a fallback language (in this case, indonesian) console.log(date.tolocalestring(['ban', 'id'])); // → "20/12/2012 11.00.00" using options the
results provided by tolocalestring() can be customized using the options argument: let date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // request a weekday along with a long date let options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; console.log(date.tolocalestring('de-de', options)); // → "donnerstag, 20.
... for this reason, you cannot expect to be able to compare the
results of tolocalestring() to a static value: "1/1/2019, 01:00:00" === new date("2019-01-01t01:00:00z").tolocalestring("en-us"); // true in firefox and others // false in ie and edge note: see also this stackoverflow thread for more details and examples.
Error - JavaScript
description runtime errors
result in new error objects being created and thrown.
... this
results in cleaner and more consistent error handling code.
Intl.Collator() constructor - JavaScript
sensitivity which differences in the strings should lead to non-zero
result values.
... examples using collator the following example demonstrates the different potential
results for a string occurring before, after, or at the same level as another: console.log(new intl.collator().compare('a', 'c')); // → a negative value console.log(new intl.collator().compare('c', 'a')); // → a positive value console.log(new intl.collator().compare('a', 'a')); // → 0 note that the
results shown in the code above can vary between browsers and browser versions.
Intl.DateTimeFormat.prototype.formatToParts() - JavaScript
when this is the case, the
result of formattoparts() will contain an entry for relatedyear when a year would normally be present, containing the 4-digit gregorian year, instead of an entry for year.
...year: "numeric", month: "numeric", day: "numeric" }; let df = new intl.datetimeformat("zh-u-ca-chinese", opts); df.formattoparts(date.utc(2012, 11, 17, 3, 0, 42)); // return value [ { type: 'relatedyear', value: '2012' }, { type: 'literal', value: '年' }, { type: 'month', value: '十一月' }, { type: 'day', value: '4' } ] if the year option is not set in the bag (to any value), the
result will include only the relatedyear: let df = new intl.datetimeformat("zh-u-ca-chinese"); df.formattoparts(date.utc(2012, 11, 17, 3, 0, 42)); // return value [ { type: 'relatedyear', value: '2012' }, { type: 'literal', value: '年' }, { type: 'month', value: '十一月' }, { type: 'day', value: '4' } ] in cases where the year would be output, .format() may commonly present these s...
Intl.DateTimeFormat.prototype.resolvedOptions() - JavaScript
description the
resulting object has the following properties: locale the bcp 47 language tag for the locale actually used.
... weekday era year month day hour minute second timezonename the values
resulting from format matching between the corresponding properties in the options argument and the available combinations and representations for date-time formatting in the selected locale.
Math.max() - JavaScript
if at least one of arguments cannot be converted to a number, the
result is nan.
... function getmaxofarray(numarray) { return math.max.apply(null, numarray); } the new spread operator is a shorter way of writing the apply solution to get the maximum of an array: var arr = [1, 2, 3]; var max = math.max(...arr); however, both spread (...) and apply will either fail or return the wrong
result if the array has too many elements, because they try to pass the array elements as function parameters.
Object.create() - JavaScript
for example: a simple common debugging function: // display top-level property name:value pairs of given object function showproperties(obj){ for(var prop in obj){ console.log(prop + ": " + obj[prop] + "\n" ); } } not such simple
results: (especially if silent error-trapping had hidden the error messages) ob={}; ob.po=oco; ob.pn=ocn; // create a compound object using the test objects from above as property values > showproperties( ob ) // display top-level properties - po: [object object] - error: cannot convert object to primitive value note that only first property gets shown.
... be aware of, also, that using object.entries() on an object created via object.create() will
result in an empty array being returned.
Promise - JavaScript
the promise object represents the eventual completion (or failure) of an asynchronous operation, and its
resulting value.
...the
resulting nesting would look like this: (promise d, (promise c, (promise x) ) ) a promise can participate in more than one nesting.
handler.construct() - JavaScript
in order for the new operation to be valid on the
resulting proxy object, the target used to initialize the proxy must itself have a [[construct]] internal method (i.e.
... interceptions this trap can intercept these operations: new proxy(...args) reflect.construct() invariants if the following invariants are violated, the proxy will throw a typeerror: the
result must be an object.
Reflect.construct() - JavaScript
function oneclass() { this.name = 'one' } function otherclass() { this.name = 'other' } // calling this: let obj1 = reflect.construct(oneclass, args, otherclass) // ...has the same
result as this: let obj2 = object.create(otherclass.prototype) oneclass.apply(obj2, args) console.log(obj1.name) // 'one' console.log(obj2.name) // 'one' console.log(obj1 instanceof oneclass) // false console.log(obj2 instanceof oneclass) // false console.log(obj1 instanceof otherclass) // true console.log(obj2 instanceof otherclass) // true //another example to demonstrate below: function fu...
...nc1(a, b, c, d) { console.log(arguments[3]); } function func2(d, e, f, g) { consol.log(arguments[3]); } let obj1 = reflect.construct(func1, ['i', 'love', 'my', 'india']) obj1 however, while the end
result is the same, there is one important difference in the process.
RegExp() constructor - JavaScript
the following three expressions create the same regular expression: /ab+c/i new regexp(/ab+c/, 'i') // literal notation new regexp('ab+c', 'i') // constructor the literal notation
results in compilation of the regular expression when the expression is evaluated.
... the constructor of the regular expression object—for example, new regexp('ab+c')—
results in runtime compilation of the regular expression.
RegExp.$1-$9 - JavaScript
in the replacement text, the script uses $1 and $2 to indicate the
results of the corresponding matching parentheses in the regular expression pattern.
...regexp.$1 : '0'; number; // "24" please note that any operation involving the usage of other regular expressions between a re.test(str) call and the regexp.$n property, might have side effects, so that accessing these special properties should be done instantly, otherwise the
result might be unexpected.
RegExp.prototype.test() - JavaScript
examples using test() simple example that tests if "hello" is contained at the very beginning of a string, returning a boolean
result.
... const str = 'hello world!'; const
result = /^hello/.test(str); console.log(
result); // true the following example logs a message which depends on the success of the test: function testinput(re, str) { let midstring; if (re.test(str)) { midstring = 'contains'; } else { midstring = 'does not contain'; } console.log(`${str} ${midstring} ${re.source}`); } using test() on a regex with the "global" flag when a regex has the global flag set, test() will advance the lastindex of the regex.
String.fromCodePoint() - JavaScript
use the code below for a polyfill: if (!string.fromcodepoint) (function(stringfromcharcode) { var fromcodepoint = function(_) { var codeunits = [], codelen = 0,
result = ""; for (var index=0, len = arguments.length; index !== len; ++index) { var codepoint = +arguments[index]; // correctly handles all cases including `nan`, `-infinity`, `+infinity` // the surrounding `!(...)` is required to correctly handle `nan` cases // the (codepoint>>>0) === codepoint clause handles decimals and negatives if (!(codepoint < 0x10ff...
...); } else { // astral code point; split in surrogate halves // https://mathiasbynens.be/notes/javascript-encoding#surrogate-formulae codepoint -= 0x10000; codelen = codeunits.push( (codepoint >> 10) + 0xd800, // highsurrogate (codepoint % 0x400) + 0xdc00 // lowsurrogate ); } if (codelen >= 0x3fff) {
result += stringfromcharcode.apply(null, codeunits); codeunits.length = 0; } } return
result + stringfromcharcode.apply(null, codeunits); }; try { // ie 8 only supports `object.defineproperty` on dom elements object.defineproperty(string, "fromcodepoint", { "value": fromcodepoint, "configurable": true, "writable": true }); } catch(e) { ...
String.prototype.padEnd() - JavaScript
the padend() method pads the current string with a given string (repeated, if needed) so that the
resulting string reaches a given length.
... syntax str.padend(targetlength [, padstring]) parameters targetlength the length of the
resulting string once the current str has been padded.
String.prototype.padStart() - JavaScript
the padstart() method pads the current string with another string (multiple times, if needed) until the
resulting string reaches the given length.
... syntax str.padstart(targetlength [, padstring]) parameters targetlength the length of the
resulting string once the current str has been padded.
Symbol.isConcatSpreadable - JavaScript
property attributes of symbol.isconcatspreadable writable no enumerable no configurable no examples arrays by default, array.prototype.concat() spreads (flattens) arrays into its
result: let alpha = ['a', 'b', 'c'], let numeric = [1, 2, 3] let alphanumeric = alpha.concat(numeric) console.log(alphanumeric) //
result: ['a', 'b', 'c', 1, 2, 3] when setting symbol.isconcatspreadable to false, you can disable the default behavior: let alpha = ['a', 'b', 'c'], let numeric = [1, 2, 3] numeric[symbol.isconcatspreadable] = false let alphanumeric = alpha.concat(numeric) console.l...
...og(alphanumeric) //
result: ['a', 'b', 'c', [1, 2, 3] ] array-like objects for array-like objects, the default is to not spread.
TypedArray.prototype.map() - JavaScript
the map() method creates a new typed array with the
results of calling a provided function on every element in this typed array.
... description the map() method calls a provided callback function (mapfn) once for each element in a typed array, in order, and constructs a new typed array from the
results.
WebAssembly - JavaScript
examples stream a .wasm module then compile and instantiate it the following example (see our instantiate-streaming.html demo on github, and view it live also) directly streams a .wasm module from an underlying source then compiles and instantiates it, the promise fulfilling with a
resultobject.
... var importobject = { imports: { imported_func: arg => console.log(arg) } }; webassembly.instantiatestreaming(fetch('simple.wasm'), importobject) .then(obj => obj.instance.exports.exported_func()); the
resultobject's instance member is then accessed, and the contained exported function invoked.
Bitwise NOT (~) - JavaScript
the operator is applied to each pair of bits, and the
result is constructed bitwise.
... note that due to using 32-bit representation for numbers both ~-1 and ~4294967295 (232-1)
results in 0.
Exponentiation (**) - JavaScript
the exponentiation operator (**) returns the
result of raising the first operand to the power of the second operand.
... examples basic exponentiation 2 ** 3 // 8 3 ** 2 // 9 3 ** 2.5 // 15.588457268119896 10 ** -1 // 0.1 nan ** 2 // nan associativity 2 ** 3 ** 2 // 512 2 ** (3 ** 2) // 512 (2 ** 3) ** 2 // 64 usage with unary operators to invert the sign of the
result of an exponentiation expression: -(2 ** 2) // -4 to force the base of an exponentiation expression to be a negative number: (-2) ** 2 // 4 specifications specification ecmascript (ecma-262)the definition of 'exponentiation operator' in that specification.
Inequality (!=) - JavaScript
the inequality operator (!=) checks whether its two operands are not equal, returning a boolean
result.
...it is the negation of the equality operator so the following two lines will always give the same
result: x != y !(x == y) for details of the comparison algorithm, see the page for the equality operator.
Strict inequality (!==) - JavaScript
the strict inequality operator (!==) checks whether its two operands are not equal, returning a boolean
result.
...it is the negation of the strict equality operator so the following two lines will always give the same
result: x !== y !(x === y) for details of the comparison algorithm, see the page for the strict equality operator.
void operator - JavaScript
void function iife() { console.log("executed!"); }(); // output: "executed!" executing the above function without the void keyword will
result in an uncaught syntaxerror.
...this can cause unintended side effects by returning the
result of a function call that previously returned nothing.
Expressions and operators - JavaScript
equality operators the
result of evaluating an equality operator is always of type boolean based on whether the comparison is true.
... comma operator , the comma operator allows multiple expressions to be evaluated in a single statement and returns the
result of the last expression.
do...while - JavaScript
the condition is evaluated after executing the statement,
resulting in the specified statement executing at least once.
... var
result = ''; var i = 0; do { i += 1;
result += i + ' '; } while (i > 0 && i < 5); // despite i == 0 this will still loop as it starts off without the test console.log(
result); specifications specification ecmascript (ecma-262)the definition of 'do-while statement' in that specification.
function declaration - JavaScript
conditionally created functions functions can be conditionally declared, that is, a function statement can be nested within an if statement, however the
results are inconsistent across implementations and therefore this pattern should not be used in production code.
...typeof foo is function the
results are exactly the same for a condition that evaluates to true var hoisted = "foo" in this; console.log(`'foo' name ${hoisted ?
var - JavaScript
assignment to an unqualified identifier in strict mode will
result in a referenceerror, to avoid the accidental creation of properties on the global object.
...consequently, after the first line, x === undefined && y === 'a', hence the
result.
Template literals (Template strings) - JavaScript
function template(strings, ...keys) { return (function(...values) { let dict = values[values.length - 1] || {}; let
result = [strings[0]]; keys.foreach(function(key, i) { let value = number.isinteger(key) ?
... values[key] : dict[key];
result.push(value, strings[i + 1]); }); return
result.join(''); }); } let t1closure = template`${0}${1}${0}!`; //let t1closure = template(["","","","!"],0,1,0); t1closure('y', 'a'); // "yay!" let t2closure = template`${0} ${'foo'}!`; //let t2closure = template([""," ","!"],0,"foo"); t2closure('hello', {foo: 'world'}); // "hello world!" let t3closure = template`i'm ${'name'}.
Image file type and format guide - Web media technologies
gif is a good choice for simple images and animations, although converting full color images to gif can
result in unsatisfactory dithering.
...it's particulary useful for photographs; applying lossy compression to content requiring sharpness, like diagrams or charts, can produce unsatisfactory
results.
Animation performance and frame rate - Web Performance
the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can
result in jank as the browser struggles to hit a smooth frame rate.
...slow scripts and animating expensive css properties can
result in jank as the browser struggles to hit a smooth frame rate.
Performance fundamentals - Web Performance
it tells the browser to render
results even while the browser isn't actually drawing; that is, while the video hardware hasn't reached the next display cycle.
...that doesn’t mean you can't use straight html as the source; just read it once and then scroll 10 elements, changing the content of the first and last accordingly to your position in the
results list, instead of moving 100 elements that aren’t visible.
Navigation and resource timings - Web Performance
to view and capture our app's timing we enter: let time = window.performance.timing we can then use the
results to measure how well our app is performing.
... if we do the math with these numbers, we get the same
result: 1 - (22.04 / 87.24) = 0.747.
Progressive web app structure - Progressive web apps (PWAs)
mixing ssr with csr can lead to the best
results — you can render a website on the server, cache its contents, and then update the rendering on the client-side as and when needed.
...ml = content; next, it registers a service worker: if('serviceworker' in navigator) { navigator.serviceworker.register('/pwa-examples/js13kpwa/sw.js'); }; the next code block requests permission for notifications when a button is clicked: var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(
result) { if(
result === 'granted') { randomnotification(); } }); }); the last block creates notifications that display a randomly-selected item from the games list: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; v...
Mobile first - Progressive web apps (PWAs)
modernizr stores the
results of all its feature tests as classes on the html element.
... modernizr also puts its feature detect
results in a javascript modenizr object too, so that you can run javascript code selectively depending on feature support.
Structural overview of progressive web apps - Progressive web apps (PWAs)
the best
results tend to come when you use both client-side and server-side rendering; you can render a web site on the server, cache its contents, and then update the rendering on the client side as needed.
... var button = document.getelementbyid("notifications"); button.addeventlistener('click', function(e) { notification.requestpermission().then(function(
result) { if (
result === 'granted') { randomnotification(); } }); }); the randomnotification() function follows, rounding out the last of the code in the file: function randomnotification() { var randomitem = math.floor(math.random()*games.length); var notiftitle = games[randomitem].name; var notifbody = 'created by '+games[randomitem].author+'.'; var notifimg = 'data/img/'+ga...
data-* - SVG: Scalable Vector Graphics
they let svg markup and its
resulting dom share information that standard attributes can't, usually for scripting purposes.
...hyphen characters (-, u+002d) are removed and the next letter is capitalized,
resulting in the camelcase format.
divisor - SVG: Scalable Vector Graphics
the divisor attribute specifies the value by which the
resulting number of applying the kernelmatrix of a <feconvolvematrix> element to the input image color value is divided to yield the destination color value.
... a divisor that is the sum of all the matrix values tends to have an evening effect on the overall color intensity of the
result.
dominant-baseline - SVG: Scalable Vector Graphics
when the initial value, auto, would give an undesired
result, this property can be used to explicitly set the desired scaled-baseline-table.
...s --> <circle cx="60" cy="20" r="3" fill="red" /> <circle cx="60" cy="70" r="3" fill="red" /> <circle cx="60" cy="120" r="3" fill="red" /> <circle cx="60" cy="170" r="3" fill="red" /> <circle cx="60" cy="220" r="3" fill="red" /> <circle cx="60" cy="270" r="3" fill="red" /> <style><![cdata[ text { font: bold 30px verdana, helvetica, arial, sans-serif; } ]]></style> </svg>
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'dominant-baseline' in that specification.
gradientUnits - SVG: Scalable Vector Graphics
value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse this value indicates that the attributes represent values in the coordinate system that
results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform.
... value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse cx, cy, r, fx, fy, and fr represent values in the coordinate system that
results from taking the current user coordinate system in place at the time when the gradient element is referenced (i.e., the user coordinate system for the element referencing the gradient element via a fill or stroke property) and then applying the transform specified by attribute gradienttransform.
numOctaves - SVG: Scalable Vector Graphics
though more octaves also require more calculations,
resulting in a negative impact on performance.
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" numoctaves="3"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'numoctaves' in that specification...
spreadMethod - SVG: Scalable Vector Graphics
%"> <stop offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </lineargradient> </defs> <rect fill="url(#padgradient)" x="10" y="0" width="200" height="40"/> <rect fill="url(#reflectgradient)" x="10" y="50" width="200" height="40"/> <rect fill="url(#repeatgradient)" x="10" y="100" width="200" height="40"/> </svg>
result notice that the middle third of each gradient is the same.
... offset="0%" stop-color="fuchsia"/> <stop offset="100%" stop-color="orange"/> </radialgradient> </defs> <rect fill="url(#radialpadgradient)" x="10" y="10" width="100" height="100"/> <rect fill="url(#radialreflectgradient)" x="120" y="10" width="100" height="100"/> <rect fill="url(#radialrepeatgradient)" x="230" y="10" width="100" height="100"/> </svg>
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'spreadmethod for <radialgradient>' in that specification.
tableValues - SVG: Scalable Vector Graphics
</fecomponenttransfer> </filter> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer1);" /> <rect x="0" y="0" width="200" height="200" fill="url(#gradient)" style="filter: url(#componenttransfer2); transform: translatex(220px);" /> </svg> usage notes value <list-of-numbers> default value empty list
resulting in identity transfer animatable yes <list-of-numbers> this value holds a comma- and/or space-separated list of <number>s, which define a lookup table for the color component transfer function.
... an empty list
results in an identity transfer function.
text-anchor - SVG: Scalable Vector Graphics
each text chunk has an initial current text position, which represents the point in the user coordinate system
resulting from (depending on context) application of the x and y attributes on the <text> element, any x or y attribute values on a <tspan>, <tref> or <altglyph> element assigned explicitly to the first rendered character in a text chunk, or determination of the initial current text position for a <textpath> element.
...then, the text string is mapped onto the path with this midpoint placed at the current text position.) end the rendered characters are shifted such that the end of the
resulting rendered text (final current text position before applying the text-anchor property) is at the initial current text position.
vector-effect - SVG: Scalable Vector Graphics
the
resulting visual effect of this value is that the stroke width is not dependant on the transformations of the element (including non-uniform scaling and shear transformations) and zoom level.
...stroke="black" stroke-width="2px" fill="none"></path> <!-- scaled --> <path transform="translate(100,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> <!-- fixed--> <path vector-effect="non-scaling-stroke" transform="translate(300,0)scale(4,1)" d="m10,20l40,100l39,200z" stroke="black" stroke-width="2px" fill="none"></path> </svg>
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'vector-effect' in that specification.
SVG Attribute reference - SVG: Scalable Vector Graphics
rflow overline-position overline-thickness p panose-1 paint-order path pathlength patterncontentunits patterntransform patternunits ping pointer-events points pointsatx pointsaty pointsatz preservealpha preserveaspectratio primitiveunits r r radius referrerpolicy refx refy rel rendering-intent repeatcount repeatdur requiredextensions requiredfeatures restart
result rotate rx ry s scale seed shape-rendering slope spacing specularconstant specularexponent speed spreadmethod startoffset stddeviation stemh stemv stitchtiles stop-color stop-opacity strikethrough-position strikethrough-thickness string stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width style su...
...y, overflow, pointer-events, shape-rendering, stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, text-anchor, text-decoration, text-rendering, transform, transform-origin, unicode-bidi, vector-effect, visibility, word-spacing, writing-mode filters attributes filter primitive attributes height,
result, width, x, y transfer function attributes type, tablevalues, slope, intercept, amplitude, exponent, offset animation attributes animation attribute target attributes attributetype, attributename animation timing attributes begin, dur, end, min, max, restart, repeatcount, repeatdur, fill animation value attributes calcmode, values, keytimes, keysplines, from, to, by, autoreverse, accelera...
<feColorMatrix> - SVG: Scalable Vector Graphics
the prime symbol ' is used in mathematics indicate the
result of a transformation.
...se href="#circles" transform="translate(0 280)" filter="url(#colormehuerotate)" /> <text x="70" y="330">huerotate</text> <!-- luminancetoalpha --> <filter id="colormelta"> <fecolormatrix in="sourcegraphic" type="luminancetoalpha" /> </filter> <use href="#circles" transform="translate(0 350)" filter="url(#colormelta)" /> <text x="70" y="400">luminancetoalpha</text> </svg>
result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fecolormatrix>' in that specification.
<feComponentTransfer> - SVG: Scalable Vector Graphics
the colors are modified by changing each channel (r, g, b, and a) to the
result of what the children <fefuncr>, <fefuncb>, <fefuncg>, and <fefunca> return.
... <rect x="0" y="180" width="100%" height="20" style="filter:url(#discrete)"></rect> <text x="0" y="220">linear function</text> <rect x="0" y="230" width="100%" height="20" style="filter:url(#linear)"></rect> <text x="0" y="270">gamma function</text> <rect x="0" y="280" width="100%" height="20" style="filter:url(#gamma)"></rect> </g> </svg> css rect { fill: url(#rainbow); }
result specifications specification status comment filter effects module level 1the definition of '<fecomponenttransfer>' in that specification.
<feGaussianBlur> - SVG: Scalable Vector Graphics
example simple example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="blurme"> <fegaussianblur in="sourcegraphic" stddeviation="5" /> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg>
result screenshotlive sample drop shadow example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="dropshadow"> <fegaussianblur in="sourcealpha" stddeviation="3" /> <feoffset dx="2" dy="4" /> <femerge> <femergenode /> <femergenode in="sourcegraphic" /> </femerge> </filter> <circle cx=...
..."60" cy="60" r="50" fill="green" filter="url(#dropshadow)" /> </svg>
result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<fegaussianblur>' in that specification.
<feMerge> - SVG: Scalable Vector Graphics
this is achieved by other filters storing their output via the
result attribute and then accessing it in a <femergenode> child.
... usage context categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<femergenode> example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur stddeviation="5"
result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> </svg>
result attributes global attributes core attributes presentation attributes filter primitive attributes class style specific attributes none dom interface thi...
<feMergeNode> - SVG: Scalable Vector Graphics
the femergenode takes the
result of another filter to be processed by its parent <femerge>.
...riesnonepermitted contentany number of the following elements, in any order:<animate>, <set> example <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <filter id="feoffset" x="-40" y="-20" width="100" height="200"> <feoffset in="sourcegraphic" dx="60" dy="60" /> <fegaussianblur in="sourcegraphic" stddeviation="5"
result="blur2" /> <femerge> <femergenode in="blur2" /> <femergenode in="sourcegraphic" /> </femerge> </filter> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green; filter: url(#feoffset);" /> <rect x="40" y="40" width="100" height="100" style="stroke: #000000; fill: green;" /> </svg>
result attributes ...
<fePointLight> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting
result="spotlight" specularconstant="1.5" specularexponent="80" lighting-color="#fff"> <fepointlight x="50" y="50" z="220"/> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="arithmetic" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" he...
...ight="80%" style="filter:url(#spotlight);"/> </svg>
result specifications specification status comment filter effects module level 1the definition of '<fepointlight>' in that specification.
<feSpotLight> - SVG: Scalable Vector Graphics
example html content <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <fespecularlighting
result="spotlight" specularconstant="1.5" specularexponent="4" lighting-color="#fff"> <fespotlight x="600" y="600" z="400" limitingconeangle="5.5" /> </fespecularlighting> <fecomposite in="sourcegraphic" in2="spotlight" operator="out" k1="0" k2="1" k3="1" k4="0"/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" ...
... width="80%" height="80%" style="filter:url(#spotlight);"/> </svg>
result specifications specification status comment filter effects module level 1the definition of '<fespotlight>' in that specification.
<feTurbulence> - SVG: Scalable Vector Graphics
the
resulting image will fill the entire filter primitive subregion.
... example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<feturbulence>' in that specifica...
Basic Transformations - SVG: Scalable Vector Graphics
to combine several transformations, one can set the
resulting matrix directly with the matrix(a, b, c, d, e, f) transformation which maps coordinates from a previous coordinate system into a new coordinate system by {xnewcoordsys=axprevcoordsys+cyprevcoordsys+eynewcoordsys=bxprevcoordsys+dyprevcoordsys+f\left{ \begin{matrix} x_{\mathrm{prevcoordsys}} = a x_{\mathrm{newcoordsys}} + c y_{\mathrm{newcoordsys}} + e \\ y_{\mathrm{prevcoordsys}} = b x_{\mathr...
... <svg width="100" height="100"> <g transform="scale(2)"> <rect width="50" height="50" /> </g> </svg> the
resulting rectangular in the above example will be 100x100px.
Clipping and masking - SVG: Scalable Vector Graphics
then every part of the target lying in a transparent area of the
resulting clippath's content will not be rendered.
...as a
result the pixels of the red rectangle use the luminance value of the mask content as the alpha value (the transparency), and we see a green-to-red gradient as a
result: screenshotlive sample transparency with opacity there is a simple possibility to set the transparency for a whole element.
Paths - SVG: Scalable Vector Graphics
in this case the
result is the same as what the q command would have produced with the same parameters.
... <svg width="190" height="160" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 80 q 52.5 10, 95 80 t 180 80" stroke="black" fill="transparent"/> </svg> both curves produce similar
results, although the cubic one allows greater freedom in exactly what the curve looks like.
Using templates and slots - Web Components
adding a final bit of style as a finishing touch, we'll add a tiny bit more css for the <dl>, <dt>, and <dd> elements in our doc: dl { margin-left: 6px; } dt { font-weight: bold; color: #217ac0; font-size: 110% } dt { font-family: consolas, "liberation mono", courier } dd { margin-left: 16px } body { margin-top: 47px }
result finally let’s put all the snippets together and see what the rendered
result looks like.
... screenshotlive sample notice the following points about this rendered
result: even though the instances of the <element-details> element in the document do not directly use the <details> element, they get rendered using <details> because the shadow root causes them to get populated with that.
document - XPath
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the document finds a node-set in an external document, or multiple external documents, and returns the
resulting node-set.
... if the uri argument is a node-set, and the second argument is present, each node in the node-set will be evaluated as a separate uri, and the returned node-set will be as if the document function has been called multiple times (each time with the same second argument just as given in the function call) and the
resulting node-sets had been concatenated into a single node-set.
<xsl:value-of> - XSLT: Extensible Stylesheet Language Transformations
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes the <xsl:value-of> element evaluates an xpath expression, converts it to a string, and writes that string to the
result tree.
... optional attributes disable-output-escaping (netscape does not serialize the
result of transformation - the "output" below - so this attribute is essentially irrelevant in context.
An Overview - XSLT: Extensible Stylesheet Language Transformations
the
result of the processor's action is also a tree.
... in essence, an xslt stylesheet is a set of rules, called templates, which declare that any node that matches this specific pattern should be manipulated in this specific way and end up in this specific position in the
result tree.
Compiling a New C/C++ Module to WebAssembly - WebAssembly
at this point in your source directory you should have: the binary wasm module code (hello.wasm) a javascript file containing glue code to translate between the native c functions, and javascript/wasm (hello.js) an html file to load, compile, and instantiate your wasm code, and display its output in the browser (hello.html) running your example now all that remains is for you to load the
resulting hello.html in a browser that supports webassembly.
... <button class="mybutton">run myfunction</button> now add the following code at the end of the first <script> element: document.queryselector('.mybutton') .addeventlistener('click', function() { alert('check console'); var
result = module.ccall( 'myfunction', // name of c function null, // return type null, // argument types null // arguments ); }); this illustrates how ccall() is used to call the exported function.
WebAssembly Concepts - WebAssembly
the emscripten tool is able to take just about any c/c++ source code and compile it into a .wasm module, plus the necessary javascript "glue" code for loading and running the module, and an html document to display the
results of the code.
... emscripten transforms the compiled
result of clang+llvm into a .wasm binary.
Cross-domain Content Scripts - Archive of obsolete content
suppose your content script includes a line like: // content-script.js: unsafewindow.mycustomapi = function () {}; if you have included the "cross-domain-content" key, when the page script tries to access mycustomapi this will
result in a "permission denied" exception.
port - Archive of obsolete content
// content-script.js function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the
result is that the paragraph is only logged the first time the button is clicked.
Communicating using "port" - Archive of obsolete content
function getfirstparagraph() { var paras = document.getelementsbytagname('p'); console.log(paras[0].textcontent); self.port.removelistener("get-first-para", getfirstparagraph); } self.port.on("get-first-para", getfirstparagraph); the
result is that the paragraph is only logged the first time the button is clicked.
Testing the Add-on SDK - Archive of obsolete content
with travis if you merely make a pull request for the mozilla/addon-sdk then all of the jpm tests mentioned above will be run on travis-ci automatically and you will see the pass/fail
results with a link to the log in the github pull request.
notifications - Archive of obsolete content
var notifications = require("sdk/notifications"); notifications.notify({ title: "jabberwocky", text: "'twas brillig, and the slithy toves", data: "did gyre and gimble in the wabe", onclick: function (data) { console.log(data); // console.log(this.data) would produce the same
result.
simple-storage - Archive of obsolete content
accessing storage from the console in the add-on debugger, you can access your add-on's simple-storage programmatically from the console using the following: loader.modules['resource://gre/modules/commonjs/sdk/simple-storage.js'].exports.storage clarification from mozilla needed: writing the above line in add-on debugger console
results in "referenceerror: loader is not defined".
/loader - Archive of obsolete content
ource://gre/modules/commonjs/toolkit/', // resolve all other non-relative module requirements as follows: // devtools/gcli -> resource:///modules/devtools/gcli.js // panel -> resource:///modules/panel.js '': 'resource:///modules/', } }) all relative url require() statements (those that start with ".") are first resolved relative to the requirer module id and the
result of it is then resolved using the paths option.
core/heritage - Archive of obsolete content
as a matter of fact since
result is just a plain constructor function with proper prototype chain setup you could sub-class it as any other constructor: function labrador() { // ...
ui/button/action - Archive of obsolete content
for example, this add-on: creates a button with a default label opens a new tab sets a new label only for the new tab logs the
result of accessing the global label, the window-specific label, and each of the 2 tab-specific labels var { actionbutton } = require('sdk/ui/button/action'); var tabs = require("sdk/tabs"); var button = actionbutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the...
ui/button/toggle - Archive of obsolete content
for example, this add-on: creates a button with a default label opens a new tab sets a new label only for the new tab logs the
result of accessing the global label, the window-specific label, and each of the 2 tab-specific labels var { togglebutton } = require('sdk/ui/button/toggle'); var tabs = require("sdk/tabs"); var button = togglebutton({ id: "my-button", label: "default label", icon: "./firefox-16.png" }); tabs.open({ url: "https://mozilla.org/", onopen: onnewtab }); function onnewtab(tab) { // modify the...
util/collection - Archive of obsolete content
would print this to the console: 1 2 3 iteration proceeds over a copy of the collection made before iteration begins, so it is safe to mutate the collection during iteration; doing so does not affect the
results of the iteration.
jpm - Archive of obsolete content
unless an id field is present in package.json, jpm prepends "@" to name and use the
result as the id field in the add-on's install manifest.
Logging - Archive of obsolete content
but note that by default, calls to console.log() will not
result in any output in the error console for any installed add-ons: this includes add-ons installed using the add-on builder or using tools like the extension auto-installer.
Canvas code snippets - Archive of obsolete content
function savecanvas(canvas, path, type, options) { return task.spawn(function *() { var reader = new filereader; var blob = yield new promise(accept => canvas.toblob(accept, type, options)); reader.readasarraybuffer(blob); yield new promise(accept => { reader.onloadend = accept }); return yield os.file.writeatomic(path, new uint8array(reader.
result), { tmppath: path + '.tmp' }); }); } loading a remote page onto a canvas element the following class first creates a hidden iframe element and attaches a listener to the frame's load event.
Downloading Files - Archive of obsolete content
var privacy = privatebrowsingutils.privacycontextfromwindow(urlsourcewindow); var hardcodedusername = "ericjung"; var hardcodedpassword = "foobar"; persist.progresslistener = { queryinterface: xpcomutils.generateqi(["nsiauthprompt"]), // implements nsiauthprompt prompt: function(dialogtitle, text, passwordrealm, savepassword, defaulttext,
result) {
result.value = hardcodedpassword; return true; }, promptpassword: function(dialogtitle, text, passwordrealm, savepassword, pwd) { pwd.value = hardcodedpassword; return true; }, promptusernameandpassword: function(dialogtitle, text, passwordrealm, savepassword, user, pwd) { user.value = hardcodedusername; pwd.value = hardcodedpassword; return true; } }; pe...
HTML to DOM - Archive of obsolete content
let's take a look at the donkeyfire.donkeybrowser_onpageload() handler: donkeybrowser_onpageload: function(aevent) { var doc = aevent.originaltarget; var url = doc.location.href; if (aevent.originaltarget.nodename == "#document") { // ok, it's a real page, let's do our magic dump("[df] url = "+url+"\n"); var text = doc.evaluate("/html/body/h1",doc,null,xpath
result.string_type,null).stringvalue; dump("[df] text in /html/body/h1 = "+text+"\n"); } }, as you can see, we obtain full access to the dom of the page we loaded in background, and we can even evaluate xpath expressions.
Preferences - Archive of obsolete content
here are the idl definitions: void getcomplexvalue(in string aprefname, in nsiidref atype, [iid_is(atype), retval] out nsqi
result avalue); void setcomplexvalue(in string aprefname, in nsiidref atype, in nsisupports avalue); as you can see, both of them take a parameter, atype, which can have one of the following values (to be precise, you should pass components.interfaces.nsiwhatever instead of just nsiwhatever, which is undefined).
Windows - Archive of obsolete content
; var newy = event.screeny - startpos[1]; window.moveto(newx, newy); } } function mouseup(event) { startpos = null; } window.addeventlistener("mousedown", mousedown, false); window.addeventlistener("mouseup", mouseup, false); window.addeventlistener("mousemove", mousemove, false); xul titlebar element xul applications can take advantage of the titlebar element to achieve a similar
result without extra javascript code.
Custom about: URLs - Archive of obsolete content
const {classes: cc, interfaces: ci, manager: cm,
results: cr, utils: cu, constructor: cc} = components; cm.queryinterface(ci.nsicomponentregistrar); components.utils.import("resource://gre/modules/services.jsm"); // globals const aboutpage_description = 'this is my custom about page'; const aboutpage_id = 'aa132730-2278-11e5-867f-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen const aboutpage_word =...
Displaying web content in an extension without security issues - Archive of obsolete content
nsert a new entry in the document you would do the following: var template = doc.getelementbyid("entrytemplate"); var entry = template.clonenode(true); entry.removeattribute("id"); entry.getelementsbyclassname("title")[0].textcontent = title; entry.getelementsbyclassname("description")[0].textcontent = description; template.parentnode.appendchild(entry); the important difference here is that the
result will always have the same structure as the template tag.
::-ms-clear - Archive of obsolete content
*/ /* the cross can be hidden by setting the display attribute as "none" */ }
result the following screenshot shows what the feature will look like: specifications not part of any specification.
::-ms-fill - Archive of obsolete content
r display (values block, inline-block, none) font height margin -ms-background-position-x -ms-background-position-y -ms-high-contrast-adjust opacity outline-color, outline-style, and outline-width padding transform and transform-origin visibility syntax ::-ms-fill example html <progress value="10" max="50"></progress> css progress::-ms-fill { background-color: orange; }
result a progress bar using this style might look something like this: ...
Displaying notifications (deprecated) - Archive of obsolete content
nt.body.appendchild(e); }; notification.onclose = function() { var e = document.createelement("p"); e.innerhtml = "<strong>the notification was closed.</strong>"; document.body.appendchild(e); }; displaying the notification once the notification is configured the way you want it to be, call its show() method to display the notification: notification.show(); on android, for example, the
resulting notification panel looks like this: when the user taps on the "hey, check this out!" notification here, the
resulting changes to the document look like this: if you're using firefox mobile, you can see this example live by tapping the button below.
Using JavaScript Generators in Firefox - Archive of obsolete content
function closegenerator() { settimeout(function() { generator.close(); }, 0); } // our main steps function databaseoperation() { mozindexeddb.open("mytestdatabase").onsuccess = grabevent; var event = yield; var db = event.target.
result; if (db.version != "1.0") { db.setversion("1.0").onsuccess = grabevent; event = yield; var transaction = event.transaction; db.createobjectstore("stuff"); transaction.oncomplete = grabevent; yield; } db.transaction(["stuff"]).objectstore("stuff").get("foo").onsuccess = grabevent; event = yield; alert("got
result: " + event.target.
result); // we're all don...
Debug.msTraceAsyncCallbackStarting - Archive of obsolete content
function asyncwrapperfunction() { var opid = debug.mstraceasyncoperationstarting('async trace'); dosomethingasync().then(function (
result) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_success); debug.mstraceasynccallbackstarting(opid); // process
result of async operation.
Debug.msTraceAsyncCallbackCompleted - Archive of obsolete content
function asyncwrapperfunction() { var opid = debug.mstraceasyncoperationstarting('async trace'); dosomethingasync().then(function (
result) { debug.mstraceasyncoperationcompleted(opid, debug.ms_async_op_status_success); debug.mstraceasynccallbackstarting(opid); // process
result of async operation.
Archived JavaScript Reference - Archive of obsolete content
.enumerate()the static reflect.enumerate() method used to return an iterator with the enumerable own and inherited properties of the target object, but has been removed in ecmascript 2016 and is deprecated in browsers.string.prototype.quote()the non-standard quote() method returns a copy of the string, replacing various special characters in the string with their escape sequences and wrapping the
result in double-quotes (").
Examples - Archive of obsolete content
back to the article stylesheet /* * if you try to view the
results of these examples, * you will need to put a file named style.css with * the following content in the same directory as * the examples.
Reference - Archive of obsolete content
i checked this by doing alert(math.constructor) //shows that object is its constructor alert(object.constructor) //shows that function is its constructor alert(function.constructor) //shows that function is its constructor note : the function.constructor seems to keep on refering to itself, if you do the following you get same
results which suggests that this is indeed the top level object.
Writing JavaScript for XHTML - Archive of obsolete content
/*]]>*/ </style> and if you really need compatibility with very old browsers that do not recognize the script or style tags
resulting in their contents displayed on the page, you can use this: <script type="text/javascript"><!--//--><![cdata[//><!-- ...
HTML forms in legacy browsers - Learn web development
for example, [value] { background-color: #ccc; } may have been used to target every <input> with a value attribute, but changing the background-color or border radius on a <meter> will lead to likely unexpected
results that differ across browsers.
Example 3 - Learn web development
toggleoptlist(select); }, false); select.addeventlistener('focus', function (event) { activeselect(select, selectlist); }); select.addeventlistener('blur', function (event) { deactivateselect(select); }); select.addeventlistener('keyup', function (event) { if (event.keycode === 27) { deactivateselect(select); } }); }); });
result ...
Example 4 - Learn web development
index); }); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); });
result ...
Example 5 - Learn web development
eselect(select); }); select.addeventlistener('keyup', function (event) { var length = optionlist.length, index = getindex(select); if (event.keycode === 27) { deactivateselect(select); } if (event.keycode === 40 && index < length - 1) { index++; } if (event.keycode === 38 && index > 0) { index--; } updatevalue(select, index); }); }); });
result ...
Example - Learn web development
border: none; } input:focus, textarea:focus { border-color: #000; } textarea { vertical-align: top; height: 5em; resize: vertical; } fieldset { width: 250px; box-sizing: border-box; margin-left: 136px; border: 1px solid #999; } button { margin: 20px 0 0 124px; } label { position: relative; } label em { position: absolute; right: 5px; top: 20px; }
result ...
Sending form data - Learn web development
it's the method the browser uses to talk to the server when asking for a response that takes into account the data provided in the body of the http request: "hey server, take a look at this data and send me back an appropriate
result." if a form is sent using this method, the data is appended to the body of the http request.
Styling web forms - Learn web development
ou want, even using pseudo-elements: button { padding : 5px; font : bold .6em sans-serif; border : 2px solid #333; border-radius: 5px; background : none; cursor : pointer; transform : rotate(-1.5deg); } button:after { content : " >>>"; } button:hover, button:focus { outline : none; background : #000; color : #fff; } the final
result and voila!
Example - Learn web development
ers to resize any textarea vertically it works only on chrome, firefox and safari */ resize: vertical; } .button { /* to position the buttons to the same position of the text fields */ padding-left: 90px; /* same size as the label elements */ } button { /* this extra magin represent the same space as the space between the labels and their text fields */ margin-left: .5em; }
result ...
Publishing your website - Learn web development
using a web-based ide such as codepen there are a number of web apps that emulate a website development environment, allowing you to enter html, css and javascript, and then display the
result of that code as a website — all in one browser tab.
Define terms with HTML - Learn web development
the css font-weight property is what you need here: dt { font-weight: bold; } this produces the slightly more readable
result below: learn more <dfn> <dl> <dt> <dd> how to use the aria-describedby attribute ...
Routing in Ember - Learn web development
the reason for this is that we want the template to have a dynamic reference to the todo list, and if we returned the list directly, the data would never re-compute, which would
result in the navigations appearing to fail / not actually filter.
Ember app structure and componentization - Learn web development
enter the following command into your terminal: ember generate component header these will generate some new files, as shown in the
resulting terminal output: installing component create app/components/header.hbs skip app/components/header.js tip to add a class, run `ember generate component-class header` installing component-test create tests/integration/components/header-test.js header.hbs is the template file where we’ll include the html structure for just that component.
Advanced Svelte: Reactivity, lifecycle, accessibility - Learn web development
o assign a new array to todos containing a copy of all the todos with the completed property updated accordingly, like this: const checkalltodos = (completed) => { todos = todos.map(t => { // shorter version: todos = todos.map(t => ({...t, completed})) return {...t, completed: completed} }) } in this case we are using the map() method, which returns a new array with the
results of executing the provided function for each item.
Accessibility Features in Firefox
the mozilla firefox community welcomes bug reports, ideas, documentation, answering questions in the support forums -- and nearly any kind of community involvement
resulting in a browser built for a broader audience of users and developers.
Embedding API for Accessibility
be aware that in debug builds, this can cause a great number of assertions (bug 71598) to use prefs in embedding, use something like the following code: #include "nsipref.h"; ns
result rv; nscomptr<nsipref> prefs(do_getservice(ns_pref_contractid, &rv)); prefs->setboolpref("bool.pref.name", pr_true /* or pr_false */); prefs->setintpref("int.pref.name", newvalue); prefs->setcharpref("string.pref.name", newcharstarvalue); to manually add a pref to your settings, add a line like the following to your prefs.js: user_pref("accessibility.browsewithcaret", true); accessibility...
Mozilla's Section 508 Compliance
onkey rv1.8a4 is with each one: requirement windows linux/unix mac os requirement windows linux/unix mac os (a) when software is designed to run on a system that has a keyboard, product functions shall be executable from a keyboard where the function itself or the
result of performing a function can be discerned textually.
Multiprocess on Windows
simple example now you know about mainthreadhandoff::wrapinterface and about the smart pointers, you're ready to wrap an interface: accessible* myaccessible = ....; mozilla::mscom::stauniqueptr<iaccessible> acctowrap; myaccessible->getnativeinterface(mozilla::mscom::getter_addrefs(acctowrap)); mozilla::mscom::proxyuniqueptr<iaccessible> wrapped; h
result hr = mozilla::mscom::mainthreadhandoff::wrapinterface(mozilla::move(acctowrap), mozilla::mscom::getter_addrefs(wrapped)); if (failed(hr)) { // handle your error here } // the wrapped interface should be given to the at from within the mta.
Index
the content you add to a listing is therefore vital: from making effective use of keywords in your descriptions, to get visibility in external search engine
results, through having an icon that attracts a user’s attention from a category list, to screenshots that show how useful your add-on is.
A bird's-eye view of the Mozilla framework
[scriptable, uuid(00000000-0000-0000-c000-000000000046)] interface nsisupports { void queryinterface(in nsiidref uuid, iid_is(uuid),retval] out nsqi
result result); [noscript, notxpcom] nsrefcnt addref(); [noscript, notxpcom] nsrefcnt release(); }; the uuid parameter to queryinterface() is the iid uniqely identifying the interface.
Debugging Table Reflow
lable options are: reflow really-noisy-reflow max-element-size space-manager verify-lines damage-repair lame-paint-metrics lame-reflow-metrics disable-resize-opt these options can be combined with a comma separated list messages generated by the reflow switch: block(div)(1)@00be5ac4: reflowing dirty lines computedwidth=9000 computedheight=1500 this message is generated inside of ns
result nsblockframe::reflowdirtylines(nsblockreflowstate& astate) it first shows the block id and address and then the computed width and height from the htmlreflowstate.
Configuring Build Options
in most cases, this will not give the desired
results, unless you know the mozilla codebase very well; note, however, that if you are building with the microsoft compilers, you probably do want this as -o1 will optimize for size, unlike gcc.
Commenting IDL for better documentation
following the rules below will ensure that our tools are able to produce the best possible
results, and will have the added bonus of making your comments easier to read!
Obsolete Build Caveats and Tips
this has
resulted in many caveats and tips being added to the mdn documentation for building older versions of the code base or dealing with older build tools.
Reviewer Checklist
commonly this
results in "part 0" of a bug, which is "tidy things up to make the fix easier to write and review".
SVG Guidelines
if saved as a raster image then the work to rasterize the gradients and filters takes place on the authors computer before the
result is stored in the raster file.
mach
generally speaking, if you have some piece of functionality or action that is useful to multiple people (especially if it
results in productivity wins), then you should consider implementing a mach command for it.
Developer guide
perfherder perfherder is used to aggregate the
results of automated performance tests against the tree.
Limitations of chrome scripts
with the shim the shim intercepts chrome process code that adds listeners to xul elements and sets up listeners in the content process, relaying the
result back to the chrome process.
Communicating with frame scripts
because a single message can be received by more than one listener, the return value of sendsyncmessage() is an array of all the values returned from every listener, even if it only contains a single value: // frame script addeventlistener("click", function (event) { var
results = sendsyncmessage("my-addon@me.org:my-e10s-extension-message", { details : "they clicked", tag : event.target.tagname }); content.console.log(
results[0]); // "value from chrome" }, false); like arguments, return values from sendsyncmessage() must be json-serializable, so chrome can't return functions.
Message manager overview
the diagram below shows the setup that would
result from having two child processes: with the gppmm, you can broadcast messages to the cipmm and all cpmms.
HTMLIFrameElement.findAll()
invoking this method
results in a mozbrowserfindchange event firing, which carries details about the search
results.
mozbrowserfindchange
activematchordinal a number indicating the position of the currently highlighted search
result, e.g.
mozbrowseropentab
the mozbrowseropentab event is fired when a new tab is opened within a browser <iframe> as a
result of the user issuing a command to open a link target in a new tab (for example ctrl/cmd + click.) general info specification non standard interface customevent bubbles yes cancelable yes target <iframe> default action none properties property type description target read only eventtarget the browser iframe type read only domstring the typ...
CSS -moz-bool-pref() @supports function
</div> css @supports -moz-bool-pref("test") { #pref-test { background: green; } } @supports not -moz-bool-pref("test") { #pref-test { background: red; } }
result ...
overflow-clip-box-block
; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-block: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false);
result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box-inline
border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box-inline: padding-box; } javascript function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false);
result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
overflow-clip-box
; width: 6em; border: 1px solid black; background: lime content-box; } .padding-box { overflow-clip-box: padding-box; } js function scrollsomeelements() { var elms = document.queryselectorall('.scroll'); for (i=0; i < elms.length; ++i) { elms[i].scrollleft=80; } } var elt = document.queryelementsbytagname('body')[0]; elt.addeventlistener("load", scrollsomeelements, false);
result specifications this property has been proposed to the w3c csswg; it is not yet on the standard track but, if accepted, should appear in css overflow module level 3.
Overview of Mozilla embedding APIs
below is a code snippet which an embedding application can use to create and initialize a webbrowser: ns
result rv; nscomptr<nsibasewindow> basewindow; nscomptr<nsiwebbrowser> webbrowser; // create a nswebbrowser instance...
Embedding the editor
current problems the current composer architecture was created while other parts of mozilla were still under development, and as a
result it suffers from a number of shortcomings, and anachronisms.
Gecko SDK
get the sdk updates there is no need to download or rebuild the gecko sdk corresponding to security updates of mozilla (e.g., mozilla 1.7.3) since the headers and glue libs in the gecko sdk are usually not changed as a
result of security updates.
Getting Started with Chat
asking a good question will
result in a better experience for both you and the person trying to help.
How to get a stacktrace with WinDbg
.logopen /t c:\temp\firefox-debug.log .childdbg 1 .tlist sxn gp lm if you see firefox.exe listed in the output from .tlist more than once, then you are already running the application and need to close the running instance first before you start debugging, otherwise you won't get useful
results.
An overview of NSS Internals
as a
result, when searching for a trust path from (a) to a trusted anchor (root) certificate (z), the set of candidate issuer certificates might have different issuer names (referring to the second or higher issuer level).
NSS Code Coverage
nss - code coverage
results link 2007-08-14 - solaris/sparc platform
results explanation files
results from every c file are on new line.
Build instructions for JSS 4.3.x
build instructions for jss 4.3.x newsgroup: mozilla.dev.tech.crypto before building jss, you need to set up your system as follows: build nspr/nss by following the nspr/nss build instructions, to check that nss built correctly, run all.sh (in mozilla/security/nss/tests) and examine the
results (in mozilla/test_
results/security/computername.#/
results.html.
NSS 3.15.3 release notes
bug 925100 - (cve-2013-1741) ensure a size is <= half of the maximum pruint32 value bug 934016 - (cve-2013-5605) handle invalid handshake packets bug 910438 - (cve-2013-5606) return the correct
result in cert_verifycert on failure, if a verifylog isn't used new in nss 3.15.3 new functionality no new major functionality is introduced in this release.
NSS 3.27.1 release notes
this
resulted in connectivity failures, as some tls servers are version 1.3 intolerant, and failed to negotiate an earlier tls version with nss 3.27 clients.
NSS 3.27 release notes
for those applications, updating to nss 3.27 may
result in tls 1.3 (draft) to be enabled.
NSS 3.30 release notes
new functions in cert.h cert_compareava - performs a comparison of two certava structures, and returns a seccomparison
result.
NSS 3.36.2 release notes
bugs fixed in nss 3.36.2 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would
result in a ssl_rx_malformed_server_hello error.
NSS 3.37.1 release notes
bugs fixed in nss 3.37.1 bug 1462303 - connecting to a server that was recently upgraded to tls 1.3 would
result in a ssl_rx_malformed_server_hello error.
NSS Sample Code Sample_1_Hashing
te->value); hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_unknown) { fprintf(stderr, "%s: invalid digest type - %s\n", progname, hashname); usage(progname); } /* digest it and print the
result */ rv = digestfile(pr_stdout, pr_stdin, hashoidtag); if (rv != secsuccess) { fprintf(stderr, "%s: problem digesting data (%d)\n", progname, port_geterror()); } rv = nss_shutdown(); if (rv != secsuccess) { exit(-1); } return 0; } </sechash.h></secmodt.h></secoid.h></prio.h></plgetopt.h></prtypes.h></prprf.h> ...
Hashing - sample 1
te->value); hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_unknown) { fprintf(stderr, "%s: invalid digest type - %s\n", progname, hashname); usage(progname); } /* digest it and print the
result */ rv = digestfile(pr_stdout, pr_stdin, hashoidtag); if (rv != secsuccess) { fprintf(stderr, "%s: problem digesting data (%d)\n", progname, port_geterror()); } rv = nss_shutdown(); if (rv != secsuccess) { exit(-1); } return 0; } ...
sample1
hashname = strdup(optstate->value); break; } } if (!hashname) usage(progname); /* convert and validate */ hashoidtag = hashnametooidtag(hashname); if (hashoidtag == sec_oid_unknown) { fprintf(stderr, "%s: invalid digest type - %s\n", progname, hashname); usage(progname); } /* digest it and print the
result */ rv = digestfile(pr_stdout, pr_stdin, hashoidtag); if (rv != secsuccess) { fprintf(stderr, "%s: problem digesting data (%d)\n", progname, port_geterror()); } rv = nss_shutdown(); if (rv != secsuccess) { exit(-1); } return 0; } ...
nss tech note5
secstatus s = pk11_cipherop(enccontext, outbuf, &tmp1_outlen, sizeof outbuf, inbuf, inbuflen); s = pk11_digestfinal(enccontext, outbuf+tmp1_outlen, &tmp2_outlen, sizeof outbuf - tmp1_outlen);
result_len = tmp1_outlen + tmp2_outlen; <big>destroy the context pk11_destroycontext(enccontext, pr_true);</big> <big>repeat step 6 any number of times.
Notes on TLS - SSL 3.0 Intolerant Servers
normally the servers which have this problem are not equipped to deal with the tls protocol, but instead of rolling back to ssl 3.0 as the rollback provision provides, they terminate/drop the connection, thus
resulting in most cases a blank page display.
NSS PKCS11 Functions
failing to terminate when the retry argument is pr_true can
result in an endless loop.
Sample manual installation
after building nss with "gmake nss_build_all", the
resulting build can be found in the nss source tree as follows: nss header files: mozilla/dist/public/nss nspr header files: mozilla/dist/<obj-dir>/include nspr/nss shared libs: mozilla/dist/<obj-dir>/lib nss binary executables: mozilla/dist/<obj-dir>/bin.
FC_VerifyUpdate
the
result for the entire message is returned by a call to fc_verifyfinal.
NSS Key Functions
when you call cert_destroycertificate or seckey_destroyprivatekey, the function decrements the reference count and, if the reference count reaches zero as a
result, both frees the memory and sets all the bits to zero.
NSS functions
hash_end mxr 3.4 and later hash_gethashobject mxr 3.2 and later hash_gethashobjectbyoidtag mxr 3.8 and later hash_gethashtypebyoidtag mxr 3.8 and later hash_gettype mxr 3.12 and later hash_hashbuf mxr 3.10 and later hash_
resultlen mxr 3.4 and later hash_
resultlenbyoidtag mxr 3.10 and later hash_
resultlencontext mxr 3.10 and later hash_update mxr 3.4 and later nss_init mxr 3.2 and later nss_initialize mxr 3.2 and later nss_initreadwrite mxr 3.2...
NSS tools : certutil
id < 1> rsa 40defeeb522ade11090eacebaaf1196a172127df example domain administrator cert < 2> rsa 1d0b06f44f6c03842f7d4f4a1dc78b3bcd1b85a5 john smith user cert there are ways to narrow the keys listed in the search
results: * to return a specific key, use the -n name argument with the name of the key.
NSS tools : ssltab
this can
result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window.
NSS tools : ssltap
this can
result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window.
pkfnc.html
failing to terminate when the retry argument is pr_true can
result in an endless loop.
sslcrt.html
when you call cert_destroycertificate or seckey_destroyprivatekey, the function decrements the reference count and, if the reference count reaches zero as a
result, both frees the memory and sets all the bits to zero.
sslfnc.html
to enable or disable a permitted cipher suite, use ssl_cipherprefsetdefault; but bear in mind that ssl_cipherprefsetdefault can't enable any cipher suite that is not explicitly permitted as a
result of a call to one of the export policy functions.
sslkey.html
when you call cert_destroycertificate or seckey_destroyprivatekey, the function decrements the reference count and, if the reference count reaches zero as a
result, both frees the memory and sets all the bits to zero.
ssltyp.html
when you call cert_destroycertificate, the function decrements the reference count and, if the reference count reaches zero as a
result, frees the memory.
Utility functions
hash_end mxr 3.4 and later hash_gethashobject mxr 3.2 and later hash_gethashobjectbyoidtag mxr 3.8 and later hash_gethashtypebyoidtag mxr 3.8 and later hash_gettype mxr 3.12 and later hash_hashbuf mxr 3.10 and later hash_
resultlen mxr 3.4 and later hash_
resultlenbyoidtag mxr 3.10 and later hash_
resultlencontext mxr 3.10 and later hash_update mxr 3.4 and later nss_init mxr 3.2 and later nss_initialize mxr 3.2 and later nss_initreadwrite mxr 3.2...
NSS Tools certutil
2:4a:d4:67:be:8d:fc:dd:52:51:8e:a2:d7:15: 71:3e certificate trust flags: ssl flags: valid ca trusted ca email flags: valid ca trusted ca object signing flags: valid ca trusted ca validating a certificate this example validates a certificate: certutil -v -n jsmith@netscape.com -b 9803201212z -u sr -e -l -d certdir the certificate database tool shows
results similar to certificate:'jsmith@netscape.com' is valid.
NSS Tools ssltap
this can
result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window.
certutil
id < 1> rsa 40defeeb522ade11090eacebaaf1196a172127df example domain administrator cert < 2> rsa 1d0b06f44f6c03842f7d4f4a1dc78b3bcd1b85a5 john smith user cert there are ways to narrow the keys listed in the search
results: o to return a specific key, use the -n name argument with the name of the key.
NSS tools : ssltap
this can
result in peculiar effects, such as sounds, flashes, and even crashes of the command shell window.
Rhino Examples
the control class control.java is a program that executes a simple script and then manipulates the
result.
Rhino history
also, the implementation effectively leaked memory since most jvms don't really collect unused classes or the strings that are interned as a
result of loading a class file.
Rhino overview
attempts to invoke these constructors with the language version 1.4 will
result in an error.
Performance Hints
for example, you could rewrite function sum(a) {
result = 0; for (i=0; i < a.length; i++)
result += a[i]; return
result; } as function sum(a) { var
result = 0; for (var i=0; i < a.length; i++)
result += a[i]; return
result; } this is not equivalent code because the second version does not modify global variables
result and i.
Scripting Java
for example, to create an array of bytes, we must use the special field java.lang.byte.type: js> a = java.lang.reflect.array.newinstance(java.lang.character.type, 2); [c@7a84e4 the
resulting value can then be used anywhere a java array of that type is allowed.
Rhino shell
evaluates each expression, converts the
result to a string, and prints it.
JSAPI Cookbook
tedvalue v(cx, computesomevalue()); bool isstring = v.isstring(); bool isnumber = v.isnumber(); bool isint32 = v.isint32(); // note: internal representation, not numeric value bool isnull = v.isnull(); bool isboolean = v.isboolean(); bool isobject = v.isobject(); // note: not broken like typeof === "object" is :-) to set a value use a correspondingly named member mutator function, or assign the
result of the correspondingly named standalone function: // javascript var v; v = 0; v = 0.5; v = somestring; v = null; v = undefined; v = false; /* jsapi */ js::rootedvalue v(cx); js::rootedstring somestring(cx, ...); v.setint32(0); // or: v = js::int32value(0); v.setdouble(0.5); // or: v = js::doublevalue(0.5); v.setstring(somestring); // or: v = js::stringvalue(somestring); v.set...
JS_ValueToFunction
this conversion is dangerous and almost entirely useless, because the
resulting jsfunction is not a real function object and therefore cannot be safely passed to any other jsapi function.
Stored value
the new stored value is the
result of getting or setting the property, after the getter or setter, if any, is called.
JSAPI reference
they have been removed in js 1.8.5, though js_enterlocalrootscope obsolete since javascript 1.8.5 js_leavelocalrootscope obsolete since javascript 1.8.5 js_leavelocalrootscopewith
result obsolete since javascript 1.8.5 js_forgetlocalroot obsolete since javascript 1.8.5 added in spidermonkey 1.8 if an object contains references to other gc things that are not stored in spidermonkey data structures ("slots"), it must implement the jstraceop hook to enable the garbage collector to traverse those references.
Parser API
reflect.parse(src[, options]) coerces src to a string and parses the
result as a javascript program.
SpiderMonkey 1.8.7
jsautorequest jsautosuspendrequest jsautocheckrequest jsautoentercompartment js::anchor<> js::call obsolete apis js_clearnewbornroots js_enterlocalrootscope js_leavelocalrootscope js_leavelocalrootscopewith
result js_forgetlocalroot js_newgrowablestring deleted apis js_getscopechain use js_getglobalforscopechain api changes operation callback js_setoperationcallback was introduced in js 1.8.0, replacing the branch callback, in anticipation of the addition of the tracing jit (tracemonkey).
Running Parsemark
generally you'll want to capture json
results for your baseline and compare them to the
results for the "current" version of your shell.
SavedFrame
asyncparent if this stack frame was called as a
result of an asynchronous operation, for example if the function referenced by this frame is a promise handler, this property points to the stack frame responsible for the asynchronous call, for example where the promise was created.
TPS Pref Lists
for example: var prefs1 = [ { name: "browser.startup.homepage", value: "http://www.getfirefox.com" }, { name: "browser.urlbar.maxrich
results", value: 20 }, { name: "browser.tabs.autohide", value: true } ]; pref lists and phase actions the only actions supported for preference asset lists are modify and verify: prefs.modify prefs.verify sync only syncs certain preferences.
Thread Sanitizer
unlike other tools, it understands compiler-builtin atomics and synchronization and therefore provides very accurate
results with no real false positives.
compare-locales
to get a single
result across the projects, specify the --unified flag: $ compare-locales --unified browser/locales/l10n.toml mobile/android/locales/l10n.toml ./l10n/ de cross-channel and compare-locales if you're working against the gecko-strings cross-channel repository, the toml configuration files are in the _configs subdirectory, browser.toml, mobile_android.toml, mail.toml and calendar.toml, and suite.toml.
Mozilla Projects
unlike other tools, it understands compiler-builtin atomics and synchronization and therefore provides very accurate
results with no real false positives.
Task graph
the
result of each task is sent to treeherder where developers and sheriffs can track the status of the push.
Animated PNG graphics
decoders are free to avoid an explicit clear step as long as the
result is guaranteed to be identical.
The Publicity Stream API
this stream can be pulled down by getpublicitystream() and helps determine the
results for getuserrecommendedapps().
Creating a Python XPCOM component
# _reg_clsid_ = "{a new clsid generated for this object}" # _reg_contractid_ = "the.object.name" def get_value( self ): #
result: string pass def set_value( self, param0 ): #
result: void - none # in: param0: string pass as you can see, the output is valid python code, with basic signatures and useful comments for each of the methods.
XPCOM Glue without mozalloc
resulting xpcom components will no longer have a dependency on mozalloc, and will thus be compatible with xulrunner applications prior to 2.0 as well.
XPCOM Stream Guide
*/ store.init(64, 64, null); var out = store.getoutputstream(0); netutil.asynccopy(baseinputstream, out, function(status) { if (status != components.
results.ns_ok) return; /* due to a crash, we can't create input streams until the storage output stream * has some data in it.
Components.Constructor
(this benefit is also partly a
result of having to travel through the layer between the javascript engine and xpcom fewer times.) the behavior of functions returned by components.constructor() varies depending upon the arguments given to components.constructor() when called.
Components.utils.evalInSandbox
mysandbox.double = double; var
result = components.utils.evalinsandbox("x = y + 2; double(x) + 3", mysandbox); console.log(
result); // 17 console.log(mysandbox.x); // 7 operations on objects you insert into this sandbox global scope do not carry privileges into the sandbox: mysandbox.foo = components; // this will give a "permission denied" error components.utils.evalinsandbox("foo.classes", mysandbox); option...
Components.utils.exportFunction
example export to global scope this add-on script defines a function, then exports it to a content window: // addon-script.js var salutation = "hello "; function greetme(user) { return salutation + user; } components.utils.exportfunction(greetme, contentwindow, {defineas: "foo"}); instead of using defineas, the script can assign the
result of exportfunction to an object in the target scope: // addon-script.js var salutation = "hello "; function greetme(user) { return salutation + user; } contentwindow.foo = components.utils.exportfunction(greetme, contentwindow); either way, code running in the content window's scope can now call the function: // page-script.js var greeting = foo("alice"); console.log(greeting); // "hello ...
Components.utils.waiveXrays
the
result of waivexrays is just like the wrappedjsobject property for xrayed objects, but it's more useful because you can call it on primitives or objects that aren't xrays, in which case it just returns the argument you passed in.
Components object
es array of classes by contractid classesbyid array of classes by cid constructor constructor for constructor of components exception constructor for xpconnect exceptions id constructor for xpcom nsids interfaces array of interfaces by interface name interfacesbyid array of interfaces by iid issuccesscode function to determine if a given
result code is a success code last
result result code of most recent xpconnect call manager the global xpcom component manager
results array of known
result codes by name returncode pending
result for current call stack current javascript call stack utils provides access to several useful features utils.atline provides access to th...
nsIRegistry
try { st.first(); do { var data = st.currentitem(); if( data instanceof ci.nsiregistrynode ) print("nsiregistrynode: " + data.nameutf8 + " (" + data.key + ")"); st.next(); } while( components.last
result == 0 ); } catch(e) {} now, the output is something like: profiles (344) profiles/default (530) profiles/foo (1046) profiles/bar (1518) the number inside the parenthesis is the "key." you can use this key with the rest of the nsiregistry api (see mxr).
HOWTO
"component returned failure code: 0x80040111 (ns_error_not_available) [nsixpccomponents_utils.import]" ns
result: "0x80040111 (ns_error_not_available)" location: "js frame :: file.js :: <top_level> :: line 12" data: no] solution 1 var loader = components.classes["@mozilla.org/moz/jssubscript-loader;1"] .getservice(components.interfaces.mozijssubscriptloader); loader.loadsubscript("chrome://myall/content/file.jsm"); see: http://mxr.mozilla.org/comm-central/...figutils.js#54 solution 2 append the foll...
NS_GetComponentManager
#include "nsxpcom.h" #include "nsicomponentmanager.h" ns
result ns_getcomponentmanager( nsicomponentmanager** a
result ); parameters a
result [out] a reference to the xpcom component manager.
NS_GetComponentRegistrar
#include "nsxpcom.h" #include "nsicomponentregistrar.h" ns
result ns_getcomponentregistrar( nsicomponentmanager** a
result ); parameters a
result [out] a reference to the xpcom component registrar.
NS_GetMemoryManager
#include "nsxpcom.h" #include "nsimemory.h" ns
result ns_getmemorymanager( nsimemory** a
result ); parameters a
result [out] a reference to the xpcom memory manager.
NS_GetServiceManager
#include "nsxpcom.h" #include "nsiservicemanager.h" ns
result ns_getservicemanager( nsiservicemanager** a
result ); parameters a
result [out] a reference to the xpcom service manager.
NS_ShutdownXPCOM
#include "nsxpcom.h" ns
result ns_shutdownxpcom( nsiservicemanager* asvcmanager ); parameters asvcmanager [in] the nsiservicemanager instance that was returned by ns_initxpcom2 (or ns_initxpcom3) or null.
NS_ConvertASCIItoUTF16
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
NS_ConvertUTF16toUTF8
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
NS_ConvertUTF8toUTF16
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
NS_LossyConvertUTF16toASCII
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
NS_OVERRIDE
example class a has a method getfoo() which is overridden by class b: class a { virtual ns
result getfoo(nsifoo** a
result); }; class b : public a { ns_override virtual ns
result getfoo(nsifoo** a
result); }; later, the signature of a::getfoo() is changed to remove the output parameter: class a { - virtual ns
result getfoo(nsifoo** a
result); + virtual already_addrefed<nsifoo> getfoo(); }; b::getfoo() no longer overrides a::getfoo() as was originally intended.
nsAdoptingCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
nsAdoptingString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
nsAutoString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
nsCAutoString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given in...
nsCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
nsDependentString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
get
const char_type* get() const; example code void getbar(nsastring &
result); void func() { nsembedstring str; getbar(str); const prunichar *data = str.get(); ...
nsFixedCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
nsFixedString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
Alloc
the
result must be freed with a call to nsmemory::free() when it is no longer needed.
Clone
the
result must be freed with a call to nsmemory::free when it is no longer needed.
HeapMinimize
static ns
result heapminimize( prbool aimmediate ); parameters aimmediate [in] if true, heap minimization will occur immediately if the call was made on the main thread.
Realloc
the
result must be freed with a call to nsmemory::free when it is no longer needed.
nsPromiseFlatCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
nsPromiseFlatString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
nsString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
nsXPIDLCString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nscstring&, pruint32, pruint32) const - source parameters nscstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount right pruint32 right(nscstring&, pruint32) const - source parameters nscstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char y...
nsXPIDLString
@param aerrorcode will contain error if one occurs @return float rep of string value parameters print32* aerrorcode tointeger print32 tointeger(print32*, pruint32) const - source parameters print32* aerrorcode pruint32 aradix mid pruint32 mid(nsstring&, pruint32, pruint32) const - source parameters nsstring& a
result pruint32 astartpos pruint32 acount left pruint32 left(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount right pruint32 right(nsstring&, pruint32) const - source parameters nsstring& a
result pruint32 acount setcharat prbool setcharat(prunichar, pruint32) - source set a char inside this string at given index @param achar is the char you w...
imgICache
that means that using getservice in order to obtain it will yield incorrect
results.
imgIContainer
"notxpcom" for convenience, since we have no need for ns
result return-val.
nsISocketTransport
nsitransporteventsink status codes note: although these constants look like xpcom error codes and are passed in an ns
result variable, they are not error codes.
nsISound
various event names are provided, which will
result in playing the corresponding sound effect on the platform the user is running on: _moz_mailbeep the system sound when the system receives email.
nsISupportsPriority
in some cases, changing the priority of an object may be disallowed (
resulting in an exception being thrown) or may simply be ignored.
nsIThread
since other threads may add events to the current thread, it's possible that by the time this method returns, the event queue may no longer be empty, even if a false
result is reported.
nsITraceableChannel
/////// start - do not edit var {classes: cc, interfaces: ci,
results: cr, constructor: cc, utils: cu} = components; cu.import('resource://gre/modules/services.jsm'); var binaryinputstream = cc('@mozilla.org/binaryinputstream;1', 'nsibinaryinputstream', 'setinputstream'); var binaryoutputstream = cc('@mozilla.org/binaryoutputstream;1', 'nsibinaryoutputstream', 'setoutputstream'); var storagestream = cc('@mozilla.org/storagestream;1', 'nsistoragestream', 'init'); ...
nsITransaction
this method returns a boolean value that indicates the merge
result.
nsIURL
examples: this.spec auritocompare.spec
result http://mozilla.org/ http://www.mozilla.org/ "" http://foo.com/bar/ ftp://foo.com/bar/ "" http://foo.com:8080/ http://foo.com/bar/ "" ftp://user@foo.com/ ftp://user:pw@foo.com/ "" ftp://foo.com/bar/ ftp://foo.com/bar ftp://foo.com/ ftp://foo.com/bar/ ftp://foo.com/bar/b.html ftp://foo.com/bar/ http:/...
nsIVersionComparator
see here: nsixulappinfo components.utils.import("resource://gre/modules/services.jsm"); var curentbrowserversion = services.appinfo.platformversion; //example: '31.*' var comparetothisversion = '25.*'; var compare
result = services.vc.compare(curentbrowserversion, comparetothisversion); if (compare
result == -1) { //currentbrowserversion is less than '25.*' (comparetothisversion) } else if (compare
result == 0) { //currentbrowserversion is '25.*' (comparetothisversion) } else if (compare
result == 1) { //currentbrowserversion is greater than '25.*' (comparetothisversion) } else { //will never get here...
nsIWebBrowserFindInFrames
once the search is done, this will be set to be the last frame searched, whether or not a
result was found.
nsIWebNavigation
load_flags_charset_change 1024 this flag specifies that a reload was triggered as a
result of detecting an incorrect character encoding while parsing a previously loaded document.
nsIWebNavigationInfo
you may specify null to check for compatibility with nsiwebnavigation objects that are in their default state; otherwise, the
result is determined based on the configuration of the specified object (that is, how it is configured by using nsiwebbrowsersetup).
nsIWifiListener
void onerror( in long error ); parameters error the ns
result value indicating the error that occurred.
nsIWindowsRegKey
javascript callers should take care with the
result of this method since it will be byte-expanded to form a js string.
nsIXMLHttpRequest
though actually, if you use addeventlistener from c++ weird things will happen too, since the
result will depend on what js happens to be on the stack when you do it....
nsIXULBuilderListener
example create an object which implements nsixulbuilderlistener: var mylistener = { queryinterface: function(aiid) { if (aiid.equals(components.interfaces.nsixulbuilderlistener) || aiid.equals(components.interfaces.nsisupports)) return this; throw components.
results.ns_nointerface; }, willrebuild : function(builder) {}, didrebuild : function(builder) { } } attach the listener to a element: myelement.addlistener(mylistener); ...
nsIXULRuntime
the
result takes the form <processor>-<compilerabi>, for example: x86-msvc ppc-gcc3.
nsMsgSearchAttrib
const nsmsgsearchattribvalue date = 3; const nsmsgsearchattribvalue priority = 4; /* mail only */ const nsmsgsearchattribvalue msgstatus = 5; const nsmsgsearchattribvalue to = 6; const nsmsgsearchattribvalue cc = 7; const nsmsgsearchattribvalue toorcc = 8; const nsmsgsearchattribvalue alladdresses = 9; const nsmsgsearchattribvalue location = 10; /*
result list only */ const nsmsgsearchattribvalue messagekey = 11; /* message
result elems */ const nsmsgsearchattribvalue ageindays = 12; const nsmsgsearchattribvalue folderinfo = 13; /* for "view thread context" from
result */ const nsmsgsearchattribvalue size = 14; const nsmsgsearchattribvalue anytext = 15; const nsmsgsearchattribvalue keywords = 16; // keyw...
NS ENSURE TRUE
syntax ns_ensure_true( expr, return-value ); usage ns
result mozmyclass::mozstringmucking() { char *foo = new char[123]; ns_ensure_true(foo, ns_error_out_of_memory); // this is equivalent to doing: if (!foo) return ns_error_out_of_memory; // thou shalt not return ns_error_failure..
NS_CStringAppendData
#include "nsstringapi.h" ns
result ns_cstringappenddata( nsacstring& astring, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
NS_CStringContainerInit
#include "nsstringapi.h" ns
result ns_cstringcontainerinit( nscstringcontainer& astring ); parameters astring [in] a nscstringcontainer instance to be initialized.
NS_CStringContainerInit2
#include "nsstringapi.h" ns
result ns_cstringcontainerinit2( nscstringcontainer& acontainer, const char* adata = nsnull, pruint32 adatalength = pr_uint32_max, pruint32 aflags = 0 ); parameters acontainer [in] the nscstringcontainer instance to initialize.
NS_CStringCopy
#include "nsstringapi.h" ns
result ns_cstringcopy( nsacstring& adeststring, const nsacstring& asrcstring ); parameters adeststring [in] a nsacstring instance to be modified.
NS_CStringCutData
#include "nsstringapi.h" ns
result ns_cstringcutdata( nsacstring& astring, pruint32 acutstart, pruint32 acutlength ); parameters astring [in] a nsacstring instance to be modified.
NS_CStringGetData
aterminated [out] this optional
result parameter indicates whether or not adata is null-terminated.
NS_CStringInsertData
#include "nsstringapi.h" ns
result ns_cstringinsertdata( nsacstring& astring, pruint32 aoffset, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
NS_CStringSetData
#include "nsstringapi.h" ns
result ns_cstringsetdata( nsacstring& astring, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to modify.
NS_CStringSetDataRange
#include "nsstringapi.h" ns
result ns_cstringsetdatarange( nsacstring& astring, pruint32 acutstart, pruint32 acutlength, const char* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to modify.
NS_StringAppendData
#include "nsstringapi.h" ns
result ns_stringappenddata( nsastring& astring, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsastring instance to be modified.
NS_StringContainerInit
#include "nsstringapi.h" ns
result ns_stringcontainerinit( nsstringcontainer& astring ); parameters astring [in] a nsstringcontainer instance to be initialized.
NS_StringCopy
#include "nsstringapi.h" ns
result ns_stringcopy( nsastring& adeststring, const nsastring& asrcstring ); parameters adeststring [in] a nsastring instance to be modified.
NS_StringCutData
#include "nsstringapi.h" ns
result ns_stringcutdata( nsastring& astring, pruint32 acutstart, pruint32 acutlength ); parameters astring [in] a nsastring instance to be modified.
NS_StringGetData
aterminated [out] this optional
result parameter indicates whether or not adata is null-terminated.
NS_StringInsertData
#include "nsstringapi.h" ns
result ns_stringinsertdata( nsacstring& astring, pruint32 aoffset, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsacstring instance to be modified.
NS_StringSetData
#include "nsstringapi.h" ns
result ns_stringsetdata( nsastring& astring, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsastring instance to modify.
NS_StringSetDataRange
#include "nsstringapi.h" ns
result ns_stringsetdatarange( nsastring& astring, pruint32 acutstart, pruint32 acutlength, const prunichar* adata, pruint32 adatalength = pr_uint32_max ); parameters astring [in] a nsastring instance to modify.
nsMsgNavigationType
for example to move forward a message, you would call: // assuming gdbview is a global nsimsgdbview var
resultid = new object(); var
resultindex = new object(); var threadindex = new object(); gdbview.viewnavigate(components.interfaces.nsmsgnavigationtype.nextmessage,
resultid,
resultindex, threadindex, true); the nsmsgnavigationtype interface is defined as a global variable in thunderbird: var nsmsgviewcommandtype = components.interfaces.nsmsgviewcommandtype; mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article.
nsMsgViewType
for example, to request the 'show all threads' view use the constant: components.interfaces.nsmsgviewtype.eshowallthreads constants name value description eshowallthreads 0 eshowthreadswithunread 2 eshowwatchedthreadswithunread 3 eshowquicksearch
results 4 eshowvirtualfolder
results 5 eshowsearch 6 ...
Warnings
when you do not use an index, all the
results from the query have to first be fetched, and then those
results are sorted.
Using the clipboard
this multi-step process has
resulted in text being copied on the clipboard.
Use SQLite
ecutesql('create table if not exists logs (id unique, log)'); tx.executesql('insert into logs (id, log) values (1, "foobar")'); tx.executesql('insert into logs (id, log) values (2, "logmsg")'); msg = '<p>log message created and row inserted.</p>'; document.queryselector('#status').innerhtml = msg; }); db.transaction(function (tx) { tx.executesql('select * from logs', [], function (tx,
results) { var len =
results.rows.length, i; msg = "<p>found rows: " + len + "</p>"; document.queryselector('#status').innerhtml += msg; for (i = 0; i < len; i++){ msg = "<p><b>" +
results.rows.item(i).log + "</b></p>"; document.queryselector('#status').innerhtml += msg; } }, null); }); ...
customDBHeaders Preference
us.xpi chrome/ chrome.manifest chrome/content/ chrome/content/superfluous.js chrome/content/superfluous_overlay.xul install.rdf adding: chrome/ (stored 0%) adding: chrome.manifest (deflated 44%) adding: chrome/content/ (stored 0%) adding: chrome/content/superfluous.js (deflated 57%) adding: chrome/content/superfluous_overlay.xul (deflated 44%) adding: install.rdf (deflated 50%) end
result ultimately, you want to be able to compose a message like this: and see the superfluous column displayed in your inbox like this: thanks many thanks go out to the thunderbird developers for the fine product that it is.
Using popup notifications
you can use this to style the icon, like this: .popup-notification-icon[popupid="sample-popup"] { list-style-image: url("chrome://popupnotifications/skin/mozlogo.png"); } with this css in place, the
result is the look we want: adding secondary options to provide options in the drop-down menu, add an array of notification actions to the call to the show() method, like this: popupnotifications.show(gbrowser.selectedbrowser, "sample-popup", "this is a sample popup notification.", null, /* anchor id */ { label: "do something", accesskey: "d", c...
Zombie compartments
in the
results, you'll find a js-main-runtime-compartments tree (whcih you may need to expand further) that lists all system (firefox and add-ons) and user (website) compartments, these compartments are also listed in more detail in the explicit allocations section.
Declaring and Using Callbacks
this can all be done in a single line of code, like so: var callback = ctypes.functiontype(...).ptr(function(...) {...}); note: the use of .ptr() here isn't a method call; we're accessing a property that dynamically creates a callable object, and then invoking the
result.
Memory Management
what won't keep objects alive it's important to note that getting direct access to the contents of a cdata object using address(), addressofelement(), or contents, will
result in a cdata object that does not hold its referent alive.
CType
this is the
result of calling ctypes.pointertype(the_type).
FunctionType
this is the
result of calling ctypes.pointertype(the_type).
PointerType
this is the
result of calling ctypes.pointertype(the_type).
Constants - Plugins
result codes constant value description npres_done 0 (most common): completed normally; all data was sent to the instance.
DOM Inspector internals - Firefox Developer Tools
chrome://inspector/content/viewers/d...andoverlay.xul chrome://inspector/content/keysetoverlay.xul chrome://inspector/content/viewers/d...setoverlay.xul chrome://inspector/content/statusbaroverlay.xul chrome://global/content/globaloverlay.xul (note that the overlays from the viewer subdirectories—viewers/dom and viewers/stylerules—are loaded as a
result of overlay directives in dom inspector's chrome manifest, rather than being explicitly imported using a xul-overlay processing instruction in the overlaid file.) inspectoroverlay.xul this imports the scripts the top-level inspector needs, including dependencies.
Step through code - Firefox Developer Tools
the thinking here is that if you've got your devtools open in a separate window, as many people do, it can be easier to have the buttons available right there to move the code forward while you are looking at the
result.
Web Audio Editor - Firefox Developer Tools
two good demos are: the voice-change-o-matic, which can apply various effects to the microphone input and also provides a visualisation of the
result the violent theremin, which changes the pitch and volume of a sine wave as you move the mouse pointer visualizing the graph the web audio editor will now display the graph for the loaded audio context.
AbsoluteOrientationSensor - Web APIs
const sensor = new absoluteorientationsensor(); promise.all([navigator.permissions.query({ name: "accelerometer" }), navigator.permissions.query({ name: "magnetometer" }), navigator.permissions.query({ name: "gyroscope" })]) .then(
results => { if (
results.every(
result =>
result.state === "granted")) { sensor.start(); ...
AbstractWorker.onerror - Web APIs
}; example the following code snippet shows creation of a worker object using the worker() constructor and setting up of an onerror handler on the
resulting object: var myworker = new worker('worker.js'); myworker.onerror = function() { console.log('there is an error with your worker!'); } specifications specification status comment html living standardthe definition of 'abstractworker.onerror' in that specification.
AnalyserNode.maxDecibels - Web APIs
the maxdecibels property of the analysernode interface is a double value representing the maximum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the maximum value for the range of
results when using getfloatfrequencydata() or getbytefrequencydata().
AnalyserNode.minDecibels - Web APIs
the mindecibels property of the analysernode interface is a double value representing the minimum power value in the scaling range for the fft analysis data, for conversion to unsigned byte/float values — basically, this specifies the minimum value for the range of
results when using getfloatfrequencydata() or getbytefrequencydata().
Animation.updatePlaybackRate() - Web APIs
updateplaybackrate() is an asynchronous method that sets the speed of an animation after synchronizing with its current playback position, ensuring that the
resulting change in speed does not produce a sharp jump.
Animation - Web APIs
if they are indefinite (i.e., forwards-filling), this can
result in a huge animations list, which could create a memory leak.
Attr.namespaceURI - Web APIs
if (attribute.localname == "value" && attribute.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul value } notes this is not a computed value that is the
result of a namespace lookup based on an examination of the namespace declarations in scope.
AudioListener - Web APIs
because the velocity of the panner and the listener were not audioparams, the pitch modification could not be smoothly applied,
resulting in audio glitches.
AudioNode.connect() - Web APIs
notsupportederror the specified connection would create a cycle (in which the audio loops back through the same nodes repeatedly) and there are no delaynodes in the cycle to prevent the
resulting waveform from getting stuck constructing the same audio frame indefinitely.
AudioNode - Web APIs
the exact processing done varies from one audionode to another but, in general, a node reads its inputs, does some audio-related processing, and generates new values for its outputs, or simply lets the audio pass through (for example in the analysernode, where the
result of the processing is accessed separately).
AudioProcessingEvent - Web APIs
for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that
result to be the output sample in each case.
AudioTrack.enabled - Web APIs
once those have been found, the values of the two tracks' enabled properties are exchanged, which
results in swapping which of the two tracks is currently active.
AudioTrack.label - Web APIs
function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the
resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
AudioTrack - Web APIs
function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "main-desc", "translation", "commentary" ]; el.audiotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the
resulting tracklist contains an array of audio tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
AudioWorkletNode() - Web APIs
the
result of the structured clone algorithm applied to the object is also internally passed into the associated audioworkletprocessor() constructor — this allows custom initialization of an underlying user-defined audioworkletprocessor.
AudioWorkletNodeOptions - Web APIs
during internal instantiation of the underlying audioworkletprocessor, the the structured clone algorithm is applied to the options object and the
result is passed into audioworkletprocessor's constructor.
AudioWorkletProcessor - Web APIs
the
resulting audioparams reside in the parameters property of the node and can be automated using standard methods such as linearramptovalueattime.
AuthenticatorAttestationResponse.attestationObject - Web APIs
syntax attestobj = authenticatorattestationresponse.attestationobject properties after decoding the cbor encoded arraybuffer, the
resulting javascript object will contain the following properties: authdata the same as authenticatorassertionresponse.authenticatordata.
AuthenticatorResponse.clientDataJSON - Web APIs
examples function arraybuffertostr(buf) { return string.fromcharcode.apply(null, new uint8array(buf)); } // pk is a publickeycredential that is the
result of a create() or get() promise var clientdatastr = arraybuffertostr(pk.clientdatajson); var clientdataobj = json.parse(clientdatastr); console.log(clientdataobj.type); // "webauthn.create" or "webauthn.get" console.log(clientdataobj.challenge); // base64 encoded string containing the original challenge console.log(clientdataobj.origin); // the window.origin specifications spe...
Using the Beacon API - Web APIs
window.onload = window.onunload = function analytics(event) { if (!navigator.sendbeacon) return; var url = "https://example.com/analytics"; // create the data to send var data = "state=" + event.type + "&location=" + location.href; // send the beacon var status = navigator.sendbeacon(url, data); // log the data and
result console.log("sendbeacon: url = ", url, "; data = ", data, "; status = ", status); }; the following example creates a submit handler and when that event is fired, the handler calls sendbeacon().
BeforeInstallPromptEvent - Web APIs
example window.addeventlistener("beforeinstallprompt", function(e) { // log the platforms provided as options in an install prompt console.log(e.platforms); // e.g., ["web", "android", "windows"] e.userchoice.then(function(choice
result) { console.log(choice
result.outcome); // either "accepted" or "dismissed" }, handleerror); }); ...
BiquadFilterNode.getFrequencyResponse() - Web APIs
cies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our
results, and grab a reference to it in our javascript: <p>biquad filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our biquad filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human...
Body.blob() - Web APIs
note: if the response has a response.type of "opaque", the
resulting blob will have a blob.size of 0 and a blob.type of empty string "", which renders it useless for methods like url.createobjecturl.
Body - Web APIs
it returns a promise that resolves with the
result of parsing the body text as json.
CSS.escape() - Web APIs
examples basic
results css.escape(".foo#bar") // "\.foo\#bar" css.escape("()[]{}") // "\(\)\[\]\{\}" css.escape('--a') // "--a" css.escape(0) // "\30 ", the unicode code point of '0' is 30 css.escape('\0') // "\ufffd", the unicode replacement character in context uses to escape a string for use as part of a selector, the escape() method can be used: var element = document.queryselector('#' + css.escape(id) + ' > img'); the escape() method can also be used for escaping strings, although it escapes...
CSS.supports() - Web APIs
examples
result = css.supports("text-decoration-style", "blink");
result = css.supports("display: flex");
result = css.supports("(--foo: red)");
result = css.supports(`(transform-style: preserve) or (-moz-transform-style: preserve) or (-o-transform-style: preserve) or (-webkit-transform-style: preserve)`); //
result is true or false specification specification status com...
CSSMathProduct - Web APIs
the cssmathproduct interface of the css typed object model api represents the
result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
CSSMathSum.CSSMathSum() - Web APIs
the cssmathsum() constructor creates a new cssmathsum object which creates a new csskeywordvalue object which represents the
result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
CSSMathSum - Web APIs
the cssmathsum interface of the css typed object model api represents the
result obtained by calling add(), sub(), or tosum() on cssnumericvalue.
CSSStyleDeclaration.setProperty() - Web APIs
ndombgcolor() { const newbgcolor = randomcolor(); boxpararule.style.setproperty('background-color', newbgcolor); } function setrandomcolor() { const newcolor = randomcolor(); boxpararule.style.setproperty('color', newcolor); } borderbtn.addeventlistener('click', setrandomborder); bgcolorbtn.addeventlistener('click', setrandombgcolor); colorbtn.addeventlistener('click', setrandomcolor);
result specifications specification status comment css object model (cssom)the definition of 'cssstyledeclaration.setproperty()' in that specification.
CSSStyleSheet.addRule() - Web APIs
syntax var
result = cssstylesheet.addrule(selector, styleblock, index); parameters selector a domstring specifying the selector portion of the css rule.
CSSStyleSheet.rules - Web APIs
while rules is unlikely to be removed soon, its availability is not as widespread and using it will
result in compatibility problems for your site or app.
CSSStyleSheet - Web APIs
notes in some browsers, if a stylesheet is loaded from a different domain, accessing cssrules
results in securityerror.
Managing screen orientation - Web APIs
for portrait, we want the tool bar on top */ @media screen and (orientation: portrait) { #toolbar { width: 100%; } } /* for landscape, we want the tool bar stick on the left */ @media screen and (orientation: landscape) { #toolbar { position: fixed; width: 2.65em; height: 100%; } p { margin-left: 2em; } li + li { margin-top: .5em; } } and here's the
result portrait landscape note: the orientation media query actually applies based on the orientation of the browser window (or iframe) not the orientation of the device.
Using the CSS Painting API - Web APIs
fillrect(0, 15, 200, 20)
results in the creation of a rectangle that is 200 units wide by 20 units tall, positioned 0 units from the left and 15 units from the top of the content box.
Cache.add() - Web APIs
the add() method of the cache interface takes a url, retrieves it, and adds the
resulting response object to the given cache.
CanvasGradient.addColorStop() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let gradient = ctx.createlineargradient(0, 0, 200, 0); gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.7, 'white'); gradient.addcolorstop(1, 'pink'); ctx.fillstyle = gradient; ctx.fillrect(10, 10, 200, 100);
result specifications specification status comment html living standardthe definition of 'canvasgradient.addcolorstop' in that specification.
CanvasRenderingContext2D.beginPath() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // first path ctx.beginpath(); ctx.strokestyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(200, 20); ctx.stroke(); // second path ctx.beginpath(); ctx.strokestyle = 'green'; ctx.moveto(20, 20); ctx.lineto(120, 120); ctx.stroke();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.beginpath' in that specification.
CanvasRenderingContext2D.clearRect() - Web APIs
getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // draw yellow background ctx.beginpath(); ctx.fillstyle = '#ff6'; ctx.fillrect(0, 0, canvas.width, canvas.height); // draw blue triangle ctx.beginpath(); ctx.fillstyle = 'blue'; ctx.moveto(20, 20); ctx.lineto(180, 20); ctx.lineto(130, 130); ctx.closepath(); ctx.fill(); // clear part of the canvas ctx.clearrect(10, 10, 120, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.clearrect' in that specification.
CanvasRenderingContext2D.createImageData() - Web APIs
st imagedata = ctx.createimagedata(100, 100); // iterate through every pixel for (let i = 0; i < imagedata.data.length; i += 4) { // modify pixel data imagedata.data[i + 0] = 190; // r value imagedata.data[i + 1] = 0; // g value imagedata.data[i + 2] = 210; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20);
result more examples for more examples using createimagedata() and the imagedata object, see pixel manipulation with canvas and imagedata.data.
CanvasRenderingContext2D.createLinearGradient() - Web APIs
reate a linear gradient // the start gradient point is at x=20, y=0 // the end gradient point is at x=220, y=0 var gradient = ctx.createlineargradient(20,0, 220,0); // add three color stops gradient.addcolorstop(0, 'green'); gradient.addcolorstop(.5, 'cyan'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 200, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createlineargradient' in that specification.
CanvasRenderingContext2D.createPattern() - Web APIs
0, .5 * math.pi); patterncontext.stroke(); // create our primary canvas and fill it with the pattern const canvas = document.createelement('canvas'); const ctx = canvas.getcontext('2d'); const pattern = ctx.createpattern(patterncanvas, 'repeat'); ctx.fillstyle = pattern; ctx.fillrect(0, 0, canvas.width, canvas.height); // add our primary canvas to the webpage document.body.appendchild(canvas);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createpattern' in that specification.
CanvasRenderingContext2D.createRadialGradient() - Web APIs
nner circle is at x=110, y=90, with radius=30 // the outer circle is at x=100, y=100, with radius=70 var gradient = ctx.createradialgradient(110,90,30, 100,100,70); // add three color stops gradient.addcolorstop(0, 'pink'); gradient.addcolorstop(.9, 'white'); gradient.addcolorstop(1, 'green'); // set the fill style and draw a rectangle ctx.fillstyle = gradient; ctx.fillrect(20, 20, 160, 160);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.createradialgradient' in that specification.
CanvasRenderingContext2D.currentTransform - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let matrix = ctx.currenttransform; matrix.a = 1; matrix.b = 1; matrix.c = 0; matrix.d = 1; matrix.e = 0; matrix.f = 0; ctx.currenttransform = matrix; ctx.fillrect(0, 0, 100, 100);
result ...
CanvasRenderingContext2D.direction - Web APIs
html <canvas id="canvas"></canvas> javascript var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.font = '48px serif'; ctx.filltext('hi!', 150, 50); ctx.direction = 'rtl'; ctx.filltext('hi!', 150, 130);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.direction' in that specification.
CanvasRenderingContext2D.drawFocusIfNeeded() - Web APIs
'blue' : 'black'; ctx.filltext(el.textcontent, x + width / 2, y + height / 2); // define clickable area ctx.beginpath(); ctx.rect(x, y, width, height); // draw focus ring, if appropriate ctx.drawfocusifneeded(el); }
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.drawfocusifneeded' in that specification.
CanvasRenderingContext2D.fillRect() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(20, 10, 150, 100);
result filling the whole canvas this code snippet fills the entire canvas with a rectangle.
CanvasRenderingContext2D.font - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = 'bold 48px serif'; ctx.stroketext('hello world', 50, 100);
result loading fonts with the css font loading api with the help of the fontface api, you can explicitly load fonts before using them in a canvas.
CanvasRenderingContext2D.getImageData() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 10, 100, 100); ctx.fill(); let imagedata = ctx.getimagedata(60, 60, 200, 100); ctx.putimagedata(imagedata, 150, 10);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.getimagedata' in that specification.
CanvasRenderingContext2D.getTransform() - Web APIs
script const canvases = document.queryselectorall('canvas'); const ctx1 = canvases[0].getcontext('2d'); const ctx2 = canvases[1].getcontext('2d'); ctx1.settransform(1, .2, .8, 1, 0, 0); ctx1.fillrect(25, 25, 50, 50); let storedtransform = ctx1.gettransform(); console.log(storedtransform); ctx2.settransform(storedtransform); ctx2.beginpath(); ctx2.arc(50, 50, 50, 0, 2 * math.pi); ctx2.fill();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.gettransform' in that specification.
CanvasRenderingContext2D.globalAlpha - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalalpha = 0.5; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100);
result overlaying transparent shapes this example illustrates the effect of overlaying multiple transparent shapes on top of each other.
CanvasRenderingContext2D.globalCompositeOperation - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.globalcompositeoperation = 'xor'; ctx.fillstyle = 'blue'; ctx.fillrect(10, 10, 100, 100); ctx.fillstyle = 'red'; ctx.fillrect(50, 50, 100, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.globalcompositeoperation' in that specification.
CanvasRenderingContext2D.imageSmoothingEnabled - Web APIs
ction() { const w = img.width, h = img.height; ctx.filltext('source', w * .5, 20); ctx.drawimage(img, 0, 24, w, h); ctx.filltext('smoothing = true', w * 2.5, 20); ctx.imagesmoothingenabled = true; ctx.drawimage(img, w, 24, w * 3, h * 3); ctx.filltext('smoothing = false', w * 5.5, 20); ctx.imagesmoothingenabled = false; ctx.drawimage(img, w * 4, 24, w * 3, h * 3); };
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.imagesmoothingenabled' in that specification.
CanvasRenderingContext2D.imageSmoothingQuality - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); let img = new image(); img.src = 'https://mdn.mozillademos.org/files/222/canvas_createpattern.png'; img.onload = function() { ctx.imagesmoothingquality = 'low'; ctx.drawimage(img, 0, 0, 300, 150); };
result specifications specification status comment html living standardthe definition of 'imagesmoothingquality' in that specification.
CanvasRenderingContext2D.lineCap - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(20, 20); ctx.linewidth = 15; ctx.linecap = 'round'; ctx.lineto(100, 100); ctx.stroke();
result comparison of line caps in this example three lines are drawn, each with a different value for the linecap property.
CanvasRenderingContext2D.lineDashOffset - Web APIs
s"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.setlinedash([4, 16]); // dashed line with no offset ctx.beginpath(); ctx.moveto(0, 50); ctx.lineto(300, 50); ctx.stroke(); // dashed line with offset of 4 ctx.beginpath(); ctx.strokestyle = 'red'; ctx.linedashoffset = 4; ctx.moveto(0, 100); ctx.lineto(300, 100); ctx.stroke();
result the line with a dash offset is drawn in red.
CanvasRenderingContext2D.lineJoin - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 20; ctx.linejoin = 'round'; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(190, 100); ctx.lineto(280, 20); ctx.lineto(280, 150); ctx.stroke();
result comparison of line joins the example below draws three different paths, demonstrating each of the three linejoin options.
CanvasRenderingContext2D.lineWidth - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.linewidth = 15; ctx.beginpath(); ctx.moveto(20, 20); ctx.lineto(130, 130); ctx.rect(40, 40, 70, 70); ctx.stroke();
result more examples for more examples and explanation about this property, see applying styles and color in the canvas tutorial.
CanvasRenderingContext2D.moveTo() - Web APIs
var canvas = document.getelementbyid('canvas'); var ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(50, 50); // begin first sub-path ctx.lineto(200, 50); ctx.moveto(50, 90); // begin second sub-path ctx.lineto(280, 120); ctx.stroke();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.moveto' in that specification.
CanvasRenderingContext2D.putImageData() - Web APIs
s*4+2] + ',' + (data[pos*4+3]/255) + ')'; ctx.fillrect(x + dx, y + dy, 1, 1); } } } // draw content onto the canvas ctx.fillrect(0, 0, 100, 100); // create an imagedata object from it var imagedata = ctx.getimagedata(0, 0, 100, 100); // use the putimagedata function that illustrates how putimagedata works putimagedata(ctx, imagedata, 150, 0, 50, 50, 25, 25);
result data loss due to browser optimization due to the lossy nature of converting to and from premultiplied alpha color values, pixels that have just been set using putimagedata() might be returned to an equivalent getimagedata() as different values.
CanvasRenderingContext2D.rect() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.rect(10, 20, 150, 100); ctx.fill();
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.rect' in that specification.
CanvasRenderingContext2D.restore() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.restore' in that specification.
CanvasRenderingContext2D.save() - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save the default state ctx.save(); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100); // restore the default state ctx.restore(); ctx.fillrect(150, 40, 100, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.save' in that specification.
CanvasRenderingContext2D.shadowBlur - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowblur = 15; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowblur' in that specification.
CanvasRenderingContext2D.shadowOffsetX - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsetx = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 100);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsetx' in that specification.
CanvasRenderingContext2D.shadowOffsetY - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // shadow ctx.shadowcolor = 'red'; ctx.shadowoffsety = 25; ctx.shadowblur = 10; // rectangle ctx.fillstyle = 'blue'; ctx.fillrect(20, 20, 150, 80);
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.shadowoffsety' in that specification.
CanvasRenderingContext2D.textBaseline - Web APIs
onst baselines = ['top', 'hanging', 'middle', 'alphabetic', 'ideographic', 'bottom']; ctx.font = '36px serif'; ctx.strokestyle = 'red'; baselines.foreach(function (baseline, index) { ctx.textbaseline = baseline; const y = 75 + index * 75; ctx.beginpath(); ctx.moveto(0, y + 0.5); ctx.lineto(550, y + 0.5); ctx.stroke(); ctx.filltext('abcdefghijklmnop (' + baseline + ')', 0, y); });
result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textbaseline' in that specification.
CanvasRenderingContext2D.translate() - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // moved square ctx.translate(110, 30); ctx.fillstyle = 'red'; ctx.fillrect(0, 0, 80, 80); // reset current transformation matrix to the identity matrix ctx.settransform(1, 0, 0, 1, 0, 0); // unmoved square ctx.fillstyle = 'gray'; ctx.fillrect(0, 0, 80, 80);
result the moved square is red, and the unmoved square is gray.
CanvasRenderingContext2D - Web APIs
this code draws a house: // set line width ctx.linewidth = 10; // wall ctx.strokerect(75, 140, 150, 110); // door ctx.fillrect(130, 190, 40, 60); // roof ctx.beginpath(); ctx.moveto(50, 140); ctx.lineto(150, 60); ctx.lineto(250, 140); ctx.closepath(); ctx.stroke(); the
resulting drawing looks like this: reference drawing rectangles there are three methods that immediately draw rectangles to the canvas.
Basic animations - Web APIs
in normal circumstances, we only see these
results appear on the canvas when the script finishes executing.
Canvas API - Web APIs
const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 150, 100);
result reference htmlcanvaselement canvasrenderingcontext2d canvasgradient canvasimagesource canvaspattern imagebitmap imagedata renderingcontext textmetrics offscreencanvas path2d imagebitmaprenderingcontext note: the interfaces related to the webglrenderingcontext are referenced under webgl.
Clients.claim() - Web APIs
be aware that this
results in your service worker controlling pages that loaded regularly over the network, or possibly via a different service worker.
DOMException - Web APIs
the domexception interface represents an abnormal event (called an exception) that occurs as a
result of calling a method or accessing a property of a web api.
DOMPoint - Web APIs
in the following snippet, the pose of the xr device (such as a vr headset or phone with ar capabilities) can be retrieved by calling using xrframe.getviewerpose() during an xrsession animation frame, then accessing the
resulting xrpose's transform property, which contains two dompointreadonly attributes: position as a vector and orientation as a quaternion.
DOMPointReadOnly.x - Web APIs
in general, positive values x mean to the right, and negative values of x means to the left, assuming no transforms have
resulted in a reversal.
DOMPointReadOnly.y - Web APIs
in general, positive values of y mean downward, and negative values of y mean upward, assuming no transforms have
resulted in a reversal.
DOMPointReadOnly.z - Web APIs
in general, positive values of z mean toward the user (out from the screen), and negative values of z mean away from the user (into the screen), assuming no transforms have
resulted in a reversal.
DOMTokenList.forEach() - Web APIs
html <span class="a b c"></span> javascript let span = document.queryselector("span"); let classes = span.classlist; let iterator = classes.values(); classes.foreach( function(value, key, listobj) { span.textcontent += `${value} ${key}/${this} ++ `; }, "arg" );
result polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.domtokenlist && !domtokenlist.prototype.foreach) { domtokenlist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.length; i++) { callback.call(thisarg, this[i], i, this); } }; } specifications specification status ...
DOMTokenList.replace() - Web APIs
first, the html: <span class="a b c"></span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; let
result = classes.replace("c", "z"); console.log(
result); if (
result) { span.textcontent = classes; } else { span.textcontent = 'token not replaced successfully'; } the output looks like this: polyfill the following polyfill will add the replace method to the domtokenlist class.
DOMTokenList.toggle() - Web APIs
first, the html: <span class="a b">classlist is 'a b'</span> now the javascript: let span = document.queryselector("span"); let classes = span.classlist; span.addeventlistener('click', function() { let
result = classes.toggle("c"); if (
result) { span.textcontent = `'c' added; classlist is now "${classes}".`; } else { span.textcontent = `'c' removed; classlist is now "${classes}".`; } }) the output looks like this: specifications specification status comment domthe definition of 'toggle()' in that specification.
DataTransferItemList.DataTransferItem() - Web APIs
ragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }
result drag and drop demo link specifications specification status comment html living standardthe definition of 'datatransferitem getter' in that specification.
DataTransferItemList.add() - Web APIs
} } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); }
result result link specifications specification status comment html living standardthe definition of 'add()' in that specification.
DataTransferItemList.clear() - Web APIs
); } } } function dragover_handler(ev) { console.log("dragover"); ev.preventdefault(); // set the dropeffect to move ev.datatransfer.dropeffect = "move" } function dragend_handler(ev) { console.log("dragend"); var datalist = ev.datatransfer.items; for (var i = 0; i < datalist.length; i++) { datalist.remove(i); } // clear any remaining drag data datalist.clear(); }
result result link specifications specification status comment html living standardthe definition of 'clear()' in that specification.
DataTransferItemList.length - Web APIs
ragend_handler(event);" draggable="true"> select this element, drag it to the drop zone and then release the selection to move the element.</p> </div> <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">drop zone</div> css div { margin: 0em; padding: 2em; } #source { color: blue; border: 1px solid black; } #target { border: 1px solid black; }
result drag and drop demo link specifications specification status comment html living standardthe definition of 'length' in that specification.
DedicatedWorkerGlobalScope.postMessage() - Web APIs
inside the handler a calculation is done from which a
result message is created; this is then sent back to the main thread using postmessage(worker
result); onmessage = function(e) { console.log('message received from main script'); var worker
result = '
result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(worker
result); } in the main script, onmessage would have to be called on a worker object, wherea...
Device Memory API - Web APIs
javascript api you may query the approximate amount of ram device has by retreiving navigator.devicememory var ram1 = window.navigator.devicememory; var ram2 = navigator.devicememory; both of these will return the same
result.
Document: DOMContentLoaded event - Web APIs
load(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; });
result specifications specification status comment html living standardthe definition of 'domcontentloaded' in that specification.
Document.URL - Web APIs
syntax const url = document.url example javascript document.getelementbyid("url").textcontent = document.url; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p>
result specifications specification status comment domthe definition of 'document.url' in that specification.
Document.caretRangeFromPoint() - Web APIs
} // only split text_nodes if (textnode && textnode.nodetype == 3) { let replacement = textnode.splittext(offset); let br = document.createelement('br'); textnode.parentnode.insertbefore(br, replacement); } } let paragraphs = document.getelementsbytagname("p"); for (let i = 0; i < paragraphs.length; i++) { paragraphs[i].addeventlistener('click', insertbreakatpoint, false); }
result ...
Document.documentURI - Web APIs
syntax const uri = document.documenturi example javascript document.getelementbyid("url").textcontent = document.documenturi; html <p id="urltext"> url:<br/> <span id="url">url goes here</span> </p>
result specifications specification status comment domthe definition of 'documenturi' in that specification.
Document.getElementById() - Web APIs
example html <html> <head> <title>getelementbyid example</title> </head> <body> <p id="para">some text here</p> <button onclick="changecolor('blue');">blue</button> <button onclick="changecolor('red');">red</button> </body> </html> javascript function changecolor(newcolor) { var elem = document.getelementbyid('para'); elem.style.color = newcolor; }
result usage notes the capitalization of "id" in the name of this method must be correct for the code to function; getelementbyid() is not valid and will not work, however natural it may seem.
Document.getElementsByTagNameNS() - Web APIs
(to accommodate explorer, one could call an xpath wrapper instead of the xpath in the function below (as explorer supports xpath with a different api), such as this wrapper class.) function getelementsbytagnamenswrapper (ns, elname, doc, context) { if (!doc) { doc = document; } if (!context) { context = doc; } var
result = doc.evaluate('//*[local-name()="'+elname+'" and namespace-uri() = "'+ns+'"]', context, null, xpath
result.ordered_node_snapshot_type, null); var a = []; for(var i = 0; i <
result.snapshotlength; i++) { a[i] =
result.snapshotitem(i); } return a; } specifications specification status comment domthe definition of 'document.
Document.hasFocus() - Web APIs
content = 'this document has the focus.'; body.style.background = '#fff'; } else { log.textcontent = 'this document does not have the focus.'; body.style.background = '#ccc'; } } function openwindow() { window.open('https://developer.mozilla.org/', 'mdn', 'width=640,height=320,left=150,top=150'); } // check page focus every 300 milliseconds setinterval(checkpagefocus, 300);
result specification specification status comment html living standardthe definition of 'document.hasfocus()' in that specification.
Document.open() - Web APIs
as a
result, you can no longer call document.write() into an untrusted document from chrome, even using wrappedjsobject.
Document: pointerenter event - Web APIs
the pointerenter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a
result of a pointerdown event from a device that does not support hover (see pointerdown).
Document.queryCommandState() - Web APIs
{ var state = document.querycommandstate("bold"); switch (state) { case true: alert("the bold formatting will be removed from the selected text."); break; case false: alert("the selected text will be displayed in bold."); break; case null: alert("the state of the 'bold' command is indeterminable."); break; } document.execcommand('bold'); }
result specifications specification status comment execcommand ...
Document.querySelectorAll() - Web APIs
you can use any common looping statement, such as: var highlighteditems = userlist.queryselectorall(".highlighted"); highlighteditems.foreach(function(useritem) { deleteuser(useritem); }); user notes queryselectorall() behaves differently than most common javascript dom libraries, which might lead to unexpected
results.
Document: readystatechange event - Web APIs
load(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; });
result specifications specification status comment html living standardthe definition of 'readystatechange' in that specification.
DocumentFragment - Web APIs
example html <ul id="list"></ul> javascript var list = document.queryselector('#list') var fruits = ['apple', 'orange', 'banana', 'melon'] var fragment = new documentfragment() fruits.foreach(function (fruit) { var li = document.createelement('li') li.innerhtml = fruit fragment.appendchild(li) }) list.appendchild(fragment)
result specifications specification status comment domthe definition of 'documentfragment' in that specification.
DocumentOrShadowRoot.activeElement - Web APIs
tput-element'); const outputtext = document.getelementbyid('output-text'); outputelement.innerhtml = activetextarea.id; outputtext.innerhtml = selection; } const textarea1 = document.getelementbyid('ta-example-one'); const textarea2 = document.getelementbyid('ta-example-two'); textarea1.addeventlistener('mouseup', onmouseup, false); textarea2.addeventlistener('mouseup', onmouseup, false);
result specifications specification status comment html living standardthe definition of 'activeelement' in that specification.
DocumentOrShadowRoot.getSelection() - Web APIs
however, attempting to use a javascript string property or method such as length or substr directly on a selection object
results in an error if it does not have that property or method and may return unexpected
results if it does.
EXT_float_blend - Web APIs
with this extension enabled, calling drawarrays() or drawelements() with blending enabled and a draw buffer with 32-bit floating-point components will no longer
result in an invalid_operation error.
Element.animate() - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but
result in translatex(-200px) rotate(20deg).
Element: auxclick event - Web APIs
html <button><h1>click me!</h1></button> css html { height: 100%; overflow: hidden; } body { height: inherit; display: flex; justify-content: center; align-items: center; margin: 0; } button { border: 0; background-color: white; font-size: 8vw; display: block; width: 100%; height: 100%; } h1 { letter-spacing: 0.5rem; }
result note: if you are using a three-button mouse, you'll notice that the onauxclick handler is run when any of the non-left mouse buttons are clicked (usually including any "special" buttons on gaming mice).
Element: click event - Web APIs
html <button>click</button> javascript const button = document.queryselector('button'); button.addeventlistener('click', event => { button.innerhtml = `click count: ${event.detail}`; });
result try making rapid, repeated clicks on the button to increase the click count.
Element: compositionend event - Web APIs
yselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent);
result specifications specification status ui events working draft ...
Element: compositionstart event - Web APIs
yselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent);
result specifications specification status ui events working draft ...
Element: compositionupdate event - Web APIs
yselector('.clear-log'); clearlog.addeventlistener('click', () => { log.textcontent = ''; }); function handleevent(event) { log.textcontent = log.textcontent + `${event.type}: ${event.data}\n`; } inputelement.addeventlistener('compositionstart', handleevent); inputelement.addeventlistener('compositionupdate', handleevent); inputelement.addeventlistener('compositionend', handleevent);
result specifications specification status ui events working draft ...
Element: copy event - Web APIs
div.target { border: 1px solid gray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('copy', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); event.preventdefault(); });
result specifications specification status clipboard api and events working draft ...
Element: cut event - Web APIs
ray; margin: .5rem; padding: .5rem; height: 1rem; background-color: #e9eef1; } js const source = document.queryselector('div.source'); source.addeventlistener('cut', (event) => { const selection = document.getselection(); event.clipboarddata.setdata('text/plain', selection.tostring().touppercase()); selection.deletefromdocument(); event.preventdefault(); });
result specifications specification status clipboard api and events working draft ...
Element: dblclick event - Web APIs
aside'); card.addeventlistener('dblclick', function (e) { card.classlist.toggle('large'); }); html <aside> <h3>my card</h3> <p>double click to resize this object.</p> </aside> css aside { background: #fe9; border-radius: 1em; display: inline-block; padding: 1em; transform: scale(.9); transform-origin: 0 0; transition: transform .6s; } .large { transform: scale(1.3); }
result specifications specification status ui eventsthe definition of 'dblclick' in that specification.
Element: error event - Web APIs
document.queryselector('.event-log-contents'); const badimg = document.queryselector('.bad-img'); badimg.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: loading image\n`; console.log(event) }); const imgerror = document.queryselector('#img-error'); imgerror.addeventlistener('click', () => { badimg.setattribute('src', 'i-dont-exist'); });
result specifications specification status ui events working draft ...
Element: focusin event - Web APIs
examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; });
result specifications specification status comment ui events working draft added info that this event is composed.
Element: focusout event - Web APIs
examples live example html <form id="form"> <input type="text" placeholder="text input"> <input type="password" placeholder="password"> </form> javascript const form = document.getelementbyid('form'); form.addeventlistener('focusin', (event) => { event.target.style.background = 'pink'; }); form.addeventlistener('focusout', (event) => { event.target.style.background = ''; });
result specifications specification status comment ui events working draft added info that this event is composed.
Element.getAttributeNames() - Web APIs
lement.getattributenames(); example // iterate over element's attributes for (let name of element.getattributenames()) { let value = element.getattribute(name); console.log(name, value); } polyfill if (element.prototype.getattributenames == undefined) { element.prototype.getattributenames = function () { var attributes = this.attributes; var length = attributes.length; var
result = new array(length); for (var i = 0; i < length; i++) {
result[i] = attributes[i].name; } return
result; }; } specifications specification status comment domthe definition of 'element.getattributenames' in that specification.
Element.insertAdjacentHTML() - Web APIs
the insertadjacenthtml() method of the element interface parses the specified text as html or xml and inserts the
resulting nodes into the dom tree at a specified position.
Element: mousedown event - Web APIs
window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); }
result specifications specification status ui eventsthe definition of 'mousedown' in that specification.
Element: mouseenter event - Web APIs
t + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); }
result specifications specification status ui eventsthe definition of 'mouseenter' in that specification.
Element: mouseleave event - Web APIs
t + '.'); }); function addlistitem(text) { // create a new text node using the supplied text var newtextnode = document.createtextnode(text); // create a new li element var newlistitem = document.createelement("li"); // add the text node to the li element newlistitem.appendchild(newtextnode); // add the newly created list item to list unorderedlist.appendchild(newlistitem); }
result specifications specification status ui eventsthe definition of 'mouseleave' in that specification.
Element: mousemove event - Web APIs
window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); }
result specifications specification status ui eventsthe definition of 'mousemove' in that specification.
Element: mouseout event - Web APIs
settimeout(function() { event.target.style.color = ""; }, 1000); }, false); // briefly make an <li> orange when the mouse moves off of it test.addeventlistener("mouseout", function( event ) { // highlight the mouseout target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false);
result specifications specification status ui eventsthe definition of 'mouseout' in that specification.
Element: mouseover event - Web APIs
t.target.style.color = ""; }, 500); }, false); // this handler will be executed every time the cursor // is moved over a different list item test.addeventlistener("mouseover", function( event ) { // highlight the mouseover target event.target.style.color = "orange"; // reset the color after a short delay settimeout(function() { event.target.style.color = ""; }, 500); }, false);
result specifications specification status ui eventsthe definition of 'mouseover' in that specification.
Element: mouseup event - Web APIs
window.addeventlistener('mouseup', e => { if (isdrawing === true) { drawline(context, x, y, e.offsetx, e.offsety); x = 0; y = 0; isdrawing = false; } }); function drawline(context, x1, y1, x2, y2) { context.beginpath(); context.strokestyle = 'black'; context.linewidth = 1; context.moveto(x1, y1); context.lineto(x2, y2); context.stroke(); context.closepath(); }
result specifications specification status ui eventsthe definition of 'mouseup' in that specification.
Element.namespaceURI - Web APIs
if (element.localname == "browser" && element.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the
result of a namespace lookup based on an examination of the namespace declarations in scope.
Element: paste event - Web APIs
get'); target.addeventlistener('paste', (event) => { let paste = (event.clipboarddata || window.clipboarddata).getdata('text'); paste = paste.touppercase(); const selection = window.getselection(); if (!selection.rangecount) return false; selection.deletefromdocument(); selection.getrangeat(0).insertnode(document.createtextnode(paste)); event.preventdefault(); });
result specifications specification status clipboard api and events working draft ...
Element.releasePointerCapture() - Web APIs
iding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding;
result specifications specification status comment pointer events – level 2the definition of 'releasepointercapture' in that specification.
Element.scrollLeft - Web APIs
on to slide right!</div> </div> <button id="slide" type="button">slide right</button> css #container { width: 100px; height: 100px; border: 1px solid #ccc; overflow-x: scroll; } #content { width: 250px; background-color: #ccc; } javascript const button = document.getelementbyid('slide'); button.onclick = function () { document.getelementbyid('container').scrollleft += 20; };
result specifications specification status comment css object model (cssom) view modulethe definition of 'scrollleft' in that specification.
Element.scrollWidth - Web APIs
toverflow(element) { if (isoverflowing(element)) { alert('contents are overflowing the container.'); } else { alert('no overflows!'); } } buttonone.addeventlistener('click', function() { alertoverflow(divone); }); buttontwo.addeventlistener('click', function() { alertoverflow(divtwo); }); </script> </html>
result specification specification status comment css object model (cssom) view modulethe definition of 'element.scrollwidth' in that specification.
Element.setAttribute() - Web APIs
by setting the value of the disabled attribute to the empty string (""), we are setting disabled to true, which
results in the button being disabled.
Element.setPointerCapture() - Web APIs
iding(e) { slider.onpointermove = slide; slider.setpointercapture(e.pointerid); } function stopsliding(e) { slider.onpointermove = null; slider.releasepointercapture(e.pointerid); } function slide(e) { slider.style.transform = `translate(${e.clientx - 70}px)`; } const slider = document.getelementbyid('slider'); slider.onpointerdown = beginsliding; slider.onpointerup = stopsliding;
result specifications specification status comment pointer events – level 2the definition of 'setpointercapture' in that specification.
Element.toggleAttribute() - Web APIs
html <input value="text"> <button>toggleattribute("readonly")</button> javascript var button = document.queryselector("button"); var input = document.queryselector("input"); button.addeventlistener("click", function(){ input.toggleattribute("readonly"); });
result dom methods dealing with element's attributes: not namespace-aware, most commonly used methods namespace-aware variants (dom level 2) dom level 1 methods for dealing with attr nodes directly (seldom used) dom level 2 namespace-aware methods for dealing with attr nodes directly (seldom used) setattribute (dom 1) setattributens setattributenode setattributenodens getattribute (dom 1) ge...
Element - Web APIs
element.insertadjacenthtml() parses the text as html or xml and inserts the
resulting nodes into the tree in the position given.
Event.defaultPrevented - Web APIs
t.getelementbyid('log'); if (event.target.tagname === 'a') { if (event.defaultprevented) { log.innertext = 'sorry, but you cannot visit this link!\n' + log.innertext; } else { log.innertext = 'visiting link...\n' + log.innertext; } } } const a = document.getelementbyid('link2'); a.addeventlistener('click', stoplink); document.addeventlistener('click', logclick);
result specifications specification status comment domthe definition of 'event.defaultprevented()' in that specification.
Event.eventPhase - Web APIs
"#f6eedb" : "#cceeff" } } divinfo.innerhtml = '' }
result specifications specification status comment domthe definition of 'event.eventphase' in that specification.
Event.timeStamp - Web APIs
</p> <p>timestamp: <span id="time">-</span></p> javascript function gettime(event) { var time = document.getelementbyid("time"); time.firstchild.nodevalue = event.timestamp; } document.body.addeventlistener("keypress", gettime);
result reduced time precision to offer protection against timing attacks and fingerprinting, the precision of event.timestamp might get rounded depending on browser settings.
Event.type - Web APIs
geteventtype, false); // first document.addeventlistener('keypress', geteventtype, false); // second document.addeventlistener('keyup', geteventtype, false); // third // mouse events document.addeventlistener('mousedown', geteventtype, false); // first document.addeventlistener('mouseup', geteventtype, false); // second document.addeventlistener('click', geteventtype, false); // third
result specifications specification status comment domthe definition of 'event.type' in that specification.
EventListener - Web APIs
buttonelement.addeventlistener('click', { handleevent: function (event) { alert('element clicked through handleevent property!'); } });
result see also: addeventlistener specifications specification status comment domthe definition of 'eventlistener' in that specification.
ExtendableEvent - Web APIs
if waituntil() is called outside of the extendableevent handler, the browser should throw an invalidstateerror; note also that multiple calls will stack up, and the
resulting promises will be added to the list of extend lifetime promises.
FetchEvent - Web APIs
fetchevent.
resultingclientid read only the id of the client that replaces the previous client during a page navigation.
File.lastModified - Web APIs
ut type="file" multiple id="fileinput"> const fileinput = document.queryselector('#fileinput'); fileinput.addeventlistener('change', (event) => { // files is a filelist object (similar to nodelist) const files = event.target.files; for (let file of files) { const date = new date(file.lastmodified); console.log(`${file.name} has a last modified date of ${date}`); } }); try the
results out below: dynamically created files if a file is created dynamically, the last modified time can be supplied in the new file() constructor function.
File.name - Web APIs
example <input type="file" multiple onchange="processselectedfiles(this)"> function processselectedfiles(fileinput) { var files = fileinput.files; for (var i = 0; i < files.length; i++) { alert("filename " + files[i].name); } } try the
results out below: specifications specification status comment file apithe definition of 'name' in that specification.
File.type - Web APIs
client configuration (for instance, the windows registry) may
result in unexpected values even for common types.
File.webkitRelativePath - Web APIs
e /> <ul id="listing"></ul> javascript content document.getelementbyid("filepicker").addeventlistener("change", function(event) { let output = document.getelementbyid("listing"); let files = event.target.files; for (let i=0; i<files.length; i++) { let item = document.createelement("li"); item.innerhtml = files[i].webkitrelativepath; output.appendchild(item); }; }, false);
result specifications specification status comment file and directory entries apithe definition of 'webkitrelativepath' in that specification.
File - Web APIs
file objects are generally retrieved from a filelist object returned as a
result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
FileReader() - Web APIs
example the following code snippet shows creation of a filereader object using the filereader() constructor and subsequent usage of the object: function printfile(file) { var reader = new filereader(); reader.onload = function(evt) { console.log(evt.target.
result); }; reader.readastext(file); } specifications specification status comment file api working draft initial definition ...
FileReader.onload - Web APIs
example // callback from a <input type="file" onchange="onchange(event)"> function onchange(event) { var file = event.target.files[0]; var reader = new filereader(); reader.onload = function(e) { // the file's text will be printed here console.log(e.target.
result) }; reader.readastext(file); } ...
FileReader.readAsText() - Web APIs
when the read operation is complete, the readystate is changed to done, the loadend event is triggered, and the
result property contains the contents of the file as a text string.
FileSystemDirectoryEntry.createReader() - Web APIs
function readdirectory(directory) { let dirreader = directory.createreader(); let entries = []; let getentries = function() { dirreader.readentries(function(
results) { if (
results.length) { entries = entries.concat(toarray(
results)); getentries(); } }, function(error) { /* handle error -- error is a fileerror object */ }); }; getentries(); return entries; } this works by creating an internal function, getentries(), which calls itself recursively to get all the entries in the directory, concatenating each bat...
FileSystemEntry.toURL() - Web APIs
code that makes use of this might look like this: let img = document.createelement("img"); img.src = imagefileentry.tourl(); document.body.appendchild(img); assuming the scenario mentioned before the code, the
result would be html that looks like this being appended to the end of the document: <img src="filesystem:http://my-awesome-website.woot/temporary/awesomesauce.jpg"> browser compatibility the compatibility table on this page is generated from structured data.
FileSystemFileEntry.file() - Web APIs
function readfile(entry, successcallback, errorcallback) { entry.file(function(file) { let reader = new filereader(); reader.onload = function() { successcallback(reader.
result); }; reader.onerror = function() { errorcallback(reader.error); } reader.readastext(file); }, errorcallback); } this function calls file(), specifying as its success callback a method which proceeds to use a filereader to read the file as text.
FontFaceSet.load() - Web APIs
syntax
result = afontfaceset.load(font);
result = afontfaceset.load(font, text); returns a promise of an array of fontface loaded.
FormData.append() - Web APIs
for example (and being compatible with php's naming conventions by adding [] to the name): formdata.append('userpic[]', myfileinput.files[0], 'chris1.jpg'); formdata.append('userpic[]', myfileinput.files[1], 'chris2.jpg'); this technique makes it simpler to process multi-file uploads because the
resultant data structure is more conducive to looping.
FormData.entries() - Web APIs
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the key/value pairs for(var pair of formdata.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the
result is: key1, value1 key2, value2 specifications specification status comment xmlhttprequestthe definition of 'entries() (as iterator<>)' in that specification.
FormData.has() - Web APIs
example the following line creates an empty formdata object: var formdata = new formdata(); the following snippet shows the
results of testing for the existence of username in the formdata object, before and after appending a username value to it with formdata.append: formdata.has('username'); // returns false formdata.append('username', 'chris'); formdata.has('username'); // returns true specifications specification status comment xmlhttprequestthe definition of 'has()' in that specification.
FormData.keys() - Web APIs
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the keys for (var key of formdata.keys()) { console.log(key); } the
result is: key1 key2 specifications specification status comment xmlhttprequestthe definition of 'keys() (as iterator<>)' in that specification.
FormData.values() - Web APIs
example // create a test formdata object var formdata = new formdata(); formdata.append('key1', 'value1'); formdata.append('key2', 'value2'); // display the values for (var value of formdata.values()) { console.log(value); } the
result is: value1 value2 specifications specification status comment xmlhttprequestthe definition of 'values() (as iterator<>)' in that specification.
GainNode - Web APIs
if modified, the new gain is instantly applied, causing unaesthetic 'clicks' in the
resulting audio.
Geolocation - Web APIs
this allows a web site or app to offer customized
results based on the user's location.
Geolocation API - Web APIs
e} °`; } function error() { status.textcontent = 'unable to retrieve your location'; } if(!navigator.geolocation) { status.textcontent = 'geolocation is not supported by your browser'; } else { status.textcontent = 'locating…'; navigator.geolocation.getcurrentposition(success, error); } } document.queryselector('#find-me').addeventlistener('click', geofindme);
result specifications specification status comment geolocation api recommendation ...
GlobalEventHandlers.onanimationiteration - Web APIs
result assembled together, you get this: each time the box reaches the opposing corner, it stops, with the button reflecting which iteration number is up next, until you click the button to run the next iteration.
GlobalEventHandlers.onblur - Web APIs
html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; }
result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.onchange - Web APIs
html <input type="text" placeholder="type something here, then click outside of the field." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.onchange = handlechange; function handlechange(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; }
result specification specification status comment html living standardthe definition of 'onchange' in that specification.
GlobalEventHandlers.ondblclick - Web APIs
html <p>double click anywhere in this example.</p> <p id="log"></p> javascript let log = document.getelementbyid('log'); document.ondblclick = logdoubleclick; function logdoubleclick(e) { log.textcontent = `position: (${e.clientx}, ${e.clienty})`; }
result specifications specification status comment html living standardthe definition of 'ondblclick' in that specification.
GlobalEventHandlers.onfocus - Web APIs
html <input type="text" value="click here"> javascript let input = document.queryselector('input'); input.onblur = inputblur; input.onfocus = inputfocus; function inputblur() { input.value = 'focus has been lost'; } function inputfocus() { input.value = 'focus is here'; }
result try clicking in and out of the form field, and watch its contents change accordingly.
GlobalEventHandlers.oninput - Web APIs
html <input type="text" placeholder="type something here to see its length." size="50"> <p id="log"></p> javascript let input = document.queryselector('input'); let log = document.getelementbyid('log'); input.oninput = handleinput; function handleinput(e) { log.textcontent = `the field's value is ${e.target.value.length} character(s) long.`; }
result specifications specification status comment html living standardthe definition of 'oninput' in that specification.
GlobalEventHandlers.oninvalid - Web APIs
rror'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.preventdefault(); }
result specification specification status comment html living standardthe definition of 'oninvalid' in that specification.
GlobalEventHandlers.onkeydown - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeydown = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; }
result specifications specification status comment html living standardthe definition of 'onkeydown' in that specification.
GlobalEventHandlers.onkeyup - Web APIs
html <input> <p id="log"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('log'); input.onkeyup = logkey; function logkey(e) { log.textcontent += ` ${e.code}`; }
result specifications specification status comment html living standardthe definition of 'onkeyup' in that specification.
GlobalEventHandlers.onmousedown - Web APIs
lt(); } function moveview(event) { view.style.left = event.clientx - 50 + 'px'; view.style.top = event.clienty - 50 + 'px'; } function hideview(event) { view.setattribute('hidden', ''); } const container = document.queryselector('.container'); const view = document.queryselector('.view'); container.onmousedown = showview; container.onmousemove = moveview; document.onmouseup = hideview;
result specification specification status comment html living standardthe definition of 'onmousedown' in that specification.
GlobalEventHandlers.onmousemove - Web APIs
+ 'px'; }; this.show = function(event) { node.textcontent = event.target.dataset.tooltip; node.removeattribute('hidden'); }; this.hide = function() { node.setattribute('hidden', ''); }; })(); const links = document.queryselectorall('a'); links.foreach(link => { link.onmouseover = tooltip.show; link.onmousemove = tooltip.follow; link.onmouseout = tooltip.hide; });
result draggable elements we also have an example available showing the use of the onmousemove event handler with draggable objects — view the example in action.
GlobalEventHandlers.onmouseout - Web APIs
html <p>test your mouse on me!</p> javascript const p = document.queryselector('p'); p.onmouseover = logmouseover; p.onmouseout = logmouseout; function logmouseover() { p.innerhtml = 'mouse over detected'; } function logmouseout() { p.innerhtml = 'mouse out detected'; }
result specification specification status comment html living standardthe definition of 'onmouseout' in that specification.
GlobalEventHandlers.onmouseover - Web APIs
html <p>test your mouse on me!</p> javascript const p = document.queryselector('p'); p.onmouseover = logmouseover; p.onmouseout = logmouseout; function logmouseover() { p.innerhtml = 'mouse over detected'; } function logmouseout() { p.innerhtml = 'mouse out detected'; }
result specifications specification status comment html living standardthe definition of 'onmouseover' in that specification.
GlobalEventHandlers.onmouseup - Web APIs
ate(-50%, -90px); transition: transform .3s; } .depressed { transform: translate(-50%, -50%); } javascript function depress() { toast.classlist.add('depressed'); } function release() { toast.classlist.remove('depressed'); } const toaster = document.queryselector('.toaster'); const toast = document.queryselector('.toast'); toaster.onmousedown = depress; document.onmouseup = release;
result specification specification status comment html living standardthe definition of 'onmouseup' in that specification.
GlobalEventHandlers.onpointerdown - Web APIs
#target { width: 400px; height: 30px; text-align: center; font: 16px "open sans", "helvetica", sans-serif; color: white; background-color: blue; border: 2px solid darkblue; cursor: pointer; user-select: none; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; }
result the
resulting output is shown below.
GlobalEventHandlers.onreset - Web APIs
time stamp: ${event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.onreset = logreset;
result specification specification status comment html living standardthe definition of 'onreset' in that specification.
GlobalEventHandlers.onscroll - Web APIs
html <textarea>1 2 3 4 5 6 7 8 9</textarea> <p id="log"></p> css textarea { width: 4rem; height: 8rem; font-size: 3rem; } javascript const textarea = document.queryselector('textarea'); const log = document.getelementbyid('log'); textarea.onscroll = logscroll; function logscroll(e) { log.textcontent = `scroll position: ${e.target.scrolltop}`; }
result specifications specification status comment html living standardthe definition of 'onscroll' in that specification.
GlobalEventHandlers.onselect - Web APIs
lecting some text in this element.</textarea> <p id="log"></p> javascript function logselection(event) { const log = document.getelementbyid('log'); const selection = event.target.value.substring(event.target.selectionstart, event.target.selectionend); log.textcontent = `you selected: ${selection}`; } const textarea = document.queryselector('textarea'); textarea.onselect = logselection;
result specification specification status comment html living standardthe definition of 'onselect' in that specification.
GlobalEventHandlers.onsubmit - Web APIs
rror'); const city = document.getelementbyid('city'); const thanks = document.getelementbyid('thanks'); city.oninvalid = invalid; form.onsubmit = submit; function invalid(event) { error.removeattribute('hidden'); } function submit(event) { form.setattribute('hidden', ''); thanks.removeattribute('hidden'); // for this example, don't actually submit the form event.preventdefault(); }
result specifications specification status comment html living standardthe definition of 'onsubmit' in that specification.
GlobalEventHandlers.ontransitioncancel - Web APIs
) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; } box.onclick = function() { box.style.display = 'none'; timeout = window.settimeout(appear, 2000); function appear() { box.style.display = 'block'; } } box.ontransitioncancel = function(event) { console.log('transitioncancel fired after ' + event.elapsedtime + ' seconds.'); }
result the
resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
GlobalEventHandlers.ontransitionend - Web APIs
let box = document.queryselector(".box"); box.ontransitionrun = function(event) { box.innerhtml = "zooming..."; } box.ontransitionend = function(event) { box.innerhtml = "done!"; }
result the
resulting content looks like this: notice what happens when you hover your mouse cursor over the box, then move it away.
GlobalEventHandlers.onwheel - Web APIs
oom(event) { event.preventdefault(); if (event.deltay < 0) { // zoom in scale *= event.deltay * -2; } else { // zoom out scale /= event.deltay * 2; } // restrict scale scale = math.min(math.max(.125, scale), 4); // apply scale transform el.style.transform = `scale(${scale})`; } let scale = 1; const el = document.queryselector('div'); document.onwheel = zoom;
result specification specification status comment html living standardthe definition of 'onwheel' in that specification.
HTMLAnchorElement - Web APIs
htmlhyperlinkelementutils.href is a usvstring that is the
result of parsing the href html attribute relative to the document, containing a valid url of a linked resource.
HTMLCanvasElement.mozFetchAsStream() - Web APIs
also uses netutil.jsm var canvas = document.getelementbyid('canvas'); var d = canvas.width; ctx = canvas.getcontext('2d'); ctx.beginpath(); ctx.moveto(d / 2, 0); ctx.lineto(d, d); ctx.lineto(0, d); ctx.closepath(); ctx.fillstyle = 'yellow'; ctx.fill(); var netutilcallback = function() { return function(
result) { if (!components.issuccesscode(
result)) { alert('failed to create icon'); } else { alert('succesfully made'); } }; } var mfascallback = function(iconname) { return function(instream) { var file = fileutils.getfile('desk', [iconname + '.ico']); var outstream = fileutils.openfileoutputstream(file); cu.import('resource://gre/m...
HTMLCanvasElement.mozGetAsFile() - Web APIs
; ctx.fillrect(30, 30, 55, 50); var link = document.getelementbyid('link'); link.addeventlistener('click', copy); } function copy() { var canvas = document.getelementbyid('canvas'); var f = canvas.mozgetasfile('test.png'); var reader = new filereader(); reader.readasdataurl(f); reader.onloadend = function() { var newimg = document.createelement('img'); newimg.src = reader.
result; document.body.appendchild(newimg); } } window.addeventlistener('load', draw); specifications not part of any specification.
HTMLDetailsElement: toggle event - Web APIs
: flex; flex-direction: row-reverse; } #log { flex-shrink: 0; padding-left: 3em; } #summaries { flex-grow: 1; } javascript function logitem(e) { const item = document.queryselector(`[data-id=${e.target.id}]`); item.toggleattribute('hidden'); } const chapters = document.queryselectorall('details'); chapters.foreach((chapter) => { chapter.addeventlistener('toggle', logitem); });
result specifications specification status comment html living standardthe definition of 'toggle event' in that specification.
accessKeyLabel - Web APIs
avascript var node = document.getelementbyid('btn1'); if (node.accesskeylabel) { node.title += ' [' + node.accesskeylabel + ']'; } else { node.title += ' [' + node.accesskey + ']'; } node.onclick = function () { var p = document.createelement('p'); p.textcontent = 'clicked!'; node.parentnode.appendchild(p); }; html <button accesskey="h" title="caption" id="btn1">hover me</button>
result specifications specification status comment html living standardthe definition of 'htmlelement.accesskeylabel' in that specification.
HTMLElement: animationcancel event - Web APIs
oneventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } });
result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationend event - Web APIs
oneventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } });
result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationiteration event - Web APIs
oneventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } });
result specifications specification status comment css animations working draft initial definition ...
HTMLElement: animationstart event - Web APIs
oneventlog.textcontent}'animation canceled'`; }); applyanimation.addeventlistener('click', () => { animation.classlist.toggle('active'); animationeventlog.textcontent = ''; iterationcount = 0; let active = animation.classlist.contains('active'); if (active) { applyanimation.textcontent = "cancel animation"; } else { applyanimation.textcontent = "activate animation"; } });
result specifications specification status comment css animations working draft initial definition ...
HTMLElement: beforeinput event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('beforeinput', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; }
result specifications specification status ui eventsthe definition of 'beforeinput event' in that specification.
HTMLElement.hidden - Web APIs
.panel { font: 16px "open sans", helvetica, arial, sans-serif; border: 1px solid #22d; padding: 12px; width: 500px; text-align: center; } .button { font: 22px "open sans", helvetica, arial, sans-serif; padding: 5px 36px; } h1 { margin-top: 0; font-size: 175%; }
result specifications specification status comment html living standardthe definition of 'htmlelement.hidden' in that specification.
HTMLElement: input event - Web APIs
html <input placeholder="enter some text" name="name"/> <p id="values"></p> javascript const input = document.queryselector('input'); const log = document.getelementbyid('values'); input.addeventlistener('input', updatevalue); function updatevalue(e) { log.textcontent = e.target.value; }
result specifications specification status html living standardthe definition of 'input event' in that specification.
HTMLElement.isContentEditable - Web APIs
</p> javascript document.getelementbyid('infotext1').innerhtml += document.getelementbyid('mytext1').iscontenteditable; document.getelementbyid('infotext2').innerhtml += document.getelementbyid('mytext2').iscontenteditable;
result specifications specification status comment html living standardthe definition of 'htmlelement.contenteditable' in that specification.
HTMLElement.oncopy - Web APIs
3> <p id="log"></p> javascript const log = document.getelementbyid('log'); function logcopy(event) { log.innertext = 'copy blocked!\n' + log.innertext; event.preventdefault(); } function logpaste(event) { log.innertext = 'paste blocked!\n' + log.innertext; event.preventdefault(); } const editor = document.getelementbyid('editor'); editor.oncopy = logcopy; editor.onpaste = logpaste;
result specification whatwg standard ...
HTMLElement.oncut - Web APIs
is field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function preventcut(event) { event.preventdefault(); log.innertext = 'cut blocked!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.oncut = preventcut;
result specification whatwg standard ...
HTMLElement.onpaste - Web APIs
copying and pasting text into this field!</textarea> <h3>log:</h3> <p id="log"></p> javascript function logcopy(event) { log.innertext = 'copied!\n' + log.innertext; } function logpaste(event) { log.innertext = 'pasted!\n' + log.innertext; } const editor = document.getelementbyid('editor'); const log = document.getelementbyid('log'); editor.oncopy = logcopy; editor.onpaste = logpaste;
result specification whatwg standard ...
HTMLElement: pointerenter event - Web APIs
the pointerenter event fires when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a
result of a pointerdown event from a device that does not support hover (see pointerdown).
HTMLFontElement.color - Web APIs
tring in rgb format: #rrggbb #008000 rgb using decimal values rgb(x,x,x) (x in 0-255 range) rgb(0,128,0) syntax colorstring = fontobj.color; fontobj.color = colorstring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.color = "green"; specifications the <font> tag is not supported in html5 and as a
result neither is <font>.color.
HTMLFontElement.face - Web APIs
list of one or more valid font family names a list of font names, that have to be present on the local system courier,verdana syntax facestring = fontobj.face; fontobj.face = facestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.face = "arial"; specifications the <font> tag is not supported in html5 and as a
result neither is <font>.face .
HTMLFontElement.size - Web APIs
the format of the string must follow one of the following html microsyntaxes: microsyntax description examples valid size number string integer number in the range of 1-7 6 relative size string +x or -x, where x is the number relative to the value of the size attribute of the <basefont> element (the
result should be in the same range of 1-7) +2 -1 syntax sizestring = fontobj.size; fontobj.size = sizestring; examples // assumes there is <font id="f"> element in the html var f = document.getelementbyid("f"); f.size = "6"; specifications the <font> tag is not supported in html5 and as a
result neither is <font>.size .
HTMLFormElement: reset event - Web APIs
time stamp: ${event.timestamp}`; } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('reset', logreset);
result specifications specification status comment html living standardthe definition of 'reset' in that specification.
HTMLFormElement: submit event - Web APIs
time stamp: ${event.timestamp}`; event.preventdefault(); } const form = document.getelementbyid('form'); const log = document.getelementbyid('log'); form.addeventlistener('submit', logsubmit);
result specifications specification status comment html living standardthe definition of 'submit' in that specification.
HTMLFormElement - Web APIs
htmlformelement.target a domstring reflecting the value of the form's target html attribute, indicating where to display the
results received from submitting the form.
HTMLHyperlinkElementUtils.hostname - Web APIs
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.hostname; // returns:'developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.hostname' in that specification.
HTMLHyperlinkElementUtils.href - Web APIs
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/htmlhyperlinkelementutils/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.href; // returns: 'https://developer.mozilla.org/htmlhyperlinkelementutils/href' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.href' in that specification.
HTMLHyperlinkElementUtils.origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var
result = window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.origin' in that specification.
HTMLHyperlinkElementUtils.password - Web APIs
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.password; // returns:'flabada' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.password' in that specification.
HTMLHyperlinkElementUtils.pathname - Web APIs
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.pathname; // returns:'/docs/htmlhyperlinkelementutils.pathname' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.pathname' in that specification.
HTMLHyperlinkElementUtils.port - Web APIs
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/htmlhyperlinkelementutils.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.port' in that specification.
HTMLHyperlinkElementUtils.protocol - Web APIs
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/htmlhyperlinkelementutils.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.protocol' in that specification.
HTMLHyperlinkElementUtils.toString() - Web APIs
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/htmlhyperlinkelementutils/tostring' specifications specification status comment html living standard living standard ...
HTMLHyperlinkElementUtils.username - Web APIs
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/htmlhyperlinkelementutils.username"> be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.username; // returns:'anonymous' specifications specification status comment html living standardthe definition of 'htmlhyperlinkelementutils.username' in that specification.
Image() - Web APIs
the size specified in the constructor is reflected through the properties htmlimageelement.width and htmlimageelement.height of the
resulting instance.
HTMLImageElement.crossOrigin - Web APIs
thanks for reading me.</p> </div> css body { font: 1.125rem/1.5, helvetica, sans-serif; } .container { display: flow-root; width: 37.5em; border: 1px solid #d2d2d2; } img { float: left; padding-right: 1.5em; } output { background: rgba(100, 100, 100, 0.1); font-family: courier, monospace; width: 95%; }
result specifications specification status comment html living standardthe definition of 'htmlimageelement.crossorigin' in that specification.
HTMLImageElement.currentSrc - Web APIs
files/16864/clock-demo-200px.png 200w, /files/16797/clock-demo-400px.png 400w" sizes="(max-width: 400px) 50%, 90%"> javascript var clockimage = document.queryselector("img"); let p = document.createelement("p"); if (!clockimage.currentsrc.endswith("200px.png")) { p.innertext = "using the 200px image."; } else { p.innertext = "using the 400px image!"; } document.body.appendchild(p);
result specifications specification status comment html living standardthe definition of 'htmlimageelement.currentsrc' in that specification.
HTMLImageElement.height - Web APIs
var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updateheight = event => { output.innertext = clockimage.height; }; window.addeventlistener("load", updateheight); window.addeventlistener("resize", updateheight);
result this example may be easier to try out in its own window.
HTMLImageElement.sizes - Web APIs
let image = document.queryselector("article img"); let break40 = document.getelementbyid("break40"); let break50 = document.getelementbyid("break50"); break40.addeventlistener("click", event => image.sizes = image.sizes.replace(/50em,/, "40em,")); break50.addeventlistener("click", event => image.sizes = image.sizes.replace(/40em,/, "50em,"));
result this
result may be viewed in its own window here.
HTMLImageElement.width - Web APIs
var clockimage = document.queryselector("img"); let output = document.queryselector(".size"); const updatewidth = event => { output.innertext = clockimage.width; }; window.addeventlistener("load", updatewidth); window.addeventlistener("resize", updatewidth);
result this example may be easier to try out in its own window.
HTMLImageElement.x - Web APIs
css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; }
result the
resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.x' in that specification.
HTMLImageElement.y - Web APIs
css the css defining the appearance of the table: .group1 { background-color: #d7d9f2; } table { border-collapse: collapse; border: 2px solid rgb(100, 100, 100); font-family: sans-serif; } td, th { border: 1px solid rgb(100, 100, 100); padding: 10px 14px; } td > img { max-width: 4em; }
result the
resulting table looks like this: specifications specification status comment css object model (cssom) view modulethe definition of 'htmlimageelement.y' in that specification.
HTMLInputElement: invalid event - Web APIs
<li><label>enter an integer between 1 and 10: <input type="number" min="1" max="10" required></label></li> <li><input type="submit" value="submit"></li> </ul> </form><p id="log"></p> javascript const input = document.queryselector('input') const log = document.getelementbyid('log') input.addeventlistener('invalid', logvalue) function logvalue(e) { log.textcontent += e.target.value }
result specifications specification status comment html living standardthe definition of 'invalid event' in that specification.
HTMLInputElement.select() - Web APIs
html <input type="text" id="text-box" size="20" value="hello world!"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.select(); }
result notes calling element.select() will not necessarily focus the input, so it is often used with htmlelement.focus().
HTMLInputElement.setRangeText() - Web APIs
html <input type="text" id="text-box" size="30" value="this text has not been updated."> <button onclick="selecttext()">update text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setrangetext('already', 14, 17, 'select'); }
result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement.setSelectionRange() - Web APIs
html <input type="text" id="text-box" size="20" value="mozilla"> <button onclick="selecttext()">select text</button> javascript function selecttext() { const input = document.getelementbyid('text-box'); input.focus(); input.setselectionrange(2, 5); }
result specifications specification status comment html living standardthe definition of 'htmlinputelement.setselectionrange()' in that specification.
HTMLInputElement.stepUp() - Web APIs
try it with 0 */ input.stepup() } } css input:invalid { border: red solid 3px; }
result note if you don't pass a parameter to the stepup method, it defaults to 1.
HTMLMediaElement: loadstart event - Web APIs
tener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } });
result specifications specification status html living standardthe definition of 'loadstart media event' in that specification.
HTMLMediaElement: progress event - Web APIs
tener('click', () => { if (source) { document.location.reload(); } else { loadvideo.textcontent = "reset example"; source = document.createelement('source'); source.setattribute('src', 'https://interactive-examples.mdn.mozilla.net/media/examples/flower.webm'); source.setattribute('type', 'video/webm'); video.appendchild(source); } });
result specifications specification status html living standardthe definition of 'progress media event' in that specification.
Option() - Web APIs
element == 'zero') { s[s.options.length] = new option(element, s.options.length, false, false); } if (element == 'one') { s[s.options.length] = new option(element, s.options.length, true, false); // will add the "selected" attribute } if (element == 'two') { s[s.options.length] = new option(element, s.options.length, false, true); // just will be selected in "view" } }); /*
result <select id="s"> <option value="0">zero</option> <option value="1" selected="">one</option> <option value="2">two</option> // user will see this as 'selected' </select> */ specification specification status comment html5 the definition of 'option' in that specification.
HTMLElement.blur() - Web APIs
focus from a text input html <input type="text" id="mytext" value="sample text"> <br><br> <button type="button" onclick="focusinput()">click me to gain focus</button> <button type="button" onclick="blurinput()">click me to lose focus</button> javascript function focusinput() { document.getelementbyid('mytext').focus(); } function blurinput() { document.getelementbyid('mytext').blur(); }
result specification specification status comment html living standardthe definition of 'blur' in that specification.
HTMLOrForeignElement.dataset - Web APIs
examples <div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>john doe</div> const el = document.queryselector('#user'); // el.id === 'user' // el.dataset.id === '1234567890' // el.dataset.user === 'johndoe' // el.dataset.dateofbirth === '' // set the data attribute el.dataset.dateofbirth = '1960-10-03'; //
result: el.dataset.dateofbirth === 1960-10-03 delete el.dataset.dateofbirth; //
result: el.dataset.dateofbirth === undefined // 'somedataattr' in el.dataset === false el.dataset.somedataattr = 'mydata'; //
result: 'somedataattr' in el.dataset === true specifications specification status comment html living standardthe definition of 'htmlelement.dataset' in that specifica...
HTMLOutputElement - Web APIs
htmloutputelement.checkvalidity() checks the validity of the element and returns a boolean holding the check
result.
HTMLProgressElement - Web APIs
htmlprogresselement.positionread only returns a double value returning the
result of dividing the current value (value) by the maximum value (max); if the progress bar is an indeterminate progress bar, it returns -1.
HTMLSelectElement.checkValidity() - Web APIs
syntax var
result = selectelt.checkvalidity(); specifications specification status comment html living standardthe definition of 'htmlselectelement.checkvalidity()' in that specification.
HTMLSelectElement.disabled - Web APIs
alue="3">pepsi</option> <option value="4">whisky</option> </select> javascript var allowdrinkscheckbox = document.getelementbyid("allow-drinks"); var drinkselect = document.getelementbyid("drink-select"); allowdrinkscheckbox.addeventlistener("change", function(event) { if (event.target.checked) { drinkselect.disabled = false; } else { drinkselect.disabled = true; } }, false);
result specifications specification status comment html living standardthe definition of 'disabled' in that specification.
HTMLTableElement.createCaption() - Web APIs
html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> </table> javascript let table = document.queryselector('table'); let caption = table.createcaption(); caption.textcontent = 'this caption was created by javascript!';
result specifications specification status comment html living standardthe definition of 'htmltableelement: createcaption' in that specification.
HTMLTableElement.deleteCaption() - Web APIs
html <table> <caption>this caption will be deleted!</caption> <tr><td>cell 1.1</td><td>cell 1.2</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td></tr> </table> javascript let table = document.queryselector('table'); table.deletecaption();
result specifications specification status comment html living standardthe definition of 'htmltableelement: deletecaption' in that specification.
HTMLTableElement.deleteRow() - Web APIs
html <table> <tr><td>cell 1.1</td><td>cell 1.2</td><td>cell 1.3</td></tr> <tr><td>cell 2.1</td><td>cell 2.2</td><td>cell 2.3</td></tr> <tr><td>cell 3.1</td><td>cell 3.2</td><td>cell 3.3</td></tr> </table> javascript let table = document.queryselector('table'); // delete second row table.deleterow(1);
result specifications specification status comment html living standardthe definition of 'htmltableelement: deleterow' in that specification.
HTMLTableElement.deleteTFoot() - Web APIs
html <table> <thead><th>name</th><th>score</th></thead> <tr><td>bob</td><td>541</td></tr> <tr><td>jim</td><td>225</td></tr> <tfoot><th>average</th><td>383</td></tfoot> </table> javascript let table = document.queryselector('table'); table.deletetfoot();
result specifications specification status comment html living standardthe definition of 'htmltableelement: deletetfoot' in that specification.
HTMLTableElement.deleteTHead() - Web APIs
html <table> <thead><th>name</th><th>occupation</th></thead> <tr><td>bob</td><td>plumber</td></tr> <tr><td>jim</td><td>roofer</td></tr> </table> javascript let table = document.queryselector('table'); table.deletethead();
result specifications specification status comment html living standardthe definition of 'htmltableelement: deletethead' in that specification.
HTMLTableRowElement.rowIndex - Web APIs
/td> <td>$2</td></tr> <tr><td>oranges</td> <td>$8</td></tr> <tr><td>top sirloin</td> <td>$20</td></tr> </tbody> <tfoot> <tr><td>total</td> <td>$30</td></tr> </tfoot> </table> javascript let rows = document.queryselectorall('tr'); rows.foreach((row) => { let z = document.createelement("td"); z.textcontent = `(row #${row.rowindex})`; row.appendchild(z); });
result ...
The HTML DOM API - Web APIs
items marked with "*" are required.</p> <form action="" method="get"> <p> <label for="username" required>your name:</label> <input type="text" id="username"> (*) </p> <p> <label for="email">email:</label> <input type="email" id="useremail"> </p> <input type="submit" value="send" id="sendbutton"> </form>
result specifications specification status comment html living standard living standard whatwg html specification html5 recommendation no change from document object model (dom) level 2 html specification document object model (dom) level 2 html specification obsolete no change from document object model (dom) level 1 specification.
Headers.entries() - Web APIs
example // create a test headers object var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.append('vary', 'accept-language'); // display the key/value pairs for (var pair of myheaders.entries()) { console.log(pair[0]+ ': '+ pair[1]); } the
result is: content-type: text/xml vary: accept-language ...
Headers.keys() - Web APIs
example // create a test headers object var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.append('vary', 'accept-language'); // display the keys for(var key of myheaders.keys()) { console.log(key); } the
result is: content-type vary ...
Headers.values() - Web APIs
example // create a test headers object var myheaders = new headers(); myheaders.append('content-type', 'text/xml'); myheaders.append('vary', 'accept-language'); // display the values for (var value of myheaders.values()) { console.log(value); } the
result is: text/xml accept-language ...
History.go() - Web APIs
if no value is passed or if delta equals 0, it has the same
result as calling location.reload().
IDBCursor.continue() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'co...
IDBCursor.direction - Web APIs
for a complete working example, see our idbcursor example (view example live.) function backwards() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor(null,'prev').onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.direction); cursor.continue(); } else { console.log('entries displayed backwards.'); } }; }; specifications specificat...
IDBCursor.key - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.key); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database a...
IDBCursor.primaryKey - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.primarykey); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed dat...
IDBCursor.request - Web APIs
for example: function displaydata() { list.innerhtml = ''; var transaction = db.transaction(['rushalbumlist'], 'readonly'); var objectstore = transaction.objectstore('rushalbumlist'); var request = objectstore.opencursor(); request.onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.albumtitle + '</strong>, ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.request); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification sta...
IDBCursor.source - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.source); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed databas...
IDBCursor.update() - Web APIs
for a complete working example, see our idbcursor example (view example live.) function update
result() { list.innerhtml = ''; const transaction = db.transaction(['rushalbumlist'], 'readwrite'); const objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { const cursor = event.target.
result; if (cursor) { if (cursor.value.albumtitle === 'a farewell to kings') { const updatedata = cursor.value; updatedat...
IDBCursor - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the definition of 'cursor'...
IDBCursorWithValue.value - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); console.log(cursor.value); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database...
IDBCursorWithValue - Web APIs
for a complete working example, see our idbcursor example (view example live.) function displaydata() { var transaction = db.transaction(['rushalbumlist'], "readonly"); var objectstore = transaction.objectstore('rushalbumlist'); objectstore.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = cursor.value.albumtitle + ', ' + cursor.value.year; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specifications specification status comment indexed database api 2.0the definition of 'idbcur...
IDBDatabase.createObjectStore() - Web APIs
request.onupgradeneeded = function(event) { var db = event.target.
result; db.onerror = function(event) { note.innerhtml += "<li>error loading database.</li>"; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex("hours", "hours", { unique: false }); objectstore.createindex("minutes", "minutes", { u...
IDBDatabase.deleteObjectStore() - Web APIs
example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.
result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
IDBDatabase.onabort - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = event.target.
result; db.onerror = function() { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function() { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.createindex(...
IDBDatabase.onerror - Web APIs
dbopenrequest.onupgradeneeded = function(event) { var db = this.
result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.cr...
IDBDatabase.onversionchange - Web APIs
request.onupgradeneeded = function(event) { var db = event.target.
result; db.onerror = function(event) { note.innerhtml += '<li>error opening database.</li>'; }; db.onabort = function(event) { note.innerhtml += '<li>database opening aborted!</li>'; }; // create an objectstore for this database var objectstore = db.createobjectstore("todolist", { keypath: "tasktitle" }); // define what data items the objectstore will contain objectstore.cr...
IDBEnvironment - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open("todolist"); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.
result; }; } browser compatibility the compatibility table on this page is generated from structured data.
IDBIndex.getAll() - Web APIs
example var myindex = objectstore.index('index'); var getallrequest = myindex.getall(); getallrequest.onsuccess = function() { console.log(getallrequest.
result); } specification specification status comment indexed database api draftthe definition of 'getall()' in that specification.
IDBIndex.isAutoLocale - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.isautolocale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBIndex.keyPath - Web APIs
bindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.keypath); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBIndex.locale - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.locale); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBIndex.name - Web APIs
function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.name); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBIndex.objectStore - Web APIs
ex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.objectstore); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBIndex.unique - Web APIs
dbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); console.log(myindex.unique); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBKeyRange.bound() - Web APIs
, have a look at the idbkeyrange directory in the indexeddb-examples repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed ...
IDBKeyRange.includes() - Web APIs
example var keyrangevalue = idbkeyrange.bound('a', 'k', false, false); var my
result = keyrangevalue.includes('f'); // returns true var my
result = keyrangevalue.includes('w'); // returns false polyfill the includes() method was added in the second edition of the indexed db specification.
IDBKeyRange.lower - Web APIs
idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.lower); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexe...
IDBKeyRange.lowerBound() - Web APIs
to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.lowerbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexe...
IDBKeyRange.lowerOpen - Web APIs
keyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.loweropen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed d...
IDBKeyRange.only() - Web APIs
allowing you to experiment with key range, have a look at our idbkeyrange repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.only("a"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexed d...
IDBKeyRange.upper - Web APIs
idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upper); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexe...
IDBKeyRange.upperBound() - Web APIs
to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.upperbound("f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment ind...
IDBKeyRange.upperOpen - Web APIs
keyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("f", "w", true, true); console.log(keyrangevalue.upperopen); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; }; specification specification status comment indexe...
IDBKeyRange - Web APIs
to experiment with key range, have a look at our idbkeyrange-example repo (view the example live too.) function displaydata() { var keyrangevalue = idbkeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); objectstore.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var listitem = document.createelement('li'); listitem.innerhtml = '<strong>' + cursor.value.fthing + '</strong>, ' + cursor.value.frating; list.appendchild(listitem); cursor.continue(); } else { console.log('entries all displayed.'); } }; } specifications specification status comment indexed database api 2.0the d...
IDBLocaleAwareKeyRange - Web APIs
examples function displaydata() { var keyrangevalue = idblocaleawarekeyrange.bound("a", "f"); var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var myindex = objectstore.index('lname'); myindex.opencursor(keyrangevalue).onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' ...
IDBMutableFile - Web APIs
in case of success, the request's
result is a file object representing a snapshot of the handled file.
IDBObjectStore.count() - Web APIs
var transaction = db.transaction(['fthings'], 'readonly'); var objectstore = transaction.objectstore('fthings'); var countrequest = objectstore.count(); countrequest.onsuccess = function() { console.log(countrequest.
result); } specification specification status comment indexed database api 2.0the definition of 'count()' in that specification.
IDBObjectStore.index() - Web APIs
plete working example, see our idbindex-example demo repo (view the example live.) function displaydatabyindex() { tableentry.innerhtml = ''; var transaction = db.transaction(['contactslist'], 'readonly'); var objectstore = transaction.objectstore('contactslist'); var myindex = objectstore.index('lname'); myindex.opencursor().onsuccess = function(event) { var cursor = event.target.
result; if(cursor) { var tablerow = document.createelement('tr'); tablerow.innerhtml = '<td>' + cursor.value.id + '</td>' + '<td>' + cursor.value.lname + '</td>' + '<td>' + cursor.value.fname + '</td>' + '<td>' + cursor.value.jtitle + '</td>' + '<td>' + cursor.value.company + '</...
IDBVersionChangeEvent.oldVersion - Web APIs
example var dbname = "sampledb"; var dbversion = 2; var request = indexeddb.open(dbname, dbversion); request.onupgradeneeded = function(e) { var db = request.
result; if (e.oldversion < 1) { db.createobjectstore("store1"); } if (e.oldversion < 2) { db.deleteobjectstore("store1"); db.createobjectstore("store2"); } // etc.
IIRFilterNode.getFrequencyResponse() - Web APIs
cies, and two to receive the output magnitude and phase values: var myfrequencyarray = new float32array(5); myfrequencyarray[0] = 1000; myfrequencyarray[1] = 2000; myfrequencyarray[2] = 3000; myfrequencyarray[3] = 4000; myfrequencyarray[4] = 5000; var magresponseoutput = new float32array(5); var phaseresponseoutput = new float32array(5); next we create a <ul> element in our html to contain our
results, and grab a reference to it in our javascript: <p>iir filter frequency response for: </p> <ul class="freq-response-output"> </ul> var freqresponseoutput = document.queryselector('.freq-response-output'); finally, after creating our filter, we use getfrequencyresponse() to generate the response data and put it in our arrays, then loop through each data set and output them in a human-readable l...
ImageCapture.getPhotoSettings() - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the
results from getphotosettings() to modify the size of an input range.
ImageData() - Web APIs
); const arr = new uint8clampedarray(40000); // iterate through every pixel for (let i = 0; i < arr.length; i += 4) { arr[i + 0] = 0; // r value arr[i + 1] = 190; // g value arr[i + 2] = 0; // b value arr[i + 3] = 255; // a value } // initialize a new imagedata object let imagedata = new imagedata(arr, 200); // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20);
result specification specification status comment html living standardthe definition of 'imagedata()' in that specification.
ImageData.data - Web APIs
= (i % 400) / 400 * 255; // percentage in the y direction, times 255 let y = math.ceil(i / 400) / 100 * 255; // modify pixel data imagedata.data[i + 0] = x; // r value imagedata.data[i + 1] = y; // g value imagedata.data[i + 2] = 255 - x; // b value imagedata.data[i + 3] = 255; // a value } // draw image data to the canvas ctx.putimagedata(imagedata, 20, 20);
result more examples for more examples using imagedata.data, see pixel manipulation with canvas, canvasrenderingcontext2d.createimagedata(), and canvasrenderingcontext2d.putimagedata().
InputEvent.data - Web APIs
<p>some text to copy and paste.</p> <input type="text"> <p class="
result"></p> var editable = document.queryselector('input') var
result = document.queryselector('.
result'); editable.addeventlistener('input', (e) => {
result.textcontent = "inputted text: " + e.data; }); specifications specification status comment input events level 2the definition of 'data' in that specification.
InputEvent.dataTransfer - Web APIs
<p><span style="font-weight: bold; color: blue">whoa, bold blue text!</span></p> <p><span style="font-style: italic; color: red">exciting: italic red text!</span></p> <p>boring normal text ;-(</p> <hr> <p contenteditable="true">go on, try pasting some content into this editable paragraph and see what happens!</p> <p class="
result"></p> var editable = document.queryselector('p[contenteditable]'); var
result = document.queryselector('.
result') var datatransferobj; editable.addeventlistener('input', (e) => {
result.textcontent = e.datatransfer.getdata('text/html'); }); specifications specification status comment input events level 2the definition of 'datatransfer' in that specification.
InputEvent.inputType - Web APIs
t content in.</p> <hr> <ul> <li>a sample</li> <li>bulleted</li> <li>list.</li> </ul> <p>another paragraph.</p> </div> javascript const log = document.getelementbyid('log'); const editable = document.queryselector('div[contenteditable]'); editable.addeventlistener('input', loginputtype); function loginputtype(event) { log.textcontent = `input type: ${event.inputtype}`; }
result try editing the text inside the <div> and see what happens.
IntersectionObserver.rootMargin - Web APIs
these offsets are added to the corresponding values in the root's bounding box before the intersection between the
resulting rectangle and the target element's bounds.
Key Values - Web APIs
gdk_key_multi_key (0xff20) [1] qt::key_multi_key (0x01001120) "convert" [4] the convert key, which instructs the ime to convert the current input method sequence into the
resulting character.
KeyboardEvent.which - Web APIs
syntax var key
result = event.which; return value key
result contains the numeric code for a particular key pressed, depending on whether an alphanumeric or non-alphanumeric key was pressed.
KeyboardEvent - Web APIs
this
results in a sequence of events similar to the following being dispatched: keydown keypress keydown keypress <<repeating until the user releases the key>> keyup this is what the dom level 3 specification says should happen.
KeyframeEffectOptions - Web APIs
for instance with transform, a translatex(-200px) would not override an earlier rotate(20deg) value but
result in translatex(-200px) rotate(20deg).
Location: hostname - Web APIs
syntax string = object.hostname; object.hostname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.hostname"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.hostname; // returns:'developer.mozilla.org' specifications specification status comment html living standardthe definition of 'hostname' in that specification.
Location: href - Web APIs
syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/location/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.href; // returns: 'https://developer.mozilla.org/location/href' specifications specification status comment html living standardthe definition of 'href' in that specification.
Location: origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var
result = window.location.origin; // returns:'https://developer.mozilla.org' specifications specification status comment html living standardthe definition of 'origin' in that specification.
Location: password - Web APIs
syntax string = object.password; object.password = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.password; // returns:'flabada' ...
Location: pathname - Web APIs
syntax string = object.pathname; object.pathname = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/docs/location.pathname"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.pathname; // returns:'/docs/location.pathname' specifications specification status comment html living standardthe definition of 'pathname' in that specification.
Location: port - Web APIs
syntax string = object.port; object.port = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org:443/docs/location.port"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.port; // returns:'443' specifications specification status comment html living standardthe definition of 'location.port' in that specification.
Location: protocol - Web APIs
syntax string = object.protocol; object.protocol = string; examples // let's an <a id="myanchor" href="https://developer.mozilla.org/location.protocol"> element be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.protocol; // returns:'https:' specifications specification status comment html living standardthe definition of 'protocol' in that specification.
Location: toString() - Web APIs
syntax string = object.tostring(); examples // let's imagine an <a id="myanchor" href="https://developer.mozilla.org/docs/location/tostring"> element is in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.tostring(); // returns: 'https://developer.mozilla.org/docs/location/tostring' specifications specification status comment html living standard living standard ...
Location: username - Web APIs
syntax string = object.username; object.username = string; examples // let's <a id="myanchor" href="https://anonymous:flabada@developer.mozilla.org/docs/location.username"> be in the document var anchor = document.getelementbyid("myanchor"); var
result = anchor.username; // returns:'anonymous' ...
Long Tasks API - Web APIs
} }); // register observer for long task notifications observer.observe({entrytypes: ["longtask"]}); // long script execution after this will
result in queueing // and receiving "longtask" entries in the observer.
MSCandidateWindowUpdate - Web APIs
tan ime candidate window may be identified as needing to change size for any of the following reasons: as a
result of displaying new / changed alternatives or predictions web applications need only register for this event once per element (the handler will remain valid for the lifetime of the element).
MediaDecodingConfiguration - Web APIs
} }; // check support and performance navigator.mediacapabilities.decodinginfo(mediaconfig).then(
result => { console.log('this configuration is ' + (
result.supported ?
MediaDevices.getSupportedConstraints() - Web APIs
ript let constraintlist = document.getelementbyid("constraintlist"); let supportedconstraints = navigator.mediadevices.getsupportedconstraints(); for (let constraint in supportedconstraints) { if (supportedconstraints.hasownproperty(constraint)) { let elem = document.createelement("li"); elem.innerhtml = "<code>" + constraint + "</code>"; constraintlist.appendchild(elem); } }
result specifications specification status comment media capture and streamsthe definition of 'getsupportedconstraints()' in that specification.
MediaEncodingConfiguration - Web APIs
} }; // check support and performance navigator.mediacapabilities.encodinginfo(mediaconfig).then(
result => { console.log('this configuration is ' + (
result.supported ?
MediaError.code - Web APIs
media_err_decode 3 despite having previously been determined to be usable, an error occurred while trying to decode the media resource,
resulting in an error.
MediaTrackConstraints.echoCancellation - Web APIs
if, instead, the value is given as an object with an exact field, that field's boolean value indicates a required setting for the echo cancellation feature; if it can't be met, then the request will
result in an error.
MediaTrackConstraints.noiseSuppression - Web APIs
if, instead, the value is given as an object with an exact field, that field's boolean value indicates a required setting for the noise suppression feature; if it can't be met, then the request will
result in an error.
MediaTrackSettings - Web APIs
"crop-and-scale" the track's resolution might be the
result of the user agent using cropping or downscaling from a higher camera resolution.
MediaTrackSupportedConstraints.aspectRatio - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().aspectratio) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and ...
MediaTrackSupportedConstraints.autoGainControl - Web APIs
html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().autogaincontrol) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture ...
MediaTrackSupportedConstraints.channelCount - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().channelcount) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and str...
MediaTrackSupportedConstraints.deviceId - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().deviceid) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and streams...
MediaTrackSupportedConstraints.echoCancellation - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().echocancellation) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and...
MediaTrackSupportedConstraints.facingMode - Web APIs
example html <div id="
result"> </div> css #
result { font: 14px "arial", sans-serif; } javascript let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().facingmode) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and streamsthe defini...
MediaTrackSupportedConstraints.frameRate - Web APIs
javascript let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().framerate) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; } html <div id="
result"> </div> css #
result { font: 14px "arial", sans-serif; }
result the output, showing if your browser supports the framerate constraint, is: while this example is trivial...
MediaTrackSupportedConstraints.groupId - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().groupid) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and streamst...
MediaTrackSupportedConstraints.height - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().height) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and streamsth...
MediaTrackSupportedConstraints.latency - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().latency) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and streamst...
MediaTrackSupportedConstraints.noiseSuppression - Web APIs
html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().noisesuppression) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture...
MediaTrackSupportedConstraints.sampleRate - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().samplerate) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and strea...
MediaTrackSupportedConstraints.sampleSize - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().samplesize) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and strea...
MediaTrackSupportedConstraints.volume - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().volume) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result ...
MediaTrackSupportedConstraints.width - Web APIs
example html content <div id="
result"> </div> css content #
result { font: 14px "arial", sans-serif; } javascript content let
result = document.getelementbyid("
result"); if (navigator.mediadevices.getsupportedconstraints().width) {
result.innerhtml = "supported!"; } else {
result.innerhtml = "not supported!"; }
result specifications specification status comment media capture and streamsthe...
MessageEvent.data - Web APIs
example myworker.onmessage = function(e) {
result.textcontent = e.data; console.log('message received from worker'); }; specifications specification status comment html living standardthe definition of 'messageevent: data' in that specification.
MessageEvent.lastEventId - Web APIs
example myworker.onmessage = function(e) {
result.textcontent = e.data; console.log('message received from worker'); console.log(e.lasteventid); }; specifications specification status comment html living standardthe definition of 'messageevent: lasteventid' in that specification.
MessageEvent.origin - Web APIs
example myworker.onmessage = function(e) {
result.textcontent = e.data; console.log('message received from worker'); console.log(e.origin); }; specifications specification status comment html living standardthe definition of 'messageevent: origin' in that specification.
MessageEvent.ports - Web APIs
example onconnect = function(e) { var port = e.ports[0]; port.addeventlistener('message', function(e) { var worker
result = '
result: ' + (e.data[0] * e.data[1]); port.postmessage(worker
result); }); port.start(); // required when using addeventlistener.
MessageEvent.source - Web APIs
example myworker.onmessage = function(e) {
result.textcontent = e.data; console.log('message received from worker'); console.log(e.source); }; specifications specification status comment html living standardthe definition of ' messageevent: source' in that specification.
MouseEvent.altKey - Web APIs
html <p>click anywhere to test the <code>altkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the alt key is pressed: ${e.altkey}`; }
result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.altkey' in that specification.
MouseEvent.button - Web APIs
usebutton(e) { if (typeof e === 'object') { switch (e.button) { case 0: log.textcontent = 'left button clicked.'; break; case 1: log.textcontent = 'middle button clicked.'; break; case 2: log.textcontent = 'right button clicked.'; break; default: log.textcontent = `unknown button code: ${e.button}`; } } }
result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.button' in that specification.
MouseEvent.buttons - Web APIs
ript let log = document.createtextnode('?'); // let log = new text('?'); function logbuttons(e) { log.data = `${e.buttons} (${e.type})`; // log.nodevalue= `${e.buttons} (${e.type})`; } document.addeventlistener('mouseup', logbuttons); document.addeventlistener('mousedown', logbuttons); // document.addeventlistener('mousemove', logbuttons); document.queryselector('#log').appendchild(log)
result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.buttons' in that specification.
MouseEvent.ctrlKey - Web APIs
html <p>click anywhere to test the <code>ctrlkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the ctrl key is pressed: ${e.ctrlkey}`; }
result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.ctrlkey' in that specification.
MouseEvent.initMouseEvent() - Web APIs
.body.onclick = function(){ e = arguments[0]; var dt = e.target,stag = dt.tagname.tolowercase(); document.getelementbyid("out").innerhtml = stag; }; var simulateclick = function(){ var evt = document.createevent("mouseevents"); evt.initmouseevent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null); document.body.dispatchevent(evt); } simulateclick();
result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.initmouseevent()' in that specification.
MouseEvent.metaKey - Web APIs
html <p>click anywhere to test the <code>metakey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the meta key is pressed: ${e.metakey}`; }
result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.metakey' in that specification.
MouseEvent.movementX - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.insertadjacenthtml('afterbegin', `movement: ${event.movementx}, ${event.movementy}<br>`); while (log.childnodes.length > 128) log.lastchild.remove() } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement);
result specifications specification status comment pointer lockthe definition of 'mouseevent.movementx' in that specification.
MouseEvent.movementY - Web APIs
html <p id="log">move your mouse around.</p> javascript function logmovement(event) { log.innertext = `movement: ${event.movementx}, ${event.movementy}\n${log.innertext}`; } const log = document.getelementbyid('log'); document.addeventlistener('mousemove', logmovement);
result specifications specification status comment pointer lockthe definition of 'mouseevent.movementy' in that specification.
MouseEvent.relatedTarget - Web APIs
event.relatedtarget.id : "unknown"; log.innertext = `\ninto ${event.target.id} from ${related} ${mouseoutlog.innertext}`; }
result specifications specification status comment ui eventsthe definition of 'mouseevent.relatedtarget' in that specification.
MouseEvent.screenX - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; }
result routing an event when you trap events on the window, document, or other roomy elements, you can get the coordinates of that event (e.g., a click) and route it properly, as the following example demonstrates: function checkclickmap(e) { if (e.screenx < 50) doredbutton(); if (50 <= e.screenx && e.screenx < 100) doyellowbutton(); if (e.screenx >= 100) doredbutton(); } specifications ...
MouseEvent.screenY - Web APIs
html <p>move your mouse to see its position.</p> <p id="screen-log"></p> javascript let screenlog = document.queryselector('#screen-log'); document.addeventlistener('mousemove', logkey); function logkey(e) { screenlog.innertext = ` screen x/y: ${e.screenx}, ${e.screeny} client x/y: ${e.clientx}, ${e.clienty}`; }
result specifications specification status comment css object model (cssom) view modulethe definition of 'screeny' in that specification.
MouseEvent.shiftKey - Web APIs
html <p>click anywhere to test the <code>shiftkey</code> property.</p> <p id="log"></p> javascript let log = document.queryselector('#log'); document.addeventlistener('click', logkey); function logkey(e) { log.textcontent = `the shift key is pressed: ${e.shiftkey}`; }
result specifications specification status comment document object model (dom) level 3 events specificationthe definition of 'mouseevent.shiftkey' in that specification.
MouseEvent - Web APIs
ncelable: true, view: window }); var cb = document.getelementbyid("checkbox"); //element to click on var canceled = !cb.dispatchevent(evt); if(canceled) { // a handler called preventdefault alert("canceled"); } else { // none of the handlers called preventdefault alert("not canceled"); } } document.getelementbyid("button").addeventlistener('click', simulateclick);
result specifications specification status comment css object model (cssom) view modulethe definition of 'mouseevent' in that specification.
NDEFRecord.toRecords() - Web APIs
the torecords() method of the ndefrecord interface of web nfc api parses record payload ndefrecord.data besed on ndefrecord.recordtype and returns the
result.
Navigator.permissions - Web APIs
examples navigator.permissions.query({name:'geolocation'}).then(function(
result) { if (
result.state === 'granted') { showmap(); } else if (
result.state === 'prompt') { showbuttontoenablemap(); } // don't do anything if the permission was denied.
Navigator.share() - Web APIs
the javascript looks like this: const sharedata = { title: 'mdn', text: 'learn web development on mdn!', url: 'https://developer.mozilla.org', } const btn = document.queryselector('button'); const
resultpara = document.queryselector('.
result'); // must be triggered some kind of "user activation" btn.addeventlistener('click', async () => { try { await navigator.share(sharedata)
resultpara.textcontent = 'mdn shared successfully' } catch(err) {
resultpara.textcontent = 'error: ' + err } }); sharing files to share files, first test for and call navigator.canshare().
NavigatorID.taintEnabled() - Web APIs
syntax
result = window.navigator.taintenabled() specifications specification status comment html living standardthe definition of 'navigatorid.taintenabled' in that specification.
Online and offline events - Web APIs
bold 1em sans-serif; color: #fff; padding: 0.5em; } #log { padding: 2.5em 0.5em 0.5em; font: 1em sans-serif; } .online { background: green; } .offline { background: red; } and the corresponding htmlxxx when mochitests for this are created, point to those instead and update this example -nickolay <div id="status"></div> <div id="log"></div> <p>this is a test</p> here's the live
result notes if the api isn't implemented in the browser, you can use other signals to detect if you are offline including using service workers and responses from xmlhttprequest.
NavigatorPlugins.javaEnabled() - Web APIs
syntax
result = window.navigator.javaenabled() example if (window.navigator.javaenabled()) { // browser has java } notes the return value for this method indicates whether the preference that controls java is on or off - not whether the browser offers java support in general.
Node.compareDocumentPosition() - Web APIs
example const head = document.head; const body = document.body; if (head.comparedocumentposition(body) & node.document_position_following) { console.log('well-formed document'); } else { console.error('<head> is not before <body>'); } note: because the
result returned by comparedocumentposition() is a bitmask, the bitwise and operator must be used for meaningful
results.
Node.isSupported() - Web APIs
the node.issupported()returns a boolean flag containing the
result of a test whether the dom implementation implements a specific feature and this feature is supported by the specific node.
Node.namespaceURI - Web APIs
if (node.localname == "browser" && node.namespaceuri == "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul") { // this is a xul browser } notes this is not a computed value that is the
result of a namespace lookup based on an examination of the namespace declarations in scope.
Node.replaceChild() - Web APIs
var sp1_content = document.createtextnode("new replacement span element."); // apply that content to the new element sp1.appendchild(sp1_content); // build a reference to the existing node to be replaced var sp2 = document.getelementbyid("childspan"); var parentdiv = sp2.parentnode; // replace existing node sp2 with the new span element sp1 parentdiv.replacechild(sp1, sp2); //
result: // <div> // <span id="newspan">new replacement span element.</span> // </div> specifications specification status comment domthe definition of 'node: replacechild' in that specification.
NodeIterator.previousNode() - Web APIs
syntax node = nodeiterator.previousnode(); example var nodeiterator = document.createnodeiterator( document.body, nodefilter.show_element, { acceptnode: function(node) { return nodefilter.filter_accept; } }, false // this optional argument is not used any more ); currentnode = nodeiterator.nextnode(); // returns the next node previousnode = nodeiterator.previousnode(); // same
result, since we backtracked to the previous node specifications specification status comment domthe definition of 'nodeiterator.previousnode' in that specification.
NodeList.entries() - Web APIs
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var entry of list.entries()) { console.log(entry); }
results in: array [ 0, <p> ] array [ 1, #text "hey" ] array [ 2, <span> ] ...
NodeList.prototype.forEach() - Web APIs
; let kid1 = document.createelement("p"); let kid2 = document.createtextnode("hey"); let kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); let list = node.childnodes; list.foreach( function(currentvalue, currentindex, listobj) { console.log(currentvalue + ', ' + currentindex + ', ' + this); }, 'mythisarg' ); the above code
results in the following: [object htmlparagraphelement], 0, mythisarg [object text], 1, mythisarg [object htmlspanelement], 2, mythisarg polyfill this polyfill adds compatibility to all browsers supporting es5: if (window.nodelist && !nodelist.prototype.foreach) { nodelist.prototype.foreach = function (callback, thisarg) { thisarg = thisarg || window; for (var i = 0; i < this.len...
NodeList.keys() - Web APIs
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var key of list.keys()) { console.log(key); } the
result is: 0 1 2 ...
NodeList.values() - Web APIs
example var node = document.createelement("div"); var kid1 = document.createelement("p"); var kid2 = document.createtextnode("hey"); var kid3 = document.createelement("span"); node.appendchild(kid1); node.appendchild(kid2); node.appendchild(kid3); var list = node.childnodes; // using for..of for(var value of list.values()) { console.log(value); } the
result is: <p> #text "hey" <span> ...
OfflineAudioContext - Web APIs
in contrast with a standard audiocontext, an offlineaudiocontext doesn't render the audio to the device hardware; instead, it generates it, as fast as it can, and outputs the
result to an audiobuffer.
OrientationSensor - Web APIs
const sensor = new absoluteorientationsensor(); promise.all([navigator.permissions.query({ name: "accelerometer" }), navigator.permissions.query({ name: "magnetometer" }), navigator.permissions.query({ name: "gyroscope" })]) .then(
results => { if (
results.every(
result =>
result.state === "granted")) { sensor.start(); ...
ParentNode.replaceChildren() - Web APIs
eryselectorall('#yes option'); yesselect.replacechildren(...selectedtransferoptions, ...existingyesoptions); }); nobtn.addeventlistener('click', () => { const selectedtransferoptions = document.queryselectorall('#yes option:checked'); const existingnooptions = document.queryselectorall('#no option'); noselect.replacechildren(...selectedtransferoptions, ...existingnooptions); }); the end
result looks like this: specification specification status comment domthe definition of 'parentnode.replacechildren()' in that specification.
Path2D.addPath() - Web APIs
// create second path and add a rectangle let p2 = new path2d(); p2.rect(0, 0, 100, 75); // create transformation matrix that moves 200 points to the right let m = document.createelementns('http://www.w3.org/2000/svg', 'svg').createsvgmatrix(); m.a = 1; m.b = 0; m.c = 0; m.d = 1; m.e = 200; m.f = 0; // add second path to the first path p1.addpath(p2, m); // draw the first path ctx.fill(p1);
result specifications specification status comment html living standardthe definition of 'path2d.addpath()' in that specification.
PaymentResponse.onpayerdetailchange - Web APIs
promisestovalidate.push(validatename(payername)); oldpayername = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the
results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(
results =>
results.reduce((errors,
result), object.assign(errors,
result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the se...
PaymentResponse: payerdetailchange event - Web APIs
promisestovalidate.push(validatename(payername)); oldpayername = payername; } if (oldpayeremail !== payeremail) { promisestovalidate.push(validateemail(payeremail)); oldpayeremail = payeremail; } if (oldpayerphone !== payerphone) { promisestovalidate.push(validatephone(payerphone)); oldpayerphone = payerphone; } // as each validation promise resolves, add the
results of the // validation to the errors list const errors = await promise.all(promisestovalidate).then(
results =>
results.reduce((errors,
result), object.assign(errors,
result)) ); // if we found any errors, wait for them to be corrected if (object.getownpropertynames(errors).length) { await response.retry(errors); } else { // we have a good payment; send the data to the se...
PeriodicWave - Web APIs
you can think of it as the
result of a fourier transform, where you get frequency domain values from time domain value.
Permissions.query() - Web APIs
example navigator.permissions.query({name:'geolocation'}).then(function(
result) { if (
result.state == 'granted') { showlocalnewswithgeolocation(); } else if (
result.state == 'prompt') { showbuttontoenablelocalnews(); } // don't do anything if the permission was denied.
Permissions - Web APIs
example navigator.permissions.query({name:'geolocation'}).then(function(
result) { if (
result.state === 'granted') { showlocalnewswithgeolocation(); } else if (
result.state === 'prompt') { showbuttontoenablelocalnews(); } // don't do anything if the permission was denied.
PhotoCapabilities - Web APIs
example the following example, extracted from chrome's image capture / photo resolution sample, uses the
results from getphotocapabilities() to modify the size of an input range.
PointerEvent - Web APIs
pointerenter this event is fired when a pointing device is moved into the hit test boundaries of an element or one of its descendants, including as a
result of a pointerdown event from a device that does not support hover (see pointerdown).
Pointer Lock API - Web APIs
it something like this, for example if you wanted to request pointer lock on a canvas element: canvas.requestpointerlock = canvas.requestpointerlock || canvas.mozrequestpointerlock; canvas.requestpointerlock() if a user has exited pointer lock via the default unlock gesture, or pointer lock has not previously been entered for this document, an event generated as a
result of an engagement gesture must be received by the document before requestpointerlock will succeed.
PromiseRejectionEvent() - Web APIs
this can be anything from a numeric error code to an error domstring to an object which contains detailed information describing the situation
resulting in the promise being rejected.
PublicKeyCredentialCreationOptions.extensions - Web APIs
server */, rp: { name: "example corp", id : "login.example.com" }, user: { id: new uint8array(26), /* to be changed for each user */ name: "jdoe@example.com", displayname: "john doe", }, pubkeycredparams: [ { type: "public-key", alg: -7 } ] }; navigator.credentials.create({ publickey }) .then(function (newcredentialinfo) { // mybuffer will contain the
result of any of the processing of the extensions var mybuffer = newcredentialinfo.getclientextension
results(); // send attestation response and client extensions // to the server to proceed with the registration // of the credential }).catch(function (err) { console.error(err); }); specifications specification status comment web authentication: an...
PublicKeyCredentialCreationOptions - Web APIs
// the id for john-doe@example.com id : new uint8array(26) /* another id */ } ] } }; // create the new credential with the options above navigator.credentials.create(createcredentialoptions) .then(function (newcredentialinfo) { var attestationresponse = newcredentialinfo.response; var clientextensionsoutputs = newcredentialinfo.getclientextensions
results(); // send the response to the relying party server // it will verify the content and integrity before // creating a new credential }).catch(function (err) { // deal with any error properly console.error(err); });; specifications specification status comment web authentication: an api for accessing public key credentials level 1the definit...
PushEvent.PushEvent() - Web APIs
when the constructor is invoked, the pushevent.data property of the
resulting object will be set to a new pushmessagedata object containing bytes extracted from the eventinitdict data member.
RTCDataChannel.binaryType - Web APIs
when a binary message is received on the data channel, the
resulting message event's messageevent.data property is an object of the type specified by the binarytype.
RTCIceCandidate.protocol - Web APIs
protocol is null by default if not specified properly in the sdp, but this is an error condition and will
result in a thrown exception when you call rtcpeerconnection.addicecandidate().
RTCIceCandidatePairStats.priority - Web APIs
you can calculcate its value using the algorithm described in rfc 5245, section 5.7.2 if you need this information and can accept the risk that the
result may not be entirely accurate.
RTCIceCandidatePairStats.selected - Web APIs
function getcurrentcandidatepair(stats
results) { stats
results.foreach(report => { if (report.type === "transport") { currentpair = stats
results.get(report.selectedcandidatepairid); } }); if (!currentpair) { stats
results.foreach(report => { if (report.type === "candidate-pair" && report.selected) { currentpair = report; } }); } return currentpair; } specifications not part of any speci...
RTCIceCandidateStats.address - Web APIs
otherwise, the address is presumed to be a fully-qualified domain name, which is resolved first using an aaaa record (assuming ipv6 is available), then using an a record (if no
result is found or the device onlu supports ipv4).
RTCRtpReceiver.getStats() - Web APIs
the rtcrtpreceiver method getstats() asynchronously requests an rtcstatsreport object which provides statistics about incoming traffic on the owning rtcpeerconnection, returning a promise whose fulfillment handler will be called once the
results are available.
RTCRtpSender.getStats() - Web APIs
the rtcrtpsender method getstats() asynchronously requests an rtcstatsreport object which provides statistics about outgoing traffic on the rtcpeerconnection which owns the sender, returning a promise which is fulfilled when the
results are available.
RTCSessionDescription.toJSON() - Web APIs
syntax var jsonvalue = sd.tojson(); the
result value is a json object containing the following values: "type", containing the value of the rtcsessiondescription.type property and can be one of the following values: "offer", "answer", "pranswer" or null.
RadioNodeList.value - Web APIs
adionodelist.value; radionodelist.value = string; example html <form> <label><input type="radio" name="color" value="blue">blue</label> <label><input type="radio" name="color" value="red">red</label> </form> javascript // get the form const form = document.forms[0]; // get the form's radio buttons const radios = form.elements['color']; // choose the "red" option radios.value = 'red';
result specifications specification status comments html living standardthe definition of 'radionodelist.value' in that specification.
Range() - Web APIs
urth paragraph.</p> javascript const paragraphs = document.queryselectorall('p'); // create new range const range = new range(); // start range at second paragraph range.setstartbefore(paragraphs[1]); // end range at third paragraph range.setendafter(paragraphs[2]); // get window selection const selection = window.getselection(); // add range to window selection selection.addrange(range);
result specification specification status comment domthe definition of 'range.range()' in that specification.
Range.commonAncestorContainer - Web APIs
f (selection.type === 'range') { for (let i = 0; i < selection.rangecount; i++) { const range = selection.getrangeat(i); playanimation(range.commonancestorcontainer); } } }); function playanimation(el) { if (el.nodetype === node.text_node) { el = el.parentnode; } el.classlist.remove('highlight'); settimeout(() => { el.classlist.add('highlight'); }, 0); }
result specifications specification status comment domthe definition of 'range.commonancestorcontainer' in that specification.
Range.extractContents() - Web APIs
1 || range.commonancestorcontainer.parentnode === list1) { const documentfragment = range.extractcontents(); list2.appendchild(documentfragment); } else if (range.commonancestorcontainer === list2 || range.commonancestorcontainer.parentnode === list2) { const documentfragment = range.extractcontents(); list1.appendchild(documentfragment); } } });
result specifications specification status comment domthe definition of 'range.extractcontents()' in that specification.
Range.getBoundingClientRect() - Web APIs
getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); const clientrect = range.getboundingclientrect(); const highlight = document.getelementbyid('highlight'); highlight.style.left = `${clientrect.x}px`; highlight.style.top = `${clientrect.y}px`; highlight.style.width = `${clientrect.width}px`; highlight.style.height = `${clientrect.height}px`;
result specification specification status comment css object model (cssom) view modulethe definition of 'range.getboundingclientrect()' in that specification.
Range.selectNodeContents() - Web APIs
tton.addeventlistener('click', e => { // clear any current selection const selection = window.getselection(); selection.removeallranges(); // select paragraph const range = document.createrange(); range.selectnodecontents(p); selection.addrange(range); }); deselectbutton.addeventlistener('click', e => { const selection = window.getselection(); selection.removeallranges(); });
result specifications specification status comment domthe definition of 'range.selectnodecontents()' in that specification.
Range.setEnd() - Web APIs
the range.setend() method sets the end position of a range to be located at the given offset into the specified node x.setting the end point above (higher in the document) than the start point will
result in a collapsed range with the start and end points both set to the specified end position.
Range.surroundContents() - Web APIs
example html <span class="header-text">put this in a headline</span> javascript const range = document.createrange(); const newparent = document.createelement('h1'); range.selectnode(document.queryselector('.header-text')); range.surroundcontents(newparent);
result specifications specification status comment domthe definition of 'range.surroundcontents()' in that specification.
Range.toString() - Web APIs
look at the output below.</p> <p id="log"></p> javascript const range = document.createrange(); range.setstartbefore(document.getelementsbytagname('b').item(0), 0); range.setendafter(document.getelementsbytagname('b').item(1), 0); document.getelementbyid('log').textcontent = range.tostring();
result specifications specification status comment domthe definition of 'range.tostring()' in that specification.
Range - Web APIs
range.getclientrects() returns a list of domrect objects that aggregates the
results of element.getclientrects() for all the elements in the range.
ReadableStream - Web APIs
readablestream.tee() the tee method tees this readable stream, returning a two-element array containing the two
resulting branches as new readablestream instances.
RelativeOrientationSensor - Web APIs
const sensor = new relativeorientationsensor(); promise.all([navigator.permissions.query({ name: "accelerometer" }), navigator.permissions.query({ name: "gyroscope" })]) .then(
results => { if (
results.every(
result =>
result.state === "granted")) { sensor.start(); ...
Request - Web APIs
you can create a new request object using the request() constructor, but you are more likely to encounter a request object being returned as the
result of another api operation, such as a service worker fetchevent.request.
Resize Observer API - Web APIs
such a solution tends to only work for limited use cases, be bad for performance (continually calling the above methods would
result in a big performance hit), and often won't work when the browser window size is not changed.
Response.redirected - Web APIs
the read-only redirected property of the response interface indicates whether or not the response is the
result of a request you made which was redirected.
SVGEllipseElement - Web APIs
"> <ellipse cx="100" cy="100" rx="100" ry="60" id="ellipse" onclick="outputsize();"/> </svg> javascript content function outputsize() { var ellipse = document.getelementbyid("ellipse"); // outputs "horizontal radius: 100 vertical radius: 60" console.log( 'horizontal radius: ' + ellipse.rx.baseval.valueasstring, 'vertical radius: ' + ellipse.ry.baseval.valueasstring ) }
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svgellipseelement' in that specification.
SVGGeometryElement.isPointInFill() - Web APIs
troke="black" stroke-width="10"/> <circle cx="10" cy="10" r="5" fill="seagreen"/> <circle cx="40" cy="30" r="5" fill="seagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinfill(new dompoint(10, 10))); // point in circle console.log('point at 40,30:', circle.ispointinfill(new dompoint(40, 30)));
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinfill()' in that specification.
SVGGeometryElement.isPointInStroke() - Web APIs
eagreen"/> </svg> javascript var circle = document.getelementbyid('circle'); // point not in circle console.log('point at 10,10:', circle.ispointinstroke(new dompoint(10, 10))); // point in circle but not stroke console.log('point at 40,30:', circle.ispointinstroke(new dompoint(40, 30))); // point in circle stroke console.log('point at 83,17:', circle.ispointinstroke(new dompoint(83, 17)));
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'svggeometryelement.ispointinstroke()' in that specification.
SVGGraphicsElement: copy event - Web APIs
/1999/xhtml" placeholder="paste it here"/> </foreignobject> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementsbytagname("text")[0].addeventlistener("copy", evt => { evt.clipboarddata.setdata('text/plain', document.getselection().tostring().touppercase()); evt.preventdefault(); });
result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGGraphicsElement: paste event - Web APIs
="30" id="element-to-paste-text" tabindex="1">paste it here</text> </svg> css input { font-size: 10px; width: 100%; height: 90%; box-sizing: border-box; border: 1px solid black; } javascript document.getelementbyid("element-to-paste-text").addeventlistener("paste", evt => { evt.target.textcontent = evt.clipboarddata.getdata("text/plain").touppercase(); evt.preventdefault(); });
result specifications specification status comment scalable vector graphics (svg) 2 candidate recommendation definition that the clipboard events apply to svg elements.
SVGNumber - Web APIs
an svgnumber object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
SVGPathSegList - Web APIs
methods clear() void clears all existing current items from the list, with the
result being an empty list.
SVGPreserveAspectRatio - Web APIs
an svgpreserveaspectratio object can be designated as read only, which means that attempts to modify the object will
result in an exception being thrown.
Screen.availHeight - Web APIs
that code handles resizing the window based on the available space: window.outerheight = window.screen.availheight; the
result is something similar to the below.
ScriptProcessorNode.bufferSize - Web APIs
for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that
result to be the output sample in each case.
ScriptProcessorNode.onaudioprocess - Web APIs
for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that
result to be the output sample in each case.
ScriptProcessorNode - Web APIs
for each channel and each sample frame, the scriptnode.onaudioprocess function takes the associated audioprocessingevent and uses it to loop through each channel of the input buffer, and each sample in each channel, and add a small amount of white noise, before setting that
result to be the output sample in each case.
Selection.addRange() - Web APIs
ryselector('button'); button.addeventlistener('click', function () { let selection = window.getselection(); let strongs = document.getelementsbytagname('strong'); if (selection.rangecount > 0) { selection.removeallranges(); } for (let i = 0; i < strongs.length; i++) { let range = document.createrange(); range.selectnode(strongs[i]); selection.addrange(range); } });
result specifications specification status comment selection apithe definition of 'selection.addrange()' in that specification.
Selection.containsNode() - Web APIs
>secret</span> could it be?</p> <p id="win" hidden>you found it!</p> javascript const secret = document.getelementbyid('secret'); const win = document.getelementbyid('win'); // listen for selection changes document.addeventlistener('selectionchange', () => { const selection = window.getselection(); const found = selection.containsnode(secret); win.toggleattribute('hidden', !found); });
result specifications specification status comment selection apithe definition of 'selection.containsnode()' in that specification.
Selection.deleteFromDocument() - Web APIs
once you do, you can remove the selected content by clicking the button below.</p> <button>delete selected text</button> javascript let button = document.queryselector('button'); button.addeventlistener('click', deleteselection); function deleteselection() { let selection = window.getselection(); selection.deletefromdocument(); }
result specifications specification status comment selection apithe definition of 'selection.deletefromdocument()' in that specification.
Selection.modify() - Web APIs
ary</option> <option value="documentboundary">document boundary</option> </select> <br><br> <button>extend selection</button> javascript let select = document.queryselector('select'); let button = document.queryselector('button'); button.addeventlistener('click', modify); function modify() { let selection = window.getselection(); selection.modify('extend', 'forward', select.value); }
result specifications this method is not part of any specification.
Selection.rangeCount - Web APIs
html <table> <tr><td>a.1<td>a.2 <tr><td>b.1<td>b.2 <tr><td>c.1<td>c.2 javascript window.setinterval(function () { console.log(window.getselection().rangecount); }, 1000);
result open your console to see how many ranges are in the selection.
Selection.selectAllChildren() - Web APIs
<button>select footer</button> <p>welcome to my website.</p> <p>i hope you enjoy your visit.</p> </main> <footer> <address>webmaster@example.com</address> <p>© 2019</p> </footer> javascript const button = document.queryselector('button'); const footer = document.queryselector('footer'); button.addeventlistener('click', (e) => { window.getselection().selectallchildren(footer); });
result specifications specification status comment selection apithe definition of 'selection.selectallchildren()' in that specification.
Sensor APIs - Web APIs
navigator.permissions.query({ name: 'accelerometer' }) .then(
result => { if (
result.state === 'denied') { console.log('permission to use accelerometer sensor is denied.'); return; } // use the sensor.
ServiceWorkerRegistration.showNotification() - Web APIs
examples navigator.serviceworker.register('sw.js'); function shownotification() { notification.requestpermission(function(
result) { if (
result === 'granted') { navigator.serviceworker.ready.then(function(registration) { registration.shownotification('vibration sample', { body: 'buzz!
Service Worker API - Web APIs
it contains information about the request and
resulting response, and provides the fetchevent.respondwith() method, which allows us to provide an arbitrary response back to the controlled page.
SharedWorker() - Web APIs
age of the object: var myworker = new sharedworker('worker.js'); myworker.port.start(); first.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } second.onchange = function() { myworker.port.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.port.onmessage = function(e) {
result1.textcontent = e.data; console.log('message received from worker'); } for a full example, see our basic shared worker example (run shared worker.) specifications specification status comment html living standardthe definition of 'sharedworker()' in that specification.
SharedWorkerGlobalScope.onconnect - Web APIs
onconnect = function(e) { var port = e.ports[0]; port.onmessage = function(e) { var worker
result = '
result: ' + (e.data[0] * e.data[1]); port.postmessage(worker
result); } port.start(); } for a complete running example, see our basic shared worker example (run shared worker.) note: the data property of the event object used to be null in firefox.
SpeechRecognition() - Web APIs
plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interim
results = false; recognition.maxalternatives = 1; ...
SpeechRecognition.abort() - Web APIs
the abort() method of the web speech api stops the speech recognition service from listening to incoming audio, and doesn't attempt to return a speechrecognition
result.
SpeechRecognition.grammars - Web APIs
plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interim
results = false; recognition.maxalternatives = 1; ...
SpeechRecognition.lang - Web APIs
plum | purple | red | salmon | sienna | silver | snow | tan | teal | thistle | tomato | turquoise | violet | white | yellow ;' var recognition = new speechrecognition(); var speechrecognitionlist = new speechgrammarlist(); speechrecognitionlist.addfromstring(grammar, 1); recognition.grammars = speechrecognitionlist; //recognition.continuous = false; recognition.lang = 'en-us'; recognition.interim
results = false; recognition.maxalternatives = 1; ...
SpeechRecognition.onnomatch - Web APIs
the onnomatch property of the speechrecognition interface represents an event handler that will run when the speech recognition service returns a final
result with no significant recognition (when the nomatch event fires.) this may involve some degree of recognition, which doesn't meet or exceed the confidence threshold.
SpeechRecognition.stop() - Web APIs
the stop() method of the web speech api stops the speech recognition service from listening to incoming audio, and attempts to return a speechrecognition
result using the audio captured so far.
SpeechRecognitionEvent.interpretation - Web APIs
examples recognition.on
result = function(event) { var color = event.
results[0][0].transcript; diagnostic.textcontent = '
result received: ' + color + '.'; bg.style.backgroundcolor = color; console.log(event.interpretation); } ...
StaticRange - Web APIs
staticrange.collapsed read only returns a boolean value which is true if the range's start and end positions are the same,
resulting in a range of length 0.
StorageEstimate.quota - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); });
result specifications specification status comment storagethe definition of 'quota' in that specification.
StorageEstimate.usage - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); });
result specifications specification status comment storagethe definition of 'usage' in that specification.
StorageManager.estimate() - Web APIs
</label> javascript content navigator.storage.estimate().then(function(estimate) { document.getelementbyid("percent").value = (estimate.usage / estimate.quota * 100).tofixed(2); });
result specifications specification status comment storagethe definition of 'estimate()' in that specification.
Using the Storage Access API - Web APIs
if that call returns false, we can then call document.requeststorageaccess(), returning the
result so that then we can chain it onto the previous promise call.
Streams API concepts - Web APIs
if the value falls to zero (or below in the case of writable streams), it means that chunks are being generated faster than the stream can cope with, which
results in problems.
Streams API - Web APIs
simple tee example: this example extends the simple random stream example, showing how a stream can be teed and both
resulting streams can be read independently.
SubtleCrypto.sign() - Web APIs
it's different from rsassa-pkcs1-v1_5 in that it incorporates a random salt in the signature operation, so the same message signed with the same key will not
result in the same signature each time.
Text.splitText() - Web APIs
r('p'); // get contents of <p> as a text node const foobar = p.firstchild; // split 'foobar' into two text nodes, 'foo' and 'bar', // and save 'bar' as a const const bar = foobar.splittext(3); // create a <u> element containing ' new content ' const u = document.createelement('u'); u.appendchild(document.createtextnode(' new content ')); // add <u> before 'bar' p.insertbefore(u, bar); // the
result is: <p>foo<u> new content </u>bar</p>
result specifications specification status comment domthe definition of 'text.splittext' in that specification.
TextDecoder.prototype.decode() - Web APIs
lue"></span></p> <p>decoded value: <span id="decoded-value"></span></p> javascript const encoder = new textencoder(); const array = encoder.encode('€'); // uint8array(3) [226, 130, 172] document.getelementbyid('encoded-value').textcontent = array; const decoder = new textdecoder(); const str = decoder.decode(array); // string "€" document.getelementbyid('decoded-value').textcontent = str;
result specifications specification status comment encodingthe definition of 'textdecoder.decode()' in that specification.
TextEncoder.prototype.encode() - Web APIs
examples <p class="source">this is a sample paragraph.</p> <p class="
result">encoded
result: </p> const sourcepara = document.queryselector('.source'); const
resultpara = document.queryselector('.
result'); const string = sourcepara.textcontent; const textencoder = new textencoder(); let encoded = textencoder.encode(string);
resultpara.textcontent += encoded; specifications specification status comment encodingthe definition of 'textencoder.
TextEncoder - Web APIs
textencoder.prototype.encodeinto() takes a usvstring to encode and a destination uint8array to put
resulting utf-8 encoded text into, and returns a dictionary object indicating the progress of the encoding.
TextMetrics - Web APIs
let text = 'abcdefghijklmnop (' + baseline + ')'; let textmetrics = ctx.measuretext(text); let y = 50 + index * 50; ctx.beginpath(); ctx.filltext(text, 0, y); let liney = y - math.abs(textmetrics[baseline]); if (baselinesbelowalphabetic.includes(baseline)) { liney = y + math.abs(textmetrics[baseline]); } ctx.moveto(0, liney); ctx.lineto(550, liney); ctx.stroke(); });
result measuring text width when measuring the x-direction of a piece of text, the sum of actualboundingboxleft and actualboundingboxright can be wider than the width of the inline box (width), due to slanted/italic fonts where characters overhang their advance width.
Supporting both TouchEvent and MouseEvent - Web APIs
ordering of touch and mouse events is implementation-defined, the standard indicates the following order is typical: for single input: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend mousemove mousedown mouseup click if the touchstart, touchmove or touchend event is canceled during an interaction, no mouse or click events will be fired, and the
resulting sequence of events would just be: touchstart zero or more touchmove events, depending on movement of the finger(s) touchend community touch events community group mail list w3c #touchevents irc channel related topics and resources touch events overview using touch events touch and mouse (together again for the first time) ...
URL() - Web APIs
if the given base url or the
resulting url are not valid urls, the javascript typeerror exception is thrown.
URLSearchParams.entries() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the key/value pairs for(var pair of searchparams.entries()) { console.log(pair[0]+ ', '+ pair[1]); } the
result is: key1, value1 key2, value2 specifications specification status comment urlthe definition of 'entries() (see "iterable")' in that specification.
URLSearchParams.forEach() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // log the values searchparams.foreach(function(value, key) { console.log(value, key); }); the
result is: value1 key1 value2 key2 specifications specification status comment urlthe definition of 'foreach() (see "iterable")' in that specification.
URLSearchParams.keys() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the keys for(var key of searchparams.keys()) { console.log(key); } the
result is: key1 key2 specifications specification status comment urlthe definition of 'keys() (see "iterable")' in that specification.
URLSearchParams.sort() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("c=4&a=2&b=3&a=1"); // sort the key/value pairs searchparams.sort(); // display the sorted query string console.log(searchparams.tostring()); the
result is: a=2&a=1&b=3&c=4 specifications specification status comment urlthe definition of 'sort()' in that specification.
URLSearchParams.values() - Web APIs
examples // create a test urlsearchparams object var searchparams = new urlsearchparams("key1=value1&key2=value2"); // display the values for(var value of searchparams.values()) { console.log(value); } the
result is: value1 value2 specifications specification status comment urlthe definition of 'values() (see "iterable")' in that specification.
URLUtilsReadOnly.hash - Web APIs
syntax string = object.hash; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.hash#example var
result = window.self.hash; // returns:'#hash' specifications specification status comment urlthe definition of 'urlutilsreadonly.hash' in that specification.
URLUtilsReadOnly.host - Web APIs
syntax string = object.host; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.host var
result = window.self.host; // returns:'developer.mozilla.org:80' specifications specification status comment urlthe definition of 'urlutilsreadonly.host' in that specification.
URLUtilsReadOnly.hostname - Web APIs
syntax string = object.hostname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.hostname var
result = window.self.hostname; // returns:'developer.mozilla.org' specifications specification status comment urlthe definition of 'urlutilsreadonly.hostname' in that specification.
URLUtilsReadOnly.href - Web APIs
syntax string = object.href; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var
result = window.self.href; // returns:'https://developer.mozilla.org/urlutilsreadonly.href' specifications specification status comment urlthe definition of 'urlutilsreadonly.href' in that specification.
URLUtilsReadOnly.origin - Web APIs
syntax string = object.origin; examples // on this page, returns the origin var
result = self.location.origin; // returns:'https://developer.mozilla.org:443' specifications specification status comment urlthe definition of 'urlutilsreadonly.origin' in that specification.
URLUtilsReadOnly.pathname - Web APIs
syntax string = object.pathname; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.pathname var
result = window.self.pathname; // returns:'/urlutilsreadonly.pathname' specifications specification status comment urlthe definition of 'urlutilsreadonly.pathname' in that specification.
URLUtilsReadOnly.port - Web APIs
syntax string = object.port; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.port var
result = window.self.port; // returns:'80' specifications specification status comment urlthe definition of 'urlutilsreadonly.port' in that specification.
URLUtilsReadOnly.protocol - Web APIs
syntax string = object.protocol; examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var
result = window.self.protocol; // returns:'https:' specifications specification status comment urlthe definition of 'urlutilsreadonly.protocol' in that specification.
URLUtilsReadOnly.search - Web APIs
syntax string = object.search; examples // in a web worker, on the page https://developer.mozilla.org/docs/urlutilsreadonly.href?t=67 var
result = window.self.search; // returns:'?t=67' specifications specification status comment urlthe definition of 'urlutilsreadonly.search' in that specification.
URLUtilsReadOnly.toString() - Web APIs
syntax string = object.tostring(); examples // in a web worker, on the page https://developer.mozilla.org/urlutilsreadonly.href var
result = window.self.tostring(); // returns:'https://developer.mozilla.org/urlutilsreadonly.href' browser compatibility the compatibility table in this page is generated from structured data.
VTTCue - Web APIs
ent.queryselector('video'); video.addeventlistener('loadedmetadata', () => { const track = video.addtexttrack("captions", "简体中文subtitles", "zh_cn"); track.mode = "showing"; const cuecn = new vttcue(0, 2.500, '字幕会在0至2.5秒间显示'); track.addcue(cuecn); const cueen = new vttcue(2.6, 4, 'subtitles will display between 2.6 and 4 seconds'); track.addcue(cueen); });
result chrome: please open in jsfiddle to view the live sample.
VideoTrack.label - Web APIs
function gettracklist(el) { var tracklist = []; const wantedkinds = [ "main", "alternative", "commentary" ]; el.videotracks.foreach(function(track) { if (wantedkinds.includes(track.kind)) { tracklist.push({ id: track.id, kind: track.kind, label: track.label }); } }); return tracklist; } the
resulting tracklist contains an array of video tracks whose kind is one of those in the array wantedkinds, with each entry providing the track's id, kind, and label.
VisualViewport - Web APIs
offsetleft + 'px,' + offsettop + 'px) ' + 'scale(' + 1/viewport.scale + ')' } window.visualviewport.addeventlistener('scroll', viewporthandler); window.visualviewport.addeventlistener('resize', viewporthandler); note: this technique should be used with care; emulating position: device-fixed in this way can
result in the fixed element flickering during scrolling.
WebGLRenderingContext.getUniformLocation() - Web APIs
ram, "uglobalcolor"); urotationvector = gl.getuniformlocation(shaderprogram, "urotationvector") gl.uniform2fv(uscalingfactor, currentscale); gl.uniform2fv(urotationvector, currentrotation); gl.uniform4fv(uglobalcolor, [0.1, 0.7, 0.2, 1.0]); this code snippet is taken from the function animatescene() in "a basic 2d webgl animation example." see that article for the full sample and to see the
resulting animation in action.
Basic scissoring - Web APIs
<p>
result of of scissoring.</p> <canvas>your browser does not seem to support html5 canvas.</canvas> body { text-align : center; } canvas { display : block; width : 280px; height : 210px; margin : auto; padding : 0; border : none; background-color : black; } window.addeventlistener("load", function setupwebgl (evt) { "use strict" window.removeeventlistener(evt.type, setupwebgl, ...
Migrating from webkitAudioContext - Web APIs
context.createoscillator(); osc.start(1); osc.stop(1.5); var src = context.createbuffersource(); src.start(1, 0.25); src.stop(2); remove synchronous buffer creation in the old webkit implementation of web audio, there were two versions of createbuffer(), one which created an initially empty buffer, and one which took an existing arraybuffer containing encoded audio, decoded it and returned the
result in the form of an audiobuffer.
Visualizations with Web Audio API - Web APIs
draw(); this code gives us a
result like the following: note: the examples listed in this article have shown usage of analysernode.getbytefrequencydata() and analysernode.getbytetimedomaindata().
Web Locks API - Web APIs
the
results are a snapshot of the lock manager state, which identifies held and requested locks and some additional data (e.g.
Functions and classes available to Web Workers - Web APIs
48 (48) (yes) (yes) (yes) domrequest and domcursor respectively, these objects represents an ongoing operation (with listeners for reacting to the operation completely successfully, or failing, for example), and an ongoing operation over a list of
results.
Window: blur event - Web APIs
click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play);
result specifications specification status comment ui events working draft added info that this event is composed.
Window.confirm() - Web APIs
syntax
result = window.confirm(message); parameters message a string you want to display in the alert dialog.
Window.crypto - Web APIs
w uint32array(10); window.crypto.getrandomvalues(array); var randtext = document.getelementbyid("myrandtext"); randtext.innerhtml = "the random numbers are: " for (var i = 0; i < array.length; i++) { randtext.innerhtml += array[i] + " "; } } html <p id="myrandtext">the random numbers are: </p> <button type="button" onclick='genrandomnumbers()'>generate 10 random numbers</button>
result specifications specification status comment web cryptography apithe definition of 'window.crypto' in that specification.
Window: error event - Web APIs
0; height: 0; } js const log = document.queryselector('.event-log-contents'); window.addeventlistener('error', (event) => { log.textcontent = log.textcontent + `${event.type}: ${event.message}\n`; console.log(event) }); const scripterror = document.queryselector('#script-error'); scripterror.addeventlistener('click', () => { const badcode = 'const s;'; eval(badcode); });
result specifications specification status ui events working draft ...
Window.find() - Web APIs
" + window.find(text)); } html <p>apples, bananas, and oranges.</p> <button type="button" onclick='findstring("apples")'>search for apples</button> <button type="button" onclick='findstring("banana")'>search for banana</button> <button type="button" onclick='findstring("orange")'>search for orange</button>
result notes in some browsers, window.find() selects (highlights) the found content on the site.
Window: focus event - Web APIs
click outside the document to lose focus.'; } const log = document.getelementbyid('log'); window.addeventlistener('blur', pause); window.addeventlistener('focus', play);
result specifications specification status comment ui events working draft added info that this event is composed.
Window.getDefaultComputedStyle() - Web APIs
<style> h3:after { content: ' rocks!'; } </style> <h3>generated content</h3> <script> var h3 = document.queryselector('h3'),
result = getdefaultcomputedstyle(h3, ':after').content; console.log('the generated content is: ',
result); // returns 'none' </script> notes the returned value is, in certain known cases, expressly incorrect by deliberate intent.
Window.getSelection() - Web APIs
however, attempting to use a javascript string property or method such as length or substr directly on a selection object will
result in an error if it does not have that property or method and may return unexpected
results if it does.
Window: load event - Web APIs
load(true); }, 200); }); window.addeventlistener('load', (event) => { log.textcontent = log.textcontent + 'load\n'; }); document.addeventlistener('readystatechange', (event) => { log.textcontent = log.textcontent + `readystate: ${document.readystate}\n`; }); document.addeventlistener('domcontentloaded', (event) => { log.textcontent = log.textcontent + `domcontentloaded\n`; });
result specifications specification status comment ui eventsthe definition of 'load' in that specification.
Window: pageshow event - Web APIs
try loading new pages into this tab, then navigating forward and backward through history, noting the events’ output to the log.</p>
results specifications specification status comment html living standardthe definition of 'pageshow' in that specification.
Window.scrollMaxX - Web APIs
example // scroll to right edge of the page let maxx = window.scrollmaxx; window.scrollto(maxx, 0); notes do not use this property to get the total document width, which is not equivalent to window.innerwidth + window.scrollmaxx, because window.innerwidth includes the width of any visible vertical scrollbar, thus the
result would exceed the total document width by the width of any visible vertical scrollbar.
Window.scrollMaxY - Web APIs
example // scroll to the bottom of the page let maxy = window.scrollmaxy; window.scrollto(0, maxy); notes do not use this property to get the total document height, which is not equivalent to window.innerheight + window.scrollmaxy, because window.innerheight includes the width of any visible horizontal scrollbar, thus the
result would exceed the total document height by the width of any visible horizontal scrollbar.
Window.sessionStorage - Web APIs
track let field = document.getelementbyid("field"); // see if we have an autosave value // (this will only happen if the page is accidentally refreshed) if (sessionstorage.getitem("autosave")) { // restore the contents of the text field field.value = sessionstorage.getitem("autosave"); } // listen for changes in the text field field.addeventlistener("change", function() { // and save the
results into the session storage object sessionstorage.setitem("autosave", field.value); }); note: please refer to the using the web storage api article for a full example.
Window: unhandledrejection event - Web APIs
bubbles no cancelable yes interface promiserejectionevent event handler property onunhandledrejection usage notes allowing the unhandledrejection event to bubble will eventually
result in an error message being output to the console.
WindowOrWorkerGlobalScope.indexedDB - Web APIs
example the following code creates a request for a database to be opened asychronously, after which the database is opened when the request's onsuccess handler is fired: var db; function opendb() { var dbopenrequest = window.indexeddb.open('todolist'); dbopenrequest.onsuccess = function(e) { db = dbopenrequest.
result; } } specifications specification status comment indexed database api draftthe definition of 'indexeddb' in that specification.
Worker.onmessage - Web APIs
var myworker = new worker('worker.js'); first.onchange = function() { myworker.postmessage([first.value,second.value]); console.log('message posted to worker'); } myworker.onmessage = function(e) {
result.textcontent = e.data; console.log('message received from worker'); } in the worker.js script, an onmessage handler is used to the handle messages from the main script: onmessage = function(e) { console.log('message received from main script'); var worker
result = '
result: ' + (e.data[0] * e.data[1]); console.log('posting message back to main script'); postmessage(worker
result); } not...
WorkerGlobalScope.location - Web APIs
note: firefox has a bug with using console.log inside shared/service workers (see bug 1058644), which may return strange
results, but this should be fixed soon.
WorkerGlobalScope.performance - Web APIs
note: firefox has a bug with using console.log inside shared/service workers (see bug 1058644), which may return strange
results, but this should be fixed soon.
WorkerNavigator.permissions - Web APIs
examples self.navigator.permissions.query({name:'notifications'}).then(function(
result) { if (
result.state === 'granted') { shownotification(); } else if (
result.state === 'prompt') { requestnotificationpermission() } }); specification specification status comment permissions working draft initial definition.
XMLHttpRequest: abort event - Web APIs
end(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); });
result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: error event - Web APIs
end(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); });
result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: load event - Web APIs
end(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); });
result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadend event - Web APIs
end(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); });
result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: loadstart event - Web APIs
end(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); });
result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest: progress event - Web APIs
end(); return xhr; } xhrbuttonsuccess.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg'); }); xhrbuttonerror.addeventlistener('click', () => { runxhr('https://somewhere.org/i-dont-exist'); }); xhrbuttonabort.addeventlistener('click', () => { runxhr('https://mdn.mozillademos.org/files/16553/dgszyjnxcaipwzy.jpg').abort(); });
result specifications specification status comment xmlhttprequest living standard ...
XMLHttpRequest.responseText - Web APIs
syntax var
resulttext = xmlhttprequest.responsetext; value a domstring which contains either the textual data received using the xmlhttprequest or null if the request failed or "" if the request has not yet been sent by calling send().
XMLHttpRequest.send() - Web APIs
if the request is asynchronous (which is the default), this method returns as soon as the request is sent and the
result is delivered using events.
XPathEvaluator.createExpression() - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression("//div"); var
result = expression.evaluate(document, xpath
result.ordered_node_snapshot_type); document.queryselector("output").textcontent =
result.snapshotlength;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathevaluator.createexpression()' in that specification.
XPathExpression - Web APIs
html <div>xpath example</div> <div>number of <div>s: <output></output></div> javascript var xpath = "//div"; var evaluator = new xpathevaluator(); var expression = evaluator.createexpression(xpath); var
result = expression.evaluate(document, xpath
result.ordered_node_snapshot_type); document.queryselector("output").textcontent =
result.snapshotlength;
result specifications specification status comment document object model (dom) level 3 xpath specificationthe definition of 'xpathexpression' in that specification.
XRRigidTransform.inverse - Web APIs
applying the inverse of a transform to any object previously transformed by the parent xrrigidtransform always undoes the transformation,
resulting in the object returning to its previous pose.
XRRigidTransform.matrix - Web APIs
next, the position is placed into the right-hand column, like this,
resulting in a translation matrix that will transform a coordinate system by the specified distance in each dimension, with no rotational change.
XRView.eye - Web APIs
if the
result is false, indicating that the eye is now healthy, we render the scene for that eye.
XRView.transform - Web APIs
the
resulting model view matrix will apply all the transforms needed to move and rotate the object based on the relative positions of the object and the camera.
XRWebGLLayer() - Web APIs
the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would
result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.
XRWebGLLayerInit.ignoreDepthValues - Web APIs
ignoring depth values causes the compositor to rely solely upon the relative position of objects to establish depth, and may
result in less effective and less comfortable 3d effects.
XRWebGLLayerInit - Web APIs
the static xrwebgllayer function xrwebgllayer.getnativeframebufferscalefactor() returns the scale that would
result in a 1:1 pixel ratio, thereby ensuring that the rendering is occurring at the device's native resolution.
ARIA live regions - Accessibility
using javascript, it is possible to dynamically change parts of a page without requiring the entire page to reload — for instance, to update a list of search
results on the fly, or to display a discreet alert or notification which does not require user interaction.
Using the alert role - Accessibility
let myalert = document.createelement("p"); myalert.setattribute("role", "alert"); let myalerttext = document.createtextnode("you must agree with our terms of service to create an account."); myalert.appendchild(myalerttext); document.body.appendchild(myalert); note: the same
result can be achieved with less code when using a script library like jquery: $("<p role='alert'>you must agree with our terms of service to create an account.</p>").appendto(document.body); example 3: adding alert role to an existing element sometimes it's useful to add an alert role to an element that is already visible on the page rather than creating a new element.
Using the link role - Accessibility
e.target : e.srcelement; if (ref) { window.open(ref.getattribute('data-href'), '_blank'); } } } spanelem.addeventlistener('click', navigatelink); spanelem.addeventlistener('keydown', navigatelink);
result notes if pressing the link triggers an action but does not change browser focus or navigate to a new page, you might wish to consider using the button role instead of the link role.
ARIA: switch role - Accessibility
result the
result looks like this: specifications specification status comment accessible rich internet applications (wai-aria) 1.1 recommendation defines aria in general along with all roles, properties, and so forth.
ARIA: button role - Accessibility
on togglebutton(element) { var audio = document.getelementbyid('audio'); // check to see if the button is pressed var pressed = (element.getattribute("aria-pressed") === "true"); // change aria-pressed to the opposite state element.setattribute("aria-pressed", !pressed); // toggle the play state of the audio file if(pressed) { audio.pause(); } else { audio.play(); } }
result accessibility concerns buttons are interactive controls and thus focusable.
ARIA: heading role - Accessibility
although theoretically you can go higher, and some screen readers may support it, the
results can be unpredictable with other browser/screen reader combinations.
Basic form hints - Accessibility
the second part of the example, a snippet of javascript validates the email format, and sets the aria-invalid attribute of the email field (line 12 of the html) according to the
result (in addition to changing the presentation of the element).
Architecture - Accessibility
in firefox, the
results of getendindex will always be the startindex + 1, because links are always just represented by a single embedded object character (c) to get the next char fom a given offset in an accessible text: if current char is 0 (end of string), then we are on a hard line break: get next node (typical depth first search), and set the current offset = 0 iatext::ch = getcharacteratoffset(++offset); i...
Accessibility Information for Web Authors - Accessibility
the output data report is displayed in a clear and well structured table where each and all checkpoints are identified and described (along with an helpful clickable link to the related reference guideline) into logical groups and according to measurable
results: passed, warning, failed for automated verification, warning for manual verification, not selected, not available, not related, etc.
Text labels and names - Accessibility
without the legend, they would have to navigate around the individual form controls in the group to infer an idea of the overall purpose, which could
result in confusion.
Custom properties (--*): CSS variables - CSS: Cascading Style Sheets
</p> </div> css :root { --first-color: #488cff; --second-color: #ffff8c; } #firstparagraph { background-color: var(--first-color); color: var(--second-color); } #secondparagraph { background-color: var(--second-color); color: var(--first-color); } #container { --first-color: #48ff32; } #thirdparagraph { background-color: var(--first-color); color: var(--second-color); }
result specifications specification status comment css custom properties for cascading variables module level 1the definition of '--*' in that specification.
-moz-float-edge - CSS: Cascading Style Sheets
elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax border-box | content-box | margin-box | padding-box examples html <div class="box"> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> </div> css .box { display: block; height: 5px; margin: 0.5em auto 0.5em auto; color: gray; -moz-float-edge: margin-box; box-sizing: border-box; }
result specifications not part of any standard.
-moz-force-broken-image-icon - CSS: Cascading Style Sheets
formal definition initial value0applies toimagesinheritednocomputed valueas specifiedanimation typediscrete formal syntax <integer> examples html <img src='/broken/image/link.png' alt='broken image link'> css img { -moz-force-broken-image-icon: 1; height: 100px; width: 100px; }
result screenshotlive sample note: unless the image has a specified height and width the broken image icon will not be displayed but the alt attribute will also be hidden if -moz-force-broken-image-icon is set to 1.
-moz-orient - CSS: Cascading Style Sheets
ecifiedanimation typediscrete formal syntax inline | block | horizontal | vertical examples html <p> the following progress meter is horizontal (the default): </p> <progress max="100" value="75"></progress> <p> the following progress meter is vertical: </p> <progress class="vert" max="100" value="75"></progress> css .vert { -moz-orient: vertical; width: 16px; height: 150px; }
result specifications not part of any standard.
-moz-outline-radius-bottomright - CSS: Cascading Style Sheets
ercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's bottom-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-bottomright: 2em; }
result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius-topright - CSS: Cascading Style Sheets
tednopercentagesrefer to the corresponding dimension of the border boxcomputed valueas specifiedanimation typea length, percentage or calc(); formal syntax <outline-radius>where <outline-radius> = <length> | <percentage> examples html <p>look at this paragraph's top-right corner.</p> css p { margin: 5px; border: solid cyan; outline: dotted red; -moz-outline-radius-topright: 2em; }
result the example above will not display the desired effect if you are viewing this in a browser other than firefox.
-moz-outline-radius - CSS: Cascading Style Sheets
html <p>this element has a rounded outline!</p> css p { margin: 5px; border: 1px solid black; outline: dotted red; -moz-outline-radius: 12% 1em 25px; }
result notes dotted or dashed radiused corners were rendered as solid until firefox 50, bug 382721 future versions of gecko/firefox may drop this property completely.
-webkit-border-before - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; -webkit-border-before: 5px dashed blue; }
result specifications not part of any standard, but it relates to the standards-track border-block-start property.
-webkit-line-clamp - CSS: Cascading Style Sheets
</p> css p { width: 300px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
result specifications specification status comment css overflow module level 3the definition of '-webkit-line-clamp' in that specification.
-webkit-overflow-scrolling - CSS: Cascading Style Sheets
</p> </div> css div { width: 100%; overflow: auto; } p { width: 200%; background: #f5f9fa; border: 2px solid #eaf2f4; padding: 10px; } .scroll-touch { -webkit-overflow-scrolling: touch; /* lets it scroll lazy */ } .scroll-auto { -webkit-overflow-scrolling: auto; /* stops scrolling immediately */ }
results specifications not part of any standard.
-webkit-text-fill-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples changing the fill color css p { margin: 0; font-size: 3em; -webkit-text-fill-color: green; } html <p>this text is green.</p>
results specifications specification status comment compatibility standardthe definition of '-webkit-text-fill-color' in that specification.
-webkit-text-stroke-color - CSS: Cascading Style Sheets
p> <input type="color" value="#ff0000"> css p { margin: 0; font-size: 4em; -webkit-text-stroke-width: 3px; -webkit-text-stroke-color: #ff0000; /* can be changed in the live sample */ } javascript var colorpicker = document.queryselector("input"); colorpicker.addeventlistener("change", function(evt) { document.queryselector("p").style.webkittextstrokecolor = evt.target.value; });
results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-color' in that specification.
-webkit-text-stroke-width - CSS: Cascading Style Sheets
imation typediscrete formal syntax <length> examples varying stroke widths css p { margin: 0; font-size: 4em; -webkit-text-stroke-color: red; } #thin { -webkit-text-stroke-width: thin; } #medium { -webkit-text-stroke-width: 3px; } #thick { -webkit-text-stroke-width: 1.5mm; } html <p id="thin">thin stroke</p> <p id="medium">medium stroke</p> <p id="thick">thick stroke</p>
results specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke-width' in that specification.
-webkit-text-stroke - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples adding a red text stroke html <p id="example">the stroke of this text is red.</p> css #example { font-size: 3em; margin: 0; -webkit-text-stroke: 2px red; }
result specifications specification status comment compatibility standardthe definition of '-webkit-text-stroke' in that specification.
:-moz-drag-over - CSS: Cascading Style Sheets
syntax :-moz-drag-over examples html <table border="1"> <tr> <td width="100px" height="100px">drag over</td> </tr> </table> css td:-moz-drag-over { color: red; }
result specifications not part of any standard.
:-moz-focusring - CSS: Cascading Style Sheets
syntax :-moz-focusring examples html <input /> css input { margin: 5px; } :-moz-focusring { color: red; outline: 2px dotted green; }
result specifications not part of any standard.
::-moz-list-bullet - CSS: Cascading Style Sheets
syntax li::-moz-list-bullet examples html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css ::-moz-list-bullet { color: red; font-size: 1.5em; }
result specifications not part of any standard.
::-moz-list-number - CSS: Cascading Style Sheets
syntax li::-moz-list-number examples html <ol> <li>first item</li> <li>second item</li> <li>third item</li> </ol> css li::-moz-list-number { font-style: italic; font-weight: bold; }
result screenshotlive sample specifications not part of any standard.
:-moz-only-whitespace - CSS: Cascading Style Sheets
examples html <div> </div> css :root { overflow: hidden; max-width: 100vw; max-height: 100vh; } div { background-color: #ccc; box-sizing: border-box; height: 100vh; min-height: 16px; min-height: 1rem; } div { border: 4px solid red; } :-moz-only-whitespace { border-color: lime; }
result specifications briefly defined as :blank in selectors level 4, but then the functionality was merged into :empty and :blank redefined to mean empty <input>.
:-moz-window-inactive - CSS: Cascading Style Sheets
html <div id="mybox"> <p>this is a box!</p> </div> css #mybox { background: linear-gradient(to bottom, yellow, cyan); width: 200px; height: 200px; } #mybox:-moz-window-inactive { background: cyan; }
result the
result of this code is shown below.
::-moz-focus-inner - CSS: Cascading Style Sheets
it" value="input"/> <button type="submit">button</button> css button::-moz-focus-inner, input[type="color"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner { padding-block-start: 0px; padding-inline-end: 2px; padding-block-end: 0px; padding-inline-start: 2px; border: 1px dotted red; }
result specifications not part of any standard.
::-moz-progress-bar - CSS: Cascading Style Sheets
syntax ::-moz-progress-bar examples html <progress value="30" max="100">30%</progress> <progress max="100">indeterminate</progress> css ::-moz-progress-bar { background-color: red; } /* force indeterminate bars to have zero width */ :indeterminate::-moz-progress-bar { width: 0; }
result specifications not part of any standard.
::-moz-range-progress - CSS: Cascading Style Sheets
syntax ::-moz-range-progress examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-progress { background-color: green; height: 1em; }
result a progress bar using this style might look something like this: specifications not part of any standard.
::-moz-range-thumb - CSS: Cascading Style Sheets
syntax ::-moz-range-thumb examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-thumb { background-color: green; }
result a progress bar using this style might look something like this: specifications not part of any standard.
::-moz-range-track - CSS: Cascading Style Sheets
syntax ::-moz-range-track examples html <input type="range" min="0" max="100" step="5" value="50"/> css input[type=range]::-moz-range-track { background-color: green; }
result a progress bar using this style might look something like this: specifications not part of any standard.
::-webkit-meter-bar - CSS: Cascading Style Sheets
examples html <meter min="0" max="10" value="6">score out of 10</meter> css meter { /* reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-webkit-meter-bar { background: #eee; box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2) inset; border-radius: 3px; }
result ...
::-webkit-meter-inner-element - CSS: Cascading Style Sheets
html <meter min="0" max="10" value="6">score out of 10</meter> css meter { /* reset the default appearance */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } meter::-webkit-meter-inner-element { -webkit-appearance: inherit; box-sizing: inherit; border: 1px solid #aaa; }
result ...
::-webkit-meter-optimum-value - CSS: Cascading Style Sheets
html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-bar { /* required to get rid of the default background property */ background : none; background-color : whitesmoke; box-shadow : 0 5px 5px -5px #333 inset; } meter::-webkit-meter-optimum-value { box-shadow: 0 5px 5px -5px #999 inset; }
result ...
::-webkit-meter-suboptimum-value - CSS: Cascading Style Sheets
html <meter min="0" max="10" value="6">score out of 10</meter> css meter::-webkit-meter-suboptimum-value { background: -webkit-gradient linear, left top, left bottom; height: 100%; box-sizing: border-box; }
result specifications not part of any standard.
::-webkit-progress-bar - CSS: Cascading Style Sheets
syntax ::-webkit-progress-bar examples css content progress { -webkit-appearance: none; } ::-webkit-progress-bar { background-color: orange; } html content <progress value="10" max="50">
result result screenshot if you're not using a webkit or blink browser, the code above
results in a progress bar that looks like this: specifications not part of any standard.
::-webkit-progress-inner-element - CSS: Cascading Style Sheets
html <progress value="10" max="50"> css progress { -webkit-appearance: none; } ::-webkit-progress-inner-element { border: 2px solid black; }
result result screenshot if you're not using a blink or webkit browsear, the above code resuls in a progress bar looking like this: specifications not part of any standard.
::-webkit-progress-value - CSS: Cascading Style Sheets
html <progress value="10" max="50"> css progress { -webkit-appearance: none; } ::-webkit-progress-value { background-color: orange; }
result result screenshot a progress bar using the style above would look like this: specifications not part of any standard.
::backdrop - CSS: Cascading Style Sheets
video::backdrop { background-color: #448; } the
resulting screen looks like this: note the dark grey-blue letterbox effect above and below where the backdrop is visible.
::first-line (:first-line) - CSS: Cascading Style Sheets
see what i mean?</p> <span>the first line of this text will not receive special styling because it is not a block-level element.</span> css ::first-line { color: blue; text-transform: uppercase; /* warning: do not use these */ /* many properties are invalid in ::first-line pseudo-elements */ margin-left: 20px; text-indent: 20px; }
result specifications specification status comment css pseudo-elements level 4the definition of '::first-line' in that specification.
::grammar-error - CSS: Cascading Style Sheets
html <p>my friends is coming to the party tonight.</p> css ::grammar-error { text-decoration: underline red; color: red; }
result specifications specification status comment css pseudo-elements level 4the definition of '::grammar-error' in that specification.
::marker - CSS: Cascading Style Sheets
syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker { color: red; font-size: 1.5em; }
result specifications specification status comment css pseudo-elements level 4the definition of '::marker' in that specification.
::part() - CSS: Cascading Style Sheets
132, 255, 0.3); } tabbed-custom-element::part(active) { color: #0060df; border-color: #0a84ff !important; } javascript let template = document.queryselector("#tabbed-custom-element"); globalthis.customelements.define(template.id, class extends htmlelement { constructor() { super(); this.attachshadow({ mode: "open" }); this.shadowroot.appendchild(template.content); } });
result specifications specification status comment shadow partsthe definition of '::part' in that specification.
::placeholder - CSS: Cascading Style Sheets
mdn basic form hints placeholders in form fields are harmful — nielsen norman group examples red text html <input placeholder="type something here!"> css input::placeholder { color: red; font-size: 1.2em; font-style: italic; }
result green text html <input placeholder="type something here..."> css input::placeholder { color: green; }
result specifications specification status comment css pseudo-elements level 4the definition of '::placeholder' in that specification.
::selection - CSS: Cascading Style Sheets
ng text in this paragraph.</p> css ::-moz-selection { color: gold; background-color: red; } p::-moz-selection { color: white; background-color: blue; } /* make selected text gold on a red background */ ::selection { color: gold; background-color: red; } /* make selected text in a paragraph white on a blue background */ p::selection { color: white; background-color: blue; }
result accessibility concerns don't override selected text styles for purely aesthetic reasons — users can customize them to suit their needs.
::spelling-error - CSS: Cascading Style Sheets
html <p contenteditable spellcheck="true">my friends are coegdfgfddffbgning to the party tonight.</p> css ::spelling-error { text-decoration: wavy red; }
result specifications specification status comment css pseudo-elements level 4the definition of '::spelling-error' in that specification.
:active - CSS: Cascading Style Sheets
</p> css a:link { color: blue; } /* unvisited links */ a:visited { color: purple; } /* visited links */ a:hover { background: yellow; } /* hovered links */ a:active { color: red; } /* active links */ p:active { background: #eee; } /* active paragraphs */
result active form elements html <form> <label for="my-button">my button: </label> <button id="my-button" type="button">try clicking me or my label!</button> </form> css form :active { color: red; } form button { background: white; }
result specifications specification status comment html living standardthe definition of ':active' in that specification.
:any-link - CSS: Cascading Style Sheets
would be matched by :link or :visited */ :any-link { color: green; } syntax :any-link examples html <a href="https://example.com">external link</a><br> <a href="#">internal target link</a><br> <a>placeholder link (won't get styled)</a> css a:any-link { border: 1px solid blue; color: orange; } /* webkit browsers */ a:-webkit-any-link { border: 1px solid blue; color: orange; }
result specifications specification status comment selectors level 4the definition of ':any-link' in that specification.
:blank - CSS: Cascading Style Sheets
html <textarea></textarea> css textarea:blank { border: 3px solid red; }
result specifications specification status comment selectors level 4the definition of ':blank' in that specification.
:default - CSS: Cascading Style Sheets
pring">spring</label> <input type="radio" name="season" id="summer" checked> <label for="summer">summer</label> <input type="radio" name="season" id="fall"> <label for="fall">fall</label> <input type="radio" name="season" id="winter"> <label for="winter">winter</label> </fieldset> css input:default { box-shadow: 0 0 2px 1px coral; } input:default + label { color: coral; }
result specifications specification status comment html living standardthe definition of ':default' in that specification.
:dir() - CSS: Cascading Style Sheets
formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2 <div dir="auto">עִבְרִית</div> </div> </div> css :dir(ltr) { background-color: yellow; } :dir(rtl) { background-color: powderblue; }
result specifications specification status comment html living standardthe definition of ':dir(ltr)' in that specification.
:disabled - CSS: Cascading Style Sheets
listener to checkbox document.getelementbyid('billing-checkbox').onchange = togglebilling; }, false); function togglebilling() { // select the billing text fields var billingitems = document.queryselectorall('#billing input[type="text"]'); // toggle the billing text fields for (var i = 0; i < billingitems.length; i++) { billingitems[i].disabled = !billingitems[i].disabled; } }
result specifications specification status comment html living standardthe definition of ':disabled' in that specification.
:empty - CSS: Cascading Style Sheets
--></p> </div> css body { display: flex; justify-content: space-around; } .box { background: pink; height: 80px; width: 80px; } .box:empty { background: lime; }
result accessibility concerns assistive technology such as screen readers cannot parse interactive content that is empty.
:enabled - CSS: Cascading Style Sheets
rm action="url_of_form"> <label for="firstfield">first field (enabled):</label> <input type="text" id="firstfield" value="lorem"><br> <label for="secondfield">second field (disabled):</label> <input type="text" id="secondfield" value="ipsum" disabled="disabled"><br> <input type="button" value="submit"> </form> css input:enabled { color: #2b2; } input:disabled { color: #aaa; }
result specifications specification status comment html living standardthe definition of ':enabled' in that specification.
:first-child - CSS: Cascading Style Sheets
syntax :first-child examples basic example html <div> <p>this text is selected!</p> <p>this text isn't selected.</p> </div> <div> <h2>this text isn't selected: it's not a `p`.</h2> <p>this text isn't selected.</p> </div> css p:first-child { color: lime; background-color: black; padding: 5px; }
result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:first-child { color: red; font-weight: bold; }
result specifications specification status comment selectors level 4the definition of ':first...
:first - CSS: Cascading Style Sheets
syntax :first examples html <p>first page.</p> <p>second page.</p> <button>print!</button> css @page :first { margin-left: 50%; margin-top: 50%; } p { page-break-after: always; } javascript document.queryselector("button").addeventlistener('click', () => { window.print(); });
result press the "print!" button to print the example.
:focus-within - CSS: Cascading Style Sheets
html <p>try typing into this form.</p> <form> <label for="given_name">given name:</label> <input id="given_name" type="text"> <br> <label for="family_name">family name:</label> <input id="family_name" type="text"> </form> css form { border: 1px solid; color: gray; padding: 4px; } form:focus-within { background: #ff8; color: black; } input { margin: 4px; }
result specifications specification status comment selectors level 4the definition of ':focus-within' in that specification.
:focus - CSS: Cascading Style Sheets
syntax :focus examples html <input class="red-input" value="i'll be red when focused."><br> <input class="blue-input" value="i'll be blue when focused."> css .red-input:focus { background: yellow; color: red; } .blue-input:focus { background: yellow; color: blue; }
result accessibility concerns make sure the visual focus indicator can be seen by people with low vision.
:hover - CSS: Cascading Style Sheets
syntax :hover examples basic example html <a href="#">try hovering over this link.</a> css a { background-color: powderblue; transition: background-color .5s; } a:hover { background-color: gold; }
result image gallery you can use the :hover pseudo-class to build an image gallery with full-size images that show only when the mouse moves over a thumbnail.
:in-range - CSS: Cascading Style Sheets
l> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; }
result specifications specification status comment html living standardthe definition of ':in-range' in that specification.
:indeterminate - CSS: Cascading Style Sheets
e.</label> </div> css input:indeterminate + label { background: lime; } javascript var inputs = document.getelementsbytagname("input"); for (var i = 0; i < inputs.length; i++) { inputs[i].indeterminate = true; } progress bar html <progress> css progress { margin: 4px; } progress:indeterminate { opacity: 0.5; background-color: lightgray; box-shadow: 0 0 2px 1px red; }
result specifications specification status comment html living standardthe definition of ':indeterminate' in that specification.
:invalid - CSS: Cascading Style Sheets
display: block; margin: 1px; padding: 1px; } .field { margin: 1px; padding: 1px; } input:invalid { background-color: #ffdddd; } form:invalid { border: 5px solid #ffdddd; } input:valid { background-color: #ddffdd; } form:valid { border: 5px solid #ddffdd; } input:required { border-color: #800000; border-width: 3px; } input:required:invalid { border-color: #c00000; }
result accessibility concerns the color red is commonly used to indicate invalid input.
:lang() - CSS: Cascading Style Sheets
div lang="en"><q>this english quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>this french quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>this german quote has a <q>nested</q> quote inside.</q></div> css :lang(en) > q { quotes: '\201c' '\201d' '\2018' '\2019'; } :lang(fr) > q { quotes: '« ' ' »'; } :lang(de) > q { quotes: '»' '«' '\2039' '\203a'; }
result specifications specification status comment selectors level 4the definition of ':lang()' in that specification.
:last-child - CSS: Cascading Style Sheets
syntax :last-child examples basic example html <div> <p>this text isn't selected.</p> <p>this text is selected!</p> </div> <div> <p>this text isn't selected.</p> <h2>this text isn't selected: it's not a `p`.</h2> </div> css p:last-child { color: lime; background-color: black; padding: 5px; }
result styling a list html <ul> <li>item 1</li> <li>item 2</li> <li>item 3 <ul> <li>item 3.1</li> <li>item 3.2</li> <li>item 3.3</li> </ul> </li> </ul> css ul li { color: blue; } ul li:last-child { border: 1px solid red; color: red; }
result specifications specification status comment selectors level 4the definition of ':la...
:link - CSS: Cascading Style Sheets
html <a href="#ordinary-target">this is an ordinary link.</a><br> <a href="">you've already visited this link.</a><br> <a>placeholder link (won't get styled)</a> css a:link { background-color: gold; color: green; }
result specifications specification status comment html living standardthe definition of ':link' in that specification.
:nth-last-of-type() - CSS: Cascading Style Sheets
formal syntax :nth-last-of-type( <nth> )where <nth> = <an-plus-b> | even | odd examples html <div> <span>this is a span.</span> <span>this is another span.</span> <em>this is emphasized.</em> <span>wow, this span gets limed!!!</span> <strike>this is struck through.</strike> <span>here is one last span.</span> </div> css span:nth-last-of-type(2) { background-color: lime; }
result specifications specification status comment selectors level 4the definition of ':nth-last-of-type' in that specification.
:nth-of-type() - CSS: Cascading Style Sheets
d paragraph.</p> <p class="fancy">4th paragraph.</p> </div> css /* odd paragraphs */ p:nth-of-type(2n+1) { color: red; } /* even paragraphs */ p:nth-of-type(2n) { color: blue; } /* first paragraph */ p:nth-of-type(1) { font-weight: bold; } /* this has no effect, as the .fancy class is only on the 4th p element, not the 1st */ p.fancy:nth-of-type(1) { text-decoration: underline; }
result specifications specification status comment selectors level 4the definition of ':nth-of-type' in that specification.
:only-of-type - CSS: Cascading Style Sheets
<i>i am the only `i` child.</i> <em>i am `em` #1.</em> <em>i am `em` #2.</em> </div> </main> css main :only-of-type { color: red; }
result specifications specification status comment selectors level 4the definition of ':only-of-type' in that specification.
:out-of-range - CSS: Cascading Style Sheets
l> </li> </ul> </form> css li { list-style: none; margin-bottom: 1em; } input { border: 1px solid black; } input:in-range { background-color: rgba(0, 255, 0, 0.25); } input:out-of-range { background-color: rgba(255, 0, 0, 0.25); border: 2px solid red; } input:in-range + label::after { content: 'okay.'; } input:out-of-range + label::after { content: 'out of range!'; }
result specifications specification status comment html living standardthe definition of ':out-of-range' in that specification.
:visited - CSS: Cascading Style Sheets
html <a href="#test-visited-link">have you visited this link yet?</a><br> <a href="">you've already visited this link.</a> css a { /* specify non-transparent defaults to certain properties, allowing them to be styled with the :visited state */ background-color: white; border: 1px solid white; } a:visited { background-color: yellow; border-color: hotpink; color: hotpink; }
result specifications specification status comment html living standardthe definition of ':visited' in that specification.
:where() - CSS: Cascading Style Sheets
you can see the
result below (although bear in mind that currently :is() and :where() are currently only enabled by default in firefox nightly, version 77+.
@charset - CSS: Cascading Style Sheets
as there are several ways to define the character encoding of a style sheet, the browser will try the following methods in the following order (and stop as soon as one yields a
result) : the value of the unicode byte-order character placed at the beginning of the file.
additive-symbols - CSS: Cascading Style Sheets
>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples specifying additive symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style additive-symbols-example { system: additive; additive-symbols: v 5, iv 4, i 1; } .list { list-style: additive-symbols-example; }
result specifications specification status comment css counter styles level 3the definition of 'additive-symbols' in that specification.
fallback - CSS: Cascading Style Sheets
formal syntax <counter-style-name>where <counter-style-name> = <custom-ident> examples specifying a fallback counter style html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style fallback-example { system: fixed; symbols: "\24b6" "\24b7" "\24b8"; fallback: upper-alpha; } .list { list-style: fallback-example; }
result specifications specification status comment css counter styles level 3the definition of 'fallback' in that specification.
negative - CSS: Cascading Style Sheets
color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples rendering negative counters html <ul class="list" start="-3"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style neg { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; negative: "(-" ")"; } .list { list-style: neg; }
result specifications specification status comment css counter styles level 3the definition of 'system' in that specification.
pad - CSS: Cascading Style Sheets
> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples padding a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style pad-example { system: numeric; symbols: "0" "1" "2" "3" "4" "5"; pad: 2 "0"; } .list { list-style: pad-example; }
result specifications specification status comment css counter styles level 3the definition of 'pad' in that specification.
prefix - CSS: Cascading Style Sheets
adding a prefix to a counter html <ul class="index"> <li>the boy who lived</li> <li>the vanishing glass</li> <li>the letters from no one</li> <li>the keeper of the keys</li> <li>diagon alley</li> </ul> css @counter-style chapters { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; prefix: 'chapter '; } .index { list-style: chapters; padding-left: 15ch; }
result specifications specification status comment css counter styles level 3the definition of 'prefix' in that specification.
speak-as - CSS: Cascading Style Sheets
ut | <counter-style-name>where <counter-style-name> = <custom-ident> examples setting the spoken form for a counter html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style speak-as-example { system: fixed; symbols: ; suffix: " "; speak-as: numbers; } .list { list-style: speak-as-example; }
result specifications specification status comment css counter styles level 3the definition of 'speak-as' in that specification.
suffix - CSS: Cascading Style Sheets
p-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a suffix for a counter html <ul class="choices"> <li>one</li> <li>two</li> <li>three</li> <li>none of the above</li> </ul> css @counter-style options { system: fixed; symbols: a b c d; suffix: ") "; } .choices { list-style: options; }
result specifications specification status comment css counter styles level 3the definition of 'suffix' in that specification.
symbols - CSS: Cascading Style Sheets
p-length> = <length-percentage>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting counter symbols html <ul class="list"> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ul> css @counter-style symbols-example { system: fixed; symbols: a "1" "\24b7" d e; } .list { list-style: symbols-example; }
result specifications specification status comment css counter styles level 3the definition of 'symbols' in that specification.
font-style - CSS: Cascading Style Sheets
formal definition related at-rule@font-faceinitial valuenormalcomputed valueas specified formal syntax normal | italic | oblique <angle>{0,2} examples specifying an italic font style as an example, consider the garamond font family, in its normal form, we get the following
result: @font-face { font-family: garamond; src: url('garamond.ttf'); } the italicized version of this text uses the same glyphs present in the unstyled version, but they are artificially sloped by a few degrees.
unicode-range - CSS: Cascading Style Sheets
html <div>me & you = us</div> css @font-face { font-family: 'ampersand'; src: local('times new roman'); unicode-range: u+26; } div { font-size: 4em; font-family: ampersand, helvetica, sans-serif; }
result specifications specification status comment css fonts module level 3the definition of 'unicode-range' in that specification.
-webkit-device-pixel-ratio - CSS: Cascading Style Sheets
} examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (-webkit-device-pixel-ratio: 1) { p { color: red; } } /* minimum resolution */ @media (-webkit-min-device-pixel-ratio: 1.1) { p { font-size: 1.5em; } } /* maximum resolution */ @media (-webkit-max-device-pixel-ratio: 3) { p { background: yellow; } }
result specifications specification status comment compatibility standardthe definition of '-webkit-device-pixel-ratio' in that specification.
any-hover - CSS: Cascading Style Sheets
examples testing whether input methods can hover html <a href="#">try hovering over me!</a> css @media (any-hover: hover) { a:hover { background: yellow; } }
result specifications specification status comment media queries level 4the definition of 'any-hover' in that specification.
any-pointer - CSS: Cascading Style Sheets
pointer: fine) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 15px; height: 15px; border: 1px solid blue; } } @media (any-pointer: coarse) { input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; appearance: none; width: 30px; height: 30px; border: 2px solid red; } }
result specifications specification status comment media queries level 4the definition of 'any-pointer' in that specification.
aspect-ratio - CSS: Cascading Style Sheets
id='inner'> watch this element as you resize your viewport's width and height.</div>"> </iframe> css iframe{ display:block; } javascript outer.style.width=outer.style.height="165px" w.onchange=w.oninput=function(){ outer.style.width=w.value+"px" wf.textcontent="width:"+w.value } h.onchange=h.oninput=function(){ outer.style.height=h.value+"px" hf.textcontent="height:"+h.value }
result specifications specification status comment media queries level 4the definition of 'aspect-ratio' in that specification.
color-gamut - CSS: Cascading Style Sheets
examples html <p>this is a test.</p> css @media (color-gamut: srgb) { p { background: #f4ae8a; } }
result specifications specification status comment media queries level 4the definition of 'color-gamut' in that specification.
color-index - CSS: Cascading Style Sheets
examples basic example html <p>this is a test.</p> css p { color: black; } @media (color-index) { p { color: red; } } @media (min-color-index: 15000) { p { color: #1475ef; } }
result custom stylesheet this html will apply a special stylesheet for devices that have at least 256 colors.
color - CSS: Cascading Style Sheets
examples html <p>this text should be black on non-color devices, red on devices with a low number of colors, and greenish on devices with a high number of colors.</p> css p { color: black; } /* any color device */ @media (color) { p { color: red; } } /* any color device with at least 8 bits per color component */ @media (min-color: 8) { p { color: #24ba13; } }
result specifications specification status comment media queries level 4the definition of 'color' in that specification.
forced-colors - CSS: Cascading Style Sheets
html <div class="colors">weird color box</div> css .colors { background-color: red; color: grey; } @media (forced-colors: active) { .colors { background-color: white; color: black; } }
result specifications specification status comment media queries level 5the definition of 'forced-colors' in that specification.
grid - CSS: Cascading Style Sheets
neato!</p> css :not(.unknown) { color: lightgray; } @media (grid: 0) { .unknown { color: lightgray; } .bitmap { color: red; text-transform: uppercase; } } @media (grid: 1) { .unknown { color: lightgray; } .grid { color: black; text-transform: uppercase; } }
result specifications specification status comment media queries level 4the definition of 'grid' in that specification.
height - CSS: Cascading Style Sheets
examples html <div>watch this element as you resize your viewport's height.</div> css /* exact height */ @media (height: 360px) { div { color: red; } } /* minimum height */ @media (min-height: 25rem) { div { background: yellow; } } /* maximum height */ @media (max-height: 40rem) { div { border: 2px solid blue; } }
result specifications specification status comment media queries level 4the definition of 'height' in that specification.
hover - CSS: Cascading Style Sheets
examples html <a href="#">try hovering over me!</a> css @media (hover: hover) { a:hover { background: yellow; } }
result specifications specification status comment media queries level 4the definition of 'hover' in that specification.
inverted-colors - CSS: Cascading Style Sheets
if you're not, it should be red on light gray.</p> <p>if the text is gray, your browser doesn't support the `inverted-colors` media feature.</p> css p { color: gray; } @media (inverted-colors: inverted) { p { background: black; color: yellow; } } @media (inverted-colors: none) { p { background: #eee; color: red; } }
result specifications specification status comment media queries level 5the definition of 'inverted-colors' in that specification.
monochrome - CSS: Cascading Style Sheets
examples html <p class="mono">your device supports monochrome pixels!</p> <p class="no-mono">your device doesn't support monochrome pixels.</p> css p { display: none; } /* any monochrome device */ @media (monochrome) { p.mono { display: block; color: #333; } } /* any non-monochrome device */ @media (monochrome: 0) { p.no-mono { display: block; color: #ee3636; } }
result specifications specification status comment media queries level 4the definition of 'monochrome' in that specification.
orientation - CSS: Cascading Style Sheets
examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } div { background: yellow; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } }
result specifications specification status comment media queries level 4the definition of 'orientation' in that specification.
overflow-block - CSS: Cascading Style Sheets
sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css @media (overflow-block: scroll) { p { color: red; } }
result specifications specification status comment media queries level 4the definition of 'overflow-block' in that specification.
overflow-inline - CSS: Cascading Style Sheets
sed nec augue congue eros accumsan tincidunt sed eget ex.</p> css p { white-space: nowrap; } @media (overflow-inline: scroll) { p { color: red; } }
result specifications specification status comment media queries level 4the definition of 'overflow-inline' in that specification.
pointer - CSS: Cascading Style Sheets
: none; appearance: none; border: solid; margin: 0; } input[type="checkbox"]:checked { background: gray; } @media (pointer: fine) { input[type="checkbox"] { width: 15px; height: 15px; border-width: 1px; border-color: blue; } } @media (pointer: coarse) { input[type="checkbox"] { width: 30px; height: 30px; border-width: 2px; border-color: red; } }
result specifications specification status comment media queries level 4the definition of 'pointer' in that specification.
prefers-color-scheme - CSS: Cascading Style Sheets
rk) { .day.dark-scheme { background: #333; color: white; } .night.dark-scheme { background: black; color: #ddd; } } @media (prefers-color-scheme: light) { .day.light-scheme { background: white; color: #555; } .night.light-scheme { background: #eee; color: black; } } .day, .night { display: inline-block; padding: 1em; width: 7em; height: 2em; vertical-align: middle; }
result specifications specification status comment media queries level 5the definition of 'prefers-color-scheme' in that specification.
prefers-contrast - CSS: Cascading Style Sheets
html <div class="contrast">low contrast box</div> css .contrast { width: 100px; height: 100px; outline: 2px dashed black; } @media (prefers-contrast: high) { .contrast { outline: 2px solid black; } }
result specifications specification status comment media queries level 5the definition of 'prefers-contrast' in that specification.
prefers-reduced-data - CSS: Cascading Style Sheets
t('woff2'); unicode-range: u+0000-00ff, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+2000-206f, u+2074, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd; } } body { font-family: montserrat, -apple-system, blinkmacsystemfont, "segoe ui", roboto, helvetica, arial, "microsoft yahei", sans-serif, "apple color emoji", "segoe ui emoji", "segoe ui symbol"; }
result specifications specification status comment media queries level 5the definition of 'reduced-data' in that specification.
prefers-reduced-motion - CSS: Cascading Style Sheets
#306; color: #fff; font: 1.2em sans-serif; width: 10em; padding: 1em; border-radius: 1em; text-align: center; } @keyframes pulse { 0% { transform: scale(1); } 25% { transform: scale(.9); } 50% { transform: scale(1); } 75% { transform: scale(1.1); } 100% { transform: scale(1); } } @keyframes dissolve { 0% { opacity: 1; } 50% { opacity: 0.8; } 100% { opacity: 1; } }
result specifications specification status comment media queries level 5the definition of 'prefers-reduced-motion' in that specification.
prefers-reduced-transparency - CSS: Cascading Style Sheets
html <div class="transparency">transparent box</div> css .transparency { opacity: 0.5; } @media (prefers-reduced-transparency: reduce) { .transparency { opacity: 1; } }
result specifications specification status comment media queries level 5the definition of 'prefers-reduced-transparency' in that specification.
resolution - CSS: Cascading Style Sheets
examples html <p>this is a test of your device's pixel density.</p> css /* exact resolution */ @media (resolution: 150dpi) { p { color: red; } } /* minimum resolution */ @media (min-resolution: 72dpi) { p { text-decoration: underline; } } /* maximum resolution */ @media (max-resolution: 300dpi) { p { background: yellow; } }
result specifications specification status comment media queriesthe definition of 'resolution' in that specification.
scan - CSS: Cascading Style Sheets
if your screen uses progressive scanning, you should see a serif font.</p> css p { font-family: cursive; } @media (scan: interlace) { p { font-family: sans-serif; } } @media (scan: progressive) { p { font-family: serif; } }
result specifications specification status comment media queries level 4the definition of 'scan' in that specification.
scripting - CSS: Cascading Style Sheets
:-)</p> css p { color: lightgray; } @media (scripting: none) { .script-none { color: red; } } @media (scripting: initial-only) { .script-initial-only { color: red; } } @media (scripting: enabled) { .script-enabled { color: red; } }
result specifications specification status comment media queries level 5the definition of 'scripting' in that specification.
update - CSS: Cascading Style Sheets
examples html <p>if this text animates for you, you are using a fast-updating device.</p> css @keyframes jiggle { from { transform: translatey(0); } to { transform: translatey(25px); } } @media (update: fast) { p { animation: 1s jiggle linear alternate infinite; } }
result specifications specification status comment media queries level 4the definition of 'update' in that specification.
width - CSS: Cascading Style Sheets
examples html <div>watch this element as you resize your viewport's width.</div> css /* exact width */ @media (width: 360px) { div { color: red; } } /* minimum width */ @media (min-width: 35rem) { div { background: yellow; } } /* maximum width */ @media (max-width: 50rem) { div { border: 2px solid blue; } }
result specifications specification status comment media queries level 4the definition of 'width' in that specification.
@supports - CSS: Cascading Style Sheets
the following example returns true if the browser supports the child combinator: @supports selector(a > b) {} the not operator the not operator can precede any expression to create a new expression,
resulting in the negation of the original one.
Adjacent sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that come immediately after any image */ img + p { font-weight: bold; } syntax former_element + target_element { style properties } examples css li:first-of-type + li { color: red; } html <ul> <li>one</li> <li>two!</li> <li>three</li> </ul>
result specifications specification status comment selectors level 4the definition of 'next-sibling combinator' in that specification.
Coordinate systems - CSS: Cascading Style Sheets
.outer { width: 1000px; height: 200px; background-color: red; } .inner { position: relative; width: 500px; height: 150px; top: 25px; left: 100px; background-color: blue; color: white; cursor: crosshair; user-select: none; -moz-user-select: none; -ms-user-select: none; -webkit-user-select: none; } .log { position: relative; width: 100%; text-align: center; }
result here you can see the
results in action.
CSS Animations tips and tricks - CSS: Cascading Style Sheets
of course, we also need to add an event handler to our "run" button so it'll actually do something: document.queryselector(".runbutton").addeventlistener("click", play, false);
result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state.
Border-image generator - CSS: Cascading Style Sheets
eader() { var freader = new filereader(); var browse = document.createelement('input'); var loadimage = function loadimage(e) { if (browse.files.length === 0) return; var file = browse.files[0]; if (file.type.slice(0, 5) !== 'image') return; freader.readasdataurl(file); return false; }; freader.onload = function(e) { imagecontrol.loadremoteimage(e.target.
result); }; var load = function load() { browse.click(); }; browse.setattribute('type', 'file'); browse.style.display = 'none'; browse.onchange = loadimage; return { load: load }; })(); var imagecontrol = (function imagecontrol() { var scale = 0.5; var imgsource = new image(); var imgstate = null; var selected = null; var topics = ['slice', 'width', 'outset']; ...
Using multiple backgrounds - CSS: Cascading Style Sheets
-bg-example { width: 100%; height: 400px; background-image: url(https://mdn.mozillademos.org/files/11305/firefox.png), url(https://mdn.mozillademos.org/files/11307/bubbles.png), linear-gradient(to right, rgba(30, 75, 115, 1), rgba(255, 255, 255, 0)); background-repeat: no-repeat, no-repeat, no-repeat; background-position: bottom right, left, right; }
result (if image does not appear in codepen, click the 'tidy' button in the css section) as you can see here, the firefox logo (listed first within background-image) is on top, directly above the bubbles graphic, followed by the gradient (listed last) sitting underneath all previous 'images'.
CSS Box Alignment - CSS: Cascading Style Sheets
if you were using arabic, a right to left language, then the same value of start would
result in the items moving to the right, as sentences in arabic start on the right-hand side of the page.
Mastering margin collapsing - CSS: Cascading Style Sheets
<p>this paragraph has a <code>.4rem</code> margin between it and the text above.</p> <p>my bottom margin collapses with my parent, yielding a bottom margin of <code>2rem</code>.</p> </div> <p>i am <code>2rem</code> below the element above.</p> css div { margin: 2rem 0; background: lavender; } p { margin: .4rem 0 1.2rem 0; background: yellow; }
result specifications specification status comment css level 2 (revision 1)the definition of 'margin collapsing' in that specification.
Using feature queries - CSS: Cascading Style Sheets
feature queries are created using the css at-rule @supports, and are useful as they give web developers a way to test to see if a browser has support for a certain feature, and then provide css that will only run based on the
result of that test.
CSS Fonts - CSS: Cascading Style Sheets
p { width: 600px; margin: 0 auto; font-family: "helvetica neue", "arial", sans-serif; font-style: italic; font-weight: 100; font-variant-ligatures: normal; font-size: 2rem; letter-spacing: 1px; } <p>three hundred years ago<br> i thought i might get some sleep<br> i stretched myself out onna antique bed<br> an' my spirit did a midnite creep</p> the
result is as follows: variable fonts examples you can find a number of variable fonts examples at v-fonts.com and axis-praxis.org; see also our variable fonts guide for more information and usage information.
Layout using named grid lines - CSS: Cascading Style Sheets
.wrapper { grid-template-columns: repeat(4, [col1-start] 1fr [col2-start] 3fr); } if your repeating syntax puts two lines next to each other then they will be merged, and create the same
result as giving a line multiple names in a non-repeating track definition.
Child combinator - CSS: Cascading Style Sheets
<span>span #2, in the span that's in the div.</span> </span> </div> <span>span #3, not in the div at all.</span>
result specifications specification status comment selectors level 4the definition of 'child combinator' in that specification.
Class selectors - CSS: Cascading Style Sheets
} examples css .red { color: #f33; } .yellow-bg { background: #ffa; } .fancy { font-weight: bold; text-shadow: 4px 4px 3px #77f; } html <p class="red">this paragraph has red text.</p> <p class="red yellow-bg">this paragraph has red text and a yellow background.</p> <p class="red fancy">this paragraph has red text and "fancy" styling.</p> <p>this is just a regular paragraph.</p>
result specifications specification status comment selectors level 4the definition of 'class selectors' in that specification.
Column combinator - CSS: Cascading Style Sheets
ml <table border="1"> <colgroup> <col span="2"/> <col class="selected"/> </colgroup> <tbody> <tr> <td>a <td>b <td>c </tr> <tr> <td colspan="2">d</td> <td>e</td> </tr> <tr> <td>f</td> <td colspan="2">g</td> </tr> </tbody> </table> css col.selected || td { background: gray; color: white; font-weight: bold; }
result specifications specification status comment selectors level 4the definition of 'column combinator' in that specification.
Descendant combinator - CSS: Cascading Style Sheets
syntax selector1 selector2 { /* property declarations */ } examples css li { list-style-type: disc; } li li { list-style-type: circle; } html <ul> <li> <div>item 1</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> <li> <div>item 2</div> <ul> <li>subitem a</li> <li>subitem b</li> </ul> </li> </ul>
result specifications specification status comment selectors level 4the definition of 'descendant combinator' in that specification.
General sibling combinator - CSS: Cascading Style Sheets
/* paragraphs that are siblings of and subsequent to any image */ img ~ p { color: red; } syntax former_element ~ target_element { style properties } examples css p ~ span { color: red; } html <span>this is not red.</span> <p>here is a paragraph.</p> <code>here is some code.</code> <span>and here is a red span!</span> <code>more code...</code> <span>and this is a red span!</span>
result specifications specification status comment selectors level 4the definition of 'subsequent-sibling combinator' in that specification.
ID selectors - CSS: Cascading Style Sheets
"demo" */ #demo { border: red 2px solid; } syntax #id_value { style properties } note that syntactically (but not specificity-wise), this is equivalent to the following attribute selector: [id=id_value] { style properties } examples css #identified { background-color: skyblue; } html <div id="identified">this div has a special id on it!</div> <div>this is just a regular div.</div>
result specifications specification status comment selectors level 4the definition of 'id selectors' in that specification.
Card - CSS: Cascading Style Sheets
for the overall layout you could use flexbox, however this will
result in cards stretching over the final flex row where there are fewer than can fit in the rows above.
Type selectors - CSS: Cascading Style Sheets
*/ a { color: red; } syntax element { style properties } examples css span { background-color: skyblue; } html <span>here's a span with some text.</span> <p>here's a p with some text.</p> <span>here's a span with more text.</span>
result specifications specification status comment selectors level 4the definition of 'type (tag name) selector' in that specification.
Viewport concepts - CSS: Cascading Style Sheets
mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered
result down so it can all be seen at once.
WebKit CSS extensions - CSS: Cascading Style Sheets
round ::-webkit-media-controls-volume-slider ::-webkit-meter-bar ::-webkit-meter-even-less-good-value ::-webkit-meter-inner-element ::-webkit-meter-optimum-value ::-webkit-meter-suboptimum-value -webkit-media-text-track-container ::-webkit-outer-spin-button ::-webkit-progress-bar ::-webkit-progress-inner-element ::-webkit-progress-value ::-webkit-search-cancel-button ::-webkit-search-
results-button ::-webkit-slider-runnable-track ::-webkit-slider-thumb note: generally, if there is an invalid pseudo-element or pseudo-class within in a chain or group of selectors, the whole selector list is invalid.
align-content - CSS: Cascading Style Sheets
ion> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.aligncontent = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; });
result specifications specification status comment css box alignment module level 3the definition of 'align-content' in that specification.
align-items - CSS: Cascading Style Sheets
ption> </select> </div> javascript var values = document.getelementbyid('values'); var display = document.getelementbyid('display'); var container = document.getelementbyid('container'); values.addeventlistener('change', function (evt) { container.style.alignitems = evt.target.value; }); display.addeventlistener('change', function (evt) { container.classname = evt.target.value; });
result specifications specification status comment css box alignment module level 3the definition of 'align-items' in that specification.
align-self - CSS: Cascading Style Sheets
ion> = center | start | end | self-start | self-end | flex-start | flex-end examples html <section> <div>item #1</div> <div>item #2</div> <div>item #3</div> </section> css section { display: flex; align-items: center; height: 120px; background: beige; } div { height: 60px; background: cyan; margin: 5px; } div:nth-child(3) { align-self: flex-end; background: pink; }
result specifications specification status comment css box alignment module level 3the definition of 'align-self' in that specification.
all - CSS: Cascading Style Sheets
css body { font-size: small; background-color: #f0f0f0; color: blue; } blockquote { background-color: skyblue; color: red; }
result no all property <blockquote id="quote">lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> phasellus eget velit sagittis.
appearance (-moz-appearance, -webkit-appearance) - CSS: Cascading Style Sheets
div { color: black; -moz-appearance: scrollbartrack-vertical; -webkit-appearance: scrollbarbartrack-vertical; } <div>lorem</div> firefox searchfield-decoration div{ color: black; -moz-appearance: searchfield-decoration; -webkit-appearance: searchfield-decoration; } <div>lorem</div> safari edge searchfield-
results-decoration div{ color: black; -moz-appearance: searchfield-
results-decoration; -webkit-appearance: searchfield-
results-decoration; } <div>lorem</div> chrome safari edge (works on chrome 51 on windows 7) searchfield-
results-button div{ color: black; -moz-appearance: searchfield-
results-button; -webkit-appearance: searchfield-
results-butto...
attr() - CSS: Cascading Style Sheets
)where <type-or-unit> = string | color | url | integer | number | length | angle | time | frequency | cap | ch | em | ex | ic | lh | rlh | rem | vb | vi | vw | vh | vmin | vmax | mm | q | cm | in | pt | pc | px | deg | grad | rad | turn | ms | s | hz | khz | % examples content property html <p data-foo="hello">world</p> css [data-foo]::before { content: attr(data-foo) " "; }
result <color> value html <div class="background" data-background="lime">background expected to be red if your browser does not support advanced usage of attr()</div> css .background { height: 100vh; } .background { background-color: red; } .background[data-background] { background-color: attr(data-background color, red); } specifications specification status com...
backdrop-filter - CSS: Cascading Style Sheets
photos/id/1080/6858/4574), linear-gradient(rgb(219, 166, 166), rgb(0, 0, 172)); background-position: center center; background-repeat: no-repeat; background-size: cover; } .container { align-items: center; display: flex; justify-content: center; height: 100%; width: 100%; } html <div class="container"> <div class="box"> <p>backdrop-filter: blur(10px)</p> </div> </div>
result specifications specification status comment filter effects module level 2the definition of 'backdrop-filter' in that specification.
backface-visibility - CSS: Cascading Style Sheets
transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; margin: 0px; padding: 6px; font-family: sans-serif; text-align: left; }
result specifications specification status comment css transforms level 2the definition of 'backface-visibility' in that specification.
background-clip - CSS: Cascading Style Sheets
margin: 1em 0; padding: 1.4em; background: linear-gradient(60deg, red, yellow, red, yellow, red); font: 900 1.2em sans-serif; text-decoration: underline; } .border-box { background-clip: border-box; } .padding-box { background-clip: padding-box; } .content-box { background-clip: content-box; } .text { background-clip: text; -webkit-background-clip: text; color: rgba(0,0,0,.2); }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-clip' in that specification.
background-color - CSS: Cascading Style Sheets
r sit amet, consectetuer </div> <div class="exampletwo"> lorem ipsum dolor sit amet, consectetuer </div> <div class="examplethree"> lorem ipsum dolor sit amet, consectetuer </div> css .exampleone { background-color: teal; color: white; } .exampletwo { background-color: rgb(153,102,153); color: rgb(255,255,204); } .examplethree { background-color: #777799; color: #ffffff; }
result specifications specification comment feedback css backgrounds and borders module level 3the definition of 'background-color' in that specification.
background-image - CSS: Cascading Style Sheets
color: #fe7f88; background-image: none; background-color: transparent; } div { background-image: url("https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png"); } .catsandstars { background-image: url("https://mdn.mozillademos.org/files/11991/startransparent.gif"), url("https://mdn.mozillademos.org/files/7693/catfront.png"); background-color: transparent; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'background-image' in that specification.
background-position-x - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; }
result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-x' in that specification.
background-position-y - CSS: Cascading Style Sheets
html <div></div> css div { width: 300px; height: 300px; background-color: skyblue; background-image: url(https://media.prod.mdn.mozit.cloud/attachments/2020/07/29/17350/3b4892b7e820122ac6dd7678891d4507/firefox.png); background-repeat: no-repeat; background-position-x: center; background-position-y: bottom 10px; }
result specifications specification status comment css backgrounds and borders module level 4the definition of 'background-position-y' in that specification.
background-repeat - CSS: Cascading Style Sheets
{ background-repeat: repeat-y; } .five { background-repeat: space; } .six { background-repeat: round; } /* multiple images */ .seven { background-image: url(https://mdn.mozillademos.org/files/12005/starsolid.gif), url(https://developer.cdn.mozilla.net/media/redesign/img/favicon32.png); background-repeat: repeat-x, repeat-y; height: 144px; }
result in this example, each list item is matched with a different value of background-repeat.
background - CSS: Cascading Style Sheets
tage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting backgrounds with color keywords and images html <p class="topbanner"> starry sky<br/> twinkle twinkle<br/> starry sky </p> <p class="warning">here is a paragraph<p> css .warning { background: pink; } .topbanner { background: url("https://mdn.mozillademos.org/files/11983/starsolid.gif") #99f repeat-y fixed; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'background' in that specification.
block-size - CSS: Cascading Style Sheets
ial valueautoapplies tosame as width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples block size with vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 200px; }
result specifications specification status comment css logical properties and values level 1the definition of 'block-size' in that specification.
border-block-color - CSS: Cascading Style Sheets
lies toall elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-color: red; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-color' in that specification.
border-block-end-color - CSS: Cascading Style Sheets
toall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-end-color: red; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-color' in that specification.
border-block-end-style - CSS: Cascading Style Sheets
oall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-end-style: dashed; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-style' in that specification.
border-block-end-width - CSS: Cascading Style Sheets
solute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with veritcal text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-end-width: 5px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end-width' in that specification.
border-block-end - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block-end: 5px dashed blue; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-end' in that specification.
border-block-start-color - CSS: Cascading Style Sheets
oall elementsinheritednocomputed valuecomputed coloranimation typea color formal syntax <'border-top-color'> examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-block-start-color: red; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-color' in that specification.
border-block-start-style - CSS: Cascading Style Sheets
ll elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border wtih vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-start-style: dashed; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-style' in that specification.
border-block-start-width - CSS: Cascading Style Sheets
lute length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-start-width: 5px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-start-width' in that specification.
border-block-style - CSS: Cascading Style Sheets
es toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples dashed border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-block-style: dashed; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-style' in that specification.
border-block-width - CSS: Cascading Style Sheets
ueabsolute length; 0 if the border style is none or hiddenanimation typediscrete formal syntax <'border-top-width'> examples border width with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-block-width: 5px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block-width' in that specification.
border-block - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-block: 5px dashed blue; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-block' in that specification.
border-bottom-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-bottom-color: red; width: auto; } .redtext { color: red; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-color' in that specification.
border-bottom-style - CSS: Cascading Style Sheets
g: 3px; } /* border-bottom-style example classes */ .b1 {border-bottom-style: none;} .b2 {border-bottom-style: hidden;} .b3 {border-bottom-style: dotted;} .b4 {border-bottom-style: dashed;} .b5 {border-bottom-style: solid;} .b6 {border-bottom-style: double;} .b7 {border-bottom-style: groove;} .b8 {border-bottom-style: ridge;} .b9 {border-bottom-style: inset;} .b10 {border-bottom-style: outset;}
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-bottom-style' in that specification.
border-collapse - CSS: Cascading Style Sheets
; margin: 1em; border: dashed 5px; } table th, table td { border: solid 3px; } .fx { border-color: orange blue; } .gk { border-color: black red; } .ed { border-color: blue gold; } .tr { border-color: aqua; } .sa { border-color: silver blue; } .wk { border-color: gold blue; } .ch { border-color: red yellow green blue; } .bk { border-color: navy blue teal aqua; } .op { border-color: red; }
result specifications specification status comment css level 2 (revision 1)the definition of 'border-collapse' in that specification.
border-color - CSS: Cascading Style Sheets
code>border-left-color: gold;</code></li> </ul> </div> css #justone { border-color: red; } #horzvert { border-color: gold red; } #topvertbott { border-color: red cyan gold; } #trbl { border-color: red cyan black gold; } /* set width and style for all divs */ div { border: solid 0.3em; width: auto; margin: 0.5em; padding: 0.5em; } ul { margin: 0; list-style: none; }
result specifications specification status comment css logical properties and values level 1 editor's draft added the logical keyword.
border-end-end-radius - CSS: Cascading Style Sheets
,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css content div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-end-radius: 10px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-end-end-radius' in that specification.
border-end-start-radius - CSS: Cascading Style Sheets
e>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-end-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-end-start-radius: 10px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-end-start-radius' in that specification.
border-image-outset - CSS: Cascading Style Sheets
engthsanimation typeby computed value type formal syntax [ <length> | <number> ]{1,4} examples outsetting a border image html <div id="outset">this element has an outset border image!</div> css #outset { width: 10rem; background: #cef; border: 1.4rem solid; border-image: radial-gradient(#ff2, #55f) 40; border-image-outset: 1.5; /* 1.5 × 1.4rem = 2.1rem */ margin: 2.1rem; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-outset' in that specification.
border-image-repeat - CSS: Cascading Style Sheets
value="round">round</option> <option value="space">space</option> <option value="stretch repeat">stretch repeat</option> <option value="space round">space round</option> </select> javascript var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("bordered").style.borderimagerepeat = evt.target.value; });
results specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-repeat' in that specification.
border-image-slice - CSS: Cascading Style Sheets
; const divelem = document.queryselector('div > div'); widthslider.addeventlistener('input', () => { const newvalue = widthslider.value + 'px'; divelem.style.borderwidth = newvalue; widthoutput.textcontent = newvalue; }) sliceslider.addeventlistener('input', () => { const newvalue = sliceslider.value; divelem.style.borderimageslice = newvalue; sliceoutput.textcontent = newvalue; })
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-slice' in that specification.
border-image-width - CSS: Cascading Style Sheets
stet clita kasd gubergren, no sea takimata sanctus est lorem ipsum dolor sit amet.</p> css p { border: 20px solid; border-image: url("/static/external/21/214842819586a8dd293c17b38d0fd0e26430146a86dd04294a53ecaeeea7d0e2.png") 30 round; border-image-width: 16px; padding: 40px; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-image-width' in that specification.
border-image - CSS: Cascading Style Sheets
#bitmap { width: 200px; background-color: #ffa; border: 36px solid orange; margin: 30px; padding: 10px; border-image: url("https://udn.realityripple.com/samples/2c/fa0192d18e.png") /* source */ 27 / /* slice */ 36px 28px 18px 8px / /* width */ 18px 14px 9px 4px /* outset */ round; /* repeat */ }
result gradient html <div id="gradient">this element is surrounded by a gradient-based border image!</div> css #gradient { width: 200px; border: 30px solid; border-image: repeating-linear-gradient(45deg, #f33, #3bf, #f33 30px) 60; padding: 20px; }
result specifications specification status comment css backgrounds and borders module level 3the definition ...
border-inline-color - CSS: Cascading Style Sheets
all elementsinheritednocomputed valuecomputed coloranimation typediscrete formal syntax <'border-top-color'>{1,2} examples border color with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 10px solid blue; border-inline-color: red; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-color' in that specification.
border-inline-end-style - CSS: Cascading Style Sheets
ition initial valuenoneapplies toall elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax <'border-top-style'> examples html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 5px solid blue; border-inline-end-style: dashed; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-style' in that specification.
border-inline-end-width - CSS: Cascading Style Sheets
length; 0 if the border style is none or hiddenanimation typea length formal syntax <'border-top-width'> examples applying a border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; border: 1px solid blue; border-inline-end-width: 5px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-inline-end-width' in that specification.
border-inline - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples border with vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; border-inline: 5px dashed blue; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-inline' in that specification.
border-left-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-left-color: red; width: auto; } .redtext { color: red; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-color' in that specification.
border-left-style - CSS: Cascading Style Sheets
5; } tr, td { padding: 3px; } /* border-left-style example classes */ .b1 {border-left-style: none;} .b2 {border-left-style: hidden;} .b3 {border-left-style: dotted;} .b4 {border-left-style: dashed;} .b5 {border-left-style: solid;} .b6 {border-left-style: double;} .b7 {border-left-style: groove;} .b8 {border-left-style: ridge;} .b9 {border-left-style: inset;} .b10 {border-left-style: outset;}
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-left-style' in that specification.
border-right-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-right-color: red; width: auto; } .redtext { color: red; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-color' in that specification.
border-right-style - CSS: Cascading Style Sheets
{ padding: 3px; } /* border-right-style example classes */ .b1 {border-right-style: none;} .b2 {border-right-style: hidden;} .b3 {border-right-style: dotted;} .b4 {border-right-style: dashed;} .b5 {border-right-style: solid;} .b6 {border-right-style: double;} .b7 {border-right-style: groove;} .b8 {border-right-style: ridge;} .b9 {border-right-style: inset;} .b10 {border-right-style: outset;}
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-right-style' in that specification.
border-spacing - CSS: Cascading Style Sheets
html <table> <tr> <td>1</td><td>2</td><td>3</td> </tr> <tr> <td>4</td><td>5</td><td>6</td> </tr> <tr> <td>7</td><td>8</td><td>9</td> </tr> </table> css table { border-spacing: 1em .5em; padding: 0 2em 1em 0; border: 1px solid orange; } td { width: 1.5em; height: 1.5em; background: #d2d2d2; text-align: center; vertical-align: middle; }
result specifications specification status comment css level 2 (revision 1)the definition of 'border-spacing' in that specification.
border-start-end-radius - CSS: Cascading Style Sheets
e>{1,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-end-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-end-radius: 10px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-start-end-radius' in that specification.
border-start-start-radius - CSS: Cascading Style Sheets
,2}where <length-percentage> = <length> | <percentage> examples border radius with vertical text html <div> <p class="exampletext">example</p> </div> css div { background-color: rebeccapurple; width: 120px; height: 120px; border-start-start-radius: 10px; } .exampletext { writing-mode: vertical-rl; padding: 10px; background-color: #fff; border-start-start-radius: 10px; }
results specifications specification status comment css logical properties and values level 1the definition of 'border-start-start-radius' in that specification.
border-style - CSS: Cascading Style Sheets
table */ table { border-width: 3px; background-color: #52e396; } tr, td { padding: 2px; } /* border-style example classes */ .b1 {border-style:none;} .b2 {border-style:hidden;} .b3 {border-style:dotted;} .b4 {border-style:dashed;} .b5 {border-style:solid;} .b6 {border-style:double;} .b7 {border-style:groove;} .b8 {border-style:ridge;} .b9 {border-style:inset;} .b10 {border-style:outset;}
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-style' in that specification.
border-top-color - CSS: Cascading Style Sheets
note which side of the box is <span class="redtext">red</span>.</p> </div> css .mybox { border: solid 0.3em gold; border-top-color: red; width: auto; } .redtext { color: red; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-color' in that specification.
border-top-style - CSS: Cascading Style Sheets
lor: #52e385; } tr, td { padding: 3px; } /* border-top-style example classes */ .b1 {border-top-style: none;} .b2 {border-top-style: hidden;} .b3 {border-top-style: dotted;} .b4 {border-top-style: dashed;} .b5 {border-top-style: solid;} .b6 {border-top-style: double;} .b7 {border-top-style: groove;} .b8 {border-top-style: ridge;} .b9 {border-top-style: inset;} .b10 {border-top-style: outset;}
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border-top-style' in that specification.
border - CSS: Cascading Style Sheets
amazing, isn't it?</div> css div { border: 0.5rem outset pink; outline: 0.5rem solid khaki; box-shadow: 0 0 0 2rem skyblue; border-radius: 12px; font: bold 1rem sans-serif; margin: 2rem; padding: 1rem; outline-offset: 0.5rem; }
result specifications specification status comment css backgrounds and borders module level 3the definition of 'border' in that specification.
bottom - CSS: Cascading Style Sheets
l,<br>tall,<br>tall,<br>tall<br>content.</p> <div class="fixed"><p>fixed</p></div> <div class="absolute"><p>absolute</p></div> css p { font-size: 30px; line-height: 2em; } div { width: 48%; text-align: center; background: rgba(55,55,55,.2); border: 1px solid blue; } .absolute { position: absolute; bottom: 0; left: 0; } .fixed { position: fixed; bottom: 0; right: 0; }
result specifications specification status comment css positioned layout module level 3the definition of 'bottom' in that specification.
box-orient - CSS: Cascading Style Sheets
sibling.</p> </div> css div.example { display: -moz-box; /* mozilla */ display: -webkit-box; /* webkit */ display: box; /* as specified */ /* children should be oriented vertically */ -moz-box-orient: horizontal; /* mozilla */ -webkit-box-orient: horizontal; /* webkit */ box-orient: horizontal; /* as specified */ }
result specifications not part of any standard.
box-sizing - CSS: Cascading Style Sheets
/* total width: 160px + (2 * 20px) + (2 * 8px) = 216px total height: 80px + (2 * 20px) + (2 * 8px) = 136px content box width: 160px content box height: 80px */ } .border-box { box-sizing: border-box; /* total width: 160px total height: 80px content box width: 160px - (2 * 20px) - (2 * 8px) = 104px content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */ }
result specifications specification status comment css basic user interface module level 3the definition of 'box-sizing' in that specification.
break-after - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; } p { line-height: 1.5; break-after: column; } article { column-width: 200px; gap: 20px; }
result specifications specification status comment css fragmentation module level 3the definition of 'break-after' in that specification.
break-before - CSS: Cascading Style Sheets
duis suscipit faucibus dui sed ultricies.</p> </article> css html { font-family: helvetica, arial, sans-serif; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h2 { font-size: 1.2rem; color: red; letter-spacing: 1px; break-before: column; } p { line-height: 1.5; } article { column-width: 200px; gap: 20px; }
result specifications specification status comment css fragmentation module level 3the definition of 'break-before' in that specification.
break-inside - CSS: Cascading Style Sheets
dth: 80%; margin: 0 auto; } h1 { font-size: 3rem; letter-spacing: 2px; column-span: all; } h1 + p { margin-top: 0; } p { line-height: 1.5; break-after: column; } figure { break-inside: avoid; } img { max-width: 70%; display: block; margin: 0 auto; } figcaption { font-style: italic; font-size: 0.8rem; width: 70%; } article { column-width: 200px; gap: 20px; }
result specifications specification status comment css fragmentation module level 3the definition of 'break-inside' in that specification.
caption-side - CSS: Cascading Style Sheets
le</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> <br> <table class="bottom"> <caption>caption below the table</caption> <tr> <td>some data</td> <td>some more data</td> </tr> </table> css .top caption { caption-side: top; } .bottom caption { caption-side: bottom; } table { border: 1px solid red; } td { border: 1px solid blue; }
result specifications specification status comment css logical properties and values level 1the definition of 'caption-side' in that specification.
caret-color - CSS: Cascading Style Sheets
<input value="this field uses a default caret." size="64"/> <input class="custom" value="i have a custom caret color!" size="64"/> <p contenteditable class="custom">this paragraph can be edited, and its caret has a custom color as well!</p> css input { caret-color: auto; display: block; margin-bottom: .5em; } input.custom { caret-color: red; } p.custom { caret-color: green; }
result specifications specification status comment css basic user interface module level 3the definition of 'caret-color' in that specification.
clip - CSS: Cascading Style Sheets
le="original graphic"> <img id="top-left" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to upper left"> <img id="middle" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped towards middle"> <img id="bottom-right" src="https://udn.realityripple.com/samples/8f/15174f3500.jpg" title="graphic clipped to bottom right"> </p>
result specifications specification status comment css masking module level 1the definition of 'clip' in that specification.
color-adjust - CSS: Cascading Style Sheets
css .my-box { background-color: black; background-image: linear-gradient(rgba(0, 0, 180, 0.5), rgba(70, 140, 220, 0.5)); color: #900; width: 15rem; height: 6rem; text-align: center; font: 24px "helvetica", sans-serif; display: flex; align-items: center; justify-content: center; color-adjust: exact; } html <div class="my-box"> <p>need more contrast!</p> </div>
result specifications specification status comment css color adjustment module level 1the definition of 'color-adjust' in that specification.
column-count - CSS: Cascading Style Sheets
</p> css .content-box { column-count: 3; }
result specifications specification status comment css multi-column layout modulethe definition of 'column-count' in that specification.
column-rule-color - CSS: Cascading Style Sheets
don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-color: blue; }
result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-color' in that specification.
column-rule-style - CSS: Cascading Style Sheets
don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: dashed; }
result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-style' in that specification.
column-rule-width - CSS: Cascading Style Sheets
don't you think that's wonderful?</p> css p { column-count: 3; column-rule-style: solid; column-rule-width: thick; }
result specifications specification status comment css multi-column layout modulethe definition of 'column-rule-width' in that specification.
column-rule - CSS: Cascading Style Sheets
</p> css .content-box { padding: 0.3em; background: #ff7; column-count: 3; column-rule: inset 2px #33f; }
result specifications specification status comment css multi-column layout modulethe definition of 'column-rule' in that specification.
column-span - CSS: Cascading Style Sheets
the text is equally distributed over the columns.</p> </article> css article { columns: 3; } h2 { column-span: all; }
result specifications specification status comment css multi-column layout modulethe definition of 'column-span' in that specification.
column-width - CSS: Cascading Style Sheets
</p> css .content-box { column-width: 100px; }
result specifications specification status comment css writing modes level 4the definition of 'column-width' in that specification.
columns - CSS: Cascading Style Sheets
</p> css .content-box { columns: 3 auto; }
result specifications specification status comment css multi-column layout modulethe definition of 'columns' in that specification.
counter() - CSS: Cascading Style Sheets
here <counter-style> = <counter-style-name> | symbols()where <counter-style-name> = <custom-ident> examples default value compared to upper roman html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: listcounter; } li { counter-increment: listcounter; } li::after { content: "[" counter(listcounter) "] == [" counter(listcounter, upper-roman) "]"; }
result decimal-leading-zero compared to lower-alpha html <ol> <li></li> <li></li> <li></li> </ol> css ol { counter-reset: count; } li { counter-increment: count; } li::after { content: "[" counter(count, decimal-leading-zero) "] == [" counter(count, lower-alpha) "]"; }
result specifications specification status comment css lists module l...
<display-internal> - CSS: Cascading Style Sheets
html <main> <div> <label for="name">name</label> <input type="text" id="name" name="name"> </div> <div> <label for="age">age</label> <input type="text" id="age" name="age"> </div> </main> css main { display: table; } div { display: table-row; } label, input { display: table-cell; margin: 5px; }
result specifications specification status css display module level 3the definition of 'display-internal' in that specification.
<display-legacy> - CSS: Cascading Style Sheets
html <div class="container"> <div>flex item</div> <div>flex item</div> </div> not a flex item css .container { display: inline-flex; }
result in the new syntax the inline flex container would be created using two values, inline for the outer display type, and flex for the inner display type.
<display-listitem> - CSS: Cascading Style Sheets
examples html <div class="fake-list">i will display as a list item</div> css .fake-list { display: list-item; list-style-position: inside; }
result specifications specification status css display module level 3the definition of 'display-listitem' in that specification.
<easing-function> - CSS: Cascading Style Sheets
=== 'start animation') { divelem.style.animationname = 'move-right'; startbtn.textcontent = 'stop animation'; divelem.style.animationtimingfunction = selectelem.value; } else { divelem.style.animationname = 'unset'; startbtn.textcontent = 'start animation'; } }); selectelem.addeventlistener('change', () => { divelem.style.animationtimingfunction = selectelem.value; });
result cubic-bezier() function examples these cubic bézier curves are valid for use in css: /* the canonical bézier curve with four <number> in the [0,1] range.
empty-cells - CSS: Cascading Style Sheets
ble class="table_1"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> <br> <table class="table_2"> <tr> <td>moe</td> <td>larry</td> </tr> <tr> <td>curly</td> <td></td> </tr> </table> css .table_1 { empty-cells: show; } .table_2 { empty-cells: hide; } td, th { border: 1px solid gray; padding: 0.5rem; }
result specifications specification status comment css level 2 (revision 1)the definition of 'empty-cells' in that specification.
font-feature-settings - CSS: Cascading Style Sheets
these lead to more effective, predictable, understandable
results than font-feature-settings, which is a low-level feature designed to handle special cases where no other way exists to enable or access an opentype font feature.
font-language-override - CSS: Cascading Style Sheets
tter and ::first-line.inheritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | <string> examples using danish glyphs html <p class="para1">default language setting.</p> <p class="para2">this is a string with the <code>font-language-override</code> set to danish.</p> css p.para1 { font-language-override: normal; } p.para2 { font-language-override: "dan"; }
result specifications specification status comment css fonts module level 4the definition of 'font-language-override' in that specification.
font-smooth - CSS: Cascading Style Sheets
for those of you not on a macos system, here is a screenshot (the live version appears later on): html <p>without font smoothing</p> <p class="smoothed">with font smoothing</p> css html { background-color: black; color: white; font-size: 3rem; } p { text-align: center; } .smoothed { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
result specifications not part of any standard.
font-stretch - CSS: Cascading Style Sheets
ps://mdn.mozillademos.org/files/16014/leaguemonovariable.ttf'); font-family:'leaguemonovariable'; font-style: normal; font-stretch: 1% 500%; /* required by chrome */ } .container { border: 10px solid #f5f9fa; padding: 0 1rem; font: 1.5rem 'leaguemonovariable', sans-serif; } .condensed { font-stretch: 50%; } .normal { font-stretch: 100%; } .expanded { font-stretch: 200%; }
result specifications specification status comment css fonts module level 4the definition of 'font-stretch' in that specification.
font-synthesis - CSS: Cascading Style Sheets
站直。</em> css em { font-weight: bold; } .syn { font-synthesis: style weight; } .no-syn { font-synthesis: none; }
result specifications specification status comment css fonts module level 3the definition of 'font-synthesis' in that specification.
font-variant-alternates - CSS: Cascading Style Sheets
ornaments( <feature-value-name> ) | annotation( <feature-value-name> ) ]where <feature-value-name> = <custom-ident> examples html <p>firefox rocks!</p> <p class="variant">firefox rocks!</p> css @font-feature-values "leitura display swashes" { @swash { fancy: 1 } } p { font-size: 1.5rem; } .variant { font-family: leitura display swashes; font-variant-alternates: swash(fancy); }
result note: you need to install the opentype font leitura display swashes for this example to work.
font-variant-caps - CSS: Cascading Style Sheets
ntax normal | small-caps | all-small-caps | petite-caps | all-petite-caps | unicase | titling-caps examples setting the small-caps font variant html <p class="small-caps">firefox rocks, small caps!</p> <p class="normal">firefox rocks, normal caps!</p> css .small-caps { font-variant-caps: small-caps; font-style: italic; } .normal { font-variant-caps: normal; font-style: italic; }
result specifications specification status comment css fonts module level 3the definition of 'font-variant-caps' in that specification.
font-variant-east-asian - CSS: Cascading Style Sheets
�んせん</td> </tr> <tr> <th>normal/traditional:</th> <td>大学</td> <td class="traditional">大学</td> </tr> </tbody> </table> css td{ font-family:"yu gothic"; font-size:20px; } th{ color:grey; padding-right:10px; } .ruby { font-variant-east-asian: ruby; } .jis78 { font-variant-east-asian: jis78; } .traditional{ font-variant-east-asian: traditional; }
result specifications specification status comment css fonts module level 3the definition of 'font-variant-east-asian' in that specification.
font-variant-numeric - CSS: Cascading Style Sheets
e under the terms of the sil open font license, version 1.1: http://scripts.sil.org/cms/scripts/page.php?item_id=ofl_web */ @font-face { font-family: "source sans pro"; font-style: normal; font-weight: 400; src: url("https://mdn.mozillademos.org/files/15757/sourcesanspro-regular.otf") format("opentype"); } .ordinal { font-variant-numeric: ordinal; font-family: "source sans pro"; }
result specifications specification status comment css fonts module level 3the definition of 'font-variant-numeric' in that specification.
font-variant-position - CSS: Cascading Style Sheets
heritedyescomputed valueas specifiedanimation typediscrete formal syntax normal | sub | super examples setting superscript and subscript forms html <p class="normal">normal!</p> <p class="super">super!</p> <p class="sub">sub!</p> css p { display: inline; } .normal { font-variant-position: normal; } .super { font-variant-position: super; } .sub { font-variant-position: sub; }
result specifications specification status comment css fonts module level 3the definition of 'font-variant-position' in that specification.
font-variant - CSS: Cascading Style Sheets
l-fractions | stacked-fractions ]<east-asian-variant-values> = [ jis78 | jis83 | jis90 | jis04 | simplified | traditional ]<east-asian-width-values> = [ full-width | proportional-width ] examples setting the small-caps font variant html <p class="normal">firefox rocks!</p> <p class="small">firefox rocks!</p> css p.normal { font-variant: normal; } p.small { font-variant: small-caps; }
result specifications specification status comment css fonts module level 3the definition of 'font-variant' in that specification.
font-weight - CSS: Cascading Style Sheets
*/ span { font-weight: lighter; }
result specifications specification status comment css fonts module level 4the definition of 'font-weight' in that specification.
grid-area - CSS: Cascading Style Sheets
tom-ident> ] ] examples setting grid areas html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template: repeat(4, 1fr) / 50px 100px; } #item1 { background-color: lime; grid-area: 2 / 2 / auto / span 3; } #item2 { background-color: yellow; } #item3 { background-color: blue; }
result specifications specification status comment css grid layoutthe definition of 'grid-area' in that specification.
grid-auto-columns - CSS: Cascading Style Sheets
> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid column size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { height: 100px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-columns: 200px; } #grid > div { background-color: lime; }
result specifications specification status comment css grid layoutthe definition of 'grid-auto-columns' in that specification.
grid-auto-flow - CSS: Cascading Style Sheets
"row" : "column"; if (dense.checked) { gridautoflow += " dense"; } grid.style.gridautoflow = gridautoflow; }
result specifications specification status comment css grid layoutthe definition of 'grid-auto-flow' in that specification.
grid-auto-rows - CSS: Cascading Style Sheets
rcentage> | min-content | max-content | autowhere <length-percentage> = <length> | <percentage> examples setting grid row size html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { width: 200px; display: grid; grid-template-areas: "a a"; grid-gap: 10px; grid-auto-rows: 100px; } #grid > div { background-color: lime; }
result specifications specification status comment css grid layoutthe definition of 'grid-auto-rows' in that specification.
grid-column-end - CSS: Cascading Style Sheets
art: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; }
result specifications specification status comment css grid layoutthe definition of 'grid-column-end' in that specification.
grid-column-start - CSS: Cascading Style Sheets
art: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; }
result specifications specification status comment css grid layoutthe definition of 'grid-column-start' in that specification.
grid-column - CSS: Cascading Style Sheets
ocation html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 100px; grid-template-columns: repeat(6, 1fr); grid-template-rows: 100px; } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-column: 2 / 4; } #item3 { background-color: blue; grid-column: span 2 / 7; }
result specifications specification status comment css grid layoutthe definition of 'grid-column' in that specification.
grid-row-end - CSS: Cascading Style Sheets
art: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; }
result specifications specification status comment css grid layoutthe definition of 'grid-row-end' in that specification.
grid-row-start - CSS: Cascading Style Sheets
art: 3; grid-row-end: 5; } * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { border: 2px solid #ffa94d; border-radius: 5px; background-color: #ffd8a8; padding: 1em; color: #d9480f; } .nested { border: 2px solid #ffec99; border-radius: 5px; background-color: #fff9db; padding: 1em; }
result specifications specification status comment css grid layoutthe definition of 'grid-row-start' in that specification.
grid-row - CSS: Cascading Style Sheets
and location html <div id="grid"> <div id="item1"></div> <div id="item2"></div> <div id="item3"></div> </div> css #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(6, 1fr); } #item1 { background-color: lime; } #item2 { background-color: yellow; grid-row: 2 / 4; } #item3 { background-color: blue; grid-row: span 2 / 7; }
result specifications specification status comment css grid layoutthe definition of 'grid-row' in that specification.
grid-template-areas - CSS: Cascading Style Sheets
"nav main" "nav foot"; grid-template-rows: 50px 1fr 30px; grid-template-columns: 150px 1fr; } #page > header { grid-area: head; background-color: #8ca0ff; } #page > nav { grid-area: nav; background-color: #ffa08c; } #page > main { grid-area: main; background-color: #ffff64; } #page > footer { grid-area: foot; background-color: #8cffa0; }
result specifications specification status comment css grid layoutthe definition of 'grid-template-areas' in that specification.
grid-template - CSS: Cascading Style Sheets
/ 120px 1fr; } header { background-color: lime; grid-area: head; } nav { background-color: lightblue; grid-area: nav; } main { background-color: yellow; grid-area: main; } footer { background-color: red; grid-area: foot; } html <section id="page"> <header>header</header> <nav>navigation</nav> <main>main area</main> <footer>footer</footer> </section>
result specifications specification status comment css grid layoutthe definition of 'grid-template' in that specification.
grid - CSS: Cascading Style Sheets
/ <'grid-template-columns'> examples creating a grid layout html <div id="container"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #container { display: grid; grid: repeat(2, 60px) / auto-flow 80px; } #container > div { background-color: #8ca0ff; width: 50px; height: 50px; }
result specifications specification status comment css grid layoutthe definition of 'grid' in that specification.
hanging-punctuation - CSS: Cascading Style Sheets
praesent laoreet tortor massa, sit amet vulputate nulla pharetra ut.”</p> css p { hanging-punctuation: first last; margin: .5rem; }
result specifications specification status comment css text module level 3the definition of 'hanging-punctuation' in that specification.
height - CSS: Cascading Style Sheets
</div> </div> css div { width: 250px; margin-bottom: 5px; border: 2px solid blue; } #taller { height: 50px; } #shorter { height: 25px; } #parent { height: 100px; } #child { height: 50%; width: 75%; }
result specifications specification status comment css box sizing module level 4the definition of 'height' in that specification.
hyphens - CSS: Cascading Style Sheets
orithm decides (if needed)</dt> <dd lang="en" class="auto">an extreme­ly long english word</dd> </dl> css dd { width: 55px; border: 1px solid black; } dd.none { -webkit-hyphens: none; -ms-hyphens: none; hyphens: none; } dd.manual { -webkit-hyphens: manual; -ms-hyphens: manual; hyphens: manual; } dd.auto { -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
result specifications specification status comment css text module level 3the definition of 'hyphens' in that specification.
image-orientation - CSS: Cascading Style Sheets
alt="orientation taken from the image"> <select id="imageorientation"> <option value="from-image">from-image</option> <option value="none">none</option> </select> javascript var imageorientation = document.getelementbyid("imageorientation"); imageorientation.addeventlistener("change", function (evt) { document.getelementbyid("image").style.imageorientation = evt.target.value; });
result specifications specification status comment css images module level 3the definition of 'image-orientation' in that specification.
image-rendering - CSS: Cascading Style Sheets
/de/cedd397be3.jpg" /> <img class="crisp-edges" alt="crisp-edges" src="https://udn.realityripple.com/samples/de/cedd397be3.jpg" /> </div> img { height: 200px; } css .auto { image-rendering: auto; } .pixelated { -ms-interpolation-mode: nearest-neighbor; image-rendering: pixelated; } .crisp-edges { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
result specifications specification status comment css images module level 3the definition of 'image-rendering' in that specification.
image() - CSS: Cascading Style Sheets
the spacial dimension definition in the media specification indicates that percentages will be supported as well: xywh=160,120,320,240 /*
results in a 320x240 image at x=160 and y=120 */ xywh=pixel:160,120,320,240 /*
results in a 320x240 image at x=160 and y=120 */ xywh=percent:25,25,50,50 /*
results in a 50%x50% image at x=25% and y=25% */ the image fragments can be used in url() notation as well.
initial-letter-align - CSS: Cascading Style Sheets
ial letter - ideographic</p> css .auto { -webkit-initial-letter-align: auto; initial-letter-align: auto; } .alphabetic { -webkit-initial-letter-align: alphabetic; initial-letter-align: alphabetic; } .hanging { -webkit-initial-letter-align: hanging; initial-letter-align: hanging; } .ideographic { -webkit-initial-letter-align: ideographic; initial-letter-align: ideographic; }
result specifications specification status comment css inline layoutthe definition of 'initial-letter-align' in that specification.
initial-letter - CSS: Cascading Style Sheets
g initial letter size html <p class="normal">initial letter is normal</p> <p class="onefive">initial letter occupies 1.5 lines</p> <p class="three">initial letter occupies 3 lines</p> css .normal { -webkit-initial-letter: normal; initial-letter: normal; } .onefive { -webkit-initial-letter: 1.5; initial-letter: 1.5; } .three { -webkit-initial-letter: 3.0; initial-letter: 3.0; }
result specifications specification status comment css inline layoutthe definition of 'initial-letter' in that specification.
initial - CSS: Cascading Style Sheets
examples using initial to reset color for an element html <p> <span>this text is red.</span> <em>this text is in the initial color (typically black).</em> <span>this is red again.</span> </p> css p { color: red; } em { color: initial; }
result specifications specification status comment css cascading and inheritance level 4the definition of 'initial' in that specification.
inline-size - CSS: Cascading Style Sheets
l valueautoapplies tosame as width and heightinheritednopercentagesinline-size of containing blockcomputed valuesame as width and heightanimation typea length, percentage or calc(); formal syntax <'width'> examples setting inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; inline-size: 110px; }
result specifications specification status comment css logical properties and values level 1the definition of 'inline-size' in that specification.
inset-block-end - CSS: Cascading Style Sheets
cept that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting block end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-block-end: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'inset-block-end' in that specification.
inset-block - CSS: Cascading Style Sheets
ons are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting block start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-block: 20px 50px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'inset-block' in that specification.
inset-inline-end - CSS: Cascading Style Sheets
ept that directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline end offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; position: relative; inset-inline-end: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-end' in that specification.
inset-inline-start - CSS: Cascading Style Sheets
hat directions are logicalanimation typea length, percentage or calc(); formal syntax <'top'> examples setting inline start offset html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline-start: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline-start' in that specification.
inset-inline - CSS: Cascading Style Sheets
s are logicalanimation typea length, percentage or calc(); formal syntax <'top'>{1,2} examples setting inline start and end offsets html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; position: relative; inset-inline: 20px 50px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'inset-inline' in that specification.
inset - CSS: Cascading Style Sheets
pea length, percentage or calc(); formal syntax <'top'>{1,4} examples setting offsets for an element html <div> <span class="exampletext">example text</span> </div> css div { background-color: yellow; width: 150px; height: 120px; position: relative; } .exampletext { writing-mode: sideways-rl; position: absolute; inset: 20px 40px 30px 10px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'inset' in that specification.
isolation - CSS: Cascading Style Sheets
iv id="b" class="a"> <div id="d"> <div class="a c">auto</div> </div> <div id="e"> <div class="a c">isolate</div> </div> </div> css .a { background-color: rgb(0,255,0); } #b { width: 200px; height: 210px; } .c { width: 100px; height: 100px; border: 1px solid black; padding: 2px; mix-blend-mode: difference; } #d { isolation: auto; } #e { isolation: isolate; }
result specifications specification status comment compositing and blending level 1the definition of 'isolation' in that specification.
justify-content - CSS: Cascading Style Sheets
en</option> <option value="space-around">space-around</option> <option value="space-evenly">space-evenly</option> <option value="stretch">stretch</option> </select> javascript var justifycontent = document.getelementbyid("justifycontent"); justifycontent.addeventlistener("change", function (evt) { document.getelementbyid("container").style.justifycontent = evt.target.value; });
result specifications specification status comment css box alignment module level 3the definition of 'justify-content' in that specification.
justify-items - CSS: Cascading Style Sheets
round-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } article:hover, article:focus { justify-items: center; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; }
result specifications specification status comment css box alignment module level 3the definition of 'justify-items' in that specification.
justify-self - CSS: Cascading Style Sheets
d-auto-rows: 40px; grid-gap: 10px; width: 300px; justify-items: stretch; } span:nth-child(2) { justify-self: start; } span:nth-child(3) { justify-self: center; } span:nth-child(4) { justify-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; }
result specifications specification status comment css box alignment module level 3the definition of 'justify-self' in that specification.
left - CSS: Cascading Style Sheets
right: 0; background-color: #c1ffdb; } #example_3 { width: 600px; height: 400px; position: relative; top: 20px; left: 20px; background-color: #ffd7c2; } #example_4 { width:200px; height:200px; position:absolute; bottom:10px; right:20px; background-color:#ffc7e4; } #example_5 { position: absolute; right: 0; left: 0; top: 100px; background-color: #d7ffc2; }
result specifications specification status comment css positioned layout module level 3the definition of 'left' in that specification.
<length-percentage> - CSS: Cascading Style Sheets
<p>you can use percentages and lengths in so many places.</p> css p { /* length-percentage examples */ width: 75%; height: 200px; margin: 3rem; padding: 1%; border-radius: 10px 10%; font-size: 250%; line-height: 1.5em; /* length examples */ text-shadow: 1px 1px 1px red; border: 5px solid red; letter-spacing: 3px; /* percentage example */ text-size-adjust: 20%; }
result use in calc() where a <length-percentage> is specified as an allowable type, this means that the percentage resolves to a length and therefore can be used in a calc() expression.
letter-spacing - CSS: Cascading Style Sheets
spacing html <p class="normal">letter spacing</p> <p class="em-wide">letter spacing</p> <p class="em-wider">letter spacing</p> <p class="em-tight">letter spacing</p> <p class="px-wide">letter spacing</p> css .normal { letter-spacing: normal; } .em-wide { letter-spacing: 0.4em; } .em-wider { letter-spacing: 1em; } .em-tight { letter-spacing: -0.05em; } .px-wide { letter-spacing: 6px; }
result specifications specification status comment css text module level 3the definition of 'letter-spacing' in that specification.
line-break - CSS: Cascading Style Sheets
は湖のほとりで木々が輝いていた。<br>その景色に、美しいなぁと思わずつぶやいた。</p> </div> css .wrapbox { width: 10em; margin: 0.5em; white-space: normal; vertical-align: top; display: inline-block; } .auto { line-break: auto; } .loose { line-break: loose; } .normal { line-break: normal; } .strict { line-break: strict; } .anywhere { line-break: anywhere; }
result specifications specification status comment css text module level 3the definition of 'line-break' in that specification.
line-height-step - CSS: Cascading Style Sheets
:root { font-size: 12pt; --my-grid: 18pt; line-height-step: var(--my-grid); } h1 { font-size: 20pt; margin-top: calc(2 * var(--my-grid)); } the
result of these rules is shown below in the following screenshot: specifications specification status comment css rhythmic sizingthe definition of 'line-height-step' in that specification.
list-style-image - CSS: Cascading Style Sheets
formal definition initial valuenoneapplies tolist itemsinheritedyescomputed valuenone or the image with its uri made absoluteanimation typediscrete formal syntax <url> | none examples setting list item images html <ul> <li>item 1</li> <li>item 2</li> </ul> css ul { list-style-image: url("https://mdn.mozillademos.org/files/11981/starsolid.gif"); }
result specifications specification status comment css lists module level 3the definition of 'list-style-image' in that specification.
list-style-position - CSS: Cascading Style Sheets
-img">list 3 <li>list item 3-1</li> <li>list item 3-2</li> <li>list item 3-3</li> <li>list item 3-4</li> </ul> css .inside { list-style-position: inside; list-style-type: square; } .outside { list-style-position: outside; list-style-type: circle; } .inside-img { list-style-position: inside; list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); }
result specifications specification status comment css lists module level 3the definition of 'list-style-position' in that specification.
list-style-type - CSS: Cascading Style Sheets
style-name> = <custom-ident> examples setting list item markers html list 1 <ol class="normal"> <li>hello</li> <li>world</li> <li>what's up?</li> </ol> list 2 <ol class="shortcut"> <li>looks</li> <li>like</li> <li>the</li> <li>same</li> </ol> css ol.normal { list-style-type: upper-alpha; } /* or use the shortcut "list-style": */ ol.shortcut { list-style: upper-alpha; }
result specifications specification status comment css counter styles level 3the definition of 'list-style-type' in that specification.
list-style - CSS: Cascading Style Sheets
x <'list-style-type'> | <'list-style-position'> | <'list-style-image'> examples setting list style type and position html list 1 <ul class="one"> <li>list item1</li> <li>list item2</li> <li>list item3</li> </ul> list 2 <ul class="two"> <li>list item a</li> <li>list item b</li> <li>list item c</li> </ul> css .one { list-style: circle; } .two { list-style: square inside; }
result specifications specification status comment css lists module level 3the definition of 'list-style' in that specification.
margin-block-end - CSS: Cascading Style Sheets
; if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block-end: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-end' in that specification.
margin-block-start - CSS: Cascading Style Sheets
specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting block start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-block-start: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'margin-block-start' in that specification.
margin-block - CSS: Cascading Style Sheets
a percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting block start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-block: 20px 40px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'margin-block' in that specification.
margin-bottom - CSS: Cascading Style Sheets
-bottom:1em; height:3em; } .box1 { margin-bottom:-1.5em; height:4em; } .box2 { border:1px dashed black; border-width:1px 0; margin-bottom:2em; } some definitions for container and divs so margins' effects can be seen more clearly .container { background-color:orange; width:320px; border:1px solid black; } div { width:320px; background-color:gold; }
result specifications specification status comment css basic box modelthe definition of 'margin-bottom' in that specification.
margin-inline-end - CSS: Cascading Style Sheets
if specified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline end margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-end: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-end' in that specification.
margin-inline-start - CSS: Cascading Style Sheets
pecified as a percentage, the specified value; otherwise, autoanimation typea length formal syntax <'margin-left'> examples setting inline start margin html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; margin-inline-start: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline-start' in that specification.
margin-inline - CSS: Cascading Style Sheets
percentage, the specified value; otherwise, autoanimation typediscrete formal syntax <'margin-left'>{1,2} examples setting inline start and end margins html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; margin-inline: 20px 40px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'margin-inline' in that specification.
mask-border - CSS: Cascading Style Sheets
/* width */ 1px /* outset */ round; /* repeat */ /* updated standard shorthand property, not supported anywhere yet */ mask-border: url("https://udn.realityripple.com/samples/2d/fd08a3134c.png") /* source */ 30 fill / /* slice */ 20px / /* width */ 1px /* outset */ round; /* repeat */ }
result specifications specification status comment css masking module level 1the definition of 'mask-border' in that specification.
mask-clip - CSS: Cascading Style Sheets
-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> <option value="no-clip">no-clip</option> </select> javascript var clipbox = document.getelementbyid("clipbox"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskclip = evt.target.value; });
result specifications specification status comment css masking module level 1the definition of 'mask-clip' in that specification.
mask-composite - CSS: Cascading Style Sheets
ompositemode"> <option value="add">add</option> <option value="subtract">subtract</option> <option value="intersect">intersect</option> <option value="exclude">exclude</option> </select> javascript var clipbox = document.getelementbyid("compositemode"); clipbox.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskcomposite = evt.target.value; });
result specifications specification status comment css masking module level 1the definition of 'mask-composite' in that specification.
mask-image - CSS: Cascading Style Sheets
age>{1,2}<color-stop-angle> = <angle-percentage>{1,2}<angle-percentage> = <angle> | <percentage> examples setting a mask image with a url html <div id="masked"></div> css #masked { width: 100px; height: 100px; background-color: #8cffa0; -webkit-mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); mask-image: url(https://mdn.mozillademos.org/files/12676/star.svg); }
result specifications specification status comment css masking module level 1the definition of 'mask-image' in that specification.
mask-mode - CSS: Cascading Style Sheets
html <div id="masked"> </div> <select id="maskmode"> <option value="alpha">alpha</option> <option value="luminance">luminance</option> <option value="match-source">match-source</option> </select> javascript var maskmode = document.getelementbyid("maskmode"); maskmode.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskmode = evt.target.value; });
result specifications specification status comment css masking module level 1the definition of 'mask-mode' in that specification.
mask-origin - CSS: Cascading Style Sheets
/option> <option value="margin-box">margin-box</option> <option value="fill-box">fill-box</option> <option value="stroke-box">stroke-box</option> <option value="view-box">view-box</option> </select> javascript var origin = document.getelementbyid("origin"); origin.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskorigin = evt.target.value; });
result specifications specification status comment css masking module level 1the definition of 'mask-origin' in that specification.
mask-position - CSS: Cascading Style Sheets
nter center">center center</option> <option value="bottom left">bottom left</option> <option value="10px 20px">10px 20px</option> <option value="60% 20%">60% 20%</option> </select> javascript var maskposition = document.getelementbyid("maskposition"); maskposition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskposition = evt.target.value; });
result specifications specification status comment css masking module level 1the definition of 'mask-position' in that specification.
mask-repeat - CSS: Cascading Style Sheets
> <option value="repeat" selected>repeat</option> <option value="space">space</option> <option value="round">round</option> <option value="no-repeat">no-repeat</option> </select> javascript content var repetition = document.getelementbyid("repetition"); repetition.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.maskrepeat = evt.target.value; });
result multiple mask image support you can specify a different <repeat-style> for each mask image, separated by commas: .examplethree { mask-image: url('mask1.png'), url('mask2.png'); mask-repeat: repeat-x, repeat-y; } each image is matched with the corresponding repeat style, from first specified to last.
mask-size - CSS: Cascading Style Sheets
0% 80%</option> <option value="50%" selected>50%</option> <option value="200px 100px">200px 100px</option> <option value="cover">cover</option> <option value="contain">contain</option> </select> javascript var masksize = document.getelementbyid("masksize"); masksize.addeventlistener("change", function (evt) { document.getelementbyid("masked").style.masksize = evt.target.value; });
result specifications specification status comment css masking module level 1the definition of 'mask-size' in that specification.
max-block-size - CSS: Cascading Style Sheets
.standard-box { padding: 4px; background-color: #abcdef; color: #000; font: 16px "open sans", "helvetica", "arial", sans-serif; max-block-size: 160px; min-block-size: 100px; } .horizontal { writing-mode: horizontal-tb; } .vertical { writing-mode: vertical-rl; }
result specifications specification status comment css logical properties and values level 1the definition of 'max-block-size' in that specification.
max-inline-size - CSS: Cascading Style Sheets
eightinheritednopercentagesinline-size of containing blockcomputed valuesame as max-width and max-heightanimation typea length, percentage or calc(); formal syntax <'max-width'> examples setting max inline size in pixels html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 100%; max-inline-size: 200px; }
result specifications specification status comment css logical properties and values level 1the definition of 'max-inline-size' in that specification.
max-width - CSS: Cascading Style Sheets
</div> </div> css #parent { background: lightblue; width: 300px; } #child { background: gold; width: 100%; max-width: 150px; }
result specifications specification status comment css box sizing module level 4the definition of 'max-width' in that specification.
min-block-size - CSS: Cascading Style Sheets
width and heightinheritednopercentagesblock-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum block size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; min-block-size: 200px; }
result specifications specification status comment css logical properties and values level 1the definition of 'min-block-size' in that specification.
min-inline-size - CSS: Cascading Style Sheets
itednopercentagesinline-size of containing blockcomputed valuesame as min-width and min-heightanimation typea length, percentage or calc(); formal syntax <'min-width'> examples setting minimum inline size for vertical text html <p class="exampletext">example text</p> css .exampletext { writing-mode: vertical-rl; background-color: yellow; block-size: 5%; min-inline-size: 200px; }
result specifications specification status comment css logical properties and values level 1the definition of 'min-inline-size' in that specification.
min() - CSS: Cascading Style Sheets
syntax the min() function takes one or more comma-separated expressions as its parameter, with the smallest (most negative) expression value
result used as the value.
mix-blend-mode - CSS: Cascading Style Sheets
ss .circle { width: 80px; height: 80px; border-radius: 50%; mix-blend-mode: screen; position: absolute; } .circle-1 { background: red; } .circle-2 { background: lightgreen; left: 40px; } .circle-3 { background: blue; left: 20px; top: 40px; } .isolate { isolation: isolate; /* without isolation, the background color will be taken into account */ position: relative; }
result using mix-blend-mode with svg svg <svg> <g class="isolate"> <circle cx="40" cy="40" r="40" fill="red"/> <circle cx="80" cy="40" r="40" fill="lightgreen"/> <circle cx="60" cy="80" r="40" fill="blue"/> </g> </svg> css circle { mix-blend-mode: screen; } .isolate { isolation: isolate; } /* without isolation, the background color will be taken into account */
result specifi...
offset-anchor - CSS: Cascading Style Sheets
9%, #000 50%, #000 51%, transparent 52%); border: 1px solid #ccc; margin-bottom: 10px; } .offset-anchor1 { offset-anchor: auto; background: cyan; } .offset-anchor2 { offset-anchor: right top; background: purple; } .offset-anchor3 { offset-anchor: left bottom; background: magenta; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
result specifications specification status comment motion path module level 1the definition of 'offset-anchor' in that specification.
offset-distance - CSS: Cascading Style Sheets
html <div id="motion-demo"></div> css #motion-demo { offset-path: path('m20,20 c20,100 200,0 200,100'); animation: move 3000ms infinite alternate ease-in-out; width: 40px; height: 40px; background: cyan; } @keyframes move { 0% { offset-distance: 0%; } 100% { offset-distance: 100%; } }
result specifications specification status comment motion path module level 1the definition of 'offset-distance' in that specification.
offset-path - CSS: Cascading Style Sheets
issorhalf { offset-path: path('m900,190 l993,245 v201 a11,11 0 0,1 1004,190 h1075 a11,11 0 0,1 1086,201 v300 l1294,423 h1216 a11,11 0 0,0 1205,434 v789 a11,11 0 0,1 1194,800 h606 a11,11 0 0,1 595,789 v434 a11,11 0 0,0 584,423 h506 l900,190'); animation: followpath 4s linear infinite; } @keyframes followpath { to { motion-offset: 100%; offset-distance: 100%; } }
result specifications <body> specification status comment motion path module level 1the definition of 'offset-path' in that specification.
offset-rotate - CSS: Cascading Style Sheets
gin: 20px; clip-path: polygon(0% 0%, 70% 0%, 100% 50%, 70% 100%, 0% 100%, 30% 50%); animation: move 5000ms infinite alternate ease-in-out; offset-path: path('m20,20 c20,50 180,-10 180,20'); } div:nth-child(1) { offset-rotate: auto; } div:nth-child(2) { offset-rotate: auto 90deg; } div:nth-child(3) { offset-rotate: 30deg; } @keyframes move { 100% { offset-distance: 100%; } }
result specifications specification status comment motion path module level 1the definition of 'offset-rotate' in that specification.
offset - CSS: Cascading Style Sheets
examples animating an element along a path html <div id="offsetelement"></div> css @keyframes move { from { offset-distance: 0%; } to { offset-distance: 100%; } } #offsetelement { width: 50px; height: 50px; background-color: blue; offset: path("m 100 100 l 300 100 l 200 300 z") auto; animation: move 3s linear infinite; }
result specifications specification status comment motion path module level 1the definition of 'offset' in that specification.
opacity - CSS: Cascading Style Sheets
an barely see this.</div> <div class="medium">this is easier to see.</div> <div class="heavy">this is very easy to see.</div> css div { background-color: yellow; } .light { opacity: 0.2; /* barely see the text over the background */ } .medium { opacity: 0.5; /* see the text more clearly over the background */ } .heavy { opacity: 0.9; /* see the text very clearly over the background */ }
result setting opacity on hover html <img src="//developer.mozilla.org/static/img/opengraph-logo.png" alt="mdn logo" width="128" height="146" class="opacity"> css img.opacity { opacity: 1; filter: alpha(opacity=100); /* ie8 and lower */ zoom: 1; /* triggers "haslayout" in ie 7 and lower */ } img.opacity:hover { opacity: 0.5; filter: alpha(opacity=50); zoom: 1; }
result spec...
order - CSS: Cascading Style Sheets
html <header>...</header> <main> <article>article</article> <nav>nav</nav> <aside>aside</aside> </main> <footer>...</footer> css main { display: flex; text-align:center; } main > article { flex:1; order: 2; } main > nav { width: 200px; order: 1; } main > aside { width: 200px; order: 3; }
result specifications specification status comment css flexible box layout modulethe definition of 'order' in that specification.
orphans - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; height: 150px; columns: 3; orphans: 3; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; }
result specifications specification status comment css fragmentation module level 3the definition of 'orphans' in that specification.
outline-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples setting a solid blue outline html <p>my outline is blue, as you can see.</p> css p { outline: 2px solid; /* set the outline width and style */ outline-color: #0000ff; /* make the outline blue */ margin: 5px; }
result specifications specification status comment css basic user interface module level 3the definition of 'outline-color' in that specification.
outline-offset - CSS: Cascading Style Sheets
value0applies toall elementsinheritednocomputed valueas specified, but with relative lengths converted into absolute lengthsanimation typea length formal syntax <length> examples setting outline offset in pixels html <p>gallia est omnis divisa in partes tres.</p> css p { outline: 1px dashed red; outline-offset: 10px; background: yellow; border: 1px solid blue; margin: 15px; }
result specifications specification status comment css basic user interface module level 3the definition of 'outline-offset' in that specification.
outline-width - CSS: Cascading Style Sheets
k">thick</span> <span id="twopixels">2px</span> <span id="oneex">1ex</span> <span id="em">1.2em</span> css span { outline-style: solid; display: inline-block; margin: 20px; } #thin { outline-width: thin; } #medium { outline-width: medium; } #thick { outline-width: thick; } #twopixels { outline-width: 2px; } #oneex { outline-width: 1ex; } #em { outline-width: 1.2em; }
result specifications specification status comment css basic user interface module level 3the definition of 'outline-width' in that specification.
outline - CSS: Cascading Style Sheets
-style: discrete formal syntax [ <'outline-color'> | <'outline-style'> | <'outline-width'> ] examples using outline to set a focus style html <a href="#">this link has a special focus style.</a> css a { border: 1px solid; border-radius: 3px; display: inline-block; margin: 10px; padding: 5px; } a:focus { outline: 4px dotted #e73; outline-offset: 4px; background: #ffa; }
result specifications specification status comment css basic user interface module level 3the definition of 'outline' in that specification.
overflow-block - CSS: Cascading Style Sheets
</div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-block: hidden; margin-bottom: 120px;} #div2 { overflow-block: scroll; margin-bottom: 120px;} #div3 { overflow-block: visible; margin-bottom: 120px;} #div4 { overflow-block: auto; margin-bottom: 120px;}
result specifications specification status comment css overflow module level 3the definition of 'overflow-block' in that specification.
overflow-inline - CSS: Cascading Style Sheets
�� on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-inline: hidden;} #div2 { overflow-inline: scroll;} #div3 { overflow-inline: visible;} #div4 { overflow-inline: auto;}
result specifications specification status comment css overflow module level 3the definition of 'overflow-inline' in that specification.
overflow-x - CSS: Cascading Style Sheets
flow-x:auto</code> — on most browsers, equivalent to <code>scroll</code> <div id="div4"> abcdefghijklmopqrstuvwxyzabcdefghijklmopqrstuvwxyz </div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; margin-bottom: 12px; } #div1 { overflow-x: hidden;} #div2 { overflow-x: scroll;} #div3 { overflow-x: visible;} #div4 { overflow-x: auto;}
result specifications specification status comment css overflow module level 3the definition of 'overflow-x' in that specification.
overflow-y - CSS: Cascading Style Sheets
</div> </li> </ul> css #div1, #div2, #div3, #div4 { border: 1px solid black; width: 250px; height: 100px; } #div1 { overflow-y: hidden; margin-bottom: 12px;} #div2 { overflow-y: scroll; margin-bottom: 12px;} #div3 { overflow-y: visible; margin-bottom: 120px;} #div4 { overflow-y: auto; margin-bottom: 120px;}
result specifications specification status comment css overflow module level 3the definition of 'overflow-y' in that specification.
overscroll-behavior-block - CSS: Cascading Style Sheets
p: 50px; left: 50px; overscroll-behavior-block: contain; } div > div { height: 1500px; width: 100%; background-color: yellow; background-image: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 340px; position: relative; top: 10px; left: 10px; }
result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-block' in that specification.
overscroll-behavior-inline - CSS: Cascading Style Sheets
p: 50px; left: 50px; overscroll-behavior-inline: contain; } div > div { height: 100%; width: 1500px; background-color: yellow; background-image: repeating-linear-gradient(to right, rgba(0,0,0,0) 0px, rgba(0,0,0,0) 19px, rgba(0,0,0,0.5) 20px); } p { padding: 10px; background-color: rgba(255,0,0,0.5); margin: 0; width: 360px; position: relative; top: 10px; left: 10px; }
result specifications specification status comment css overscroll behavior module level 1the definition of 'overscroll-behavior-inline' in that specification.
padding-block-end - CSS: Cascading Style Sheets
lockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical text html content <div> <p class="exampletext">example text</p> </div> css content div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-end: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-end' in that specification.
padding-block-start - CSS: Cascading Style Sheets
f containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-lr; padding-block-start: 20px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'padding-block-start' in that specification.
padding-block - CSS: Cascading Style Sheets
of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting block padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-block: 20px 40px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'padding-block' in that specification.
padding-inline - CSS: Cascading Style Sheets
f containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height: 120px; } .exampletext { writing-mode: vertical-rl; padding-inline: 20px 40px; background-color: #c8c800; }
result specifications specification status comment css logical properties and values level 1the definition of 'padding-inline' in that specification.
padding - CSS: Cascading Style Sheets
ding-top: the percentage as specified or the absolute lengthanimation typea length formal syntax [ <length> | <percentage> ]{1,4} examples setting padding with pixels html <h4>this element has moderate padding.</h4> <h3>the padding is huge in this element!</h3> css h4 { background-color: lime; padding: 20px 50px; } h3 { background-color: cyan; padding: 110px 50px 50px 110px; }
result setting padding with pixels and percentages padding: 5%; /* all sides: 5% padding */ padding: 10px; /* all sides: 10px padding */ padding: 10px 20px; /* top and bottom: 10px padding */ /* left and right: 20px padding */ padding: 10px 3% 20px; /* top: 10px padding */ /* left and right...
page-break-inside - CSS: Cascading Style Sheets
it has a little bit more text than the third one.</p> </div> css .page { background-color: #8cffa0; height: 90px; width: 200px; columns: 1; column-width: 100px; } .list, ol, ul, p { break-inside: avoid; } p { background-color: #8ca0ff; } ol, ul, .list { margin: 0.5em 0; display: block; background-color: orange; } p:first-child { margin-top: 0; }
result specifications specification status comment css paged media module level 3the definition of 'page-break-inside' in that specification.
paint-order - CSS: Cascading Style Sheets
nt order of stroke and fill svg <svg xmlns="http://www.w3.org/2000/svg" width="400" height="200"> <text x="10" y="75">stroke in front</text> <text x="10" y="150" class="stroke-behind">stroke behind</text> </svg> css text { font-family: sans-serif; font-size: 50px; font-weight: bold; fill: black; stroke: red; stroke-width: 4px; } .stroke-behind { paint-order: stroke fill; }
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'paint-order' in that specification.
perspective-origin - CSS: Cascading Style Sheets
z(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the layout a little nicer */ section { background-color: #eee; padding: 10px; font-family: sans-serif; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); }
result specifications specification status comment css transforms level 2the definition of 'perspective-origin' in that specification.
perspective - CSS: Cascading Style Sheets
0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(196, 196, 0, 0.7); transform: rotatex(90deg) translatez(50px); } .bottom { background: rgba(196, 0, 196, 0.7); transform: rotatex(-90deg) translatez(50px); } /* make the table a little nicer */ th, p, td { background-color: #eeeeee; padding: 10px; font-family: sans-serif; text-align: left; }
result specifications specification status comment css transforms level 2the definition of 'perspective' in that specification.
place-content - CSS: Cascading Style Sheets
: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed in the live sample */ place-content: flex-end center; /* can be changed in the live sample */ } div > div { border: 2px solid #8c8c8c; width: 50px; background-color: #a0c8ff; } .small { font-size: 12px; height: 40px; } .large { font-size: 14px; height: 50px; }
result specifications specification status comment css box alignment module level 3the definition of 'place content' in that specification.
place-items - CSS: Cascading Style Sheets
lay.addeventlistener('change', function (evt) { container.classname = evt.target.value; }); css #container { height:200px; width: 240px; place-items: center; /* you can change this value by selecting another option in the list */ background-color: #8c8c8c; } .flex { display: flex; flex-wrap: wrap; } .grid { display: grid; grid-template-columns: repeat(auto-fill, 50px); }
result specifications specification status comment css box alignment module level 3the definition of 'place-items' in that specification.
place-self - CSS: Cascading Style Sheets
1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: start center; } span:nth-child(3) { place-self: center start; } span:nth-child(4) { place-self: end; } article span { background-color: black; color: white; margin: 1px; text-align: center; } article, span { padding: 10px; border-radius: 7px; } article { margin: 20px; }
result specifications specification status comment css box alignment module level 3the definition of 'place-self' in that specification.
pointer-events - CSS: Cascading Style Sheets
html <ul> <li><a href="https://developer.mozilla.org">mdn</a></li> <li><a href="http://example.com">example.com</a></li> </ul> css a[href="http://example.com"] { pointer-events: none; }
result specifications specification status comment scalable vector graphics (svg) 2the definition of 'pointer-events' in that specification.
rotate - CSS: Cascading Style Sheets
html <div> <p class="rotate">rotation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .rotate { transition: rotate 1s; } div:hover .rotate { rotate: 1 -0.5 1 180deg; }
result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
row-gap (grid-row-gap) - CSS: Cascading Style Sheets
ngth-percentage> = <length> | <percentage> examples flex layout html <div id="flexbox"> <div></div> <div></div> <div></div> <div></div> <div></div> <div></div> </div> css #flexbox { display: flex; flex-wrap: wrap; width: 300px; row-gap: 20px; } #flexbox > div { border: 1px solid green; background-color: lime; flex: 1 1 auto; width: 100px; height: 50px; }
result grid layout html <div id="grid"> <div></div> <div></div> <div></div> </div> css #grid { grid-row-gap: 20px; } #grid { display: grid; height: 200px; grid-template-columns: 200px; grid-template-rows: repeat(3, 1fr); row-gap: 20px; } #grid > div { border: 1px solid green; background-color: lime; }
result specifications specification status comme...
ruby-position - CSS: Cascading Style Sheets
formal definition initial valueoverapplies toruby annotations containersinheritedyescomputed valueas specifiedanimation typediscrete formal syntax over | under | inter-character examples ruby positioned over the text html <ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby> css ruby { ruby-position:over; }
result ruby positioned under the text html <ruby> <rb>超電磁砲</rb> <rp>(</rp><rt>レールガン</rt><rp>)</rp> </ruby> css ruby { ruby-position:under; }
result specifications specification status comment css ruby layout module level 1the definition of 'ruby-position' in that specification.
scale - CSS: Cascading Style Sheets
element on hover html <div> <p class="scale">scaling</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .scale { transition: scale 1s; } div:hover .scale { scale: 2 0.7; }
result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
scroll-behavior - CSS: Cascading Style Sheets
none; } nav, scroll-container { display: block; margin: 0 auto; text-align: center; } nav { width: 339px; padding: 5px; border: 1px solid black; } scroll-container { display: block; width: 350px; height: 200px; overflow-y: scroll; scroll-behavior: smooth; } scroll-page { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 5em; }
result specifications specification status comment css object model (cssom) view modulethe definition of 'scroll-behavior' in that specification.
scroll-snap-coordinate - CSS: Cascading Style Sheets
: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .coordinate0 > div { scroll-snap-coordinate: 0 0; } .coordinate25 > div { scroll-snap-coordinate: 25px 0; } .coordinate50 > div { scroll-snap-coordinate: 50px 0; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; }
result specifications not part of any standard.
scroll-snap-destination - CSS: Cascading Style Sheets
tination25 { scroll-snap-destination: 25px 0; } .destination50 { scroll-snap-destination: 50px 0; } .scrollcontainer > div { width: 100px; height: 100px; display: inline-block; line-height: 100px; text-align: center; font-size: 50px; } .scrollcontainer > div:nth-child(even) { background-color: #87ea87; } .scrollcontainer > div:nth-child(odd) { background-color: #87ccea; }
result specifications not part of any standard.
scroll-snap-points-x - CSS: Cascading Style Sheets
flow: auto; white-space: nowrap; scroll-snap-points-x: repeat(100%); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87ccea; }
result specifications not part of any standard.
scroll-snap-points-y - CSS: Cascading Style Sheets
ow-x: hidden; overflow-y: auto; scroll-snap-points-y: repeat(200px); scroll-snap-type: mandatory; font-size: 0; } #container > div { width: 200px; height: 200px; display: inline-block; line-height: 200px; text-align: center; font-size: 100px; } #container > div:nth-child(even) { background-color: #87ea87; } #container > div:nth-child(odd) { background-color: #87ccea; }
result specifications not part of any standard.
scroll-snap-stop - CSS: Cascading Style Sheets
rtl</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> </div>
result specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-stop' in that specification.
scroll-snap-type - CSS: Cascading Style Sheets
font-size: 64px; width: 100%; height: 128px; } .y.container > div { line-height: 256px; font-size: 128px; width: 256px; height: 100%; } /* appearance fixes */ .y.container > div:first-child { line-height: 1.3; font-size: 64px; } /* coloration */ .container > div:nth-child(even) { background-color: #87ea87; } .container > div:nth-child(odd) { background-color: #87ccea; }
results specifications specification status comment css scroll snap module level 1the definition of 'scroll-snap-type' in that specification.
scrollbar-color - CSS: Cascading Style Sheets
dandelion cucumber earthnut pea peanut soko zucchini.</div>
result specifications specification status comment css scrollbars level 1the definition of 'scrollbar-color' in that specification.
scrollbar-width - CSS: Cascading Style Sheets
dandelion cucumber earthnut pea peanut soko zucchini.</div>
result specifications specification status comment css scrollbars level 1the definition of 'scrollbar-width' in that specification.
shape-margin - CSS: Cascading Style Sheets
ht triangle, and it will be so after this world is dead; and the inhabitant of mars, if he exists, probably knows its truth as we know it.</section> css section { max-width: 400px; } .shape { float: left; width: 150px; height: 150px; background-color: maroon; clip-path: polygon(0 0, 150px 150px, 0 150px); shape-outside: polygon(0 0, 150px 150px, 0 150px); shape-margin: 20px; }
result specifications specification status comment css shapes module level 1the definition of 'shape-margin' in that specification.
Specified value - CSS: Cascading Style Sheets
however, the border is not an inheriting property.</p> </div> css .fun { border: 1px dotted pink; font-family: fantasy; } p { color: green; }
result specifications specification status comment css level 2 (revision 2)the definition of 'cascaded value' in that specification.
symbols() - CSS: Cascading Style Sheets
examples html <ol> <li>one</li> <li>two</li> <li>three</li> <li>four</li> <li>five</li> </ol> css ol { list-style: symbols(cyclic "*" "†" "‡"); }
result specifications specification status comment css counter styles level 3the definition of 'symbols()' in that specification.
tab-size - CSS: Cascading Style Sheets
html <p>no tab</p> <p>	default tab size of 8 characters wide</p> <p class="custom">	custom tab size of 3 characters wide</p> <p> 3 spaces, equivalent to the custom tab size</p> css p { white-space: pre; } .custom { tab-size: 3; -moz-tab-size: 3; }
result specifications specification status comment css text module level 3the definition of 'tab-size' in that specification.
table-layout - CSS: Cascading Style Sheets
html <table> <tr><td>ed</td><td>wood</td></tr> <tr><td>albert</td><td>schweitzer</td></tr> <tr><td>jane</td><td>fonda</td></tr> <tr><td>william</td><td>shakespeare</td></tr> </table> css table { table-layout: fixed; width: 120px; border: 1px solid red; } td { border: 1px solid blue; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
result specifications specification status comment css level 2 (revision 1)the definition of 'table-layout' in that specification.
text-align-last - CSS: Cascading Style Sheets
nullam est eros, suscipit sed dictum quis, accumsan a ligula.</p> css p { font-size: 1.4em; text-align: justify; text-align-last: center; }
results specifications specification status comment css text module level 3the definition of 'text-align-last' in that specification.
text-decoration-skip-ink - CSS: Cascading Style Sheets
k: auto の使用例を示しています。</p> <p class="skip-ink-all">この文は、 text-decoration-skip-ink: all の使用例を示しています。</p> css p { font-size: 1.5em; text-decoration: underline blue; text-decoration-skip-ink: auto; /* this is the default anyway */ } .no-skip-ink { text-decoration-skip-ink: none; } .skip-ink-all{ text-decoration-skip-ink: all; }
result specifications specification status comment css text decoration module level 4the definition of 'text-decoration-skip-ink' in that specification.
text-decoration-skip - CSS: Cascading Style Sheets
on initial valueobjectsapplies toall elementsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax none | [ objects | [ spaces | [ leading-spaces | trailing-spaces ] ] | edges | box-decoration ] examples skipping edges html <p>hey, grab a cup of <em>coffee!</em></p> css p { margin: 0; font-size: 3em; text-decoration: underline; text-decoration-skip: edges; }
result specifications specification status comment css text decoration module level 4the definition of 'text-decoration-skip' in that specification.
text-decoration-style - CSS: Cascading Style Sheets
rline; -moz-text-decoration-style: wavy; -moz-text-decoration-color: red; -webkit-text-decoration-line: underline; -webkit-text-decoration-style: wavy; -webkit-text-decoration-color: red; } css .wavy { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } html <p class="wavy">this text has a wavy red line beneath it.</p>
results specifications specification status comment css text decoration module level 3the definition of 'text-decoration-style' in that specification.
text-decoration-thickness - CSS: Cascading Style Sheets
orthand">this uses the equivalent shorthand.</p> css .thin { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 1px; } .thick { text-decoration-line: underline; text-decoration-style: solid; text-decoration-color: red; text-decoration-thickness: 5px; } .shorthand { text-decoration: underline solid red 5px; }
results specifications specification status comment css text decoration module level 4the definition of 'text-decoration-width' in that specification.
text-emphasis-color - CSS: Cascading Style Sheets
)where <alpha-value> = <number> | <percentage><hue> = <number> | <angle> examples emphasis with a color and custom character css em { text-emphasis-color: green; text-emphasis-style: "*"; } html <p>here's an example:</p> <em>this has emphasis marks!</em>
result specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-emphasis - CSS: Cascading Style Sheets
css h2 { text-emphasis: triangle #d55; } html <h2>this is important!</h2>
result specifications specification status comment css text decoration module level 3the definition of 'text-emphasis' in that specification.
text-indent - CSS: Cascading Style Sheets
mples simple indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 5em; background: powderblue; }
result percentage indent html <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> <p>lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p> css p { text-indent: 30%; background: plum; }
result...
text-orientation - CSS: Cascading Style Sheets
formal definition initial valuemixedapplies toall elements, except table row groups, rows, column groups, and columnsinheritedyescomputed valueas specifiedanimation typediscrete formal syntax mixed | upright | sideways examples html <p>lorem ipsum dolet semper quisquam.</p> css p { writing-mode: vertical-rl; text-orientation: upright; }
result specifications specification status comment css writing modes module level 3the definition of 'text-orientation' in that specification.
touch-action - CSS: Cascading Style Sheets
html <div id="map"></div> css #map { height: 400px; width: 400px; background: blue; touch-action: none; }
result specifications specification status comment compatibility standardthe definition of 'touch-action' in that specification.
<transform-function> - CSS: Cascading Style Sheets
document.queryselector('select'); const example = document.queryselector('#example-element'); selectelem.addeventlistener('change', () => { if(selectelem.value === 'choose a function') { return; } else { example.style.transform = `rotate3d(1, 1, 1, 30deg) ${selectelem.value}`; settimeout(function() { example.style.transform = 'rotate3d(1, 1, 1, 30deg)'; }, 2000) } })
result specifications specification status comment css transforms level 2the definition of '<transform-function>' in that specification.
transform-origin - CSS: Cascading Style Sheets
this means, this definition transform-origin: -100% 50%; transform: rotate(45deg);
results in the same transformation as transform-origin: 0 0; transform: translate(-100%, 50%) rotate(45deg) translate(100%, -50%); by default, the origin of a transform is center.
transform-style - CSS: Cascading Style Sheets
x); } .bottom { background: rgba(210,0,210,.7); transform: rotatex(-90deg) translatez(50px); } javascript const cube = document.getelementbyid('example-element'); const checkbox = document.getelementbyid('preserve'); checkbox.addeventlistener('change', () => { if(checkbox.checked) { cube.style.transformstyle = 'preserve-3d'; } else { cube.style.transformstyle = 'flat'; } })
result specifications specification status comment css transforms level 2the definition of 'transform-style' in that specification.
transform - CSS: Cascading Style Sheets
> | <zero> ] )<rotatey()> = rotatey( [ <angle> | <zero> ] )<rotatez()> = rotatez( [ <angle> | <zero> ] )<perspective()> = perspective( <length> )where <length-percentage> = <length> | <percentage> examples translating and rotating an element html <div>transformed element</div> css div { border: solid red; transform: translate(30px, 20px) rotate(20deg); width: 140px; height: 60px; }
result more examples please see using css transforms and <transform-function> for more examples.
translate - CSS: Cascading Style Sheets
> <p class="translate">translation</p> </div> css * { box-sizing: border-box; } html { font-family: sans-serif; } div { width: 150px; margin: 0 auto; } p { padding: 10px 5px; border: 3px solid black; border-radius: 20px; width: 150px; font-size: 1.2rem; text-align: center; } .translate { transition: translate 1s; } div:hover .translate { translate: 200px 50px; }
result specifications specification status comment css transforms level 2the definition of 'individual transforms' in that specification.
unicode-bidi - CSS: Cascading Style Sheets
alapplies toall elements, though some values have no effect on non-inline elementsinheritednocomputed valueas specifiedanimation typediscrete formal syntax normal | embed | isolate | bidi-override | isolate-override | plaintext examples css .bible-quote { direction: rtl; unicode-bidi: embed; } html <div class="bible-quote"> a line of text </div> <div> another line of text </div>
result specifications specification status comment css writing modes module level 3the definition of 'unicode-bidi' in that specification.
unset - CSS: Cascading Style Sheets
examples color html <p>this text is red.</p> <div class="foo"> <p>this text is also red.</p> </div> <div class="bar"> <p>this text is green (default inherited value).</p> </div> css .foo { color: blue; } .bar { color: green; } p { color: red; } .bar p { color: unset; }
result border html <p>this text has a red border.</p> <div> <p>this text has a red border.</p> </div> <div class="bar"> <p>this text has a black border (initial default, not inherited).</p> </div> css div { border: 1px solid green; } p { border: 1px solid red; } .bar p { border-color: unset; }
result specifications specification status comment css ca...
url() - CSS: Cascading Style Sheets
formal syntax url( <string> <url-modifier>* ) examples content property html <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> css li::after { content: ' - ' url(https://mdn.mozillademos.org/files/16761/star.gif); }
result data-uri html <div class="background"></div> css .background { height: 100vh; } .background { background: yellow; background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='90' height='45'%3e%3cpath d='m10 10h60' stroke='%2300f' stroke-width='5'/%3e%3cpath d='m10 20h60' stroke='%230f0' stroke-width='5'/%3e%3cpath d='m10 30h60' stroke='red' stroke-width='...
user-select - CSS: Cascading Style Sheets
should be able to select this text.</p> <p class="unselectable">hey, you can't select this text!</p> <p class="all">clicking once will select all of this text.</p> css .unselectable { -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; user-select: none; } .all { -moz-user-select: all; -webkit-user-select: all; -ms-user-select: all; user-select: all; }
result specifications specification status comment css basic user interface module level 4the definition of 'user-select' in that specification.
vertical-align - CSS: Cascading Style Sheets
samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a text-bottom alignment.</div> <div>an <img class="middle" src="https://udn.realityripple.com/samples/b4/e1f0faff5b.svg" alt="link" width="32" height="32" /> image with a middle alignment.</div> css img.top { vertical-align: text-top; } img.bottom { vertical-align: text-bottom; } img.middle { vertical-align: middle; }
result specifications specification status comment css level 2 (revision 1)the definition of 'vertical-align' in that specification.
visibility - CSS: Cascading Style Sheets
the value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a
result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.
widows - CSS: Cascading Style Sheets
it has a little bit more text than the first one.</p> </div> css div { background-color: #8cffa0; columns: 3; widows: 2; } p { background-color: #8ca0ff; } p:first-child { margin-top: 0; }
result specifications specification status comment css fragmentation module level 3the definition of 'widows' in that specification.
will-change - CSS: Cascading Style Sheets
excessive use of will-change will
result in excessive memory use and will cause more complex rendering to occur as the browser attempts to prepare for the possible change.
writing-mode - CSS: Cascading Style Sheets
.example.text3 { writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: vertical-rl; } .example.text4 span, .example.text4 { writing-mode: sideways-lr; -webkit-writing-mode: sideways-lr; -ms-writing-mode: sideways-lr; } .example.text5 span, .example.text5 { writing-mode: sideways-rl; -webkit-writing-mode: sideways-rl; -ms-writing-mode: sideways-rl; }
result this image shows what the output should look like, in case your browser's support for writing-mode is incomplete: specifications specification status comment css writing modes level 4the definition of 'writing-mode' in that specification.
z-index - CSS: Cascading Style Sheets
em; margin-bottom: 1em; margin-top: 2em; } .gold-box { position: absolute; z-index: 3; /* put .gold-box above .green-box and .dashed-box */ background: gold; width: 80%; left: 60px; top: 3em; } .green-box { position: absolute; z-index: 2; /* put .green-box above .dashed-box */ background: lightgreen; width: 20%; left: 65%; top: -25px; height: 7em; opacity: 0.9; }
result specifications specification status comment css level 2 (revision 1)the definition of 'z-index' in that specification.
exsl:node-set() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes exsl:node-set() returns a node-set from a
result tree fragment, which is what you get when you look at the xsl:variable instead of its select attribute to fetch a variable's value.
Common (exsl) - EXSLT
exsl:node-set()exsl:node-set() returns a node-set from a
result tree fragment, which is what you get when you look at the xsl:variable instead of its select attribute to fetch a variable's value.
math:highest() - EXSLT
returns a
result tree fragment consisting of copies of the nodes returned by math:max().
math:lowest() - EXSLT
returns a
result tree fragment consisting of copies of the nodes returned by math:min().
math:max() - EXSLT
returns a
result tree fragment representing the highest valued node's numeric value as a string.
math:min() - EXSLT
returns a
result tree fragment representing the lowest valued node's numeric value as a string.
regexp:match() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes regexp:match() performs regular expression matching on a string, returning the submatches found as a
result.
Regular expressions (regexp) - EXSLT
regexp:match()regexp:match() performs regular expression matching on a string, returning the submatches found as a
result.regexp:replace()regexp:replace() replaces the portions of a string that match a given regular expression with the contents of another string.regexp:test()regexp:test() tests to see whether a string matches a specified regular expression.
set:difference() - EXSLT
the template version of set:difference applies templates to these nodes in set:difference mode, copying the nodes so that a
result tree fragment consisting of the nodes is returned.
str:split() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes str:split() splits a string using a pattern string to determine where the splits should occur, returning a node-set containing the
resulting strings.
str:tokenize() - EXSLT
xslt/xpath reference: xslt elements, exslt functions, xpath functions, xpath axes str:tokenize() splits a string using a set of characters as delimiters that determine where the splits should occur, returning a node-set containing the
resulting strings.
Strings (str) - EXSLT
str:concat()str:concat() returns a string containing all the string values in a node-set concatenated together.str:split()str:split() splits a string using a pattern string to determine where the splits should occur, returning a node-set containing the
resulting strings.str:tokenize()str:tokenize() splits a string using a set of characters as delimiters that determine where the splits should occur, returning a node-set containing the
resulting strings.
Ajax - Developer guides
file objects may be obtained from a filelist object returned as a
result of a user selecting files using the <input> element, from a drag and drop operation's datatransfer object, or from the mozgetasfile() api on an htmlcanvaselement.
Creating a cross-browser video player - Developer guides
f all the function checks if the browser is already in fullscreen mode by calling another function isfullscreen: var isfullscreen = function() { return !!(document.fullscreen || document.webkitisfullscreen || document.mozfullscreen || document.msfullscreenelement || document.fullscreenelement); } this function checks all the various browser prefixed versions to try and determine the correct
result.
Audio and video manipulation - Developer guides
var l = frame.data.length / 4; for (var i = 0; i < l; i++) { var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3; frame.data[i * 4 + 0] = grey; frame.data[i * 4 + 1] = grey; frame.data[i * 4 + 2] = grey; } this.ctx1.putimagedata(frame, 0, 0); return; } }; once the page has loaded you can call processor.doload()
result this is a pretty simple example showing how to manipulate video frames using a canvas.
DOM onevent handlers - Developer guides
${el.getattribute("onclick")} </code><br>`); //changing handler using .setattribute log('<hr/><br> changing onclick handler using <strong> setattribute method </strong> '); el.setattribute("onclick", 'anchoronclick(event)'); log(`changed the property to: <code> ${el.onclick.tostring()} </code>`); log(`now even the html attribute has changed: <code> ${el.getattribute("onclick")} </code><br>`);
result for historical reasons, some attributes/properties on the <body> and <frameset> elements instead set event handlers on their parent window object.
Constraint validation - Developer guides
basically, the idea is to trigger javascript on some form field event (like onchange) to calculate whether the constraint is violated, and then to use the method field.setcustomvalidity() to set the
result of the validation: an empty string means the constraint is satisfied, and any other string means there is an error and this string is the error message to display to the user.
HTML attribute: readonly - HTML: Hypertext Markup Language
-01-01" readonly="readonly"/> <label>date</label> </div> <div class="group"> <input type="email" value="some value" readonly="readonly"/> <label>email</label> </div> <div class="group"> <input type="password" value="some value" readonly="readonly"/> <label>password</label> </div> <div class="group"> <textarea readonly="readonly">some value</textarea> <label>message</label> </div>
result examples <fieldset> <legend>checkboxes buttons</legend> <p><label> <input type="checkbox" name="chbox" value="regular"> regular </label></p> <p><label> <input type="checkbox" name="chbox" value="readonly" readonly> readonly </label></p> <p><label> <input type="checkbox" name="chbox" value="disabled" disabled> disabled </label></p> </fieldset> <fieldset> <legend>ra...
<address>: The Contact Address element - HTML: Hypertext Markup Language
<address> you can contact author at <a href="http://www.somedomain.com/contact"> www.somedomain.com</a>.<br> if you see any bugs, please <a href="mailto:webmaster@somedomain.com"> contact webmaster</a>.<br> you may also want to visit us:<br> mozilla foundation<br> 331 e evelyn ave<br> mountain view, ca 94041<br> usa </address>
result although it renders text with the same default styling as the <i> or <em> elements, it is more appropriate to use <address> when dealing with contact information, as it conveys additional semantic information.
<area> - HTML: Hypertext Markup Language
the canonical html specification doesn’t, and it has no effect in any user agents.) examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html" alt="click to go left"> <area shape="circle" coords="275,75,75" href="right.html" alt="click to go right"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic">
result specifications specification status comment referrer policythe definition of 'referrerpolicy attribute' in that specification.
<br>: The Line Break element - HTML: Hypertext Markup Language
evelyn avenue<br> mountain view, ca<br> 94041<br> usa<br> the
result looks like so: accessibility concerns creating separate paragraphs of text using <br> is not only bad practice, it is problematic for people who navigate with the aid of screen reading technology.
<canvas>: The Graphics Canvas element - HTML: Hypertext Markup Language
</canvas> javascript then in the javascript code, call htmlcanvaselement.getcontext() to get a drawing context and start drawing onto the canvas: const canvas = document.queryselector('canvas'); const ctx = canvas.getcontext('2d'); ctx.fillstyle = 'green'; ctx.fillrect(10, 10, 100, 100);
result accessibility concerns alternative content the <canvas> element on its own is just a bitmap and does not provide information about any drawn objects.
<datalist>: The HTML Data List element - HTML: Hypertext Markup Language
examples <label for="mybrowser">choose a browser from this list:</label> <input list="browsers" id="mybrowser" name="mybrowser" /> <datalist id="browsers"> <option value="chrome"> <option value="firefox"> <option value="internet explorer"> <option value="opera"> <option value="safari"> <option value="microsoft edge"> </datalist>
result specifications specification status comment html living standardthe definition of '<datalist>' in that specification.
<del>: The Deleted Text element - HTML: Hypertext Markup Language
examples <p><del>this text has been deleted</del>, here is the rest of the paragraph.</p> <del><p>this paragraph has been deleted.</p></del>
result accessibility concerns the presence of the del element is not announced by most screen reading technology in its default configuration.
<dialog>: The Dialog element - HTML: Hypertext Markup Language
/ "favorite animal" input sets the value of the submit button selectel.addeventlistener('change', function onselect(e) { confirmbtn.value = selectel.value; }); // "confirm" button of form triggers "close" on dialog because of [method="dialog"] favdialog.addeventlistener('close', function onclose() { outputbox.value = favdialog.returnvalue + " button clicked - " + (new date()).tostring(); });
result specifications specification status comment html living standardthe definition of '<dialog>' in that specification.
<iframe>: The Inline Frame element - HTML: Hypertext Markup Language
html <iframe src="https://mdn-samples.mozilla.org/snippets/html/iframe-simple-contents.html" title="iframe example 1" width="400" height="300"> </iframe>
result accessibility concerns people navigating with assistive technology such as a screen reader can use the title attribute on an <iframe> to label its content.
<input type="number"> - HTML: Hypertext Markup Language
y as wide as is needed to enter a three-digit number, we can change our html to include an id and to shorten our placeholder since the field will be too narrow for the text we have been using so far: <input type="number" placeholder="x10" step="10" min="0" max="100" id="number"> then we add some css to narrow the width of the element with the id selector #number: #number { width: 3em; } the
result looks like this: offering suggested values you can provide a list of default options from which the user can select by specifying the list attribute, which contains as its value the id of a <datalist>, which in turn contains one <option> element per suggested value.
<input type="tel"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be relied upon to be so; the
resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
<input type="text"> - HTML: Hypertext Markup Language
since character widths vary, this may or may not be exact and should not be relied upon to be so; the
resulting input may be narrower or wider than the specified number of characters, depending on the characters and the font (font settings in use).
<ins> - HTML: Hypertext Markup Language
examples <ins>this text has been inserted</ins>
result accessibility concerns the presence of the <ins> element is not announced by most screen reading technology in its default configuration.
<keygen> - HTML: Hypertext Markup Language
it is expected that the <keygen> element will be used in an html form along with other information needed to construct a certificate request, and that the
result of the process will be a signed certificate.
<map> - HTML: Hypertext Markup Language
examples <map name="primary"> <area shape="circle" coords="75,75,75" href="left.html"> <area shape="circle" coords="275,75,75" href="right.html"> </map> <img usemap="#primary" src="https://udn.realityripple.com/samples/6a/7e559101b3.png" alt="350 x 150 pic">
result expected live example output the live example above should appear similar to the following images (when using your keyboard tab key): for the left.html link: for the right.html link specifications specification status comment html living standardthe definition of '<map>' in that specification.
<menuitem> - HTML: Hypertext Markup Language
</menuitem> <hr> <menuitem type="radio" radiogroup="group1">radio button 1</menuitem> <menuitem type="radio" radiogroup="group1">radio button 2</menuitem> </menu> css content div { width: 300px; height: 80px; background-color: lightgreen; }
result specifications specification status comment html 5.2the definition of '<menuitem>' in that specification.
<optgroup> - HTML: Hypertext Markup Language
examples <select> <optgroup label="group 1"> <option>option 1.1</option> </optgroup> <optgroup label="group 2"> <option>option 2.1</option> <option>option 2.2</option> </optgroup> <optgroup label="group 3" disabled> <option>option 3.1</option> <option>option 3.2</option> <option>option 3.3</option> </optgroup> </select>
result specifications specification status comment html living standardthe definition of '<optgroup>' in that specification.
<rp>: The Ruby Fallback Parenthesis element - HTML: Hypertext Markup Language
<ruby> 漢 <rp>(</rp><rt>kan</rt><rp>)</rp> 字 <rp>(</rp><rt>ji</rt><rp>)</rp> </ruby> css body { font-size: 22px; } the
result looks like this in your browser: the html above rendered by a browser without ruby support might look like this: 漢 (kan) 字 (ji) body { font-size: 22px; } see the article about the <ruby> element for further examples.
<span> - HTML: Hypertext Markup Language
example example 1 html <p><span>some text</span></p>
result example 2 html <li><span> <a href="portfolio.html" target="_blank">see my portfolio</a> </span></li> css li span { background: gold; }
result specifications specification status comment html living standardthe definition of '<span>' in that specification.
<strike> - HTML: Hypertext Markup Language
example <strike>: <strike>today's special: salmon</strike> sold out<br /> <s>: <s>today's special: salmon</s> sold out the
result of this code is: specifications specification status comment html5the definition of '<strike>' in that specification.
<strong>: The Strong Importance element - HTML: Hypertext Markup Language
examples basic example <p>before proceeding, <strong>make sure you put on your safety goggles</strong>.</p> the
resulting output: labeling warnings <p><strong>important:</strong> before proceeding, make sure you add plenty of butter.</p> this
results in: specifications specification status comment html living standardthe definition of '<strong>' in that specification.
<time> - HTML: Hypertext Markup Language
it may include the datetime attribute to translate dates into machine-readable format, allowing for better search engine
results or custom features such as reminders.
contextmenu - HTML: Hypertext Markup Language
text_menus"); } function incfont() { document.getelementbyid("fontsizing").style.fontsize = "larger"; } function decfont() { document.getelementbyid("fontsizing").style.fontsize = "smaller"; } function changeimage() { var index = math.ceil(math.random() * 39 + 1); document.images[0].src = "https://developer.mozilla.org/media/img/promote/promobutton_mdn" + index + ".png"; }
result specifications specification status comment html 5.1the definition of 'contextmenu' in that specification.
itemref - HTML: Hypertext Markup Language
="a">name: <span itemprop="name">amanda</span> </p> <div id="b" itemprop="band" itemscope itemref="c"></div> <div id="c"> <p>band: <span itemprop="name">jazz band</span> </p> <p>size: <span itemprop="size">12</span> players</p> </div> structured data (in json-ld format) { "@id": "amanda", "name": "amanda", "band": { "@id": "b", "name": "jazz band", "size": 12 } }
result specifications specification status comment html microdatathe definition of 'itemref' in that specification.
itemtype - HTML: Hypertext Markup Language
</span> </div>
result html structured data itemscope itemtype product (http://schema.org/product) itemprop name executive anvil itemprop image https://pixabay.com/static/uploads/photo/2015/09/05/18/15/suitcase-924605_960_720.png itemprop description sleeker than acme's classic anvil, the executive anvil is perfect for the business traveler looking for so...
tabindex - HTML: Hypertext Markup Language
it accepts an integer as a value, with different
results depending on the integer's value: a negative value (usually tabindex="-1") means that the element is not reachable via sequential keyboard navigation, but could be focused with javascript or visually by clicking with the mouse.
Using the application cache - HTML: Hypertext Markup Language
note: simply omitting master entries (files that have the manifest attribute set in the html element) from the manifest file would not have the same
result, because master entries will be added—and subsequently served from—the application cache.
Microformats - HTML: Hypertext Markup Language
search engines benefit greatly from direct access to this structured data because it allows them to understand the information on web pages and provide more relevant
results to users.
Choosing between www and non-www URLs - HTTP
this way, search engines don't index the same page several times, potentially leading to it being considered as duplicate content or spam, and even removing or lowering your page from the search engine
result pages.
Compression in HTTP - HTTP
in fact, this is often counter productive as the cost of the overhead (algorithms usually need a dictionary that add to the initial size) can be higher than the extra gain in compression
resulting in a larger file.
Cross-Origin Resource Policy (CORP) - HTTP
as this policy is expressed via a response header, the actual request is not prevented—rather, the browser prevents the
result from being leaked by stripping the response body.
CSP: base-uri - HTTP
eta tag configuration <meta http-equiv="content-security-policy" content="base-uri 'self'"> apache configuration <ifmodule mod_headers.c> header set content-security-policy "base-uri 'self'"; </ifmodule> nginx configuration add_header content-security-policy "base-uri 'self';" violation case since your domain isn't example.com, a <base> element with its href set to https://example.com will
result in a csp violation.
CSP: form-action - HTTP
examples meta tag configuration <meta http-equiv="content-security-policy" content="form-action 'none'"> apache configuration <ifmodule mod_headers.c> header set content-security-policy "form-action 'none'; </ifmodule> nginx configuration add_header content-security-policy "form-action 'none';" violation case using a <form> element with an action set to inline javascript will
result in a csp violation.
CSP: navigate-to - HTTP
examples meta tag configuration <meta http-equiv="content-security-policy" content="navigate-to 'none'"> violation case using a <form> element with an action set to inline javascript will
result in a csp violation.
Content-Type - HTTP
examples content-type in html forms in a post request,
resulting from an html form submission, the content-type of the request is specified by the enctype attribute on the <form> element.
Closures - JavaScript
notice that i defined an anonymous function that creates a counter, and then i call it immediately and assign the
result to the counter variable.
JavaScript data types and data structures - JavaScript
this example demonstrates, where incrementing the number.max_safe_integer returns the expected
result: > const x = 2n ** 53n; 9007199254740992n > const y = x + 1n; 9007199254740993n you can use the operators +, *, -, **, and % with bigints—just like with numbers.
Loops and iteration - JavaScript
function dump_props(obj, obj_name) { let
result = ''; for (let i in obj) {
result += obj_name + '.' + i + ' = ' + obj[i] + '<br>'; }
result += '<hr>'; return
result; } for an object car with properties make and model,
result would be: car.make = ford car.model = mustang arrays although it may be tempting to use this as a way to iterate over array elements, the for...in statement will return the name of your user-defined prope...
TypeError: invalid 'instanceof' operand 'x' - JavaScript
' operand 0 function foo() {} var f = foo(); // foo() is called and returns undefined var x = new foo(); x instanceof f; // typeerror: invalid 'instanceof' operand f x instanceof x; // typeerror: x is not a function to fix these errors, you will either need to replace the instanceof operator with the typeof operator, or to make sure you use the function name, instead of the
result of its evaluation.
getter - JavaScript
defineproperty while using the get keyword and object.defineproperty() have similar
results, there is a subtle difference between the two when used on classes.
setter - JavaScript
when current is assigned a value, it updates log with that value: const language = { set current(name) { this.log.push(name); }, log: [] } language.current = 'en'; console.log(language.log); // ['en'] language.current = 'fa'; console.log(language.log); // ['en', 'fa'] note that current is not defined, and any attempts to access it will
result in undefined.
Array.prototype[@@iterator]() - JavaScript
examples iteration using for...of loop html <ul id="letter
result"> </ul> javascript var arr = ['a', 'b', 'c']; var earr = arr[symbol.iterator](); var letter
result = document.getelementbyid('letter
result'); // your browser must support for..of loop // and let-scoped variables in for loops // const and var could also be used for (let letter of earr) { letter
result.innerhtml += "<li>" + letter + "</li>"; }
result alternative iteration var arr = ['a', 'b'...
Atomics.and() - JavaScript
the truth table for the and operation is: a b a & b 0 0 0 0 1 0 1 0 0 1 1 1 for example, a bitwise and of 5 & 1
results in 0001 which is 1 in decimal.
Atomics.or() - JavaScript
the truth table for the or operation is: a b a | b 0 0 0 0 1 1 1 0 1 1 1 1 for example, a bitwise or of 5 & 1
results in 0101 which is 5 in decimal.
Atomics.xor() - JavaScript
the truth table for the xor operation is: a b a ^ b 0 0 0 0 1 1 1 0 1 1 1 0 for example, a bitwise xor of 5 ^ 1
results in 0100 which is 4 in decimal.
BigInt.prototype.toLocaleString() - JavaScript
chinese decimal console.log(bigint.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六,七八九,一二三,四五六,七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(bigint.tolocalestring(['ban', 'id'])); // → 123.456.789.123.456.789 using options the
results provided by tolocalestring can be customized using the options argument: var bigint = 123456789123456789n; // request a currency format console.log(bigint.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.456.789.123.456.789,00 € // the japanese yen doesn't use a minor unit console.log(bigint.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ...
BigInt - JavaScript
an operation with a fractional
result will be truncated when used with a bigint.
BigInt64Array - JavaScript
bigint64array.prototype.map() creates a new array with the
results of calling a provided function on every element in this array.
BigUint64Array - JavaScript
biguint64array.prototype.map() creates a new array with the
results of calling a provided function on every element in this array.
Boolean - JavaScript
note: when the non-standard property document.all is used as an argument for this constructor, the
result is a boolean object with the value false.
Date.prototype.toDateString() - JavaScript
the todatestring() method is especially useful because compliant engines implementing ecma-262 may differ in the string obtained from tostring() for date objects, as the format is implementation-dependent and simple string slicing approaches may not produce consistent
results across multiple engines.
Date.prototype.toLocaleDateString() - JavaScript
cations may want to use the japanese calendar, // where 2012 was the year 24 of the heisei era console.log(date.tolocaledatestring('ja-jp-u-ca-japanese')); // → "24/12/20" // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(date.tolocaledatestring(['ban', 'id'])); // → "20/12/2012" using options the
results provided by tolocaledatestring() can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // request a weekday along with a long date var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; console.log(date.tolocaledatestring('de-de', options)); // → "donnerstag, 20.
Date.prototype.toLocaleTimeString() - JavaScript
ko-kr')); // → "오후 12:00:00" // arabic in most arabic speaking countries uses real arabic digits console.log(date.tolocaletimestring('ar-eg')); // → "٧:٠٠:٠٠ م" // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(date.tolocaletimestring(['ban', 'id'])); // → "11.00.00" using options the
results provided by tolocaletimestring() can be customized using the options argument: var date = new date(date.utc(2012, 11, 20, 3, 0, 0)); // an application may want to use utc and make that visible var options = { timezone: 'utc', timezonename: 'short' }; console.log(date.tolocaletimestring('en-us', options)); // → "3:00:00 am gmt" // sometimes even the us needs 24-hour time console.log(date.tol...
Date.prototype.toTimeString() - JavaScript
the totimestring() method is especially useful because compliant engines implementing ecma-262 may differ in the string obtained from tostring() for date objects, as the format is implementation-dependent; simple string slicing approaches may not produce consistent
results across multiple engines.
Float32Array - JavaScript
float32array.prototype.map() creates a new array with the
results of calling a provided function on every element in this array.
Float64Array - JavaScript
float64array.prototype.map() creates a new array with the
results of calling a provided function on every element in this array.
Number.MIN_VALUE - JavaScript
if the
result is greater than or equal to min_value, the func1 function is called; otherwise, the func2 function is called.
Number.isSafeInteger() - JavaScript
a safe integer is an integer that can be exactly represented as an ieee-754 double precision number, and whose ieee-754 representation cannot be the
result of rounding any other integer to fit the ieee-754 representation.
Number.prototype.toLocaleString() - JavaScript
chinese decimal console.log(number.tolocalestring('zh-hans-cn-u-nu-hanidec')); // → 一二三,四五六.七八九 // when requesting a language that may not be supported, such as // balinese, include a fallback language, in this case indonesian console.log(number.tolocalestring(['ban', 'id'])); // → 123.456,789 using options the
results provided by tolocalestring can be customized using the options argument: var number = 123456.789; // request a currency format console.log(number.tolocalestring('de-de', { style: 'currency', currency: 'eur' })); // → 123.456,79 € // the japanese yen doesn't use a minor unit console.log(number.tolocalestring('ja-jp', { style: 'currency', currency: 'jpy' })) // → ¥123,457 // limit to t...
Object.freeze() - JavaScript
the
result of calling object.freeze(object) only applies to the immediate properties of object itself and will prevent future property addition, removal or value re-assignment operations only on object.
Object.prototype.hasOwnProperty() - JavaScript
value: ' + buz[name]); } else { console.log(name); // tostring or something else } } using hasownproperty as a property name javascript does not protect the property name hasownproperty; thus, if the possibility exists that an object might have a property with this name, it is necessary to use an external hasownproperty to get correct
results: var foo = { hasownproperty: function() { return false; }, bar: 'here be dragons' }; foo.hasownproperty('bar'); // always returns false // use another object's hasownproperty // and call it with 'this' set to foo ({}).hasownproperty.call(foo, 'bar'); // true // it's also possible to use the hasownproperty property // from the object prototype for this purpose object.prototype.hasow...
Object.is() - JavaScript
the == operator applies various coercions to both sides (if they are not the same type) before testing for equality (
resulting in such behavior as "" == false being true), but object.is doesn't coerce either value.
Object.keys() - JavaScript
localestring', 'valueof', 'hasownproperty', 'isprototypeof', 'propertyisenumerable', 'constructor' ], dontenumslength = dontenums.length; return function(obj) { if (typeof obj !== 'function' && (typeof obj !== 'object' || obj === null)) { throw new typeerror('object.keys called on non-object'); } var
result = [], prop, i; for (prop in obj) { if (hasownproperty.call(obj, prop)) {
result.push(prop); } } if (hasdontenumbug) { for (i = 0; i < dontenumslength; i++) { if (hasownproperty.call(obj, dontenums[i])) {
result.push(dontenums[i]); } } } return
result; }; }()); } please note that the a...
Object.prototype.toString() - JavaScript
bject date] tostring.call(new string); // [object string] tostring.call(math); // [object math] // since javascript 1.8.5 tostring.call(undefined); // [object undefined] tostring.call(null); // [object null] using tostring() in this way is unreliable; objects can change the behavior of object.prototype.tostring() by defining a symbol.tostringtag property, leading to unexpected
results.
Promise() constructor - JavaScript
the first of these functions (resolve) is called when the asynchronous task completes successfully and returns the
results of the task as a value.
Promise.allSettled() - JavaScript
it is typically used when you have multiple asynchronous tasks that are not dependent on one another to complete successfully, or you'd always like to know the
result of each promise.
Promise.prototype.catch() - JavaScript
this means that you have to provide an onrejected function even if you want to fall back to an undefined
result value - for example obj.catch(() => {}).
handler.deleteProperty() - JavaScript
const p = new proxy({}, { deleteproperty: function(target, prop) { if (prop in target){ delete target[prop] console.log('property removed: ' + prop) return true } else { console.log('property not found: ' + prop) return false } } }) let
result p.a = 10 console.log('a' in p) // true
result = delete p.a // "property removed: a" console.log(
result) // true console.log('a' in p) // false
result = delete p.a // "property not found: a" console.log(
result) // false specifications specification ecmascript (ecma-262)the definition of '[[delete]]' in that specification.
Proxy - JavaScript
type: 'browser' }, { name: 'seamonkey', type: 'browser' }, { name: 'thunderbird', type: 'mailer' } ], { get: function(obj, prop) { // the default behavior to return the value; prop is usually an integer if (prop in obj) { return obj[prop]; } // get the number of products; an alias of products.length if (prop === 'number') { return obj.length; } let
result, types = {}; for (let product of obj) { if (product.name === prop) {
result = product; } if (types[product.type]) { types[product.type].push(product); } else { types[product.type] = [product]; } } // get a product by name if (
result) { return
result; } // get products by type if (prop in types) { retu...
Reflect.getPrototypeOf() - JavaScript
examples using reflect.getprototypeof() reflect.getprototypeof({}) // object.prototype reflect.getprototypeof(object.prototype) // null reflect.getprototypeof(object.create(null)) // null compared to object.getprototypeof() // same
result for objects object.getprototypeof({}) // object.prototype reflect.getprototypeof({}) // object.prototype // both throw in es5 for non-objects object.getprototypeof('foo') // throws typeerror reflect.getprototypeof('foo') // throws typeerror // in es2015 only reflect throws, object coerces non-objects object.getprototypeof('foo') // string.prototype reflect.getprototypeof('foo') // thro...
SharedArrayBuffer - JavaScript
in both cases, the sharedarraybuffer object is transmitted to the receiver
resulting in a new, private sharedarraybuffer object in the receiving agent (just as for arraybuffer).
String() constructor - JavaScript
examples string constructor and string function string function and string constructor produce different
results: typeof string('hello world'); // string typeof new string('hello world'); // object here, the function produces a string (the primitive type) as promised.
String.prototype.codePointAt() - JavaScript
https://mths.be/codepointat v0.2.0 by @mathias */ if (!string.prototype.codepointat) { (function() { 'use strict'; // needed to support `apply`/`call` with `undefined`/`null` var defineproperty = (function() { // ie 8 only supports `object.defineproperty` on dom elements try { var object = {}; var $defineproperty = object.defineproperty; var
result = $defineproperty(object, object, object) && $defineproperty; } catch(error) {} return
result; }()); var codepointat = function(position) { if (this == null) { throw typeerror(); } var string = string(this); var size = string.length; // `tointeger` var index = position ?
String.prototype.substring() - JavaScript
// replaces olds with news in the string fulls function replacestring(olds, news, fulls) { for (let i = 0; i < fulls.length; ++i) { if (fulls.substring(i, i + olds.length) == olds) { fulls = fulls.substring(0, i) + news + fulls.substring(i + olds.length, fulls.length) } } return fulls } replacestring('world', 'web', 'brave new world') note that this can
result in an infinite loop if olds is itself a substring of news — for example, if you attempted to replace 'world' with 'otherworld' here.
String.prototype.toLocaleLowerCase() - JavaScript
in most cases, this will produce the same
result as tolowercase(), but for some locales, such as turkish, whose case mappings do not follow the default case mappings in unicode, there may be a different
result.
Symbol.iterator - JavaScript
using it as such is likely to
result in runtime exceptions or buggy behavior: var nonwellformediterable = {} nonwellformediterable[symbol.iterator] = () => 1 [...nonwellformediterable] // typeerror: [] is not a function specifications specification ecmascript (ecma-262)the definition of 'symbol.iterator' in that specification.
Symbol.matchAll - JavaScript
the following two examples return same
result: 'abc'.matchall(/a/); /a/[symbol.matchall]('abc'); this method exists for customizing match behavior within regexp subclasses.
with - JavaScript
if you forget to define x in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected
results.
Strict mode - JavaScript
// if it invokes strict mode } strict1("'strict mode code!'"); strict1("'use strict'; 'strict mode code!'"); strict2(eval, "'non-strict code.'"); strict2(eval, "'use strict'; 'strict mode code!'"); nonstrict("'non-strict code.'"); nonstrict("'use strict'; 'strict mode code!'"); thus names in strict mode eval code behave identically to names in strict mode code not being evaluated as the
result of eval.
Lazy loading - Web Performance
fonts by default, font requests are delayed until the render tree is constructed, which can
result in delayed text rendering.
Web Performance
the performance cost of animating a css property can vary from one property to another, and animating expensive css properties can
result in jank as the browser struggles to hit a smooth frame rate.critical rendering paththe critical rendering path is the sequence of steps the browser goes through to convert the html, css, and javascript into pixels on the screen.
Add to Home screen - Progressive web apps (PWAs)
deferredprompt = e; // update ui to notify the user they can add to home screen addbtn.style.display = 'block'; addbtn.addeventlistener('click', (e) => { // hide our user interface that shows our a2hs button addbtn.style.display = 'none'; // show the prompt deferredprompt.prompt(); // wait for the user to respond to the prompt deferredprompt.userchoice.then((choice
result) => { if (choice
result.outcome === 'accepted') { console.log('user accepted the a2hs prompt'); } else { console.log('user dismissed the a2hs prompt'); } deferredprompt = null; }); }); }); so here we: call event.preventdefault() to stop chrome 67 and earlier from calling the install prompt automatically (this behavior changed in chrom...
baseFrequency - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'basefrequency' in that specificat...
filterUnits - SVG: Scalable Vector Graphics
only one element is using this attribute: <filter> usage notes value userspaceonuse | objectboundingbox default value objectboundingbox animatable yes userspaceonuse x, y, width and height represent values in the current coordinate system that
results from taking the current user coordinate system in place at the time when the <filter> element is referenced (i.e., the user coordinate system for the element referencing the <filter> element via a filter attribute).
glyph-orientation-horizontal - SVG: Scalable Vector Graphics
when the reference orientation direction is horizontal and the glyph-orientation-horizontal
results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph.
glyph-orientation-vertical - SVG: Scalable Vector Graphics
when the inline-progression-direction is vertical and the glyph-orientation-vertical
results in an orientation angle that is a multiple of 180 degrees, then the current text position is incremented according to the vertical metrics of the glyph.
k1 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y=...
k2 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="1" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="10" k3="0" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y=...
k3 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="1" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="10" k4="0" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y=...
k4 - SVG: Scalable Vector Graphics
the pixel composition is computed using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4 only one element is using this attribute: <fecomposite> html, body, svg { height: 100%; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <filter id="composite1" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="1" k2="0" k3="0" k4="0" /> </filter> <filter id="composite2" x="0" y="0" width="100%" height="100%"> <fecomposite in2="sourcegraphic" operator="arithmetic" k1="10" k2="0" k3="0" k4="0.3" /> </filter> <image href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" ...
mode - SVG: Scalable Vector Graphics
only one element is using this attribute: <feblend> html, body, svg { height: 100%; } <svg viewbox="0 0 480 200" xmlns="http://www.w3.org/2000/svg"> <filter id="blending1" x="0" y="0" width="100%" height="100%"> <feflood
result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> <filter id="blending2" x="0" y="0" width="100%" height="100%"> <feflood
result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="seagreen" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="color-dodge"/> </filter> <image xlink:href="//developer.m...
operator - SVG: Scalable Vector Graphics
arithmetic this value indicates that the source graphic defined in the in attribute and the destination graphic defined in the in2 attribute are combined using the following formula:
result = k1*i1*i2 + k2*i1 + k3*i2 + k4 where: i1 and i2 indicate the corresponding pixel channel values of the input image, which map to in and in2 respectively, and k1,k2,k3,and k4 indicate the values of the attributes with the same name.
order - SVG: Scalable Vector Graphics
it is recommended that only small values (e.g., 3) be used; higher values may
result in very high cpu overhead and usually do not produce
results that justify the impact on performance.
requiredFeatures - SVG: Scalable Vector Graphics
35" height="25" width="430" /> <rect class="ok" x="10" y="1135" height="25" width="430" requiredfeatures="http://www.w3.org/tr/svg11/feature#extensibility" /> <text x="20" y="1152">http://www.w3.org/tr/svg11/feature#extensibility</text> </svg> css .ko { fill: #900; } .ok { fill: #060; } rect { stroke: #000; stroke-width: 2px; } text{ fill: #fff; font: 12px sans-serif; }
result see also requiredfeatures.svg specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'requiredfeatures' in that specification.
rotate - SVG: Scalable Vector Graphics
</g> <g transform="translate(300, 0)"> <use href="#themotionpath"/> <!-- purple arrow which will have a static rotation of 210 degrees --> <path fill="purple" d="m-5,-5 l10,0 -5,5 0,0 z"> <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="210"> <mpath href="#themotionpath"/> </animatemotion> </path> </g> </svg>
result specifications specification status comment svg animations level 2the definition of 'rotate' in that specification.
scale - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 480 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="5"/> </filter> <filter id="displacementfilter2" x="-20%" y="-20%" width="140%" height="140%"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50"/> </filter> <circle cx="100" cy="100" r="80" style=...
seed - SVG: Scalable Vector Graphics
"0" width="200" height="200" style="filter:url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number> default value 0 animatable yes example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence basefrequency="0.05" seed="1000"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of 'seed' in that specification.
spacing - SVG: Scalable Vector Graphics
only one element is using this attribute: <textpath> usage notes value auto | exact default value exact animatable yes auto this value indicates that the user agent should use text-on-a-path layout algorithms to adjust the spacing between typographic characters in order to achieve visually appealing
results.
values - SVG: Scalable Vector Graphics
value <list-of-numbers> default value if type="matrix", identity matrix, if type="saturate", 1,
resulting in identity matrix, if type="huerotate", 0,
resulting in identity matrix animatable yes <list-of-numbers> the value is a list of numbers, which is interpreted differently depending on the value of the type attribute: for type="matrix", values is a list of 20 matrix values (a00 a01 a02 a03 a04 a10 a11 ...
xChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%"
result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%"
result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" xchannelselector="b"/> </filter> <te...
yChannelSelector - SVG: Scalable Vector Graphics
only one element is using this attribute: <fedisplacementmap> html, body, svg { height: 100%; } <svg viewbox="0 0 440 160" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%"
result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="r"/> </filter> <filter id="displacementfilter2"> <feimage xlink:href="https://mdn.mozillademos.org/files/12668/mdn.svg" x="0" y="0" width="100%" height="100%"
result="abc"/> <fedisplacementmap in2="abc" in="sourcegraphic" scale="30" ychannelselector="b"/> </filter> <te...
<animateColor> - SVG: Scalable Vector Graphics
example svg <svg width="120" height="120" xmlns="http://www.w3.org/2000/svg"> <circle cx="60" cy="60" r="50"> <animatecolor attributename="fill" attributetype="xml" from="black" to="red" dur="6s" repeatcount="indefinite"/> </circle> </svg>
result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<animatecolor>' in that specification.
<feBlend> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="spotlight"> <feflood
result="floodfill" x="0" y="0" width="100%" height="100%" flood-color="green" flood-opacity="1"/> <feblend in="sourcegraphic" in2="floodfill" mode="multiply"/> </filter> </defs> <image xlink:href="//developer.mozilla.org/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#spotlight);"/> </svg>
result specifications ...
<feDisplacementMap> - SVG: Scalable Vector Graphics
example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2"
result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic" scale="50" xchannelselector="r" ychannelselector="g"/> </filter> <circle cx="100" cy="100" r="100" style="filter: url(#displacementfilter)"/> </svg> specifications specification status comment filter effects module level 1the definition of '<fedisplacementmap>' in that spec...
<feDropShadow> - SVG: Scalable Vector Graphics
value type: <number>; default value: 2; animatable: yes global attributes core attributes most notably: id styling attributes class, style filter primitive attributes height, in,
result, x, y, width presentation attributes most notably: flood-color, flood-opacity usage notes categoriesfilter primitive elementpermitted contentany number of the following elements, in any order:<animate>, <script>, <set> specifications specification status comment filter effects module level 1the definition of '<fedropshadow>' in that specification.
<feFlood> - SVG: Scalable Vector Graphics
example html content <svg xmlns="http://www.w3.org/2000/svg" width="200" height="200"> <defs> <filter id="floodfilter" filterunits="userspaceonuse"> <feflood x="50" y="50" width="100" height="100" flood-color="green" flood-opacity="0.5"/> </filter> </defs> <use style="filter: url(#floodfilter);"/> </svg>
result specifications specification status comment filter effects module level 1the definition of '<feflood>' in that specification.
<feImage> - SVG: Scalable Vector Graphics
example svg <svg viewbox="0 0 200 200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="image"> <feimage xlink:href="/files/6457/mdn_logo_only_color.png"/> </filter> </defs> <rect x="10%" y="10%" width="80%" height="80%" style="filter:url(#image);"/> </svg>
result specifications specification status comment filter effects module level 1the definition of '<feimage>' in that specification.
<feOffset> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <filter id="offset" width="180" height="180"> <feoffset in="sourcegraphic" dx="60" dy="60" /> </filter> </defs> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green"/> <rect x="0" y="0" width="100" height="100" stroke="black" fill="green" filter="url(#offset)"/> </svg>
result specifications specification status comment filter effects module level 1the definition of '<feoffset>' in that specification.
<feTile> - SVG: Scalable Vector Graphics
0/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <defs> <filter id="tile" x="0" y="0" width="100%" height="100%"> <fetile in="sourcegraphic" x="50" y="50" width="100" height="100" /> <fetile/> </filter> </defs> <image xlink:href="/files/6457/mdn_logo_only_color.png" x="10%" y="10%" width="80%" height="80%" style="filter:url(#tile);"/> </svg>
result specifications specification status comment filter effects module level 1the definition of '<fetile>' in that specification.
<filter> - SVG: Scalable Vector Graphics
example svg <svg width="230" height="120" xmlns="http://www.w3.org/2000/svg"> <filter id="blurme"> <fegaussianblur stddeviation="5"/> </filter> <circle cx="60" cy="60" r="50" fill="green" /> <circle cx="170" cy="60" r="50" fill="green" filter="url(#blurme)" /> </svg>
result screenshotlive sample specifications specification status comment filter effects module level 1the definition of '<filter>' in that specification.
<glyph> - SVG: Scalable Vector Graphics
ing-glyph><path d="m0,0h200v200h-200z"/></missing-glyph> <glyph unicode="!" horiz-adv-x="80" d="m0,0h200v200h-200z"></glyph> <glyph unicode="@" d="m0,50l100,300l400,100z"></glyph> </font> </defs> <text x="100" y="100" style="font-family: 'super sans', helvetica, sans-serif; font-weight: bold; font-style: normal">text using embe@dded font!</text> </svg>
result specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of '<glyph>' in that specification.
<hatch> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg>
result ...
<hatchpath> - SVG: Scalable Vector Graphics
example svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg"> <defs> <hatch id="hatch" hatchunits="userspaceonuse" pitch="5" rotate="135"> <hatchpath stroke="#a080ff" stroke-width="2"/> </hatch> </defs> <rect fill="url(#hatch)" stroke="black" stroke-width="2" x="10%" y="10%" width="80%" height="80%" /> </svg>
result ...
<image> - SVG: Scalable Vector Graphics
example basic rendering of a png image in svg: svg <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <image href="https://mdn.mozillademos.org/files/6457/mdn_logo_only_color.png" height="200" width="200"/> </svg>
result specifications specification status comment scalable vector graphics (svg) 2the definition of '<image>' in that specification.
<mpath> - SVG: Scalable Vector Graphics
--> <path d="m-25,-12.5 l25,-12.5 l 0,-87.5 z" fill="yellow" stroke="red" stroke-width="7.06" > <!-- define the motion path animation --> <animatemotion dur="6s" repeatcount="indefinite" rotate="auto" > <mpath xlink:href="#path1"/> </animatemotion> </path> </svg>
result specifications specification status comment svg animations level 2the definition of '<mpath>' in that specification.
<solidcolor> - SVG: Scalable Vector Graphics
dcolor</text> <circle cx="150" cy="65" r="35" stroke-width="2" stroke="url(#mycolor)" fill="white"/> <circle cx="50" cy="65" r="35" fill="url(#mycolor)"/> <text x="10" y="120">circles colored with lineargradient</text> <circle cx="150" cy="165" r="35" stroke-width="2" stroke="url(#mygradient)" fill="white"/> <circle cx="50" cy="165" r="35" fill="url(#mygradient)"/> </svg>
result ...
<switch> - SVG: Scalable Vector Graphics
y!</text> <text systemlanguage="en-gb">wotcha!</text> <text systemlanguage="en-au">g'day!</text> <text systemlanguage="en">hello!</text> <text systemlanguage="es">hola!</text> <text systemlanguage="fr">bonjour!</text> <text systemlanguage="ja">こんにちは</text> <text systemlanguage="ru">Привет!</text> <text>☺</text> </switch> </svg>
result specifications specification status comment scalable vector graphics (svg) 2the definition of '<switch>' in that specification.
<view> - SVG: Scalable Vector Graphics
w id="normalsizeview" viewbox="0 0 600 200"/> <view id="doublesizeview" viewbox="0 0 300 100"/> <a xlink:href="#halfsizeview"> <text x="5" y="20" font-size="20">half size</text> </a> <a xlink:href="#normalsizeview"> <text x="5" y="40" font-size="20">normal size</text> </a> <a xlink:href="#doublesizeview"> <text x="5" y="60" font-size="20">double size</text> </a> </svg>
result dom interface this element implements the svgviewelement interface.
Linking - SVG: Scalable Vector Graphics
(the problem will be fixed in firefox 2.0.) anyway, the
resultant behavior in moz svg is that page2.html will be loaded into the frame where the svg button was (i.e.