Configuring servers for Ogg media - HTTP
media properly.
...periment a bit to get the right balance between file size and seek performance.
... may appreciate it if you include preload in your video elements.
...And 16 more matches

Following the Android Toasts Tutorial from a JNI Perspective
ontinue editing later.
...ts do not have to be created with jni; they are exposed by the nativewindow feature on firefox for android, see toast documentation.
...clare this with strings: { name: 'maketext', sig: '(landroid/content/context;ii)landroid/widget/toast;' } we see there are no separating characters between the arguments.
...And 8 more matches

Creating a cross-browser video player - Developer guides
l allows users who have javascript turned off (for whatever reason) to still have access to the browser's native controls.
...e of 0.
... value of the progress element and value indicating its current value.
...And 8 more matches

Cross-browser audio basics - Developer guides
en the media is ready to play?
...number of events we can use to let our player know exactly what is happening.
...a loading process in order: loadstart the loadstart event tells us simply that load process has started and the browser is connecting to the media.
...And 7 more matches

transition-delay - CSS: Cascading Style Sheets
the transition-delay css property specifies the duration to wait before starting a property's transition effect when its value changes.
...># examples transition-delay: 0.5s <div class="parent"> <div class="box">lorem</div> </div> .parent { width: 250px; height:125px;} .box { width: 100px; height: 100px; background-color: red; font-size: 20px; left: 0px; top: 0px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top...
...font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } .box1{ width: 50px; height: 50px; background-color: blue; color: yellow; font-size: 18px; left: 150px; top:25px; position:absolute; -webkit-transition-property: width height background-color font-size left top color; -webkit-transition-duration:2s; -webkit-transition-delay:0.5s; -webkit-transition-timing-function: linear; transition-property: width height background-color font-size left top color; transition-duration:2s; transition-delay:0.5s; transition-timing-function: linear; } function updatetransition() { var el = document.queryselector("div.box"); if (el) { el.classname = "box1"; } else { e...
...And 6 more matches

transition - CSS: Cascading Style Sheets
the transition css property is a shorthand property for transition-property, transition-duration, transition-timing-function, and transition-delay.
...lease clone https://github.com/mdn/interactive-examples and send us a pull request.
...fine the transition between two states of an element.
...And 6 more matches

Setting up adaptive streaming media sources - Developer guides
he appropriate file will be chosen automatically.
...400 contains (1.m4s, 2.m4s, 3.m4s ...
...> http://example.com/segments </baseurl> <period start="pt0s"> <adaptationset bitstreamswitching="true"> <representation id="0" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" bandwidth="46986"> <segmentbase> <initialization sourceurl="main/news100/1.m4s" range="0-862"/> </segmentbase> <segmentlist duration="1"> <segmenturl media="main/news100/2.m4s" mediarange="863-7113"/> <segmenturl media="main/news100/3.m4s" mediarange="7114-14104"/> <segmenturl media="main/news100/4.m4s" mediarange="14105-17990"/> </segmentlist> </representation> <representation id="1" codecs="avc1" mimetype="video/mp4" width="320" height="240" startwithsap="1" band...
...And 5 more matches

Navigation and resource timings - Web Performance
we transferred 22.04kb for an uncompressed file size of 87.24kb.
...bined.
... from the server, or from relevant application caches or from local resources.
...And 5 more matches

animation - CSS: Cascading Style Sheets
the animation shorthand css property applies an animation between styles.
...nimation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state.
...is interactive example is stored in a github repository.
...And 4 more matches

dur - SVG: Scalable Vector Graphics
the dur attribute indicates the simple duration of an animation.
...finite"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="3s" repeatcount="indefinite"/> </rect> </svg> usage notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specifies the length of the simple duration.
...age notes value <clock-value> | media | indefinite default value indefinite animatable no <clock-value> this value specifies the length of the simple duration.
...And 4 more matches

SVG documentation index - SVG: Scalable Vector Graphics
reference, svg, svg attribute the dominant-baseline attribute specifies the dominant baseline, which is the baseline used to align the box’s text and inline-level contents.
...es.
...vg attribute the kerning attribute indicates whether the spacing between glyphs should be adjusted based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and set the spacing between them to a specific length (typically, zero).
...And 4 more matches

AudioParam.setValueCurveAtTime() - Web APIs
the setvaluecurveattime() method of the audioparam interface schedules the parameter's value to change following a curve defined by a list of values.
...ethod of the audioparam interface schedules the parameter's value to change following a curve defined by a list of values.
...ation between the sequence of values defined in an array of floating-point values, which are scaled to fit into the given interval starting at starttime and a specific duration.
...And 3 more matches

HTMLAudioElement - Web APIs
ar_horn.wav'); then you can invoke the play() method on the element audioelement.play(); a common gotcha is trying to play an audio element immediately on page load.
...ioelement.play(); a common gotcha is trying to play an audio element immediately on page load.
...y policy will block that from happening.
...And 3 more matches

<audio>: The Embed Audio element - HTML: Hypertext Markup Language
ements.
...nning point of the media timeline's reference frame.
...a boolean attribute used to disable the capability of remote playback in devices that are attached using wired (hdmi, dvi, etc.) and wireless technologies (miracast, chromecast, dlna, airplay, etc).
...And 3 more matches

JavaScript Daemons Management - Archive of obsolete content
daemon.prototype.unmakeloop = function () { this.reversals = 0; }; daemon.prototype.setrate = function (vto) { var nrate = number(vto); if (!isfinite(nrate) || nrate < 1) { return; } this.rate = nrate; this.synchronize(); }; daemon.prototype.forceposition = function (vto) { if (isfinite(vto)) { this.index = math.round(math.abs(vto)); } }; daemon.prototype.getduration = function () { return this.rate * this.length; }; daemon.prototype.getdirection = function () { return this.isatend() !== this.backw; }; daemon.prototype.getposition = function () { return this.index; }; /* instantaneous movement (synchronous).
... equal to infinity.
...aemon.unmakeloop() sets the reversals property equal to 0.
...And 2 more matches

jspage - Archive of obsolete content
string,secure){if($type(string)!="string"||!string.length){return null;}if(secure&&!(/^[,:{}\[\]0-9.\-+eaeflnr-u \n\r\t]*$/).test(string.replace(/\\./g,"@").replace(/"[^"\\\n\r]*"/g,""))){return null; }return eval("("+string+")");}});native.implement([hash,array,string,number],{tojson:function(){return json.encode(this);}});var cookie=new class({implements:options,options:{path:false,domain:false,duration:false,secure:false,document:document},initialize:function(b,a){this.key=b; this.setoptions(a);},write:function(b){b=encodeuricomponent(b);if(this.options.domain){b+="; domain="+this.options.domain;}if(this.options.path){b+="; path="+this.options.path; }if(this.options.duration){var a=new date();a.settime(a.gettime()+this.options.duration*24*60*60*1000);b+="; expires="+a.togmtstring();}if(this.opt...
...a.settime(a.gettime()+this.options.duration*24*60*60*1000);b+="; expires="+a.togmtstring();}if(this.options.secure){b+="; secure"; }this.options.document.cookie=this.key+"="+b;return this;},read:function(){var a=this.options.document.cookie.match("(?:^|;)\\s*"+this.key.escaperegexp()+"=([^;]*)"); return(a)?decodeuricomponent(a[1]):null;},dispose:function(){new cookie(this.key,$merge(this.options,{duration:-1})).write("");return this;}});cookie.write=function(b,c,a){return new cookie(b,a).write(c); };cookie.read=function(a){return new cookie(a).read();};cookie.dispose=function(b,a){return new cookie(b,a).dispose();};var swiff=new class({implements:[options],options:{id:null,height:1,width:1,container:null,properties:{},params:{quality:"high",allowscriptaccess:"always",wmode:"transparent",swliveconn...
...hild(this.toelement());return this;},remote:function(){return swiff.remote.apply(swiff,[this.toelement()].extend(arguments)); }});swiff.callbacks={};swiff.remote=function(obj,fn){var rs=obj.callfunction('<invoke name="'+fn+'" returntype="javascript">'+__flash__argumentstoxml(arguments,2)+"</invoke>"); return eval(rs);};var fx=new class({implements:[chain,events,options],options:{fps:50,unit:false,duration:500,link:"ignore"},initialize:function(a){this.subject=this.subject||this; this.setoptions(a);this.options.duration=fx.durations[this.options.duration]||this.options.duration.toint();var b=this.options.wait;if(b===false){this.options.link="cancel"; }},gettransition:function(){return function(a){return -(math.cos(math.pi*a)-1)/2;};},step:function(){var a=$time();if(a<this.time+this.options.duratio...
...And 2 more matches

Introduction to automated testing - Learn web development
sure everything is saved, and run your file like so: node call_bstack below we've also provided some other ready-made functions you might find useful when working with the browserstack restful api.
...functions you might find useful when working with the browserstack restful api.
... name: <string>, duration: <int>, status: <string>, hashed_id: <string> } }, ...
...And 2 more matches

AnimationEffect.getComputedTiming() - Web APIs
the getcomputedtiming() method of the animationeffect interface returns the calculated timing properties for this animation effect.
...ng() method of the animationeffect interface returns the calculated timing properties for this animation effect.
...oneffect interface returns the calculated timing properties for this animation effect.
...And 2 more matches

AudioBufferSourceNode.start() - Web APIs
the start() method of the audiobuffersourcenode interface is used to schedule playback of the audio data contained in the buffer, or to begin playback immediately.
...he number of seconds in the same time coordinate system as the audiocontext, to the time within the audio buffer that playback should begin.
...h will be played (based on the audio buffer's duration and/or the loopend property) are silently clamped to the maximum value allowed.
...And 2 more matches

HTMLMediaElement - Web APIs
ted html attribute, which indicates whether the media element's audio output should be muted by default.
... by default.
...iakeys is a set of keys that an associated htmlmediaelement can use for decryption of media data during playback.
...And 2 more matches

MediaPositionState.position - Web APIs
ion to the viewer.
...xample, a browser might use this information along with the position property and the navigator.mediasession.playbackstate, as well as the session's metadata to provide an integrated common user interface showing the currently playing media as well as standard pause, play, forward, reverse, and other controls.
....
...And 2 more matches

MediaSession.setPositionState() - Web APIs
optional an object conforming to the mediapositionstate dictionary, providing updated information about the playback position and speed of the document's ongoing media.
... playback position and speed of the document's ongoing media.
... duration.
...And 2 more matches

<video>: The Video Embed element - HTML: Hypertext Markup Language
m suggesting a picture-in-picture context menu or to request picture-in-picture automatically in some cases.
...utomatically in some cases.
...na, airplay, etc).
...And 2 more matches

Digital audio concepts - Web media technologies
a sample.
... converter circuitry reads the voltage of the signal as a value between (in this case) -1.0 and +1.0.
... of the encoded audio size; the higher the bit rate, the higher the resulting audio quality will be.
...And 2 more matches

Video and Audio APIs - Learn web development
function playpausemedia() { if(media.paused) { play.setattribute('data-icon','u'); media.play(); } else { play.setattribute('data-icon','p'); media.pause(); } } here we use an if statement to check whether the video is paused.
... need to define the windbackward() and windforward() functions invoked in the setinterval() calls.
...es * 60); let minutevalue; let secondvalue; if (minutes < 10) { minutevalue = '0' + minutes; } else { minutevalue = minutes; } if (seconds < 10) { secondvalue = '0' + seconds; } else { secondvalue = seconds; } let mediatime = minutevalue + ':' + secondvalue; timer.textcontent = mediatime; let barlength = timerwrapper.clientwidth * (media.currenttime/media.duration); timerbar.style.width = barlength + 'px'; } this is a fairly long function, so let's go through it step by step: first of all, we work out the number of minutes and seconds in the htmlmediaelement.currenttime value.
...s a colon character plus secondvalue.

AudioBufferSourceNode.AudioBufferSourceNode() - Web APIs
playback, the new value will take effect on the next processing block of audio.
...alue, in seconds, where looping should end if the loop attribute is true.
...erted to an exact sample frame offset within the buffer, by multiplying by the buffer's sample rate and rounding to the nearest integer value.
...g to the nearest integer value.

AudioScheduledSourceNode.start() - Web APIs
the start() method on audioscheduledsourcenode schedules a sound to begin playback at the specified time.
...pecified in the same time coordinate system as the audiocontext is using for its currenttime attribute.
...ntext is using for its currenttime attribute.
...ting the when parameter entirely) causes the sound to start playback immediately.

Frame Timing API - Web APIs
rate of 60 fps (frames per second) for a 60 hz refresh rate is a common target for a good responsive user experience.
...frames the performanceframetiming interface extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constrainting the properties as follows: performanceentry.entrytype set to "frame".
...y qualifying and constrainting the properties as follows: performanceentry.entrytype set to "frame".
...me" event type.

GamepadHapticActuator.pulse() - Web APIs
the pulse() method of the gamepadhapticactuator interface makes the hardware pulse at a certain intensity for a specified duration.
... the pulse() method of the gamepadhapticactuator interface makes the hardware pulse at a certain intensity for a specified duration.
...gamepadhapticactuator interface makes the hardware pulse at a certain intensity for a specified duration.
...s the hardware pulse at a certain intensity for a specified duration.

MediaRecorder.start() - Web APIs
the mediarecorder method start(), which is part of the mediastream recording api, begins recording media into one or more blob objects.
...upon the recorded media, while a new blob is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream.
...is created to record the next slice of the media assuming the mediarecorder's state is inactive, start() sets the state to recording, then begins capturing media from the input stream.
... browser is unable to start recording or continue recording, it will raise a domerror event, followed by a mediarecorder.dataavailable event containing the blob it has gathered, followed by the mediarecorder.stop event.

Using Performance Timeline - Web APIs
(), getentriesbyname() and getentriesbytype().
...me() and getentriesbytype().
...+ i + "]"); print_perf_entry(p[i]); } } performanceentry interface the performanceentry interface encapsulates a single performance entry i.e.
...tentries(); // should only have 'mark' entries for (var i=0; i < perfentries.length; i++) { print_perf_entry(perfentries[i]); } }); // subscribe to only the 'mark' event observe_mark.observe({entrytypes: ['mark']}); } function print_perf_entry(pe) { log("name: " + pe.name + "; entrytype: " + pe.entrytype + "; starttime: " + pe.starttime + "; duration: " + pe.duration); } the performance observer entry list interface has the same three getentries*() methods as the performance interface and these methods are used to retrieve observed performance entries within the observer callback.

User Timing API - Web APIs
performance mark the performance.mark() method is used to create a performance mark.
...rk() method is used to create a performance mark.
...asure's name and startmarkname and endmarkname are the start and end names, respectively, of the marks the measure will be placed between (in the performance timeline).
...he start and end names, respectively, of the marks the measure will be placed between (in the performance timeline).

Advanced techniques: Creating and sequencing audio - Web APIs
fferent properties — for instance setting the frequency on a bandpass type adjusts the middle frequency, however on a lowpass it would set the top frequency.
....
...dpass = audioctx.createbiquadfilter(); bandpass.type = 'bandpass'; bandpass.frequency.value = 1000; // connect our graph noise.connect(bandpass).connect(audioctx.destination); noise user controls on the ui we'll expose the noise duration and the frequency we want to band, allowing the user to adjust them via range inputs and event handlers just like in previous sections: <label for="duration">duration</label> <input name="duration" id="duration" type="range" min="0" max="2" value="1" step="0.1" /> <label for="band">band</label> <input name="band" id="band" type="range" min="400" max="1200" value="1000" step="5" /> let noiseduration = 1; const durcontrol = document.queryselector('#duration'); durcontrol.addeventlistener('input', function() { noiseduration = number(this.value); }, false);...
...entlistener('input', function() { noiseduration = number(this.value); }, false); let bandhz = 1000; const bandcontrol = document.queryselector('#band'); bandcontrol.addeventlistener('input', function() { bandhz = number(this.value); }, false); the final playnoise() function here's the entire playnoise() function: function playnoise() { const buffersize = audioctx.samplerate * noiseduration; // set the time of the note const buffer = audioctx.createbuffer(1, buffersize, audioctx.samplerate); // create an empty buffer let data = buffer.getchanneldata(0); // get data // fill the buffer with noise for (let i = 0; i < buffersize; i++) { data[i] = math.random() * 2 - 1; } // create a buffer source for our created data let noise = audioctx.createbuffe...

window.location - Web APIs
ent vitae eros erat, pulvinar laoreet magna.
... erat, pulvinar laoreet magna.
... metus a turpis lobortis tempor eu vel tortor.
...; } return function (sbookmark, busehash) { var onode = document.queryselector(sbookmark); _scrolly = document.documentelement.scrolltop; _scrollx = document.documentelement.scrollleft; _bookmark = sbookmark; _usehash = busehash === true; _nodex = onode.offsetleft; _nodey = onode.offsettop; _itframe = 1; if (_scrollid === -1) { _scrollid = setinterval(_next, math.round(nduration / nframes)); } }; })(); specifications specification status comment html living standardthe definition of 'window.location' in that specification.

Web accessibility for seizures and physical reactions - Accessibility
nd crt/lcd screen flicker, had an interesting response concerning the refresh rates in hz.
...er, had an interesting response concerning the refresh rates in hz.
...ich, used in combination with animation-duration or transition-duration, to conclude at a rate that is imperceptible to the human eye.
...he article, css-tricks revisiting prefers-reduced-motion, the reduced motion media query.

WebKit CSS extensions - CSS: Cascading Style Sheets
ask-repeat-x -webkit-mask-repeat-y formerly proprietary properties that are now standard note: to maximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below.
...ext-emphasis -epub-text-emphasis-color -webkit-text-emphasis-color -webkit-text-emphasis-position -epub-text-emphasis-style -webkit-text-emphasis-style -webkit-text-justify -webkit-text-orientation -webkit-text-size-adjust -webkit-text-underline-position -webkit-transform -webkit-transform-origin -webkit-transform-style -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u-w -webkit-user-select -epub-word-break -epub-writing-mode supported in non-webkit browsers without a prefix, but not standard the following properties are supported in at least one browser without a prefix, but are not on the standards track.
...ties that are now standard above.
...ition-x** -webkit-mask-position-y** -webkit-mask-repeat -webkit-mask-size o-p -webkit-order -webkit-perspective -webkit-perspective-origin t -webkit-text-fill-color** -webkit-text-size-adjust -webkit-text-stroke** -webkit-text-stroke-color** -webkit-text-stroke-width** -webkit-transform -webkit-transform-origin -webkit-transition -webkit-transition-delay -webkit-transition-duration -webkit-transition-property -webkit-transition-timing-function u -webkit-user-select *supported with -moz- and -webkit- prefix in firefox, but not supported without a prefix.

animation-timing-function - CSS: Cascading Style Sheets
the animation-timing-function css property sets how an animation progresses through the duration of each cycle.
...d 100%) depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the animation begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end.
...mp-none | jump-both | start | end examples cubic-bezier examples <div class="parent"> <div class="ease">ease</div> <div class="easein">ease-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .ease { animation-...
... class="parent"> <div class="jump-start">jump-start</div> <div class="jump-end">jump-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="start">start</div> <div class="end">end</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent > div[class] { animation-name: changeme; animation-duration: 10s; animation-iteration-count: infinite; margin-bottom: 4px; } @keyframes changeme { 0% { min-width: 12em; width: 12em; background-color: black; border: 1px solid red; color: white; } 100% { width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; } } .jump-start { anim...

transition-timing-function - CSS: Cascading Style Sheets
for css properties being affected by a transition effect.
...depends on which of the following jump terms is used: jump-start denotes a left-continuous function, so that the first jump happens when the transition begins; jump-end denotes a right-continuous function, so that the last jump happens when the animation ends; jump-none there is no jump on either end.
...-in</div> <div class="easeout">ease-out</div> <div class="easeinout">ease-in-out</div> <div class="linear">linear</div> <div class="cb">cubic-bezier(0.2,-2,0.8,2)</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration: 7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration: 2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var in...
...mp-end</div> <div class="jump-both">jump-both</div> <div class="jump-none">jump-none</div> <div class="step-start">step-start</div> <div class="step-end">step-end</div> </div> .parent {} .parent > div[class] { width: 12em; min-width: 12em; margin-bottom: 4px; background-color: black; border: 1px solid red; color: white; transition-property: all; transition-duration:7s; } .parent > div.box1{ width: 90vw; min-width: 24em; background-color: magenta; color: yellow; border: 1px solid orange; transition-property: all; transition-duration:2s; } function updatetransition() { var els = document.queryselectorall(".parent > div[class]"); for(var c = els.length, i = 0; i < c; i++) { els[i].classlist.toggle("box1"); } } var inte...

Event reference
canplay the browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
...browser can play the media, but estimates that not enough data has been loaded to play the media up to its end without having to stop for further buffering of content.
...tml5 a dragged element or text selection leaves a valid drop target.
...aves a valid drop target.

Media buffering, seeking, and time ranges - Developer guides
ript: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); var mycanvas = document.getelementbyid('my-canvas'); var context = mycanvas.getcontext('2d'); context.fillstyle = 'lightgray'; context.fillrect(0, 0, mycanvas.width, mycanvas.height); context.fillstyle = 'red'; context.strokestyle = 'white'; var inc = mycanvas.width / myaudio.duration; // display timeranges myaudio.addeventlistener('seeked', function() { for (i = 0; i < myaudio.buffered.length; i++) { var startx = myaudio.buffered.start(i) * inc; var endx = myaudio.buffered.end(i) * inc; var width = endx - startx; context.fillrect(startx, 0, width, mycanvas.height); context.rect(startx, 0, width, mycanvas.height); ...
...length - 1) actually tells us the end point of the last time range that is seekable (not all seekable media).
... width: 0; } .progress { margin-top: -20px; height: 20px; position: relative; width: 300px; } #progress-amount { display: block; height: 100%; background-color: #595; width: 0; } and the following javascript provides our functionality: window.onload = function(){ var myaudio = document.getelementbyid('my-audio'); myaudio.addeventlistener('progress', function() { var duration = myaudio.duration; if (duration > 0) { for (var i = 0; i < myaudio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; break; } }...
...dio.buffered.length; i++) { if (myaudio.buffered.start(myaudio.buffered.length - 1 - i) < myaudio.currenttime) { document.getelementbyid("buffered-amount").style.width = (myaudio.buffered.end(myaudio.buffered.length - 1 - i) / duration) * 100 + "%"; break; } } } }); myaudio.addeventlistener('timeupdate', function() { var duration = myaudio.duration; if (duration > 0) { document.getelementbyid('progress-amount').style.width = ((myaudio.currenttime / duration)*100) + "%"; } }); } the progress event is fired as data is downloaded, this is a good event to react to if we want to display download or buffering progress.

Logical nullish assignment (??=) - JavaScript
ence any side effects of doing so do not take effect (e.g., if expr is a function call, the calling never takes place).
... function call, the calling never takes place).
...ling never takes place).
...signment short-circuits as well meaning that x ??= y is equivalent to: x ??

Statistics API
the data } prefs.set("javascript.options.mem.notify", true); services.obs.addobserver(observer, "garbage-collection-statistics", false); the toplevel json object contains these fields: timestamp: integer (microseconds) - time at which the gc ended, measured from epoch.
...e: number (milliseconds) - the amount of wall time that this gc consumed.
...; neither one is a refinment of the other).

nsIUpdateChecker
/nsiupdateservice.idlscriptable this interface describes an object that knows how to check for software updates.
..., the update checker checks for updates, regardless of the current value of the user's update settings.
...ks for updates, regardless of the current value of the user's update settings.

Animation.currentTime - Web APIs
renttime; animation.currenttime = newtime; value a number representing the current time in milliseconds, or null to deactivate the animation.
...resenting the current time in milliseconds, or null to deactivate the animation.
... start of the game, her height is set between the two extremes by setting her animation's currenttime to half her keyframeeffect's duration: alicechange.currenttime = alicechange.effect.timing.duration / 2; a more generic means of seeking to the 50% mark of an animation would be: animation.currenttime = animation.effect.getcomputedtiming().delay + animation.effect.getcomputedtiming().activeduration / 2; reduced time precision to offer protection against timing attacks and fingerprinting, the precision of animation.currenttime might get rounded depending on browser settings.

EffectTiming.fill - Web APIs
ans that unless we specify otherwise using the fill property, the instant the animation is started the element will be rotated to the left 90°, and then it will animate smoothly from there.
...of timing properties, which is where we pass in fill.
...)'; elem.animate({ transform: 'none', offset: 0 }, 200); for some complex effects where animations layer on top of one another, it may be necessary to use a fill mode temporarily to capture the final value of an animation before canceling it.

Element.animate() - Web APIs
m.
...: a domstring with which to reference the animation.
...ation api), we use the convenient animate() method to immediately create and play an animation on the #tunnel element to make it flow upwards, infinitely.

HTMLElement: transitionend event - Web APIs
then the event will not be generated.
...tion.ontransitionend = () => { console.log('transition ended'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
...red'; }); el.addeventlistener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitionend event is fired in both directions: when the box finishes turning and the opacity hits 0 or 1, depending on the direction.

KeyframeEffect.KeyframeEffect() - Web APIs
t(element, keyframeset, keyframeoptions); var keyframes = new keyframeeffect(sourcekeyframes); parameters the first type of constructor (see above) creates a completely new keyframeeffect object instance.
...or an object containing one or more of the following: delay optional the number of milliseconds to delay the start of the animation.
...one.

MediaPositionState - Web APIs
the media session api's mediapositionstate dictionary is used to represent the current playback position of a media session.
... the media session api's mediapositionstate dictionary is used to represent the current playback position of a media session.
... the media session api's mediapositionstate dictionary is used to represent the current playback position of a media session.

PerformanceEntry - Web APIs
.entrytype property.
...ge for valid values.
...anceentries() { // use getentries() to get a list of all performance entries var p = performance.getentries(); for (var i=0; i < p.length; i++) { console.log("performanceentry[" + i + "]"); print_performanceentry(p[i]); } } function print_performanceentry(perfentry) { var properties = ["name", "entrytype", "starttime", "duration"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in perfentry; if (supported) { var value = perfentry[properties[i]]; console.log("...

PerformanceEventTiming - Web APIs
manceeventtiming.target returns the associated event's last target, if it is not removed.
...urns the associated event's last target, if it is not removed.
...ed event's last target, if it is not removed.

PerformanceServerTiming - Web APIs
icted to the same origin, but you can use the timing-allow-origin header to specify the domains that are allowed to access the server metrics.
...r to specify the domains that are allowed to access the server metrics.
...urn settimeout(_ => { response.end(); }, 1000) }; http.createserver(requesthandler).listen(3000).on('error', console.error); the performanceservertiming entries are now observable from javascript via the performanceresourcetiming.servertiming property: let entries = performance.getentriesbytype('resource'); console.log(entries[0].servertiming); // 0: performanceservertiming {name: "cache", duration: 23.2, description: "cache read"} // 1: performanceservertiming {name: "db", duration: 53, description: ""} // 2: performanceservertiming {name: "app", duration: 47.2, description: ""} specifications specification status comment server timingthe definition of 'performanceservertiming' in that specification.

Performance Timeline - Web APIs
.
...are extended (with additional constraints) by other interfaces (such as performancemark): name the name of the performance entry when the metric was created.
...ark): name the name of the performance entry when the metric was created.

SVGAnimationElement - Web APIs
time, in seconds, for this animation element's current interval, if it exists, regardless of whether the interval has begun yet.
..., regardless of whether the interval has begun yet.
...gun yet.

Vibration API - Web APIs
ibration period.
...ng vibrations calling navigator.vibrate() with a value of 0, an empty array, or an array containing all zeros will cancel any currently ongoing vibration pattern.
... will allow you to create persistent vibration: var vibrateinterval; // starts vibration at passed in level function startvibrate(duration) { navigator.vibrate(duration); } // stops vibration function stopvibrate() { // clear interval and stop persistent vibrating if(vibrateinterval) clearinterval(vibrateinterval); navigator.vibrate(0); } // start persistent vibration at given duration and interval // assumes a number value is given function startpersistentvibrate(duration, interval) { vibrateinterval = setinterval(function() { startvibrate(duration); }, interval); } of course, the snippet above doesn't take into account the array method of vibration; persistent array-based vibration will require calculating the sum of the array items and creating an interval b...

Inputs and input sources - Web APIs
t profiles.
...n xr device provides a mode in which the mouse is used to simulate events on the device, a new xrinputsource object might be created to represent the simulated input source for the duration of handling the action.
...releases the mouse button, the select event is sent to the xrsession, then the dom receives a click event.

Web Animations API Concepts - Web APIs
w far along a set timeline we've come.
... repeating the animation lines up additional iterations of it along the timeline.
...e’ll get to those in a moment).

Media events - Developer guides
the readystate changes to have_enough_data, indicating that the entire media can be played without interruption, assuming the download rate remains at least at the current level.
...can be played without interruption, assuming the download rate remains at least at the current level.
...t level.

CSS3 - Archive of obsolete content
ns that are deemed to be in the refining phase are already fairly stable.
...anslatez(), scale3d(), scalez(), rotate3d(), rotatex(), rotatey(), rotatez(), and perspective().

Implementation Status - Archive of obsolete content
xml schema built-in datatypes partial whitespace facet not supported.
... 5.2.1 additional xforms datatypes to allow empty content unsupported 5.2.2 xforms:listitem supported 5.2.3 xforms:listitems supported 5.2.4 xforms:daytimeduration supported 5.2.5 xforms:yearmonthduration supported 5.2.6 xforms:email unsupported 5.2.7 xforms:card-number unsupported supported types: string, normalized string, token, language, boolean, gday, gmonth, gyear, gyearmonth, gmonthday, date, time, datetime, duration, integer, nonpositiveinteger, negativeinteger, positivein...

Accessible multimedia - Learn web development
= 'play'; }; there is no stop() function available on htmlmediaelements, so instead we pause() it, and at the same time set the currenttime to 0.
...er.duration || player.paused) { player.pause(); player.currenttime = 0; playpausebtn.textcontent = 'play'; } }; these are very simple, just adding or subtracting 3 seconds to the currenttime each time they are clicked.

PromiseWorker.jsm
be passed here.
...s resolved before posting the message.

Profiling with the Firefox Profiler
waiting and not necessarily that there was an event pending for that long.
...ally setting the layers.dump-texture pref to true, or by adding -f layersdump to the profiler command line (the latter implies both the layers.dump and layers.dump-texture prefs).

JSAPI User Guide
ated error.
...erties of the object.

Animation.play() - Web APIs
ce's growing animation (alicechange) to play forward, causing her to get bigger, as well as triggering the cake's animation.
... to play forward, causing her to get bigger, as well as triggering the cake's animation.

AudioBuffer - Web APIs
te buffer.
...eturns a new audiobuffer object instance.

Using the CSS Typed Object Model - Web APIs
onst myelement = document.queryselector('p'); // get the table we'll be populating const stylestable = document.queryselector('#regurgitation'); // retrieve all computed styles with computedstylemap() const allcomputedstyles = myelement.computedstylemap(); // array of properties we're interested in const ofinterest = ['padding-top', 'margin-bottom', 'font-size', 'font-stretch', 'animation-duration', 'animation-iteration-count', 'width', 'height']; // iterate thru our properties of interest for ( let i = 0; i < ofinterest.length; i++ ) { // create a row const row = document.createelement( 'tr' ); // add the name of the property const cssproperty = document.createelement( 'td' ); cssproperty.appendchild( document.createtextnode( ofinterest[i] ) ); row.appendchild...
... row.appendchild( cssunit ); //add the row to the table stylestable.appendchild( row ); } for those of you using a non-supporting browser, the above output should looks something like this: property value unit padding-top 0 px margin-bottom 16 px font-size 16 px font-stretch 100 percent animation-duration 0 s animation-iteration-count 1 number width auto undefined height auto undefined you'll note the <length> unit returned is px, the <percentage> unit returned is percent, the <time> unit is s for 'seconds', and the unitless <number> unit is number.

Document - Web APIs
event is raised.
...ng the code to be called when the dragover event is raised.

EffectTiming.endDelay - Web APIs
the enddelay property of the effecttiming dictionary (part of the web animations api) indicates the number of milliseconds to delay after the active period of an animation sequence.
...nddelay property of the effecttiming dictionary (part of the web animations api) indicates the number of milliseconds to delay after the active period of an animation sequence.

EffectTiming - Web APIs
the effecttiming dictionary, part of the web animations api, is used by element.animate(), keyframeeffectreadonly(), and keyframeeffect() to describe timing properties for animation effects.
...behave when the animation begins and ends.

Using the Frame Timing API - Web APIs
ch as processing dom events, resizing, scrolling, rendering, css animations, etc.
...tentriesbyname() returns a list of explicitly observed performanceentry objects based on the given name and entry type.

GlobalEventHandlers - Web APIs
event is raised.
...ng the code to be called when the dragover event is raised.

HTMLElement: transitioncancel event - Web APIs
transition.ontransitioncancel = () => { console.log('transition canceled'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition"></div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform background; transition-duration: 2s; transition-delay: 2s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate that the transitionstart, transitionrun, transitioncancel and transitionend events fire.
...istener('transitioncancel', function() { message.textcontent = 'transitioncancel fired'; }); el.addeventlistener('transitionend', function() { message.textcontent = 'transitionend fired'; }); the transitioncancel event is fired if the transition is cancelled in either direction after the transitionrun event occurs and before the transitionend is fired.

HTMLMediaElement.currentTime - Web APIs
ime = 35; value a double-precision floating-point value indicating the current playback time in seconds.
...if the media is available.

HTMLMediaElement: loadedmetadata event - Web APIs
read only int the number of samples collected in all channels.
...t firing.

Timing element visibility with the Intersection Observer API - Web APIs
he document itself becomes visible or invisible.
...hrough previouslyvisibleads and set each one's dataset.lastviewstarted to the current document's time (in milliseconds since the document was created) using the performance.now() method.

KeyframeEffectOptions - Web APIs
the keyframeeffectoptions dictionary, part of the web animations api, is used by element.animate(), keyframeeffectreadonly() and keyframeeffect() to describe timing properties for animation effects.
...eudo-element to be targeted, if any.

MediaPositionState.playbackRate - Web APIs
er and faster reverse playback.
...erse playback.

MediaSession.setActionHandler() - Web APIs
lers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers.
...cking the value of the mediasessionactiondetails object's action property: let skiptime = 7; navigator.mediasession.setactionhandler("seekforward", handleseek); navigator.mediasession.setactionhandler("seekbackward", handleseek); function handleseek(details) { switch(details.action) { case "seekforward": audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); break; case "seekbackward": audio.currenttime = math.max(audio.currenttime - skiptime, 0); break; } } here, the handleseek() function handles both seekbackward and seekforward actions.

Media Session action types - Web APIs
lers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers.
...cking the value of the mediasessionactiondetails object's action property: let skiptime = 7; navigator.mediasession.setactionhandler("seekforward", handleseek); navigator.mediasession.setactionhandler("seekbackward", handleseek); function handleseek(details) { switch(details.action) { case "seekforward": audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); break; case "seekbackward": audio.currenttime = math.max(audio.currenttime - skiptime, 0); break; } } here, the handleseek() function handles both seekbackward and seekforward actions.

MediaSessionActionDetails - Web APIs
lers this example implements seek forward and backward actions for an audio player by setting up the seekforward and seekbackward action handlers.
...cking the value of the mediasessionactiondetails object's action property: let skiptime = 7; navigator.mediasession.setactionhandler("seekforward", handleseek); navigator.mediasession.setactionhandler("seekbackward", handleseek); function handleseek(details) { switch(details.action) { case "seekforward": audio.currenttime = math.min(audio.currenttime + skiptime, audio.duration); break; case "seekbackward": audio.currenttime = math.max(audio.currenttime - skiptime, 0); break; } } here, the handleseek() function handles both seekbackward and seekforward actions.

MediaSource.setLiveSeekableRange() - Web APIs
the setliveseekablerange() method of the mediasource interface sets the range that the user can seek to in the media element.
... start the start of the seekable range to set in seconds measured from the beginning of the source.

MediaSource - Web APIs
he selected video track, enabled audio tracks, and shown/hidden text tracks.
...abled audio tracks, and shown/hidden text tracks.

performance.measure() - Web APIs
ctively.
...sure.

PerformanceFrameTiming - Web APIs
uch as processing dom events, resizing, scrolling, rendering, css animations, etc..
... properties this interface has no properties but it extends the following performanceentry properties (for "frame" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "frame".

PerformanceMark - Web APIs
no properties but it extends the following performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".
...wing performanceentry properties by qualifying/constraining the properties as follows: performanceentry.entrytype returns "mark".

PerformanceMeasure - Web APIs
xtends the following performanceentry properties by qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".
...qualifying/constrainting the properties as follows: performanceentry.entrytype returns "measure".

PerformanceObserverEntryList.getEntries() - Web APIs
.
...e in chronological order based on the entries' starttime.

PerformanceObserverEntryList.getEntriesByName() - Web APIs
e name will be used to determine the entries to return.
...d to determine the entries to return.

PerformanceObserverEntryList.getEntriesByType() - Web APIs
s that have the specified type.
...ecified type.

RTCDTMFSender.insertDTMF() - Web APIs
sending of the tones is performed asynchronously, with tonechange events sent to the rtcdtmfsender every time a tone starts or ends.
...t tone buffer, so that those tones play after the previously-enqueued tones.

RTCIceTransport.getLocalParameters() - Web APIs
the rtcicetransport method getlocalparameters() returns an rtciceparameters object which provides information uniquely identifying the local peer for the duration of the ice session.
... duration of the ice session.

RTCIceTransport.getRemoteParameters() - Web APIs
the rtcicetransport method getremoteparameters() returns an rtciceparameters object which provides information uniquely identifying the remote peer for the duration of the ice session.
...ation of the ice session.

RTCOutboundRtpStreamStats.qualityLimitationReason - Web APIs
quality in the stream is currently being reduced by the codec during encoding, or none if no quality reduction is being performed.
...pression factor.

SourceBuffer.remove() - Web APIs
lse.
...buffer.remove(start, end); parameters start a double representing the start of the time range, in seconds.

Geometry and reference spaces in WebXR - Web APIs
dians, simply multiply the value in degrees by π/180.
...s.

CSS Animations - CSS: Cascading Style Sheets
css animations is a module of css that lets you animate the values of css properties over time, using keyframes.
... css animations is a module of css that lets you animate the values of css properties over time, using keyframes.

CSS Transitions - CSS: Cascading Style Sheets
css transitions is a module of css that lets you create gradual transitions between the values of specific css properties.
... css transitions is a module of css that lets you create gradual transitions between the values of specific css properties.

Mozilla CSS extensions - CSS: Cascading Style Sheets
fixed standard properties instead of the prefixed ones listed below.
...neobsolete since gecko 39 -moz-text-decoration-styleobsolete since gecko 39 -moz-text-size-adjust -moz-transform [prefixed version still accepted] -moz-transform-origin [prefixed version still accepted] -moz-transform-style [prefixed version still accepted] -moz-transition [prefixed version still accepted] -moz-transition-delay [prefixed version still accepted] -moz-transition-duration [prefixed version still accepted] -moz-transition-property [prefixed version still accepted] -moz-transition-timing-function [prefixed version still accepted] -moz-user-select values global values -moz-initial -moz-appearance button button-arrow-down button-arrow-next button-arrow-previous button-arrow-up button-bevel checkbox checkbox-container checkbox-label c...

CSS reference - CSS: Cascading Style Sheets
le to find the syntax of the specific one you want.
...ration-thicknesstext-emphasistext-emphasis-colortext-emphasis-positiontext-emphasis-styletext-indenttext-justifytext-orientationtext-overflowtext-renderingtext-shadowtext-transformtext-underline-offsettext-underline-position<time><time-percentage><timing-function>top@top-centertouch-actiontransformtransform-box<transform-function>transform-origintransform-styletransitiontransition-delaytransition-durationtransition-propertytransition-timing-functiontranslatetranslate()translate3d()translatex()translatey()translatez()turnuunicode-bidiunicode-range (@font-face)unset<url>url()user-zoom (@viewport)v:validvar()vertical-alignvh@viewportviewport-fit (@viewport)visibility:visitedvmaxvminvwwwhite-spacewidowswidthwidth (@viewport)will-changeword-breakword-spacingword-wrapwriting-modexxzz-indexzoom (@viewpor...

animation-fill-mode - CSS: Cascading Style Sheets
e (which is the default).
...ass="demo"> <div class="growsandstays">this grows and stays big.</div> <div class="grows">this just grows.</div> </div> css .demo { border-top: 100px solid #ccc; height: 300px; } @keyframes grow { 0% { font-size: 0; } 100% { font-size: 40px; } } .demo:hover .grows { animation-name: grow; animation-duration: 3s; } .demo:hover .growsandstays { animation-name: grow; animation-duration: 3s; animation-fill-mode: forwards; } see css animations for more examples.

<easing-function> - CSS: Cascading Style Sheets
the <easing-function> css data type denotes a mathematical function that describes how fast one-dimensional values change during animations.
...gins; jump-end denotes a right-continuous function, so that the last step or jump happens when the animation ends; jump-both denotes a right and left continuous function, includes pauses at both the 0% and 100% marks, effectively adding a step during the animation iteration; jump-none there is no jump on either end.

<time> - HTML: Hypertext Markup Language
e html <time> element represents a specific period in time.
...ing 11-18 a valid week string 2011-w47 a valid time string 14:54 14:54:39 14:54:39.929 a valid local date and time string 2011-11-18t14:54:39.929 2011-11-18 14:54:39.929 a valid global date and time string 2011-11-18t14:54:39.929z 2011-11-18t14:54:39.929-0400 2011-11-18t14:54:39.929-04:00 2011-11-18 14:54:39.929z 2011-11-18 14:54:39.929-0400 2011-11-18 14:54:39.929-04:00 a valid duration string pt4h18m3s examples simple example html <p>the concert starts at <time datetime="2018-07-07t20:00:00">20:00</time>.</p> output datetime example html <p>the concert took place on <time datetime="2001-05-15t19:00">may 15</time>.</p> output specifications specification status comment html living standardthe definition of '<time>' in that specifi...

Using HTTP cookies - HTTP
web page can use), you can enable the storage inspector in developer tools and select cookies from the storage tree.
...ocality.

Function.prototype.call() - JavaScript
function() { console.log('#' + i + ' ' + this.species + ': ' + this.name); } this.print(); }).call(animals[i], i); } using call to invoke a function and specifying the context for 'this' in the example below, when we call greet, the value of this will be bound to object obj.
...' + this.name); } this.print(); }).call(animals[i], i); } using call to invoke a function and specifying the context for 'this' in the example below, when we call greet, the value of this will be bound to object obj.

begin - SVG: Scalable Vector Graphics
nc-value consists of the function wallclock() with a time value as parameter.
...e value as parameter.

keyTimes - SVG: Scalable Vector Graphics
the keytimes attribute represents a list of time values used to control the pacing of the animation.
...d with each value defines when the value is set; values are interpolated between the key times.

max - SVG: Scalable Vector Graphics
the max attribute specifies the maximum value of the active animation duration.
...eytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" max="6s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value none animatable no <clock-value> specifies the length of the maximum value of the active duration, measured in local time.

min - SVG: Scalable Vector Graphics
the min attribute specifies the minimum value of the active animation duration.
..." keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> <animate attributename="cy" dur="4s" min="2s" repeatcount="indefinite" values="10 ; 60 ; 110 ; 60 ; 10" keytimes="0 ; 0.25 ; 0.5 ; 0.75 ; 1"/> </circle> </svg> usage notes value <clock-value> default value 0 animatable no <clock-value> specifies the length of the minimum value of the active duration, measured in local time.

repeatDur - SVG: Scalable Vector Graphics
the repeatdur attribute specifies the total duration for repeating an animation.
..." to="50" dur="1s" repeatdur="5s"/> </rect> <rect x="120" y="0" width="100" height="100"> <animate attributetype="xml" attributename="y" from="0" to="50" dur="1s" repeatdur="indefinite"/> </rect> </svg> usage notes value <clock-value> | indefinite default values none animatable no <clock-value> this value specifies the duration in presentation time to repeat the animation.

<set> - SVG: Scalable Vector Graphics
the svg <set> element provides a simple means of just setting the value of an attribute for a specified duration.
...gin:0; padding:0; } <svg viewbox="0 0 10 10" xmlns="http://www.w3.org/2000/svg"> <style> rect { cursor: pointer } .round { rx: 5px; fill: green; } </style> <rect id="me" width="10" height="10"> <set attributename="class" to="round" begin="me.click" dur="2s" /> </rect> </svg> attributes to this attribute defines the value to be applied to the target attribute for the duration of the animation.

Classes and Inheritance - Archive of obsolete content
.y = y; } we can now use this constructor to create instances of shape: let shape = new shape(2, 3); shape instanceof shape; // => true shape.x; // => 2 shape.y; // => 3 the keyword new tells javascript that we are performing a constructor call.

Windows - Archive of obsolete content
ows requires gecko 2.0(firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko, each dom window has a unique 64-bit id number.

Appendix F: Monitoring DOM changes - Archive of obsolete content
ttp://www.w3.org/1999/xhtml'; doc = doc || document; let style = doc.createelementns(xhtml, 'style'); style.setattribute('type', 'text/css'); let preamble = ' @-moz-keyframes ' + event + ' { \n\ from { clip: rect(1px, auto, auto, auto); } to { clip: rect(0px, auto, auto, auto); } \n\ }\n'; let properties = [ 'animation-duration: 0.0001s;', 'animation-name: ' + event + ' !important;' ]; properties = properties.map(function (prop) ' ' + watchnodes.namespace + prop) .join('\n'); doc.addeventlistener('animationstart', listener, false); function listener(event) { if (event.animationname == event) callback.call(this...

Introducing the Audio API extension - Archive of obsolete content
ed with mozcurrentsampleoffset()), where "a little" means something on the order of 500 ms of samples.

Supporting per-window private browsing - Archive of obsolete content
e (such as when data or an action originate from some other source than web content).

prefwindow - Archive of obsolete content
n, getbutton, opensubdialog, openwindow, showpane examples <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <prefwindow xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <prefpane id="saveoptions" label="backups"> <preferences> <preference id="pref-backup" name="myapp.mybackups" type="bool"/> <preference id="pref-backupduration" name="myapp.mybackups.duration" type="int"/> </preferences> <checkbox label="automatically save backups" preference="pref-backup"/> <textbox label="duration:" preference="pref-backupduration"/> </prefpane> </prefwindow> attributes activetitlebarcolor type: color string specify background color of the window's titlebar when it is active (foreground).

2006-11-03 - Archive of obsolete content
s what is the 'lastmodifieddate' item used for in tb?

NPPrint - Archive of obsolete content
e union is valid.

XForms Range Element - Archive of obsolete content
attribute.

Building up a basic demo with A-Frame - Game development
o="20 360 0" direction="alternate" dur="4000" repeat="indefinite" easing="ease"> </a-animation> </a-box> as with any other entities, you can define key properties for the animation.

Efficient animation for web games - Game development
some effort for other properties to be animated quickly, these are pretty much the only ones semi-guaranteed to be fast across all browsers.

UI pseudo-classes - Learn web development
d pseudo-class, when supported, will be similar to :invalid, but with better user experience.

Working with Svelte stores - Learn web development
e/transition module.

HTML parser threading
ondataavailable and onstoprequest on the main thread post runnables on to the parser thread.

CustomizableUI.jsm
batch update of items.

OSFile.jsm
by javascript code.

Mozilla Framework Based on Templates (MFBT)
alues within an array.

AsyncTestUtils extended framework
into smaller chunks (like a search operation) so that the ui stays responsive.

Anonymous Shared Memory
shared memory that is accessbile only by parent and child processes.

PRThreadPriority
adpriority; enumerators pr_priority_first placeholder.

nss tech note8
ter, and to fix bugs that caused corruption in multi-process servers, and also to allow separate virtual servers to have their own session caches.

Exact Stack Rooting
s work for every new call frame.

Web Replay
ated js object has not been destroyed yet during the replay, it will never be used again because at this point in the recording it has been finalized.

nsDependentCString
class declaration nstdependentstring_chart stores a null-terminated, immutable sequence of characters.

nsDependentString
class declaration nstdependentstring_chart stores a null-terminated, immutable sequence of characters.

nsIUpdateTimerManager
toolkit/mozapps/update/nsiupdatetimermanager.idlscriptable this interface provides a global application service that provides support for long-duration timers (on the order of many days, weeks, or even months).

Weak reference
in xpcom, a weak reference is a special object that contains a pointer to an xpcom object, but doesnot keep that object alive.

Network request details - Firefox Developer Tools
receiving time taken to read the entire response from the server (or cache).

Animation inspector example: Web Animations API - Firefox Developer Tools
acity: 0; width: 0; } javascript content var iconkeyframeset = [ { transform: 'scale(1)', filter: 'grayscale(100%)'}, { filter: 'grayscale(100%)', offset: 0.333}, { transform: 'scale(1.5)', offset: 0.666 }, { transform: 'scale(1.5)', filter: 'grayscale(0%)'} ]; var notekeyframeset = [ { opacity: '0', width: '0'}, { opacity: '1', width: '300px'} ]; var iconkeyframeoptions = { duration: 750, fill: 'forwards', easing: 'ease-in', enddelay: 100 } var notekeyframeoptions = { duration: 500, fill: 'forwards', easing: 'ease-out', delay: 150 } var icon = document.getelementbyid("icon"); var note = document.getelementbyid("note"); var iconanimation = icon.animate(iconkeyframeset, iconkeyframeoptions); var noteanimation = note.animate(notekeyframeset, notekeyframeoptions...

Work with animations - Firefox Developer Tools
bar for each animation, labeled with its name.

Flame Chart - Firefox Developer Tools
code is just this: function sort(unsorted) { console.log(bubblesort(unsorted)); console.log(selectionsort(unsorted)); console.log(quicksort(unsorted)); } the markers labeled "bubb..." and colored olive-green are presumably bubblesort().

Waterfall - Firefox Developer Tools
example - you can go to the waterfall to see what the browser was doing at that point in the recording.

Animation.commitStyles() - Web APIs
state to be written to the element being animated, in the form of properties inside a style attribute.

Animation.onremove - Web APIs
lue a function to be called to handle the remove event, or null if no remove event handler is set.

Animation.pause() - Web APIs
largely because animations created with the element.animate() method immediately start playing and must be paused manually if you want to avoid that: // animation of the cupcake slowly getting eaten up var nommingcake = document.getelementbyid('eat-me_sprite').animate( [ { transform: 'translatey(0)' }, { transform: 'translatey(-80%)' } ], { fill: 'forwards', easing: 'steps(4, end)', duration: alicechange.effect.timing.duration / 2 }); // doesn't actually need to be eaten until a click event, so pause it initially: nommingcake.pause(); additionally, when resetting : // an all-purpose function to pause the animations on alice, the cupcake, and the bottle that reads "drink me." var stopplayingalice = function() { alicechange.pause(); nommingcake.pause(); drinking.pause(); }; ...

Animation.persist() - Web APIs
ing animations behavior.

Animation.playState - Web APIs
s can get an ending with alice crying into a pool of tears.

Animation.replaceState - Web APIs
sisted by invoking animation.persist() on it.

AudioBufferSourceNode.loopEnd - Web APIs
ing live, or view the source.

AudioBufferSourceNode.loopStart - Web APIs
nning live, or view the source.

AudioParam.setTargetAtTime() - Web APIs
anges exponentially, with each timeconstant bringing you another 63.2% toward the target value.

AudioParam - Web APIs
moves towards the value given by the target parameter.

AudioScheduledSourceNode: ended event - Web APIs
event of the audioscheduledsourcenode interface is fired when the source node has stopped playing.

AudioScheduledSourceNode - Web APIs
g immediately.

console - Web APIs
is the outer level"); console.group("first group"); console.log("in the first group"); console.group("second group"); console.log("in the second group"); console.warn("still in the second group"); console.groupend(); console.log("back to the first group"); console.groupend(); console.debug("back to the outer level"); the output looks like this: timers you can start a timer to calculate the duration of a specific operation.

Document.requestStorageAccess() - Web APIs
not fulfilled.

Document: transitionend event - Web APIs
then the event will not be generated.

EXT_disjoint_timer_query - Web APIs
the ext_disjoint_timer_query extension is part of the webgl api and provides a way to measure the duration of a set of gl commands, without stalling the rendering pipeline.

EffectTiming.delay - Web APIs
n the pool of tears example, each tear is passed a random delay via its timing object: // randomizer function var getrandommsrange = function(min, max) { return math.random() * (max - min) + min; } // loop through each tear tears.foreach(function(el) { // animate each tear el.animate( tearsfalling, { delay: getrandommsrange(-1000, 1000), // randomized for each tear duration: getrandommsrange(2000, 6000), // randomized for each tear iterations: infinity, easing: "cubic-bezier(0.6, 0.04, 0.98, 0.335)" }); }); specifications specification status comment web animationsthe definition of 'delay' in that specification.

EffectTiming.direction - Web APIs
ond, and so forth.

EffectTiming.easing - Web APIs
ames = [ { transform: 'translatey(0)' }, { transform: 'translatey(-100%)' } ]; // get the element that represents alice and the red queen var redqueen_alice_sprite = document.getelementbyid('red-queen_and_alice_sprite'); // animate alice and the red queen using steps() var redqueen_alice = redqueen_alice_sprite.animate( spriteframes, { easing: 'steps(7, end)', direction: "reverse", duration: 600, playbackrate: 1, iterations: infinity }); specifications specification status comment web animationsthe definition of 'easing' in that specification.

EffectTiming.iterations - Web APIs
the forgotten key example, alice waves her arm up and down the entire time the page is open by passing infinity as the value for her iterations property: // get alice's arm, and wave it up and down document.getelementbyid("alice_arm").animate([ { transform: 'rotate(10deg)' }, { transform: 'rotate(-40deg)' } ], { easing: 'steps(2, end)', iterations: infinity, direction: 'alternate', duration: 600 }); specifications specification status comment web animationsthe definition of 'iterations' in that specification.

GamepadHapticActuator - Web APIs
to provide haptic feedback to the user (if available), most commonly vibration hardware.

GlobalEventHandlers.onanimationend - Web APIs
the onanimationend property of the globaleventhandlers mixin is the eventhandler for processing animationend events.

GlobalEventHandlers.ontransitioncancel - Web APIs
ncel event occurs indicating that a css transition has been cancelled on the target, where the target object is an html element (htmlelement), document (document), or window (window).

GlobalEventHandlers.ontransitionend - Web APIs
sitionend event occurs indicating that a css transition has completed on the target, where the target object is an html element (htmlelement), document (document), or window (window).

HTMLElement: animationcancel event - Web APIs
ass="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animatio...

HTMLElement: animationend event - Web APIs
class="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: .2rem; padding: .2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { margin-left: 100%; width: 300%; } to { margin-left: 0%; width: 100%; } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animation-ex...

HTMLElement: animationiteration event - Web APIs
ass="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animatio...

HTMLElement: animationstart event - Web APIs
ass="container"> <p class="animation">you chose a cold night to visit our planet.</p> </div> <button class="activate" type="button">activate animation</button> <div class="event-log"></div> </div> css .container { height: 3rem; } .event-log { width: 25rem; height: 2rem; border: 1px solid black; margin: 0.2rem; padding: 0.2rem; } .animation.active { animation-duration: 2s; animation-name: slidein; animation-iteration-count: 2; } @keyframes slidein { from { transform: translatex(100%) scalex(3); } to { transform: translatex(0) scalex(1); } } js const animation = document.queryselector('p.animation'); const animationeventlog = document.queryselector('.animation-example>.event-log'); const applyanimation = document.queryselector('.animatio...

HTMLElement: transitionrun event - Web APIs
ll start transitioning when the transition delay has expired'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.

HTMLElement: transitionstart event - Web APIs
ntransitionrun = () => { console.log('started transitioning'); }; live example in the following example, we have a simple <div> element, styled with a transition that includes a delay: <div class="transition">hover over me</div> <div class="message"></div> .transition { width: 100px; height: 100px; background: rgba(255,0,0,1); transition-property: transform, background; transition-duration: 2s; transition-delay: 1s; } .transition:hover { transform: rotate(90deg); background: rgba(255,0,0,0); } to this, we'll add some javascript to indicate where the transitionstart and transitionrun events fire.

HTMLTimeElement.dateTime - Web APIs
-0300 -08:00 valid global date and time string any combination of a valid local date and time string followed by a valid time-zone offset string 2013-12-25 11:12+0200 1972-07-25 13:43:07+04:30 1941-03-15 07:06:23.678z 2013-12-25t11:12-08:00 valid week string yyyy-www 2013-w46 four or more ascii digits yyyy 2013, 0001 valid duration string pddthhmmss pddthhmms.xs pddthhmms.xxs pddthhmms.xxxs pthhmmss pthhmms.xs pthhmms.xxs pthhmms.xxxs ww dd hh mm ss p12dt7h12m13s p12dt7h12m13.3s p12dt7h12m13.45s p12dt7h12m13.455s pt7h12m13s pt7h12m13.2s pt7h12m13.56s pt7h12m13.999s 7d 5h 24m 13s syntax datetimestring = timeelt.datetime; timeelt.datetime = datetime...

IDBDatabaseSync - Web APIs
iven name (based on case-sensitive comparison) does not exist in the connected database.

IdleDeadline - Web APIs
the idledeadline interface is used as the data type of the input parameter to idle callbacks established by calling window.requestidlecallback().

KeyframeEffect.setKeyframes() - Web APIs
opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the keyframe where it is specified until the next keyframe.

KeyframeEffect.target - Web APIs
target keyframes.target = newtargetelement; value an element, csspseudoelement, or null.

KeyframeEffect - Web APIs
ies.

MediaRecorder.ondataavailable - Web APIs
data which has been captured since recording began or the last time a dataavailable event occurred is delivered; then a new blob is created and media capture continues into that blob.

MediaRecorder - Web APIs
ce the last time requestdata() was called.

MediaTrackConstraints.groupId - Web APIs
since browsers will simply ignore any constraints they're unfamiliar with.

Media Session API - Web APIs
s a web page to provide custom behaviors, for standard media playback interactions.

Transcoding assets for Media Source Extensions - Web APIs
eo) video_01625.mp4 splitting media file (video) video_02000.mp4 $ tree -l 2 output output ├── audio │ └── und ├── stream.mpd └── video ├── 1 ├── 2 ├── 3 ├── 4 └── 5 8 directories, 1 file note: mp4-dash-encode.py does not display ffmpeg error messages.

OfflineAudioContext.suspend() - Web APIs
then(function() { ...

Page Visibility API - Web APIs
me is very similar except that the budget is specified in seconds.

performance.getEntries() - Web APIs
performance.getentries(); for (var i=0; i < p.length; i++) { console.log("entry[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (let i=0; i < p.length; i++) { console.log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (let i=0; i < p.length; i++) { console.log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification ...

performance.getEntriesByName() - Web APIs
ies({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); check_performanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status ...

performance.getEntriesByType() - Web APIs
ries({name : "begin", entrytype: "mark"}); for (var i=0; i < p.length; i++) { log("begin[" + i + "]"); checkperformanceentry(p[i]); } // use getentriesbytype() to get all "mark" entries p = performance.getentriesbytype("mark"); for (var i=0; i < p.length; i++) { log ("mark only entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } // use getentriesbyname() to get all "mark" entries named "begin" p = performance.getentriesbyname("begin", "mark"); for (var i=0; i < p.length; i++) { log ("mark and begin entry[" + i + "]: name = " + p[i].name + "; starttime = " + p[i].starttime + "; duration = " + p[i].duration); } } specifications specification status ...

PerformanceEntry.name - Web APIs
ce entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[met...

PerformanceEntry.startTime - Web APIs
ce entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[met...

PerformanceEntry.toJSON() - Web APIs
ce entries via the mark() method performance.mark("begin"); do_work(50000); performance.mark("end"); // use getentries() to iterate through the each entry var p = performance.getentries(); for (var i=0; i < p.length; i++) { log("entry[" + i + "]"); check_performanceentry(p[i]); } } function check_performanceentry(obj) { var properties = ["name", "entrytype", "starttime", "duration"]; var methods = ["tojson"]; for (var i=0; i < properties.length; i++) { // check each property var supported = properties[i] in obj; if (supported) log("..." + properties[i] + " = " + obj[properties[i]]); else log("..." + properties[i] + " = not supported"); } for (var i=0; i < methods.length; i++) { // check each method var supported = typeof obj[met...

PerformanceNavigationTiming - Web APIs
erties this interface extends the following performanceentry properties for navigation performance entry types by qualifying and constraining them as follows: performanceentry.entrytype read only returns "navigation".

PerformanceObserver.takeRecords() - Web APIs
erformanceentry objects.

PerformancePaintTiming - Web APIs
rface has no properties but it extends the following performanceentry properties (for "paint" performance entry types) by qualifying and constraining the properties as follows: performanceentry.entrytype returns "paint".

PerformanceResourceTiming - Web APIs
entry properties for resource performance entry types by qualifying and constraining them as follows: performanceentry.entrytyperead only returns "resource".

Using Pointer Events - Web APIs
to continue: idx = " + idx); } } this function looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn.

RTCDTMFSender - Web APIs
ll;} properties rtcdtmfsender.tonebuffer read only a domstring which contains the list of dtmf tones currently in the queue to be transmitted (tones which have already been played are no longer included in the string).

RTCIceCandidateStats.address - Web APIs
characters, it is interpreted as an ipv6 address.

RTCIceParameters.password - Web APIs
the rtciceparameters dictionary's password property specifies the ice password that, in tandem with the usernamefragment, uniquely identifies an ice session for its entire duration.

RTCIceParameters.usernameFragment - Web APIs
the rtciceparameters dictionary's usernamefragment property specifies the username fragment ("ufrag") that uniquely identifies the corresponding ice session for the duration of the current ice session.

RTCIceParameters - Web APIs
rtcicetransport by calling its getlocalparameters() or getremoteparameters() method, depending on which end interests you.

RTCOutboundRtpStreamStats - Web APIs
integer specifying the number of times the remote receiver has notified this rtcrtpsender that some amount of encoded video data for one or more frames has been lost, using picture loss indication (pli) packets.

RTCPeerConnection.peerIdentity - Web APIs
the read-only rtcpeerconnection property peeridentity returns a javascript promise that resolves to an rtcidentityassertion which contains a domstring identifying the remote peer.

RTCRtpEncodingParameters - Web APIs
ng the maximum number of bits per second to allow for this encoding.

RTCRtpSendParameters.encodings - Web APIs
ng the maximum number of bits per second to allow for this encoding.

ReadableStream.pipeThrough() - Web APIs
the pipethrough() method of the readablestream interface provides a chainable way of piping the current stream through a transform stream or any other writable/readable pair.

ReadableStream.pipeTo() - Web APIs
the pipeto() method of the readablestream interface pipes the current readablestream to a given writablestream and returns a promise that fulfills when the piping process completes successfully, or rejects if any errors were encountered.

ReadableStream.tee() - Web APIs
ferent speeds.

SVGAnimationElement: beginEvent event - Web APIs
the beginevent event of the svganimationelement interface is fired when the element local timeline begins to play.

TextTrackCue - Web APIs
texttrackcue is an abstract class which is used as the basis for the various derived cue types, such as vttcue; you will instead work with those derived types.

TimeRanges.end() - Web APIs
nge number to return the ending time for.

TimeRanges.length - Web APIs
the timeranges.length read-only property returns the number of ranges in the object.

TimeRanges.start() - Web APIs
e number to return the starting time for.

Touch - Web APIs
; if the hardware reports only a single point, these values will be 1.

Touch events - Web APIs
} } } this iterates over the changed touches as well, but it looks in our cached touch information array for the previous information about each touch to determine the starting point for each touch's new line segment to be drawn.

Using bounded reference spaces - Web APIs
sive sessions, it also has significant differences from bounded-floor, so you need to be prepared to handle these differences.

WebXR application life cycle - Web APIs
ation of webxr functionality by engaging with the user interface enabled above, request an xrsession using the desired mode.

Rendering and the WebXR frame animation callback - Web APIs
d an xrframe object providing details about the state of the scene for the frame you need to render.

Keyframe Formats - Web APIs
opacity: 1, easing: 'ease-out' }, { opacity: 0.1, easing: 'ease-in' }, { opacity: 0 } ], 2000); in this example, the specified easing only applies from the keyframe where it is specified until the next keyframe.

Using the Web Storage API - Web APIs
ing'] = '#a4509b'; localstorage.setitem('colorsetting', '#a4509b'); note: it's recommended to use the web storage api (setitem, getitem, removeitem, key, length) to prevent the pitfalls associated with using plain objects as key-value stores.

Web Storage API - Web APIs
the web storage api provides mechanisms by which browsers can store key/value pairs, in a much more intuitive fashion than using cookies.

Window: transitionend event - Web APIs
then the event will not be generated.

WindowOrWorkerGlobalScope.setInterval() - Web APIs
be pinned to 4 ms.

XRReferenceSpace - Web APIs
or when working with offset spaces.

XRSpace - Web APIs
f space whose borders are defined by an array of points laid out in clockwise order along the floor to define the passable region of the space.

Cognitive accessibility - Accessibility
ing out forms.

Perceivable - Accessibility
including background video or audio that autoplays, make it as unobtrusive as possible.

-webkit-overflow-scrolling - CSS: Cascading Style Sheets
not touch devices use momentum-based scrolling for a given element.

CSS Animations tips and tricks - CSS: Cascading Style Sheets
possible.

Border-image generator - CSS: Cascading Style Sheets
} /* * visible area */ #preview_section { position: relative; min-height: 400px; } /* image control */ #subject { width: 300px; height: 300px; background-repeat: no-repeat; background-size: 100%; background-color: #fff; border: 1px solid #ccc; position: absolute; z-index: 10; top: 15%; left: 10%; box-shadow: 0 0 3px 0 #bababa; transition-property: width, height; transition-duration: 0.1s; } #subject .guideline { background-color: rgba(255, 255, 255, 0.7); border: 1px solid rgba(0, 0, 0, 0.3); position: absolute; } #subject .guideline:hover { background-color: #f00; } #subject .guideline[data-active] { background-color: #f00; z-index: 10; } #subject .guideline[data-axis='x'] { width: 1px; height: 100%; top: -1px; } #subject .guideline[data-axis='y'] { width: 1...

Box-shadow generator - CSS: Cascading Style Sheets
: border-box; } /* container with shadows stacks */ #stack_container { height: 400px; overflow: hidden; position: relative; border: 1px solid #ccc; border-radius: 3px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .container { height: 100%; width: 100%; position: absolute; left: 100%; transition-property: left; transition-duration: 0.5s; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #stack_container .title { text-align: center; font-weight: bold; line-height: 2em; border-bottom: 1px solid #43a6e1; color: #666; } /* * stack of layers for shadow */ #layer_manager { width: 17%; background-color: #fefefe; margin: 0 1% 0 0; -moz-box-sizing: border-box; -webkit-box-s...

Cubic Bezier Generator - CSS: Cascading Style Sheets
ctx.moveto(lx(i), 2 * basic_scale_size + cy(0)); ctx.filltext(math.round(i * 10) / 10, cx(i), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size } ctx.lineto(lx(i), cy(0)); } // draw the x axis label ctx.textalign = "left"; ctx.filltext("input (time duration ratio)", cx(0), 4 * basic_scale_size + cy(0)); // limitation the constant 4 should be dependant of the font size ctx.stroke(); ctx.closepath(); // draw the bézier curve ctx.beginpath(); ctx.moveto(cx(0), cy(0)); ctx.strokestyle = 'blue'; ctx.beziercurveto(cx(x1), cy(y1), cx(x2), cy(y2), cx(1), cy(1)); ctx.stroke(); ...

<dimension> - CSS: Cascading Style Sheets
the <dimension> css data type represents a <number> with a unit attached to it, for example 10px.

Video player styling basics - Developer guides
ent.

Global attributes - HTML: Hypertext Markup Language
deprecated, but kept for compatibility purposes.

Closures - JavaScript
); running this code has exactly the same effect as the previous example of the init() function above.

Control flow and error handling - JavaScript
eptions that may be generated in the try block.

Functions - JavaScript
s that the outer function has access to).

Optional chaining (?.) - JavaScript
// 0 as x was not incremented stacking the optional chaining operator with nested structures, it is possible to use optional chaining multiple times: let customer = { name: "carl", details: { age: 82, location: "paradise falls" // detailed address is unknown } }; let customercity = customer.details?.address?.city; // … this also works with optional chaining function call let duration = vacations.trip?.gettime?.(); combining with the nullish coalescing operator the nullish coalescing operator may be used after optional chaining in order to build a default value when none was found: let customer = { name: "carl", details: { age: 82 } }; const customercity = customer?.city ??

Critical rendering path - Web Performance
nodes, the longer layout takes.

Optimizing startup performance - Web Performance
thing that matters which is currently running, depending on the operating environment.

SVG Event Attributes - SVG: Scalable Vector Graphics
s animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload document element event attributes oncopy, oncut, onpaste global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, on...

end - SVG: Scalable Vector Graphics
the end attribute defines an end value for the animation that can constrain the active duration.

keyPoints - SVG: Scalable Vector Graphics
the keypoints attribute indicates the simple duration of an animation.

repeatCount - SVG: Scalable Vector Graphics
="xml" attributename="y" from="0" to="50" dur="1s" repeatcount="indefinite"/> </rect> </svg> usage notes value <number> | indefinite default value none animatable no <number> this value specifies the number of iterations.

restart - SVG: Scalable Vector Graphics
); }); usage notes value always | whennotactive | never default value always animatable no always this value indicates that the animation can be restarted at any time.

to - SVG: Scalable Vector Graphics
ifies the ending value of the animation.

SVG Attribute reference - SVG: Scalable Vector Graphics
addition attributes additive, accumulate event attributes animation event attributes onbegin, onend, onrepeat document event attributes onabort, onerror, onresize, onscroll, onunload global event attributes oncancel, oncanplay, oncanplaythrough, onchange, onclick, onclose, oncuechange, ondblclick, ondrag, ondragend, ondragenter, ondragexit, ondragleave, ondragover, ondragstart, ondrop, ondurationchange, onemptied, onended, onerror, onfocus, oninput, oninvalid, onkeydown, onkeypress, onkeyup, onload, onloadeddata, onloadedmetadata, onloadstart, onmousedown, onmouseenter, onmouseleave, onmousemove, onmouseout, onmouseover, onmouseup, onmousewheel, onpause, onplay, onplaying, onprogress, onratechange, onreset, onresize, onscroll, onseeked, onseeking, onselect, onshow, onstalled, onsubmit, on...

SVG animation with SMIL - SVG: Scalable Vector Graphics
to animate.