RTCRtpTransceiverDirection - Web APIs
each describes how the transceiver's associated rtcrtpsender and rtcrtpreceiver behave as shown in the table below. value rtcrtpsender behavior rtcrtpreceiver behavior "sendrecv" offers to send rtp data, and will do so if the other peer accepts the connection and at least one of the sender's encodings is active1. offers to receive rtp data, and does so if the other peer accepts. ...
... candidate recommendation ...

sortDirection - Archive of obsolete content
use the sortresource attribute to specify the sort key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. natural the data is sorted in natural order, which means the order that it is stored in. ...

Future directions
it can be read as something like an "ideal future state" for the engine. that means the code as it is today won't match this document, and that's ok. whenever practical, new code and changes should move code closer to the ideal future. and of course, the idea of the future is always evolving in time as things change and we learn more. concurrent and wasm gc we are working towards a concurrent collector. we would also like to allow webassembly to interact with gc-managed data. parallelism most machines that run spidermonkey have multiple cores, so parallelism is almost certainly part of our future. ...

Index - Web APIs
r an effect object of a type based on animationeffectreadonly, such as keyframeeffect, or null. 67 animation.finish() api, animation, finish, interface, method, reference, web animations, waapi, web animations api the finish() method of the web animations api's animation interface sets the current playback time to the end of the animation corresponding to the current playback direction. 68 animation.finished api, animation, experimental, property, reference, web animations, finished, web animations api the animation.finished read-only property of the web animations api returns a promise which resolves once the animation has finished playing. 69 animation.id api, animation, property, reference, id, web animations api the animation.id pro...
... every time the animation enters the "pending" play state as well as when the animation is canceled, since in both of those scenarios, the animation is ready to be started again. 78 animation.reverse() api, animation, interface, method, reference, web animations, reverse, waapi, web animations api the animation.reverse() method of the animation interface reverses the playback direction, meaning the animation ends at its beginning. if called on an unplayed animation, the whole animation is played backwards. if called on a paused animation, the animation will continue in reverse. 79 animation.starttime api, animation, interface, property, reference, web animations, starttime, web animations api the animation.starttime property of the animation interface is a ...
... the deprecated dopplerfactor property of the audiolistener interface is a double value representing the amount of pitch shift to use when rendering a doppler effect. 144 audiolistener.forwardx api, audio, audiolistener, property, reference, web audio api, forwardx the forwardx read-only property of the audiolistener interface is an audioparam representing the x value of the direction vector defining the forward direction the listener is pointing in. 145 audiolistener.forwardy api, audio, audiolistener, property, reference, web audio api, forwardy the forwardy read-only property of the audiolistener interface is an audioparam representing the y value of the direction vector defining the forward direction the listener is pointing in. 146 audiolis...
...And 32 more matches

Lighting a WebXR setting - Web APIs
reflection corresponds to the angle of incidence. every object we see, we see because the object either emits or reflects light (or both). the incoming light ray—the incident ray—arrives at an angle known as the angle of incidence. the angle of incidence, Θi, is the angle between the incident ray and the surface's normal vector. for rough surfaces, light is reflected equally in every direction. however, glossy, mirror-like surfaces reflect most of the light in a direction whose angle of reflection, Θr, is equal to the angle of incidence, except it's on the opposite side of the normal vector. the reflected ray, then, departs along at that angle off the normal. this is the law of reflection. this is the foundation for much of what's involved in shading a scene, and comes into play in te...
...ness of objects and their pixels as displayed on the viewer's screen or headset. a sphere with only ambient lighting. note the total lack of any shading to indicate the depth of the sphere. ambient light ambient light is light that doesn't come from a defined source, but is just present throughout the scene. this light reaches every surface in the scene at the same intensity from every direction, and is then reflected equally in every direction. as a result, the effect applied by ambient light is universally equal all through the scene. the effect of ambient light is computed by simply multiplying the intensity of the light source by the reflectance of the surface at the pixel's location. the color and intensity of every pixel in the scene is affected exactly the same way, regardless of...
...ambient light is commonly present simply to prevent shadowed areas from becoming too dark, although it affects the entire scene; however, the amount of ambient light in a scene should be very low. ...
...And 15 more matches

Inputs and input sources - Web APIs
able), what targeting method it uses, xrspaces that can be used to draw the targeting ray and to find the targeted object or location as well as to draw objects in the user's hands, and profile strings specifying the preferred way to represent the controller in the user's viewing area as well as how the input operates. ...
...targeted object or location as well as to draw objects in the user's hands, and profile strings specifying the preferred way to represent the controller in the user's viewing area as well as how the input operates. the fundamental capabilities of an input source are: targeting monitoring directional controls (either a motion-sensing pointer or a joystick or trackpad, for example) to aim in a direction, possibly at a target, though targeting is left to you to implement yourself. see facing and targeting for further information. selecting using the main "select" button or other input on the controller to choose the targeted direction (or the object at which it points), or to otherwise engage an action. for details on the primary action, see primary action. squeezing squeezing the controller ...
...on while the off hand controller might be used to control the positioning of a shield. targeting ray mode the targeting ray mode is a string found in the targetraymode property. it describes the technique used to determine the targeting ray and how it should be shown to the user if presented visually. when the targeting ray mode is gaze, the ray's origin is at the viewer and simply aims in the direction the user is facing. this gaze input method is fairly simple, and doesn't need any special controls, as it will be based on the facing direction reported by the headset or whatever device is used to determine what direction the viewer's face is pointing in. the target ray should extend outward from between the eyes in a direction perpendicular to the viewer's face. more flexible is the tracked-po...
...And 12 more matches

Lighting in WebGL - Web APIs
s article, it's helpful to know a bit about how it works. instead of discussing it in depth here, take a look at the article on phong shading at wikipedia, which provides a good overview of the most commonly used lighting model or if you'd like to see a webgl based explanation see this artcle. there are three basic types of lighting: ambient light is the light that permeates the scene; it's non-directional and affects every face in the scene equally, regardless of which direction it's facing. directional light is light that is emitted from a specific direction. this is light that's coming from so far away that every photon is moving parallel to every other photon. sunlight, for example, is considered directional light. point light is light that is being emitted from a point, radiating in all di...
...ional light is light that is emitted from a specific direction. this is light that's coming from so far away that every photon is moving parallel to every other photon. sunlight, for example, is considered directional light. point light is light that is being emitted from a point, radiating in all directions. this is how many real-world light sources usually work. a light bulb emits light in all directions, for example. for our purposes, we're going to simplify the lighting model by only considering simple directional and ambient lighting; we won't have any specular highlights or point light sources in this scene. instead, we'll have our ambient lighting plus a single directional light source, aimed at the rotating cube from the previous demo. once you drop out the concept of point sources and s...
...dering simple directional and ambient lighting; we won't have any specular highlights or point light sources in this scene. instead, we'll have our ambient lighting plus a single directional light source, aimed at the rotating cube from the previous demo. once you drop out the concept of point sources and specular lighting, there are two pieces of information we'll need in order to implement our directional lighting: we need to associate a surface normal with each vertex. this is a vector that's perpendicular to the face at that vertex. we need to know the direction in which the light is traveling; this is defined by the direction vector. ...
...And 10 more matches

Viewpoints and viewers: Simulating cameras in WebXR - Web APIs
t's our solution. since we can't move the camera, we move the world around it. our renderer needs to know where we imagine the camera to be, then alter the position of every visible object to simulate that position and orientation. thus, instead of referring to an actual camera object, the term camera is used in webgl and webxr programming to refer to an object describing the position and viewing direction of a hypothetical viewer of the scene, whether there's an actual object present in 3d space or not. points of view since the camera is a virtual object which, rather than necessarily representing a physical object in the virtual world, represents a viewer's position and viewing direction, it's useful to think about the kinds of situation that call for the use of a camera. gaming-related situati...
...efresh the screen. this essentially uses the texture as a backbuffer for performing multiple buffering in your 2d graphics application. cameras in gaming there are many kinds of games, and as such, there are several ways in which cameras might be used in games. some common situations include: in a first-person game, the camera is located within the player's avatar's head, facing in the same direction as the avatar's eyes. this way, the view presented on the player's screen or headset is what their avatar would be seeing. in some third-person games, the camera is located a short distance behind the player's avatar or vehicle, showing them from behind as they move through the game world. this is used in a lot of multiplayer online role-playing games, certain shooter games, and so forth. popula...
...z, w), the point in the 3d space is actually (x/w, y/w, z/w, 1) or simply (x/w, y/w, z/w). if you're not using perspective, w is always 1. in that situation, the complete coordinates for an object located at (1, 0, 3) are (1, 0, 3, 1). but the location isn't enough to describe an object in 3d space because an object's state in space isn't only about its location, but about its rotation or facing direction, otherwise known as its orientation. the orientation can be represented using a 3d vector, which is typically normalized so that its length is 1.0. for example, if the object is facing an object located at (3, 1, -2)—that is, three meters to the right, one meter up, and two meters away from the origin point—the result is: [31-2]\left [ \begin{matrix} 3 \\ 1 \\ -2 \end{matrix} \right ] this...
...And 10 more matches

Web audio spatialization basics - Web APIs
much better if you use headphones, or have some kind of surround sound system to plug your computer into. creating an audio listener so let's begin! the baseaudiocontext (the interface the audiocontext is extended from) has a listener property that returns an audiolistener object. this represents the listener of the scene, usually your user. you can define where they are in space and in which direction they are facing. they remain static. the pannernode can then calculate its sound position relative to the position of the listener. let's create our context and listener and set the listener's position to emulate a person looking into our room: const audiocontext = window.audiocontext || window.webkitaudiocontext; const audioctx = new audiocontext(); const listener = audioctx.listener; const p...
... window.innerheight/2; const posz = 300; listener.positionx.value = posx; listener.positiony.value = posy; listener.positionz.value = posz-5; we could move the listener left or right using positionx, up or down using positiony, or in or out of the room using positionz. here we are setting the listener to be in the middle of the viewport and slightly in front of our boombox. ...
... creating a panner node let's create our pannernode. this has a whole bunch of properties associated with it. ...
...And 10 more matches

CSS grids, logical values, and writing modes - CSS: Cascading Style Sheets
er place you might see physical keywords in use, is when using text-align: right to align text to the right. there are also physical properties in css. we add margins, padding, and borders using these physical properties of margin-left, padding-left, and so on. we call these keywords and properties physical because they relate to the screen you are looking at. left is always left, no matter what direction your text is running. this can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. browsers are pretty good at dealing with text direction, and you don’t even need to be working in a rtl language to take a look. in the example below, i have two paragraphs. one has no text-align property s...
...to take a look. in the example below, i have two paragraphs. one has no text-align property set, the second has text-align set to left. i have added dir="rtl" to the html element, which switches the writing mode from the default for an english language document of ltr. you can see that the first paragraph remains left to right, due to the text-align value being left . the second however, switches direction and the text runs from right to left . this is a very simple example of the problem with physical values and properties being used in css. they prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom. logical properties and values logical properties and values do not make an assumption about te...
...d the text runs from right to left . this is a very simple example of the problem with physical values and properties being used in css. they prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom. logical properties and values logical properties and values do not make an assumption about text direction. which is why in grid layout we use the keyword start when aligning something to the start of the container. for me, working in english, start may well be on the left, however it doesn’t have to be, and the word start infers no physical location. block and inline once we begin dealing with logical, rather than physical properties, we stop seeing the world as left to right, and top to bottom. ...
...And 10 more matches

SVG documentation index - SVG: Scalable Vector Graphics
ss property or attribute of the target element that is going to be changed during an animation. 28 attributetype deprecated, needscompattable, svg, svg attribute the attributetype attribute specifies the namespace in which the target attribute and its associated values are defined. 29 azimuth filters, svg, svg attribute the azimuth attribute specifies the direction angle for the light source on the xy plane (clockwise), in degrees from the x axis. 30 basefrequency filters, svg, svg attribute the basefrequency attribute represents the base frequency parameter for the noise function of the <feturbulence> filter primitive. 31 baseprofile deprecated, svg, svg attribute the baseprofile attribute describes the minimum svg...
...butes belong to, with the svgelement.dataset property. 56 descent deprecated, svg, svg attribute the descent attribute defines the maximum unaccented depth of the font. 57 diffuseconstant filters, svg, svg attribute the diffuseconstant attribute represents the kd value in the phong lighting model. in svg, this can be any non-negative number. 58 direction svg, svg attribute the direction attribute specifies the inline-base direction of a <text> or <tspan> element. it defines the start and end points of a line of text as used by the text-anchor and inline-size properties. it also may affect the direction in which characters are positioned if the unicode-bidi property's value is either embed or bidi-override. 59 display svg,...
... 65 edgemode filters, needscompattable, needsexample, svg, svg attribute the edgemode attribute determines how to extend the input image as necessary with color values so that the matrix operations can be applied when the kernel is positioned at or near the edge of the input image. 66 elevation filters, svg, svg attribute the elevation attribute specifies the direction angle for the light source from the xy plane towards the z-axis, in degrees. note that the positive z-axis points towards the viewer of the content. 67 enable-background deprecated, svg, svg attribute the enable-background attribute specifies how the accumulation of the background image is managed. 68 end needscompattable, svg, svg attribute the end attri...
...And 8 more matches

IPDL Tutorial
more details. because protocol messages are represented as c++ methods, it's easy to forget that they are in fact asynchronous messages: by default the c++ method will return immediately, before the message has been delivered. the parameters of the recv* methods (const nscstring& pluginpath in the example) are references to temporary objects, so copy them if you need to keep their data around. direction each message type includes a "direction." the message direction specifies whether the message can be sent from-parent-to-child, from-child-to-parent, or both ways. three keywords serve as direction specifiers; child was introduced above. the second is parent, which means that the messages declared under the parent label can only be sent from-child-to-parent. the third is both, which means that ...
...." the message direction specifies whether the message can be sent from-parent-to-child, from-child-to-parent, or both ways. three keywords serve as direction specifiers; child was introduced above. the second is parent, which means that the messages declared under the parent label can only be sent from-child-to-parent. the third is both, which means that the declared messages can be sent in both directions. the following artificial example shows how these specifiers are used and how these specifiers change the generated abstract actor classes. ...
...on specifiers; child was introduced above. the second is parent, which means that the messages declared under the parent label can only be sent from-child-to-parent. the third is both, which means that the declared messages can be sent in both directions. the following artificial example shows how these specifiers are used and how these specifiers change the generated abstract actor classes. ...
...And 7 more matches

Aligning Items in a Flex Container - CSS: Cascading Style Sheets
be used for alignment in flexbox. note: the alignment properties in flexbox have been placed into their own specification — css box alignment level 3. it is expected that this spec will ultimately supersede the properties as defined in flexbox level one. the cross axis the align-items and align-self properties control alignment of our flex items on the cross axis, down the columns if flex-direction is row and along the row if flex-direction is column. we are making use of cross-axis alignment in the most simple flex example. if we add display: flex to a container, the child items all become flex items arranged in a row. they will all stretch to be as tall as the tallest item, as that item is defining the height of the items on the cross axis. if your flex container has a height set, then t...
... axis. i have targeted the first item using a first-child selector and set that item to align-self: stretch; another item has been selected using its class of selected and given align-self: center. you can change the value of align-items or change the values of align-self on the individual items to see how this works. ...
...lue of align-items or change the values of align-self on the individual items to see how this works. changing the main axis so far we have looked at the behaviour when our flex-direction is row, and while working in a language written top to bottom. this means that the main axis runs along the row horizontally, and our cross axis alignment moves the items up and down. if we change our flex-direction to column, align-items and align-self will align the items to the left and right. you can try this out in the example below, which has a flex container with flex-direction: column yet otherwise is exactly the same as the previous example. aligning content on the cross axis — the align-content property so far we have been aligning the items, or an individual item inside the area defined ...
...And 7 more matches

JavaScript Daemons Management - Archive of obsolete content
/* warning: this method optionally requires the daemon.prototype.syncstart() method */ return this[bsync ? "start" : "syncstart"](); }; daemon.prototype.reverseplay = function (bsync) { /* warning: this method optionally requires the daemon.prototype.syncstart() method */ return this[bsync ? ...
...prototype.syncstart() method */ return this[bsync ? "start" : "syncstart"](true); }; daemon.prototype.move = function (bsync, ncycles, bdirection) { /* warning: this method optionally requires the daemon.prototype.syncstart() method */ if (arguments.length > 1 && !isnan(ncycles)) { this.reversals = number(ncycles); } this[bsync ? "start" : "syncstart"](arguments.length > 2 ? bdirection : this.isatend() !== this.backw); }; daemon.prototype.turn = function (bsync) { /* warning: this method optionally requires the daemon.prototype.syncstart() method */ this[bsync ? "start" : "syncstart"](!this.backw); }; /* settings tools */ daemon.prototype.makeloop = function () { this.reversals = infinity; }; daemon.prototype.unmakeloop = function () { this.r...
...*/ daemon.prototype.makesteps = function (nhowmany, breverse, bforce) { if (nhowmany === 0) { return true; } if (isnan(nhowmany)) { return false; } var nidx = 0, nlen = math.round(math.abs(nhowmany))...
...And 6 more matches

Flexbox - Learn web development
laid out as flex items — the next section will explain in more detail what this means. note also that you can use a display value of inline-flex if you wish to lay out an element's children as flex items, but have that element behave like an inline element. the flex model when elements are laid out as flex items, they are laid out along two axes: the main axis is the axis running in the direction the flex items are being laid out in (e.g. as rows across the page, or columns down the page.) the start and end of this axis are called the main start and main end. the cross axis is the axis running perpendicular to the direction the flex items are being laid out in. the start and end of this axis are called the cross start and cross end. the parent element that has display: flex set on it (t...
...on> in our example) is called the flex container. the items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example). bear this terminology in mind as you go through subsequent sections. you can always refer back to it if you get confused about any of the terms being used. ...
...the flex container. the items being laid out as flexible boxes inside the flex container are called flex items (the <article> elements in our example). bear this terminology in mind as you go through subsequent sections. you can always refer back to it if you get confused about any of the terms being used. ...
...And 6 more matches

Basic concepts of flexbox - CSS: Cascading Style Sheets
are describing the fact that flexbox deals with layout in one dimension at a time — either as a row or as a column. this can be contrasted with the two-dimensional model of css grid layout, which controls columns and rows together. the two axes of flexbox when working with flexbox you need to think in terms of two axes — the main axis and the cross axis. ...
...r. the two axes of flexbox when working with flexbox you need to think in terms of two axes — the main axis and the cross axis. the main axis is defined by the flex-direction property, and the cross axis runs perpendicular to it. everything we do with flexbox refers back to these axes, so it is worth understanding how they work from the outset. the main axis the main axis is defined by flex-direction, which has four possible values: row row-reverse column column-reverse should you choose row or row-reverse, your main axis will run along the row in the inline direction. choose column or column-reverse and your main axis will run from the top of the page to the bottom — in the block direction. the cross axis the cross axis runs perpendicular to the main axis, therefore if your ...
... if your main axis is column or column-reverse then the cross axis runs along the rows. ...
...And 6 more matches

Cross-browser Flexbox mixins - CSS: Cascading Style Sheets
ixin flexbox { display: -webkit-box; display: -moz-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } //using this mixin %flexbox { @include flexbox; } @mixin inline-flex { display: -webkit-inline-box; display: -moz-inline-box; display: -webkit-inline-flex; display: -ms-inline-flexbox; display: inline-flex; } %inline-flex { @include inline-flex; } flexbox direction the flex-direction property specifies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. this determines the direction in which flex items are laid out in. values: row (default) | row-reverse | column | column-reverse spec: https://drafts.csswg.org/css-flexbox/#flex-direction-property @mixin flex-direction($value: row) { @if $val...
...ies how flex items are placed in the flex container, by setting the direction of the flex container's main axis. this determines the direction in which flex items are laid out in. ...
...irection of the flex container's main axis. this determines the direction in which flex items are laid out in. ...
...And 6 more matches

Building up a basic demo with A-Frame - Game development
-visible="true" cursor-scale="2" cursor-color="#0095dd" cursor-opacity="0.5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely covering the objects behind it. ...
...olor="#0095dd" cursor-opacity="0.5"> </a-camera> we've also defined a cursor for the given camera, using the cursor-* attributes (by default it is invisible.) — we've set its scale so it will more easily visible, its color, and some opacity so it won't completely covering the objects behind it. adding lights the basic light types in a-frame are directional and ambient. ...
...the ambient light only needs a color, which is also white. ...
...And 5 more matches

Responsive images - Learn web development
height for a mobile device. and at this size, it is difficult to see the people within the first content image. an improvement would be to display a cropped version of the image which displays the important details of the image when the site is viewed on a narrow screen. a second cropped image could be displayed for a medium width screen device, like a tablet. this is commonly known as the art direction problem. in addition, there is no need to embed such large images on the page if it is being viewed on a mobile screen. and conversely, a small raster image starts to look grainy when displayed larger than its original size (a raster image is a set number of pixels wide and a set number of pixels tall, as we saw when we looked at vector graphics). this is called the resolution switching problem.
...ops, so browser engineers and spec writers didn't even think to implement solutions. responsive image technologies were implemented recently to solve the problems indicated above by letting you offer the browser several image files, either all showing the same thing but containing different numbers of pixels (resolution switching), or different images suitable for different space allocations (art direction). note: the new features discussed in this article — srcset/sizes/<picture> — are all supported in release versions of modern desktop and mobile browsers (including microsoft's edge browser, although not internet explorer.) how do you create responsive images? in this section, we'll look at the two problems illustrated above and show how to solve them using html's responsive image featu...
...cessing the page has a standard/low resolution display, with one device pixel representing each css pixel, the elva-fairy-320w.jpg image will be loaded (the 1x is implied, so you don't need to include it.) if the device has a high resolution of two device pixels per css pixel or more, the elva-fairy-640w.jpg image will be loaded. the 640px image is 93kb, whereas the 320px image is only 39kb. art direction to recap, the art direction problem involves wanting to change the image displayed to suit different image display sizes. for example, a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser. when viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see. it would probably be better to sho...
...And 5 more matches

Introduction to the Real-time Transport Protocol (RTP) - Web APIs
tcrtpreceiver rtcrtpreceivers provide the ability to inspect and obtain information about incoming mediastreamtrack data. a connection's receivers can be obtained by calling rtcpeerconnection.getreceivers(). rtcrtptransceiver an rtcrtptransceiver is a pair of one rtp sender and one rtp receiver which share an sdp mid attribute, which means they share the same sdp media m-line (representing a bidirectional srtp stream). these are returned by the rtcpeerconnection.gettransceivers() method, and each mid and transceiver share a one-to-one relationship, with the mid being unique for each rtcpeerconnection. leveraging rtp to implement a "hold" feature because the streams for an rtcpeerconnection are implemented using rtp and the interfaces above, you can take advantage of the access this gives you ...
... local peer when the local user decides to enable hold mode, the enablehold() method below is called. it accepts as input a mediastream containing the audio to play while the call is on hold. async function enablehold(audiostream) { try { await audiotransceiver.sender.replacetrack(audiostream.getaudiotracks()[0]); audiotransceiver.receiver.track.enabled = false; audiotransceiver.direction = "sendonly"; } catch(err) { /* handle the error */ } } the three lines of code within the try block perform the following steps: replace their outgoing audio track with a mediastreamtrack containing hold music. disable the incoming audio track. switch the audio transceiver into send-only mode. this triggers renegotiation of the rtcpeerconnection by sending it a negotiationneeded ...
...tcpeerconnection.createoffer and sending it through the signaling server to the remote peer. the audiostream, containing the audio to play instead of the local peer's microphone audio, can come from anywhere. one possibility is to have a hidden <audio> element and use htmlaudioelement.capturestream() to get its audio stream. ...
...And 5 more matches

animation - CSS: Cascading Style Sheets
the animation shorthand css property applies an animation between styles. it is a shorthand for animation-name, animation-duration, animation-timing-function, animation-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...-delay, animation-iteration-count, animation-direction, animation-fill-mode, and animation-play-state. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...%20l11%2c13%20l9%2c13%20z%22%20%2f%3e%3cpath%20id%3d%22restart%22%20d%3d%22m13%2c9%20a5%2c5%2c1%2c1%2c1%2c8%2c4%20l8%2c2%20l12%2c5%20l8%2c8%20l8%2c6%20a3%2c3%2c1%2c1%2c0%2c11%2c9%20a1%2c1%2c1%2c1%2c1%2c13%2c9%20z%22%20%2f%3e%3c%2fsvg%3e#restart'); } .grid { width: 100%; height: 100%; display: flex; background: #eee; font: 1em monospace; } .row { display: flex; flex: 1 auto; flex-direction: row; flex-wrap: wrap; justify-content: space-between; } .col { display: flex; flex: 1 auto; flex-direction: column; } .cell { box-sizing: border-box; margin: .5em; padding: 0; background-color: #fff; overflow: hidden; text-align: left; } .flx { flex: 1 0; } .note { background: #fff3d4; padding: 1em; margin: .5em; font: .8em sans-serif; text-align: left; fl...
...And 5 more matches

JXON - Archive of obsolete content
ings xml documents, for example). in these cases jxon could represent the most practical way. in this article we will show how to convert a parsed xml document (i.e. an instance of document) to a javascript object tree (i.e. a tree of nested instances of object) and viceversa, with some different algorithms. it could be useful to read the xml introduction article first. if you want a complete bidirectional jxon library (modelled on the json global object), skip to the dedicated paragraph (but please read the note about the const statement compatibility). note: if you are interested to address only some parts of an xml document (and are not starting in javascript/json for templating purposes), use xpath instead of converting the whole document into json. conversion snippets now imagine you have...
...thing prohibits the use of any other conversion method. in addition, all properties of the tree with a true value will be converted into empty elements with no text nodes (see the code considerations). this is a good solution if you want to automate the creation of an xml document. it is a bad choice, however, if you want to re-build an xml document previously converted into json. although the bidirectional conversion is very faithful (except for cdatasection nodes, which will be converted into text nodes), the process is unnecessarily costly. in fact, if your goal is to edit an xml document, it is strongly recommended to work on it rather than create new ones. the parker convention the functions listed above for the conversion of an xml document to json (often called "jxon algorithms") are more...
...algorithms work fine with any kind of xml document. note: despite the term jxon suggesting "lossless" conversions, these techniques are not actually lossless if one needs to preserve ordering of elements, as is common with many xml dialects (including of course xhtml). the ecmascript standard (javascript) indicates that object iteration order is implementation dependent. appendix: a complete, bidirectional, jxon library now we can create a more complete, bidirectional, jxon library based on all our algorithms (see: #1, #2, #3, #4, reverse). its usage is modeled on the json native object. before implementing it in a working environment, please read the note about the const statement compatibility. the following code is also available on github. "use strict"; /*\ |*| |*| jxon framework - copyle...
...And 4 more matches

nsISelection
void collapsetostart(); boolean containsnode(in nsidomnode node, in boolean partlycontained); void deletefromdocument(); void extend(in nsidomnode parentnode, in long offset); void extendnative(in nsidomnode parentnode, in long offset); native code only! ...
...e in the given dom node to place the selection (the offset into the given node). collapsed() [noscript,notxpcom,nostdcall] boolean collapsed(); native code only!collapsenative void collapsenative( in nsinode parentnode, in long offset ); parameters parentnode offset collapsetoend() collapses the whole selection to a single point at the end of the current selection (regardless of direction). if content is focused and editable, the caret will blink there. void collapsetoend(); parameters none collapsetostart() collapses the whole selection to a single point at the start of the current selection (regardless of direction). if content is focused and editable, the caret will blink there. void collapsetostart(); containsnode() indicates whether the nsidomnode is part of the selection. ...
...her or not the range contains the requested noe. deletefromdocument() deletes this selection from the document the nodes belong to. void deletefromdocument(); extend() extends the selection by moving the selection end to the specified nsidomnode and offset, preserving the selection begin position. the new selection end result will always be from the anchornode to the new focusnode, regardless of direction. void extend( in nsidomnode parentnode, in long offset ); parameters parentnode the node where the selection will be extended to. offset where in the node to place the offset in the new selection end. native code only!extendnative void extendnative( in nsinode parentnode, in long offset ); parameters parentnode offset getrangeat() returns the nsidomrange at ...
...And 4 more matches

Flow Layout and Writing Modes - CSS: Cascading Style Sheets
ssibly unanticipated ways. the external resources and see also sections of this document link to more writing modes resources. the writing modes specification the css writing modes level 3 specification defines the impact a change the document writing mode has on flow layout. in the writing modes introduction, the specification says, “a writing mode in css is determined by the writing-mode, direction, and text-orientation properties. it is defined primarily in terms of its inline base direction and block flow direction.” the specification defines the inline base direction as the direction in which content is ordered on a line. this defines the start and end of the inline direction. the start is where sentences start and the end is where a line of text ends before it would begin to wrap on...
...es. it is defined primarily in terms of its inline base direction and block flow direction.” the specification defines the inline base direction as the direction in which content is ordered on a line. this defines the start and end of the inline direction. the start is where sentences start and the end is where a line of text ends before it would begin to wrap onto a new line. the block flow direction is the direction in which boxes, for example paragraphs, stack in that writing mode. the css writing-mode property controls the block flow direction. if you want to change your page, or part of your page, to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore the inline direction as well. while certain languages wil...
...ample paragraphs, stack in that writing mode. the css writing-mode property controls the block flow direction. if you want to change your page, or part of your page, to vertical-lr then you can set writing-mode: vertical-lr on the element and this will change the direction of the blocks and therefore the inline direction as well. while certain languages will use a particular writing mode or text direction, we can also use these properties for creative effect, such as running a heading vertically. the writing-mode property and block flow the writing-mode property accepts the values horizontal-tb, vertical-rl and vertical-lr. these values control the direction that blocks flow on the page. ...
...And 4 more matches

unicode-bidi - CSS: Cascading Style Sheets
note: this property is intended for document type definition (dtd) designers. web designers and similar authors should not override it. ...
... note: this property is intended for document type definition (dtd) designers. web designers and similar authors should not override it. ...
...thors should not override it. /* keyword values */ unicode-bidi: normal; unicode-bidi: embed; unicode-bidi: isolate; unicode-bidi: bidi-override; unicode-bidi: isolate-override; unicode-bidi: plaintext; /* global values */ unicode-bidi: inherit; unicode-bidi: initial; unicode-bidi: unset; syntax values normal the element does not offer an additional level of embedding with respect to the bidirectional algorithm. for inline elements, implicit reordering works across element boundaries. embed if the element is inline, this value opens an additional level of embedding with respect to the bidirectional algorithm. the direction of this embedding level is given by the direction property. bidi-override for inline elements this creates an override. for block container elements this creates an ov...
...And 4 more matches

Sorting Results - Archive of obsolete content
nce it will ignore whether results are containers and just sort by a value, alphabetically or numerically depending on the type of data. when using a tree, sorting may be performed on each column of the tree. for instance, if a list of photos was displayed in a two column tree showing the title and description, you could sort by either title or description. the user can change the sort column and direction by clicking the column headers, however, you can programmatically change the sort as well. sorting tree results we'll examine sorting of trees first since trees are the most common element used with sorted items. using a tree builder, you can sort the results in a tree by a column. to do this, place a sort attribute on a treecol element referring to the variable to sort by for that column. <treec...
...the rows will be sorted according to the natural order. only one column applies a sort at a time. if the tree is sorted by name, and the user clicks on the date column header, the sort will change to the date column. there are two additional attributes used for sorting, which you may set on a column to specify the initial sort. these attributes are modified when the user changes the sort. the sortdirection attribute may be used to specify the initial sort direction for a column. only one column should have this attribute set, as a tree may only be sorted by one column at a time. the value should be either 'ascending', 'descending' or 'natural'. this last value is the default if the attribute is not specified. the sortactive attribute may be set to true or false and specifies which column the tree i...
... id="name" label="name" sort="rdf:http://purl.org/dc/elements/1.1/title" flex="1"/> note that all of this discussion about sorting only applies to tree builders. for other elements or content trees, sorting is done by placing the attributes on the root element. ...
...And 3 more matches

nsIBidiKeyboard
widget/public/nsibidikeyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them. ...
... widget/public/nsibidikeyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them. ...
... widget/public/nsibidikeyboard.idlscriptable this interface lets the application detect bidirectional writer users, and do some magic for them. ...
...And 3 more matches

Using IndexedDB - Web APIs
cursor = event.target.result; if (cursor) { console.log("name for ssn " + cursor.key + " is " + cursor.value.name); cursor.continue(); } else { console.log("no more entries!"); } }; the opencursor() function takes several arguments. first, you can limit the range of items that are retrieved by using a key range object that we'll get to in a minute. second, you can specify the direction that you want to iterate. in the above example, we're iterating over all objects in ascending order. the success callback for cursors is a little special. the cursor object itself is the result of the request (above we're using the shorthand, so it's event.target.result). then the actual key and value can be found on the key and value properties of the cursor object. if you want to keep going, th...
...to grab customer record object keys index.openkeycursor().onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // cursor.key is a name, like "bill", and cursor.value is the ssn. // no way to directly get the rest of the stored object. console.log("name: " + cursor.key + ", ssn: " + cursor.primarykey); cursor.continue(); } }; specifying the range and direction of cursors if you would like to limit the range of values you see in a cursor, you can use an idbkeyrange object and pass it as the first argument to opencursor() or openkeycursor(). you can make a key range that only allows a single key, or one that has a lower or upper bound, or one that has both a lower and upper bound. the bound may be "closed" (i.e., the key range includes the given value(s...
...nna", false, true); // to use one of the key ranges, pass it in as the first argument of opencursor()/openkeycursor() index.opencursor(boundkeyrange).onsuccess = function(event) { var cursor = event.target.result; if (cursor) { // do something with the matches. ...
...And 3 more matches

PannerNode.setOrientation() - Web APIs
syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setorientation(1,0,0); returns void. ...
... syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setorientation(1,0,0); returns void. ...
... syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setorientation(1,0,0); returns void. ...
...And 3 more matches

Spaces and reference spaces: Spatial tracking in WebXR - Web APIs
f the user's hands, either in the form of the hand itself or a controller (or both). the origin is generally the center of the user's fisted hand. the target ray; each controller or other handheld device may have a targeting ray associated with it, which is represented by a space whose origin is at the point on the controller at which the ray is emitted, and is oriented so that -z extends in the direction of the target it's pointing at. because each of these is defined using a reference space as its foundation, the webxr device api can easily be used to convert among the coordinate systems, perform operations affecting these spaces and their corresponding objects, and so forth. describing a position relative to a space there are two scenarios in which you may need to describe a position and/or...
...roller to calculate the webgl coordinates to use when rendering the controller's representation to the framebuffer. viewer poses a specialized type of pose, the viewer pose, is the pose that represents the perspective of the viewer of the scene. a viewer pose is represented by webxr's xrviewerpose interface. when rendering a frame, you'll use the viewer pose to determine the position and facing direction of the viewer in order to place the virtual camera and render the scene. the only way to obtain a pose that adapts positional information from one space to another is through the xrframe object received by your frame rendering callback function specified when you called the xrsession method requestanimationframe(). for example, given an xrsession whose reference space is worldrefspace, the foll...
...wframe); if (viewerpose) { /* ... render the frame ... */ } } the frame parameter is the xrframe representing the animation frame information provided by webxr. when called, this function begins by getting the xrsession from the frame object, then uses the frame's getviewerpose() method to compute the xrviewerpose for the viewer, given viewerrefspace, which describes the current facing direction and position of the viewer. the returned viewer pose, viewerpose, can in turn be used to compute positions and orientations to properly render the objects in the scene given the user's point of view. offsetting or moving reference spaces while you can't change a reference space since both xrreferencespace and xrboundedreferencespace are read-only, you can easily create new reference spaces by ...
...And 3 more matches

XRTargetRayMode - Web APIs
y an input controller's targeting ray is being produced. targeting may be done by looking at the target using a gaze-tracking system, pointing at the target with a hand controller, glove, or motion-tracking system, or by tapping or clicking on the target using a finger on a screen or with a mouse. typically a target ray is drawn from the source of the targeting system along the target ray in the direction in which the user is looking or pointing. the style of the ray is generally up to you, as is the method for indicating the endpoint of the ray. the targeted point or object might be indicated by drawing a shape or highlighting the targeted surface or object. a target ray emitted by a hand controller. the target ray can be anything from a simple line (ideally fading over distance) to an anim...
... be indicated by drawing a shape or highlighting the targeted surface or object. a target ray emitted by a hand controller. the target ray can be anything from a simple line (ideally fading over distance) to an animated effect, such as the science-fiction "phaser" style shown in the screenshot above. values gaze the user is using a gaze-tracking system (or gaze input) which detects the direction in which the user is looking. the target ray will be drawn originating at the viewer's eyes and will follow the direction in which they're looking. screen the direction of the target ray is indicated using a tap on a touch screen, mouse, or other tactile input device. tracked-pointer targeting is being performed using a handheld device or hand-tracking system which the user points in the dire...
... examples this fragment of code shows part of a function to be called once every frame. it looks for inputs which have a non-null targetrayspace. ...
...And 3 more matches

Using CSS animations - CSS: Cascading Style Sheets
g of the animation; that is, how the animation transitions through keyframes, by establishing acceleration curves. animation-delay configures the delay between the time the element is loaded and the beginning of the animation sequence. animation-iteration-count configures the number of times the animation should repeat; you can specify infinite to repeat the animation indefinitely. animation-direction configures whether or not the animation should alternate direction on each run through the sequence or reset to the start point and repeat itself. animation-fill-mode configures what values are applied by the animation before and after it is executing. animation-play-state lets you pause and resume the animation sequence. defining the animation sequence using keyframes once you’ve confi...
...her for some time in silence: at last the caterpillar took the hookah out of its mouth, and addressed her in a languid, sleepy voice.</p> making it move back and forth that made it repeat, but it’s very odd having it jump back to the start each time it begins animating. what we really want is for it to move back and forth across the screen. ...
...</p> making it move back and forth that made it repeat, but it’s very odd having it jump back to the start each time it begins animating. what we really want is for it to move back and forth across the screen. ...
...And 3 more matches

Ordering Flex Items - CSS: Cascading Style Sheets
new layout methods such as flexbox and grid bring with them the possibility of controlling the order of content. in this article we will take a look at ways in which you can change the visual order of your content when using flexbox. we will also consider the implications of reordering items from an accessibility point of view. reverse the display of the items the flex-direction property can take one of four values: row column row-reverse column-reverse the first two values ​​keep the items in the same order that they appear in the document source order and display them sequentially from the start line. the second two values ​​reverse the items by switching the start and end lines. remember that the start line relates to writing modes. the row-related examples above dem...
...t these items appear in the document source — not your visual order. if you are using a reverse value, or otherwise reordering your items, you should consider whether you actually need to change the logical order in the source. the specification continues with a warning not to use reordering to fix issues in your source: “authors must not use order or the *-reverse values of flex-flow/flex-direction as a substitute for correct source ordering, as that can ruin the accessibility of the document.” note: for some years firefox had a bug whereby it would attempt to follow the visual order and not the source order, making it behave differently to other browsers. this has now been fixed. you should always take the source order as the logical order of the document as all up-to-date user agents...
...r, making it behave differently to other browsers. this has now been fixed. you should always take the source order as the logical order of the document as all up-to-date user agents will be following the specification and doing so. in the live example below i have added a focus style in order that as you tab from link to link you can see which is highlighted. if you change the order using flex-direction you can see how the tab order continues to follow the order that the items are listed in the source. in the same way that changing the value of flex-direction does not change the order in which items are navigated to, changing this value does not change paint order. it is a visual reversal of the items only. the order property in addition to reversing the order in which flex items are visual...
...And 3 more matches

WebKit CSS extensions - CSS: Cascading Style Sheets
bkit-border-before-style** -webkit-border-before-width** -webkit-border-end** -webkit-border-end-color** -webkit-border-end-style** -webkit-border-end-width** -webkit-border-fit -webkit-border-horizontal-spacing -webkit-border-start** -webkit-border-start-color** -webkit-border-start-style** -webkit-border-start-width** -webkit-border-vertical-spacing -webkit-box-align** -webkit-box-direction** -webkit-box-flex-group** -webkit-box-flex** -webkit-box-lines** -webkit-box-ordinal-group** -webkit-box-orient** -webkit-box-pack** -webkit-box-reflect** c -webkit-column-axis -webkit-column-break-after -webkit-column-break-before -webkit-column-break-inside -webkit-column-progression -webkit-cursor-visibility d-i -webkit-dashboard-region -webkit-font-size-delta -webkit-...
...ine-box-contain -webkit-line-clamp -webkit-line-grid -webkit-line-snap -webkit-locale -webkit-logical-height -webkit-logical-width m -webkit-margin-after-collapse -webkit-margin-after -webkit-margin-before-collapse -webkit-margin-before -webkit-margin-bottom-collapse -webkit-margin-collapse -webkit-margin-end** -webkit-margin-start** -webkit-margin-top-collapse -webkit-marquee-direction -webkit-marquee-increment -webkit-marquee-repetition -webkit-marquee-speed -webkit-marquee-style -webkit-marquee -webkit-mask-box-image-outset -webkit-mask-box-image-repeat -webkit-mask-box-image-slice -webkit-mask-box-image-source -webkit-mask-box-image-width -webkit-mask-box-image -webkit-mask-repeat-x -webkit-mask-repeat-y -webkit-mask-source-type -webkit-max-logical-height -we...
...it-mask-position-y -webkit-mask-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. ...
...And 3 more matches

offset-rotate - CSS: Cascading Style Sheets
this is the default value. ...
...this is the default value. ...
...this is the default value. ...
...And 3 more matches

text-align - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...text-align: inherit; text-align: initial; text-align: unset; the text-align property is specified in one of the following ways: using the keyword values start, end, left, right, center, justify, justify-all, or match-parent. using a <string> value only, in which case the other value defaults to right. using both a keyword value and a <string> value. values start the same as left if direction is left-to-right and right if direction is right-to-left. end the same as right if direction is left-to-right and left if direction is right-to-left. left the inline contents are aligned to the left edge of the line box. right the inline contents are aligned to the right edge of the line box. center the inline contents are centered within the line box. justify the inline contents are ...
...ents are centered within the line box. justify the inline contents are justified. text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. justify-all same as justify, but also forces the last line to be justified. match-parent similar to inherit, but the values start and end are calculated according to the parent's direction and are replaced by the appropriate left or right value. <string> when applied to a table cell, specifies the alignment character around which the cell's contents will align. accessibility concerns the inconsistent spacing between words created by justified text can be problematic for people with cognitive concerns such as dyslexia. mdn understanding wcag, guideline 1.4 explanations un...
...And 3 more matches

HTTP Index - HTTP
ials to authenticate a user agent with a server, usually after the server has responded with a 401 unauthorized status and the www-authenticate header. 67 cache-control cache-control, general header, http, http header, reference the cache-control general-header field is used to specify directives for caching mechanisms in both requests and responses. caching directives are unidirectional, meaning that a given directive in a request is not implying that the same directive is to be given in the response. 68 clear-site-data http, http header, reference, header the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting website. it allows web developers to have more control over the data stored locally by a browser f...
...ontent, needssyntax, reference the http link entity-header field provides a means for serialising one or more links in http headers. it is semantically equivalent to the html <link> element. 166 location http, http header, reference, response header the location response header indicates the url to redirect a page to. it only provides a meaning when served with a 3xx (redirection) or 201 (created) status response. 167 origin http, reference, request header, header, origin the origin request header indicates where a fetch originates from. it doesn't include any path information, but only the server name. it is sent with cors requests, as well as with post requests. it is similar to the referer header, but, unlike this header, it doesn't disclose the wh...
...text transfer protocol (http) 303 see other redirect status response code indicates that the redirects don't link to the newly uploaded resources, but to another page (such as a confirmation page or an upload progress page). this response code is usually sent back as a result of put or post. the method used to display this redirected page is always get. 232 304 not modified http, redirection, reference, status code the http 304 not modified client redirection response code indicates that there is no need to retransmit the requested resources. it is an implicit redirection to a cached resource. this happens when the request method is safe, like a get or a head request, or when the request is conditional and uses a if-none-match or a if-modified-since header. 233 307 t...
...And 3 more matches

CSS3 - Archive of obsolete content
nal notations may be postponed to the next iteration of this module. several types definition, like <ident> and <custom-ident>, have been deferred to css values and units module level 4. css flexible box layout module candidate recommendation add a flexbox layout to the css display property and several new css properties to control it: flex, flex-align, flex-direction, flex-flow, flex-item-align, flex-line-pack, flex-order, flex-pack, and flex-wrap. css cascading and inheritance level 3 candidate recommendation adds: the initial, unset values for properties. the css all property. the scoping mechanism. clarifies: interaction of media-dependent @import statements and style sheet loading ...
... initial, unset values for properties. the css all property. the scoping mechanism. clarifies: interaction of media-dependent @import statements and style sheet loading requirements. css writing modes module level 3 proposed recommendation defines the writing modes of both horizontal and vertical scripts and clarifies how the css direction and unicode-bidi properties interact with the new css text-orientation property, and extends them where needed. css counter styles level 3 candidate recommendation testing modules css images module level 3 candidate recommendation defines the <image> data type. extends the url() syntax to support image slices using media fragment...
...g phase specifications that are deemed to be in the refining phase are already fairly stable. though changes are still expected, they shouldn't create incompatibilities with current implementations; they should mainly define behavior in edge cases. css animations working draft allows the definition of animations effects by adding the css animation, animation-delay,animation-direction, animation-duration, animation-fill-mode, animation-iteration-count, animation-name, animation-play-state, and animation-timing-function properties, as well as the @keyframes at-rule. web animations working draft css text module level 3 working draft extends: the css text-transform property with the value full-width. th...
...And 2 more matches

Index - Archive of obsolete content
mozilla and report their results back to a server that makes those results available via a web page. the tool enables mozilla.org to be immediately notified of changes to the code that prevent mozilla from compiling and running (or compromise performance and footprint) so they can get someone to fix the problem or reverse the changes. 399 creating a release tag junk here are directions for creating a release from a linux system. note that there are a couple of extra files for win32 and macintosh that aren't pulled by the normal script and need to be pulled by hand. the mini-branch is created so you can check in the build scripts with the necessary changes without touching the original branch. 400 creating a skin for firefox/getting started add-ons, themes ...
... winreg object (windows only) 736 methods the winregvalue constructor creates a winregvalue object. 737 winregvalue (windows only) 738 xpjs components proposal outdated_articles draft 1.0 739 xre no summary! 740 xtech 2005 presentations presentations no summary! 741 directions of the mozilla rdf engine presentations, rdf this presentation showed new developments in the mozilla rdf engine. these include plans to expose the rdf api to public web content, as well as performance and correctness improvements. 742 extending gecko with xbl and xtf presentations, xbl, xtf this session explored ways to extend mozilla/firefox to handle new xml tag...
...up "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. 754 accelerated xul, xul attribute, xul reference no summary! 755 acceltext xul attributes, xul reference no summary! 756 accessible xul attributes, xul reference no summary! 757 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 758 activetitlebarcolor xul attributes, x...
...And 2 more matches

Documentation for BiDi Mozilla - Archive of obsolete content
the bidi code. overview of bidi processing bidi text is reordered according to the unicode bidi algorithm (uba). the implementation is based on ibm's international components for unicode (icu), which was chosen after comparing and testing the available open-source implementations. as far as we could discover, icu is the only one which is 100% compatible with uba, including support for explicit directional controls (lro, rlo, etc, and their html equivalents). bidi processing for a given html document will only take place if one of the following is true: the page includes a hebrew or arabic character or a hindi digit. this is determined in nstextfragment::setto the page includes a element with the attribute dir=rtl, either explicitly (nsgenerichtmlelement::mapcommonattributesinto), or as a conse...
...the attribute dir=rtl, either explicitly (nsgenerichtmlelement::mapcommonattributesinto), or as a consequence of a style rule (mapdeclarationtextinto in nscssstylerule.cpp) all these cases use nsdocument::enablebidi to set the flag mbidienabled. in a bidi-enabled document, the following things happen: during a reflow, nsbidipresutils::resolve is called. this method uses the uba to determine the directional properties of the text and reorder frames if necessary. if necessary, text frames are split so that every frame has the same directionality. framemanager::setframeproperty is used to set the following flags and pointers (for terminology see the specification of the uba): embeddinglevel: the embedding level of the frame textclass: the text class of the frame. baselevel: the base level (directi...
... iterator, nsvisualiterator (in nsframetraversal.cpp) provides visual frame navigation capability. details of rendering are dependent on user preferences and system capabilities. ...
...And 2 more matches

nsIDOMSimpleGestureEvent
for update events, this indicates the movement since the previous update; for the mozrotategesture and mozmagnifygesture events, this indicates the total movement that occurred while the event was being processed. the val...
...n mac os x, the units used for magnification gestures by the underlying operating system api are not documented at this time; typical values appear to be in the range 0.0 to 100.0, but currently you can only rely on the value being either positive or negative. on windows, the units indicate the difference between the previous and current width between the two touch points, in pixels. ...
...nification gestures by the underlying operating system api are not documented at this time; typical values appear to be in the range 0.0 to 100.0, but currently you can only rely on the value being either positive or negative. on windows, the units indicate the difference between the previous and current width between the two touch points, in pixels. direction unsigned long the direction in which the gesture moved. see direction constants and rotation constants on this page. read only. constants direction constants constant value description direction_up 1 upward swipe. direction_down 2 downward swipe. direction_left 4 leftward swipe. direction_right 8 rightward swipe. rotation constants ...
...And 2 more matches

nsIDOMWindowUtils
g aadditionalflags); boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, in boolean areverse); obsolete since gecko 31.0 boolean sendselectionsetevent(in unsigned long aoffset, in unsigned long alength, [optional] in unsigned long aadditionalflags); void sendsimplegestureevent(in astring atype, in float ax, in float ay, in unsigned long adirection, in double adelta, in long amodifiers); void sendtextevent(in astring acompositionstring, in long afirstclauselength, in unsigned long afirstclauseattr, in long asecondclauselength, in unsigned long asecondclauseattr, in long athirdclauselength, in unsigned long athirdclauseattr, in long acaretstart, in long acaretlength); obsolete since gecko 26 boolean sendtouchevent(in astri...
...eturi, in unsigned long type ); parameters sheeturi the nsiuri of the css file to be removed. type the type of the sheet (agent_sheet, user_sheet or author_sheet). nodesfromrect() returns an nsidomnodelist containing all nodes that intersect a specified rectangle within the window's document. the rectangle is specified using a central point and a distance to expand in all four cardinal directions. this is used to locate nodes that are within some number of pixels of a point; for example, you can use this to find candidate target nodes when the user taps on a touch screen. nsidomnodelist nodesfromrect( in float ax, in float ay, in float atopsize, in float arightsize, in float abottomsize, in float aleftsize, in boolean aignorerootscrollframe, in boolean aflushlayout ); ...
...niversalxpconnect privileges. void sendmousescrollevent( in astring atype, in float ax, in float ay, in long abutton, in long ascrollflags, in long adelta, in long amodifiers ); parameters atype event type. ax x offset in css pixels. ay y offset in css pixels. abutton button to synthesize. ascrollflags flag bits --- see nsmousescrollflags in nsguievent.h. adelta the direction and amount to scroll (in lines or pixels, depending on the event type) amodifiers modifiers pressed. using constants defined in nsidomnsevent. obsolete since gecko 15.0 using constants defined as modifier_*. sendwheelevent() synthesize a wheel event for a window. the event type is always "wheel". events are sent in coordinates offset by ax and ay from the window. cannot be accessed from...
...And 2 more matches

HTMLElement.dir - Web APIs
the htmlelement.dir property gets or sets the text writing directionality of the content of the current element. the text writing directionality of an element is which direction that text goes (for support of different language systems). arabic languages and hebrew are typical languages using the rtl directionality. an image can have its dir property set to "rtl" in which case the html attributes title and alt will be formatted and defined as "rtl". when a table has its dir set to "rtl", the column order is arranged from right to left. when an element has its dir set to "auto", the direction of the element is determined based on its first strong directionality character, or default to the directionality of its parent element. ...
...he html attributes title and alt will be formatted and defined as "rtl". when a table has its dir set to "rtl", the column order is arranged from right to left. when an element has its dir set to "auto", the direction of the element is determined based on its first strong directionality character, or default to the directionality of its parent element. browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content. ...
...the column order is arranged from right to left. when an element has its dir set to "auto", the direction of the element is determined based on its first strong directionality character, or default to the directionality of its parent element. browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content. chrome and safari provide a directionality option in the contextual menu of input fields while internet explorer and edge use the key combinations ctrl + left shift and ctrl + right shift. firefox uses ctrl/cmd + shift + x but does not update the dir attribute value. ...
...And 2 more matches

MediaDevices.ondevicechange - Web APIs
fetch the current list of media devices and then update the displayed lists of audo and video devices using that information. ...
...n. ...
...ratedevices() is fulfilled. the fulfillment handler is called when the device list is ready. the list is passed into the fulfillment handler as an array of mediadeviceinfo objects, each describing one media input or output device. a foreach() loop is used to scan through all the devices. for each device, we create a new <li> object to be used to display it to the user. ...
...And 2 more matches

USBEndpoint - Web APIs
the usbendpoint interface of the webusb api provides information about an endpoint provided by the usb device. an endpoint represents a unidirectional data stream into or out of a device. constructor usbendpoint.usbendpoint creates a new usbendpoint object which will be populated with information about the endpoint on the provided usbaltenateinterface with the given endpoint number and transfer direction. properties usbendpoint.endpointnumber returns this endpoint's "endpoint number" which is a value from 1 to 15 extracted from the bendpointaddress field of the endpoint descriptor defining this endpoint. ...
... "out" - data is transferred from host to device. usbendpoint.type returns the type of this endpoint, one of: "bulk" - provides reliable data transfer for large payloads. ...
... "out" - data is transferred from host to device. usbendpoint.type returns the type of this endpoint, one of: "bulk" - provides reliable data transfer for large payloads. ...
...And 2 more matches

XRInputSource.targetRayMode - Web APIs
the input source should be generated and how it should be presented to the user. syntax let raymode = xrinputsource.targetraymode; value a domstring taken from the xrtargetraymode enumerated type, indicating which method to use when generating and presenting the target ray to the user. the possible values are: gaze the user is using a gaze-tracking system (or gaze input) which detects the direction in which the user is looking. the target ray will be drawn originating at the viewer's eyes and will follow the direction in which they're looking. screen the direction of the target ray is indicated using a tap on a touch screen, mouse, or other tactile input device. tracked-pointer targeting is being performed using a handheld device or hand-tracking system which the user points in the dire...
... usage notes the input source's targetrayspace indicates the position and orientation of the target ray, and can be used to determine where to render the ray. ...
... usage notes the input source's targetrayspace indicates the position and orientation of the target ray, and can be used to determine where to render the ray. ...
...And 2 more matches

Mastering Wrapping of Flex Items - CSS: Cascading Style Sheets
in this guide i will explain how this works, what it is designed for and what situations really require css grid layout rather than flexbox. making things wrap the initial value of the flex-wrap property is nowrap. ...
...in this guide i will explain how this works, what it is designed for and what situations really require css grid layout rather than flexbox. making things wrap the initial value of the flex-wrap property is nowrap. ...
...ill expand larger than 160 px in order to fill each row completely. if there is only one item on the final line it will stretch to fill the entire line. we can see the same thing happening with columns. the container will need to have a height in order that the items will start wrapping and creating new columns, and items will stretch taller to fill each column completely. wrapping and flex-direction wrapping works as you might expect when combined with flex-direction. if flex-direction is set to row-reverse then the items will start from the end edge of the container and lay themselves out in reverse ordered lines. note that the reversing is only happening in the inline, row direction. we start on the right then go onto the second line and again start from the right. we aren’t reversin...
...And 2 more matches

Realizing common layouts using CSS Grid Layout - CSS: Cascading Style Sheets
tent. i’m using a flexbox on the navigation to display it in a row spaced out. i can now add a final breakpoint to move to a three-column layout. @media (min-width: 700px) { .wrapper { grid-template-columns: 1fr 4fr 1fr; grid-template-areas: "header header header" "nav content sidebar" "nav content ad" "footer footer footer" } nav ul { flex-direction: column; } } the three-column layout has two 1fr unit side columns and a middle column that has 4fr as the track size. this means that the available space in the container is split into 6 and assigned in proportion to our three tracks – one part each to the side columns and 4 parts to the center. in this layout i am displaying the nav in the left column, alongside the content. in the righ...
... something to note as we create this layout is that we haven’t needed to explicitly position every element on the grid at each breakpoint. we have been able to inherit the placement set up for earlier breakpoints – an advantage of working “mobile first”. we are also able to take ad...
...ns: repeat(auto-fill,minmax(200px, 1fr)); } as soon as i add this css, the items start to lay out as a grid. if i make the window smaller or wider the number of column tracks changes – without me needing to add breakpoints using media queries and redefine the grid. i can then tidy up the internals of the boxes using a little touch of flexbox. ...
...And 2 more matches

Logical properties for floating and positioning - CSS: Cascading Style Sheets
specification contains logical mappings for the physical values of float and clear, and also for the positioning properties used with positioned layout. this guide takes a look at how to use these. mapped properties and values the table below details the properties and values discussed in this guide along with their physical mappings. they assume a horizontal writing-mode, with a left-to-right direction. logical property or value physical property or value float: inline-start float: left float: inline-end float: right clear: inline-start clear: left clear: inline-end clear: right inset-inline-start left inset-inline-end right inset-block-start top inset-block-end bottom text-...
... clear example the physical values used with the float and clear properties are left, right and both. the logical properties specification defines the values inline-start and inline-end as mappings for left and right. in the example below i have two boxes — the first has the box floated with float: left, the second with float: inline-start. if you change the writing-mode to vertical-rl or the direction to rtl you will see that the left-floated box always sticks to the left, whereas the inline-start-floated item follows the direction and writing-mode. example: inset properties for positioned layout positioning generally allows us to position an element in a manner relative to its containing block — we essentially inset the item relative to where it would fall based on normal flow. to do th...
...of text in your writing mode. these are as follows: inset-block-start, inset-block-end, inset-inline-start and inset-inline-end. in the below example i have used the inset-block-start and inset-inline-end properties to position the blue box using absolute positioning inside the area with the grey dotted border, which has position: relative. change the writing-mode property to vertical-rl, or add direction: rtl, and see how the flow relative box stays with the text direction. new two- and four-value shorthands as with other properties in the specification we have some new shorthand properties, which give the ability to set two or four values at once. inset — sets all four sides together with physical mapping. inset-inline — sets both logical inline insets. inset-block — sets both log...
...And 2 more matches

Logical properties for margins, borders and padding - CSS: Cascading Style Sheets
s is mostly due to the fact that there are four longhand values each for margin, border, and padding side, plus all the shorthand values. mappings for margins, borders, and padding the specification details mappings for each logical value to a physical counterpart. in the table below i have given these mapped values assuming that the writing-mode in use is horizontal-tb — with a left to right direction. the inline direction therefore runs horizontally — left to right — and margin-inline-start would be equivalent to margin-left. if you were using a horizontal-tb writing mode with a right-to-left text direction then margin-inline-start would be the same as margin-right, and in a vertical writing mode it would be the same as using margin-top. logical property physical property ...
...line-start, margin-inline-end, margin-block-start, and margin-inline-end can be used instead of their physical counterparts. in the example below i have created two boxes and added different sized margins to each edge. i have added an extra container with a border in order to make the margin more obvious to see. one box uses physical properties and the other logical properties. try changing the direction property to rtl to cause the boxes to display in a right-to-left direction, the margins on the first box will stay in the same place, while the margins on the inline dimension of the second box will switch. you can also try changing the writing-mode from horizontal-tb to vertical-rl. again, notice how the margins stay in the same place for the first box, but switch around to follow the text dire...
...ples the mapped padding properties of padding-inline-start, padding-inline-end, padding-block-start, and padding-inline-end can be used instead of their physical counterparts. in the example below i have two boxes, one of which is using physical padding properties and the other logical padding properties. with a writing-mode of horizontal-tb, both boxes should appear the same. try changing the direction property to rtl to cause the boxes to display in a right-to-left direction. the padding on the first box will stay in the same place, whereas the padding on the inline dimension of the second box will switch. you can also try changing the writing-mode from horizontal-tb to vertical-rl. again, notice how the padding stays in the same place for the first box, but switches around to follow the text...
...And 2 more matches

Inline formatting context - CSS: Cascading Style Sheets
in a vertical writing mode they would be laid out vertically starting at the top. in the example below, the two (<div>) elements with the black borders form a block formatting context, inside which each word participates in an inline formatting context. ...
... formatting context, inside which each word participates in an inline formatting context. the boxes in the horizontal writing mode run horizontally, and the vertical writing mode boxes run vertically. boxes forming a line are contained by a rectangular area called a line box. this box will be large enough to contain all of the inline boxes in that line; when there is no more room in the inline direction another line will be created. therefore a paragraph is a set of inline line boxes, stacked in the block direction. when an inline box is split, margins, borders, and padding have no visual effect where the split occurs. in the next example there is a (<span>) element wrapping a set of words wrapping onto two lines. the border on the <span> breaks at the wrapping point. margins, borders, and p...
...in the example below you can see how the margin, border, and padding on the inline <span> element are added. ...
...And 2 more matches

flex-flow - CSS: Cascading Style Sheets
the flex-flow css shorthand property specifies the direction of a flex container, as well as its wrapping behavior. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ecifies the direction of a flex container, as well as its wrapping behavior. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...s its wrapping behavior. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...And 2 more matches

image() - CSS: Cascading Style Sheets
disambiguation: image(), the htmlimageelement constructor. ...
...a( <number>#{3} , <alpha-value>? )<hsl()> = hsl( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsl( <hue>, <percentage>, <percentage>, <alpha-value>? )<hsla()> = hsla( <hue> <percentage> <percentage> [ / <alpha-value> ]? ) | hsla( <hue>, <percentage>, <percentage>, <alpha-value>? ...
...number> | <angle> where: image-tagsoptional the directionality of the image, either ltr for left-to-right or rtl for right-to-left. image-src optional zero or more <url>s or <string>s specifying the image sources, with optional image fragment identifiers. coloroptional a color, specifying a solid background color to use as a fallback if no image-src is found, supported, or declared. bi-directional awareness the first, optional parameter of the image() notation is the directionality of the image. if included, and the image is used on an element with opposite directionality, the image will be flipped horizontally in horizontal writing modes. if the directionality is omitted, the image won't be flipped if the language direction is changed. image fragments one key difference between url()...
...And 2 more matches

HTML documentation index - HTML: Hypertext Markup Language
13 data-* global attributes, html, reference the data-* global attributes form a class of attributes called custom data attributes, that allow proprietary information to be exchanged between the html and its dom representation by scripts. 14 dir bidi, global attributes, html, reference the dir global attribute is an enumerated attribute that indicates the directionality of the element's text. 15 draggable global attributes, html, reference the draggable global attribute is an enumerated attribute that indicates whether the element can be dragged, either with native browser behavior or the html drag and drop api. 16 dropzone deprecated, global attributes, html, reference the dropzone global attribute is an enumerated...
...reference the html <base> element specifies the base url to use for all relative urls in a document. 66 <basefont> element, fonts, html, layout, obsolete, reference, style, web, basefont the obsolete html base font element (<basefont>) sets a default font face, size, and color for the other elements which are descended from its parent element. ...
...cifies the base url to use for all relative urls in a document. 66 <basefont> element, fonts, html, layout, obsolete, reference, style, web, basefont the obsolete html base font element (<basefont>) sets a default font face, size, and color for the other elements which are descended from its parent element. 67 <bdi>: the bidirectional isolate element bdi, bidi, directionality, element, html, html text-level semantics, html:flow content, html:palpable content, html:phrasing content, internationalization, left-to-right, reference, right-to-left, text, web, direction, i18n, ltr, rtl the html bidirectional isolate element (<bdi>) tells the browser's bidirectional algorithm to treat the text it contains in isolation from its surrounding text. 68 <bdo...
...And 2 more matches

The building blocks of responsive design - Progressive web apps (PWAs)
on: the mobile-app layout of our example app is designed for portrait orientation, and looks terrible when viewed on a device in landscape orientation. ...
...example app is designed for portrait orientation, and looks terrible when viewed on a device in landscape orientation. ...
...rait orientation, and looks terrible when viewed on a device in landscape orientation. ...
...And 2 more matches

fill-rule - SVG: Scalable Vector Graphics
starting with a count of zero, add one each time a path segment crosses the ray from left to right and subtract one each time a path segment crosses the ray from right to left. after counting the crossings, if the result is zero then the point is outside the path. otherwise, it is inside. example html,body,svg { heigh...
...herwise, it is inside. ...
.../> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the same direction (both squares drawn clockwise, to the "right") --> <path fill-rule="nonzero" stroke="red" d="m110,0 h90 v90 h-90 z m130,20 h50 v50 h-50 z"/> <!-- effect of nonzero fill rule on a shape inside a shape with the path segment moving in the opposite direction (one square drawn clockwise, the other anti-clockwise) --> <path fill-rule="nonzero" stroke="red" d="m210,0 h90 v90 h-90 z m230,20 v50 h50 v-50 z"/> </svg> evenodd the value evenodd determines the "insideness" of a point in the shape by drawing a ray from that point to infinity in any direction and counting the number of path segments from the given shape that the ra...
...And 2 more matches

writing-mode - SVG: Scalable Vector Graphics
see the css writing-mode property for more information. ...
...see the css writing-mode property for more information. ...
...see the css writing-mode property for more information. ...
...And 2 more matches

Sorting and filtering a custom tree view - Archive of obsolete content
there.is.only.xul" onload="init()"> <script type="application/javascript" src="sort.js"/> <hbox align="center" id="search-box"> <label accesskey="f" control="filter">filter</label> <textbox id="filter" oninput="inputfilter(event)" flex="1"/> <button id="clearfilter" oncommand="clearfilter()" label="clear" accesskey="c" disabled="true"/> </hbox> <tree id="tree" flex="1" persist="sortdirection sortresource" sortdirection="ascending" sortresource="description"> <treecols> <treecol id="name" label="name" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirec...
..."sort(this)" class="sortdirectionindicator" sortdirection="ascending"/> <splitter class="tree-splitter"/> <treecol id="description" label="description" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> <splitter class="tree-splitter"/> <treecol id="weapon" label="weapon" flex="1" persist="width ordinal hidden" onclick="sort(this)" class="sortdirectionindicator"/> </treecols> <treechildren id="tree-children"/> </tree> </window> sort.js var table = null; var data = null; var tree; var filtertext = ""; function init() { tree = document.getelementbyid("tree"); loadtable(); } //this function is called every time the tree is sorted, filtered, or reloaded function loadtable() { //remember scroll position. this is useful if this is an edit...
...1 : -1; //if the column is passed and it's already sorted by that column, reverse sort if (column) { columnname = column.id; if (tree.getattribute("sortresource") == columnname) { order *= -1; } } else { columnname = tree.getattribute("sortresource"); } function columnsort(a, b) { if (prepareforcomparison(a[columnname]) > prepareforcomparison(b[columnname])) ...
...me])) return -1 * order; //tie breaker: name ascending is the second level sort if (columnname != "name") { if (prepareforcomparison(a["name"]) > prepareforcomparison(b["name"])) return 1; if (prepareforcomparison(a["name"]) < prepareforcomparison(b["name"])) return -1; } return 0; } table.sort(columnsort); //setting these will make the sort option persist tree.setattribute("sortdirection", order == 1 ? "ascending" : "descending"); tree.setattribute("sortresource", columnname); tree.view = new treeview(table); //set the appropriate attributes to show to indicator var cols = tree.getelementsbytagname("treecol"); for (var i = 0; i < cols.length; i++) { cols[i].removeattribute("sortdirection"); } document.getelementbyid(columnname).setattribute("sortdirection", order == 1 ? ...

Trees and Templates - Archive of obsolete content
ode in the tree. this becomes useful for certain datasources where the data is determined dynamically. sorting columns if you try the previous example, you might note that the list of files is not sorted. trees which generate their data from a datasource have the optional ability to sort their data. you can sort either ascending or descending on any column. the user may change the sort column and direction by clicking the column headers. this sorting feature is not available for trees with static content, although you can write a script to sort the data. sorting involves three attributes, which should be placed on the columns. the first attribute, sort, should be set to an rdf property that is used as the sort key. usually, this would be the same as that used in the label of the cell in that column...
..., although you can write a script to sort the data. sorting involves three attributes, which should be placed on the columns. the first attribute, sort, should be set to an rdf property that is used as the sort key. usually, this would be the same as that used in the label of the cell in that column. if you set this on a column, the data will be sorted in that column. the user can change the sort direction by clicking the column header. if you do not set the sort attribute on a column, the data cannot be sorted by that column. the sortdirection attribute (note the mixed case) is used to set the direction in which the column will be sorted by default. three values are possible: ascending the data is displayed is ascending order. descending the data is displayed is desc...
...l order, which means the order the data is stored in the rdf datasource. the final attribute, sortactive should be set to true for one column, the one that you would like to be sorted by default. the following example changes the columns in the earlier example to incorporate the extra features: <treecols> <treecol id="name" label="name" flex="1" primary="true" sortactive="true" sortdirection="ascending" sort="rdf:http://home.netscape.com/nc-rdf#name"/> <splitter/> <treecol id="date" label="date" flex="1" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> </treecols> persisting column state one additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions. to do this, we use the pers...
...sting column state one additional thing you might want to do is persist which column is currently sorted, so that it is remembered between sessions. to do this, we use the persist attribute on each treecol element. there are five attributes of columns that need to be persisted, to save the column width, the column order, whether the column is visible, which column is currently sorted and the sort direction. the following example shows a sample column: <treecol id="date" label="date" flex="1" persist="width ordinal hidden sortactive sortdirection" sort="rdf:http://home.netscape.com/web-rdf#lastmodifieddate"/> more details about the persist attribute will be described in the later section. additional rule attributes there are two additional attributes that can be added to t...

XUL element attributes - Archive of obsolete content
stretch this is the default value. the child elements are stretched to fit the size of the box. for a horizontal box, the children are stretched to be the height of the box. for a vertical box, the children are stretched to be the width of the box. if the size of the box changes, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the v...
...atasource to an element but don't want one to be added right away, set this attribute to 'rdf:null'. this will make the element so that its contents can be generated from a datasource. otherwise, you cannot add one later. when the xul document is contained on a remote web site, the datasources may only be loaded from the same domain as the document. dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for hori...
... below the pack attribute specifies where child elements of the box are placed when the box is larger that the size of the children. for boxes with horizontal orientation, it is used to indicate the position of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed in the...
...s, this attribute is used to specify the root rdf node where content generation begins. this will correspond to the value of an about attribute on an rdf container. this attribute should be placed alongside the datasources attribute. removeelement type: id when placed on an element in an overlay, it indicates that the element in the base file should be removed from the window. sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted. use the sortresource attribute to specify the sort key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. natural the data is sorted in natural order, which means the order that it is stored in. sortresource ...

Building up a basic demo with Three.js - Game development
te it, by adding the following line below our previous lines: var scene = new three.scene(); later, we will be using the .add() method, to add objects to this scene. camera we have the rendered scene, but we still need to add a camera to view our handiwork — imagine a movie set without any cameras. the following lines put the camera in place in the 3d coordinate system, and point it in the direction of our scene, so we can finally see something: var camera = new three.perspectivecamera(70, width/height); camera.position.z = 50; scene.add(camera); add the above lines to your code, below those previously added. there are other types of camera available (cube, orthographic), but the simplest is perspective. to initialize it, we have to set its field of view and aspect ratio: the former is u...
...he right, so it's not in the same position as the box, or torus. as mentioned above, the new objects currently just look black. to have both, the phong and lambert materials properly visible, we need to introduce a source of light. lights there are various types of light sources available in three.js. the most basic is pointlight, which works like a flashlight, shining a spotlight in a defined direction. add the following lines, below your shape definitions: var light = new three.pointlight(0xffffff); light.position.set(-10, 15, 50); scene.add(light); we define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. now everything works as it should, all three shapes are visible. you shou...
...= new three.pointlight(0xffffff); light.position.set(-10, 15, 50); scene.add(light); we define a white point of light, set its position a little away from the center of the scene, so it can light up some parts of the shapes, finally adding it to the scene. now everything works as it should, all three shapes are visible. you should check the documentation for other types of lights, like ambient, directional, hemisphere, or spot. experiment placing them on our scene, to see how they affect it. this looks a little boring though. in a game, something is usually happening. we might see animations and such. so let's try breathing a little life into these shapes, by animating them! animation we already used rotation, to adjust the position of the cube. we can also scale the shapes, or change their ...
...ions and such. so let's try breathing a little life into these shapes, by animating them! animation we already used rotation, to adjust the position of the cube. we can also scale the shapes, or change their positions. to show animation, we need to make changes to these values inside the render loop, so they update on each frame. rotation rotating is straighforward. you add a value to a given direction of rotation on each frame. add this line of code, right after the requestanimationframe() invocation inside the render function: cube.rotation.y += 0.01; this rotates the cube on every frame, by a tiny bit, so the animation looks smooth. scaling we can also scale an object. applying a constant value, we would make it grow, or shrink just once. let's make things more interesting. first, we im...

Bounce off the walls - Game development
kly disappears from the screen, limiting the fun we can have with it! to overcome that we will implement some very simple collision detection (which will be explained later in more detail) to make the ball bounce off the four edges of the canvas. simple collision detection to detect the collision we will check whether the ball is touching (colliding with) the wall, and if so, we will change the direction of its movement accordingly. to make the calculations easier let's define a variable called ballradius that will hold the radius of the drawn circle and be used for calculations. add this to your code, somewhere below the existing variable declarations: var ballradius = 10; now update the line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ballradius, 0, math.pi*2);...
...e line that draws the ball inside the drawball() function to this: ctx.arc(x, y, ballradius, 0, math.pi*2); bouncing off the top and bottom there are four walls to bounce the ball off — let's focus on the top one first. we need to check, on every frame, whether the ball is touching the top edge of the canvas — if yes, we'll reverse the ball movement so it will start to move in the opposite direction and stay within the visible boundaries. remembering that the coordinate system starts from the top left, we can come up with something like this: if(y + dy < 0) { dy = -dy; } if the y value of the ball position is lower than zero, change the direction of the movement on the y axis by setting it equal to itself, reversed. if the ball was moving upwards with a speed of 2 pixels per frame, now...
...y; } at this point you should insert the above code block into the draw() function, just before the closing curly brace. the ball keeps disappearing into the wall! test your code at this point, and you will be impressed — now we have a ball that bounced off all four edges of the canvas! we have another problem however — when the ball hits each wall it sinks into it slightly before changing direction: this is because we're calculating the collision point of the wall and the center of the ball, while we should be doing it for its circumference. the ball should bounce right after if touches the wall, not when it's already halfway in the wall, so let's adjust our statements a bit to include that. update the last code you added to this: if(x + dx > canvas.width-ballradius || x + dx < ballradi...
... let's adjust our statements a bit to include that. update the last code you added to this: if(x + dx > canvas.width-ballradius || x + dx < ballradius) { dx = -dx; } if(y + dy > canvas.height-ballradius || y + dy < ballradius) { dy = -dy; } when the distance between the center of the ball and the edge of the wall is exactly the same as the radius of the ball, it will change the movement direction. subtracting the radius from one edge's width and adding it onto the other gives us the impression of the proper collision detection — the ball bounces off the walls as it should do. compare your code lets again check the finished code for this part against what you've got, and have a play: exercise: try changing the color of the ball to a random colour every time it hits the wall. next...

Web Replay
nts, gc counters, and so forth) are associated with non-deterministic components and are not recorded. ipc integration communication between the chrome process and a recording or replaying process — hereafter referred to as the child process — is managed via a separate middleman content process. the child process is extended so that it can communicate with the middleman, using a special bidirectional channel and messages separate from ipdl state. middleman process the middleman is the same as a normal content process, except that it spawns and communicates with the child process, and avoids creating any documents itself. using the middleman provides the following advantages: ipdl communication is greatly simplified. the chrome and middleman processes communicate using the standard br...
...r without actually invoking the underlying library function. redirected functions include both low level system call wrappers like sendmsg/recvmsg, and higher level functions such as various cocoa interfaces. the list of redirected functions can be found in toolkit/recordreplay/processredirectdarwin.cpp. ...
... the underlying library function. redirected functions include both low level system call wrappers like sendmsg/recvmsg, and higher level functions such as various cocoa interfaces. the list of redirected functions can be found in toolkit/recordreplay/processredirectdarwin.cpp. when calls are added to gecko for new system library functions, those functions may need redirections. ...
... system library functions, those functions may need redirections. in general, redirections are needed for any function that is (a) not compiled as part of gecko, and either (b) may behave differently between recording and replaying, or (c) depends on data produced by other redirected functions (for example, corefoundation types like cfarrayref and cfstringref). a simpler way of telling that a redirection is needed for a function is that the replay tests crash inside it while replaying. new redirections can be added to toolkit/recordreplay/processredirectdarwin.cpp, adding just a few lines for functions with simple interfaces using the various rrfunction macros. missing redirections can also be temporarily worked around by avoiding the call when mozilla::recordreplay::isrecordingorreplaying(). ...

XPCOM array guide
clude: nsisimpleenumerator - an enumerator for com objects. nsistringenumerator / nsiutf8stringenumerator - enumerators for strings obsolete arrays / enumerators there are some deprecated classes which should not be used by new code. nsisupportsarray - obsoleted by nsiarray and nsimutablearray, use those instead. nsienumerator - obsoleted by nsisimpleenumerator, use that instead. nsibidirectionalenumerator - obsoleted by nsisimpleenumerator, use that instead. which array should i use? do not use nsisupportsarray; it is deprecated. does your array need to be scriptable? if so, use nsiarray. example: an array attribute in an idl file would be nsiarray. will your array store non-refcounted objects and need automatic resizing? if so, use nstarray<t>. example: an array of in...
...mentat(0); elements->appendelement(newelement, pr_false); } while it is usually possible to call queryinterface on an nsiarray to get access to the nsimutablearray interface, this is against convention and it should be avoided. // no need for the double-pointer, and this violates xpcom rules // which expect acess to a new object void tweakarray(nsimutablearray** elements) { // ugh, extra indirection! *elements->removeelementat(0); *elements->appendelement(newelement, pr_false); } in-place enumeration when accessing all members of an nsiarray, in-place enumeration is preferred over indexed access. however, i seem to have forgotten to implement that. good thing the interface is under review. sorry! enumerators creating an enumerator from an nsiarray is easy. the method enumerate() ret...
...ree resultarray return ns_newadoptingstringenumerator(aresult, resultarray); } as noted above, these implementations of nsistringenumerator can also be queryinterface'd between nsistringenumerator and nsiutf8stringenumerator. the implementations will properly convert back and forth between utf8 and unicode. to ensure that you get the right implementation and the conversion is done in the right direction, make sure that you call the version of ns_newstringenumerator or ns_newutf8stringenumerator that corresponds to the array type, not the enumerator type. for example, if a class has an internal nstarray<nscstring> of utf8 strings, but needs to implement an interface which returns an nsistringenumerator, it should use ns_newutf8stringenumerator: class nsfoo : nsifoo { ... ns_imethod getstrin...
...p nsfoo::getstrings(nsistringenumerator** aresult) { nscomptr<nsiutf8stringenumerator> enumerator; nsresult rv = ns_newutf8stringenumerator(getter_addrefs(enumerator), melementnames, this); ns_ensure_success(rv, rv); return callqueryinterface(enumerator, aresult); } obsolete arrays and enumerators nsisupportsarray nsienumerator (includes nsibidirectionalenumerator) ...

nsISelection3
lic/nsiselection3.idlscriptable please add a summary to this article. 1.0 66 introduced gecko 2.0 obsolete gecko 8.0 inherits from: nsisupports last changed in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko 8.0 this interface was merged into the nsiselection interface. ...
...hanged in gecko 2.0 (firefox 4 / thunderbird 3.3 / seamonkey 2.1) in gecko 8.0 this interface was merged into the nsiselection interface. method overview void modify(in domstring alter, in domstring direction, in domstring granularity); methods modify() modifies the selection. note that the parameters are case-insensitive. ...
...string alter, in domstring direction, in domstring granularity); methods modify() modifies the selection. note that the parameters are case-insensitive. void modify( in domstring alter, in domstring direction, in domstring granularity ); parameters alter can be one of { "move", "extend" } "move" collapses the selection to the end of the selection and applies the movement direction/granularity to the collapsed selection. "extend" leaves the start of the selection unchanged, and applies movement direction/granularity to the end of the selection. ...
...mstring alter, in domstring direction, in domstring granularity ); parameters alter can be one of { "move", "extend" } "move" collapses the selection to the end of the selection and applies the movement direction/granularity to the collapsed selection. "extend" leaves the start of the selection unchanged, and applies movement direction/granularity to the end of the selection. ...

AudioListener.setOrientation() - Web APIs
the up vector's default value is (0, 1, 0). the two vectors must be separated by an angle of 90° — in linear analysis terms, they must be perpendicular to each other. ...
...the up vector's default value is (0, 1, 0). the two vectors must be separated by an angle of 90° — in linear analysis terms, they must be perpendicular to each other. ...
...the up vector's default value is (0, 1, 0). the two vectors must be separated by an angle of 90° — in linear analysis terms, they must be perpendicular to each other. ...
...the up vector's default value is (0, 1, 0). the two vectors must be separated by an angle of 90° — in linear analysis terms, they must be perpendicular to each other. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.setorientation(0,0,-1,0,1,0); returns void. ...

CanvasRenderingContext2D.textAlign - Web APIs
html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); c...
... canvas.width / 2; ctx.beginpath(); ctx.moveto(x, 0); ctx.lineto(x, canvas.height); ctx.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end". ...
...x.stroke(); ctx.font = '30px serif'; ctx.textalign = 'left'; ctx.filltext('left-aligned', x, 40); ctx.textalign = 'center'; ctx.filltext('center-aligned', x, 85); ctx.textalign = 'right'; ctx.filltext('right-aligned', x, 130); result direction-dependent text alignment this example demonstrates the two direction-dependent values of the textalign property: "start" and "end". note that the direction property is manually specified as "ltr", although this is also the default for english-language text. ...
...his example demonstrates the two direction-dependent values of the textalign property: "start" and "end". note that the direction property is manually specified as "ltr", although this is also the default for english-language text. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); ctx.font = '30px serif'; ctx.direction = 'ltr'; ctx.textalign = 'start'; ctx.filltext('start-aligned', 0, 50); ctx.textalign = 'end'; ctx.filltext('end-aligned', canvas.width, 120); result specifications specification status comment html living standardthe definition of 'canvasrenderingcontext2d.textalign' in that specification. living standard ...

IDBCursorSync - Web APIs
ject store. it enables an application to synchronously process all the records in the cursor's range. method overview bool continue (in optional any key); void remove () raises (idbdatabaseexception); attributes attribute type description count readonly unsigned long long the total number of objects that share the current key. direction readonly unsigned short the direction of traversal of the cursor. see constants for possible values. key readonly any the key for the record at the cursor's position. value any the value for the record at the cursor's position. setting this attribute can raise an idbdatabaseexception with the following codes: data_err if the underlying obje...
... because it is open in the read_only or snapshot_read mode, or if an index record cannot be changed because the underlying index is auto-populated. serial_err if the data being stored could not be serialized by the internal structured cloning algorithm. constants constant value description next 0 this cursor includes duplicates, and its direction is monotonically increasing in the order of keys. next_no_duplicate 1 this cursor does not include duplicates, and its direction is monotonically increasing in the order of keys. prev 2 this cursor includes duplicates, and its direction is monotonically decreasing in the order of keys. prev_no_duplicate 3 this cursor does not include duplicates, and it...
...if no key is specified, advance to the immediate next position. ...
...if no key is specified, advance to the immediate next position. returns false if the cursor has reached the end of its range; otherwise returns true. ...

IDBIndexSync - Web APIs
interface of the indexeddb api provides synchronous access to an index in a database. ...
...if this attribute is null, this index is not auto-populated. name reado...
...exception with the following code: not_found_err if no record exists in this index for the given key. opencursor() creates a cursor over the records of this index. the range of the new cursor matches the specified key range; if the key range is not specified or is null, then the range includes all the records. void opencursor ( in optional idbkeyrange range, in optional unsigned short direction ) raises (idbdatabaseexception); parameters range the key range to use as the cursor's range. direction the cursor's required direction. returns void exceptions this method can raise an idbdatabaseexception with the following code: not_found_err if no records exist in this index for the requested key range. openobjectcursor() creates a cursor over the records of this index's r...
... this index for the requested key range. openobjectcursor() creates a cursor over the records of this index's referenced object store, as arranged by this index. the range of the new cursor matches the specified key range; if the key range is not specified or is null, then the range includes all the records. void openobjectcursor ( in optional idbkeyrange range, in optional unsigned short direction ) raises (idbdatabaseexception); parameters range the key range to use as the cursor's range. direction the cursor's required direction. returns void exceptions this method can raise an idbdatabaseexception with the following code: not_found_err if no records exist in this index for the requested key range. put() stores the given value in this index and returns the key for the...

RTCPeerConnection.addTrack() - Web APIs
ev.streams[0]; } else { let inboundstream = new mediastream(ev.track); videoelem.srcobject = inboundstream; } } associating tracks with specific streams by specifying a stream and allowing rtcpeerconnection to create streams for you, the streams' track associations are automatically managed for you by the webrtc infrastructure. this includes things like changes to the transceiver's direction and tracks being halted using removetrack(). for example, consider this function that an application might use to begin streaming a device's camera and microphone input over an rtcpeerconnection to a remote peer: async opencall(pc) { const gumstream = await navigator.mediadevices.getusermedia( {video: true, audio: true}); for (const track of gumstream.gettracks()) ...
...tcrtpreceiver whose track property specifies a mediastreamtrack whose kind is the same as the kind of the track parameter specified when calling rtcpeerconnection.addtrack(). this ensures that a transceiver only handles audio or video and never both. the rtcrtptransceiver's stopped property is false. the rtcrtpsender being considered has never been used to send data. if the transceiver's currentdirection has ever been "sendrecv" or "sendonly", the sender can't be reused. if all of those criteria are met, the sender gets reused, which results in these changes occurring to the existing rtcrtpsender and its rtcrtptransceiver: the rtcrtpsender's track is set to the specified track. the sender's set of associated streams is set to the list of streams passed into this method, stream.... the asso...
... the sender can't be reused. if all of those criteria are met, the sender gets reused, which results in these changes occurring to the existing rtcrtpsender and its rtcrtptransceiver: the rtcrtpsender's track is set to the specified track. the sender's set of associated streams is set to the list of streams passed into this method, stream.... the associated rtcrtptransceiver has its currentdirection updated to include sending; if its current value is "recvonly", it becomes "sendrecv", and if its current value is "inactive", it becomes "sendonly". new senders if no existing sender exists that can be reused, a new one is created. this also results in the creation of the associated objects that must exist. the process of creating a new sender results in these changes: the new rtcrtpsender...
...created with the specified track and set of stream(s). a new rtcrtpreceiver is created with a new mediastreamtrack as its track property (not the track specified as a parameter when calling addtrack()). this track's kind is set to match the kind of the track provided as an input parameter. a new rtcrtptransceiver is created and associated with the new sender and receiver. the new transceiver's direction is set to "sendrecv". the new transceiver is added to the rtcpeerconnection's set of transceivers. example this example is drawn from the code presented in the article signaling and video calling and its corresponding sample code. it comes from the handlevideooffermsg() method there, which is called when an offer message is received from the remote peer. var mediaconstraints = { audio: ...

Web Video Text Tracks Format (WebVTT) - Web APIs
tting and between each setting. a setting's name and value are separated by a colon. the settings are case sensitive so use lower case as shown. there are five cue settings: vertical indicates that the text will be displayed vertically rather than horizontally, such as in some asian languages. table 1 - vertical values vertical:rl writing direction is right to left vertical:lr writing direction is left to right line specifies where text appears vertically. if vertical is set, line specifies where text appears horizontally. value can be a line number. the line height is the height of the first line of the cue as it appears on the video. positive numbers indicate top down. negati...
...ionalign, text, size and align can be used to alter the cue and its formation, just like we can alter the objects form, shape and visibility in html using css. but the vttcue interface is within the webvtt provides the vast range of adjustment variables which can be used directly to alter the cue. ...
...uto" }; enum directionsetting { "" /* horizontal */, "rl", "lr" }; enum linealignsetting { "start", "center", "end" }; enum positionalignsetting { "line-left", "center", "line-right", "auto" }; enum alignsetting { "start", "center", "end", "left", "right" }; [constructor(double starttime, double endtime, domstring text)] interface vttcue : texttrackcue { attribute vttregion? ...
...vtt are those which are used to alter the cue or region as the attributes for both interfaces are different. we can categorize them for better understanding relating to each interface in webvtt: vttcue the methods which are available in this interface are: getcueashtml to get the html of that cue. vtt constructor for creating new objects of cues. autokeyword. directionsetting: to set the direction of caption or text in a file. linealignment: to adjust the line alignment. positionalignsetting: to adjust the position of text. vttregion the methods used for region are listed below along with description of their functionality: scrollsetting: for adjusting the scrolling setting of all nodes present in given region. ...

Geometry and reference spaces in WebXR - Web APIs
also, by extension, can be applied to a collection of points. since an object is represented by some number of polygons made up of a number of points in space, applying the same transform to every point that makes up the object will apply that same transform to the entire object overall. transforms can also be applied to vectors, since vectors are described using a coordinate value to define the direction and magnitude of the vector. on the origins of spaces a complete xr-enhanced scene—whether virtual or augmented—is a composite of anywhere from one to potentially dozens of frames of reference. each object within the scene that needs to directly exchange position and orientation data with the webxr system needs to be able to report that information in a way that can be understood and adapte...
...r of the space, which is the position at which those the three axes meet. this is the native origin of the space, corresponding to a specific physical location in the user's environment. each space has its own native origin, which is tracked by the xr device's tracking system. this may be different from the effective origin, which is the origin point for the space's local coordinate system. the directionality of the coordinate system can be seen in the following diagram: an xrrigidtransform called the origin offset is used to transform points from the space's own effective coordinate system to the xr device's native coordinate system. the origin offset is initially simply an identity transform, since typically the two origins are aligned when the space is first established. however, as changes...
...ce. the y-axis is positive extending upward from the origin toward the top of the screen, reaching +1.0 at the top of the world space. values of y less than 0 are found below the origin, extending toward the bottom of the screen and reaching -1.0 at the bottom of the world's space. the z-axis extends from the origin outward from the screen, reaching +1.0 at the closest point to the user in that direction. negative values of z extend away from the user further into the screen, with the farthest away point in the world having a z of -1.0. every object is, at the simplest level, a set of polygons defined by points in 3d space and an offset transform, indicating how to move and rotate the object to position it at the desired point in space. if the offset transform is an identity matrix, the object ...
...ence space internally knows how to map the coordinates of the controller to the headset's coordinates, so webxr can translate coordinates back and forth for you. once created, an xrreferencespace guarantees a certain level of support for motion and orientation tracking, and provides a mechanism for obtaining an xrviewerpose from which you can get a matrix which represents the position and facing direction of the space relative to the world space, if the space represents a viewer such as the user's headset, an observer's headset, or a virtual camera. all of this is the browser's responsibility to handle, providing consistent behavior regardless of how capable each of the underlying reference spaces are. no matter how powerful or simple the individual xr device is, code written using webxr will sti...

Relationship of flexbox to other layout methods - CSS: Cascading Style Sheets
e used to create gaps between items. writing modes in the basic concepts of flexbox article, i explained that flexbox is writing mode aware. writing modes are fully detailed in the css writing modes specification, which details how css supports the various different writing modes that exist internationally. we need to be aware of how this will impact our flex layouts as writing mode changes the direction that blocks are laid out in our document. understanding block and inline directions is key to new layout methods. it is worth noting that we might want to change the writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. see this article for a full description of writing modes and ways to use them, both for content in other langua...
...writing mode of our document for reasons other than publishing content in a language that uses a different writing mode. see this article for a full description of writing modes and ways to use them, both for content in other languages and for creative reasons. the writing modes the writing modes specification defines the following values of the writing-mode property, which serve to change the direction that blocks are laid out on the page, to match the direction that blocks lay out when content is formatted in that particular writing mode. you can change the live example below to these modes in order to see what happens to the flex layout. horizontal-tb vertical-rl vertical-lr sideways-rl sideways-lr note that sideways-rl and sideways-lr have support only in firefox currently. there...
...iting modes in your layout, carefully testing the results is advisable — not least because it would be easy to make things hard to read! note that you would not normally use css and the writing-mode property to change an entire document to another writing mode. this would be done via html, by adding a dir and lang attribute to the html element to indicate the document language and default text direction. this would mean that the document would display correctly even if css did not load. flexbox and other layout methods the flexbox specification contains a definition of what happens if an item uses another layout method and then becomes a flex item. for example, if an item is floated and then its parent becomes a flex container. or, how a flex container behaves as part of layout. an element se...
...ine things up with each other. if we create a very similar layout using grid, we can control the layout in both rows and columns. these examples point to another key difference between these layout methods. in grid layout you do the majority of sizing specification on the container, setting up tracks and then placing items into them. in flexbox, while you create a flex container and set the direction at that level, any control over item sizing needs to happen on the items themselves. in some cases you could happily use either layout method, but as you become confident with both you will find each one suiting different layout needs, and you will end up with both methods in your css. there is rarely a right or wrong answer. as a rule of thumb, if you are adding widths to flex items in order t...

Block and inline layout in normal flow - CSS: Cascading Style Sheets
creates separation between the elements. we see this with a very simple layout of two paragraphs, to which i have added a border. the default browser stylesheet adds spacing between the paragraphs by way of adding a margin to the top and bottom. if we set margins on the paragraph element to 0 then the borders will touch. by default block elements will consume all of the space in the inline direction, so our paragraphs spread out and get as big as they can inside their containing block. if we give them a width, they will continue to lay out one below the other - even if there would be space for them to be side by side. each will start against the start edge of the containing block, so the place at which sentences would begin in that writing mode. margin collapsing the spec explains that m...
...ead more about margin collapsing in our article mastering margin collapsing. note: if you are not sure whether margins are collapsing, check the box model values in your browser devtools. this will give you the actual size of the margin which can help you to identify what is happening. elements participating in an inline formatting context inline elements display one after the other in the direction that sentences run in that particular writing mode. while we don’t tend to think of inline elements as having a box, as with everything in css they do. these inline boxes are arranged one after the other. if there is not enough space in the containing block for all of the boxes a box can break onto a new line. the lines created are known as line boxes. in the following example, we have three i...
... are known as line boxes. in the following example, we have three inline boxes created by a paragraph with a <strong> element inside it. the boxes around the words before the <strong> element and after the <strong> element are referred to as anonymous boxes, boxes introduced to ensure that everything is wrapped in a box, but ones that we cannot target directly. the line box size in the block direction (so the height when working in english) is defined by the tallest box inside it. in the next example, i have made the <strong> element 300%; that content now defines the height of the line box on that line. find out more about how block and inline boxes behave in our guide to the visual formatting model. the display property and flow layout in addition to the rules existing in css2.1, new le...
...e other elements in the same formatting context. it also defines the inner display type, which dictates how boxes inside this element behave. we can see this very clearly when considering a flex layout. in the example below i have a <div>, which i have given display: flex. the flex container behaves like a block element: it displays on a new line and takes up all of the space it can in the inline direction. this is the outer display type of block. the flex items however are participating in a flex formatting context, because their parent is the element with display: flex, which has an inner display type of flex, establishing the flex formatting context for the direct children. therefore you can think of every box in css working in this way. the box itself has an outer display type, so it knows ...

Using CSS gradients - CSS: Cascading Style Sheets
that progress in a straight line. a basic linear gradient to create the most basic type of gradient, all you need is to specify two colors. these are called color stops. you must have at least two, but you can have as many as you want. <div class="simple-linear"></div> div { width: 120px; height: 120px; } .simple-linear { background: linear-gradient(blue, pink); } changing the direction by default, linear gradients run from top to bottom. you can change their rotation by specifying a direction. <div class="horizontal-gradient"></div> div { width: 120px; height: 120px; } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner. <div class="diagonal-gradi...
... } .horizontal-gradient { background: linear-gradient(to right, blue, pink); } diagonal gradients you can even make the gradient run diagonally, from corner to corner. <div class="diagonal-gradient"></div> div { width: 200px; height: 100px; } .diagonal-gradient { background: linear-gradient(to bottom right, blue, pink); } using angles if you want more control over its direction, you can give the gradient a specific angle. <div class="angled-gradient"></div> div { width: 120px; height: 120px; } .angled-gradient { background: linear-gradient(70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. negative angles run in th...
...gradient a specific angle. <div class="angled-gradient"></div> div { width: 120px; height: 120px; } .angled-gradient { background: linear-gradient(70deg, blue, pink); } when using an angle, 0deg creates a vertical gradient running bottom to top, 90deg creates a horizontal gradient running left to right, and so on in a clockwise direction. negative angles run in the counterclockwise direction. declaring colors & creating effects all css gradient types are a range of position-dependent colors. the colors produced by css gradients can vary continuously with position, producing smooth color transitions. it is also possible to create bands of solid colors, and hard transitions between two colors. the following are valid for all gradient functions: using more than two colors you do...
...the conic-gradient syntax is similar to the radial-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient, and the color-stops are percentages or degrees: absolute lengths are not valid. in a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. with conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. similar to radial gradients, you can position the center of the gradient. similar to linear gradients, you can change the gradient angle. a basic conic gradient as with linear and radial gradients, all you need to create a conic gradient are two colors. by default...

grid-auto-flow - CSS: Cascading Style Sheets
been filled by later items. ...
..."row" : "column"; if (dense.checked) { gridautoflow += " dense"; } grid.style.gridautoflow = gridautoflow; } result specifications specification status comment css grid layoutthe definition of 'grid-auto-flow' in that...
... candidate recommen...
... candidate recommendation initial definition ...

resize - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* keyword values */ resize: none; resize: both; resize: horizontal; resize: vertical; resize: block; resize: inline; /* global values */ resize: inherit; resize: initial; resize: unset; the resize property is specified as a single keyword value from the list below. values none the element offers no user-controllable method for resizing it. ...
...nset; the resize property is specified as a single keyword value from the list below. values none the element offers no user-controllable method for resizing it. both the element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically. horizontal the element displays a mechanism for allowing the user to resize it in the horizontal direction. ...
...the element offers no user-controllable method for resizing it. both the element displays a mechanism for allowing the user to resize it, which may be resized both horizontally and vertically. horizontal the element displays a mechanism for allowing the user to resize it in the horizontal direction. vertical the element displays a mechanism for allowing the user to resize it in the vertical direction. block the element displays a mechanism for allowing the user to resize it in the block direction (either horizontally or vertically, depending on the writing-mode and direction value). inline the element displays a mechanism for allowing the user to resize it in the inline direction (either horizontally or vertically, depending on the writing-mode and direction value). resize does not ...
... <textarea>type some text here.</textarea> css textarea { resize: none; /* disables resizability */ } result using resize with arbitrary elements you can use the resize property to make any element resizable. in the example below, a resizable <div> contains a resizable paragraph (<p> element). html <div class="resizable"> <p class="resizable"> this paragraph is resizable in all directions, because the css `resize` property is set to `both` on this element. </p> </div> css .resizable { resize: both; overflow: scroll; border: 1px solid black; } div { height: 300px; width: 300px; } p { height: 200px; width: 200px; } result specifications specification status comment css logical properties and values level 1the definition of ...

<input type="password"> - HTML: Hypertext Markup Language
owsers now implement mechanisms to warn against insecure login forms; see insecure passwords. value a domstring representing a password, or empty events change and input supported common attributes autocomplete, inputmode, maxlength, minlength, pattern, placeholder, readonly, required, and size idl attributes selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), and setselectionrange() value the value attribute contains a domstring whose value is the current contents of the text editing control being used to enter the password. if the user hasn't entered anything yet, this value is an empty string (""). if the required property is specified, then the password edit box must contain a value o...
...ion validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as seman...
...however, given that the text is obscured, the usefulness of these is somewhat limited. validation if your application has character set restrictions or any other requirement for the actual content of the entered password, you can use the pattern attribute...
...however, given that the text is obscured, the usefulness of these is somewhat limited. validation if your application has character set restrictions or any other requirement for the actual content of the entered password, you can use the pattern attribute to establish a regular ...

dir - HTML: Hypertext Markup Language
the dir global attribute is an enumerated attribute that indicates the directionality of the element's text. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. it can have the following values: ltr, which means left to right and is to be used for languages that are written from the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent decide. ...
...tr, which means left to right and is to be used for languages that are written from the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent decide. ...
...is to be used for languages that are written from the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent decide. it uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. usage notes: this attribute is mandatory for the <bdo> element where it has a different semantic meaning. this attribute is not inherited by the <bdi> element. if not set, its value is auto. this attribute can be overridden by the css properties direction and unicode-bidi, if a css page is active and the element supports these properties. as the dir...
...erties. as the directionality of the text is semantically related to its content and not to its presentation, it is recommended that web developers use this attribute instead of the related css properties when possible. that way, the text will display correctly even on a browser that doesn't support css or has the css deactivated. the auto value should be used for data with an unknown directionality, like data coming from user input, eventually stored in a database. browsers might allow users to change the directionality of <input> and <textarea>s in order to assist with authoring content. chrome and safari provide a directionality option in the contextual menu of input fields while internet explorer and edge use the key combinations ctrl + left shift and ctrl + right shift. firef...

SVG Presentation Attributes - SVG: Scalable Vector Graphics
svg presentation attributes are css properties that can be used as attributes on svg elements. ...
... auto|srgb|linearrgb|<name>|<iri>|inherit; animatable: yes color-rendering it provides a hint to the browser about how to optimize its color interpolation and compositing operations. value: auto|optimizespeed|optimizequality|inherit; animatable: yes cursor it specifies the mouse cursor displayed when the mouse pointer is over an element. value: <funciri>|<keywords>|inherit; animatable: yes direction it specifies the base writing direction of text. value: ltr|rtl|inherit; animatable: yes display it allows to control the rendering of graphical or container elements. value: see css display; animatable: yes dominant-baseline it defines the baseline used to align the box’s text and inline-level contents. value: auto|text-bottom|alphabetic|ideographic|middle|central| mathematical|hanging...
...ther a font should be used with some of their variation such as small caps or ligatures. value: see css font-variant; animatable: yes font-weight it specifies the weight (or boldness) of the font. value: normal|bold|lighter|bolder|100|200|300|400|500|600|700|800|900; animatable: yes glyph-orientation-horizontal deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is horizontal. value: <angle>|inherit; animatable: no glyph-orientation-vertical deprecated since svg 2 it controls glyph orientation when the inline-progression-direction is vertical. value: auto|<angle>|inherit; animatable: no image-rendering it provides a hint to the browser about how to make speed vs. quality tradeoffs as it performs image processing. value: auto|optimizequality|optimi...
... vector effect to use when drawing an object. value: default|non-scaling-stroke|inherit|<uri>; animatable: yes visibility lets you control the visibility of graphical elements. value: visible|hidden|collapse|inherit; animatable: yes word-spacing specifies spacing behavior between words. value: <length>|inherit; animatable: yes writing-mode specifies whether the initial inline-progression-direction for a <text> element shall be left-to-right, right-to-left, or top-to-bottom. value: lr-tb|rl-tb|tb-rl|lr|rl|tb|inherit; animatable: yes ...

text-anchor - SVG: Scalable Vector Graphics
"3" fill="red" /> <style><![cdata[ text { font: bold 36px verdana, helvetica, arial, sans-serif; } ]]></style> </svg> usage notes default value start value start | middle | end animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position. ...
...ult value start value start | middle | end animatable yes start the rendered characters are aligned such that the start of the text string is at the initial current text position. for an element with a direction property value of ltr (typical for most european languages), the left side of the text is rendered at the initial text position. for an element with a direction property value of rtl (typical for arabic and hebrew), the right side of the text is rendered at the initial text position. for an element with a vertical primary text direction (often typical for asian text), the top side of the text is rendered at the initial text position. middle the rendered characters are aligned such that the middle of the text string is at the current text position. (for...
... start of the text string and the end of the text string is determined. then, the text string is mapped onto the path with this midpoint placed at the current text position.) end the rendered characters are shifted such that the end of the resulting rendered text (final current text position before applying the text-anchor property) is at the initial current text position. ...
...t position.) end the rendered characters are shifted such that the end of the resulting rendered text (final current text position before applying the text-anchor property) is at the initial current text position. for an element with a direction property value of ltr (typical for most european languages), the right side of the text is rendered at the initial text position. for an element with a direction property value of rtl (typical for arabic and hebrew), the left side of the text is rendered at the initial text position. for an element with a vertical primary text direction (often typical for asian text), the bottom of the text is rendered at the initial text position. specifications specification status comment scalable vector graphics (svg) 2the definition of ...

Paths - SVG: Scalable Vector Graphics
raw lines. the most generic is the "line to" command, called with l. l takes two parameters—x and y coordinates—and draws a line from the current position to a new position. l x y (or) l dx dy there are two abbreviated forms for drawing horizontal and vertical lines. h draws a horizontal line, and v draws a vertical line. both commands only take one parameter since they only move in one direction. h x (or) h dx v y (or) v dy an easy place to start is by drawing a shape. we will start with a rectangle (the same type that could be more easily made with a <rect> element). it's composed of horizontal and vertical lines only. <svg width="100" height="100" xmlns="http://www.w3.org/2000/svg"> <path d="m 10 10 h 90 v 90 h 10 l 10 10"/> <!-- points --> <circle cx="10" cy="10" ...
...black" fill="transparent"/> <path d="m 130 110 c 120 140, 180 140, 170 110" stroke="black" fill="transparent"/> </svg> the example above creates nine cubic bézier curves. as the curves move toward the right, the control points become spread out horizontally. as the curves move downward, they become further separated from the end points. the thing to note here is that the curve starts in the direction of the first control point, and then bends so that it arrives along the direction of the second control point. several bézier curves can be stringed together to create extended, smooth shapes. often, the control point on one side of a point will be a reflection of the control point used on the other side to keep the slope constant. in this case, a shortcut version of the cubic bézier can be us...
... the page. at its center, two elliptical arcs have been cut out (x radius = 30, y radius = 50). in the first one, the x-axis-rotation has been left at 0, so the ellipse that the arc travels around (shown in gray) is oriented straight up and down. for the second arc, though, the x-axis-rotation is set to -45 degrees. this rotates the ellipse so that it is aligned with its minor axis along the path direction, as shown by the second ellipse in the example image. for the unrotated ellipse in the image above, there are only two different arcs and not four to choose from because the line drawn from the start and end of the arc goes through the center of the ellipse. in a slightly modified example the two ellipses that form the four different arcs can be seen: <svg xmlns="http://www.w3.org/2000/svg" w...
...ths mentioned above are determined by the next two parameter flags. as mentioned earlier, there are still two possible ellipses for the path to travel around and two different possible paths on both ellipses, giving four possible paths. the first parameter is the large-arc-flag. it simply determines if the arc should be greater than or less than 180 degrees; in the end, this flag determines which direction the arc will travel around a given circle. the second parameter is the sweep-flag. it determines if the arc should begin moving at positive angles or negative ones, which essentially picks which of the two circles will be travelled around. the example below shows all four possible combinations, along with the two circles for each case. <svg width="325" height="325" xmlns="http://www.w3.org/200...

The Box Model - Archive of obsolete content
n make an hbox have vertical orientation and viceversa, although that isn't very useful. the css property may be useful on some occasions, but using the orient attribute is not recommended because it mixes content and presentation. flexibility an html div is as big as its contents unless you override its dimensions using css. this is similarly the case for xul, except there are two flexibility directions to consider. an hbox is as big as its contents horizontally, but it will occupy all the available space vertically. you can make an hbox flexible horizontally with the css property -moz-box-flex or the flex attribute. the same applies to a vbox, but in the other direction. unlike most style attributes, the flex attribute is considered acceptable to use in xul code. this is because this attribut...
...ed acceptable to use in xul code. this is because this attribute is used much too often, and it would require a great deal of css code to avoid using it. at any rate, it can always be overriden using css, so your extension won't lose skinability because of it. flexibility is defined as a numeric value. the default value for most elements is 0, which means that the element will not stretch in the direction of its orientation, and its size in that dimension will be determined by its contents and padding. if you want an element to be flexible, you should set its flexibility to 1. this makes the element stretch to occupy as much available space there is in the direction of its orientation. if we add flexibility to the hbox in our first example, we get the following result: the box flexes to cover t...
...ce. if you need fix-sized space it's best to use margins and paddings and avoid adding unnecessary nodes to your xul document. alignment xul, unlike html, provides an easy way to align elements both horizontally and vertically. you can either use the align and pack attributes, or the -moz-box-align and -moz-box-pack css properties. packing determines the positioning of the child elements in the direction of the container's orientation. alignment determines the positioning in the other direction. so, in a flexed hbox, having center alignment and end packing results in this: one important thing to notice is that aligment and flexibility can't be mixed in some cases. if you add flexibility to one of the buttons, the packing will no longer be useful, but the alignment still makes a difference. it ...

Index - Archive of obsolete content
up "flexgroup" is used to group flexible elements together and should be set to an integer. elements with a lower flexgroup are flexed first. when those elements have reached their maximum sizes, the elements with the next higher flexgroup are flexed. this process continues until there are no more elements remaining. the same process occurs when decreasing the size, except in the other direction. 7 accelerated xul, xul attribute, xul reference no summary! 8 acceltext xul attributes, xul reference no summary! 9 accessible xul attributes, xul reference no summary! 10 accesskey reference, xul, xul attributes, xul reference, accesskey no summary! 11 activetitlebarcolor xul attributes, xul refer...
... for css styles (e.g. to hide the resizer grippy on maximized windows). ...
...he box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. 1093 autohide no summary! 1094 bbox xul elements, xul reference a horizontal box that is baseline aligned. it is equivalent to using an hbox element with an align attribute set to baseline. 1095 binding needshelp, needstechnicalreview, xul elements, xul refer...

Box Objects - Archive of obsolete content
abel);"/> <button label="button 2" hidden="true"/> <button label="button 3" oncommand="alert('next is: ' + this.boxobject.nextsibling.label);"/> <button label="button 4" collapsed="true"/> </hbox> box ordering attributes when a xul box is laid out on a window, the elements are ordered according to a number of properties, for instance the orientation, their ordinal group and their direction. orient attribute the orientation is commonly modified using the orient attribute. there is also a corresponding css property -moz-box-orient which may be used instead, depending on the situation. this attribute was explained earlier in the section on boxes. ordinal attribute the ordinal attribute on an element may be used to specify the ordinal group of the element, or you can use the css proper...
... row. items with the same ordinal value appear in the same order as in the source. if you then press the button labeled one again, its ordinal will increase to 3 and will move to the end. finally, pressing the button labeled three will increase its ordinal to 2 and it will appear in between the other two buttons. dir attribute the final box ordering attribute is the dir attribute, or the -moz-box-direction css property. if this is set to reverse, all of the children in the box are displayed in reverse order. in a horizontal box, the elements will be displayed from right to left; in a vertical box, the elements will be displayed from bottom to top. here is an example: example 5 : source view <hbox dir="reverse"> <button label="left"/> <button label="center"/> <button label="right"/> </hbox> n...
...next, we'll find out how to use xpcom objects from xul and scripts. « previousnext » ...

treecol - Archive of obsolete content
column. you can also place splitter elements between the columns to allow column resizing. you should always place an id attribute on a treecol element to ensure that the column positioning is handled properly. more information is available in the xul tutorial. attributes crop, cycler, dragging, editable, fixed, hidden, hideheader, ignoreincolumnpicker, label, primary, sort, sortactive, sortdirection, src, type, width properties accessibletype style classes treecol-image examples this example shows a checkbox in the first column, requires the style below. <tree flex="1" editable="true"> <treecols> <treecol label="active" type="checkbox" editable="true"/> <treecol label="name" flex="1" /> </treecols> <treechildren> <treeitem> <treerow> <treecel...
...nk the css file to your xul file. reload the page to see the checkbox. if you want, you can also style the tree using css. attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...
...s whether the column picker allows the user to deselect this column. sort type: uri or xml attribute set this to a rdf property or xml attribute to have the data in the column sorted based on that property. the property will usually be the same as that of the cell label. sortactive type: boolean this should be set to true for the column which should be sorted by default. sortdirection type: one of the values below set this attribute to set the direction that template-generated content is sorted. use the sortresource attribute to specify the sort key. ascending the data is sorted in ascending order. descending the data is sorted in descending order. natural the data is sorted in natural order, which means the order that it is stored in. src type: uri ...

Explaining basic 3D theory - Game development
is a point in space having its own 3d position in the coordinate system and usually some additional information that defines it. every vertex is described by these attributes: position: identifies it in a 3d space (x, y, z). color: holds an rgba value (r, g and b for the red, green, and blue channels, alpha for transparency — all values range from 0.0 to 1.0). normal: a way to describe the direction the vertex is facing. texture: a 2d image that the vertex can use to decorate the surface it is part of instead of a simple color. you can build geometry using this information — here is an example of a cube: a face of the given shape is a plane between vertices. for example, a cube has 8 different vertices (points in space) and 6 different faces, each constructed out of 4 vertices. a nor...
...ed — you have to place the objects first, configure the camera, and then take the shot. there are four stages to this processing: the first one involves arranging the objects in the world, and is called model transformation. then there's view transformation which takes care of positioning and setting the orientation of the camera in the 3d space. the camera has three parameters — location, direction, and orientation — which have to be defined for the newly created scene. projection transformation (also called perspective transformation) then defines the camera settings. it sets up what can be seen by the camera — the configuration includes field of view, aspect ratio and optional near and far planes. read the camera paragraph in the three.js article to learn about those. the last s...
...n or the texture image is different from the displayed fragment — it will be minified or magnified accordingly. lighting the colors we see on the screen is a result of the light source interacting with the surface colors of the object's material. light might be absorbed or reflected. the standard phong lighting model implemented in webgl has four basic types of lighting: diffuse: a distant directional light, like the sun. specular: a point of light, just like a light bulb in a room or a flash light. ambient: the constant light applied to everything on the scene. emissive: the light emitted directly by the object. output merging during the output manipulation stage all the fragments of the primitives from the 3d space are transformed into a 2d grid of pixels that are then printed out on...

Index - MDN Web Docs Glossary: Definitions of Web-related terms
rmat by translating it into a radix-64 representation. the term base64 originates from a specific mime content transfer encoding. 28 baseline css, glossary, svg, alignment, typography the baseline is a term used in european and west asian typography meaning an imaginary line upon which the characters of a font rest. 29 bidi accessibility, glossary bidi (bidirectional) refers to a document containing both right-to-left and left-to-right text. even when both directionalities occur in the same paragraph, the text in each language must appear in its proper directionality. 30 bigint bigint, glossary, javascript, reference, arbitrary precision format in javascript, bigint is a numeric data type that can represent integers in the arbitrary pre...
...wler, glossary, infrastructure a web crawler is a program, often called a bot or robot, which systematically browses the web to collect data from webpages. typically search engines (e.g. google, bing, etc.) use crawlers to build indexes. 94 cross axis css, glossary, cross axis, flexbox the cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns. 95 cross-site scripting cross site scripting, dom, glossary, security, xss, exploit cross-site scripting (xss) is a security exploit which allows an attacker to inject into a website malicious client-side code. this code is executed by the victims and lets the attackers bypass access controls and imperson...
...tween the software’s business logic and display. this "separation of concerns" provides for a better division of labor and improved maintenance. some other design patterns are based on mvc, such as mvvm (model-view-viewmodel), mvp (model-view-presenter), and mvw (model-view-whatever). 260 main axis css, glossary, main axis, flexbox the main axis in flexbox is defined by the direction set by the flex-direction property. there are four possible values for flex-direction. these are: 261 main thread glossary, reference, web performance the main thread is where a browser processes user events and paints. by default, the browser uses a single thread to run all the javascript in your page, as well as to perform layout, reflows, and garbage collection. this means...

Backgrounds and borders - Learn web development
olor. try adding a background-color property to the example above to see that in action. controlling background-repeat the background-repeat property is used to control the tiling behavior of images. the available values are: no-repeat — stop the background from repeating altogether. repeat-x — repeat horizontally. repeat-y — repeat vertically. repeat — the default; repeat in both directions. try these values out in the example below. we have set the value to no-repeat so you will only see one star. try out the different values — repeat-x and repeat-y — to see what their effects are. sizing the background image in the example above, we have a large image that has ended up being cropped as it is larger than the element it is a background of. in this case we could use the ba...
...d for the longhands: .box { border-top-width: 1px; border-top-style: solid; border-top-color: black; } note: these top, right, bottom, and left border properties also have mapped logical properties that relate to the writing mode of the document (e.g. left-to-right or right-to-left text, or top-to-bottom). we'll be exploring these in the next lesson, which covers handling different text directions. there are a variety of styles that you can use for borders. in the example below we have used a different border style for the four sides of my box. play with the border style, width, and color to see how borders work. rounded corners rounding corners on a box is achieved by using the border-radius property and associated longhands which relate to each corner of the box. two lengths or pe...
...ng mode of your document interacts with your css. ...

Index - Learn web development
sactivelearning hyperlinks, usually called links, are a foundational concept behind the web. to explain what links are, we need to step back to the very basics of web architecture. 27 what do common web layouts contain? beginner, css, design, html, needsactivelearning there's a reason we talk about web design. you start out with a blank page, and you can take it so many directions. and if you don't have much experience, starting out with a blank page might be a bit scary. we have over 25 years' experience and we'll give you some common rules of thumb to help you design your site. 28 what is a domain name? beginner, domain names, infrastructure, intro, needsactivelearning, web domain names are a key part of the internet infrastructure. they provide a h...
...yntax, box model, comments, rules you've covered a lot in this module, so it must feel good to have reached the end! the final step before you move on is to attempt the assessment for the module — this involves a number of related exercises that must be completed in order to create the final design — a business card/gamer card/social media profile. 119 handling different text directions beginner, css, learn, logical properties, writing modes the concepts explained in this lesson are becoming increasingly important in css. an understanding of the block and inline direction — and how text flow changes with a change in writing mode — will be very useful going forward. it will help you in understanding css even if you never use a writing mode other than a horizontal o...
...ng of some of the values and units that we looked at in the lesson on the cascade and inheritance. 128 test your skills: writing modes and logical properties beginner, css the aim of this task is to help you check your understanding of writing modes and logical properties. the things you need to know to complete these tasks are covered in the lesson on handling different text directions. 129 test your skills: backgrounds and borders assessment, beginner, learn, skill test, backgrounds, borders this aim of this skill test is to get you working with css backgrounds and borders using the skills you have learned in the previous lesson. 130 test your skills: sizing beginner, css, example the aim of this task is to help you check your underst...

The Firefox codebase: CSS Guidelines
css could be written cleanly without the css variable(s) and then think of how the css variable could improve that css. using variables use the variable according to its naming do this: xul|tab:hover { background-color: var(--in-content-box-background-hover); } not this: #certificateerrordebuginformation { background-color: var(--in-content-box-background-hover); } localization text direction for margins, padding and borders, use inline-start/inline-end rather than left/right. example: use margin-inline-start: 3px; instead of margin-left: 3px. for rtl-aware positioning (left/right), use inset-inline-start/inset-inline-end. for rtl-aware float layouts, float: inline-start|inline-end can be used instead of float: left|right. the rtl-aware equivalents of border-{top/bottom}-{left...
...ab content's scrollbar still shows on the right in rtl, an overflow scrollbar will show on the left. write padding: 0 3px 4px; instead of padding: 0 3px 4px 3px;. this makes it more obvious that the padding is symmetrical (so rtl won't be an issue). note: see css logical properties and values for more information. testing to test for rtl layouts, you can go to about:config and set intl.uidirection to -1. writing cross-platform css firefox supports many different platforms and each of those platforms can contain many different configurations: windows 7, 8 and 10 default theme aero basic (windows 7, 8) windows classic (windows 7) high contrast (all versions) linux macos file structure the browser/ directory contains styles specific to firefox the toolkit/ dir...
...de or content-side, it is useful to know that certain css properties are going to lean one way or the other: color - 99% of the time it will be theme css, overflow - 99% content. 99% theme 70% theme 70% content 99% content font-*, color, *-color, border-*, -moz-appearance [1] line-height, padding, margin cursor, width, max-width, top, bottom [2], etc overflow, direction, display, *-align, align-*, *-box-*, flex-*, order if some css is layout or functionality related, then it is likely content css. if it is esthetics related, then it is likely theme css. when importing your stylesheets, it's best to import the content css before the theme css, that way the theme values get to override the content values (which is probably what you want), and you're going ...

WebRequest.jsm
listener, and assign it the desired value, as detailed in the table below: operation available in return property cancel onbeforerequest cancel boolean value set to true. see some examples of canceling requests. redirect onbeforesendheaders redirecturl string set to the url to redirect the request to. see some examples of redirection. modify request headers onbeforesendheaders requestheaders array of http headers. modify response headers onheadersreceived responseheaders array of http headers. see some examples of canceling, redirecting, and modifying request headers. events the events exported by webrequest.jsm are triggered at the various stages of makin...
...xample "image/png" chrome incompatibilities although this api is modeled on chrome's webrequest extension api, there are some differences. we're working on addressing them, though. filtering by windowid and tabid is not supported. the onauthrequired, onbeforeredirect, and onerroroccurred events are not supported. the "requestbody" instruction in opt_extrainfospec is not supported. redirection is not allowed in onbeforerequest or onheadersreceived, but is allowed in onbeforesendheaders. see bug 1176092. handlerbehaviorchanged() is not supported. requestid is not included in the argument passed to the listener. examples basic examples this example just logs the url for every request initiated: let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); webrequest.
...er(cancelimages, { urls: pattern, types: ["image"] }, ["blocking"]); function cancelimages(e) { console.log("canceling: " + e.url); return {cancel: true}; } redirecting this code replaces, by redirection, all network requests for images that are made to urls under "https://mdn.mozillademos.org/": let {webrequest} = cu.import("resource://gre/modules/webrequest.jsm", {}); cu.import("resource://gre/modules/matchpattern.jsm"); let pattern = new matchpattern("https://mdn.mozillademos.org/*"); webrequest.onbeforesendheaders.addlistener(redirect, { ...

Mozilla internal string guide
utostring, etc). to do this usually requires converting it to an 8-bit string, because that's what printf expects. use: printf("%s\n", ns_convertutf16toutf8(yourstring).get()); sequence of appends without reallocating setcapacity() allows you to give the string a hint of the future string length caused by a sequence of appends (excluding appends that convert between utf-16 and utf-8 in either direction) in order to avoid multiple allocations during the sequence of appends. however, the other allocation-avoidance features of xpcom strings interact badly with setcapacity() making it something of a footgun. setcapacity() is appropriate to use before a sequence of multiple operations from the following list (without operations that are not on the list between the setcapacity() call and operations ...
...tring) insert(string) cut(start, length) replace(start, length, string) truncate(length) setisvoid(true) - make it null. xpconnect will convert void nsastrings to javascript null. beginwriting(iterator) endwriting(iterator) setcapacity() - inform the string about buffer size need before a sequence of calls to append() or converting appends that convert between utf-16 and latin1 in either direction. (don't use if you use appends that convert between utf-16 and utf-8 in either direction.) calling this method does not give you permission to use beginwriting() to write past the logical length of the string. use setlength() or bulkwrite() as appropriate. original document information author: alec flett copyright information: portions of this content are © 1998–2007 by individual mozil...
...eginwriting() to write past the logical length of the string. use setlength() or bulkwrite() as appropriate. ...

nsIDocShell
eloadinfo(out nsidocshellloadinfo loadinfo); void detacheditorfromwindow(); violates the xpcom interface guidelines void finishrestore(); void firepagehidenotification(in boolean isunload); native code only! void fireunloadnotification(); native code only! ...
... internal_load_flags_bypass_classifier 0x10 used to indicate that load_flags_bypass_classifier was passed as one of the flags to loaduri(). internal_load_flags_force_allow_cookies 0x20 used to indicate that load_flags_force_allow_cookies was passed as one of the flags to loaduri(). enumerate_forwards 0 used by getdocshellenumerator()to determine the direction of the enumeration. enumerate_backwards 1 used by getdocshellenumerator()to determine the direction of the enumeration. app_type_unknown 0 this is the default value of the apptype attribute. app_type_mail 1 this is the value of the apptype attribute used by thunderbird and seamonkey to indicate that email messages are displayed in this window. ...
...some browsers, its use is discouraged since it could be removed at any time. try to avoid using it. notify the associated content viewer and all child docshells that they are about to be unloaded. void fireunloadnotification(); parameters none. getdocshellenumerator() get an enumerator over this docshell and its children. nsisimpleenumerator getdocshellenumerator( in long aitemtype, in long adirection ); parameters aitemtype only include docshells of this type, or if typeall, include all child shells. uses types from nsidocshelltreeitem. adirection whether to enumerate forwards or backwards. return value an enumerator over this docshell and its children. getsessionstorageforprincipal() retrieves the session storage object for the supplied principal. nsidomstorage getsessions...

nsIHttpChannel
ons. this should be set to false, for example, if the application knows that the corresponding document is likely to be very large. this attribute is true by default, though other factors may prevent pipelining. this attribute may only be set before the channel is opened. exceptions thrown ns_error_failure if set after the channel has been opened. ...
...the initial value for this attribute may be a configurable preference (depending on the implementation). referrer nsiuri get or set the uri of the http referer: header. ...
...es the number of redirects this channel is allowed to make. if zero, the channel will fail to redirect and will generate a ns_error_redirect_loop failure status. note: an http redirect results in a new channel being created. if the new channel supports nsihttpchannel, then it will be assigned a value to its redirectionlimit attribute one less than the value of the redirected channel's redirectionlimit attribute. the initial value for this attribute may be a configurable preference (depending on the implementation). referrer nsiuri get or set the uri of the http referer: header. this is the address (uri) of the resource from which this channel's uri was obtained (see rfc2616 section 14.36). this attribute may only be set before the channel is opened. ...

Applying styles and colors - Web APIs
urves) with non-zero lengths in a shape are joined together (degenerate segments with zero lengths, whose specified endpoints and control points are exactly at the same position, are skipped). there are three possible values for this property: round, bevel and miter. by default this property is set to miter. note that the linejoin setting has no effect if the two connected segments have the same direction, because no joining area will be added in this case. round rounds off the corners of a shape by filling an additional sector of disc centered at the common endpoint of connected segments. the radius for these rounded corners is equal to half the line width. bevel fills an additional triangular area between the common endpoint of connected segments, and the separate outside rectangular cor...
...age, type) creates and returns a new canvas pattern object. image is a canvasimagesource (that is, an htmlimageelement, another canvas, a <video> element, or the like. type is a string indicating how to use the image. the type specifies how to use the image in order to create the pattern, and must be one of the following string values: repeat tiles the image in both vertical and horizontal directions. repeat-x tiles the image horizontally but not vertically. repeat-y tiles the image vertically but not horizontally. no-repeat doesn't tile the image. it's used only once. we use this method to create a canvaspattern object which is very similar to the gradient methods we've seen above. once we've created a pattern, we can assign it to the fillstyle or strokestyle properties. for example...
... effect; this value doesn't correspond to a number of pixels and is not affected by the current transformation matrix. the default value is 0. shadowcolor = color a standard css color value indicating the color of the shadow effect; by default, it is fully-transparent black. the properties shadowoffsetx and shadowoffsety indicate how far the shadow should extend from the object in the x and y directions; these values aren't affected by the current transformation matrix. use negative values to cause the shadow to extend up or to the left, and positive values to cause the shadow to extend down or to the right. these are both 0 by default. the shadowblur property indicates the size of the blurring effect; this value doesn't correspond to a number of pixels and is not affected by the current trans...

HTMLElement: transitionend event - Web APIs
d when a css transition has completed. in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. examples this code gets an element th...
... if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. specifications specification status comment cs...
...) { message.textcontent = 'transitionstart fired'; }); 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. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. specifications specification status comment css transitionsthe definition of 'transitionend' in that specification. working draft ...

HTMLInputElement.setSelectionRange() - Web APIs
the htmlinputelement.setselectionrange() method sets the start and end positions of the current text selection in an <input> or <textarea> element. optionally, in newer browser versions, you can specify the direction in which selection should be considered to have occurred. this lets you indicate, for example, that the selection was set by the user clicking and dragging from the end of the selected text toward the beginning. this method updates the htmlinputelement.selectionstart, selectionend, and selectiondirection properties in one call. note that accordingly to the whatwg forms spec selectionstart, selectionend properties and setselectionrange method apply only to inputs of types text, search, url, tel and password. chrome, starting from version 33, throws an exception while accessing those...
...and method on the rest of input types. for example, on input of type number: "failed to read the 'selectionstart' property from 'htmlinputelement': the input element's type ('number') does not support selection". if you wish to select all text of an input element, you can use the htmlinputelement.select() method instead. syntax element.setselectionrange(selectionstart, selectionend [, selectiondirection]); parameters if selectionend is less than selectionstart, then both are treated as the value of selectionend. selectionstart the 0-based index of the first selected character. an index greater than the length of the element's value is treated as pointing to the end of the value. selectionend the 0-based index of the character after the last selected character. an index greater than the ...
...the value of selectionend. selectionstart the 0-based index of the first selected character. an index greater than the length of the element's value is treated as pointing to the end of the value. selectionend the 0-based index of the character after the last selected character. an index greater than the length of the element's value is treated as pointing to the end of the value. selectiondirection optional a string indicating the direction in which the selection is considered to have been performed. possible values: "forward" "backward" "none" if the direction is unknown or irrelevant. default value. example click the button in this example to select the third, fourth, and fifth characters in the text box ("zil" in the word "mozilla"). html <input type="text" id="text-box...

HTMLInputElement - Web APIs
ts the beginning index of the selected text. when nothing is selected, this returns the position of the text input cursor (caret) inside of the <input> element. selectionend unsigned long: returns / sets the end index of the selected text. when there's no selection, this returns the offset of the character immediately following the current text input cursor position. selectiondirection string: returns / sets the direction in which selection occurred. possible values are: forward if selection was performed in the start-to-end direction of the current locale backward for the opposite direction none if the direction is unknown size unsigned long: returns / sets the element's size attribute, containing visual size of the control. this value is in pixels unle...
... of type is text or password, in which case, it is an integer number of characters. applies only when type is set to text, search, tel, url, email, or password; otherwise it is ignored. properties not yet categorized defaultvalue string: returns / sets the default value as originally specified in the html that created this object. dirname string: returns / sets the directionality of the element. accesskey string: returns a string containing a single character that switches input focus to the control when pressed. list read only htmlelement object: returns the element pointed by the list attribute. the property may be null if no html element found in the same tree. multiple boolean: returns / sets the element's multiple attribute, ...
..., as well as the blur(), click(), and focus() methods, are now defined on htmlelement. the following properties are now obsolete: align and usemap. the following properties have been added: autocomplete, autofocus, dirname, files, formaction, formenctype, formmethod, formnovalidate, formtarget, height, indeterminate, labels, list, max, min, multiple, pattern, placeholder, required, selectiondirection, selectionend, selectionstart, step, validationmessage, validity, valueasdate, valueasnumber, width, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), setselectionrange(), stepup(), and stepdown(). document object model (dom) level 2 html specificationthe definition of 'htmlinputelement' in that specification. obsolete the size proper...

IDBCursor - Web APIs
note: not to be confused with idbcursorwithvalue which is just an idbcursor interface with an additional value property. the idbcursor interface of the indexeddb api represents a cursor for traversing or iterating over multiple records in a database. the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. the cursor enables an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursor object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web wor...
...able in web workers. properties note: idbcursorwithvalue is an idbcursor interface with an additional value property. idbcursor.source read only returns the idbobjectstore or idbindex that the cursor is iterating. this function never returns null or throws an exception, even if the cursor is currently being iterated, has iterated past its end, or its transaction is not active. idbcursor.direction read only returns the direction of traversal of the cursor. see constants for possible values. idbcursor.key read only returns the key for the record at the cursor's position. if the cursor is outside its range, this is set to undefined. the cursor's key can be any data type. idbcursor.primarykey read only returns the cursor's current effective primary key. if the cursor is currently bein...
... currently being iterated or has iterated outside its range, this is set to undefined. the cursor's primary key can be any data type. idbcursor.request read only returns the idbrequest that was used to obtain the cursor. methods idbcursor.advance() sets the number of times a cursor should move its position forward. idbcursor.continue() advances the cursor to the next position along its direction, to the item whose key matches the optional key parameter. idbcursor.continueprimarykey() sets the cursor to the given index key and primary key given as arguments. idbcursor.delete() returns an idbrequest object, and, in a separate thread, deletes the record at the cursor's position, without changing the cursor's position. this can be used to delete specific records. idbcursor.update() ...

IDBIndex.openCursor() - Web APIs
if the key range is not specified or is null, then the range includes all the records. a success event is always fired on the result object. ...
...to the new idbcursorwithvalue object; the value of the cursor object is set to a structured clone of the referenced value. if no records match the key range then then the result property of the event is set to null. note: this feature is available in web workers. syntax var request = myindex.opencursor(); var request = myindex.opencursor(range); var request = myindex.opencursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this ...
... dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. ...

IDBIndex.openKeyCursor() - Web APIs
if the key range is not specified or is null, then the range includes all the keys. a success event is always fired on the result object. ...
...perty of the event is set to null. note: cursors returned by openkeycursor() do not make the referenced value available as idbindex.opencursor does. this makes obtaining a list of keys much more efficient. note: this feature is available in web workers. syntax var request = myindex.openkeycursor(); var request = myindex.openkeycursor(range); var request = myindex.openkeycursor(range, direction); parameters range optional a key or idbkeyrange to use as the cursor's range. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional the cursor's direction. see idbcursor constants for possible values. return value an idbrequest object on which subsequent events related to this operation are fired. exceptions this ...
... dataerror the key or key range provided contains an invalid key. invalidstateerror the idbindex has been deleted or removed. example in the following example we open a transaction and an object store, then get the index lname from a simple contacts database. ...

Intersection Observer API - Web APIs
the root. the degree of intersection between the target element and its root is the intersection ratio. this is a representation of the percentage of the target element which is visible as a value between 0.0 and 1.0. creating an intersection observer create the intersection observer by calling its constructor and passing it a callback function to be run whenever a threshold is crossed in one direction or the other: let options = { root: document.queryselector('#scrollarea'), rootmargin: '0px', threshold: 1.0 } let observer = new intersectionobserver(callback, options); a threshold of 1.0 means that when 100% of the target is visible within the element specified by the root option, the callback is invoked. intersection observer options the options object passed into the intersection...
...ard or forward through each 25% mark, you would specify the array [0, 0.25, 0.5, 0.75, 1] as the list of thresholds when creating the observer. when the callback is invoked, it receives a list of intersectionobserverentry objects, one for each observed target which has had the degree to which it intersects the root change such that the amount exposed crosses over one of the thresholds, in either direction. you can see if the target currently intersects the root by looking at the entry's isintersecting property; if its value is true, the target is at least partially intersecting the root element or document. this lets you determine whether the entry represents a transition from the elements intersecting to no longer intersecting or a transition from not intersecting to intersecting. note that it...
...ects, one for each threshold which was crossed, and a reference to the intersectionobserver object itself. each entry in the list of thresholds is an intersectionobserverentry object describing one threshold that was crossed; that is, each entry describes how much of a given element is intersecting with the root element, whether or not the element is considered to be intersecting or not, and the direction in which the transition occurred. the code snippet below shows a callback which keeps a counter of how many times elements transition from not intersecting the root to intersecting by at least 75%. for a threshold value of 0.0 (default) the callback is called approximately upon transition of the boolean value of isintersecting. the snippet thus first checks that the transition is a positive one,...

PannerNode.orientationX - Web APIs
the orientationx property of the pannernode interface indicates the x (horizontal) component of the direction in which the audio source is facing, in a 3d cartesian coordinate space. the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and coneoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contained ...
...e louder than if the sound is pointed away from the listener. the audioparam contained by this property is read only; however, you can still change the value of the parameter by assigning a new value to its audioparam.value property. syntax var orientationx = pannernode.orientationx; pannernode.orientationx.value = neworientationx; value an audioparam whose value is the x component of the direction in which the audio source is facing, in 3d cartesian coordinate space. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out ou...
...node(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the ...

PannerNode.orientationY - Web APIs
the orientationy property of the pannernode interface indicates the y (vertical) component of the direction the audio source is facing, in 3d cartesian coordinate space. the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contained by this prope...
...e louder than if the sound is pointed away from the listener. the audioparam contained by this property is read only; however, you can still change the value of the parameter by assigning a new value to its audioparam.value property. syntax var orientationy = pannernode.orientationy; pannernode.orientationy.value = neworientationy; value an audioparam whose value is the y component of the direction the audio source is facing, in 3d cartesian coordinate space. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orienta...
...node(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the ...

PannerNode.orientationZ - Web APIs
the orientationz property of the pannernode interface indicates the z (depth) component of the direction the audio source is facing, in 3d cartesian coordinate space. the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contained by this property...
...e louder than if the sound is pointed away from the listener. the audioparam contained by this property is read only; however, you can still change the value of the parameter by assigning a new value to its audioparam.value property. syntax var orientationz = pannernode.orientationz; pannernode.orientationz.value = neworientationz; value an audioparam whose value is the z component of the direction the audio source is facing, in 3d cartesian coordinate space. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. to help us visualise how the orientation vector affects, we can use the right-hand rule: first, let's start by writing a utility function to figure out our orienta...
...node(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the ...

RTCRtpTransceiverInit - Web APIs
sendencodings optional a list of encodings to allow when sending rtp media from the rtcrtpsender. each entry is of type rtcrtpencodingparameters. ...
... sendencodings optional a list of encodings to allow when sending rtp media from the rtcrtpsender. each entry is of type rtcrtpencodingparameters. ...
... sendencodings optional a list of encodings to allow when sending rtp media from the rtcrtpsender. each entry is of type rtcrtpencodingparameters. ...

WebGL model view projection - Web APIs
asily translates back into a normal point in cartesian space. now what happens if the w component is zero? in javascript the value returned would be as follows. homogeneoustocartesian([10, 4, 5, 0]); this evaluates to: [infinity, infinity, infinity]. this homogeneous coordinate represents some point at infinity. this is a handy way to represent a ray shooting off from the origin in a specific direction. in addition to a ray, it could also be thought of as a representation of a directional vector. if this homogeneous coordinate is multiplied against a matrix with a translation then the translation is effectively stripped out. when numbers are extremely large (or extremely small) on computers they begin to become less and less precise because there are only so many ones and zeros that are used t...
...er of polygons we need to compute and render, we turn this pyramid into the viewing frustum. the two planes we'll use to chop away vertices in order to reduce the polygon count are the near clipping plane and the far clipping plane. in webxr, the near and far clipping planes are defined by specifying the distance from the lens to the closest point on a plane which is perpendicular to the viewing direction. anything closer to the lens than the near clipping plane or farther from it than the far clipping plane is removed. this results in the viewing frustum, which looks like this: the set of objects to be rendered for each frame is essentially created by starting with the set of all objects in the scene. then any objects which are entirely outside the viewing frustum are removed from the set. nex...
...bjects in the scene so they're positioned to simulate the camera's current location and orientation. our code as it stands can move the cube around in world space and project everything to have perspective, but we still can't move the camera. imagine shooting a movie with a physical camera. you have the freedom to place the camera essentially anywhere you wish, and to aim the camera in whichever direction you choose. to simulate this in 3d graphics, we use a view matrix to simulate the position and rotation of that physical camera. unlike the model matrix, which directly transforms the model vertices, the view matrix moves an abstract camera around. in reality, the vertex shader is still only moving the models while the "camera" stays in place. in order for this to work out correctly, the inverse...

WebXR Device API - Web APIs
each of these two images is rendered into a single framebuffer, with the left eye's rendered image on the left and the right eye's viewpoint rendered into the right half of the buffer. once both eyes' perspectives on the scene have been rendered, the resulting framebuffer is delivered to the webxr device to be presented to the user through their headset or other appr...
... takes place. the space's coordinate system has its origin at the a given physical position. xrreferencespace a subclass of xrspace which is used to identify a spatial relationship in relation to the user's physical environment. the xrreferencespace coordinate system is expected to remain unchanged through the lifespan of the xrsession.the world has no boundaries and extends infinitely in every direction. xrboundedreferencespace xrboundedreferencespace extends the xrreferencespace coordinate system to further include support for a finite world with set boundaries. unlike xrreferencespace, the origin must be located on the floor (that is, y = 0 at the floor). the x and z components of the origin are typically presumed to be located at or near the center of the room or surface. xrview represent...
... establishing feature-policy to ensuring the user intends to use the mixed reality presentation before activating it. including other media positional audio in a 3d environment in 3d environments, which may either be 3d scenes rendered to the screen or a mixed reality experience experienced using a headset, it's important for audio to be performed so that it sounds like it's coming from the direction of its source. this guide covers how to accomplish this. playing video in a 3d environment in this guide, we examine how to play video into a 3d scene. this technique can be used in both standard webgl applications presented on a flat computer screen, or in a webxr-generated virtual or augmented reality environment. specifications specification status comment webxr de...

Using the Web Animations API - Web APIs
meet the web animations api the web animations api opens the browser’s animation engine to developers and manipulation by javascript. this api was designed to underlie implementations of both css animations and css transitions, and leaves the door open to future animation effects. ...
... on the web, letting the browser make its own internal optimizations without hacks, coercion, or window.requestanimationframe(). with the web animations api, we can move interactive animations from stylesheets to javascript, separating presentation from behavior. we no longer need to rely on dom-heavy techniques such as writing css properties and scoping classes onto elements to control playback direction. and unlike pure, declarative css, javascript also lets us dynamically set values from properties to durations. for building custom animation libraries and creating interactive animations, the web animations api might be the perfect tool for the job. let's see what it can do! browser support the basic web animations api features discussed in this article are available by default in firefox 48+ ...
... access the animation’s keyframes and timing properties — alicechange.effect.getcomputedtiming() points to alice’s timing object (which is of type computedeffecttiming) — this contains her computedeffecttiming.duration. we can divide her duration in half to get the midpoint for her animation’s timeline, setting her to be normal height. ...

Basic concepts behind Web Audio API - Web APIs
lisations an audio spatialisation (handled by the pannernode and audiolistener nodes in the web audio api) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio. ...
...atialisation (handled by the pannernode and audiolistener nodes in the web audio api) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio. ...
...es in the web audio api) allows us to model the position and behavior of an audio signal at a certain point in space, and the listener hearing that audio. the panner's position is described with right-hand cartesian coordinates; its movement using a velocity vector, necessary for creating doppler effects, and its directionality using a directionality cone.the cone can be very large, e.g. for omnidirectional sources. the listener's position is described using right-hand cartesian coordinates; its movement using a velocity vector and the direction the listener's head is pointing using two direction vectors: up and front. these respectively define the direction of the top of the listener's head, and the direction the listener's nose is pointing, and are at right angles to one another. note:...

Box alignment in Flexbox - CSS: Cascading Style Sheets
t should be read in conjunction with the main box alignment page which details the common features of box alignment across layout methods. basic example in this example, three flex items are aligned on the main axis using justify-content and on the cross axis using align-items. the first item overrides the align-items values set on the group by setting align-self to center. the axes and flex-direction flexbox respects the writing mode of the document, therefore if you are working in english and set justify-content to flex-end this will align the items to the end of the flex container. if you are working with flex-direction set to row, this alignment will be in the inline direction. however, in flexbox you can change the main axis by setting flex-direction to column. in this case, justify-con...
... of the document, therefore if you are working in english and set justify-content to flex-end this will align the items to the end of the flex container. if you are working with flex-direction set to row, this alignment will be in the inline direction. however, in flexbox you can change the main axis by setting flex-direction to column. in this case, justify-content will align items in the block direction. ...
... end of the flex container. if you are working with flex-direction set to row, this alignment will be in the inline direction. however, in flexbox you can change the main axis by setting flex-direction to column. in this case, justify-content will align items in the block direction. therefore it is easiest to think about the main and cross axis when working in flexbox like so: the main axis = direction set by flex-direction = alignment via justify-content the cross axis = runs across the main axis = alignment via align-content, align-self/align-items main axis alignment justify-content cross axis alignment align-self align-items align-content there is no justify-self in flexbox on the main axis, flexbox deals with our content as a group. the amount of space required to lay out t...

Typical use cases of Flexbox - CSS: Cascading Style Sheets
as you lay out your items you want to control the dimensions of the items in that one dimension, or control the spacing between items. ...
...id component. this means that if you have variable amounts of content, the card will stretch to the height of the grid area or flex container. any content inside uses regular block layout, meaning that on a card with less content the footer will rise up to the bottom of the content rather than stick to the bottom of the card. flexbox can solve this. we make the card a flex container, with flex-direction: column. we then set the content area to flex: 1, which is the shorthand for flex: 1 1 0 — the item can grow and shrink from a flex basis of 0. as this is the only item that can grow, it takes up all available space in the flex container and pushes the footer to the bottom. if you remove the flex property from the live example you will see how the footer then moves up to sit directly under the ...
... to the flex-grow factor you have assigned. the flex properties we use to do this are described in detail in the guide controlling ratios of flex items along the main axis. .media .content { flex: 3; padding: 10px; } .image { flex: 1; } flipping the media object to switch the display of the media object so that the image is on the right and the content is on the left we can use the flex-direction property set to row-reverse. the media object now displays the other way around. i have achieved this in the live example by adding a class of flipped alongside the existing .media class. this means you can see how the display changes by removing that class from the html. form controls flexbox is particularly useful when it comes to styling form controls. forms have lots of markup and lots of...

CSS Flexible Box Layout - CSS: Cascading Style Sheets
both horizontal and vertical alignment of the children can be easily manipulated. ...
... space is placed between each item with the left and right items being flush with the edges of the flex container. you can also see that the items are stretching on the cross axis, due to the default value of align-items being stretch. the items stretch to the height of the flex container, making them each appear as tall as the tallest item. reference css properties flex flex-basis flex-direction flex-flow flex-grow flex-shrink flex-wrap order alignment properties the properties align-content, align-self, align-items and justify-content initially appeared in the flexbox specification, but are now defined in box alignment. the flexbox spec now refers to the box alignment specification for up to date definitions. also additional alignment properties are now defined in box alignment...
...em main axis cross axis flex guides basic concepts of flexbox an overview of the features of flexbox relationship of flexbox to other layout methods how flexbox relates to other layout methods, and other css specifications aligning items in a flex container how the box alignment properties work with flexbox. ordering flex items explaining the different ways to change the order and direction of items, and covering the potential issues in doing so. controlling ratios of flex items along the main axis explaining the flex-grow, flex-shrink and flex-basis properties. mastering wrapping of flex items how to create flex containers with multiple lines and control the display of the items in those lines. typical use cases of flexbox common design patterns that are typical flexbox use c...

Box alignment in CSS Grid Layout - CSS: Cascading Style Sheets
start by looking at the two axes that we deal with when aligning things in a grid. the two axes of a grid layout when working with grid layout you have two axes available to align things against – the block axis and the inline axis. the block axis is the axis upon which blocks are laid out in block layout. if you have two paragraphs on your page they display one below the other, so it is this direction we describe as the block axis. the inline axis runs across the block axis, it is the direction in which text in regular inline flow runs. we are able to align the content inside grid areas, and the grid tracks themselves on these two axes. aligning items on the block axis the align-self and align-items properties control alignment on the block axis. when we use these properties, we are ...
...y-content and place-content are: normal start end center stretch space-around space-between space-evenly baseline first baseline last baseline in the below example i have a grid container of 500 pixels by 500 pixels. i have defined 3 row and column tracks each of 100 pixels with a 10 pixel gutter. this means that there is space inside the grid container both in the block and inline directions. the align-content property is applied to the grid container as it works on the entire grid. the default behavior in grid layout is start, which is why our grid tracks are in the top left corner of the grid, aligned against the start grid lines: * {box-sizing: border-box;} .wrapper { border: 2px solid #f76707; border-radius: 5px; background-color: #fff4e6; } .wrapper > div { ...
... <div class="item2">item 2</div> <div class="item3">item 3</div> <div class="item4">item 4</div> </div> you can see how the item is aligned by using the firefox grid highlighter: alignment and writing modes in all of these examples i have been working in english, which is a left-to-right language. this means that our start lines are top and left of our grid when thinking in physical directions. css grid layout, and the box alignment specification are designed to work with writing modes in css. this means that if you are working in a right to left language, such as arabic, the start of the grid would be the top and right, so the default of justify-content: start would be for grid tracks to start on the right hand side of the grid. setting auto margins, using margin-right or margin-le...

CSS Logical Properties and Values - CSS: Cascading Style Sheets
the physical meaning of these terms depends on the writing mode. ...
...the physical meaning of these terms depends on the writing mode. ...
...the physical meaning of these terms depends on the writing mode. block dimension the dimension perpendicular to the flow of text within a line, i.e., the vertical dimension in horizontal writing modes, and the horizontal dimension in vertical writing modes. for standard english text, it is the vertical dimension. ...

animation-fill-mode - CSS: Cascading Style Sheets
on-fill-mode: both, forwards, none; values none the animation will not apply any styles to the target when it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. forwards the target will retain the computed values set by the last keyframe encountered during execution. ...
...ion will not apply any styles to the target when it's not executing. the element will instead be displayed using any other css rules applied to it. this is the default value. forwards the target will retain the computed values set by the last keyframe encountered during execution. ...
... alternate odd 100% or to alternate-reverse even 100% or to alternate-reverse odd 0% or from backwards the animation will apply the values defined in the first relevant keyframe as soon as it is applied to the target, and retain this during the animation-delay period. the first relevant keyframe depends on the value of animation-direction: animation-direction first relevant keyframe normal or alternate 0% or from reverse or alternate-reverse 100% or to both the animation will follow the rules for both forwards and backwards, thus extending the animation properties in both directions. note: when you specify multiple comma-separated values on an animation-* prope...

box-lines - CSS: Cascading Style Sheets
after being reduced to their minimum widths, then children are moved one by one onto a new line, until the elements remaining on the previous line fit. this process can repeat to an arbitrary number of lines. if a line contains only a single element that doesn't fit, then the element should stay on that line and overflow out of the box. the later lines are placed below the earlier lines in normal direction boxes and above in reverse direction boxes. the height of a line is the height of the largest child in that line. no additional space appears between the lines apart from the margins on the largest elements in each line. for calculating the height of a line, margins with a computed value of auto should be treated as having a value of 0. a similar process occurs for children in a vertical box. la...
... once the number of lines has been determined, elements with a computed value for box-flex other than 0 stretch as necessary in an attempt to fill the remaining space on the lines. ...
...that line. no additional space appears between the lines apart from the margins on the largest elements in each line. for calculating the height of a line, margins with a computed value of auto should be treated as having a value of 0. a similar process occurs for children in a vertical box. later lines in normal direction boxes are placed to the right of earlier lines and to the left in reverse direction boxes. once the number of lines has been determined, elements with a computed value for box-flex other than 0 stretch as necessary in an attempt to fill the remaining space on the lines. each line computes flexes independently, so only elements on that line are considered when evaluating box-flex and box-flex-groups. the packing of elements in a line, as specified by the box-pack property, is al...

<easing-function> - CSS: Cascading Style Sheets
tly, and then progressively slows down towards the end. this keyword represents the easing function cubic-bezier(0.0, 0.0, 0.58, 1.0). the steps() class of easing functions the steps() functional notation defines a step function dividing the domain of output values in equidistant steps.this subclass of step functions are sometimes also called staircase functions. ...
...of easing functions the steps() functional notation defines a step function dividing the domain of output values in equidistant steps.this subclass of step functions are sometimes also called staircase functions. syntax steps(number_of_steps, direction) where: number_of_steps is a strictly positive <integer>, representing the amount of equidistant treads composing the stepping function. ...
...-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. instead, holding at both the 0% mark and the 100% mark, each for 1/n of the duration start is the equivalent of jump-start end is the equivalent of jump-end end is the default. steps( n, <direction> ) steps(2, jump-start) steps(2, start) steps(4, jump-end) steps(4, end) steps(5, jump-none) steps(3, jump-both) steps-start the equivalent of steps(1, jump-start) steps-end the equivalent of steps(1, jump-end) step-start the animation jumps immediately to its final state, where it stays until the end. this keyword represents the easing funct...

offset-path - CSS: Cascading Style Sheets
url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape'...
...-box; offset-path: stroke-box; /* global values */ offset-path: inherit; offset-path: initial; offset-path: unset; values ray() taking up to three values, defines a path that is a line segment starting from the position of the box and proceeds in the direction defined by the specified angle similar to the css gradient angle where 0deg is up, with positive angles increasing in the clockwise direction, with the size value being similar to the css radial gradient size values from closest-side to farthest-corner, and the keyterm contain. url() references the id of an svg shape -- circle, ellipse, line, path, polygon, polyline, or rect -- using the shape's geometry as the path. <basic-shape> specifies a css shape including circle(), ellipse(), inset(), polygon(), or path(). path() a p...
...cription this property defines a path an animated element can follow. an offset path is either a specified path with one or multiple sub-paths or the geometry of a not-styled basic shape. the element’s exact position on the offset path is determined by the offset-distance property. each shape or path must define an initial position for the computed value of 0 for offset-distance and an initial direction which specifies the rotation of the object to the initial position. early versions of the spec called this property motion-path. it was changed to offset-path because the property describes static positions, not motion. formal definition initial valuenoneapplies totransformable elementsinheritednocomputed valueas specifiedanimation typeas <angle>, <basic-shape> or <path()>creates stacking cont...

place-content - CSS: Cascading Style Sheets
the align-content and justify-content properties) in a relevant layout system such as grid or flexbox. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...</div> <div class="large"></div> </div> <code>writing-mode:</code><select id="writingmode"> <option value="horizontal-tb" selected>horizontal-tb</option> <option value="vertical-rl">vertical-rl</option> <option value="vertical-lr">vertical-lr</option> <option value="sideways-rl">sideways-rl</option> <option value="sideways-lr">sideways-lr</option> </select><code>;</code><br/> <code>direction:</code><select id="direction"> <option value="ltr" selected>ltr</option> <option value="rtl">rtl</option> </select><code>;</code><br/> <code>place-content:</code><select id="aligncontentalignment"> <option value="normal">normal</option> <option value="first baseline">first baseline</option> <option value="last baseline">last baseline</option> <option value="baseline">baseline</option>...
...); aligncontentalignment.addeventlistener("change", update); var justifycontentalignment = document.getelementbyid("justifycontentalignment"); justifycontentalignment.addeventlistener("change", update); var writingm = document.getelementbyid("writingmode"); writingm.addeventlistener("change", function (evt) { document.getelementbyid("container").style.writingmode = evt.target.value; }); var direction = document.getelementbyid("direction"); direction.addeventlistener("change", function (evt) { document.getelementbyid("container").style.direction = evt.target.value; }); css #container { display: flex; height:240px; width: 240px; flex-wrap: wrap; background-color: #8c8c8c; writing-mode: horizontal-tb; /* can be changed in the live sample */ direction: ltr; /* can be changed ...

place-self - CSS: Cascading Style Sheets
the align-self and justify-self properties) in a relevant layout system such as grid or flexbox. if the second value is not present, the first value is also used for it. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ss axis. flex-start the cross-start margin edge of the flex item is flushed with the cross-start edge of the line. flex-end the cross-end margin edge of the flex item is flushed with the cross-end edge of the line. center the flex item's margin box is centered within the line on the cross-axis. if the cross-size of the item is larger than the flex container, it will overflow equally in both directions. baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. stretch if ...
...defaults — which causes the grid items to stretch across the entire width of their cells. the second, third, and fourth grid items are then given different values of place-self, to show how these override the default placements. these values cause the grid items to span only as wide/tall as their content width/height, and align in different positions across their cells, in the block and inline directions. html <article class="container"> <span>first</span> <span>second</span> <span>third</span> <span>fourth</span> </article> css html { font-family: helvetica, arial, sans-serif; letter-spacing: 1px; } article { background-color: red; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 80px; grid-gap: 10px; width: 300px; } span:nth-child(2) { place-self: ...

<position> - CSS: Cascading Style Sheets
er line between two edges. depending on the context, center represents either the center between the left and right edges, or the center between the top and bottom edges. if specified, an offset can be either a relative <percentage> value or an absolute <length> value. positive values are offset towards the right or the bottom, whichever is appropriate. negative values are offset in the opposite directions. if only a single offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center. /* 1-value syntax */ keyword /* either the horizontal or vertical position; the other axis defaults to center */ value /* the position on the x-axis; the y-axis defaults to 50% */ /* 2-value syntax */ keyword keyword /* ...
...e offset value is specified, it defines the x-coordinate, with the value for the other axis defaulting to center. ...
...| [ [ left | right ] [ <length> | <percentage> ] ] && [ [ top | botto...

text-overflow - CSS: Cascading Style Sheets
thub.com/mdn/interactive-examples and send us a pull request. the text-overflow property doesn't force an overflow to occur. to make text overflow its container you have to set other css properties: overflow and white-space. for example: overflow: hidden; white-space: nowrap; the text-overflow property only affects content that is overflowing a block container element in its inline progression direction (not text overflowing at the bottom of a box, for example). syntax the text-overflow property may be specified using one or two values. if one value is given, it specifies overflow behavior for the end of the line (the right end for left-to-right text, the left end for right-to-left text). if two values are given, the first specifies overflow behavior for the left end of the line, and the secon...
...s">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p class="overflow-string">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> result note: live results in the following table may be shown incorrectly due to a limitation of the mdn editor which removes the all contents of style attributes which have text-overflow properties with string value. ...
...or sit amet, consectetur adipisicing elit.</p> <p class="overflow-string">lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> result note: live results in the following table may be shown incorrectly due to a limitation of the mdn editor which removes the all contents of style attributes which have text-overflow properties with string value. ...

writing-mode - CSS: Cascading Style Sheets
the writing-mode css property sets whether lines of text are laid out horizontally or vertically, as well as the direction in which blocks progress. when set for an entire document, it should be set on the root element (html element for html documents). the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this property specifies the block flow direction, which is the direction in which block-level containers are stacked, and the direction in which inline-level content flows within a block container. thus, it also determines the ordering of block-level content. syntax /* keyword values */ writing-mode: horizontal-tb; writing...
...inline-level content flows within a block container. thus, it also determines the ordering of block-level content. syntax /* keyword values */ writing-mode: horizontal-tb; writing-mode: vertical-rl; writing-mode: vertical-lr; /* global values */ writing-mode: inherit; writing-mode: initial; writing-mode: unset; the writing-mode property is specified as one of the values listed below. the flow direction in horizontal scripts is also affected by the directionality of that script, either left-to-right (ltr, like english and most other languages) or right-to-left (rtl, like hebrew or arabic). values horizontal-tb for ltr scripts, content flows horizontally from left to right. for rtl scripts, content flows horizontally from right to left. the next horizontal line is positioned below the previo...
...n>מלל ארוך לדוגמא</span></td> <td class="example text5"><span>1994年に至っては</span></td> </tr> </table> css some preparatory css just to make things look a little better: table { border-collapse:collapse; } td, th { border: 1px black solid; padding: 3px; } th { background-color: lightgray; } .example { height:75px; width:75px; } the css that adjusts the directionality of the content looks like this: .example.text1 span, .example.text1 { writing-mode: horizontal-tb; -webkit-writing-mode: horizontal-tb; -ms-writing-mode: horizontal-tb; } .example.text2 span, .example.text2 { writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; -ms-writing-mode: vertical-lr; } .example.text3 span, .example.text3 { writing-mode: vertical-rl; -webki...

Mouse gesture events - Developer guides
his event; however, if you want to provide feedback during the handling of the gesture, you should also watch the mozrotategesturestart and mozrotategestureupdate events. the delta value is the cumulative change over the course of handling the entire sequence of rotate gesture events. event fields mouse gesture events have additional fields providing information about the gesture. ...
..., if you want to provide feedback during the handling of the gesture, you should also watch the mozrotategesturestart and mozrotategestureupdate events. the delta value is the cumulative change over the course of handling the entire sequence of rotate gesture events. event fields mouse gesture events have additional fields providing information about the gesture. ...
...ing information about the gesture. these are: direction the direction in which the swipe moved. delta the amount by which the gesture moved; for rotation, this value is in degrees. positive values are clockwise and negative values are counterclockwise. for magnification, this value is implementation-specific, but the value is positive for zooming in and negative for zooming out. direction constants the direction field in the gesture events can take one of the following values: simplegestureevent.direction_left leftward swipe. simplegestureevent.direction_right rightward swipe. simplegestureevent.direction_up upward swipe. simplegestureevent.direction_down downward swipe. simplegestureevent.rotation_counterclockwise counter-clockwise rotatio...

<input type="range"> - HTML: Hypertext Markup Language
ue otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. the default stepping value for range inputs is 1, allowing only integers to be entered, unless the stepping base is not an integer; for example, if you set min to -10 and value to 1.5, then a step of 1 will allow only values such as 1.5, 2.5, 3.5,... in the positive direction and -0.5, -1.5, -2.5,... in the negative direction. see the html step attribut...
...he major browsers. (see firefox bug 981916, chrome bug 341071). it also, perhaps, may still be under discussion. in the meantime, we can make the range vertical by rotating it using using css transforms, or, by targeting each browser engine with their own method, which includes setting the appearance to slider-vertical, by using a non-standard orient attribute in firefox, or by changing the text direction for internet explorer and edge. consider this range control: <input type="range" id="volume" min="0" max="11" value="7" step="1"> screenshotlive sample this control is horizontal (at least on most if not all major browers; others might vary). standards according to the specification, making it vertical requires adding css to change the dimensions of the control so that it's taller than it...
...ange"] { -webkit-appearance: slider-vertical; } orient attribute in firefox only, there is a non-standard orient property. html use similar html as in the previous examples, we add the attribute with a value of vertical: <input type="range" min="0" max="11" value="7" step="1" orient="vertical"> writing-mode: bt-lr; the writing-mode property should generally not be used to alter text direction for internationalization or localization purposes, but can be used for special effects. html we use the same html as in the previous examples: <input type="range" min="0" max="11" value="7" step="1"> css we target just the inputs with a type of range, changing the writing mode from the default to bt-lr, or bottom-to-top and left-to-right: input[type="range"] { writing-mode: bt-lr; } ...

<input>: The Input (Form Input) element - HTML: Hypertext Markup Language
autocomplete all hint for form autofill feature autofocus all automatically focus the form control when the page is loaded capture file media capture input method in file upload controls checked radio, checkbox whether the command or control is checked dirname text, search name of form field to use for sending the element's directionality in form submission disabled all whether the form control is disabled form all associates the control with a form element formaction image, submit url to use for form submission formenctype image, submit form data set encoding type to use for form submission formmethod image, submit http method to use for form submissi...
...itted. for example, if a checkbox whose name is fruit has a value of cherry, and the checkbox is checked, the form data submitted will include fruit=cherry. if the checkbox isn't active, it isn't listed in the form data at all. the default value for checkboxes and radio buttons is on. dirname valid for text and search input types only, the dirname attribute enables the submission of the directionality of the element. when included, the form control will submit with two name/value pairs: the first being the name and value, the second being the value of the dirname as the name with the value of ltr or rtl being set by the browser. <form action="page.html" method="post"> <label>fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label> <input type="submit"/> </f...
...rname as the name with the value of ltr or rtl being set by the browser. <form action="page.html" method="post"> <label>fruit: <input type="text" name="fruit" dirname="fruit.dir" value="cherry"></label> <input type="submit"/> </form> <!-- page.html?fruit=cherry&fruit.dir=ltr --> when the form above is submitted, the input cause both the name / value pair of fruit=cherry and the dirname / direction pair of fruit.dir=ltr to be sent. disabled a boolean attribute which, if present, indicates that the user should not be able to interact with the input. disabled inputs are typically rendered with a dimmer color or using some other form of indication that the field is not available for use. specifically, disabled inputs do not receive the click event, and disabled inputs are not submitted...

side - SVG: Scalable Vector Graphics
the side attribute determines the side of a path the text is placed on (relative to the path direction). only one element is using this attribute: <textpath> html, body, svg { height: 100%; } text { font: 25px arial, helvelica, sans-serif; } <svg viewbox="0 0 420 200" xmlns="http://www.w3.org/2000/svg"> <text> <textpath href="#circle1" side="left">text left from the path</textpath> </text> <text> <textpath href="#circle2" side="right">text right from the path</textpath> </text> <circle id="circle1" cx="100" cy="100" r="70" fill="transparent" stroke="silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes left ...
... specifications specification status comment scalable vector graphics (svg) 2the definition of 'side' in that specification. candidate recommendation initial definition ...
...silver"/> <circle id="circle2" cx="320" cy="100" r="70" fill="transparent" stroke="silver"/> </svg> usage notes value left | right default value left animatable yes left this value places the text on the left side of the path (relative to the path direction). right this value places the text on the right side of the path (relative to the path direction). this effectively reverses the path direction. specifications specification status comment scalable vector graphics (svg) 2the definition of 'side' in that specification. candidate recommendation initial definition ...

x - SVG: Scalable Vector Graphics
svg2, x is a geometry property meaning this attribute can also be used as a css property for <svg>. text for <text>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, x defines the x coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes ...
....5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, x defines the x coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes ...
... list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, if it contain a single value, x defines the x coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, x defines the x coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value none animatable yes ...

y - SVG: Scalable Vector Graphics
svg2, y is a geometry property meaning this attribute can also be used as a css property for <svg>. text for <text>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, y defines the y coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes ...
....5px; stroke-dasharray: 2px; } tref warning: as of svg2 <tref> is deprecated and shouldn't be used. for <tref>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, y defines the y coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value 0 animatable yes ...
... list of (<length> | <percentage>) default value 0 animatable yes tspan for <tspan>, if it contain a single value, y defines the y coordinate on where the content text position must be placed. the content text position is usualy a point on the baseline of the first line of text. the exact content text position is influenced by some properties like text-anchor, or direction. if there are multiple values, y defines the y coordinate of each individual glyph from the text. if there are less values than glyphes, the remaining glyphes are placed in the continuity of the last positioned glyph. if there are more values than glyphes, extra values are ignored. value list of (<length> | <percentage>) default value none animatable yes ...

widget - Archive of obsolete content
rhtml++;' + '}, 2000)', contentscriptwhen: "ready" }); // a widget created with a specified width, that grows. ...
...specified width, that grows. var mywidget = widgets.widget({ id: "widget-effect", label: "wide widget that grows wider on a timer", content: "i'm getting longer.", width: 50, }); require("sdk/timers").setinterval(function() { mywidget.width += 10; }, 1000); // a widget communicating bi-directionally with a content script. ...

Introduction to XUL - Archive of obsolete content
n the pronunciation. note that the above example is using an implicit xul namespace. this is optional; other examples in this document will on occasion belabor the namespace issue by declaring each use explicitly. the chrome protocol is another mozilla extension allowing the exact location of files involved in the chrome description to be moved without affecting the xul source. so it's just an indirection. someday, there will be a complete description of this mechanism at packages, but for now there's a good but somewhat out of date document at configurable chrome available for more information. scripting a xul interface is only a collection of disconnected widgets until it has been programmed. "programming" can be as simple as some javascript to tie the widgets together and perhaps to give the...
...nu bars and menus for details.) finally there is an html iframe. note that the frame is qualified with the prefix html:, since it is an html object being used inside a default xul namespace. the frame also has a special attribute called flex, which indicates how much the frame is allowed to stretch to consume available space inside its window. (see the box system for details). idealistic future direction ideally, packages of xul ui descriptions could be shipped in a single file something like <?xml version="1.0"?> <?xml-stylesheet href="xul.css" type="text/css"?> <!doctype package> <package xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"> <window id="main"> ... </window> <window id="help"> ... </window> </package> and a window (or other service) could be ...

List of commands - Archive of obsolete content
also o...
...also obtained from http://www.m...

RDF Query Syntax - Archive of obsolete content
ditem" object="?relateditem"/> the triple statement is used to follow arcs or arrows in the rdf graph. the predicate attribute specifies the labels of the arrows to follow. in the triple used here, the predicate is 'http://www.xulplanet.com/rdf/relateditem', so we know that the builder will look for arrows with that label. the builder can either follow the arrows in a forward or backward direction, but only one direction per statement. it determines which direction to use by examining which data is known and which data is not known yet. recall the data in the potential results set: (?start = http://www.xulplanet.com/rdf/a) this was the seed data created by the content statement. you might be able to guess that the builder fills in the value of the ?start variable as the triple's subject, ...
... predicate (or arrow label) 'http://www.xulplanet.com/rdf/relateditem'. since ?relateditem isn't known, the builder will allow any value for the node the arrow points to, and will look in the datasource for all possible values. in a triple statement, the subject is always the start of an arc, while the object is what it points to. for this triple, the builder will follow the arrows in the forward direction. here is the rdf graph again: starting at node a and following the relateditem arcs, we can see that there are three possible values for the ?relateditem variable, b, c and d. this is new data, so the builder adds it to the graph. since three values have been found, the network will now have three potential results: (?start = http://www.xulplanet.com/rdf/a, ?relateditem = http://www.xulplanet.co...

Element Positioning - Archive of obsolete content
when the window is resized, the buttons center themselves horizontally. compare this behavior to that of the previous example. box alignment if you resize the window in the happy-sad example above horizontally, the box will grow in width. if you resize the window vertically however, you will note that the buttons grow in height. this is because the flexibility is assumed by default in the other direction. you can control this behavior with the align attribute. for horizontal boxes, it controls the position of the children vertically. for vertical boxes, it controls the position of the children horizontally. the possible values are similar to those for pack. start this aligns elements along the top edge for horizontal boxes and along the left edge for vertical boxes. center this centers the...
...centers the child elements in the box. end this aligns elements along the bottom edge for horizontal boxes and along the right edge for vertical boxes. baseline this aligns the elements so that the text lines up. this is only useful for horizontal boxes. stretch this value, the default, causes the elements to grow to fit the size of the box, much like a flexible element, but in the opposite direction. as with the pack attribute, the align attribute applies to the box containing the elements to be aligned, not to the elements themselves. for example, the first box below will have its children stretch, because that is the default. the second box has an align attribute, so its children will be placed centered. example 5: source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://glob...

XUL Questions and Answers - Archive of obsolete content
tories. as such, you cannot use a template to display them in the same list. the best you can do is a cascading menu along the lines of the move/copy menus, but then of course you lose the ability to easily select from the list. ...
... uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> it should be written as follows: <menulist id="abpopup22"> <menupopup id="abpopup-menupopup" ref="moz-abmdbdirectory://abook.mab" datasources="rdf:addressdirectory" sortactive="true" sortdirection="ascending" sortresource="http://home.netscape.com/nc-rdf#dirtreenamesort"> <template> <rule nc:iswriteable="false"/> <rule nc:ismaillist="true"> <menuitem uri="..." label="rdf:http://home.netscape.com/nc-rdf#dirname" value="rdf:http://home.netscape.com/nc-rdf#diruri"/> </rule> </template> </menupopup> </menulist> drawwindow with tra...

attribute.align - Archive of obsolete content
he box are aligned, when the size of the box is larger than the total size of the children. for boxes that have horizontal orientation, it specifies how its children will be aligned vertically. for boxes that have vertical orientation, it is used to specify how its children are algined horizontally. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the value of align using the style property -moz-box-align. parameters start child elements are aligned starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed ...
...gned so that their text labels are lined up. stretch the child elements are stretched to fit the size of the box. for a horizontal box, the children are stretched to be the height of the box. for a vertical box, the children are stretched to be the width of the box. if the size of the box changes, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left: (deprecated) the elements are aligned on their left edges. center: (deprecated) the elements are centered horizontally. right: (deprecated) the elements are aligned on their right edges. ...

button - Archive of obsolete content
this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...
...e value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for hori...

resizer - Archive of obsolete content
left resized to the left. right resized to the right. top resized up. bottom resized down. bottomstart resized down and toward the start of the line (toward the left for left-to-right locales, toward the right for right-to-left locales). bottomend resized down and toward the end of the line (toward the right for left-to-right locales, towa...
...wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

scale - Archive of obsolete content
normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for hori...
...ay take. the default value is 0. type: integer the maximum value that the scale or number box may be set to. the default value is 100 for scales and infinity for number boxes. movetoclick type: boolean if true, clicking the slide area of the scale moves the thumb directly to that position. if false, clicking the slide area moves the thumb only one increment in that direction. if not specified, the default value is used, which varies for each platform. pageincrement type: integer the amount by which the value of the curpos or value attribute changes when the tray of the scroll bar (the area in which the scroll bar thumb moves) is clicked, or when the page up or page down keys are pressed. the default value is 10. tabindex type: integer the tab order ...

toolbarbutton - Archive of obsolete content
r this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...
...he value none and the displayed text is larger than this maximum width, you may be able to use the max-width css property (or the maxwidth attribute) to override this size. for example, for a menuitem in a menu you can add the following css rule when you want to use the value none: menupopup > menuitem, menupopup > menu { max-width: none; } dir type: one of the values below the direction in which the child elements of the element are placed. normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for hori...

tooltip - Archive of obsolete content
</tooltip> <vbox> <button label="simple" tooltiptext="a simple popup"/> <button label="more" tooltip="moretip"/> </vbox> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...
... specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. position possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. x, y for an anchored popup,...

The First Install Problem - Archive of obsolete content
le myapplication player version 5 "vendor" -- string refering to company name example: [hkey_local_machine\software\mozillaplugins\@mycompany.com/myapplication,version=5.01] vendor=mycompany inc. the example registry key shows the suggested "key creation" at work for an example application called scobe scrubobat (which doesn't really exist!). future directions: using object tag with classid: incidental benefit embedders such as compuserve (who now embed gecko in lieu of ie as the default browser) can determine on their own the mechanisms to parse the win32 registry for plids. the bugzilla bug open on mozilla and netscape 6.x is bug 44973. if every major plugin vendor complies with the writing of plugin directory information into the registry along wit...
... resolution of a mimetype handler is no longer arbitrary. if the "data" file myfile.typ doesn't contain enough resource information to load the correct mimetype handling component (dll), specifying "type" is an additional mechanism. unlike uuids, plids are human readable, and not lengthy "garbled" strings. (it should be noted that the "classid" attribute discussion here is a potential future direction; it doesn't yet work, at least as of firefox 3.6.8. the recommended <object> attribute to set is still either "type" or "data".) advantage: we now no longer have ambiguity in determining which plugin handles what mimetype, because now the plugin has been invoked using the classid attribute of the object tag, which is in compliance with the html 4.01 specification for use of the object tag. (origi...

Building a Theme - Archive of obsolete content
it's especially important to install the dom inspector, which we'll be using in later steps. create the install manifest open the file called install.rdf that you created at the top of your extension's folder hierarchy and put this inside: <?xml version="1.0"?> <rdf xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#"> <descripti...
...t'll load it up every time you restart firefox. locate your profile folder and beneath it the profile you want to work with (e.g. firefox/profiles/<profile_id>.default/). open the extensions/ folder, creating it if need be. create a new text file and put the full path to your development folder inside (e.g. c:\themes\my_theme\ or ~/themes/my_theme/). windows users should retain the os' slash direction, and everyone should remember to include a closing slash and remove any trailing spaces. save the file with the id of your theme as its name (e.g. sample@example.net). no file extension. now you should be ready to test your theme! start firefox. firefox will detect the text link to your theme directory and install the theme. your theme will not be active the first time you install, and you wi...

Using SSH to connect to CVS - Archive of obsolete content
generating an ssh key first, install ssh. most linux, bsd, and osx distributions come with it installed already. ...
... generating an ssh key first, install ssh. most linux, bsd, and osx distributions come with it installed already. ...

Browser Feature Detection - Archive of obsolete content
true clear true true true clip true true true content true false true counterincrement true false true counterreset true false true cue true false false cueafter true false false cuebefore true false false cursor true true true direction true true true elevation true false false emptycells true false true fontsizeadjust true false true fontstretch true false true left true true true markeroffset true false true marks true false true maxheight true ie7 only true maxwidth ...
...ted': false}, {name: 'clear', 'supported': false}, {name: 'clip', 'supported': false}, {name: 'content', 'supported': false}, {name: 'counterincrement', 'supported': false}, {name: 'counterreset', 'supported': false}, {name: 'cue', 'supported': false}, {name: 'cueafter', 'supported': false}, {name: 'cuebefore', 'supported': false}, {name: 'cursor', 'supported': false}, {name: 'direction', 'supported': false}, {name: 'elevation', 'supported': false}, {name: 'emptycells', 'supported': false}, {name: 'fontsizeadjust', 'supported': false}, {name: 'fontstretch', 'supported': false}, {name: 'left', 'supported': false}, {name: 'markeroffset', 'supported': false}, {name: 'marks', 'supported': false}, {name: 'maxheight', 'supported': false}, {name: 'maxwidth', 'supporte...

Choosing Standards Compliance Over Proprietary Practices - Archive of obsolete content
by following the guidelines that have been put into place, organizations like aol can enhance user experience, interoperability, code reuse, shared resources, and goodwill while reducing costs. i will discuss each of these items in the following paragraphs. interoperability the key to interoperability is settling on a standard that has a potential for ...
...a series of standards, organizations can more easily measure progress, performance, and results across the organization. the most compelling dilemma is how an organization chooses to follow open external standards vs. a proprietary de facto standard. following proprietary de facto standards leaves an organization vulnerable and open to obsolescence when the owner of the de facto changes focus or direction, or abandons the de facto altogether and renders the standard stagnate. on the other hand, by adopting open technology standards and participating in the development and direction of those standards, an organization is providing a path for future development, growth and revenue. original document information author(s): beth epperson last updated date: 7 november 2014 ...

Building up a basic demo with the PlayCanvas engine - Game development
" }); app.root.addchild(box); box.rotate(10, 15, 0); it will create an entity with the box model component and add it to the root of the application, our scene. we also rotate the box a bit to show that it's actually a 3d cube and not a square. the cube is visible, but it is completely. to make it look better we need to shine some light onto it. lights the basic light types in playcanvas are directional and ambient. the first type is a directional light placed somewhere on the scene while the scond one reflects the light from the first type, so it looks more natural; this can be set globally. again, add the new code below your previous additions. var light = new pc.entity(); light.addcomponent('light'); app.root.addchild(light); light.rotate(45, 0, 0); it will create a light entity componen...
...llback takes the deltatime as the parameter, so we have the relative time that has passed since the previous invocation of this update. for time based animations we'll use a timer variable that will store the time that has passed since the start of the app by adding the deltatime to it on every update. rotation rotating is quite easy — all you need to do is to add a defined value to the given direction of rotation on each frame. add this line of code inside the app.on("update") callback function, right after the addition of the deltatime to the timer variable: box.rotate(deltatime*10, deltatime*20, deltatime*30); it will rotate the box by deltatime*10 on the x axis, deltatime*20 on the y axis and deltatime*30 on the z axis, on very frame — giving us a smooth animation. scaling we can als...

Desktop mouse and keyboard controls - Game development
game. it's useful to provide an option to play the game on desktop without using a mouse, so you don't have to take your hands off the keyboard. ...
... we can also offer firing control alternatives. for cursor keys the natural shooting button would be on the other side of the keyboard, so the player can use the other hand — for example the x key. for w a s d keys it can be the space bar: this.keyfire1 = this.input.keyboard.addkey(phaser.keycode.x); this.keyfire2 = this.input.keyboard.addkey(...

Mobile touch controls - Game development
will create a new button using a transparent image that covers the right half of the screen. you can assign functions on input down and input up separately if you'd like to perform more complicated actions, but in this game touching the right side of the screen will simply fire the bullets to the right — this is all we need in this case. ...
...gins like virtual joystick — this is a paid, official phaser plugin, but you can find free and open source alternatives. the initialization of virtual joystick looks like this: this.pad = this.game.plugins.add(phaser.virtualjoystick); this.stick = this.pad.addstick(30, 30, 80, 'generic'); in the create() function of the game state we're creating a virtual pad and a generic stick that has four directional virtual buttons by default. this is placed 30 pixels from the top and left edges of the screen and is 80 pixels wide. the stick being pressed can be handled during the gameplay in the update function like so: if(this.stick.isdown) { // move the player } we can adjust the player's velocity based on the current angle of the stick and move him appropriately. summary that covers adding tou...

Collision detection - Game development
for the center of the ball to be inside the brick, all four of the following statements need to be true: the x position of the ball is greater than the x position of the brick. the x position of the ball is less than the x position of the brick plus its width. the y position of the ball is greater than the y position of the brick. the y position of the ball is less than the y p...
... for(var r=0; r<brickrowcount; r++) { var b = bricks[c][r]; if(x > b.x && x < b.x+brickwidth && y > b.y && y < b.y+brickheight) { dy = -dy; } } } } add the above block to your code, below the keyuphandler() function. making the bricks disappear after they are hit the above code will work as desired and the ball changes its direction. the problem is that the bricks are staying where they are. we have to figure out a way to get rid of the ones we've already hit with the ball. we can do that by adding an extra parameter to indicate whether we want to paint each brick on the screen or not. in the part of the code where we initialize the bricks, let's add a status property to each brick object. update the following part of the co...

BiDi - MDN Web Docs Glossary: Definitions of Web-related terms
bidi (bidirectional) refers to a document containing both right-to-left and left-to-right text. even when both directionalities occur in the same paragraph, the text in each language must appear in its proper directionality. ...
... bidi (bidirectional) refers to a document containing both right-to-left and left-to-right text. even when both directionalities occur in the same paragraph, the text in each language must appear in its proper directionality. ...

Cross Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the cross axis in flexbox runs perpendicular to the main axis, therefore if your flex-direction is either row or row-reverse then the cross axis runs down the columns. if your main axis is column or column-reverse then the cross axis runs along the rows. alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. in the case of a multi-line flex container, with additional space on the cross axis, you can use align-content to control the spacing of the rows. ...
...ng the rows. alignment of items on the cross axis is achieved with the align-items property on the flex container or align-self property on individual items. ...

Main Axis - MDN Web Docs Glossary: Definitions of Web-related terms
the main axis in flexbox is defined by the direction set by the flex-direction property. there are four possible values for flex-direction. these are: row row-reverse column column-reverse should you choose row or row-reverse then your main axis will run along the row in the inline direction. choose column or column-reverse and your main axis will run top to bottom of the page in the block direction. on the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. or, you can control the space between and around items by using the justify-content property. ...
... or column-reverse and your main axis will run top to bottom of the page in the block direction. on the main axis you can control the sizing of flex items by adding any available space to the items themselves, by way of flex properties on the items. or, you can control the space between and around items by using the justify-content property. ...

Debugging CSS - Learn web development
roblem then having a reduced test case gives you something to ask for help with, by posting to a forum, or showing to a co-worker. you are much more likely to get help if you can show that you have done the work of reducing the problem and identifying exactly where it happens, before asking for help. a more experienced developer might be able to quickly spot the problem and point you in the right direction, and even if not, your reduced test case will enable them to have a quick look and hopefully be able to offer at least some help. in the instance that your problem is actually a bug in a browser, then a reduced test case can also be used to file a bug report with the relevant browser vendor (e.g. on mozilla's bugzilla site). as you become more experienced with css, you will find that you get fa...
...making a reduced test case, and explaining the issue to someone else will usually result in a fix being found. ...

Images, media, and form elements - Learn web development
an aspect ratio. this means that it has a size in both the horizontal (x) and vertical (y) dimensions, and will be displayed using the intrinsic dimensions of the file by default. sizing images as you already know from following these lessons, everything in css generates a box. if you place an image inside a box that is smaller or larger than the intrinsic dimensions of the image file in either direction, it will either appear smaller than the box, or overflow the box. you need to make a decision about what happens with the overflow. in the example below we have two boxes, both 200 pixels in size: one contains an image which is smaller than 200 pixels — it is smaller than the box and doesn't stretch to fill it. the other is larger than 200 pixels and overflows the box. so what can we d...
...ements in css. in the next article we'll look over a few tips you'll find useful when you have to style html tables. ...

Pseudo-classes and pseudo-elements - Learn web development
atches an <input> element whose input value is empty. :checked matches a radio button or checkbox in the selected state. :current matches the element, or an ancestor of the element, that is currently being displayed. :default matches the one or more ui elements that are the default among a set of similar elements. :dir select an element based on its directionality (value of the html dir attribute or css direction property). :disabled matches user interface elements that are in an disabled state. :empty matches an element that has no children except optionally white space. :enabled matches user interface elements that are in an enabled state. :first in paged media, matches the first page. :first-...
...elling-error matches a portion of the document containing a spelling error as flagged by the browser. ...

The box model - Learn web development
witch to the alternate model. block and inline boxes in css we broadly have two types of boxes — block boxes and inline boxes. these characteristics refer to how the box behaves in terms of page flow, and in relation to other boxes on the page: if a box is defined as a block, it will behave in the following ways: the box will break onto a new line. the box will extend in the inline direction to fill the space available in its container. in most cases this means that the box will become as wide as its container, filling up 100% of the space available. the width and height properties are respected. padding, margin and border will cause other elements to be pushed away from the box unless we decide to change the display type to inline, elements such as headings (e.g. <h1>) and <p> a...
...we will take a look at how backgrounds and borders can be used to make your plain boxes look more interesting. ...

Introduction to CSS layout - Learn web development
ed in the exact order in which it appears in the source code, with elements stacked up on top of one another — the first paragraph, followed by the unordered list, followed by the second paragraph. the elements that appear one below the other are described as block elements, in contrast to inline elements, which appear one beside the other, like the individual words in a paragraph. note: the direction in which block element contents are laid out is described as the block direction. the block direction runs vertically in a language such as english, which has a horizontal writing mode. it would run horizontally in any language with a vertical writing mode, such as japanese. the corresponding inline direction is the direction in which inline contents (such as a sentence) would run. for many of ...
...lements. by default these would display as block elements, below one another, in our english language document. however, if we add display: flex to the parent, the three items now arrange themselves into columns. this is due to them becoming flex items and being affected by some initial values that flexbox sets on the flex container. they are displayed in a row, because the initial value of flex-direction set on their parent is row. they all appear to stretch to the height of the tallest item, because the initial value of the align-items property set on their parent is stretch. this means that the items stretch to the height of the flex container, which in this case is defined by the tallest item. the items all line up at the start of the container, leaving any extra space at the end of the row. ...

Fundamental text and font styling - Learn web development
ization. text layout styles: text-indent: specify how much horizontal space should be left before the beginning of the first line of the text content. text-overflow: define how overflowed content that is not displayed is signaled to users. white-space: define how whitespace and associated line breaks inside the element are handled. word-break: specify whether to break lines within words. direction: define the text direction (this depends on the language and usually it's better to let html handle that part as it is tied to the text content.) hyphens: switch on and off hyphenation for supported languages. line-break: relax or strengthen line breaking for asian languages. text-align-last: define how the last line of a block or a line, right before a forced line break, is aligned. text-ori...
... for asian languages. text-align-last: define how the last line of a block or a line, right before a forced line break, is aligned. text-orientation: define the orientation of the text in a line. overflow-wrap: specify whether or not the browser may break lines within words in order to prevent overflow. writing-mode: define whether lines of text are laid out horizontally or vertically and the direction in which subsequent lines flow. font shorthand many font properties can also be set through the shorthand property font. these are written in the following order: font-style, font-variant, font-weight, font-stretch, font-size, line-height, and font-family. among all those properties, only font-size and font-family are required when using the font shorthand property. a forward slash has to b...

HTML text fundamentals - Learn web development
l find out more about these later on in the course.) we've applied some css to it to make it look like a top level heading, but since it has no semantic value, it will not get any of the extra benefits described above. it is a good idea to use the relevant html element for the job. lists now let's turn our attention to lists. lists are everywhere in life—from your shopping list to the list of directions you subconsciously follow to get to your house every day, to the lists of instructions you are following in these tutorials! lists are everywhere on the web, too, and we've got three different types to worry about. unordered unordered lists are used to mark up lists of items for which the order of the items doesn't matter—let's take a shopping list as an example. milk eggs bread hummus eve...
...tion(){ // we only want to save the state when the user code is being shown, // not the solution, so that solution is not saved over the user code if(solution.value === 'show solution') { userentry = textarea.value; } else { solutionentry = textarea.value; } updatecode(); }; ordered ordered lists are lists in which the order of the items does matter—let's take a set of directions as an example: drive to the end of the road turn right go straight across the first two roundabouts turn left at the third roundabout the school is on your right, 300 meters up the road the markup structure is the same as for unordered lists, except that you have to wrap the list items in an <ol> element, rather than <ul>: <ol> <li>drive to the end of the road</li> <li>turn right</li> <...

Server-side web frameworks - Learn web development
hing things. by contrast, flask is a much lighter-weight framework and is great for creating web apps running on embedded devices. opinionated vs unopinionated: an opinionated framework is one in which there are recommended "best" ways to solve a particular problem. opinionated frameworks tend to be more productive when you're trying to solve common problems, because they lead you in the right direction, however they are sometimes less flexible. batteries included vs. get it yourself: some web frameworks include tools/libraries that address every problem their developers can think "by default", while more lightweight frameworks expect web developers to pick and choose solution to problems from separate libraries (django is an example of the former, while flask is an example of a very light-we...
...nd discussed criteria for choosing a web application framework. you should now have at least an idea of how to choose a web framework for your own server-side development. if not, then don't worry — later on in the course we'll give you detailed tutorials on django and express to give you some experience of actually working with a web framework. for the next article in this module we'll change direction slightly and consider web security. previous overview: first steps next in this module introduction to the server side client-server overview server-side web frameworks website security ...

Command line options
sole write messages for the debugging console into the window which launched the application instead of opening a new window for the debugging messages. only supported on the windows operating system. -console start application with a debugging console. note: windows only. -h or -help or -? print the list of all available command line options. note that on windows this only works with a redirection such as |more (bug 355889). this option is available only in a command console. -osint tells the application that it is being launched by the os shell. this should not be specified unless the caller provides all of the functionality provided by the os shell when launching the application (bug 384384). -requestpending tells the application that there will be a windows dde request to open the s...
...ides all of the functionality provided by the os shell when launching the application (bug 354005). -silent don't open default windows. useful with those command-line arguments that open their own windows but don't already prevent default windows from opening. firefox, thunderbird3.x and seamonkey2.x only. -v or -version print application version. note that on windows this only works with a redirection such as |more (bug 355889). this option is available only in a command console. x11 options these options are only available for an application build for and running atop the x11/x.org display and window system to be found on linux and other unix-based systems. --class=wm_class set the wm_class resource class of the x11 windows created by the application. --display=display set the x display...

Extending a Protocol
as c++ classes, so they are more than just abstract ideas. usually, a child wants to send messages to the parent to do something off main thread for us. and we generally want the parent to let a child know when some work is done - and send some confirmation or result data back to the child. sometimes, the parent will want to notify all its children of something. so communication can go in both directions. in this tutorial, we are just going to cover a child talking to a parent, and the parent responding with some data. in order to manage parent-child relationships, ipdl uses a tree herirachy to manage the creation of children. as dom apis have access to the window object, we generally want to use the "pwindowglobal" protocol to manage things for us: this protocol is convinient because we can...
...ike this (things in bold is what we added). // stuff.. include protocol pecho; async protocol pwindowglobal { // stuff... manages pecho; child: // stuff... parent: async pecho(); // more stuff... } if the above additions are unclear, please see the final implementation of pecho as a diff in phabricator - search for "pwindowglobal.ipdl". congrats! we've now set up the bi-directional relationship between pwindowglobal and pecho at the protocol level. we've told gecko who manages who, and what messages we want to send. now we actually need to implement the "echochild" and "echoparent" actors to handle sending and receiving messages. and we also need to implement the actual management of these objects by dom/ipc/windowglobalchild.{h|cpp} and dom/ipc/windowglobalparent.{h|cp...

Localization content best practices
e single unicode …, and not three dots. if you have any doubts about the quality of strings, ask a copywriter to do a copy review of this text. ideally, all strings landing in code should originate from approved ux wireframes, any copy review should be part of the initial stage of creating these wireframes. use unicode characters over their ascii counterparts when possible strings should use directional quotation marks when possible. u+2018 and u+2019 (\u2018 and \u2019 in javascript) are the left and right single quotation marks, respectively. the right single quotation mark should be used as an apostrophe. u+201c and u+201d (\u201c and \u201d in javascript) are the left and right double quotation marks, respectively. the pair should be used to surround statements and references to user i...
...he right single quotation mark should be used as an apostrophe. u+201c and u+201d (\u201c and \u201d in javascript) are the left and right double quotation marks, respectively. the pair should be used to surround statements and references to user input. example: you have chosen a keyword that is currently in use by "%s". please select another. example: search %1$s for "%2$s" non-directional single, and double, quotation marks should be used in reference to html code, or other languages where ascii character usage is required, such as html. html does not prefer one over the other, and our codebase uses them interchangeably as of march 2016. example: this web page at <span id='malware_sitename'/> has been reported as an attack page and has been blocked based on your security pref...

nsIMarkupDocumentViewer
. default = true. obsolete since gecko 1.8 authorstyledisabled boolean disable entire author style level (including html presentation hints) bidicharacterset octet whether to force the user's character set 1 - use the document character set 2 - use the character set chosen by the user. obsolete since gecko 6.0 bidicontrolstextmode octet the order of bidirectional text in form controls. 1 - logical 2 - visual 3 - like the containing document. obsolete since gecko 2.0 bidinumeral octet the type of numerals to display. 1 - depending on context, default is arabic numerals 2 - depending on context, default is hindi numerals 3 - arabic numerals 4 - hindi numerals. bidioptions pruint32 use this attribute to access all the bidi opt...
...2 - depending on context, default is hindi numerals 3 - arabic numerals 4 - hindi numerals. bidioptions pruint32 use this attribute to access all the bidi options in one operation. bidisupport octet whether to use platform bidi support or mozilla's bidi support 1 - use mozilla's bidi support 2 - use the platform bidi support 3 - disable bidi support. biditextdirection octet options for bidi presentation. use these attributes to access the individual bidi options. the default direction for the layout of bidirectional text. 1 - left to right 2 - right to left. biditexttype octet the ordering of bidirectional text. this may be either "logical" or "visual". logical text will be reordered for presentation using the unicode bidi alg...

Animation.finish() - Web APIs
that is, if the animation is playing forward, it sets the playback time to the length of the animation sequence, and if the animation is playing in reverse (having had its reverse() method called), it sets the playback time to 0. syntax animation.finish(); parameters none. return value none. ...
... invalidstate error. interfaceelement.addeventlistener("mousedown", function() { try { player.finish(); } catch(e if e instanceof invalidstate) { console.log("finish() called on paused or finished animation."); } catch(e); logmyerrors(e); //pass exception object to error handler } }); the following example finishes all the animations on a single element, regardless of their direction of playback. elem.getanimations().foreach( function(animation){ return animation.finish(); } ); specifications specification status comment web animationsthe definition of 'finish()' in that specification. working draft ...

AudioListener - Web APIs
the default is 0. audiolistener.positiony represents the vertical position of the listener in a right-hand cartesian coordinate sytem. the default is 0. audiolistener.positionz represents the longitudinal (back and forth) position of the listener in a right-hand cartesian coordinate sytem. the default is 0. audiolistener.forwardx represents the horizontal position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values. the forward and up values are linearly independent of each other. the default is 0. audiolistener.forwardy represents the vertical position of the listener's forward direction in the same cartesian coordinate sytem as the position (positionx, positiony, and positionz) values. the forward and up ...
...the forward and up values are linearly independent of each other. the default is -1. ...

CanvasRenderingContext2D - Web APIs
l how text is laid out. canvasrenderingcontext2d.font font setting. default value 10px sans-serif. canvasrenderingcontext2d.textalign text alignment setting. possible values: start (default), end, left, right, center. canvasrenderingcontext2d.textbaseline baseline alignment setting. possible values: top, hanging, middle, alphabetic (default), ideographic, bottom. canvasrenderingcontext2d.direction directionality. possible values: ltr, rtl, inherit (default). fill and stroke styles fill styling is used for colors and styles inside shapes and stroke styling is used for the lines around shapes. canvasrenderingcontext2d.fillstyle color or style to use inside shapes. default #000 (black). canvasrenderingcontext2d.strokestyle color or style to use for the lines around shapes. default #...
...rgradient() creates a linear gradient along the line given by the coordinates represented by the parameters. canvasrenderingcontext2d.createradialgradient() creates a radial gradient given by the coordinates of the two circles represented by the parameters. canvasrenderingcontext2d.createpattern() creates a pattern using the specified image (a canvasimagesource). it repeats the source in the directions specified by the repetition argument. this method returns a canvaspattern. shadows canvasrenderingcontext2d.shadowblur specifies the blurring effect. default: 0 canvasrenderingcontext2d.shadowcolor color of the shadow. default: fully-transparent black. canvasrenderingcontext2d.shadowoffsetx horizontal distance the shadow will be offset. default: 0. canvasrenderingcontext2d.shadowoffse...

Element.clientLeft - Web APIs
note: this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). ...
... note: this property will round the value to an integer. if you need a fractional value, use element.getboundingclientrect(). ...

HTMLMarqueeElement - Web APIs
0095dd; pointer-events: all;} properties inherits properties from its parent, htmlelement. htmlmarqueeelement.behavior sets how the text is scrolled within the marquee. possible values are scroll, slide and alternate. if no value is specified, the default value is scroll. htmlmarqueeelement.bgcolor sets the background color through color name or hexadecimal value. htmlmarqueeelement.direction sets the direction of the scrolling within the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. htmlmarqueeelement.height sets the height in pixels or percentage value. htmlmarqueeelement.hspace sets the horizontal margin. htmlmarqueeelement.loop sets the number of times the marquee will scroll. if no value is specified, the defaul...
... the loop attribute is set to some number that is greater than 0. htmlmarqueeelement.onstart fires when the marquee starts scrolling. methods inherits methods from its parent, htmlelement. htmlmarqueeelement.start() starts scrolling of the marquee. htmlmarqueeelement.stop() stops scrolling of the marquee. examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definition of 'htmlmarqueeelement' in that specification. living s...

HTMLTextAreaElement - Web APIs
ent's readonly attribute, indicating that the user cannot modify the value of the control. required boolean: returns / sets the element's required attribute, indicating that the user must specify a value before submitting the form. rows unsigned long: returns / sets the element's rows attribute, indicating the number of visible text lines for the control. selectiondirection string: returns / sets the direction in which selection occurred. this is "forward" if selection was performed in the start-to-end direction of the current locale, or "backward" for the opposite direction. this can also be "none" if the direction is unknown. selectionend unsigned long: returns / sets the index of the end of selected text. if no text is selected, contains the index ...
... living standard html5the definition of 'htmltextareaelement' in that specification. recommendation the attributes tabindex and accesskey, as well as the methods blur() and focus() are now defined on htmlelement. the following attributes have been added: autofocus, placeholder, dirname, wrap, maxlength, required, textlength, labels, selectionstart, selectionend, selectiondirection, validity, validationmessage, and willvalidate. the following methods have been added: checkvalidity(), setcustomvalidity(), and setselectionrange(). document object model (dom) level 2 html specificationthe definition of 'htmltextareaelement' in that specification. obsolete the property defaultvalue doesn't contain the initial value of the value attribute, but the initial valu...

IDBCursor.continue() - Web APIs
note: this feature is available in web workers. syntax cursor.continue(key); parameters key optional the key to position the cursor at. exceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. ...
...ceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. dataerror the key parameter may have any of the following conditions: the key is not a valid key. the key is less than or equal to this cursor's position and the cursor's direction is next or nextunique. the key is greater than or equal to this cursor's position and this cursor's direction is prev or prevunique. invalidstateerror the cursor is currently being iterated or has iterated past its end. example in this simple fragment we create a transaction, retrieve an object store, then use a cursor to iterate through all the records in the ob...

IDBObjectStoreSync - Web APIs
f a database. ...
...uctured cloning algorithm. not_found_err if no record exists in this index for the given key. opencursor() creates a cursor over the records of this object store. the range of the new cursor matches the specified key range; if the key range is not specified or is null, then the range includes all the records. cursorsync opencursor ( in optional keyrange range, in optional unsigned short direction ) raises (databaseexception); parameters range the key range to use as the cursor's range. direction the cursor's required direction. returns idbindexsync an object for accessing the index. exceptions this method can raise a databaseexception with the following code: not_found_err if no records exist in this index for the requested key range. openindex() opens the index wi...

ImageData.data - Web APIs
array, the for loop iterates by multiples of four. the values associated with each pixel are r (red), g (green), b (blue), and a (alpha), in that order. ...
...ach pixel are r (red), g (green), b (blue), and a (alpha), in that order. ...

MediaTrackSettings.facingMode - Web APIs
this lets you determine what value was selected to comply with your specified constraints for this property's value as described in the mediatrackconstraints.facingmode property you provided when calling either getusermedia() or mediastreamtrack.applyconstraints(). if needed, you can determine whether or not this constraint is supported by checking the value of mediatracksupportedconstraints.facingmode as returned by a call to mediadevices.getsupportedconstraints(). ...
...doesn't include this information, tracks associated with a webrtc rtcpeerconnection will never include this property. syntax var facingmode = mediatracksettings.facingmode; value a domstring whose value is one of the strings in videofacingmodeenum. videofacingmodeenum the following strings are permitted values for the facing mode. these may represent separate cameras, or they may represent directions in which an adjustable camera can be pointed. "user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone. "environment" the video source is facing away from the user, thereby viewing their environment. this is the back camera on a smartphone. "left" the video source is facing toward the user but to their left, such as a camera a...

Notification.dir - Web APIs
possible values are: auto: adopts the browser's language setting behaviour (the default.) ltr: left to right. rtl : right to left. note: most browsers seem to ignore explicit ltr and rtl settings, and just go with the browser-wide setting. ...
...possible values are: auto: adopts the browser's language setting behaviour (the default.) ltr: left to right. rtl : right to left. note: most browsers seem to ignore explicit ltr and rtl settings, and just go with the browser-wide setting. ...

PannerNode.coneInnerAngle - Web APIs
syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.coneinnerangle = 360; value a double. example in this example, we'll demonstrate how changing the orientation parameters of a pannernode in combination with coneinnerangle and coneouterangle affects volume. ...
...node(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the ...

PannerNode.setVelocity() - Web APIs
the default value of the velocity vector is (0, 0, 0). ...
...the default value of the velocity vector is (0, 0, 0). syntax var audioctx = new audiocontext(); var panner = audioctx.createpanner(); panner.setvelocity(0,0,17); returns void. ...

PannerNode - Web APIs
the pannernode interface represents the position and behavior of an audio source signal in space. it is an audionode audio-processing module describing its position with right-hand cartesian coordinates, its movement using a velocity vector and its directionality using a directionality cone. a pannernode always has exactly one input and one output: the input can be mono or stereo but the output is always stereo (2 channels); you can't have panning effects without at least two audio channels! number of inputs 1 number of outputs 1 channel count mode "clamped-max" channel count 2 channel interpretation "speakers" constructor pannernode.pannernode creates a new pannernode object instance. properties inherits properties fr...
...uickly the volume is reduced as the source moves away from the listener. this value is used by all distance models. methods inherits methods from its parent, audionode. pannernode.setposition() defines the position of the audio source relative to the listener (represented by an audiolistener object stored in the audiocontext.listener attribute.) pannernode.setorientation() defines the direction the audio source is playing in. pannernode.setvelocity() defines the velocity vector of the audio source — how fast it is moving and in what direction. in a previous version of the specification, the pannernode had a velocity that could pitch up or down audiobuffersourcenodes connected downstream. this feature was not clearly specified and had a number of issues, so it was removed from t...

Path2D - Web APIs
and the third one is the end point. the starting point is the last point in the current path, which can be changed using moveto() before creating the bézier curve. path2d.quadraticcurveto() adds a quadratic bézier curve to the current path. ...
... path2d.rect() creates a path for a rectangle at position (x, y) with a size that is determined by width and height. specifications specification status comment html living standardthe definition of 'path2d' in that specification. ...

Pointer Lock API - Web APIs
the pointer lock api (formerly called mouse lock api) provides input methods based on the movement of the mouse over time (i.e., deltas), not just the absolute position of the mouse cursor in the viewport. it gives you access to raw mouse movement, locks the target of mouse events to a single element, eliminates limits on how far mouse movement can go in a single direction, and removes the cursor from view. it is ideal for first person 3d games, for example. more than that, the api is useful for any applications that require significant mouse input to control movements, rotate objects, and change entries, for example allowing users to control the viewing angle simply by moving the mouse around without any button clicking. the buttons are then freed up for other actions. other examples include app...
...ntx = enow.screenx - eprevious.screenx. locked state when pointer lock is enabled, the standard mouseevent properties clientx, clienty, screenx, and screeny are held constant, as if the mouse is not moving. the movementx and movementy properties continue to provide the mouse's change in position. there is no limit to movementx and movementy values if the mouse is continuously moving in a single direction. the concept of the mouse cursor does not exist and the cursor cannot move off the window or be clamped by a screen edge. unlocked state the parameters movementx and movementy are valid regardless of the mouse lock state, and are available even when unlocked for convenience. when the mouse is unlocked, the system cursor can exit and re-enter the browser window. if that happens, movementx and m...

RTCPeerConnection.addTransceiver() - Web APIs
the rtcpeerconnection method addtransceiver() creates a new rtcrtptransceiver and adds it to the set of transceivers associated with the rtcpeerconnection. each transceiver represents a bidirectional stream, with both an rtcrtpsender and an rtcrtpreceiver associated with it. syntax rtptransceiver = rtcpeerconnection.addtransceiver(trackorkind, init); parameters trackorkind a mediastreamtrack to associate with the transceiver, or a domstring which is used as the kind of the receiver's track, and by extension of the rtcrtpreceiver itself. ...
...nd, init); parameters trackorkind a mediastreamtrack to associate with the transceiver, or a domstring which is used as the kind of the receiver's track, and by extension of the rtcrtpreceiver itself. init optional an object that conforms to the rtcrtptransceiverinit dictionary which provides any options that you may wish to specify when creating the new transceiver. possible values are: direction optional the new transceiver's preferred directionality. this value is used to initialize the new rtcrtptransceiver object's rtcrtptransceiver.direction property. sendencodings optional a list of encodings to allow when sending rtp media from the rtcrtpsender. each entry is of type rtcrtpencodingparameters. streams optional a list of mediastream objects to add to the transceiver'srtcrtprecei...

RTCPeerConnection.createOffer() - Web APIs
ven if the local side will be sending audio data. if this value is true, the remote peer will be offered to send audio data, even if the local side will not be sending audio data. the default behavior is to offer to receive audio only if the local side is sending audio, not otherwise. to emulate this behavior in modern implementations, the presence of this member with a value false, will set the direction of all existing audio transceivers to exclude reception (i.e. set to either "sendonly" or "inactive"). in modern implementations, the presence of this member with a value true, will ensure there is at least one transceiver set to receive audio that has not been stopped, and if there isn't one, one will be created. note: you shouldn't use this legacy property. instead, use rtcrtptransceiver to...
...ven if the local side will be sending video data. if this value is true, the remote peer will be offered to send video data, even if the local side will not be sending video data. the default behavior is to offer to receive video only if the local side is sending video, not otherwise. to emulate this behavior in modern implementations, the presence of this member with a value false, will set the direction of all existing video transceivers to exclude reception (i.e. set to either "sendonly" or "inactive"). in modern implementations, the presence of this member with a value true, will ensure there is at least one transceiver set to receive video that has not been stopped, and if there isn't one, one will be created. note: you shouldn't use this legacy property. instead, use rtcrtptransceiver to...

RTCRtpTransceiver.stop() - Web APIs
if it's stopped, the transceiver has been stopped. ...
...s none. return value undefined exceptions invalidstateerror the rtcpeerconnection of which the transceiver is a member is closed. usage notes when you call stop() on a transceiver, the sender immediately stops sending media and each of its rtp streams are closed using the rtcp "bye" message. the receiver then stops receiving media; the receiver's track is stopped, and the transceiver's direction is changed to stopped, and renegotiation is triggered by sending a negotiationneeded event to the rtcpeerconnection. the negotiation process causes currentnegotiation to be set to stopped, finally indicating that the transceiver has been fully stopped. note: stopping the transceiver causes a negotiationneeded event to be sent to the transceiver's rtcpeerconnection, so the connection can adapt ...

RTCRtpTransceiver - Web APIs
this pairing of send and receive srtp streams is significant for some applications, so rtcrtptransceiver is used to represent this pairing, along with other important state from the media section. each non-disabled srtp media section is always represented by exactly one transceiver. ...
...ther important state from the media section. each non-disabled srtp media section is always represented by exactly one transceiver. a transceiver is uniquely identified using its mid property, which is the same as the media id (mid) of its corresponding m-line. an rtcrtptransceiver is associated with an m-line if its mid is non-null; otherwise it's considered disassociated. properties currentdirection read only a string from the enum rtcrtptransceiverdirection which indicates the transceiver's current directionality, or null if the transceiver is stopped or has never participated in an exchange of offers and answers. direction a string from the enum rtcrtptransceiverdirection which is used to set the transceiver's desired direction. mid read only the media id of the m-line associated wi...

Using the Resource Timing API - Web APIs
source timing interfaces. for more details about the interfaces, including examples, see each interface's reference page and the references in the see also section. a live version of the examples is available on github, as is the source code. pull requests and bug reports are welcome. resource loading phases an application can get timestamps for the various phases of resource loading such as redirection, dns lookup, and tcp connection setup. those phases and their property names are illustrated in figure 1. figure 1. resource timing properties an application developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues. timing resource loading phases the following example illustrates using the resource timing pr...
...y names are illustrated in figure 1. figure 1. resource timing properties an application developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues. timing resource loading phases the following example illustrates using the resource timing properties to calculate the amount of time the following phases take: redirection (redirectstart and redirectend ), dns lookup (domainlookupstart and domainlookupend), tcp handshake (connectstart and connectend), and response (responsestart and responseend). this example also calculates the time from the start of the fetch and request start phases (fetchstart and requeststart, respectively), until the response has ended (responseend). this timing data provides a detailed profi...

WebGL constants - Web APIs
alue description no_error 0 returned from geterror. invalid_enum 0x0500 returned from geterror. invalid_value 0x0501 returned from geterror. invalid_operation 0x0502 returned from geterror. out_of_memory 0x0505 returned from geterror. context_lost_webgl 0x9242 returned from geterror. ...
... returned from geterror. out_of_memory 0x0505 returned from geterror. context_lost_webgl 0x9242 returned from geterror. front face directions constants passed to webglrenderingcontext.frontface(). constant name value description cw 0x0900 passed to frontface to specify the front face of a polygon is drawn in the clockwise direction ccw 0x0901 passed to frontface to specify the front face of a polygon is drawn in the counter clockwise direction hints constants passed to webglrenderingcontext.hint() constant name value description dont_care 0x1100 there is no preference for this behavior. fastest 0x1101 the most efficient behavior should be used. ...

Matrix math for the web - Web APIs
roduction code it would be best to use optimized functions. glmatrix is an example of a library that has a focus on speed and performance. the focus in the glmatrix library is to have target arrays that are allocated before the update loop. translation matrix a translation matrix is based upon the identity matrix, and is used in 3d graphics to move a point or object in one or more of the three directions (x, y, and/or z). the easiest way to think of a translation is like picking up a coffee cup. the coffee cup must be kept upright and oriented the same way so that no coffee is spilled. it can move up in the air off the table and around the air in space. you can't actually drink the coffee using only a translation matrix, because to drink it, you have to be able to tilt or rotate the cup to pour...
...50, 100, 0, 1);" let matrix3drule = matrixarraytocssmatrix(translationmatrix); // set the transform moveme.style.transform = matrix3drule; view on jsfiddle scale matrix a scale matrix makes something larger or smaller in one or more of the three dimensions: width, height, and depth. in typical (cartesian) coordinates. this causes stretching or contracting of the object in the corresponding directions. the amount of change to apply to each of the width, height, and depth is placed diagonally starting at the top-left corner and making their way down toward the bottom-right. let w = 1.5; // width (x) let h = 0.7; // height (y) let d = 1; // depth (z) let scalematrix = [ w, 0, 0, 0, 0, h, 0, 0, 0, 0, d, 0, 0, 0, 0, 1 ]; view on jsfiddle ...

Movement, orientation, and motion: A WebXR example - Web APIs
cubeorientation will store the current orientation of the cube, while cubematrix and mousematrix are storage for matrices used during the rendering of the scene. inverseorientation is a quaternion which will be used to represent the rotation to apply to the reference space for the object in the frame being rendered. radians_per_degreee is the value to multi...
...to the individual xrview width multiplied by the number of views; the canvas height is always the same as the viewport's height. the two lines of code that adjust the canvas size are not needed in regular webxr rendering loops. applying the user inputs the applyviewercontrols() function, which is called by drawframe() before beginning to render anything, takes the offsets in each of the three directions, the yaw offset, and the pitch offset as recorded by the handlekeydown() and handlepointermove() functions in response to the user pressing keys and dragging their mouse with the right mouse button pressed. it takes as input the base reference space for the object, and returns a new reference space that alters the location and orientation of the object o match the result of the inputs. function...

Starting up and shutting down a WebXR session - Web APIs
. this is great—if your player's viewpoint starts in the exact center of the world. but most likely, that's not the case at all. if that's so, you call getoffsetreferencespace() on the initial reference space to create a new reference space which offsets the coordinate system so that (0, 0, 0) is located at the position of the viewer, with the orientation likewise shifted to face in the desired direction. the input value into getoffsetreferencespace() is an xrrigidtransform encapsulating the player's position and orientation as specified in the default world coordinates. with the new reference space in hand and stored into the worlddata object for safe-keeping, we call the session's requestanimationframe() method to schedule a callback to be executed when it's time to render the next frame of an...
...ccasionally, discontinuities or jumps in the native origin may occur while tracking the user's position in the world. the most common scenarios in which this happens are when the user requests a recalibration of their xr device or when a hiccup or glitch occurs in the flow of tracking data received from the xr hardware. these situations cause the native origin to jump abruptly by the distance and directional angle necessary to bring the native origin back into alignment with the user's position and facing direction. when this happens, a reset event is sent to the session's xrreferencespace. the event's transform property is an xrrigidtransform detailing the transform needed to realign the native origin. note that the reset event is fired at the xrreferencespace, not the xrsession! another comm...

XRBoundedReferenceSpace.boundsGeometry - Web APIs
he available space, shifted so that the reference space's bounds points are all defined relative to the xrboundedreferencespace's effective origiin. usage notes bounded reference spaces always have their origin located at ground level, where y is 0. as a general rule, with the origin for x and z located in or near the center of the space, and with the orientation set facing in a logical forward direction, as appropriate for the underlying platform or xr hardware. in order to reduce the risk of the room boundaries being used for fingerprinting purposes, each point in the boundsgeometry array may be rounded or adjusted by some amount. the specification recommends that browsers shift the points to the nearest 5 centimeters (while avoiding going outside the physical limitations of the hardware). bo...
...ted by some amount. the specification recommends that browsers shift the points to the nearest 5 centimeters (while avoiding going outside the physical limitations of the hardware). boundary size xrboundedreferencespace is not intended to be used for very large bounded areas. instead, it's meant to be used for one-room spaces with no more than around 15 meters of available movement space in any direction from the native origin. that said, the bounds extend upward indefinitely, since the bounds are defined in only two dimensions. if you need to create a multi-room space, or a space which is very large or needs to have varying floor levels, you should instead use an unbounded xrreferencespace and enforce the bounds on your own, as appropriate. boundary shape the shape defined by boundsgeometry m...

XRInputSource.targetRaySpace - Web APIs
syntax let targetrayspace = xrinputsource.targetrayspace; value an xrspace object—typically an xrreferencespace or xrboundedreferencespace—which represents the position and orientation of the input controller's target ray in virtual space. the native origin of the returned xrspace is located at the point from which the target ray is emitted, and the orientation of the space indicates the direction in which the target ray is pointing. usage notes all input sources—regardless of their targetraymode—have a valid targetrayspace. the exact meaning of this space varies, however, depending on the mode: every gaze input (targetraymode value of gaze), shares the same xrspace object as their target ray space, since the gaze input comes from the viewer's head. this shared space represents th...
...ray outward from the user. for each such input, this example looks for inputs whose targetraymode is tracked-pointer, indicating that the input is in fact intended to represent a targeting device rather than a gazing device, screen tap, or mouse click. for tracked pointers, a function myrendertargetrayasbeam() is called to render a beam from the input controller's virtual position outward in the direction it's pointing. the code should continue to perform tasks such as drawing controllers or any objects representative of the user's hands' positions in the virtual space, as well as any other input-related tasks. function updateinputsources(session, frame, refspace) { for (let source of session.getinputsources()) { let targetraypose = frame.getpose(inputsource.targetrayspace, refspace); ...

XRInputSource - Web APIs
properties gamepad read only a gamepad object describing the state of the buttons and axes on the xr input source, if it is a gamepad or comparable device. ...
... to produce the target ray: gaze, tracked-pointer, or screen. targetrayspaceread only an xrspace object defining the origin of the target ray and the direciton in which it extends. this space is established using the method defined by targetraymode. methods the xrinputsource interface defines no methods. usage notes actions and the target ray if the device provides an indication of the direction in which it is pointed, this is done using a target ray. this is a ray extending from the position of the device outward in the direction in which it is pointed. a target ray emitted by a hand controller. if the device includes a trigger or other squeezable input, such as a hand gesture device that recognizes when the user squeezes their fist, that action is called a primary squeeze action.

XRRigidTransform() - Web APIs
ition optional an object conforming to dompointinit which specifies the coordinates at which the point or object is located. these dimensions are specified in meters. if this parameter is left out or is not compatible with dompointinit, the position used is assumed to be {x: 0, y: 0, z: 0, w: 1}. w must always be 1. ...
... exceptions typeerror the value of the w coordinate in the specified position is not 1.0. examples in this example, the beginning of the animation of a scene is shown, starting with a request for a reference space of a given type, then shifting the coordinate system based on a transform before requesting the first animation frame. ...

XRView - Web APIs
it's computed by inverting then transposing the model view matrix: mat4.invert(normalmatrix, modelviewmatrix); mat4.transpose(normalmatrix, normalmatrix); teleporting an object to programmatically move and/or rotate (often referred to as teleporting) an object, you need to create a new reference space f...
...encespace(newtransform); } this code is broken into four sections. in the first, the quaternion inverseorientation is computed. this represents the rotation of the object given the values of mousepitch (rotation around the object's reference's space's x axis) and mouseyaw (rotation around the object's y axis). the second section computes the "up" vector for the object. this vector indicates the direction which is "up" in the scene overall, but in the object's reference space. the third section creates the new xrrigidtransform, specifying a point providing the offsets along the three axes as the first parameter, and the orientation quaternion as the second parameter. the returned object's matrix property is the actual matrix that transforms points from the scene's reference space to the object's ...

XRViewerPose - Web APIs
one after another. by calling viewport() on the webgl context, specifying the xrview as input, you can get the viewport to use when rendering in order to draw the frame for that eye into the correct part of the drawing surface. ...
... examples in this example—part of the code to render an xrframe, getviewerpose() is called to get an xrviewerpose using the same reference space the code is using as its base reference space. ...

:dir() - CSS: Cascading Style Sheets
the :dir() css pseudo-class matches elements based on the directionality of the text contained in them. /* selects any element with right-to-left text */ :dir(rtl) { background-color: red; } the :dir() pseudo-class uses only the semantic value of the directionality, i.e., the one defined in the document itself. it doesn't account for styling directionality, i.e., the directionality set by css properties such as direction. note: be aware that the behavior of the :dir() pseudo-class is not equivalent to the [dir=…] attribute selectors. the latter match the html dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (similarly, [dir=rtl] and [dir=ltr] won't match the auto value.) in contrast, :dir() will match the value calculated by the user a...
... behavior of the :dir() pseudo-class is not equivalent to the [dir=…] attribute selectors. the latter match the html dir attribute, and ignore elements that lack it — even if they inherit a direction from their parent. (similarly, [dir=rtl] and [dir=ltr] won't match the auto value.) in contrast, :dir() will match the value calculated by the user agent, even if inherited. note: in html, the direction is determined by the dir attribute. other document types may have different methods. syntax the :dir() pseudo-class requires one parameter, representing the text directionality you want to target. parameters ltr target left-to-right elements. rtl target right-to-left elements. formal syntax :dir( ltr | rtl ) examples html <div dir="rtl"> <span>test1</span> <div dir="ltr">test2...

Box-shadow generator - CSS: Cascading Style Sheets
'node'; layer.setattribute('data-shid', uid); layer.setattribute('data-type', 'layer'); layer.textcontent = 'shadow ' + uid; del.classname = 'delete'; del.setattribute('data-type', 'delete'); layer.appendchild(del); return layer; } stack.prototype.getuid = function getuid() { return this.uid++; } // solve ie bug stack.prototype.movelayer = function movelayer(direction) { if (this.count <= 1 || this.layer === null) return; if (direction === -1 && this.layerid === (this.count - 1) ) return; if (direction === 1 && this.layerid === 0 ) return; if (direction === -1) { var before = null; tool.swapshadow(this.layerid, this.layerid + 1); this.swaporder(this.layerid, this.layerid + 1); this.layerid += 1; if (this.layerid + ...
...0 ) return; if (direction === -1) { var before = null; tool.swapshadow(this.layerid, this.layerid + 1); this.swaporder(this.layerid, this.layerid + 1); this.layerid += 1; if (this.layerid + 1 !== this.count) before = this.stack.children[this.layerid + 1]; this.stack.insertbefore(this.layer, before); tool.setactiveshadow(this.layerid, false); } if (direction === 1) { tool.swapshadow(this.layerid, this.layerid - 1); this.swaporder(this.layerid, this.layerid - 1); this.layerid -= 1; this.stack.insertbefore(this.layer, this.stack.children[this.layerid]); tool.setactiveshadow(this.layerid, false); } } stack.prototype.swaporder = function swaporder(pos1, pos2) { var x = this.order[pos1]; this.order[pos1] = this.order[pos2...

Box alignment in grid layout - CSS: Cascading Style Sheets
areas is controlled with align-items. the first item overrides the align-items value set on the group by setting align-self to center. grid axes as a two-dimensional layout method, when working with grid layout we always have two axes on which to align our items. we have access to all of the box alignment properties to help us achieve this. the inline axis is the axis that corresponds to the direction that words in a sentence would run in the writing mode used. therefore, in a horizontal language such as english or arabic the inline direction runs horizontally. should you be in a vertical writing mode the inline axis will run vertically. to align things on the inline axis you use the properties that start with justify-, justify-content, justify-items and justify-self. the block axis crosse...
...this, therefore is the block dimension. to align things on the block axis you use the properties that start with align-, align-content, align-items and align-self. ...

CSS Box Alignment - CSS: Cascading Style Sheets
re laid out and it runs across the inline axis. when aligning items on the inline axis you will use the properties which begin with justify-: justify-items justify-self justify-content when aligning items on the block axis you will use the properties that begin align-: align-items align-self align-content flexbox adds an additional complication in that the above is true when flex-direction is set to row. the properties are swapped when flexbox is set to column. therefore, when working with flexbox it is easier to think about the main and cross axis rather than inline and block. the justify- properties are always used to align on the main axis, the align- properties on the cross axis. the alignment subject the alignment subject is the thing that is being aligned. for justify-self ...
... used with the align-content and justify-content properties. these keywords define what happens to any additional space after alignment subjects have been displayed. the values are as follows: stretch space-between space-around space-evenly for example, in flex layout items are aligned with flex-start initially. working in a horizontal top to bottom writing mode such as english, with flex-direction as row the items start on the far left and any available space after displaying the items is placed after the items. if you set justify-content: space-between on the flex container, the available space is now shared out and placed between the items. there needs to be space available in the dimension you wish to align the items in, in order for these keywords to take effect. with no space, t...

Handling Overflow in Multicol - CSS: Cascading Style Sheets
. more columns than will fit how overflowing columns are handled depends on whether you are in a fragmented media context, such as print, or a continuous media context, such as a web page. in fragmented media, once a fragment (for example a page) is filled with columns, the columns will move to a new page and fill that up with columns. in continuous media, columns will overflow in the inline direction. on the web this means that you will get a horizontal scrollbar. the example below shows this overflow behaviour. my multicol container has a height and there is more text than space to create columns, therefore we get columns created outside of the container. in a future version of the specification it would be useful to be able to have overflow columns in continuous media display in the blo...
...n the web this means that you will get a horizontal scrollbar. the example below shows this overflow behaviour. my multicol container has a height and there is more text than space to create columns, therefore we get columns created outside of the container. in a future version of the specification it would be useful to be able to have overflow columns in continuous media display in the block direction, therefore allowing the reader to scroll down to view the next set of columns. using vertical media queries one issue with multicol on the web is that, if your columns are taller than the viewport, the reader will need to scroll up and down to read, which is not good user experience. one way to avoid this is to only apply the column properties if you know you have enough height. in the example...

Controlling Ratios of Flex Items Along the Main Axis - CSS: Cascading Style Sheets
-content have as we explore flex-grow and flex-shrink later in this article. positive and negative free space to talk about these properties we need to understand the concept of positive and negative free space. when a flex container has positive free space, it has more space than is required to display the flex items inside the container. for example, if i have a 500 pixel-wide container, flex-direction is row, and i have three flex items each 100 pixels wide, then i have 200 pixels of positive free space, which could be distributed between the items if i wanted them to fill the container. we have negative free space when the natural size of the items adds up to larger than the available space in the flex container. if i have a 500 pixel-wide container like the one above, but the three flex i...
...s are each 200 pixels wide, the total space i need will be 600 pixels, so i have 100 pixels of negative free space. this could be removed from the items in order to make them fit the container. it is this distribution of positive free space and removal of negative free space that we need to understand in order to understand the flex properties. in the following examples i am working with flex-direction set to row, therefore the size of items will always come from their width. we will be calculating the positive and negative free space created by comparing the total width of all the items with the container width. you could equally try out each example with flex-direction: column. the main axis would then be the column, and you would then need to compare the height of the items and that of the c...

Flow Layout and Overflow - CSS: Cascading Style Sheets
rogrammatic scrolling, the box becomes non-scrollable. in addition it does not create a block formatting context. the overflow property is in reality a shorthand for the overflow-x and overflow-y properties. if you specify only one value for overflow, this value is used for both axes. however, you can specify both values in which case the first is used for overflow-x and therefore the horizontal direction, and the second for overflow-y and the vertical direction. in the below example, i have only specified overflow-y: scroll so we do not get the unwanted horizontal scrollbar. flow relative properties in the guide to writing modes and flow layout, we looked at the newer properties of block-size and inline-size which make more sense when working with different writing modes than tying our layout...
...currently do not have implementations in browsers, so you will need to use the physical properties at the present time and adjust for your writing mode. indicating overflow in the level 3 overflow specification we have some properties which can help improve the way content looks in an overflow situation. inline-axis overflow the text-overflow property deals with text overflowing in the inline direction. it takes one of two values clip, in which case content is clipped when it overflows, this is the initial value and therefore the default behaviour. we also have ellipsis which renders an ellipsis, which may be replaced with a better character for the language or writing mode in use. block-axis overflow there is also a proposal for a block-overflow property, although at the time of writing th...

Line-based placement with CSS Grid - CSS: Cascading Style Sheets
lass="wrapper"> <div class="box1">one</div> <div class="box2">two</div> <div class="box3">three</div> <div class="box4">four</div> </div> .box1 { grid-area: 1 / 1 / 4 / 2; } .box2 { grid-area: 1 / 3 / 3 / 4; } .box3 { grid-area: 1 / 2 / 2 / 3; } .box4 { grid-area: 3 / 2 / 4 / 4; } this order of values for grid-area can seem a little strange, it is the opposite of the direction in which we specify margins and padding as a shorthand for example. it may help to realize that this is due to grid using the flow-relative directions defined in the css writing modes specification. we will explore how grids work with writing modes in a later article however we have the concept of four flow-relative directions: block-start block-end inline-start inline-end we are working ...
...ting mode, inline-end is the final column line of our grid. when we specify our grid area using the grid-area property we first define both start lines block-start and inline-start, then both end lines block-end and inline-end. this seems unusual at first as we are used to the physical properties of top, right, bottom and left but makes more sense if you start to think of websites as being multi-directional in writing mode. counting backwards we can also count backwards from the block and inline end of the grid, for english that would be the right hand column line and final row line. these lines can be addressed as -1, and you can count back from there – so the penultimate line is -2. it is worth noting that the final line is the final line of the explicit grid, the grid defined by grid-templa...

Basic concepts of Logical Properties and Values - CSS: Cascading Style Sheets
use. therefore, in an english document with the text running horizontally left to right, or an arabic document with the text running horizontally right to left, the inline dimension is horizontal. switch to a vertical writing mode (e.g. a japanese document) and the inline dimension is now vertical, as lines in that writing mode run vertically. ...
...e.g. a japanese document) and the inline dimension is now vertical, as lines in that writing mode run vertically. the block dimension is the other dimension, and the direction in which blocks — such as paragraphs — display one after the other. in english and arabic these run vertically, whereas in any vertical writing mode these run horizontally. the below diagram shows the inline and block directions in a horizontal writing mode: this diagram shows block and inline in a vertical writing mode: browser support logical properties and values can be thought of as a couple of groups in terms of current browser support. some of the properties are essentially mappings from the physical versions, for example inline-size for width or margin-inline-start rather than margin-left. these mapped pro...

Basic concepts of CSS Scroll Snap - CSS: Cascading Style Sheets
nap scrolling to certain points as the user scrolls through a document. this can be helpful in creating a more app-like experience on mobile or even on the desktop for some types of applications. basics of scroll snap the key properties of the scroll snap specification are scroll-snap-type and scroll-snap-align. ...
...this could be x or y, or the logical mappings block or inline. you can also use the keyword both to have scroll snapping work along both axes. you can also pass in the keywords mandatory, or proximity. the mandatory keyword tells the browser whether the content has to snap to a certain point, no matter where the scroll is. ...

Using CSS transforms - CSS: Cascading Style Sheets
75px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rg...
...; margin: 24px; border: none; } .cube { width: 100%; height: 100%; backface-visibility: visible; perspective: 300px; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rgba(1...

CSS Writing Modes - CSS: Cascading Style Sheets
css writing modes is a css module that defines various international writing modes, such as left-to-right (e.g. used by latin and indic scripts), right-to-left (e.g. used by hebrew or arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some asian scripts). ...
... css writing modes is a css module that defines various international writing modes, such as left-to-right (e.g. used by latin and indic scripts), right-to-left (e.g. used by hebrew or arabic scripts), bidirectional (used when mixing left-to-right and right-to-left scripts) and vertical (e.g. used by some asian scripts). ...

Mozilla CSS extensions - CSS: Cascading Style Sheets
illa-only properties and pseudo-classes (avoid using on websites) note: these properties and pseudo-classes will only work in mozilla applications such as firefox, and are not on a standards track. some of them apply only to xul elements. ...
...ximize the compatibility of your css, you should use the unprefixed standard properties instead of the prefixed ones listed below. once a given property is standardized and implemented without the prefix, the prefixed version is typically dropped after a while. ...

CSS reference - CSS: Cascading Style Sheets
y, please see at-rule to find the syntax of the specific one you want. keyword index note: the property names in this index do not include the javascript names where they differ from the css standard names. ...
...rset:checkedcircle()clamp()clearclipclip-pathcm<color>colorcolor-adjustcolumn-countcolumn-fillcolumn-gapcolumn-rulecolumn-rule-colorcolumn-rule-stylecolumn-rule-widthcolumn-spancolumn-widthcolumnsconic-gradient()containcontentcontrast()<counter>counter-incrementcounter-resetcounter-set@counter-stylecounters()cross-fade()cubic-bezier()::cue::cue-regioncursor<custom-ident>d:defaultdeg<dimension>:dirdirection:disableddisplay<display-box><display-inside><display-internal><display-legacy><display-listitem><display-outside>dpcmdpidppxdrop-shadow()eelement()ellipse()em:emptyempty-cells:enabledenv()exffallback (@counter-style)filter<filter-function>:first:first-child::first-letter (:first-letter)::first-line (:first-line):first-of-typefit-content()<flex>flexflex-basisflex-directionflex-flowflex-growflex-sh...

all - CSS: Cascading Style Sheets
the all shorthand css property resets all of an element's properties except unicode-bidi, direction, and css custom properties. it can set properties to their initial or inherited values, or to the values specified in another stylesheet origin. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. syntax /* global values */ all: initial; all: inherit; all: unset; /* css cascading and inheritance level 4 */ all: revert; the all property is specified as one of the css global keyword values. note that none of these values affect the unicode-bidi and direction properties. values initial specifies that all the element's pr...
...d for the element. for purposes of revert, the author origin includes the override and animation origins. formal definition initial valuethere is no practical initial value for it.applies toall elementsinheritednocomputed valueas the specified value applies to each property this is a shorthand for.animation typeas each of the properties of the shorthand (all properties but unicode-bidi and direction) formal syntax initial | inherit | unset | revert examples html <blockquote id="quote"> lorem ipsum dolor sit amet, consectetur adipiscing elit. </blockquote> phasellus eget velit sagittis. css body { font-size: small; background-color: #f0f0f0; color: blue; } blockquote { background-color: skyblue; color: red; } result no all property <blockquote id="quote">lorem ipsum d...

background-repeat - CSS: Cascading Style Sheets
repeat-y no-repeat repeat repeat repeat repeat space space space round round round no-repeat no-repeat no-repeat in the two-value syntax, the first value represents the horizontal repetition behavior and the second value represents the vertical behavior. here is an explanation of how each option works for either direction: repeat the image is repeated as much as needed to cover the whole background image painting area. the last image will be clipped if it doesn't fit. space the image is repeated as much as possible without clipping. the first and last images are pinned to either side of the element, and whitespace is distributed evenly between the images. the background-position ...
... matched with a different value of background-repeat. specifications specification status comment css backgrounds and borders module level 3the definition of 'background-repeat' in that specification. candidate recommendation adds support for multiple background images, the two-value syntax allowing distinct repetition behavior for the horizontal and vertical directions, the space and round keywords, and for backgrounds on inline-level elements by precisely defining the background painting area. css level 2 (revision 1)the definition of 'background-repeat' in that specification. recommendation no significant changes. css level 1the definition of 'background-repeat' in that specification. recommendation initial definition. ...

border-block-end-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-block-end-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-block-end-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-block-start-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-block-start-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-block-start-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-inline-color - CSS: Cascading Style Sheets
border-inline-color: yellow; border-inline-color: #f5f6f7; the border color in the other dimension can be set with border-block-color which sets border-block-start-color, and border-block-end-color. ...
... border-inline-color: yellow; border-inline-color: #f5f6f7; the border color in the other dimension can be set with border-block-color which sets border-block-start-color, and border-block-end-color. ...

border-inline-end-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-inline-end-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-inline-end-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-inline-start-color - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-inline-start-style - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

border-inline-start-width - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. ...
... the source for this interactive example is stored in a github repository. ...

box-align - CSS: Cascading Style Sheets
warning: this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard. the box-align css property specifies how an element aligns its contents across its layout in a perpendicular direction. the effect of the property is only visible if there is extra space in the box. see flexbox for information about the current standard. /* keyword values */ box-align: start; box-align: center; box-align: end; box-align: baseline; box-align: stretch; /* global values */ box-lines: inherit; box-lines: initial; box-lines: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-align property is specified as one of the keyword values listed below. values start the box aligns contents...
...upport no support no supportnon-standard. expect poor cross-browser support.non-standard. expect poor cross-browser support.deprecated. not for use in new websites.deprecated. not for use in new websites.requires a vendor prefix or different name for use.requires a vendor prefix or different name for use. see also align-items, box-orient, box-direction, box-pack ...

box-ordinal-group - CSS: Cascading Style Sheets
y a newer standard. see flexbox for information about the current standard. the box-ordinal-group css property assigns the flexbox's child elements to an ordinal group. /* <integer> values */ box-ordinal-group: 1; box-ordinal-group: 5; /* global values */ box-ordinal-group: inherit; box-ordinal-group: initial; box-ordinal-group: unset; ordinal groups may be used in conjunction with the box-direction property to control the order in which the direct children of a box appear. when the computed box-direction is normal, a box will display its elements starting from the lowest numbered ordinal group and ensure that those elements appear to the left (for horizontal boxes) or at the top (for vertical boxes) of the container. elements with the same ordinal group are flowed in the order they appear i...
... syntax the box-ordinal-group property is specified as any positive <integer>. ...

box-pack - CSS: Cascading Style Sheets
this is a property of the original css flexible box layout module draft, and has been replaced by a newer standard. see flexbox for information about the current standard. the -moz-box-pack and -webkit-box-pack css properties specify how a -moz-box or -webkit-box packs its contents in the direction of its layout. the effect of this is only visible if there is extra space in the box. /* keyword values */ box-pack: start; box-pack: center; box-pack: end; box-pack: justify; /* global values */ box-pack: inherit; box-pack: initial; box-pack: unset; the direction of layout depends on the element's orientation: horizontal or vertical. syntax the box-pack property is specified as one of the keyword values listed below. values start the box packs contents at the start, leaving any ...
...d. end the box packs contents at the end, leaving any extra space at the start. justify the space is divided evenly in-between each child, with none of the extra space placed before the first child or after the last child. if there is only one child, treat the value as if it were start. notes the edge of the box designated the start for packing purposes depends on the box's orientation and direction: normal reverse horizontal left right vertical top bottom the edge opposite to the start is designated the end. if the packing is set using the element's pack attribute, then the style is ignored. formal definition initial valuestartapplies toelements with a css display value of -moz-box, -moz-inline-box, -webkit-box or -webkit-inline-boxin...

conic-gradient() - CSS: Cascading Style Sheets
d); /* colorwheel */ background: conic-gradient( hsl(360, 100%, 50%), hsl(315, 100%, 50%), hsl(270, 100%, 50%), hsl(225, 100%, 50%), hsl(180, 100%, 50%), hsl(135, 100%, 50%), hsl(90, 100%, 50%), hsl(45, 100%, 50%), hsl(0, 100%, 50%) ); values <angle> preceded by the from keyterm, and taking an angle as its value, defines the gradient rotation in clockwise direction. <position> using the same length, order and keyterm values as the background-position property, the position defines center of the gradient. if omitted, the default value is center, meaing the gradient will be centered, . <angular-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (an <angle> along the gradient's circumference axis). <color-hint> th c...
...l-gradient syntax, but the color-stops are placed around a gradient arc, the circumference of a circle, rather than on the gradient line emerging from the center of the gradient. with conic gradients, the colors transition as as if spun around the center of a circle, starting at the top and going clockwise. in a radial gradient, the colors transition from the center of an ellipse, outward, in all directions. a conic gradient is specified by indicating a rotation angle, the center of the gradient, and then specifying a list of color-stops. unlike linear and radial gradients, whose color-stops are placed by specifying a length, the color-stops of a conic gradient are specified with an angle. units include deg for degrees, grad for gradients, rad for radians, and turn for turns. there are 360 degre...

cursor - CSS: Cascading Style Sheets
bug 275173: on windows and mac os x, no-drop is the same as not-allowed. not-allowed the requested action will not be carried out. grab something can be grabbed (dragged to be moved). grabbing something is being grabbed (dragged to be moved). resizing & scrolling all-scroll something can be scrolled in any direction (panned). bug 275174: on windows, all-scroll is the same as move. col-resize the item/column can be resized horizontally. often rendered as arrows pointing left and right with a vertical bar separating them. row-resize the item/row can be resized vertically. often rendered as arrows pointing up and down with a horizontal bar separating them. ...
... with a vertical bar separating them. row-resize the item/row can be resized vertically. often rendered as arrows pointing up and down with a horizontal bar separating them. n-resize some edge is to be moved. for example, the se-resize cursor is used when the movement starts from the south-east corner of the box. in some environments, an equivalent bidirectional resize cursor is shown. for example, n-resize and s-resize are the same as ns-resize. e-resize s-resize w-resize ne-resize nw-resize se-resize sw-resize ew-resize bidirectional resize cursor. ns-resize nesw-resize ...

flex-wrap - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. see using css flexible boxes for more properties and information. ...
.../* global values */ flex-wrap: inherit; flex-wrap: initial; flex-wrap: unset; the flex-wrap property is specified as a single keyword chosen from the list of values below. values the following values are accepted: nowrap the flex items are laid out in a single line which may cause the flex container to overflow. the cross-start is either equivalent to start or before depending on the flex-direction value. this is the default value. wrap the flex items break into multiple lines. the cross-start is either equivalent to start or before depending flex-direction value and the cross-end is the opposite of the specified cross-start. wrap-reverse behaves the same as wrap but cross-start and cross-end are permuted. formal definition initial valuenowrapapplies toflex containersinheritednocompu...

inset-block-end - CSS: Cascading Style Sheets
the inset-block-end css property defines the logical block end offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-end: 3px; inset-block-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-end: 10%; /* keyword value */ inset-block-end: auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property. formal definition initial valueautoapplies topositioned elementsinheritednope...
...auto; /* global values */ inset-block-end: inherit; inset-block-end: initial; inset-block-end: unset; syntax values the inset-block-end property takes the same values as the left property. ...

inset-block-start - CSS: Cascading Style Sheets
the inset-block-start css property defines the logical block start offset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block-start: 3px; inset-block-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-block-start: 10%; /* keyword value */ inset-block-start: auto; /* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property. formal definition initial valueautoapplies topositioned e...
...* global values */ inset-block-start: inherit; inset-block-start: initial; inset-block-start: unset; syntax values the inset-block-start property takes the same values as the left property. ...

inset-block - CSS: Cascading Style Sheets
the inset-block css property defines the logical block start and end offsets of an element, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-block: 3px 10px; inset-block: 2.4em 3em; inset-block: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-block: 10% 5%; /* keyword value */ inset-block: auto; /* global values */ inset-block: inherit; inset-block: initial; inset-block: unset; constituent properties this property is a shorthand for the following css properties: inset-block-end inset-b...
...rties this property is a shorthand for the following css properties: inset-block-end inset-block-start syntax values the inset-block property takes the same values as the left property. ...

inset-inline-end - CSS: Cascading Style Sheets
the inset-inline-end css property defines the logical inline end inset of an element, which maps to a physical inset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-end: 3px; inset-inline-end: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-end: 10%; /* keyword value */ inset-inline-end: auto; /* global values */ inset-inline-end: inherit; inset-inline-end: initial; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-end property takes the same values as the left prop...
...; inset-inline-end: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-end property takes the same values as the left property. ...

inset-inline-start - CSS: Cascading Style Sheets
the inset-inline-start css property defines the logical inline start inset of an element, which maps to a physical offset depending on the element's writing mode, directionality, and text orientation. it corresponds to the top, right, bottom, or left property depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline-start: 3px; inset-inline-start: 2.4em; /* <percentage>s of the width or height of the containing block */ inset-inline-start: 10%; /* keyword value */ inset-inline-start: auto; /* global values */ inset-inline-start: inherit; inset-inline-start: initial; inset-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-start property takes the same va...
...set-inline-start: unset; the shorthand for inset-inline-start and inset-inline-end is inset-inline. syntax values the inset-inline-start property takes the same values as the left property. ...

inset-inline - CSS: Cascading Style Sheets
the inset-inline css property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. it corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation. /* <length> values */ inset-inline: 3px 10px; inset-inline: 2.4em 3em; inset-inline: 10px; /* value applied to start and end */ /* <percentage>s of the width or height of the containing block */ inset-inline: 10% 5%; /* keyword value */ inset-inline: auto; /* global values */ inset-inline: inherit; inset-inline: initial; inset-inline: unset; constituent properties this property is a shorthand for the following css properties: ...
...ies this property is a shorthand for the following css properties: inset-inline-end inset-inline-start syntax values the inset-inline property takes the same values as the left property. ...

inset - CSS: Cascading Style Sheets
it has the same multi-value syntax of the margin shorthand. it is a shorthand that corresponds to the top, right, bottom, and/or left properties. ...
...% 5% 5% 5%; /* keyword value */ inset: auto; /* global values */ inset: inherit; inset: initial; inset: unset; syntax values the inset property takes the same values as the left property. ...

margin-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... it relates to margin-block-start, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-end property takes the same values as the margin-left property. formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding...

margin-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... it relates to margin-block-end, margin-inline-start, and margin-inline-end, which define the other margins of the element. values the margin-block-start property takes the same values as the margin-left property. formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the corresponding...

margin-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

margin-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
... the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...

margin-inline - CSS: Cascading Style Sheets
the margin-inline css shorthand property is a shorthand property that defines both the logical inline start and end margins of an element, which maps to physical margins depending on the element's writing mode, directionality, and text orientation. /* <length> values */ margin-inline: 10px 20px; /* an absolute length */ margin-inline: 1em 2em; /* relative to the text size */ margin-inline: 5% 2%; /* relative to the nearest block container's width */ margin-inline: 10px; /* sets both start and end values */ /* keyword values */ margin-inline: auto; /* global values */ margin-inline: inherit; margin-inline: initial; margin-inline: unset; this property corresponds to the margin-top and margin-bottom, or margin-right, and margin-left properties, depending on the values defined for ...
... constituent properties this property is a shorthand for the following css properties: margin-inline-end margin-inline-start syntax values the margin-inline property takes the same values as the margin-left property. formal definition initial value0applies tosame as margininheritednopercentagesdepends on layout modelcomputed valueif specified as a length, the cor...

max-block-size - CSS: Cascading Style Sheets
the max-block-size css property specifies the maximum size of an element in the direction opposite that of the writing direction as specified by writing-mode. that is, if the writing direction is horizontal, then max-block-size is equivalent to max-height; if the writing direction is vertical, max-block-size is the same as max-width. the other dimension's maximum length is specified using the max-inline-size property. this is useful because the max-width is always used for horizontal sizes and max-height is always used for vertical sizes, and if you need to set lengths based on the size of your text content, you need to be able to do so with the writing direction in mind. any time you would normally use max-height or max-width, you should instead use max-block-size to set the maximum "height" o...
... calculate and select a max-width for the specified element. none no limit on the size of the box. max-content the intrinsic preferred max-width. min-content the intrinsic minimum max-width. fit-content(<length-percentage>) uses the fit-content formula with the available space replaced by the specified argument, i.e. min(max-content, max(min-content, argument)). ...

overscroll-behavior-block - CSS: Cascading Style Sheets
see overscroll-behavior for a full explanation. /* keyword values */ overscroll-behavior-block: auto; /* default */ overscroll-behavior-block: contain; overscroll-behavior-block: none; /* global values */ overscroll-behavior-block: inherit; overscroll-behavior-block: initial; overscroll-behavior-block: unset; syntax the overscroll-behavior-block property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. ...
...it so the page will scroll vertically. the inner box has a small width (and height) set on it so it sits comforably inside the viewport, but its content is given a large height so it will also scroll vertically. by default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. to avoid this happening in the block direction, we've set overscroll-behavior-block: contain on the inner box. html <main> <div> <div> <p><code>overscroll-behavior-block</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 3000px; width: 500px; background-color: white; backgroun...

overscroll-behavior-inline - CSS: Cascading Style Sheets
see overscroll-behavior for a full explanation. /* keyword values */ overscroll-behavior-inline: auto; /* default */ overscroll-behavior-inline: contain; overscroll-behavior-inline: none; /* global values */ overscroll-behavior-inline: inherit; overscroll-behavior-inline: initial; overscroll-behavior-inline: unset; syntax the overscroll-behavior-inline property is specified as a keyword chosen from the list of values below. values auto the default scroll overflow behavior occurs as normal. ...
...o the page will scroll horizontally. the inner box has a small width (and height) set on it so it sits comforably inside the viewport, but its content is given a large width so it will also scroll horizontally. by default, when the inner box is scrolled and a scroll boundary is reached, the whole page will begin to scroll, which is probably not what we want. to avoid this happening in the inline direction, we've set overscroll-behavior-inline: contain on the inner box. html <main> <div> <div> <p><code>overscroll-behavior-inline</code> has been used to make it so that when the scroll boundaries of the yellow inner box are reached, the whole page does not begin to scroll.</p> </div> </div> </main> css main { height: 400px; width: 3000px; background-color: white; backgro...

padding-block-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ive to the block container's width */ /* global values */ padding-block-end: inherit; padding-block-end: initial; padding-block-end: unset; values the padding-block-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-inline-start, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block end padding for vertical te...

padding-block-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...he block container's width */ /* global values */ padding-block-start: inherit; padding-block-start: initial; padding-block-start: unset; values the padding-block-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-end, padding-inline-start, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting block start padding for vertical text...

padding-block - CSS: Cascading Style Sheets
the padding-block css shorthand property defines the logical block start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. ...
... constituent properties this property is a shorthand for the following css properties: padding-block-end padding-block-start syntax values the padding-block property takes the same values as the padding-left property. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typ...

padding-inline-end - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...to the block container's width */ /* global values */ padding-inline-end: inherit; padding-inline-end: initial; padding-inline-end: unset; values the padding-inline-end property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-block-end, and padding-inline-start, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline end padding for vertical text...

padding-inline-start - CSS: Cascading Style Sheets
the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. ...
...ock container's width */ /* global values */ padding-inline-start: inherit; padding-inline-start: initial; padding-inline-start: unset; values the padding-inline-start property takes the same values as the padding-left property. description this property corresponds to the padding-top, padding-right, padding-bottom, or padding-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to padding-block-start, padding-block-end, and padding-inline-end, which define the other paddings of the element. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typea length formal syntax <'padding-left'> examples setting inline start padding for vertical text...

padding-inline - CSS: Cascading Style Sheets
the padding-inline css shorthand property defines the logical inline start and end padding of an element, which maps to physical padding properties depending on the element's writing mode, directionality, and text orientation. /* <length> values */ padding-inline: 10px 20px; /* an absolute length */ padding-inline: 1em 2em; /* relative to the text size */ padding-inline: 10px; /* sets both start and end values */ /* <percentage> values */ padding-inline: 5% 2%; /* relative to the nearest block container's width */ /* global values */ padding-inline: inherit; padding-inline: initial; padding-inline: unset; constituent properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property ...
...properties this property is a shorthand for the following css properties: padding-inline-end padding-inline-start syntax values the padding-inline property takes the same values as the padding-left property. description values for this property correspond to the padding-top and padding-bottom, or padding-right, and padding-left property depending on the values defined for writing-mode, direction, and text-orientation. formal definition initial value0applies toall elementsinheritednopercentageslogical-width of containing blockcomputed valueas <length>animation typediscrete formal syntax <'padding-left'>{1,2} examples setting inline padding for vertical text html <div> <p class="exampletext">example text</p> </div> css div { background-color: yellow; width: 120px; height...

repeating-linear-gradient() - CSS: Cascading Style Sheets
the function's result is an object of the <gradient> data type, which is a special kind of <image>. the source for this interactive example is stored in a github repository. ...
...indicates the horizontal side (left or right), and the other the vertical side (top or bottom). the order of the side keywords does not matter. if unspecified, it defaults to to bottom. the values to top, to bottom, to left, and to right are equivalent to the angles 0deg, 180deg, 270deg, and 90deg respectively. the other values are translated into an angle. <angle> the gradient line's angle of direction. a value of 0deg is equivalent to to top; increasing values rotate clockwise from there. <linear-color-stop> a color-stop's <color> value, followed by one or two optional stop positions, (each being either a <percentage> or a <length> along the gradient's axis). a percentage of 0%, or a length of 0, represents the start of the gradient; the value 100% is 100% of the image size, meaning the grad...

touch-action - CSS: Cascading Style Sheets
additional non-standard gestures such as double-tap to zoom. disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. this is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid). ...
...e-tap to zoom. disabling double-tap to zoom removes the need for browsers to delay the generation of click events when the user taps the screen. this is an alias for "pan-x pan-y pinch-zoom" (which, for compatibility, is itself still valid). pan-left, pan-right, pan-up, pan-down enable single-finger gestures that begin by scrolling in the given direction(s). once scrolling has started, the direction may still be reversed. note that scrolling "up" (pan-up) means that the user is dragging their finger downward on the screen surface, and likewise pan-left means the user is dragging their finger to the right. multiple directions may be combined except when there is a simpler representation (for example, "pan-left pan-right" is invalid since "pan-x" is simpler, but "pan-left pan-down" is valid). ...

scale() - CSS: Cascading Style Sheets
the scale() css function defines a transformation that resizes an element on the 2d plane. because the amount of scaling is defined by a vector, it can resize the horizontal and vertical dimensions at different scales. its result is a <transform-function> data type. this scaling transformation is characterized by a two-dimensional vector. its coordinates define how much scaling is done in each direction. if both coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. note: the scale() function ...
...the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. note: the scale() function only scales in 2d. to scale in 3d, use scale3d() instead. syntax the scale() function is specified with either one or two values, which represent the amount of scaling to be applied in each direction. scale(sx) scale(sx, sy) values sx a <number> representing the abscissa of the scaling vector. sy a <number> representing the ordinate of the scaling vector. if not defined, its default value is sx, resulting in a uniform scaling that preserves the element's aspect ratio. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 h...

scale3d() - CSS: Cascading Style Sheets
lt is a <transform-function> data type. the source for this interactive example is stored in a github repository. if you'd like to contribute to the interactive examples project, please clone https://github.com/mdn/interactive-examples and send us a pull request. this scaling transformation is characterized by a three-dimensional vector. its coordinates define how much scaling is done in each direction. if all three coordinates are equal, the scaling is uniform (isotropic) and the aspect ratio of the element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. syntax the scale3d() ...
...element is preserved (this is a homothetic transformation). when a coordinate value is outside the [-1, 1] range, the element grows along that dimension; when inside, it shrinks. if it is negative, the result a point reflection in that dimension. a value of 1 has no effect. syntax the scale3d() function is specified with three values, which represent the amount of scaling to be applied in each direction. scale3d(sx, sy, sz) values sx is a <number> representing the abscissa of the scaling vector. sy is a <number> representing the ordinate of the scaling vector. sz is a <number> representing the z-component of the scaling vector. cartesian coordinates on ℝ2 homogeneous coordinates on ℝℙ2 cartesian coordinates on ℝ3 homogeneous coordinates on ℝℙ3 ...

Event reference
ts children. mouseup a pointing device button is released over an element. pointerlockchange the pointer was locked or released. pointerlockerror it was impossible to lock the pointer for technical reasons or because the permission was denied. select some text is being selected. wheel a wheel button of a pointing device is rotated in any direction. drag & drop events event name fired when drag an element or text selection is being dragged (fired continuously every 350ms). dragend a drag operation is being ended (by releasing a mouse button or hitting the escape key). dragenter a dragged element or text selection enters a valid drop target. dragstart the user starts...
... completed. visibilitychange event page visibility the content of a tab has become visible or has been hidden. volumechange event html5 media the volume has changed. waiting event html5 media playback has stopped because of a temporary lack of data. wheel wheelevent dom l3 a wheel button of a pointing device is rotated in any direction. non-standard events event name event type specification fired when... afterscriptexecute event mozilla specific a script has been executed. beforescriptexecute event mozilla specific a script is about to be executed. beforeinstallprompt event chrome specific a user is prompted to save a website to a home screen...

<input type="number"> - HTML: Hypertext Markup Language
r equal to the value of the max attribute. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as seman...
...ue otherwise, and an appropriate default value if neither of those is provided) are valid. a string value of any means that no stepping is implied, and any value is allowed (barring other constraints, such as min and max). note: when the data entered by the user doesn't adhere to the stepping configuration, the user agent may round to the nearest valid value, preferring numbers in the positive direction when there are two equally close options. the default stepping value for number inputs is 1, allowing only integers to be entered—unless the stepping base is not an integer. using number inputs <input type="number"> elements can help simplify your work when building the user interface and logic for entering numbers into a form. when you create a number input with the proper type value, num...

<input type="tel"> - HTML: Hypertext Markup Language
enient. note: browsers that don't support type tel fall back to being a standard text input. value a domstring representing a telephone number, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, and size idl attributes list, selectionstart, selectionend, selectiondirection, and value methods select(), setrangetext(), setselectionrange() value the <input> element's value attribute contains a domstring that either represents a telephone number or is an empty string (""). additional attributes in addition to the attributes that operate on all <input> elements regardless of their type, telephone number inputs support the following attributes: ...
...lidation below for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as seman...

<input type="url"> - HTML: Hypertext Markup Language
. on browsers that don't support inputs of type url, a url input falls back to being a standard text input. value a domstring representing a url, or empty events change and input supported common attributes autocomplete, list, maxlength, minlength, pattern, placeholder, readonly, required and size idl attributes list, value, selectionend, selectiondirection methods select(), setrangetext() and setselectionrange(). value the <input> element's value attribute contains a domstring which is automatically validated as conforming to url syntax. more specifically, there are two possible value formats that will pass validation: an empty string ("") indicating that the user did not enter a value or that the value was removed. a single...
...ern validation for details and an example. placeholder the placeholder attribute is a string that provides a brief hint to the user as to what kind of information is expected in the field. it should be a word or short phrase that demonstrates the expected type of data, rather than an explanatory message. the text must not include carriage returns or line feeds. if the control's content has one directionality (ltr or rtl) but needs to present the placeholder in the opposite directionality, you can use unicode bidirectional algorithm formatting characters to override directionality within the placeholder; see overriding bidi using unicode control characters in the unicode bidirectional text algorithm for those characters. note: avoid using the placeholder attribute if you can. it is not as seman...

<marquee>: The Marquee element (Obsolete) - HTML: Hypertext Markup Language
rol what happens when the text reaches the edges of its content area using its attributes. dom interface htmlmarqueeelement attributes behavior sets how the text is scrolled within the marquee. possible values are scroll, slide and alternate. if no value is specified, the default value is scroll. bgcolor sets the background color through color name or hexadecimal value. direction sets the direction of the scrolling within the marquee. possible values are left, right, up and down. if no value is specified, the default value is left. height sets the height in pixels or percentage value. hspace sets the horizontal margin loop sets the number of times the marquee will scroll. if no value is specified, the default value is −1, which means the marquee will scroll conti...
...the marquee has finished the amount of scrolling that is set by the loop attribute. it can only fire when the loop attribute is set to some number that is greater than 0. onstart fires when the marquee starts scrolling. methods start() starts scrolling of the marquee. stop() stops scrolling of the marquee. examples <marquee>this text will scroll from right to left</marquee> <marquee direction="up">this text will scroll from bottom to top</marquee> <marquee direction="down" width="250" height="200" behavior="alternate" style="border:solid"> <marquee behavior="alternate"> this text will bounce </marquee> </marquee> specifications specification status comment html living standardthe definition of '<marquee>' in that specification. living standa...

Global attributes - HTML: Hypertext Markup Language
. data-* forms a class of attributes, called custom data attributes, that allow proprietary information to be exchanged between the html and its dom representation that may be used by scripts. all such custom data are available via the htmlelement interface of the element the attribute is set on. the htmlelement.dataset property gives access to them. dir an enumerated attribute indicating the directionality of the element's text. it can have the following values: ltr, which means left to right and is to be used for languages that are written from the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent decide. it uses a basic algorithm as it parses the c...
..., which means left to right and is to be used for languages that are written from the left to the right (like english); rtl, which means right to left and is to be used for languages that are written from the right to the left (like arabic); auto, which lets the user agent decide. it uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then it applies that directionality to the whole element. draggable an enumerated attribute indicating whether the element can be dragged, using the drag and drop api. it can have the following values: true, which indicates that the element may be dragged false, which indicates that the element may not be dragged. dropzone an enumerated attribute indicating what types of...

Index - HTTP
ins the credentials to authenticate a user agent with a server, usually after the server has responded with a 401 unauthorized status and the www-authenticate header. 19 cache-control general header, http, http header, reference the cache-control general-header field is used to specify directives for caching mechanisms in both requests and responses. caching directives are unidirectional, meaning that a given directive in a request is not implying that the same directive is to be given in the response. 20 clear-site-data http, http header, reference, header the clear-site-data header clears browsing data (cookies, storage, cache) associated with the requesting website. it allows web developers to have more control over the data stored locally by a browser f...
...ceived or stored is the same. less accurate than an etag header, it is a fallback mechanism. conditional requests containing if-modified-since or if-unmodified-since headers make use of this field. 86 location http, http header, reference, response header the location response header indicates the url to redirect a page to. it only provides a meaning when served with a 3xx (redirection) or 201 (created) status response. 87 origin http, reference, header the origin request header indicates where a fetch originates from. it doesn't include any path information, but only the server name. it is sent with cors requests, as well as with post requests. it is similar to the referer header, but, unlike this header, it doesn't disclose the whole path. 88 p...

Location - HTTP
the location response header indicates the url to redirect a page to. it only provides a meaning when served with a 3xx (redirection) or 201 (created) status response. in cases of redirection, the http method used to make the new request to fetch the page pointed to by location depends of the original method and of the kind of redirection: if 303 (see also) responses always lead to the use of a get method, 307 (temporary redirect) and 308 (permanent redirect) don't change the method used in the original request; 301 (permanent redirect) and 302 (found) doesn't change the method most of the time, though older user-agents may (so you basically don't know). all responses with one of these status codes send a location header. in cases of resource creation, it indicates the url to the newly cre...
...iginal request; 301 (permanent redirect) and 302 (found) doesn't change the method most of the time, though older user-agents may (so you basically don't know). all responses with one of these status codes send a location header. in cases of resource creation, it indicates the url to the newly created resource. location and content-location are different: location indicates the target of a redirection (or the url of a newly created resource), while content-location indicates the direct url to use to access the resource when content negotiation happened, without the need of further content negotiation. location is a header associated with the response, while content-location is associated with the entity returned. header type response header forbidden header name no ...

baseFrequency - SVG: Scalable Vector Graphics
if one number is provided, then that value is used for both x and y. negative values are forbidden. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbule...
...idth="200" height="200" style="filter: url(#noise2); transform: translatex(220px);" /> </svg> usage notes value <number-optional-number> default value 0 animatable yes <number-optional-number> if two numbers are provided, the first one represents the base frequency in the horizontal direction and the second one the base frequency in the vertical direction. if one number is provided, then that value is used for both x and y. negative values are forbidden. example <svg width="200" height="200" viewbox="0 0 220 220" xmlns="http://www.w3.org/2000/svg"> <filter id="displacementfilter"> <feturbulence type="turbulence" basefrequency="0.05" numoctaves="2" result="turbulence"/> <fedisplacementmap in2="turbulence" in="sourcegraphic...

glyph-orientation-vertical - SVG: Scalable Vector Graphics
otherwise, if the angle is not a multiple of 180 degrees, then the current text position is incremented according to the horizontal metrics of the glyph. this attribute is applied only to text written in a vertical writing-mode. ...
...will be set with a glyph orientation of 0 degrees. ideographic punctuation and other ideographic characters having alternate horizontal and vertical forms will use the vertical form of the glyph. text which is not fullwidth will be set with a glyph orientation of 90 degrees. this reorientation rule applies only to the first-level non-ideographic text. all further embedding of writing modes or bidirectional processing will be based on the first-level rotation. note: text set in this "rotated" manner may contain ligatures or other glyph combining and reordering common to the language and script. (this presentation form does not disable auto-ligature formation or similar context-driven variations.) the determination of which characters should be auto-rotated may vary across user agents. the ...

targetY - SVG: Scalable Vector Graphics
specifications specification status comment filter effects module level 1the definition of 'targety' in that specification. ...
... relative to a given target pixel in the input image. the topmost row of the matrix is row number zero. the value must be such that: 0 <= targety < ordery. only one element is using this attribute: <feconvolvematrix> usage notes value <integer> default value floor(ordery / 2) animatable yes <integer> this value indicates the positioning in vertical direction of the convolution matrix relative to a given target pixel in the input image. specifications specification status comment filter effects module level 1the definition of 'targety' in that specification. working draft no change scalable vector graphics (svg) 1.1 (second edition)the definition of 'targety' in that specification. recommendation ini...

vert-adv-y - SVG: Scalable Vector Graphics
tation. three elements are using this attribute: <font>, <glyph>, and <missing-glyph> font for <font> elements, vert-adv-y specifies the default vertical advance for a glyph in vertical orientation. ...
...e default vertical advance of the glyph in vertical direction glyph, missing-glyph for <glyph> and <missing-glyph> elements, vert-adv-y specifies the vertical advance for a glyph in vertical orientation. value <number> default value <font>ʼs vert-adv-y value animatable no <number> this value indicates the vertical advance of the glyph in vertical direction specifications specification status comment scalable vector graphics (svg) 1.1 (second edition)the definition of 'vert-adv-y for <glyph> and <missing-glyph>' in that specification. recommendation initial definition for <glyph> and <missing-glyph> scalable vector graphics (svg) 1.1 (second edition)the definition of 'vert-adv-y for <font>' in that speci...

SVG Attribute reference - SVG: Scalable Vector Graphics
ascent attributename attributetype autoreverse azimuth b basefrequency baseline-shift baseprofile bbox begin bias by c calcmode cap-height class clip clippathunits clip-path clip-rule color color-interpolation color-interpolation-filters color-profile color-rendering contentscripttype contentstyletype cursor cx cy d d decelerate descent diffuseconstant direction display divisor dominant-baseline dur dx dy e edgemode elevation enable-background end exponent externalresourcesrequired f fill fill-opacity fill-rule filter filterres filterunits flood-color flood-opacity font-family font-size font-size-adjust font-stretch font-style font-variant font-weight format from fr fx fy g g1 g2 glyph-name glyph-orientatio...
...iredfeatures, systemlanguage. xlink attributes xlink:href, xlink:type, xlink:role, xlink:arcrole, xlink:title, xlink:show, xlink:actuate presentation attributes note that all svg presentation attributes can be used as css properties. ...

SVG 1.1 Support in Firefox - SVG: Scalable Vector Graphics
lemented. polygon implemented. text module text implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtextelement recently imlemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tspan implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing,...
...ng recently implemented attributes: textlength, lengthadjust tspan implemented. various presentation attributes don't work (alignment-baseline, baseline-shift, dominant-baseline, kerning, letter-spacing, word-spacing, writing-mode, glyph-orientation-horizontal, glyph-orientation-vertical) recently implemented presentation attributes: direction, unicode-bidi, font-variant, text-decoration svgtspanelement recently implemented bindings: selectsubstring recently implemented attributes: textlength, lengthadjust tref this feature, present in early draft of the spec, has been removed from it and is therefor not implemented (bug 273171). textpath ...

2015 MDN Fellowship Program - Archive of obsolete content
municating build something used by hundreds of thousands (or more) developers worldwide directly impact and grow the value of the open web when application deadline: april 1, 2015 orientation: early june (dates tbd) graduation: august 11-12, 2015 where orientation: a mozilla location (tbd). core program: conducted at your normal workspace. the fine print mozilla will provide coaching, direction and training on teaching best practices. subject to mozilla’s travel reimbursement policies, mozilla will cover fellows travel, room, per diem food costs and visa costs up to $3,000 to attend the orientation. fellows are responsible for obtaining their own visas if any are required (mozilla will provide reasonable supporting documentation). the fellows will meet the stated deliverables of thei...

Communicating With Other Scripts - Archive of obsolete content
nt = document.createevent('customevent'); event.initcustomevent("addon-message", true, true, cloned); document.documentelement.dispatchevent(event); } messaging from page script to content script sending messages using custom dom events from the page script to the content script is just the same, but in reverse. also, there's no need to clone the message when using custom dom events in this direction. in this example, "main.js" creates a page-mod to target the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply...

Interacting with page scripts - Archive of obsolete content
nto(greeting, document.defaultview); var event = new customevent("addon-message", { bubbles: true, detail: cloned }); document.documentelement.dispatchevent(event); } page script to content script sending messages using custom dom events from the page script to the content script is just the same, but in reverse. also, there's no need to clone the message when using custom dom events in this direction. in this example, "main.js" creates a page-mod to target the page we are interested in: var data = require("sdk/self").data; var pagemod = require("sdk/page-mod"); pagemod.pagemod({ include: "http://my-domain.org/talk.html", contentscriptfile: data.url("listen.js") }); the web page "talk.html" creates and dispatches a custom dom event, using initcustomevent()'s detail parameter to supply...

Index of archived content - Archive of obsolete content
nprofile object methods winreg object methods winregvalue xpjs components proposal xre xtech 2005 presentations directions of the mozilla rdf engine extending gecko with xbl and xtf mozilla e4x rich web svg and canvas in mozilla xul - mozilla's xml user interface language xtech 2006 presentations xul explorer xulrunner ...

Conclusion - Archive of obsolete content
whether you load it from the web or from your local hard drive via a file:/// url). mozilla will automatically detect that the file is an installer and ask you if you want to install the software. try installing the extension, restarting mozilla, and see if it works. if the version you created in this tutorial doesn't work, compare it to this working version to help figure out the problem. future directions for development of the tutorial and/or coursework: in addition to build status, tinderbox also tells you if the cvs tree is open or closed for check-ins. how would you use javascript to determine whether the tree is open or closed and css to style the icon accordingly? mozilla applications often store their css and image files in a separate skin subdirectory within the installation director...

Creating a Release Tag - Archive of obsolete content
note that there are a couple of extra files for win32 and macintosh that aren't pulled by the normal script and need to be pulled by hand. the mini-branch is created so you can check in the build scripts with the necessary changes without touching the original branch. check out mozilla from the branch you want to tag. remember to also check out extra mac and win32 files that aren't normally checked out on linux or the tag won't build on those platforms. ...

In-Depth - Archive of obsolete content
top right corner. an example of where this would be used is on tabs. -moz-border-radius-bottomleft the same as -moz-border-radius but only applies to the bottom left corner. an example of where this would be used is on a footer. -moz-border-radius-bottomright the same as -moz-border-radius but only applies to the bottom right corner. an example of where this would be used is on a footer. -moz-box-direction controls which way the items in this box are displayed. normal in english web browsers items are displayed top to bottom and left to right. this will flip it around so items inside of this box will be displayed bottom to top and right to left. this is useful for, say, putting the navigation controls (back button) on the right hand side of the toolbar. values: normal, reverse -moz-image-region thi...

GRE - Archive of obsolete content
pcomglue.h). this allows the embedder to specify what version(s) of gre are appropriate, and to specify any special features the gre must have (currently there are no special features defined). statically link to xpcomglue.lib (the "standalone glue") the solution is to statically link against xpcomglue.lib, also known as the "standalone glue" (see xpcom glue). this library provides a layer of indirection between embedding code and xpcom. to use the xpcom glue, you must follow these steps: compile your code with xpcom_glue defined. link with xpcomglue.lib (not xpcomglue_s.lib!). don't link against the nspr libs. find a compatible gre (see above). dynamically link to that gre using the xpcomgluestartup() function. see environment variables below. initialize xpcom and do your work; when finis...

Migrate apps from Internet Explorer to Mozilla - Archive of obsolete content
entbyid( aid ) returns a reference to the element with the specified id. document.getelementsbytagname( atagname ) returns an array of elements with the specified name in the document. traverse the dom mozilla supports the w3c dom apis for traversing the dom tree through javascript (see table 2). the apis exist for each node in the document and allow walking the tree in any direction. internet explorer supports these apis as well, but it also supports its legacy apis for walking a dom tree, such as the children property. table 2. methods used to traverse the dom property/method description childnodes returns an array of all child nodes of the element. firstchild returns the first child node of the element. getattribute( aattribut...

New Skin Notes - Archive of obsolete content
any chance we can mobe the "main page" scrollbar to the actual "content area" of the page, so that the sidebar `stays` when in-use, and on dynamic pages (such as the preferences page) if you toggle between something that needs a verticle scrollbar and something that doesnt, you get screen-jitter; if this is not-feasable, perhaps some method to have a viewport scrollbar always appear for the vert direction. minor-nit. --callek i couldn't find a quick "logout" link accessible from everywhere. --mmondor 12:25, 26 aug 2005 (pdt) what pages can you not find a logout link from, i see it on nearly all devmo wiki pages in the "upper right: along with "my talk" "preferences" etc. oh, i went back to login page, logged in and then from there went to the /test/ pages and it's like the old look (with menu ...

Remote debugging - Archive of obsolete content
the developer trusts that his time is not being wasted: the crash is a real bug in firefox. ...

File object - Archive of obsolete content
cate a file url. when a file is constructed, leading and trailing spaces are removed from the filename, so new file(" abc.txt ") just creates a file called abc.txt. filenames starting and ending with the pipe symbol (|) are interpreted as pipes. readable pipelines (i.e. pipe to programs generating output on stdout) begin with the pipe symbol; writeable pipelines end with the pipe symbol. bi-directional pipelines are not supported. properties static properties file.input a file object that represents the standard input (stdin). file.currentdir a file object that represents the standard output (stdout). file.currentdir a file object that represents the standard error (stderr). file.currentdir a file object referring to the current directory; this property may be set. file.separator...

TraceVis - Archive of obsolete content
cessed into a visualization that can be used to rapidly diagnose many tracing-related performance issues. so far, most of the documentation on tracevis is contained in the announcement blog post. prerequisites the visualization scripts require pil (python imaging library). building with tracevis these are the steps to build a js shell with tracevis, starting from a mozilla source directory. these directions create an optimized build, because optimized builds are usually better for performance analysis. cd js/src autoconf213 mkdir opt-tracevis cd opt-tracevis ../configure --enable-tracevis make -j2 the resulting binary will be at dist/bin/js relative to the current directory. running with tracevis to run a shell with tracevis: dist/bin/js -j -t /tmp/tracevis.log myprogram.js the tracevis log file is...

XTech 2005 Presentations - Archive of obsolete content
tends javascript to include namespaces, qualified names, and xml elements and lists. e4x also adds new javascript operators for filtering xml lists, and for enumerating xml children and descendants. another e4x feature: the ability to bind a w3c dom document to a new xml object, reflecting the dom in e4x terms so that updates to either the dom or the e4x object hierarchy show up in the other. directions of the mozilla rdf engine: website scripting, standards conformance and perfomance - axel hecht this presentation showed new developments in the mozilla rdf engine. these include plans to expose the rdf api to public web content, as well as performance and correctness improvements. rich web: svg and canvas in mozilla - robert o'callahan today's web browsers offer somewhat limited graphics ...

Flexgroup - Archive of obsolete content
...

movetoclick - Archive of obsolete content
if not specified, the default value is used, which varies for each platform. ...

align - Archive of obsolete content
stretch this is the default value. the child elements are stretched to fit the size of the box. for a horizontal box, the children are stretched to be the height of the box. for a vertical box, the children are stretched to be the width of the box. if the size of the box changes, the children stretch to fit. use the flex attribute to create elements that stretch in the opposite direction. left the elements are aligned on their left edges. center the elements are centered horizontally. right the elements are aligned on their right edges. the pack attribute is related to the alignment but is used to specify the position in the opposite direction. you can also specify the v...

crop - Archive of obsolete content
start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. ...

dir - Archive of obsolete content
normal for scales, the scale's values are ordered from left to right (for horizontal scales) or from top to bottom (for vertical scales) for other elements, the elements are placed left to right or top to bottom in the order they appear in the xul code. reverse for scales, the scale's values are ordered from right to left (for horizontal scales) or from bottom to top (for vertical scales). for other elements, they are placed right to left or bottom to top. ...

pack - Archive of obsolete content
below the pack attribute specifies where child elements of the box are placed when the box is larger that the size of the children. for boxes with horizontal orientation, it is used to indicate the position of children horizontally. for boxes with vertical orientation, it is used to indicate the position of children vertically. the align attribute is used to specify the position in the opposite direction. you can also specify the value of pack using the style property -moz-box-pack. start child elements are placed starting from the left or top edge of the box. if the box is larger than the total size of the children, the extra space is placed on the right or bottom side. center extra space is split equally along each side of the child elements, resulting the children being placed in the...

resizer.dir - Archive of obsolete content
left resized to the left. right resized to the right. top resized up. bottom resized down. bottomstart resized down and toward the start of the line (toward the left for left-to-right locales, toward the right for right-to-left locales). bottomend resized down and toward the end of the line (toward the right for left-to-right locales, toward the left for right-to-left locales). bottomleft resized down and to the left. bottomright resized down and to the right. topleft resized up and to the left. ...

substate - Archive of obsolete content
since collapse="both" is a gecko 1.9+ feature, this will have no effect on earlier versions. ...

Attribute (XUL) - Archive of obsolete content
xt placeholder popup position predicate preference preference-editable primary priority properties querytype readonly ref rel removeelement resizeafter resizebefore rows screenx screeny searchbutton searchsessions searchlabel selected selectedindex seltype setfocus showcaret showcommentcolumn showpopup size sizemode sizetopopup smoothscroll sort sortactive sortdirection sortresource sortresource2 spellcheck src state statedatasource statusbar statustext style subject substate suppressonselect tabindex tabscrolling targets template timeout title toolbarname tooltip tooltiptext tooltiptextnew top type uri useraction validate value var visuallyselected wait-cursor width windowtype wrap wraparound ...

openPopup - Archive of obsolete content
specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. position possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. x, y for an anchored popup,...

Additional Navigation - Archive of obsolete content
an be filled in so the builder doesn't know what to generate. the builder won't generate any output in this situation. the member tag must have variables for both the container and child attributes. it wouldn't be very common to filter for a specific child anyway. source navigation triples may also be used to navigate up the graph as well as downwards, following the graph arrows in the reverse direction. for instance, in the original example, we could start at node d and navigate upwards to a and c. the syntax for the triple is the same except that the known variable should be placed in the triple's object attribute and the unknown variable should be placed in the triple's subject variable. <query> <content uri="?start"/> <triple subject="?relateditem" predicate="http://www.xulpla...

Result Generation - Archive of obsolete content
top has arcs pointing to b, c and d. similarly, c has an arc pointing to d. you could have arcs pointing elsewhere--for example, node d could have an arc pointing back to a. to navigate around, you could start at node a and navigate around the graph following the arrows to b, c or d. or you could start at b and go to a and then go to c and d, etc. no requirement exists to follow the arrows in the direction they point; you can easily go the other way (though in only one direction within a given series of iterations). the picture was generated from the w3c's rdf validator, a good place to go to check if your rdf is valid. the text in red are the labels for the arrows, called predicates. in this example, all the arrows have the same label. usually, this won't be the case. templates provide a means of...

Box Model Details - Archive of obsolete content
="center" align="center" flex="1"> <button label="look at me!"/> <button label="push me!"/> </hbox> this example contains a horizontal box with two buttons in it, contained inside a flexible box. the box has the pack attribute which is used to center the buttons horizontally. the align attribute aligns the buttons vertically. the result is that the buttons will be centered in the box in both directions. this example will work with a vertical box as well, although the second button will be underneath the first one, instead of beside it. a find text dialog example 5 : source view <?xml version="1.0"?> <?xml-stylesheet href="chrome://global/skin/" type="text/css"?> <window id="findtext" title="find text" orient="horizontal" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only...

Grids - Archive of obsolete content
th rows are flexible, although the first row is more so. the cell in the first column and first row (the cherry button) will be flexible by a factor of 5 horizontally and flexible by a factor of 10 vertically. the next cell, (lemon) will only be flexible vertically. the flex attribute has also been added to the grid element so that the entire grid is flexible, otherwise it would only grow in one direction. column spanning there is no means of making a cell span a particular number of multiple columns or rows (see discussion for a way of achieving the same effect). however, it is possible to make a row or column that spans the entire width or height of the grid. to do this, just add an element inside the rows element that isn't inside a row element. you can use a box type for example, and put ot...

More Button Features - Archive of obsolete content
button. the style attribute functions similar to its html counterpart. in general, it can be used on all xul elements. note that you really should put the style declarations in a separate style sheet. positioning the images by default, the image on a button will appear to the left of the text label. there are two attributes that can be used to control this position. the dir attribute controls the direction of the image and text. by setting this attribute to the value reverse, the image will be placed on the right side of the text. by using the value normal, or leaving the attribute out entirely, the image will be placed on the left side of the text. the orient attribute can be used to place the image above or below the text. the default value is horizontal which is used to place the image on the le...

Scroll Bars - Archive of obsolete content
nd the two arrow buttons on the end. a scroll bar creates all of these elements automatically. the syntax of a scroll bar is as follows: <scrollbar id="identifier" orient="horizontal" curpos="20" maxpos="100" increment="1" pageincrement="10"/> the attributes are as follows: id the unique identifer of the scroll bar orient this specifies the direction of the scroll bar. the default is horizontal, which creates a scroll bar that extends from left to right. you can also specify vertical which creates a scroll bar that extends from top to bottom. curpos this indicates the current position of the scroll bar thumb (the box that you can slide back and forth.) the value ranges from 0 to the value of maxpos. this value does not need a ...

XUL accessibility guidelines - Archive of obsolete content
t, the tab order is determined by the order of the elements in the underlying code. it can also be set programmatically with the tabindex attribute if needed, but this should be done sparingly and thoroughly tested whenever it is used. the navigation order should be logical, generally left to right, top to bottom. navigation order may vary depending on the nature of the application or the reading direction of the language. ensure that tab order is logical and all interactive elements can be accessed simply without the use of a mouse. you should be able to perform all functionality either directly in the application or through menu items or the context menu. trees provide alternative functionality for inaccessible operations. the column picker and column headers in xul trees are not keyboard acce...

action - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, ...

arrowscrollbox - Archive of obsolete content
if false, the mouse must be hovered over the arrows to scroll automatically. disabled type: boolean indicates whether the element is disabled or not. if thi...

assign - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

bbox - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

binding - Archive of obsolete content
it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of ...

bindings - Archive of obsolete content
it can be a variable reference, an rdf resource uri, or an rdf literal value. predicate type: uri the predicate or property to match. this must be a uri of the property. subject type: string the subject of the el...

box - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

broadcaster - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

broadcasterset - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

caption - Archive of obsolete content
aracter that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

checkbox - Archive of obsolete content
this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

column - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

columns - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

conditions - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

content - Archive of obsolete content
if set, the conditions will only match if the template builder is parsing content for an element directly inside this tag. for example, by using a value of treechildren, the condition will only match when placing el...

deck - Archive of obsolete content
you may select an item by assigning its index to this property. by assigning -1 to this property, all items will be deselected. returns -1 if no items are selected d...

description - Archive of obsolete content
iption> document.getelementbyid('desc').textcontent = "this is a long section of dynamic message text that will word wrap"; attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

dialogheader - Archive of obsolete content
er/there.is.only.xul"> <dialogheader title="my dialog" description="example dialog"/> <!-- other widgets --> </dialog> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

dropmarker - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, dataso...

grid - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

grippy - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

groupbox - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, dataso...

hbox - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

iframe - Archive of obsolete content
contentdocument type: document this read-only property contains the document object in the element. contentwindow type: todo...

image - Archive of obsolete content
« xul reference home [ examples | attributes | properties | methods | related ] summary an element that displays an image, much like the html img element. the src attribute can be used to specify the url of the image. more information is available in the xul tutorial. note: prior to gecko 8.0, images did not shrink down with the same ratio in both directions when specifying maximum sizes using maxheight or maxwidth. the new behavior aligns more with the html <img> element and shrinks both the width and height down proportionally. attributes onerror, onload, src, validate properties accessibletype, src style classes alert-icon, error-icon, message-icon, question-icon examples <image src='firefoxlogo.png' width='135' height='130'/> attributes on...

keyset - Archive of obsolete content
if this attribute is set, the element is disabled. disabled elements are usually drawn with grayed-out text. if the element is disabled, it does not respond to user actions, it cannot be focused, and the ...

label - Archive of obsolete content
fies the id of the element with which the label is associated. when the user clicks on the label, the associated element is given focus. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

listcell - Archive of obsolete content
crop, disabled, image, label, type properties disabled style classes listcell-iconic, examples (example needed) attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

listcol - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

listcols - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

listhead - Archive of obsolete content
disabled type: boolean gets and sets the value of the disabled attribute. inherited properties align, , allowevents, ,...

listheader - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, dataso...

listitem - Archive of obsolete content
r this attribute to have any effect. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

member - Archive of obsolete content
container type: ? a variable reference to a node that is expected to be a container. if the variable is ...

menu - Archive of obsolete content
llowevents type: boolean if true, events are passed to children of the element. otherwise, events are passed to the element only. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

menuitem - Archive of obsolete content
nt menus. single the menu the item is contained within is closed, but the parent menus remain open. none no menus are closed. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

menulist - Archive of obsolete content
haracter that is used as a shortcut key. this should be one of the characters that appears in the label attribute for the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

menupopup - Archive of obsolete content
specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. position possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. x, y for an anchored popup,...

menuseparator - Archive of obsolete content
re passed to the element only. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

notificationbox - Archive of obsolete content
this property is read-only. allnotifications type: nodelist nodelist of all notifications. this property is read-only. notificationshid...

observes - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

page - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

panel - Archive of obsolete content
specific location. anchor the popup may be either anchored to another node or opened freely. to anchor a popup to a node, supply an anchor node and set the position to a string indicating the manner in which the popup should be anchored. the anchor node does not need to be in the same document as the popup. unanchored popups may be created by supplying null as the anchor node. the direction in which the popup is oriented depends on the direction of the anchor. position possible values for position are: before_start, before_end, after_start, after_end, start_before, start_after, end_before, end_after, overlap, and after_pointer. check positioning of the popup guide for a precise description of the effect of the different values. x, y for an anchored popup,...

popupset - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

preferences - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

progressmeter - Archive of obsolete content
max type: integer gets and sets the value of the max attribute. mode type: string gets and sets the value of the mode a...

query - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

queryset - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

radio - Archive of obsolete content
attribute for the element. command type: id set to the id of a command element that is being observed by the element. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

row - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

rows - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

script - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

scrollbox - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

scrollcorner - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

separator - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

spacer - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

spinbuttons - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

splitter - Archive of obsolete content
value of the collapsed attribute, is currently displayed. collapsed the content either before or after the splitter is collapsed and is not visible. dragging the user is current adjusting the position of the splitter, typically by dragging it with the mouse. substate type: one of the values below on splitters which have state="collapsed" and collapse="both", determines which direction the splitter is actually collapsed in. since collapse="both" is a gecko 1.9+ feature, this will have no effect on earlier versions. before the element immediately before the splitter is collapsed. after the element immediately after the splitter is collapsed. properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, co...

stack - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

statusbar - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasour...

<statusbarpanel> - Archive of obsolete content
"/> <spacer flex="1"/> <progressmeter mode="determined" value="82"/> <statusbarpanel label="right panel"/> </statusbar> attributes crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

stringbundle - Archive of obsolete content
this is an object which implements nsilocale. src type: url gets and sets the value of the src attribute. s...

stringbundleset - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

tab - Archive of obsolete content
dn't adjust it manually. this is primarily useful for themes so that they can adjust the appearance of the area around the selected tab. crop type: one of the values below if the label of the element is too big to fit in its given space, the text will be cropped on the side specified by the crop attribute. an ellipsis will be used in place of the cropped text. if the box direction is reversed, the cropping is reversed. start the text will be cropped on its left side in left-to-right text locales, and the right side in right-to-left locales. end the text will be cropped on its right side in left-to-right text locales, and the right side in right-to-left locales. left the text...

tabpanel - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

tabpanels - Archive of obsolete content
selectedindex type: integer returns the index of the currently selected item. you may select an item by assigning its index to this property. ...

template - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

textnode - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

titlebar - Archive of obsolete content
properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, ...

toolbargrippy - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , fl...

toolbaritem - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

toolbarpalette - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

toolbarseparator - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasourc...

toolbarset - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes, o...

toolbarspacer - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, dataso...

toolbarspring - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasour...

toolbox - Archive of obsolete content
customtoolbarcount firefox only type: integer the number of custom toolbars currently within the toolbox. externaltoolbars type: ar...

treechildren - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

treecols - Archive of obsolete content
inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, dataso...

treerow - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

treeseparator - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

triple - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

vbox - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

where - Archive of obsolete content
wevents, allownegativeassertions, class, coalesceduplicatearcs, collapsed, container, containment, context, contextmenu, datasources, dir, empty, equalsize, flags, flex, height, hidden, id, insertafter, insertbefore, left, maxheight, maxwidth, menu, minheight, minwidth, mousethrough, observes, ordinal, orient, pack, persist, popup, position, preference-editable, querytype, ref, removeelement, sortdirection, sortresource, sortresource2, statustext, style, template, tooltip, tooltiptext, top, uri, wait-cursor, width properties inherited properties align, , allowevents, , boxobject, builder, , , , classname, , , , , collapsed, contextmenu, controllers, database, datasources, dir, , , flex, height, hidden, id, , , left, , maxheight, maxwidth, menu, minheight, minwidth, , , , , , , observes,...

XULRunner 1.8.0.1 Release Notes - Archive of obsolete content
ctory using a archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.1 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only). mac os x open the .pkg file within the installer and follow the directions. linux unpack the tarball to a new directory using tar -xzf xulrunner-1.8.0.1.en-us.linux-i686.tar.gz. the following directory is recommended: /opt/xulrunner/1.8.0.1 . register xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner windows/linux ...

XULRunner 1.8.0.4 Release Notes - Archive of obsolete content
tory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.8.0.4 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only). mac os x open the .pkg file within the installer and follow the directions. linux unpack the tarball to a new directory using tar -xzf xulrunner-1.8.0.4.en-us.linux-i686.tar.gz. the following directory is recommended: /opt/xulrunner/1.8.0.4 . register xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a...

XULRunner 1.9.1 Release Notes - Archive of obsolete content
ectory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9.1 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only). mac os x open the .pkg file within the installer and follow the directions. linux unpack the tarball to a new directory using tar -xjf xulrunner-1.9.1.19.en-us.linux-i686.tar.bz2. the following directory is recommended: /opt/xulrunner/1.9.1 . register xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a c...

XULRunner 1.9.2 Release Notes - Archive of obsolete content
directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9.2 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only). mac os x open the .pkg file within the installer and follow the directions. linux unpack the tarball to a new directory using tar -xjf xulrunner-3.6.26.en-us.linux-i686.tar.bz2. the following directory is recommended: /opt/xulrunner/1.9.2 . register xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a command p...

XULRunner 1.9 Release Notes - Archive of obsolete content
irectory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\1.9 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only). mac os x open the .pkg file within the installer and follow the directions. linux unpack the tarball to a new directory using tar -xjf xulrunner-1.9.0.17.en-us.linux-i686.tar.bz2. the following directory is recommended: /opt/xulrunner/1.9 . register xulrunner with the system by running xulrunner --register-global (to install for all users, must be run as root) or xulrunner --register-user (to install for one user only). uninstalling xulrunner linux from a c...

XULRunner 2.0 Release Notes - Archive of obsolete content
ew directory using an archive tool (7zip is recommended). the following directory is recommended: c:\program files\mozilla xulrunner\2.0 . to register xulrunner with the system, open a command prompt and run xulrunner.exe --register-global (to register for all users) or xulrunner.exe --register-user (to register for one user only). mac os x open the .pkg file within the installer and follow the directions. xulrunner 2.0 is a universal binary containing i386 and x86_64 architectures. xulrunner 1.9.2 and earlier versions had powerpc (ppc) and i386 architectures. linux (32-bit) unpack the tarball to a new directory using tar -xjf xulrunner-2.0.en-us.linux-i686.tar.bz2. the following directory is recommended: /opt/xulrunner/2.0 . register xulrunner with the system by running xulrunner --register-gl...

nsIContentPolicy - Archive of obsolete content
ed long acontenttype, in nsiuri acontentlocation, in nsiuri arequestorigin, in nsisupports acontext, in acstring amimetype, in nsisupports aextra, in nsiprincipal arequestprincipal ); parameters acontenttype the type of content being tested. this will be one of the type_* constants. acontentlocation optional. the location of the resource being requested: may be, e.g., a post-redirection uri for the resource. arequestorigin optional. the location of the resource that initiated this load request; can be null if inapplicable. acontext optional. the nsidomnode or nsidomwindow that initiated the request, or something that can query interface to one of those; can be null if inapplicable. amimetype the mime type of the requested resource (for example, image/png), as reported by t...

Mozilla release FAQ - Archive of obsolete content
also available on the mozilla website: detailed build instructions: unix/x win32 mac if your version of make chokes on the makefiles (on unix), you might not be using gnu make. grab the latest version of gnu make from the gnu ftp site. regarding shells, i would like to recommend the following: if you are using unix, use bash-family shells for the build because of the better control over redirection (in case you want to log errors and messages) if you are using win32, using the default shell cmd.exe (as opposed to 4dos or 4nt) will probably yield better results. regarding compilation options, it would be good not to compile with optimization, because it's much slower to build, and on windows platforms, there's a bug in some versions of vc++ that makes mozilla crash in many common circumstanc...

Mozilla.dev.apps.firefox-2006-09-29 - Archive of obsolete content
n problem. firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project? a user looking to be pointed in the right direction of how to use the rss feeds discovery & parsing tool. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...

2006-09-29 - Archive of obsolete content
n problem. firefox 2 on windows vista discussion about the "state of affairs" of firefox 2 on windows vista rc1 - update for rc1 listed in update history as 'install pending' right-click "copy email address" - bug 353102 a proposed bug fix to the 'copy email address' bug how to use the rss feeds discovery & parsing tool in another open source project? a user looking to be pointed in the right direction of how to use the rss feeds discovery & parsing tool. meetings none this week. authors sara minchella (sara) dave manley (senemanley) back to summary list ...

2006-10-27 - Archive of obsolete content
pps.thunderbird - october 21-27, 2006 announcements none for this week. discussions effect of eudora/thunderbird re-write joes is voicing a concern about the recent announcement regarding the eudora/thunderbird rewrite: "is thunderbird destined to become a hybrid of the existing code and eudora?". jonathan pritchard has clarified that announcement does not mean thunderbird will be changing direction, just certain areas of development that are of interest to the eudora developers will have more attention paid to them. calling tb with a specific message to be displayed there's a new question by guenter about calling tb from an external program (eg. firefox) to display a message. meetings none for this week. ...

2006-11-10 - Archive of obsolete content
k. discussions violation of smtp protocol in thunderbird hector reports two bugs: thunderbird ignores the smtp protocol state machine by ignoring the 501 response codes. this has been filed as bug 360118. thunderbird doesn't seem to have an option to set the client domain name (elho/helo). this is already addressed in bug 244030. interfacing with thunderbird mark bannister is looking for directions on interfacing thunderbird with their project management database. guenter has provided some sample code using the 'mailto:' method. meetings calendar project weekly status meeting - 2006/11/08 17:00 utc (meeting notes) calendar project weekly qa chat - 2006/11/09 16:30 utc (meeting notes) ...

NPP_NewStream - Archive of obsolete content
calls to npn_requestread (for example, local files or http servers that support byte-range requests). false: not seekable. the browser must copy data in the stream to the local cache to satisfy random access requests made through npn_requestread. stype out parameter. the plugin should set this value to request a mode for the stream. for more information about each of these values, see directions in this section. np_normal (default): delivers stream data to the instance in a series of calls to npp_writeready and npp_write. np_asfileonly: saves stream data to a file in the local cache. np_asfile: file download. like np_asfileonly except that data is delivered to the plug-in as it is saved to the file (as in mode np_normal). np_seek: stream data randomly accessible by the plug-in...

Adobe Flash - Archive of obsolete content
missing. in example 3, clicking the html button causes a ball to move in the flash animation. this exemplifies javascript to flash communication. by clicking the html button, you trigger a javascript event that further triggers actions within the flash animation. below that, you can change the color of the entire html page by clicking a colored tab. this shows communication flowing in the other direction -- namely, an action taken within the flash animation affects something in the html page that contains the flash animation. example 3 shows fscommands in action. if you are embedding a flash animation and wish to use fscommands in netscape gecko browsers, currently you must use the embed element and not the object element. you can always nest the embed element within the object element that you ...

Making sure your theme works with RTL locales - Archive of obsolete content
* parent element #b has a chromedir attribute, but its * grandparent element #a does. */ #a > #b > #c { /* normal rules */ } #a[chromedir="rtl"] > #b > #c { /* rtl rules */ } tip: sometimes, like in the back and forward arrows, you don't really need new versions of the images. instead, just use the opposite arrow when in rtl context. using start/end rules instead of left/right rules directions are mirrored in rtl mode, so left becomes right and right becomes left. as a result, you almost never want to use left/right rules for paddings, borders, and margins. instead, you should use the following start/end rules instead to ensure rtl compatibility: -moz-padding-start -moz-padding-end -moz-margin-start -moz-margin-end -moz-border-start -moz-border-start-color -moz-border-start-s...

-ms-scroll-chaining - Archive of obsolete content
during any manipulation. formal syntax chained | none examples the following example illustrates the -ms-scroll-chaining property in use. in this case the image container has its -ms-scroll-chaining property set to chained, which means that when a user is scrolling through a nested scrollable element and it hits its boundary the parent scrollable element will begin to scroll in the same direction. had the -ms-scroll-chaining property been set to none, the user would observe a bounce effect when the nested element reaches its boundary. for more information, see html scrolling, panning and zooming sample or internet explorer 10 scrolling, panning, and zooming with touch. .imagecontainer { -ms-scroll-chaining: chained; -ms-overflow-style: none; -ms-content-zooming: zoom; -ms-scroll-...

RDF: Resource Description Framework for metadata - Archive of obsolete content
f making statements about resources in the form of a subject-predicate-object expression, called a triple in rdf terminology. the subject is the resource, the "thing" being described. the predicate is a trait or aspect about that resource, and often expresses a relationship between the subject and the object. the object is the object of the relationship or value of that trait. documentation directions of the mozilla rdf engine this presentation shows new developments in the mozilla rdf engine. these include plans to expose the rdf api to public web content, as well as performance and correctness improvements. what is rdf tim bray's introduction to the resource description framework, at xml.com. rdf datasource how-to a cookbook-style document describing how to create a native, clien...

Writing JavaScript for XHTML - Archive of obsolete content
>'; var parser = new domparser(); var documentfragment = parser.parsefromstring(string, "text/xml"); body.appendchild(documentfragment); // assuming 'body' is the body element but be aware that if your string is not well-formed xml (e.g., you have an & where it should not be), then this method will crash, leaving you with a parser error. problem: i want to remain forward compatible! given the direction away from formatting attributes and the possibility of xhtml becoming eventually more prominent (or at least the document author having the possibility of later wanting to make documents available in xhtml for browsers that support it), one may wish to avoid features which are not likely to stay compatible into the future. solution: avoid html-specific dom the html dom , even though it is compa...

Using the Right Markup to Invoke Plugins - Archive of obsolete content
html 4.01 specification on object element embed element plugin api reference on embed element on devedge-temp java html 4.01 applet definition (deprecated) java plugin homepage sun documentation on object, embed, and applet and different plugin versions sun demonstration of web pages using applet element sun demonstration of web pages using object/embed elements bugs and future directions in netscape and mozilla windows media in netscape netscape 7.1 and the windows media activex control bug 180378 bug 167601 bug 180411 ...

Building up a basic demo with Babylon.js - Game development
it to. note: you probably noticed the babylon.vector3() method in use here — this defines a 3d position on the scene. babylon.js is bundled with a complete math library for handling vectors, colors, matrices etc. let there be light there are various light sources available in babylon.js. the most basic one is the pointlight, which works like a flashlight — shining a spotlight in a given direction. add the following line below your camera definition: var light = new babylon.pointlight("light", new babylon.vector3(10, 10, 0), scene); the parameters are very similar to the previously defined camera: the name of the light, a position in 3d space and the scene to which the light is added. geometry now the scene is properly rendering we can start adding 3d shapes to it. to speed up develo...

Building up a basic demo with PlayCanvas editor - Game development
create to have it created. next you'll see your project's page — there's not much yet. by clicking the editor button we'll launch the online playcanvas editor where we'll create our scene with the shapes. do this now. creating the scene here's how the scene looks initially in the editor. even though it's a blank new project we don't have to start entirely from scratch — the camera and directional light are prepared already, so you don't have to worry about them. now onto the creative part. to add an entity to the scene you have to click on the big plus button located in the top left area of the editor, next to the hierarchy text. when hovering over that button with your mouse the label will say 'add entity' — that's exactly what we want to do. an entity is any object used in the sc...

Audio for Web games - Game development
audio sources in three-dimensional space but it can also allow us to apply filters that make that audio appear more realistic. the pannernode harnesses the positional capabilities of the web audio api so we can relate further information about the game world to the player. there's a tutorial here to help understand the pannernode in better detail. we can relate: the position of objects the direction and movement of objects the environment (cavernous, underwater, etc.) this is especially useful in a three-dimensional environment rendered using webgl, where the web audio api makes it possible to tie audio to the objects and viewpoints. see also web audio api on mdn <audio> on mdn developing game audio with the web audio api (html5rocks) mixing positional audio and webgl (html5rocks) ...

Desktop gamepad controls - Game development
0 layout may be different to a generic one), the cache containing the information about the buttons from the previous frame and the status containing the information from the current frame. the pressed() function gets the input data and sets the information about it in our object, and the axes property stores the array containing the values signifying the amount an axis is pressed in the x and y directions, represented by a float in the (-1, 1) range. after the gamepad is connected, the information about the controller is stored in the object: connect: function(event) { gamepadapi.controller = event.gamepad; gamepadapi.active = true; }, the disconnect function removes the information from the object: disconnect: function(event) { delete gamepadapi.controller; gamepadapi.active ...

Unconventional controls - Game development
post. using a tv remote to control the game ended up being surprisingly easy, because the events fired by the controller are emulating conventional keyboard keys. captain rogers had the keyboard controls implemented already: this.cursors = this.input.keyboard.createcursorkeys(); //... if(this.cursors.right.isdown) { // move player right } it works out of the box. the cursors are the four directional arrow keys on the keyboard, and these have exactly the same key codes as the arrow keys on the remote. how do you know the codes for the other remote keys? you can check them by printing the responses out in the console: window.addeventlistener("keydown", function(event) { console.log(event.keycode); }, this); every key pressed on the remote will show its key code in the console. you can ...

Create the Canvas and draw on it - Game development
0, math.pi*2, false); ctx.fillstyle = "green"; ctx.fill(); ctx.closepath(); as you can see we're using the beginpath() and closepath() methods again. between them, the most important part of the code above is the arc() method. it takes six parameters: x and y coordinates of the arc's center arc radius start angle and end angle (what angle to start and finish drawing the circle, in radians) direction of drawing (false for clockwise, the default, or true for anti-clockwise.) this last parameter is optional. the fillstyle property looks different than before. this is because, just as with css, color can be specified as a hexadecimal value, a color keyword, the rgba() function, or any of the other available color methods. instead of using fill() and filling the shapes with colors, we can use ...

Move the ball - Game development
next steps we've drawn our ball and gotten it moving, but it keeps disappearing off the edge of the canvas. in the third chapter we'll explore how to make it bounce off the walls. « previousnext » ...

Physics - Game development
.backgroundcolor = '#eee'; game.load.image('ball', 'img/ball.png'); } function create() { game.physics.startsystem(phaser.physics.arcade); ball = game.add.sprite(50, 50, 'ball'); game.physics.enable(ball, phaser.physics.arcade); ball.body.velocity.set(150, 150); } function update() { } try reloading index.html again — the ball should now be moving constantly in the given direction. at the moment, the physics engine has gravity and friction set to zero. adding gravity would result in the ball falling down while friction would eventually stop the ball. fun with physics you can do much more with physics, for example by adding ball.body.gravity.y = 100; you will set the vertical gravity of the ball. as a result it will be launched upwards, but then fall due to the effects of...

Randomizing gameplay - Game development
ion is run using a line along the lines of the below. add this new line to your code now, and try it out. function ballhitpaddle(ball, paddle) { ball.animations.play('wobble'); ball.body.velocity.x = -1*5*(paddle.x-ball.x); } it's a little bit of magic — the new velocity is higher, the larger the distance between the center of the paddle and the place where the ball hits it. also, the direction (left or right) is determined by that value — if the ball hits the left side of the paddle it will bounce left, whereas hitting the right side will bounce it to the right. it ended up that way because of a little bit of experimentation with the given values, you can do your own experimentation and see what happens. it's not completely random of course, but it does make the gameplay a bit more u...

2D maze game with device orientation - Game development
e if(this.keys.right.isdown) { this.ball.body.velocity.x += this.movementforce; } if(this.keys.up.isdown) { this.ball.body.velocity.y -= this.movementforce; } else if(this.keys.down.isdown) { this.ball.body.velocity.y += this.movementforce; } that way we can check which key is pressed at the given frame and apply the defined force to the ball, thus increase the velocity in the proper direction. implementing the device orientation api probably the most interesting part of the game is its usage of the device orientation api for control on mobile devices. thanks to this you can play the game by tilting the device in the direction you want the ball to roll. here’s the code from the create() function responsible for this: window.addeventlistener("deviceorientation", this.handleorientat...

Gecko FAQ - Gecko Redirect 1
xcept for: elements: bdo, basefont attributes: shape attribute on the a element, abbr, axis, headers, scope-row, scope-col, scope-rowgroup, scope-colgroup, charoff, datasrc, datafld, dataformat, datapagesize, summary, event, dir, align on table columns, label attribute of option, alternate text of area elements, longdesc various metadata attributes: cite, datetime, lang, hreflang bidirectional text layout, which is only used in hebrew and arabic (ibm has begun work to add bidi support in a future release) style sheets css 1 - full support, except for: the application of styles to html column elements the ability to turn off author styles the names of certain mozilla extension pseudo-classes lack the moz- prefix css 2 - partial support is ex...

Flex - MDN Web Docs Glossary: Definitions of Web-related terms
he items then participate in flex layout, and all of the properties defined in the css flexible box layout module may be applied. the flex property is a shorthand for the flexbox properties flex-grow, flex-shrink and flex-basis. in addition <flex> can refer to a flexible length in css grid layout. ...

Flex Container - MDN Web Docs Glossary: Definitions of Web-related terms
o become a block level flex container, and inline-flex an inline level flex container. ...

Flexbox - MDN Web Docs Glossary: Definitions of Web-related terms
fact that items in a flex layout can grow and shrink. space can be assigned to the items themselves, or distributed between or around the items. flexbox also enables alignment of items on the main or cross axis, thus providing a high level of control over the size and alignment of a group of items. ...

Graceful degradation - MDN Web Docs Glossary: Definitions of Web-related terms
xample by using the css cascade, or html fallback behaviour. some good examples can be found in handling common html and css problems. it is a useful technique that allows web developers to focus on developing the best possible websites, given that those websites are accessed by multiple unknown user-agents. progressive enhancement is related but different — often seen as going in the opposite direction to graceful degredation. in reality both approaches are valid and can often complement one another. ...

Grid Axis - MDN Web Docs Glossary: Definitions of Web-related terms
hese axes that items can be aligned and justified using the properties defined in the box alignment specification. in css the block or column axis is the axis used when laying out blocks of text. if you have two paragraphs and are working in a right to left, top to bottom language they lay out one below the other, on the block axis. the inline or row axis runs across the block axis and is the direction along which regular text flows. these are our rows in css grid layout. the physical direction of these axes can change according to the writing mode of the document. learn more further reading css grid layout guide: basic concepts of grid layout css grid layout guide: box alignment in grid layout css grid layout guide: grids, logical values and writing modes ...

I18N - MDN Web Docs Glossary: Definitions of Web-related terms
alization is the design and development of a product, application or document content that enables easy localization for target audiences that vary in culture, region, or language. ...

Internationalization - MDN Web Docs Glossary: Definitions of Web-related terms
...

Intrinsic Size - MDN Web Docs Glossary: Definitions of Web-related terms
insically: width, height, and vertical margin and padding have no impact, though horizontal margin and padding do. how intrinsic sizes are calculated is defined in the css intrinsic and extrinsic sizing specification. intrinsic sizing takes into account the min-content and max-content size of an element. for text the min-content size would be if the text wrapped as small as it can in the inline direction without causing an overflow, doing as much soft-wrapping as possible. for a box containing a string of text, the min-content size would be defined by the longest word. the keyword value of min-content for the width property will size an element according to the min-content size. the max-content size is the opposite — in the case of text, this would have the text display as wide as possible, do...

Localization - MDN Web Docs Glossary: Definitions of Web-related terms
localization (l10n) is the process of adapting a software user interface to a specific culture. the following are common factors to consider: language unit of measure (e.g., kilometers in europe, miles in u.s.) text direction (e.g., european languages are left-to-right, arabic right-to-left) capitalization in latin script (e.g., english uses capitals for weekdays, spanish uses lowercase) adaptation of idioms (e.g., "raining cats and dogs" makes no sense when translated literally) use of register (e.g., in japanese respectful speech differs exceptionally from casual speech) number format (e.g., 10 000,00 in germany vs. 10,000.00 in the u.s.) date format currency cultural references paper size color psychology compliance with local laws local holidays personal names learn ...

Progressive Enhancement - MDN Web Docs Glossary: Definitions of Web-related terms
special notice should be taken of accessibility. acceptable alternatives should be provided where possible. progressive enhancement is a useful technique that allows web developers to focus on developing the best possible websites while making those websites work on multiple unknown user agents. graceful degradation is related but is not the same thing and is often seen as going in the opposite direction to progressive enhancement. in reality both approaches are valid and can often complement one another. learn more general knowledge progressive enhancement on wikipedia ...

TOFU - MDN Web Docs Glossary: Definitions of Web-related terms
if an identifier is found, the client can establish the connection. if no identifier is found, the client can prompt the user to determine if the client should trust the identifier. tofu is used in the ssh protocol, in http public key pinning (hpkp) where the browsers will accept the first public key returned by the server, and in strict-transport-security (hsts) where a browser will obey the redirection rule. learn more http public key pinning (hpkp) public-key-pins wikipedia: tofu ...

Routers - MDN Web Docs Glossary: Definitions of Web-related terms
they are distributed by retailers allowing user interaction to the internet. for spa in application layer, router is a library that decides what web page is presented by a given url. this middleware module is used for all url functions, as these are given a path to a file that is rendered to open the next page. ...

MDN Web Docs Glossary: Definitions of Web-related terms
xhr (xmlhttprequest) xhtml xinclude xlink xml xpath xquery xslt other 404 502 alpn at-rule attack byte-order mark character set client cryptosystem debug digital signature execution flex-direction glsl interface library memory management routers self-executing anonymous function stylesheet vector image ...

Cascade and inheritance - Learn web development
k here if you start to come across strange issues with styles not applying as expected. it could be a specificity issue. ...

Organizing your CSS - Learn web development
css cookbook for patterns to use, and read more in some of the specific guides such as our guide to css grid layout. ...

Overflowing content - Learn web development
verflow, and also, that you should test work to make sure it does not accidentally cause problematic overflow. ...

Attribute selectors - Learn web development
e selectors, you can continue on to the next article and read about pseudo-class and pseudo-element selectors. ...

Combinators - Learn web development
tion in our lessons on selectors. next we will move on to another important part of css — the css box model. ...

Type, class, and ID selectors - Learn web development
...

CSS selectors - Learn web development
p child combinator adjacent sibling combinator h1 + p adjacent sibling general sibling combinator h1 ~ p general sibling in this module cascade and inheritance css selectors type, class, and id selectors attribute selectors pseudo-classes and pseudo-elements combinators the box model backgrounds and borders handling different text directions overflowing content values and units sizing items in css images, media, and form elements styling tables debugging css organizing your css ...

Sizing items in CSS - Learn web development
nt in mastering the different layout methods, so it is worth understanding the concepts here before moving on. ...

Styling tables - Learn web development
you think they should. this includes information on using browser devtools to find solutions to your problems. ...

CSS values and units - Learn web development
g that <image> also allows you to create a color gradient is useful but perhaps non-obvious knowledge to have! ...

Test your skills: Writing Modes and Logical Properties - Learn web development
note: you can try out solutions in the interactive editors below, however it may be helpful to download the code and use an online tool such as codepen, jsfiddle, or glitch to work on the tasks. if you get stuck, then ask us for help — see the assessment or further help section at the bottom of this page. ...

CSS building blocks - Learn web development
omplex layout tasks with an understanding of how it works and the terminology that relates to it. backgrounds and borders in this lesson we will take a look at some of the creative things you can do with css backgrounds and borders. from adding gradients, background images, and rounded corners, backgrounds and borders are the answer to a lot of styling questions in css. handling different text directions in recent years, css has evolved in order to better support different directionality of content, including right-to-left but also top-to-bottom content (such as japanese) — these different directionalities are called writing modes. as you progress in your study and begin to work with layout, an understanding of writing modes will be very helpful to you, therefore we will introduce them in thi...

Normal Flow - Learn web development
element with display: block; (or even,display: inline-block; which mixes characteristics from both.) that explains individual elements, but what about how elements interact with one another? the normal layout flow (mentioned in the layout introduction article) is the system by which elements are placed inside the browser's viewport. by default, block-level elements are laid out in the block flow direction, based on the parent's writing mode (initial: horizontal-tb) — each one will appear on a new line below the last one, and they will be separated by any margin that is set on them. in english therefore, or any other horizontal, top to bottom writing mode, block-level elements are laid out vertically. inline elements behave differently — they don't appear on new lines; instead, they sit on the...

Positioning - Learn web development
round: yellow; top: 30px; left: 30px; } cool, huh? ok, so this probably wasn't what you were expecting — why has it moved to the bottom and right if we specified top and left? illogical as it may initially sound, this is just the way that relative positioning works — you need to think of an invisible force that pushes the specified side of the positioned box, moving it in the opposite direction. so for example, if you specify top: 30px;, a force pushes the top of the box, causing it to move downwards by 30px. note: you can see the example at this point live at 2_relative-positioning.html (see source code). absolute positioning absolute positioning brings very different results. let's try changing the position declaration in your code as follows: position: absolute; if you now sav...

What do common web layouts contain? - Learn web development
our website, it's good to have an idea of the most common layouts. prerequisites: make sure you've already thought about what you want to accomplish with your web project. objective: learn where to put things on your webpages, and how to put them there. summary there's a reason we talk about web design. you start out with a blank page, and you can take it so many directions. and if you don't have much experience, starting out with a blank page might be a bit scary. we have over 25 years' experience and we'll give you some common rules of thumb to help you design your site. even now with the new focus on mobile web, almost all mainstream webpages are built from these parts: header visible at the top of every page on the site. contains information relevant to al...

How do I start to design my website? - Learn web development
summary when starting with a web project, many people focus on the technical side. of course you must be familiar with the technique of your craft, but what really matters is what you want to accomplish. yes, it seems obvious, but too many projects fail not from a lack of technical know-how, but from lack of goals and vision. ...

What is a URL? - Learn web development
parameters to do extra stuff before returning the resource. each web server has its own rules regarding parameters, and the only reliable way to know if a specific web server is handling parameters is by asking the web server owner. #somewhereinthedocument is an anchor to another part of the resource itself. an anchor represents a sort of "bookmark" inside the resource, giving the browser the directions to show the content located at that "bookmarked" spot. on an html document, for example, the browser will scroll to the point where the anchor is defined; on a video or audio document, the browser will try to go to the time the anchor represents. it is worth noting that the part after the #, also known as the fragment identifier, is never sent to the server with the request. note: there are so...

Other form controls - Learn web development
g textarea resizability the ability to resize a <textarea> is controlled with the css resize property. its possible values are: both: the default — allows resizing horizontally and vertically. horizontal: allows resizing only horizontally. vertical: allows resizing only vertically. none: allows no resizing. block and inline: experimental values that allow resizing in the block or inline direction only (this varies depending on the directionality of your text; read handling different text directions if you want to find out more.) play with the interactive example at the top of the resize reference page for a demonstration of how these work. drop-down controls drop-down controls are a simple way to let users select from many different options without taking up much space in the user int...

Document and website structure - Learn web development
tic text element to wrap your content, or don't want to add any specific meaning. for example: <p>the king walked drunkenly back to his room at 01:00, the beer doing nothing to aid him as he staggered through the door <span class="editor-note">[editor's note: at this point in the play, the lights should be down low]</span>.</p> in this case, the editor's note is supposed to merely provide extra direction for the director of the play; it is not supposed to have extra semantic meaning. for sighted users, css would perhaps be used to distance the note slightly from the main text. <div> is a block level non-semantic element, which you should only use if you can't think of a better semantic block element to use, or don't want to add any specific meaning. for example, imagine a shopping cart widget th...

Adding vector graphics to the Web - Learn web development
-image: url("image.svg"); background-size: contain; like the <img> method described above, inserting svgs using css background images means that the svg can't be manipulated with javascript, and is also subject to the same css limitations. if your svgs aren't showing up at all, it might be because your server isn't set up properly. if that's the problem, this article will point you in the right direction. how to include svg code inside your html you can also open up the svg file in a text editor, copy the svg code, and paste it into your html document — this is sometimes called putting your svg inline, or inlining svg. make sure your svg code snippet begins and ends with the <svg></svg> tags (don't include anything outside those.) here's a very simple example of what you might paste into your...

Drawing graphics - Learn web development
ree.ambientlight('rgb(255, 255, 255)'); // soft white light scene.add(light); let spotlight = new three.spotlight('rgb(255, 255, 255)'); spotlight.position.set( 100, 1000, 1000 ); spotlight.castshadow = true; scene.add(spotlight); an ambientlight object is a kind of soft light that lightens the whole scene a bit, like the sun when you are outside. the spotlight object, on the other hand, is a directional beam of light, more like a flashlight/torch (or a spotlight, in fact). last of all, let's add our draw() function to the bottom of the code: function draw() { cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); requestanimationframe(draw); } this is fairly intuitive; on each frame, we rotate our cube slightly on its x and y axes, then render th...

Third-party APIs - Learn web development
. onto the end of the first method call we chain .bindpopup('this is manchester!'), which defines content to display when the marker is clicked. finally, we chain .addto(map) to the end of the chain to actually add the marker to the map. have a play with the other options shown in the documentation and see what you can come up with! mapquest provides some pretty advanced functionality, such as directions, searching, etc. note: if you have trouble getting the example to work, check your code against our finished version — see expanded-example.html (also see it running live here). what about google maps? google maps is arguably the most popular maps api, so why didn't we use it for our maps example? we did create an example to show how to use it, but in the end we went with mapquest for a c...

Test your skills: Arrays - Learn web development
h of the array in a variable called arraylength. store the last item in the array in a variable called lastitem. try updating the live code below to recreate the finished example: download the starting point for this task to work in your own editor or in an online editor. arrays 3 for this final array task, we provide you with a starting array, and you will work in somewhat the opposite direction. you need to: remove the last item in the array. add two new names to the end of the array. go over each item in the array and add its index number after the name inside parentheses, for example ryu (0). note that we don't teach how to do this in the arrays article, so you'll have to do some research. finally, join the array items together in a single string called mystring, with a separato...

Object building practice - Learn web development
lx); } if ((this.y + this.size) >= height) { this.vely = -(this.vely); } if ((this.y - this.size) <= 0) { this.vely = -(this.vely); } this.x += this.velx; this.y += this.vely; } the first four parts of the function check whether the ball has reached the edge of the canvas. if it has, we reverse the polarity of the relevant velocity to make the ball travel in the opposite direction. so for example, if the ball was traveling upwards (positive vely), then the vertical velocity is changed so that it starts to travel downwards instead (negative vely). in the four cases, we are checking to see: if the x coordinate is greater than the width of the canvas (the ball is going off the right edge). if the x coordinate is smaller than 0 (the ball is going off the left edge). if t...

Beginning our React todo list - Learn web development
focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-heig...

Starting our Svelte Todo list app - Learn web development
focus { border-color: #4d4d4d; box-shadow: inset 0 0 0 2px; } [class*="__lg"] { display: inline-block; width: 100%; font-size: 1.9rem; } [class*="__lg"]:not(:last-child) { margin-bottom: 1rem; } @media screen and (min-width: 620px) { [class*="__lg"] { font-size: 2.4rem; } } .filters { width: 100%; margin: unset auto; } /* todo item styles */ .todo { display: flex; flex-direction: row; flex-wrap: wrap; } .todo > * { flex: 0 0 100%; } .todo-text { width: 100%; min-height: 4.4rem; padding: 0.4rem 0.8rem; border: 2px solid #565656; } .todo-text:focus { box-shadow: inset 0 0 0 2px; } /* checkbox styles */ .c-cb { box-sizing: border-box; font-family: arial, sans-serif; -webkit-font-smoothing: antialiased; font-weight: 400; font-size: 1.6rem; line-heig...

Vue conditional rendering: editing existing todos - Learn web development
this is a useful way to help reinforce everything you've learned so far. this code sets up the core of the edit functionality. we create a form with an <input> field for editing the ...

Handling common accessibility problems - Learn web development
t to make as much of your content accessible to as many people as possible via defensive coding and sticking to best practices. common accessibility issues in this section we'll detail some of the main issues that arise around web accessibility, connected with specific technologies, along with best practices to follow, and some quick tests you can do to see if your sites are going in the right direction. note: accessibility is morally the right thing to do, and good for business (numbers of disabled users, users on mobile devices, etc. present significant market segments), but it is also a legal requirement in many parts of the world to make web content accessible to people with disabilities. read accessibility guidelines and the law for more information. html semantic html (where the eleme...

Introducing a complete toolchain - Learn web development
mmand line to issue commands, to using a git gui app to issue the same commands by pushing buttons, or even from directly inside your code editor, as seen in the visual studio code example below: anyway, installing git is all we need to do for now. let's move on. code tidying tools we'll be using prettier, which we first met in chapter 2, to tidy our code in this project. if you followed the directions in the installing prettier section then you might already have prettier installed. if not, we'll get you to install prettier as a global utility using the terminal right now. you can check whether you've already got it installed globally using the following command: prettier -v if installed, you'll get a version number returned like 2.0.2; if not, it'll return something along the lines of "co...

omni.ja (formerly omni.jar)
it is suggested that windows 7 users unzip the file by renaming it to omni.zip and using windows explorer to extract all files. users of older versions of windows can use infozip's unzip tool to extract files - make a copy of omni.ja, and drag-and-drop it onto unzip.exe. linux users can simply use unzip command to inflate files of omni.ja. omni.ja is also incompatible with zip files in the other direction; editing extracted files won't affect firefox, and repacking edited files may break firefox if you do not use the right options when packing the extracted files. the correct command to pack omni.ja is: zip -0dxqr omni.ja * the working directory must be at the root directory of the files from the omni.ja file. zip -0dxqr omni.ja path/to/omni/* will not work. note: prior to firefox 10 and thunde...

Accessibility API cross-reference
> presumably msaa's graphic is aria's and html's img? graphic n/a n/a img <img> a cell in a grid or treegrid. grid a composite widget containing a collection of one or more rows with one or more cells where some or all cells in the grid are focusable by using methods of two-dimensional navigation, such as directional arrow keys, e.g. a spreadsheet. gridcell a type of mouse pointer used for resizing windows grip n/a n/a n/a probably a group box (titledbox in mozilla) grouping panel panel group <fieldset>, <div> a heading for a section of the page. in aria, the heading level is expressed with the a...

Mozilla accessibility architecture
ent, because they have no dom node. these accessibles cannot be shutdown by traversing the dom, because their cache entry is not based on their dom node. therefore, the parent that generates these accessibles must also be responsible for shutting them down when their shutdown() method is called. this is currently implemented for nshtmlcomboboxaccessible as wells as nsxultreeaccessible. 6. future directions in general, the accessible api module work should now be coming to a conclusion. unfortunately, we still are not fully working with any major screen reader, screen magnifier or voice dictation product on the market. we hope to change that soon, and are working with the major vendors (and gnopernicus on linux/unix) to achieve this. in any case, for the moment the only plans on windows are for min...

Embedding API for Accessibility
here is the w3c's definition of accessibility for a user agent like mozilla. in part, being accessible means supporting a built-in accessibility apis for a platform, such as microsoft active accessibility or atk for linux and unix desktops. there are many other pieces, such as preferences to allow the user to change foreground and background colors, and font sizes. mozilla already supports some of these options. this document lays out what we already have, and what we'll need later, in the embedding api to support accessibility. ...

Gecko info for Windows accessibility vendors
tures we do not support no one has yet asked for the following features (if you need something, please contact the mozilla accessibility community ): iaccessible methods that we don't currently support: get_acchelp get_acchelptopic put_accname put_accvalue we do not currently support the visual basic (idispatch) bindings for iaccessible. we do not currently support directional navigation via accnavigate() we do not currently support scroll bars as iaccessible objects, although we do support event_scrollingend and isimpledomnode::scrollto(), explained below. we do not currently support state_moveable, state_sizeable or state_marqueed. we do not currently support role_system_row, although internet explorer doesn't either, and the reason seems apparent. it i...

Mozilla's Section 508 Compliance
nd text-decoration: blink in web pages. in these situations mozilla blinks 1 hz, which is within the allowable range and follows the stricter mil-std standard. (l) when electronic forms are used, the form shall allow people using assistive technology to access the information, field elements, and functionality required for completion and submission of the form, including all directions and cues. partially complete. see functional performance criteria below. screen reader access is currently being tested. an extension called ad block helps remove extra noisy content from web pages that clutter accessibility. functional performance criteria requirement windows linux/unix mac os ...

Mozilla’s UAAG evaluation report
off scripting, but then no event processing is available 9.6 show event handlers. (p2) p can view event handlers through source view or dom inspector (tasks, tools, dom inspector) 9.7 move content focus optimally. (p2) g provides sequential access to links and input form controls cannot navigate to non-links and non-input form controls with event handlers no directional navigation, or navigation to links by name 9.8 text search. (p2) vg provides forward and reverse text search capability from the element with the current focus/selection, with and without case sensitivity very slow on larger documents. needs improvement. 9.9 structured navigation. (p2) p dom inspector provides some capability, but not really intended for end us...

Creating JavaScript callbacks in components
basically, the component defines an observer (or listener) interface which is implemented by some external code and this implementation is passed to the component. the component can then call methods on the observer interface to signal the external code when predefined events occur. ...

Debugging on Mac OS X
lldb, you can use mozilla-specific lldb commands in the console, located in the debug area of xcode. for example, type js to see the javascript stack. for more information, see debugging mozilla with lldb. debugging e10s child processes using xcode to debug child processes created by an e10s-enabled browser is a little trickier than debugging a single-process browser, but it can be done. ...

Configuring Build Options
note: do not make substantive changes to this document without consulting benjamin smedberg <benjamin@smedbergs.us> or one of the build-config peersthis document details how to configure firefox builds. most of the time a mozconfig file is not required. the default options are the most well-supported, so it is preferable to add as few options as possible. please read the following directions carefully before building, and follow them in order. skipping any step may cause the build to fail, or the built software to be unusable. build options, including options not usable from the command-line, may appear in "confvars.sh" files in the source tree. using a mozconfig configuration file the choice of which mozilla application to build and other configuration options can be configured in a mozc...

Listening to events on all tabs
er the browser that fired the notification. awebprogress the nsiwebprogress instance that fired the notification. arefreshuri the new uri that awebprogress has requested redirecting to. amillis the delay (in milliseconds) before refresh. asameuri true if awebprogress is requesting a refresh of the current uri. false if awebprogress is requesting a redirection to a different uri. return value true if the refresh may proceed. false if the refresh should be aborted. onlinkiconavailable notification that the site icon for a browser has been found. void onlinkiconavailable( nsidomxulelement abrowser, ); parameters abrowser the browser that fired the notification. ...

Cross Process Object Wrappers
e, through window.content or browser.contentdocument), it is given back a cpow that wraps the content object. this means that examples like this will actually work, even in multiprocess firefox: gbrowser.selectedbrowser.contentdocument.body.innerhtml = "replaced by chrome code"; it's still important to keep in mind, though, that this is access through a cpow and not direct access to content. bidirectional cpows a common pattern is for chrome code to access content objects and add event listeners to them. to deal with this, cpows are bidirectional. this means that if content passes a cpow to the chrome process, the chrome process can synchronously pass objects (such as event listener functions) into functions defined in the cpow. this means you can write code like this: // frame script /* on ...

Process scripts
rome or in a content process by looking at the process type in services.appinfo. in just about every respect, using process scripts is like using frame scripts: you can pass the allowdelayedload to loadprocessscript(). if you do, you must call removedelayedprocessscript() when your extension is disabled or removed the message-passing apis are the same: sendasyncmessage() is available in both directions, while sendsyncmessage() is available from content to chrome only process scripts are system-privileged, and have access to the components object. however, process scripts are subject to the same kinds of limitations as frame scripts (for example, no file system access). process scripts stay loaded until their host process is closed. the environment for process scripts is similar to that for ...

Using the Browser API
we switch the class values on the element to toggle the show...

HTMLIFrameElement.findNext()
h result after a findall() search has been carried out. invoking this method results in a mozbrowserfindchange event firing, which carries details about the search results. note: use of the browser api requires a privileged app, and browser and/or embed-apps permissions, depending on what you want to do. see using the browser api for more details. syntax instanceofhtmliframeelement.findnext(direction); return value void. parameters direction a string indicating the direction in which you want to cycle through the available search results. available values are forward and backward. examples the following functions are taken from our browser api demo, and cycle through the available search results. see implementing the search bar for more explanation. prev.addeventlistener('touchend'...

overflow-clip-box-block
/* keyword values */ overflow-clip-box-block: padding-box; overflow-clip-box-block: content-box; /* global values */ overflow-clip-box-block: inherited; overflow-clip-box-block: initial; overflow-clip-box-block: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. ...

overflow-clip-box-inline
/* keyword values */ overflow-clip-box-inline: padding-box; overflow-clip-box-inline: content-box; /* global values */ overflow-clip-box-inline: inherited; overflow-clip-box-inline: initial; overflow-clip-box-inline: unset; note: on gecko, by default, padding-box is used everywhere, but <input type="text"> and similar use the value content-box. note that this property is activated by default only in the ua stylesheet and chrome contexts. ...

Chrome-only CSS reference
xul display values:overflow-clip-boxthe overflow-clip-box css property specifies relative to which box the clipping happens when there is an overflow. it is short hand for the overflow-clip-box-inline and overflow-clip-box-block properties.overflow-clip-box-blockthe overflow-clip-box-block css property specifies relative to which box the clipping happens when there is an overflow — in the block direction.overflow-clip-box-inlinethe overflow-clip-box-inline css property specifies relative to which box the clipping happens when there is an overflow — in the inline direction. ...

Internationalized Domain Names (IDN) Support in Mozilla Browsers
ns them into unicode, then normalizes the input string to make it conform to general uri requirement. the process will convert uppercase characters to lowercase ones (case folding), unify characters with multiple representation, e.g. conversion of half-width kana characters in japanese into full-width ones (normalization), eliminate prohibited characters (e.g. space), eliminate ambiguities in bi-directional text (e.g. arabic and hebrew), and check whether or not unassigned characters in the unicode repertoire are used -- allowing them for "query strings" but disallowing them for "stored strings" such as the data input for domain name registration. this process is called "nameprep" and is performed according to rfc 3491 (nameprep: a stringprep profile for internationalized domain names (idn)) and ...

FxAccountsOAuthClient.jsm
ntsoauthclient( object options object parameters string client_id string state string oauth_uri string content_uri [optional] string scope [optional] string action [optional] string authorizationendpoint ); parameters client_id - oauth id returned from client registration. state - oauth state value that will be returned to the client as-is upon redirection. oauth_uri - the fxa oauth api server uri, versioned. example: "https://oauth.accounts.firefox.com/v1" content_uri - the fxa content server uri. example: "https://accounts.firefox.com" [optional] scope - a colon-separated list of scopes that the user has authorized. [optional] action - if provided, should be either "signup" or "signin". parameters set of parameters to initialize the...

Creating localizable web applications
s if necessary oftentimes, it is better to slightly simplify the localized version of your web application than to serve a mix of localized and english content. for example, if not all the pages of your website are going to be localized, you may consider removing links to the english-only pages from the navigation (headers, footers, sidebars) in the localized versions. define the locale and the direction in the html generate the lang attribute dynamically, depending on the current locale. use the dir attribute on the <html/> element and consider using a rtl class on <html/> or <body/> as well, in order to easily change css rules like in the example below. snippet 1. bad: <html lang="en"> snippet 2. good: css: html[dir='rtl'] foo { /* rtl-specific rules for the foo element */ } body.rtl ...

Leak-hunting strategies and tips
bject. while this can be debugged in detail, the quickest way to solve these problems is often to simply debug the leaked js roots. these roots are printed on shutdown in debug builds, and the name of the root should give the type of object it is associated with. one of the most common ways one could leak a js root is by leaking an nsxpcwrappedjs object. this is the wrapper object in the reverse direction -- when a js object is used to implement an xpcom interface and be used transparently by native code. the nsxpcwrappedjs object creates a gc root that exists as long as the wrapper does. the wrapper itself is just a normal reference-counted object, so a leaked nsxpcwrappedjs can be debugged using the normal refcount-balancer tools. if you really need to debug leaks that involve js objects closel...

ui.alertNotificationOrigin
ui.alertnotificationorigin controls the position and direction from which popup notifications invoked by nsialertsservice are sliding in. type:integer default value:dependent on position of taskbar or equivalent exists by default: no application support: gecko 1.8.1.2 (firefox 2.0.0.2 / thunderbird 2.0.0.4 / seamonkey 1.1) status: active; last updated 2012-02-22 introduction: pushed to nightly on 2007-01-04 bugs: bug 133527 values 0 bottom right corner, vertical slide-in from the bottom 1 bottom right corner, horizontal slide-in from the right 2 bottom left corner, vertical slide-in from the bottom 3 bottom left corner, horizontal slide-in from the left 4 top right corner, vertical slide-in from the top 5 top right corner, horizontal slide-in from the right 6 top...

Preference reference
e application runs.reader.parse-on-load.force-enabledthe preference reader.parse-on-load.force-enabled controls if the reader mode used in firefox mobile should be enabled independent of the memory available in the device. ...

PRProcessAttr
represents the attributes of a new process. syntax #include <prproces.h> typedef struct prprocessattr prprocessattr; description this opaque structure describes the attributes of a process to be created. pass a pointer to a prprocessattr into pr_createprocess when you create a new process, specifying information such as standard input/output redirection and file descriptor inheritance. ...

PR_Seek
pressed as a 32-bit integer. deprecated in favor of pr_seek64. syntax #include <prio.h> print32 pr_seek( prfiledesc *fd, print32 offset, prseekwhence whence); parameters the function has the following parameters: fd a pointer to a prfiledesc object. offset a value, in bytes, used with the whence parameter to set the file pointer. a negative value causes seeking in the reverse direction. whence a value of type prseekwhence that specifies how to interpret the offset parameter in setting the file pointer associated with the fd parameter. the value for the whence parameter can be one of the following: pr_seek_set. sets the file pointer to the value of the offset parameter. pr_seek_cur. sets the file pointer to its current location plus the value of the offset parameter. p...

PR_Seek64
-write file pointer by an offset expressed as a 64-bit integer. syntax #include <prio.h> print64 pr_seek64( prfiledesc *fd, print64 offset, prseekwhence whence); parameters the function has the following parameters: fd a pointer to a prfiledesc object. offset a value, in bytes, used with the whence parameter to set the file pointer. a negative value causes seeking in the reverse direction. whence a value of type prseekwhence that specifies how to interpret the offset parameter in setting the file pointer associated with the fd parameter. the value for the whence parameter can be one of the following: pr_seek_set. sets the file pointer to the value of the offset parameter. pr_seek_cur. sets the file pointer to its current location plus the value of the offset parameter. p...

Index
enter password or pin for "communicator certificate db": [password will not echo] generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert" added to database exported certificate to x509.raw and x509.cacert. the certificate information is read from standard input. therefore, the information can be read from a file using the redirection operator (<) in some operating systems. to create a file for this purpose, enter each of the seven input fields, in order, on a separate line. make sure there is a newline character at the end of the last line. then run signtool with standard input redirected from your file as follows: signtool -g mytestcert inputfile the prompts show up on the screen, but the responses will be ...

NSS tools : signtool
enter password or pin for "communicator certificate db": [password will not echo] generated public/private key pair certificate request generated certificate has been signed certificate "mytestcert" added to database exported certificate to x509.raw and x509.cacert. the certificate information is read from standard input. therefore, the information can be read from a file using the redirection operator (<) in some operating systems. to create a file for this purpose, enter each of the seven input fields, in order, on a separate line. make sure there is a newline character at the end of the last line. then run signtool with standard input redirected from your file as follows: signtool -g mytestcert inputfile the prompts show up on the screen, but the responses will be ...

Hacking Tips
ters (set iongraph-bin <path>, set dot-bin <path>, set pngviewer-bin <path>) within gdb. enabling gdb instrumentation may require launching a js shell executable that shares a directory with a file name "js-gdb.py". if js/src/js does not provide the "iongraph" command, try js/src/shell/js. gdb may complain that ~/.gdbinit requires modification to authorize user scripts, and if so will print out directions. break on valgrind errors sometimes, a bug can be reproduced under valgrind but hardly under gdb. one way to investigate is to let valgrind start gdb for you, the other way documented here is to let valgrind act as a gdb server which can be manipulated from the gdb remote. $ valgrind --smc-check=all-non-file --vex-iropt-register-updates=allregs-at-mem-access --vgdb-error=0 ./js … this com...

Index
dermonkey in which test suite does your new test belong? 3 creating javascript jstest reftests ecmascript, guide, javascript, test in the js/src/tests directory, there are a few important subdirectories. 4 foss guide, spidermonkey feel free to add your own spidermonkey-based open source projects (and if necessary add categories)! 5 future directions guide, mozilla, spidermonkey this article documents future directions in functionality, design, and coding practices for spidermonkey. it can be read as something like an "ideal future state" for the engine. that means the code as it is today won't match this document, and that's ok. whenever practical, new code and changes should move code closer to the ideal future. and of course, th...

Bytecode Descriptions
accessed are stored in stack slots. global and with bindings are object properties. all other bindings are called "aliased" and stored in environmentobjects. where possible, aliased instructions are used to access aliased bindings. (there's no difference in meaning between aliasedvar and aliasedlexical.) each of these instructions has operands hops and slot that encode an environmentcoordinate, directions to the binding from the current environment object. aliased instructions can't be used when there's a dynamic scope (due to non-strict eval or with) that might shadow the aliased binding. format: jof_envcoord, jof_name, jof_typeset, jof_ic getimport operands: (uint32_t nameindex) stack: ⇒ val get the value of a module import by name and pushes it onto the stack. format: jof_atom, jof_name, ...

SpiderMonkey Internals
s. at most one trap per bytecode can be set. when a script (jsscript) is destroyed, all traps set in its bytecode are cleared. watchpoints, for intercepting set operations on properties and running a debugger-supplied function that receives the old value and a pointer to the new one, which it can use to modify the new value being set. line number to pc and back mapping functions. the line-to-pc direction "rounds" toward the next bytecode generated from a line greater than or equal to the input line, and may return the pc of a for-loop update part, if given the line number of the loop body's closing brace. any line after the last one in a script or function maps to a pc one byte beyond the last bytecode in the script. an example, from perfect.js: function perfect(n) { print("the perfect numbers...

SpiderMonkey 1.8.5
this versioning scheme will not be rolled back into the upstream mozilla source tree(s), and may not be used in future source releases. comments in bug 628723 with regard to its usefulness are appreciated. bugs with the source release tar ball should be copied to wes@page.ca. spidermonkey embedders should al...

SpiderMonkey 1.8.7
this versioning scheme will not be rolled back into the upstream mozilla source tree(s), and may not be used in future source releases. comments in bug 628723 with regard to its usefulness are appreciated. bugs with the source release tar ball should be copied to wes@page.ca. spidermonkey embedders should al...

SpiderMonkey 1.8.8
, in the callback function. removal of jscontext* parameters to many methods the js_getclass method now takes only a jsobject*, where previously it also required a jscontext* in threadsafe builds. (the js_get_class macro abstracting away this difference has accordingly been removed.) javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction include-followup-on-experimental-library-versioning-scheme-here spidermonkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi stable for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only ...

SpiderMonkey 17
o abstracting away this difference has accordingly been removed.) garbage collection functions now take runtime argument most garbage collection functions now take a runtime argument instead of a context. the one exception to this is js_maybegc which still takes a context as argument. javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction include-followup-on-experimental-library-versioning-scheme-here spidermonkey embedders should also be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi stable for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only ...

SpiderMonkey 24
in jsclass definitions now use js_deletepropertystub garbage collection functions now take runtime argument most garbage collection functions now take a runtime argument instead of a context. the one exception to this is js_maybegc which still takes a context as argument. javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction ...insert details on future plans... spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi stable for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. the team is considering the removal of tinyids js_threadsafe is going away, with future versions supporting only thread-safe builds a new deb...

SpiderMonkey 31
lling it may be required in a future spidermonkey release. javascript shell changes detail added/removed methods here... on posix platforms, building a threadsafe shell no longer requires nspr. embedders still need to build with nspr, as the new wrappers require using spidermonkey internal functions which are not exposed to the public api. known issues detail any known issues here... future direction ...insert details on future plans... spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi stable for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. relea...

SpiderMonkey 38
empt took effect or not, independent of jsapi failure). this change better aligns with ecmascript's [[preventextensions]] hook, which generally returns true or false to indicate whether subsequent attempts to add a new property will fail, yet also itself may throw in some cases. javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction ...insert details on future plans... spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi, nor the jsdbgapi, stable for embedders. we have chosen to concentrate on performance and correctness as primary concerns instead. js_threadsafe is going away, with future versions supporting only thread-safe builds a new debugging api is on the way to replace jsd. rele...

SpiderMonkey 45
t is now implicit js_addweakpointercallback is replaced with js_addweakpointerzonegroupcallback and js_addweakpointercompartmentcallback js_removeweakpointercallback is replaced with js_removeweakpointerzonegroupcallback and js_removeweakpointercompartmentcallback api changes javascript shell changes detail added/removed methods here... known issues detail any known issues here... future direction jscontext and jsruntime are merging. (jscontext will be the only thing visible from within the api, there will be just one per runtime, and inheriting from jsruntime.) spidermonkey embedders should be aware that mozilla has no plans to keep the jsapi stable for embedders. we have instead chosen to concentrate on overall performance and accuracy as our primary concerns. release notes errata fe...

SpiderMonkey: The Mozilla JavaScript runtime
e spidermonkey api reference. js debugger api reference api reference for the debugger object introduced in spidermonkey 1.8.6, which corresponds to gecko 8.0 (firefox 8.0 / thunderbird 8.0 / seamonkey 2.5). bytecode descriptions listing of spidermonkey's bytecodes. parser api reflection of the spidermonkey parser, made available as a javascript api. tips, tricks and philosophy future directions future directions for functionality, design, and coding practices. spidermonkey internals a design overview and a file-by-file walkthrough of the implementation. bytecode reference spidermonkey bytecode reference. spidermonkey internals: gc separate internals article on the gc spidermonkey internals: hacking tips collection of helpful tips & tools for hacking on the engine related to...

Gecko Roles
toolbar that has a drop-down list icon directly adjacent to the button. role_ipaddress represents an edit control designed for an internet protocol (ip) address. the edit control is divided into sections for the different parts of the ip address. role_accel_label represents a label control that has an accelerator. role_arrow represents an arrow in one of the four cardinal directions. role_canvas represents a control that can be drawn into and is used to trap events. role_check_menu_item represents a menu item with a check box. role_color_chooser represents a specialized dialog that lets the user choose a color. role_date_editor represents control whose purpose is to allow a user to edit a date. role_desktop_icon an iconified internal ...

Index
thunderbird the nsmsgviewflagstype interface contains constants used for view flags in thunderbird. this interface isn't ever implemented. it is only used to store constants. for example, the 'unread only' view would use the flag: 1265 nsmsgviewsortorder interfaces, xpcom, xpcom api reference, thunderbird the nsmsgviewsortorder interface contains constants used for sort direction in thunderbird. this interface isn't ever implemented. it is only used to store constants. for example to sort by date you would pass a function the value: 1266 nsmsgviewsorttype interfaces, xpcom, xpcom api reference, thunderbird the nsmsgviewsorttype interface contains constants used for sorting the thunderbird threadpane. this interface isn't ever implemented. it is only u...

Components.utils.Sandbox
n objects outside the sandbox. default: true. "xray vision" is exactly the same xray behavior that script always gets, by default, when working with dom objects across origin boundaries. this is primarily visible for chrome code accessing content. however, it also occurs during cross-origin access between two content pages, since each page sees a "vanilla" view of the other. the protection is bidirectional: the caller sees the bonafide dom objects without being confused by sneakily-redefined properties, and the target receives appropriate privacy from having its expandos inspected by untrusted callers. in situations where only unidirectional protection is needed, callers have the option to waive the x-ray behavior using wrappedjsobject or xpcnativewrapper.unwrap(). in general, when accessing sa...

nsIAccessibleRole
tton on a toolbar that has a drop-down list icon directly adjacent to the button. role_ipaddress 63 represents an edit control designed for an internet protocol (ip) address. the edit control is divided into sections for the different parts of the ip address. role_accel_label 64 represents a label control that has an accelerator. role_arrow 65 represents an arrow in one of the four cardinal directions. role_canvas 66 represents a control that can be drawn into and is used to trap events. it is used for html:canvas. role_check_menu_item 67 represents a menu item with a check box. role_color_chooser 68 represents a specialized dialog that lets the user choose a color. role_date_editor 69 represents control whose purpose is to allow a user to edit a date. role_desktop_icon 70 an iconif...

nsIContentViewManager
attribute type description rootcontentview nsicontentview the root content view. read only. methods getcontentviewsin() returns an array of nsicontentview objects representing all of the content views that intersect with the specified rectangle in the browser. note: the rectangle is specified using an anchor point, then four distances to indicate how far in each direction to expand the rectangle. this lets you, for example, take the coordinates at which the user clicked (or touched) the screen, and expand outward to create a rectangle from that point. pixels are in chrome device pixels and are relative to the browser element. void getcontentviewsin( in float axpx, in float aypx, in float atopsize, in float arightsize, in float abottomsize, in float a...

nsIEditor
osition); void insertnode(in nsidomnode node, in nsidomnode parent, in long aposition); void splitnode(in nsidomnode existingrightnode, in long offset, out nsidomnode newleftnode); void joinnodes(in nsidomnode leftnode, in nsidomnode rightnode, in nsidomnode parent); void deletenode(in nsidomnode child); void marknodedirty(in nsidomnode node); direction controller void switchtextdirection(); output methods astring outputtostring(in astring formattype, in unsigned long flags); example: // flags are declared in base/public/nsidocumentencoder.idl // outputselectiononly = 1, outputformatted = 2, // outputraw = 4, outputbodyonly = 8, // outputpreformatted = 16, outputwrap = 32, /...

nsIFaviconService
is method is very similar to that of getfaviconlinkforicon() method. for a given page will give you a uri that, when displayed in chrome, will result in the given page's favicon. unlike the other get functions, we needn't have heard of the page or its favicon: the default one will be returned in this case. when compared to getfaviconlinkforicon() method, this method only adds the extra level of indirection, looking up the favicon based on the page uri and using the default if not found. nsiuri getfaviconimageforpage( in nsiuri apageuri ); parameters apageuri uri of the page whose favicon is desired. return value returns a uri that will give you the icon image. this is not the uri of the icon as set on the page, but a uri that will give you the data out of the favicon service. for a nor...

nsINavBookmarksService
or any page that redirected to it is bookmarked. for example, if i bookmark "mozilla.org" by manually typing it in, and follow the bookmark, i will get redirected to "www.mozilla.org". logically, this new page is also bookmarked. this function, if given "www.mozilla.org", will return the uri of the bookmark, in this case "mozilla.org". note: will only return bookmarks in the first 3 levels of redirection (1 -> 2 -> 3 -> auri). nsiuri getbookmarkedurifor( in nsiuri auri ); parameters auri the uri that needs to be checked if it is bookmarked or not. return value native code only!getbookmarkfolderstarray obsolete since gecko 1.9 (firefox 3)this feature is obsolete. although it may still work in some browsers, its use is discouraged since it could be removed at any time. try to avoid u...

nsISeekableStream
ffset ); parameters whence specifies how to interpret the 'offset' parameter in setting the stream offset associated with the implementing stream, according to the table of constants above. offset specifies a value, in bytes, that is used in conjunction with the 'whence' parameter to set the stream offset of the implementing stream. a negative value causes seeking in the reverse direction. exceptions thrown ns_base_stream_closed if called on a closed stream. seteof() this method truncates the stream at the current offset. void seteof(); parameters none. exceptions thrown ns_base_stream_closed if called on a closed stream. tell() this method reports the current offset, in bytes, from the start of the stream. long long tell(); parameters none. return value the...

nsIWebProgressListener2
return value true if the refresh may proceed. false if the refresh should be aborted. ...

nsIWebSocketChannel
ion" (for example resolving a resource: uri to a file: uri) so that the original pre-redirect uri can still be obtained. this is never null. read only. protocol acstring sec-websocket-protocol value. securityinfo nsisupports transport-level security information (if any). read only. uri nsiuri the uri corresponding to the protocol connection after any redirections are completed. read only. status codes the following values are permitted status codes. status code name description 0-999 reserved and not used. 1000 close_normal normal closure; the connection successfully completed whatever purpose for which it was created. 1001 close_going_away the endpoint is going away, either because of a...

nsMsgViewSortOrder
this interface isn't ever implemented. it is only used to store constants. for example to sort by date you would pass a function the value: components.interfaces.nsmsgviewsortorder.ascending mailnews/base/public/nsimsgdbview.idlscriptable please add a summary to this article. ...

XPCOM reference
for commands in thunderbird. for example to mark a message read, you would call:nsmsgviewflagstypethe nsmsgviewflagstype interface contains constants used for view flags in thunderbird. this interface isn't ever implemented. it is only used to store constants. for example, the 'unread only' view would use the flag:nsmsgviewsortorderthe nsmsgviewsortorder interface contains constants used for sort direction in thunderbird. this interface isn't ever implemented. it is only used to store constants. for example to sort by date you would pass a function the value:nsmsgviewsorttypethe nsmsgviewsorttype interface contains constants used for sorting the thunderbird threadpane. this interface isn't ever implemented. it is only used to store constants. for example to sort by date you would pass a function th...

Weak reference
foomethod(...); this is a reasonable thing to want. it's expensive to implement automatically, however. neither inheritance, nor templates, nor macros can help automatically forward all the method calls to the real object. xpidl could write an implementation for you (if we modified it), or you could write one by hand as i discuss below. there are other, mostly negligible, costs: it's an extra indirection per call, and the easy implementation requires adding an extra pointer per interface to the target implementation. why can't i just queryinterface between the pair? it really feels like the nsiweakreference that you are holding is just another interface on the target object. it seems reasonable to want to simply queryinterface between the two. why these extra calls: getweakreference and queryre...

XPIDL
ring that boolean types only receive values of 0 (false) or 1 (true). representations of types additionally depend on some of the many types of properties they may have. the array property turns the parameter into an array; the parameter must also have a corresponding size_is property whose argument is the parameter that has the size of the array. in native code, the type gains another pointer indirection, and javascript arrays are used in script code. script code callers can ignore the value of array parameter, but implementors must still set the values appropriately. prefer using the array<t> builtin over the [array] attribute for new code. it is more ergonomic to use from both js and c++. in the future, [array] may be deprecated and removed. the const and shared properties are special to na...

WebIDL bindings
xpcom component contract id of the js implementation -- note ";1" is just a mozilla convention for versioning apis. here's an example: [constructor(optional long firstnumber), jsimplementation="@mozilla.org/my-number;1"] interface mynumber { attribute long value; readonly attribute long othervalue; void donothing(); }; next, create an xpcom component that implements this interface. basic directions for how to do this can be found elsewhere on mdn. use the same contract id as you specified in the webidl file. the class id doesn't matter, except that it should be a newly generated one. for queryinterface, you only need to implement nsisupports, not anything corresponding to the webidl interface. the name you use for the xpcom component should be distinct from the name of the interface, to av...

Mozilla
as a firefox add-on, or how to update your existing add-on, so that it can be installed, uninstalled and updated without a restart. creating javascript callbacks in components xpcom components use idl to create interfaces. these interfaces are used to manipulate the component in c++ and javascript. a common pattern used with interfaces to create a bi-directional communication between two groups of code is the observer (or listener) pattern. basically, the component defines an observer (or listener) interface which is implemented by some external code and this implementation is passed to the component. the component can then call methods on the observer interface to signal the external code when predefined events occur. here is a...

Initialization and Destruction - Plugins
the other table lists all api calls from the browser to the plug-in. this table is filled out by the plug-in during the initialization call. the function tables also contain version information that the plug-in checks to verify that it is compatible with the api capabilities provided by the application. to check this information, use npn_version. no plug-in api calls can take place in either direction until the initialization completes successfully, with the exception of the functions np_initialize and np_shutdown, which are not in the function tables. however, because np_initialize is called at the end of the initialization process, you can call other methods, such as npn_memalloc and npn_status, from np_initialize. instance creation after initialization, the plug-in instance is created. mo...

Animation.reverse() - Web APIs
if called on an unplayed animation, the whole animation is played backwards. if called on a paused animation, the animation will continue in reverse. syntax animation.reverse(); parameters none. return value undefined example in the growing/shrinking alice game example, clicking or tapping the bottle causes alice's growing animation (alicechange) to play backwards, causing her to get smaller. ...

Animation - Web APIs
or reversing. animation.pause() suspends playing of an animation. animation.persist() explicitly persists an animation, when it would otherwise be removed due to the browser's automatically removing filling animations behavior. animation.play() starts or resumes playing of an animation, or begins the animation again if it previously finished. animation.reverse() reverses playback direction, stopping at the start of the animation. if the animation is finished or unplayed, it will play from end to beginning. animation.updateplaybackrate() sets the speed of an animation after first synchronizing its playback position. automatically removing filling animations it is possible to trigger a large number of animations on the same element. if they are indefinite (i.e., forwards-filling...

AudioListener.forwardX - Web APIs
note: the parameter is a-rate when used with a pannernode whose panningmodel is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardx.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. ...

AudioListener.forwardY - Web APIs
note: the parameter is a-rate when used with a pannernode whose panningmodel is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardy.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. ...

AudioListener.forwardZ - Web APIs
note: the parameter is a-rate when used with a pannernode whose panningmodel is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.forwardz.value = 0; value an audioparam. its default value is -1, and it can range between positive and negative infinity. ...

AudioListener.upX - Web APIs
note: the parameter is a-rate when used with a pannernode whose pannernode is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upx.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...

AudioListener.upY - Web APIs
note: the parameter is a-rate when used with a pannernode whose pannernode is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upy.value = 0; value an audioparam. its default value is 1, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...

AudioListener.upZ - Web APIs
note: the parameter is a-rate when used with a pannernode whose pannernode is set to equalpower, or k-rate otherwise. syntax var audioctx = new audiocontext(); var mylistener = audioctx.listener; mylistener.upz.value = 0; value an audioparam. its default value is 0, and it can range between positive and negative infinity. example in the following example, you can see an example of how the createpanner() method, audiolistener and pannernode would be used to control audio spatialisation. ...

AudioWorkletNode.port - Web APIs
associated messageport. it can be used to communicate between the node and its associated audioworkletprocessor. note: the port at the other end of the channel is available under the port property of the processor. syntax audioworkletnodeinstance.port; value the messageport object that is connecting the audioworkletnode and its associated audioworkletprocessor. examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. // ping-pong-processor.js class pingpongprocessor extends audioworkletprocessor { constructor (...args) { super...

AudioWorkletNode - Web APIs
nected to an audio routing graph along with other nodes. it has an associated audioworkletprocessor, which does the actual audio processing in a web audio rendering thread. constructor audioworkletnode() creates a new instance of an audioworkletnode object. properties also inherits properties from its parent, audionode. audioworkletnode.port read only returns a messageport used for bidirectional communication between the node and its associated audioworkletprocessor. the other end is available under the port property of the processor. audioworkletnode.parameters read only returns an audioparammap — a collection of audioparam objects. they are instantiated during the creation of the underlying audioworkletprocessor. if the audioworkletprocessor has a static parameterdescriptors get...

AudioWorkletProcessor.port - Web APIs
ed messageport. it can be used to communicate between the processor and the audioworkletnode to which it belongs. note: the port at the other end of the channel is available under the port property of the node. syntax audioworkletprocessorinstance.port; value the messageport object that is connecting the audioworkletprocessor and the associated audioworkletnode. examples to demonstrate bidirectional communication capabilities, we'll create an audioworkletprocessor, which will output silence and respond to ping requests from its audioworkletnode. first, we need to define a custom audioworkletprocessor, and register it. note that that this should be done in a separate file. // ping-pong-processor.js class pingpongprocessor extends audioworkletprocessor { constructor (...args) { super...

AudioWorkletProcessor - Web APIs
reated only internally by the creation of an associated audioworkletnodes. the constructor of the deriving class is getting called with an options object, so you can perform a custom initialization procedures — see constructor page for details. audioworkletprocessor() creates a new instance of an audioworkletprocessor object. properties port read only returns a messageport used for bidirectional communication between the processor and the audioworkletnode which it belongs to. the other end is available under the port property of the node. methods the audioworkletprocessor interface does not define any methods of its own. however, you must provide a process() method, which is called in order to process the audio stream. events the audioworkletprocessor interface doesn't respond to ...

Broadcast Channel API - Web APIs
iframes) and workers on the same origin. note: this feature is available in web workers. by creating a broadcastchannel object, you can receive any messages that are posted to it. you don't have to maintain a reference to the frames or workers you wish to communicate with: they can “subscribe” to a particular channel by constructing their own broadcastchannel with the same name, and have bi-directional communication between all of them. broadcast channel interface creating or joining a channel a client joins a broadcast channel by creating a broadcastchannel object. its constructor takes one single parameter: the name of the channel. if it is the first to connect to that broadcast channel name, the underlying channel is created. // connection to a broadcast channel const bc = new broadc...

CanvasRenderingContext2D.arc() - Web APIs
parameters x the horizontal coordinate of the arc's center. ...

CanvasRenderingContext2D.arcTo() - Web APIs
cular arc to the current sub-path, using the given control points and radius. the arc is automatically connected to the path's latest point with a straight line, if necessary for the specified parameters. this method is commonly used for making rounded corners. note: be aware that you may get unexpected results when using a relatively large radius: the arc's connecting line will go in whatever direction it must to meet the specified radius. syntax void ctx.arcto(x1, y1, x2, y2, radius); parameters x1 the x-axis coordinate of the first control point. y1 the y-axis coordinate of the first control point. x2 the x-axis coordinate of the second control point. y2 the y-axis coordinate of the second control point. radius the arc's radius. must be non-negative. examples how arcto wor...

CanvasRenderingContext2D.createPattern() - Web APIs
ers image a canvasimagesource to be used as the pattern's image. it can be any of the following: htmlimageelement (<img>) svgimageelement (<image>) htmlvideoelement (<video>, by using the capture of the video) htmlcanvaselement (<canvas>) imagebitmap offscreencanvas repetition a domstring indicating how to repeat the pattern's image. possible values are: "repeat" (both directions) "repeat-x" (horizontal only) "repeat-y" (vertical only) "no-repeat" (neither direction) if repetition is specified as an empty string ("") or null (but not undefined), a value of "repeat" will be used. return value canvaspattern an opaque object describing a pattern. examples creating a pattern from an image this example uses the createpattern() method to create a canvaspatte...

CanvasRenderingContext2D.ellipse() - Web APIs
the canvasrenderingcontext2d.ellipse() method of the canvas 2d api adds an elliptical arc to the current sub-path. syntax void ctx.ellipse(x, y, radiusx, radiusy, rotation, startangle, endangle [, anticlockwise]); the ellipse() method creates an elliptical arc centered at (x, y) with the radii radiusx and radiusy. the path starts at startangle and ends at endangle, and travels in the direction given by anticlockwise (defaulting to clockwise). parameters x the x-axis (horizontal) coordinate of the ellipse's center. y the y-axis (vertical) coordinate of the ellipse's center. radiusx the ellipse's major-axis radius. must be non-negative. radiusy the ellipse's minor-axis radius. must be non-negative. rotation the rotation of the ellipse, expressed in radians. startangle the angle at...

CanvasRenderingContext2D.fillText() - Web APIs
ying a maximum width for the rendered text, which the user agent will achieve by condensing the text or by using a lower font size. this method draws directly to the canvas without modifying the current path, so any subsequent fill() or stroke() calls will have no effect on it. the text is rendered using the font and text layout configuration as defined by the font, textalign, textbaseline, and direction properties. to draw the outlines of the characters in a string, call the context's stroketext() method. syntax canvasrenderingcontext2d.filltext(text, x, y [, maxwidth]); parameters text a domstring specifying the text string to render into the context. the text is rendered using the settings specified by font, textalign, textbaseline, and direction. x the x-axis coordinate of the po...

CanvasRenderingContext2D.lineJoin - Web APIs
degenerate segments with a length of zero (i.e., with all endpoints and control points at the exact same position) are also ignored. note: lines can be drawn with the stroke(), strokerect(), and stroketext() methods. ...

CanvasRenderingContext2D.rotate() - Web APIs
er this example rotates a shape around its center point. to do this, the following steps are applied to the matrix: first, translate() moves the matrix's origin to the shape's center. rotate() rotates the matrix by the desired amount. finally, translate() moves the matrix's origin back to its starting point. this is done by applying the values of the shape's center coordinates in a negative direction. html <canvas id="canvas"></canvas> javascript the shape is a rectangle with its corner at (80, 60), a width of 140, a height of 30. its horizontal center is at (80 + 140 / 2), or 150. its vertical center is at (60 + 30 / 2), or 75. thus, the center point is at (150, 75). const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // non-rotated rectangle ctx.fi...

CanvasRenderingContext2D.save() - Web APIs
ing state that gets saved onto a stack consists of: the current transformation matrix. the current clipping region. the current dash list. the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled. syntax void ctx.save(); examples saving the drawing state this example uses the save() method to save the default state and restore() to restore it later, so that you are able to draw a rect with the default state later. html <canvas id="canvas"></canvas> javascript const canvas = document.getelementbyid('canvas'); const ctx = canvas.getcontext('2d'); // save t...

CanvasRenderingContext2D.scale() - Web APIs
a scaling transformation modifies this behavior. for instance, a scaling factor of 0.5 results in a unit size of 0.5 pixels; shapes are thus drawn at half the normal size. similarly, a scaling factor of 2.0 increases the unit size so that one unit becomes two pixels; shapes are thus drawn at twice the normal size. syntax void ctx.scale(x, y); parameters x scaling factor in the horizontal direction. a negative value flips pixels across the vertical axis. a value of 1 results in no horizontal scaling. y scaling factor in the vertical direction. a negative value flips pixels across the horizontal axis. a value of 1 results in no vertical scaling. examples scaling a shape this example draws a scaled rectangle. a non-scaled rectangle is then drawn for comparison. html <canvas id="canvas...

CanvasRenderingContext2D.strokeText() - Web APIs
l() or stroke() calls will have no effect on it. use the filltext() method to fill the text characters rather than having just their outlines drawn. syntax canvasrenderingcontext2d.stroketext(text, x, y [, maxwidth]); parameters text a domstring specifying the text string to render into the context. the text is rendered using the settings specified by font, textalign, textbaseline, and direction. x the x-axis coordinate of the point at which to begin drawing the text. y the y-axis coordinate of the point at which to begin drawing the text. maxwidth optional the maximum width the text may be once rendered. if not specified, there is no limit to the width of the text. however, if this value is provided, the user agent will adjust the kerning, select a more horizontally condensed fon...

CanvasRenderingContext2D.translate() - Web APIs
the canvasrenderingcontext2d.translate() method of the canvas 2d api adds a translation transformation to the current matrix. syntax void ctx.translate(x, y); the translate() method adds a translation transformation to the current matrix by moving the canvas and its origin x units horizontally and y units vertically on the grid. parameters x distance to move in the horizontal direction. positive values are to the right, and negative to the left. y distance to move in the vertical direction. positive values are down, and negative are up. examples moving a shape this example draws a square that is moved from its default position by the translate() method. an unmoved square of the same size is then drawn for comparison. html <canvas id="canvas"></canvas> javascript the translate...

Advanced animations - Web APIs
canvas.addeventlistener('mouseover', function(e) { raf = window.requestanimationframe(draw); }); canvas.addeventlistener('mouseout', function(e) { window.cancelanimationframe(raf); }); ball.draw(); boundaries without any boundary collision testing our ball runs out of the canvas quickly. we need to check if the x and y position of the ball is out of the canvas dimensions and invert the direction of the velocity vectors. to do so, we add the following checks to the draw method: if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) { ball.vy = -ball.vy; } if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) { ball.vx = -ball.vx; } first demo let's see how it looks in action so far. move your mouse into the canvas to start the animation. <canvas id="canvas" style="b...

Basic animations - Web APIs
(clock); <canvas id="canvas" width="150" height="150"></canvas> screenshotlive sample a looping panorama in this example, a panorama is scrolled left-to-right. we're using an image of yosemite national park we took from wikipedia, but you could use any image that's larger than the canvas. var img = new image(); // user variables - customize these to change the image being scrolled, its // direction, and the speed. img.src = 'https://mdn.mozillademos.org/files/4553/capitan_meadows,_yosemite_national_park.jpg'; var canvasxsize = 800; var canvasysize = 200; var speed = 30; // lower is faster var scale = 1.05; var y = -4.5; // vertical offset // main program var dx = 0.75; var imgw; var imgh; var x = 0; var clearx; var cleary; var ctx; img.onload = function() { imgw = img.width * scale;...

Drawing shapes with canvas - Web APIs
when they are stroked. if we left out the closepath() for the stroked triangle, only two lines would have been drawn, not a complete triangle. arcs to draw arcs or circles, we use the arc() or arcto() methods. arc(x, y, radius, startangle, endangle, anticlockwise) draws an arc which is centered at (x, y) position with radius r starting at startangle and ending at endangle going in the given direction indicated by anticlockwise (defaulting to clockwise). arcto(x1, y1, x2, y2, radius) draws an arc with the given control points and radius, connected to the previous point by a straight line. let's have a more detailed look at the arc method, which takes six parameters: x and y are the coordinates of the center of the circle on which the arc should be drawn. radius is self-explanatory. the sta...

Drawing text - Web APIs
sed when drawing text. this string uses the same syntax as the css font property. the default font is 10px sans-serif. textalign = value text alignment setting. possible values: start, end, left, right or center. the default value is start. textbaseline = value baseline alignment setting. possible values: top, hanging, middle, alphabetic, ideographic, bottom. the default value is alphabetic. direction = value directionality. possible values: ltr, rtl, inherit. the default value is inherit. these properties might be familiar to you, if you have worked with css before. the following diagram from the whatwg demonstrates the various baselines supported by the textbaseline property. a textbaseline example edit the code below and see your changes update live in the canvas: ctx.font = '48px se...

Transformations - Web APIs
hed onto the stack. a drawing state consists of the transformations that have been applied (i.e. translate, rotate and scale – see below). the current values of the following attributes: strokestyle, fillstyle, globalalpha, linewidth, linecap, linejoin, miterlimit, linedashoffset, shadowoffsetx, shadowoffsety, shadowblur, shadowcolor, globalcompositeoperation, font, textalign, textbaseline, direction, imagesmoothingenabled. the current clipping path, which we'll see in the next section. you can call the save() method as many times as you like. each time the restore() method is called, the last saved state is popped off the stack and all saved settings are restored. a save and restore canvas state example this example tries to illustrate how the stack of drawing states functions by drawin...

DOMMatrix - Web APIs
be mutable. is2d read only a boolean flag whose value is true if the matrix was initialized as a 2d matrix. if false, the matrix is 3d. isidentity read only a boolean whose value is true if the matrix is the identity matrix. the identity matrix is one in which every value is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal). m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 double-precision floating-point values representing each component of a 4×4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth. a, b, c, d, e, f double-precision floating-point values representing the components of a 4×4 matrix which are required ...

DOMMatrixReadOnly - Web APIs
properties. is2d read only a boolean flag whose value is true if the matrix was initialized as a 2d matrix. if false, the matrix is 3d. isidentity read only a boolean whose value is true if the matrix is the identity matrix. the identity matrix is one in which every value is 0 except those on the main diagonal from top-left to bottom-right corner (in other words, where the offsets in each direction are equal). m11, m12, m13, m14, m21, m22, m23, m24, m31, m32, m33, m34, m41, m42, m43, m44 double-precision floating-point values representing each component of a 4×4 matrix, where m11 through m14 are the first column, m21 through m24 are the second column, and so forth. a, b, c, d, e, f double-precision floating-point values representing the components of a 4×4 matrix which are required ...

Detecting device orientation - Web APIs
of the ball ball.style.top = (maxy*y/180 - 10) + "px"; ball.style.left = (maxx*x/180 - 10) + "px"; } window.addeventlistener('deviceorientation', handleorientation); click here to open this example in a new window; because deviceorientation doesn't work in a cross-origin <iframe> in all browsers. warning: chrome and firefox do not handle the angles the same way, so on some axes the direction are reversed. processing motion events motion events are handled the same way as the orientation events except that they have their own event's name: devicemotion window.addeventlistener("devicemotion", handlemotion, true); what's really changed are the information provided within the devicemotionevent object passed as a parameter of the handlemotion function. the motion event contains four...

DeviceOrientationEvent - Web APIs
the device. deviceorientationevent.gamma read only a number representing the motion of the device around the y axis, express in degrees with values ranging from -90 to 90. this represents a left to right motion of the device. deviceorientationevent.webkitcompassheading read only a number represents the difference between the motion of the device around the z axis of the world system and the direction of the north, express in degrees with values ranging from 0 to 360. deviceorientationevent.webkitcompassaccuracy read only the accuracy of the compass means that the deviation is positive or negative. it's usually 10. example window.addeventlistener('deviceorientation', function(event) { console.log(event.alpha + ' : ' + event.beta + ' : ' + event.gamma); }); specifications sp...

Document.dir - Web APIs
possible values are 'rtl', right to left, and 'ltr', left to right. ...

Document: transitionend event - Web APIs
d when a css transition has completed. in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original target for this event is t...

Document: wheel event - Web APIs
andler property globaleventhandlers.onwheel this event replaces the non-standard deprecated mousewheel event. note: don't confuse the wheel event with the scroll event. the default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. <div>scale me with your mouse wheel.</div> body { min-height: 100vh; margin: 0; ...

Document - Web APIs
html documents inherits from the htmldocument interface or, since html5, is extended for such documents. document.cookie returns a semicolon-separated list of the cookies for that document or sets a single cookie. document.defaultviewread only returns a reference to the window object. document.designmode gets/sets the ability to edit the whole document. document.dirread only gets/sets directionality (rtl/ltr) of the document. document.domain gets/sets the domain of the current document. document.lastmodifiedread only returns the date on which the document was last modified. document.locationread only returns the uri of the current document. document.readystateread only returns loading status of the document. document.referrerread only returns the uri of the page that linke...

EffectTiming.easing - Web APIs
working draft editor's draft. ...

EffectTiming.iterations - Web APIs
unchanged. examples in 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. working draft editor's draft. ...

EffectTiming - Web APIs
on effects. these properties are all optional, although without setting a duration the animation will not play. simply put, these properties describe how the user agent should go about making the transition from keyframe to keyframe, and how to behave when the animation begins and ends. properties delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind...

Element: DOMMouseScroll event - Web APIs
standard events. detail the detail property describes the scroll more precisely, with positive values indicating scrolling downward and negative values indicating scrolling upward. if the event represents scrolling up by a page, the value of detail is -32768. if the event indictes scrolling down by a page, the value is +32768. any other value represents the number of lines to scroll, with the direction indicated by the value's sign. note: trusted events are never sent with a value of 0 for detail. trusted events are never fired with 0. note: if the platform's native mouse wheel events only provide scroll distance by pixels, or if the speed can be customized by the user, the value is computed using the line height of the nearest scrollable ancestor element of the event's target. if that el...

Element.animate() - Web APIs
iterate over. see keyframe formats for more details. options either an integer representing the animation's duration (in milliseconds), or an object containing one or more timing properties: id optional a property unique to animate(): a domstring with which to reference the animation. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind...

Element.scrollLeft - Web APIs
on systems using display scaling, scrollleft may give you a decimal value. syntax getting the value // get the number of pixels scrolled var sleft = element.scrollleft; sleft is an integer representing the number of pixels that element has been scrolled from the left edge. ...

Element: wheel event - Web APIs
les yes cancelable yes interface wheelevent event handler property onwheel note: don't confuse the wheel event with the scroll event. the default action of a wheel event is implementation-specific, and doesn't necessarily dispatch a scroll event. even when it does, the delta* values in the wheel event don't necessarily reflect the content's scrolling direction. therefore, do not rely on the wheel event's delta* properties to get the scrolling direction. instead, detect value changes of scrollleft and scrolltop of the target in the scroll event. examples scaling an element via the wheel this example shows how to scale an element using the mouse (or other pointing device) wheel. <div>scale me with your mouse wheel.</div> body { min-height: 100vh;...

EventSource - Web APIs
remains open until closed by calling eventsource.close(). once the connection is opened, incoming messages from the server are delivered to your code in the form of events. if there is an event field in the incoming message, the triggered event is the same as the event field value. if no event field is present, then a generic message event is fired. unlike websockets, server-sent events are unidirectional; that is, data messages are delivered in one direction, from the server to the client (such as a user's web browser). that makes them an excellent choice when there's no need to send data from the client to the server in message form. for example, eventsource is a useful approach for handling things like social media status updates, news feeds, or delivering data into a client-side storage mech...

GeolocationCoordinates.heading - Web APIs
the geolocationcoordinates.heading read-only property is a double representing the direction in which the device is traveling. this value, specified in degrees, indicates how far off from heading due north the device is. zero degrees represents true true north, and the direction is determined clockwise (which means that east is 90 degrees and west is 270 degrees). if geolocationcoordinates.speed is 0, heading is nan. if the device is not able to provide heading information, this value is null. syntax let heading = geolocationcoordinatesinstance.heading value a double representing the direction in which the device is traveling. specifications specification status comment geolocation apithe definition of 'geolocationcoordinates.heading' in that specificat...

GeolocationCoordinates - Web APIs
y read only secure context returns a double representing the accuracy of the latitude and longitude properties, expressed in meters. geolocationcoordinates.altitudeaccuracy read only secure context returns a double representing the accuracy of the altitude expressed in meters. this value can be null. geolocationcoordinates.heading read only secure context returns a double representing the direction towards which the device is facing. this value, specified in degrees, indicates how far off from heading true north the device is. 0 degrees represents true north, and the direction is determined clockwise (which means that east is 90 degrees and west is 270 degrees). if speed is 0, heading is nan. if the device is unable to provide heading information, this value is null. geolocationcoordinates...

Using the Geolocation API - Web APIs
to draw your position on a map. hence many geolocation success callbacks look fairly simple: function success(position) { const latitude = position.coords.latitude; const longitude = position.coords.longitude; // do something with your latitude and longitude } you can however get a number of other bits of information from a geolocationcoordinates object, including altitude, speed, what direction the device is facing, and an accuracy measure of the altitude, longitude, and latitude data. handling errors the error callback function, if provided when calling getcurrentposition() or watchposition(), expects a geolocationpositionerror object instance as its first parameter. this object type contains two properties, a code indicating what type of error has been returned, and a human-readable...

GlobalEventHandlers.onanimationcancel - Web APIs
nate both slidebox; } the animation's keyframes are described next, plotting a course from the top-left corner of the content box to the bottom-right corner. @keyframes slidebox { from { left:0; top:0; } to { left:calc(100% - var(--boxwidth)); top:calc(100% - var(--boxwidth)) } } since the animation is described as taking place an infinite number of times, alternating direction each time, the box will glide back and forth between the two corners until stopped or the page is closed. javascript before we get to the animation code, we define a function which logs information to a box on the user's screen. we'll use this to show information about the events we receive. note the use of animationevent.animationname and animationevent.elapsedtime to get information about the...

HTMLDetailsElement: toggle event - Web APIs
summary> philosophy in fortune's name replies to boethius' reproaches, and proves that the gifts of fortune are hers to give and to take away. </details> <details id="ch3"> <summary>chapter iii</summary> boethius falls back upon his present sense of misery. philosophy reminds him of the brilliancy of his former fortunes. ...

HTMLElement: transitioncancel event - Web APIs
if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. specifications specification status comment css transitions...

HTMLElement - Web APIs
tent of the element can be edited. htmlelement.contextmenu is a htmlmenuelement representing the contextual menu associated with the element. it may be null. htmlorforeignelement.dataset read only returns a domstringmap with which script can read and write the element's custom data attributes (data-*) . htmlelement.dir is a domstring, reflecting the dir global attribute, representing the directionality of the element. possible values are "ltr", "rtl", and "auto". htmlelement.draggable is a boolean indicating if the element can be dragged. htmlelement.dropzone read only returns a domsettabletokenlist reflecting the dropzone global attribute and describing the behavior of the element regarding a drop operation. htmlelement.hidden is a boolean indicating if the element is hidden or not...

HTMLImageElement.alt - Web APIs
><img src="playlisticon.svg" alt="playlists"</a> </li> images containining diagrams or maps when an image contains information presented as a diagram, chart, graph, or map, the alt text should provide the same information, at least in summary form. this is true whether the /me image is in a bitmapped format such as png or jpeg or in a vector format like svg. for a map, the alt text could be directions to the place indicated by the map, similarly to how you would explain it verbally. for a chart, the text could describe the items in the chart and their values. for a diagram, the text could be an explanation of the concept presented by the diagram. keep in mind that any text included in diagrams and charts presented in svg format may be read by screen readers. this may impact the decisions ...

Ajax navigation example - Web APIs
/* case 1: // informational 1xx console.log("information code " + vmsg); break; case 2: // successful 2xx console.log("successful code " + vmsg); break; case 3: // redirection 3xx console.log("redirection code " + vmsg); break; */ case 4: /* client error 4xx */ alert("client error #" + vmsg); break; case 5: /* server error 5xx */ alert("server e...

IDBCursor.continuePrimaryKey() - Web APIs
ceptions this method may raise a domexception of one of the following types: exception description transactioninactiveerror this idbcursor's transaction is inactive. dataerror the key parameter may have any of the following conditions: the key is not a valid key. the key is less than or equal to this cursor's position and the cursor's direction is next or nextunique. the key is greater than or equal to this cursor's position and this cursor's direction is prev or prevunique. invalidstateerror the cursor is currently being iterated or has iterated past its end. invalidaccesserror the cursor's direction is not prev or next. example here’s how you can resume an iteration of all articles tagge...

IDBCursorWithValue - Web APIs
the idbcursorwithvalue interface of the indexeddb api represents a cursor for traversing or iterating over multiple records in a database. it is the same as the idbcursor, except that it includes the value property. the cursor has a source that indicates which index or object store it is iterating over. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. the cursor enables an application to asynchronously process all the records in the cursor's range. you can have an unlimited number of cursors at the same time. you always get the same idbcursorwithvalue object representing a given cursor. operations are performed on the underlying index or object store. note: this feature is available in web workers. <div id="interface...

IDBObjectStore.openCursor() - Web APIs
thread, returns a new idbcursorwithvalue object. used for iterating through an object store with a cursor. to determine if the add operation has completed successfully, listen for the results’s success event. note: this feature is available in web workers. syntax var request = objectstore.opencursor(); var request = objectstore.opencursor(query); var request = objectstore.opencursor(query, direction); parameters query optional a key or idbkeyrange to be queried. if a single valid key is passed, this will default to a range containing only that key. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional an idbcursordirection telling the cursor what direction to travel. valid values are "next", "nextunique", "prev", ...

IDBObjectStore.openKeyCursor() - Web APIs
be set to an idbcursor that can be used to iterate through matching results. used for iterating through the keys of an object store with a cursor. to determine if the add operation has completed successfully, listen for the results’s success event. syntax var request = objectstore.openkeycursor(); var request = objectstore.openkeycursor(query); var request = objectstore.openkeycursor(query, direction); parameters query optional the key range to be queried. if a single valid key is passed, this will default to a range containing only that key. if nothing is passed, this will default to a key range that selects all the records in this object store. direction optional an idbcursordirection telling the cursor what direction to travel. valid values are "next", "nextunique", "prev", and "pr...

Basic concepts - Web APIs
hand, the scopes of writing transactions cannot overlap. you can still start several transactions with the same scope at the same time, but they just queue up and execute one after another. cursor a mechanism for iterating over multiple records with a key range. the cursor has a source that indicates which index or object store it is iterating. it has a position within the range, and moves in a direction that is increasing or decreasing in the order of record keys. for the reference documentation on cursors, see idbcursor. key range a continuous interval over some data type used for keys. records can be retrieved from object stores and indexes using keys or a range of keys. you can limit or filter the range using lower and upper bounds. for example, you can iterate over all values of a key be...

Timing element visibility with the Intersection Observer API - Web APIs
the intersection root's rectangle; we want to match the boundaries of the document's viewport exactly for intersection purposes. and the threshold is set to an array containing the values 0.0 and 0.75; this will cause our callback to execute whenever a targeted element becomes completely obscured or first starts to become unobscured (intersection ratio 0.0) or passes through 75% visible in either direction (intersection ratio 0.75). the observer, adobserver, is created by calling intersectionobserver's constructor, passing in the callback function, intersectioncallback, and our options. we then call a function buildcontents(), which we'll define later to actually generate and insert into the document the articles and ads we want to present. finally, we set up an interval which triggers once a se...

KeyboardEvent.code - Web APIs
, y: 200 }; let moverate = 9; let turnrate = 5; let angle = 0; let spaceship = document.getelementbyid("spaceship"); next comes the function updateposition(). this function takes as input the distance the ship is to be moved, where positive is a forward movement and negative is a backward movement. this function computes the new position of the ship given the distance moved and the current direction the ship is facing. it also handles ensuring that the ship wraps across the boundaries of the play field instead of vanishing. function updateposition(offset) { let rad = angle * (math.pi/180); position.x += (math.sin(rad) * offset); position.y -= (math.cos(rad) * offset); if (position.x < 0) { position.x = 399; } else if (position.x > 399) { position.x = 0; } if (positio...

Key Values - Web APIs
ey, or the command or ⌘ key on mac keyboards. vk_lwin (0x5b) vk_rwin (0x5c) kvk_command (0x37) kvk_rightcommand (0x36) gdk_key_meta_l (0xffe7) gdk_key_meta_r (0xffe8) qt::key_meta (0x01000022) keycode_meta_left (117) keycode_meta_right (118) "numlock" the numlock (number lock) key. toggles the numeric keypad between number entry some other mode (often directional arrows). vk_numlock (0x90) gdk_key_num_lock (0xff7f) qt::key_numlock (0x01000025) keycode_num_lock (143) "scrolllock" [2] the scroll lock key. toggles between scrolling and cursor movement modes. vk_scroll (0x91) gdk_key_scroll_lock (0xff14) qt::key_scrolllock (0x01000026) keycode_scroll_lock (116) "shift" the shift key. modifies keystro...

KeyframeEffect.KeyframeEffect() - Web APIs
ameeffect object instance. its parameters are: element the dom element to be animated, or null. keyframeset an keyframe object or null. keyframeoptions optional either an integer representing the animation's duration (in milliseconds), or an object containing one or more of the following: delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind...

KeyframeEffectOptions - Web APIs
th the new one. iterationcomposite optional determines how values build from iteration to iteration in this animation. can be set to accumulate or replace (see above). defaults to replace. pseudoelement optional the selector of the pseudo-element to be targeted, if any. defaults to null. delay optional the number of milliseconds to delay the start of the animation. defaults to 0. direction optional whether the animation runs forwards (normal), backwards (reverse), switches direction after each iteration (alternate), or runs backwards and switches direction after each iteration (alternate-reverse). defaults to "normal". duration optional the number of milliseconds each iteration of the animation takes to complete. defaults to 0. although this is technically optional, keep in mind...

Location: href - Web APIs
the href property of the location interface is a stringifier that returns a usvstring containing the whole url, and allows the href to be updated. setting the value of href navigates to the provided url. if you want redirection, use location.replace(). syntax string = object.href; object.href = string; examples // lets imagine an <a id="myanchor" href="https://developer.mozilla.org/location/href"> element is in the document var anchor = document.getelementbyid("myanchor"); var result = anchor.href; // returns: 'https://developer.mozilla.org/location/href' specifications specification status comment html living standardthe definition of 'href' in that specification. living standard initial definition. ...

MSGestureEvent - Web APIs
vent of the current gesture msgestureevent.translationy read only distance traversed along the y-axis since the previous msgestureevent of the current gesture msgestureevent.velocityangular read only angular velocity. expressed in radians. msgestureevent.velocityexpansion read only the velocity of the expansion of the gesture area. msgestureevent.velocityx read only velocity along the direction of the x-axis. msgestureevent.velocityy read only velocity along the direction of the y-axis. methods this interface also inherits methods of its parents, uievent and event. msgestureevent.initgestureevent() initializes the value of an msgestureevent. if the event has already being dispatched, this method does nothing. this method is deprecated as of microsoft edge. gesture event ty...

MediaQueryList - Web APIs
ddeventlistener()). events the following events are delivered to mediaquerylist objects: change sent to the mediaquerylist when the result of running the media query against the document changes. for example, if the media query is (min-width: 400px), the change event is fired any time the width of the document's viewport changes such that its width moves across the 400px boundary in either direction. also available using the onchange event handler property. examples this simple example creates a mediaquerylist and then sets up a listener to detect when the media query status changes, running a custom function when it does to change the appearence of the page. var para = document.queryselector('p'); var mql = window.matchmedia('(max-width: 600px)'); function screentest(e) { if (e.matc...

MediaTrackConstraints.facingMode - Web APIs
e is specifically required; for example: var constraints = { facingmode: { exact: "user" } }; this indicates that only a user-facing camera is acceptable; if there is no user-facing camera, or the user declines permission to use that camera, the media request will fail. the following strings are permitted values for the facing mode. these may represent separate cameras, or they may represent directions in which an adjustable camera can be pointed. "user" the video source is facing toward the user; this includes, for example, the front-facing camera on a smartphone. "environment" the video source is facing away from the user, thereby viewing their environment. this is the back camera on a smartphone. "left" the video source is facing toward the user but to their left, such as a camera a...

MediaTrackSettings - Web APIs
ht in pixels. common values include 1.3333333333 (for the classic television 4:3 "standard" aspect ratio, also used on tablets such as apple's ipad), 1.7777777778 (for the 16:9 high-definition widescreen aspect ratio), and 1.6 (for the 16:10 aspect ratio common among widescreen computers and tablets). facingmode a domstring indicating the current value of the facingmode property, specifying the direction the camera is facing. the value will be one of: "user" a camera facing the user (commonly known as a "selfie cam"), used for self-portraiture and video calling. "environment" a camera facing away from the user (when the user is looking at the screen). this is typically the highest quality camera on the device, used for general photography. "left" a camera facing toward the environme...

MouseScrollEvent - Web APIs
constants delta modes constant value description horizontal_axis 0x01 the event is caused by horizontal wheel operation. vertical_axis 0x02 the event is caused by vertical wheel operation. methods initmousescrollevent() see nsidommousescrollevent::initmousescrollevent(). ...

Notification.Notification() - Web APIs
ew notification object instance, which represents a user notification. syntax var mynotification = new notification(title, options); parameters title defines a title for the notification, which is shown at the top of the notification window. options optional an options object containing any custom settings that you want to apply to the notification. the possible options are: dir: the direction in which to display the notification. it defaults to auto, which just adopts the browser's language setting behavior, but you can override that behaviour by setting values of ltr and rtl (although most browsers seem to ignore these settings.) lang: the notification's language, as specified using a domstring representing a bcp 47 language tag. see the sitepoint iso 2 letter language codes page f...

Notification - Web APIs
otification.badge read only the url of the image used to represent the notification when there is not enough space to display the notification itself. notification.body read only the body string of the notification as specified in the constructor's options parameter. notification.data read only returns a structured clone of the notification’s data. notification.dir read only the text direction of the notification as specified in the constructor's options parameter. notification.lang read only the language code of the notification as specified in the constructor's options parameter. notification.tag read only the id of the notification (if any) as specified in the constructor's options parameter. notification.icon read only the url of the image used as an icon of the notificati...

Notifications API - Web APIs
will generally persist for the current session. note: as of firefox 44, the permissions for notifications and push have been merged. if permission is granted for notifications, push will also be enabled. next, a new notification is created using the notification() constructor. this must be passed a title argument, and can optionally be passed an options object to specify options, such as text direction, body text, icon to display, notification sound to play, and more. in addition, the notifications api spec specifies a number of additions to the serviceworker api, to allow service workers to fire notifications. note: to find out more about using notifications in your own app, read using the notifications api. notifications interfaces notification defines a notification object. servic...

PannerNode.coneOuterAngle - Web APIs
node(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the ...

PannerNode.coneOuterGain - Web APIs
node(context); osc.type = 'sawtooth'; const panner = new pannernode(context); panner.panningmodel = 'hrtf'; next, we set up the cone of our spatialised sound, determining the area in which it can be heard: // this value determines the size of the area in which the sound volume is constant // if coneinnerangle == 30, it means that when the sound is rotated // by at most 15 (30/2) degrees either direction, the volume won't change panner.coneinnerangle = 30; // this value determines the size of the area in which the sound volume decreases gradually // if coneouterangle == 45 and coneinnerangle == 30, it means that when the sound is rotated // by between 15 (30/2) and 22.5 (45/2) degrees either direction, // the volume will decrease gradually panner.coneouterangle = 45; // this value determines the ...

PannerNode.positionX - Web APIs
the positionx property of the pannernode interface specifies the x coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the horizontal axis (left-right). the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam cont...

PannerNode.positionY - Web APIs
the positiony property of the pannernode interface specifies the y coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the vertical axis (top-bottom). the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the audioparam contain...

PannerNode.positionZ - Web APIs
the positionz property of the pannernode interface specifies the z coordinate of the audio source's position in 3d cartesian coordinates, corresponding to the depth axis (behind-in front of the listener). the complete vector is defined by the position of the audio source, given as (positionx, positiony, positionz), and the orientation of the audio source (that is, the direction in which it's facing), given as (orientationx, orientationy, orientationz). depending on the directionality of the sound (as specified using the attributes coneinnerangle, coneouterangle, and codeoutergain), the orientation of the sound may alter the perceived volume of the sound as it's being played. if the sound is pointing toward the listener, it will be louder than if the sound is pointed away from the listener. the ...

Performance.navigation - Web APIs
this property is deprecated in the navigation timing level 2 specification. the legacy performance.navigation read-only property returns a performancenavigation object representing the type of navigation that occurs in the given browsing context, such as the number of redirections needed to fetch the resource. this property is not available in workers. syntax navobject = performance.navigation; specifications specification status comment navigation timingthe definition of 'performance.navigation' in that specification. recommendation initial definition. ...

Performance - Web APIs
mark on the main thread (or other worker), you cannot see it in a worker thread, and vice versa. properties the performance interface doesn't inherit any properties. performance.navigation read only a legacy performancenavigation object that provides useful context about the operations included in the times listed in timing, including whether the page was a load or a refresh, how many redirections occurred, and so forth. not available in workers. performance.timing read only a legacy performancetiming object containing latency-related performance information. not available in workers. performance.memory read only a non-standard extension added in chrome, this property provides an object with basic memory usage information. you should not use this non-standard api. performance.t...

PerformanceResourceTiming.fetchStart - Web APIs
note: this feature is available in web workers. syntax resource.fetchstart; return value a domhighrestimestamp immediately before the browser starts to fetch the resource. ...

Pinch zoom gestures - Web APIs
this example shows how to detect the pinch/zoom gesture, which uses pointer events to detect whether the user moves two pointers closer or farther apart from each other. a live version of this application is available on github. ...

Pointer events - Web APIs
le, the browser's default touch behavior is disabled for the div element. <html> <body> <div style="touch-action:none;">can't touch this ... </div> </body> </html> in the following example, default touch behavior is disabled for some button elements. button#tiny { touch-action: none; } in the following example, when the target element is touched, it will only pan in the horizontal direction. #target { touch-action: pan-x; } compatibility with mouse events although the pointer event interfaces enable applications to create enhanced user experiences on pointer enabled devices, the reality is the vast majority of today's web content is designed to only work with mouse input. consequently, even if a browser supports pointer events, the browser must still process mouse events so co...

RTCDataChannel.readyState - Web APIs
underlying data transport; that is, whatever network level connection is used to link the two peers together is in the process of being set up. this is the state of a new rtcdatachannel after being created by rtcpeerconnection.createdatachannel() (on the peer which started the connection process). "open" the underlying data transport has been established and data can be transferred bidirectionally across it. this is the default state of a new rtcdatachannel created by the webrtc layer when the remote peer created the channel and delivered to the site or app in a datachannel event of type rtcdatachannelevent. "closing" the process of closing the underlying data transport has begun. it is no longer possible to queue new messages to be sent, but previously queued messages may ...

RTCDataChannel - Web APIs
every data channel is associated with an rtcpeerconnection, and each peer connection can have up to a theoretical maximum of 65,534 data channels (the actual limit may vary from browser to browser). to create a data channel and ask a remote peer to join you, call the rtcpeerconnection's createdatachannel() method. the peer being invited to exchange data receives a datachannel event (which has type rtcdatachannelevent) to let it know the data channel has been added to the connection. ...

RTCRtpTransceiver.stopped - Web APIs
ceiver to be stopped for some reason. syntax var isstopped = rtcrtptransceiver.stopped; value a boolean value which is true if the transceiver's sender will no longer send data, and its receiver will no longer receive data. if either or both are still at work, the result is false. usage notes this property is deprecated and will be removed in the future. instead, look at the value of currentdirection. its value is stopped if the transceiver has stopped. note: currently only firefox implements stopped, and has not yet been updated to implement this change. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtcrtptransceiver.stopped' in that specification. candidate recommendation ...

RTCTrackEvent.receiver - Web APIs
the read-only receiver property of the rtctrackevent interface indicates the rtcrtpreceiver which is used to receive data containing media for the track to which the event refers. syntax var rtpreceiver = trackevent.receiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent. note: the transceiver includes its own receiver property, which will always be the same rtcrtpreceiver as this one. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.receiver' in that specification. candidate recommendation initial specification. ...

RTCTrackEvent.transceiver - Web APIs
the webrtc api interface rtctrackevent's read-only transceiver property indicates the rtcrtptransceiver affiliated with the event's track. the transceiver pairs the track's receiver with an rtcrtpsender. syntax var rtptransceiver = trackevent.transceiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent. note: the rtcrtpreceiver referred to by this rtcrtpreceiver's receiver property will always be the same as the rtctrackevent's receiver property. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackevent.transceiver' in that specification. candid...

RTCTrackEventInit.receiver - Web APIs
ventinit dictionary's receiver property specifies the rtcrtpreceiver associated with the event. syntax var trackeventinit = { receiver: rtpreceiver, track: mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var rtpreceiver = trackeventinit.receiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent. note: the transceiver includes its own receiver property, which will always be the same rtcrtpreceiver as this one. specifications specification status comment webrtc 1.0: real-time communication between browsersthe definition of 'rtctrackeventinit.receiver' in that specification. candidate r...

RTCTrackEventInit.transceiver - Web APIs
the rtctrackeventinit dictionary's transceiver property specifies the rtcrtptransceiver associated with the track event. the transceiver pairs the track's receiver with an rtcrtpsender to allow bidirectional communication. syntax var trackeventinit = { receiver: rtpreceiver, track: mediastreamtrack, streams: [videostream], transceiver: rtptransceiver }; var rtptransceiver = trackeventinit.transceiver; value the rtcrtptransceiver which pairs the receiver with a sender and other properties which establish a single bidirectional srtp stream for use by the track associated with the rtctrackevent. note: the rtcrtpreceiver referred to by this rtcrtpreceiver's receiver property will always be the same as the rtctrackevent's receiver property. specifications specification sta...

ResizeObserverEntry.borderBoxSize - Web APIs
his is the horizontal dimension, or width. inlinesize the length of the observed element's border box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. examples const resizeobserver = new resizeobserver(entries => { for (let entry of entries) { if(entry.borderboxsize && entry.borderboxsize.length > 0) { entry.target.style.borderradius = math.min(100, (entry.borderboxsize[0].inlinesize/10) + (entry.borderboxsize[0].blocksize/10)) + 'px'; } else { entry.target.style.b...

ResizeObserverEntry.contentBoxSize - Web APIs
is is the horizontal dimension, or width. inlinesize the length of the observed element's content box in the inline dimension. for boxes with a horizontal writing-mode, this is the horizontal dimension, or width; if the writing-mode is vertical, this is the vertical dimension, or height. note: for more explanation of writing modes and block and inline dimensions, read handling different text directions. examples the following snippet is taken from the resize-observer-border-radius.html (see source) example. this example includes a green box, sized as a percentage of the viewport size. when the viewport size is changed, the box's rounded corners change in proportion to the size of the box. we could just implement this using border-radius with a percentage, but that quickly leads to ugly-look...

SVGMatrix - Web APIs
current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotate() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix. svgmatrix.rotatefromvector() post-multiplies a rotation transformation on the current matrix and returns the resulting matrix as svgmatrix. the rotation angle is determined by taking (+/-) atan(y/x). the direction of the vector (x, y) determines whether the positive or negative angle value is used. svgmatrix.flipx() post-multiplies the transformation [-1 0 0 1 0 0] and returns the resulting matrix as svgmatrix. svgmatrix.flipy() post-multiplies the transformation [1 0 0 -1 0 0] and returns the resulting matrix as svgmatrix. svgmatrix.skewx() post-multiplies a skewx transformation on the current matri...

Selection.extend() - Web APIs
syntax sel.extend(node, offset) parameters node the node within which the focus will be moved. offset optional the offset position within node where the focus will be moved to. if not specified, the default value 0 is used. ...

Selection.modify() - Web APIs
the selection.modify() method applies a change to the current selection or cursor position, using simple textual commands. syntax sel.modify(alter, direction, granularity) parameters alter the type of change to apply. specify "move" to move the current cursor position or "extend" to extend the current selection. direction the direction in which to adjust the current selection. you can specify "forward" or "backward" to adjust in the appropriate direction based on the language at the selection point. if you want to adjust in a specific direction, you can specify "left" or "right". granularity the distance to adjust the current selection or cursor position. you can move by "character", "word", "sentence", "line", "paragraph", "lineboundary", "sentenceboundary", "paragraphbounda...

Selection.setBaseAndExtent() - Web APIs
included. and so on. focusnode the node at the end of the selection. focusoffset the number of child nodes from the start of the focus node that should be included in the selection. so for example, if the value is 0 the whole node is excluded. if the value is 1, the first child node is included. and so on. note: if the focus position appears before the anchor position in the document, the direction of the selection is reversed — the caret is placed at the beginning of the text rather the end, which matters for any keyboard command that might follow. for example, shift + ➡︎ would cause the selection to narrow from the beginning rather than grow at the end. return value void. exceptions if anchoroffset is larger than the number of child nodes inside anchornode, or if focusoffset is...

Selection - Web APIs
egan the selection and the focus is where the user ends the selection. if you make a selection with a desktop mouse, the anchor is placed where you pressed the mouse button, and the focus is placed where you released the mouse button. anchor and focus should not be confused with the start and end positions of a selection. the anchor can be placed before the focus or vice-versa, depending on the direction you made your selection. properties selection.anchornoderead only returns the node in which the selection begins. can return null if selection never existed in the document (e.g., an iframe that was never clicked on). selection.anchoroffsetread only returns a number representing the offset of the selection's anchor within the anchornode. if anchornode is a text node, this is the number ...

ServiceWorkerRegistration.showNotification() - Web APIs
tself such as for example, the android notification bar. on android devices, the badge should accommodate devices up to 4x resolution, about 96 by 96 px, and the image will be automatically masked. body: a string representing an extra content to display within the notification. data: arbitrary data that you want to be associated with the notification. this can be of any data type. dir : the direction of the notification; it can be auto, ltr or rtl icon: a usvstring containing the url of an image to be used as an icon by the notification. image: a usvstring containing the url of an image to be displayed in the notification. lang: specify the lang used within the notification. this string must be a valid bcp 47 language tag. renotify: a boolean that indicates whether to suppress vibrat...

TextMetrics - Web APIs
it can therefore be useful to use the sum of actualboundingboxleft and actualboundingboxright as a more accurate way to get the absolute text width: const canvas = document.getelementbyid...

Using Touch Events - Web APIs
lication may consider different factors when defining the semantics of a gesture. for instance, the distance a touch point traveled from its starting location to its location when the touch ended. another potential factor is time; for example, the time elapsed between the touch's start and the touch's end, or the time lapse between two consecutive taps intended to create a double-tap gesture. the directionality of a swipe (for example left to right, right to left, etc.) is another factor to consider. the touch list(s) an application uses depends on the semantics of the application's gestures. for example, if an application supports a single touch (tap) on one element, it would use the targettouches list in the touchstart event handler to process the touch point in an application-specific manner. i...

USBDevice.clearHalt() - Web APIs
the clearhalt() method of the usbdevice interface returns a promise that resolves when a halt condition is cleared. a halt condition is when a data tranfer to or from the device has a status of 'stall', which requires the web page (the host system, in usb terminology) to clear that condition. see the for details. syntax var promise = usbdevice.clearhalt(direction, endpointnumber) parameters direction indicates whether the devices input or output should be cleared. valid values are 'in' or 'out'. endpointnumber indicates the number of the endpoint to clear. the promise will reject if an invalid endpoint is supplied. return value a promise. example the following example shows how to test for and clear a 'stall' condition in the result of a data transfer. what data can be passed t...

USBInterface - Web APIs
constructor usbinterface.usbinterface creates a new usbinterface object which will be populated with information about the interface on the provided usbconfiguration with the given interface number. ...

VTTCue - Web APIs
he end of the range of the media data to which the cue applies. text the raw text of the cue, and rules for its interpretation. properties this interface also inherits properties from texttrackcue. vttcue.region a vttregion object describing the video's sub-region that the cue will be drawn onto, or null if none is assigned. vttcue.vertical returns an enum representing the cue writing direction. vttcue.snaptolines returns true if the vttcue.line attribute is an integer number of lines or a percentage of the video size. vttcue.line returns the line positioning of the cue. this can be the string auto or a number whose interpretation depends on the value of vttcue.snaptolines. vttcue.linealign returns an enum representing the alignment of the vttcue.line. vttcue.position returns th...

A basic 2D WebGL animation example - Web APIs
em of -1.0 to 1.0 for each axis. why, you may ask, do we need to do any adjustments at all? this is simply because our context is not square. we're using a context that's 600 pixels wide and 460 tall. each of those dimensions is mapped to the range -1.0 to 1.0. since the two axes aren't the same length, if we don't adjust the values of one of the two axes, the square will get stretched out in one direction or the other. so we need to normalize these values. once the vertex array has been created, we create a new gl buffer to contain them by calling gl.createbuffer(). we bind the standard webgl array buffer reference to that by calling gl.bindbuffer() and then copy the vertex data into the buffer using gl.bufferdata(). the usage hint gl.static_draw is specified, telling webgl that the data will be ...

Adding 2D content to a WebGL context - Web APIs
need to include that in your project. we're loading a copy from a cdn in our html's <head>. drawing the scene the most important thing to understand before we get started is that even though we're only rendering a square plane object in this example, we're still drawing in 3d space. it's just we're drawing a square and we're putting it directly in front of the camera perpendicular to the view direction. we need to define the shaders that will create the color for our simple scene as well as draw our object. these will establish how the square plane appears on the screen. the shaders a shader is a program, written using the opengl es shading language (glsl), that takes information about the vertices that make up a shape and generates the data needed to render the pixels onto the screen: namely...

WebRTC API - Web APIs
ons, data channels, and interfaces used when exchanging information on the capabilities of each peer in order to select the best possible configuration for a two-way media connection. interfaces rtcpeerconnection represents a webrtc connection between the local computer and a remote peer. it is used to handle efficient streaming of data between the two peers. rtcdatachannel represents a bi-directional data channel between two peers of a connection. rtcdatachannelevent represents events that occur while attaching a rtcdatachannel to a rtcpeerconnection. the only event sent with this interface is datachannel. rtcsessiondescription represents the parameters of a session. each rtcsessiondescription consists of a description type indicating which part of the offer/answer negotiation process i...

The WebSocket API (WebSockets) - Web APIs
ections) for node.js server and client. signalr: signalr will use websockets under the covers when it's available, and gracefully fallback to other techniques and technologies when it isn't, while your application code stays the same. caddy: a web server capable of proxying arbitrary commands (stdin/stdout) as a websocket. ws: a popular websocket client & server library for node.js. jsonrpc-bidirectional: asynchronous rpc which, on a single connection, may have functions exported on the server and, and the same time, on the client (client may call server, server may also call client). cowboy: cowboy is a small, fast and modern http server for erlang/otp with websocket support. related topics ajax javascript specifications specification status comments html ...

Using bounded reference spaces - Web APIs
loor-bound reference space, the user starts out on the floor of the space, which is sensible given the real-world implications otherwise. therefore, the bounded reference space's origin always places the y=0 plane at floor level. the boundary is then defined using an array of 2d coordinates, specifying only the x and z components since y is always 0. these points go around the room in a clockwise direction. note that if the underlying platform defines a fixed room-scale origin and boundary, it may initialize any uninitialized values to match that predefined information; this is not unexpected behavior for users of these platforms. the space inside the boundary is then the user's safe movement area, within which they are tracked and their movements replicated into the virtual world. although the u...

Fundamentals of WebXR - Web APIs
egree of freedom hardware: yaw, roll, and pitch. freedom of rotational movement the first three degrees of freedom are rotational. the rotational degrees of freedom are: pitch: looking up and down yaw: looking left and right roll: tilting left and right in all of these cases, the viewer remains in the same location in space while pivoting on one or more of the three axes to alter the direction in which they're looking. a system with two degrees of freedom can sense when the user looks left and right or up and down, but can't report any other kind of movement. a typical baseline headset offers three degrees of freedom, recognizing rotation around all three axes. this is often referred to by the shorthand 3dof. freedom of translational movement the other three degrees of freedom are t...

Rendering and the WebXR frame animation callback - Web APIs
shutting down a webxr session. preparing the renderer once the xr session has been set up, with the webgl framebuffer connected and webgl primed with the data it needs in order to render the scene, you can set up the renderer to start running. this begins with getting the reference space in which you want to draw, with its origin and orientation set at the viewer's starting position and viewing direction. once that's in hand, you request that the browser call your rendering function the next time it needs a framebuffer to render your scene. this is done by calling the xrsession method requestanimationframe(). kicking off the renderer thus looks like this: let worldrefspace; async function runxr(xrsession) { worldrefspace = await xrsession.requestreferencespace("immersive-vr"); if (worldre...

Web Animations API Concepts - Web APIs
tion objects can be imagined as dvd players: they’re used for controlling media playback, but without media to play, they don’t do anything. animation objects accept media in the form of animation effects, specifically keyframe effects (we’ll get to those in a moment). like a dvd player, we can use the animation object’s methods to play, pause, seek, and control the animation’s playback direction and speed. animation effect if animation objects are dvd players, we can think of animation effects, or keyframe effects, as dvds. keyframe effects are a bundle of information including at the bare minimum a set of keys and the duration they need to be animated over. the animation object takes this information and, using the timeline object, assembles a playable animation we can view and refe...

WheelEvent - Web APIs
levent and mousescrollevent interfaces. use this interface and avoid the non-standard ones. do not confuse the wheel event with the scroll event: the default action of a wheel event is implementation-defined. thus, a wheel event doesn't necessarily dispatch a scroll event. even when it does, that doesn't mean that the delta* values in the wheel event necessarily reflect the content's scrolling direction. therefore, do not rely on delta* properties to get the content's scrolling direction. instead, detect value changes to scrollleft and scrolltop of the target in the scroll event. <div id="interfacediagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 11.666666666666666%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position...

Window: transitionend event - Web APIs
d when a css transition has completed. in the case where a transition is removed before completion, such as if the transition-property is removed or display is set to none, then the event will not be generated. bubbles yes cancelable yes interface transitionevent event handler property ontransitionend the transitionend event is fired in both directions - as it finishes transitioning to the transitioned state, and when it fully reverts to the default or non-transitioned state. if there is no transition delay or duration, if both are 0s or neither is declared, there is no transition, and none of the transition events are fired. if the transitioncancel event is fired, the transitionend event will not fire. the original target for this event is t...

WindowOrWorkerGlobalScope.setInterval() - Web APIs
daemon.start([reverse]) starts the daemon forward (index of each invocation increasing) or backwards (index decreasing). minidaemon global object methods minidaemon.forcecall(minidaemon) forces a single callback to the minidaemon.task function regardless of the fact that the end has been reached or not. in any case the internal index property is increased/decreased (depending on the actual direction of the process). example usage your html page: <!doctype html> <html> <head> <meta charset="utf-8" /> <title>minidaemin example - mdn</title> <script type="text/javascript" src="minidaemon.js"></script> <style type="text/css"> #sample_div { visibility: hidden; } </style> </head> <body> <p> <input type="button" onclick="fadeinout.start(false /* optional */);" val...

XRInputSource.gripSpace - Web APIs
e grip space is located at the centroid—the center of mass—of the user's fist, tracking the position of the user's hand. the coordinate system for the left hand's grip space. the coordinate system for the right hand's grip space. as shown in the diagram above, the coordinate system is oriented as follows: the x-axis is perpendicular to the palm of the user's hand, with the direction extending outward from the back of the hand being +x if the controller is in the user's right hand or -x if the controller is in the left hand. the z-axis along the length of the rod, parallel to the user's palm and along the length of their grip. +z is in the direction of the user's thumb, and -z is in the opposite direction. the y-axis is implied by the relationship between the other two axes...

XRReferenceSpace.getOffsetReferenceSpace() - Web APIs
alling preventdefault() on those events. this prevents the right-clicks from causing the context menu from appearing in the browser. canvas.oncontextmenu = (event) => { event.preventdefault(); }; canvas.addeventlistener("mousemove", (event) => { if (event.buttons & 2) { rotateviewby(event.movementx, event.movementy); } }); next, the rotateviewby() function, which updates the mouse look direction's yaw and pitch based on the mouse delta values from the mousemove event. the pitch is restricted so that you can't look beyond straight up and straight down. each time this is called, the new offsets are used to update the current values of mousepitch and mouseyaw. let mouseyaw = 0.0; let mousepitch = 0.0; const inverseorientation = quat.create(); const mouse_speed = 0.003; function rotateview...

XRReferenceSpace: reset event - Web APIs
is sent before any animation frame callbacks are executed to render the pending frame, to ensure that those callbacks have the updated coordinate system available. there are a number of reasons why a reset might occur. most common among them are the following: the user has manually reset the coordinate system, such as by requesting that the headset recalibrate itself to ensure that the facing direction and hand controllers are synchronized with the user's actual position and facing. this is primarily an issue for local or local-floor reference spaces. for a bounded-floor reference space, the coordinate system can be reset if the user exits the boundaries of the reference space and enters a new one (such as by crossing from one level to another in a game, where each level is its own map with it...

XRWebGLLayer - Web APIs
ach time the gpu is ready to render the scene to the xr device, the xr runtime calls the function you specified when you called the xrsession method requestanimationframe() to ask to render the frame. that function receives as input an xrframe which encapsulates the data needed to render the frame. this information includes the pose (an xrviewerpose object) that describes the position and facing direction of the viewer within the scene as well as a list of xrview objects, each representing one perspective on the scene. in current webxr implementations, there will never be more than two entries in this list: one describing the position and viewing angle of the left eye and another doing the same for the right. let pose = xrframe.getviewerpose(xrreferencespace); if (pose) { let gllayer = xrsessi...

Web APIs
ection rtcpeerconnectioniceerrorevent rtcpeerconnectioniceevent rtcremoteoutboundrtpstreamstats rtcrtcpparameters rtcrtpcapabilities rtcrtpcodeccapability rtcrtpcodecparameters rtcrtpcontributingsource rtcrtpencodingparameters rtcrtpparameters rtcrtpreceiveparameters rtcrtpreceiver rtcrtpsendparameters rtcrtpsender rtcrtpstreamstats rtcrtpsynchronizationsource rtcrtptransceiver rtcrtptransceiverdirection rtcrtptransceiverinit rtcsctptransport rtcsessiondescription rtcsessiondescriptioncallback rtcstats rtcstatsicecandidatepairstate rtcstatsreport rtcstatstype rtctrackevent rtctrackeventinit radionodelist range readablebytestreamcontroller readablestream readablestreambyobreader readablestreambyobrequest readablestreamdefaultcontroller readablestreamdefaultreader relativeorientationsen...

Using the slider role - Accessibility
nd possible aria-valuetext) attribute to reflect the current value. see the examples section below for more information. keyboard and focus the slider should be keyboard focusable and operable. when the user tabs focus to the slider, it should land on the thumb: the control a mouse user would drag. arrow keys should operate as follows (localization for right-to-left languages should reverse the direction of the arrows): key(s) action right and up arrows increase the selected value left and down arrows decrease the selected value page up and page down optionally increase and decrease the value by a set amount (e.g. by 10 on a range from 0 to 100) possible effects on user agents and assistive technology note: opinions may differ on how...

ARIA: List role - Accessibility
ively. a list must have one or more listitem children, or, alternatively, have one or more groups as children, with each group having one or more listitems as children. there are no hard and fast rules about which elements you should use to markup the list and list items, but you should make sure that the list items make sense in the context of a list, e.g. a shopping list, recipe steps, driving directions. warning: if at all possible in your work, you should use the appropriate semantic html elements to mark up a list and its listitems — <ul>/<ol> and <li>. see best practices for a full example. associated wai-aria roles, states, and properties listitem a single item in a list or directory. elements with role listitem can only be found in an element with the role list or group. g...

ARIA: Listitem role - Accessibility
t that consists of an outer container with a list of elements inside it can be identified to assistive technologies using the list and listitem containers respectively. there are no hard and fast rules about which elements you should use to markup the list and list items, but you should make sure that the list items make sense in the context of a list, e.g. a shopping list, recipe steps, driving directions. warning: if at all possible in your work, you should use the appropriate semantic html elements to mark up a list and its listitems — <ul>/<ol> and <li>. see best practices for a full example. associated wai-aria roles, states, and properties list a list of items. elements with role list must have one or more elements with the role listitem as children, a one or more elements with t...

-moz-orient - CSS: Cascading Style Sheets
block the element is rendered orthogonally to the axis of the text: vertically for horizontal writing modes, horizontal for vertical writing modes. ...

-webkit-border-before - CSS: Cascading Style Sheets
otted; -webkit-border-before: medium dashed blue; /* global values */ -webkit-border-before: inherit; -webkit-border-before: initial; -webkit-border-before: unset; -webkit-border-before can be used to set the values for one or more of: -webkit-border-before-width, -webkit-border-before-style, and -webkit-border-before-color. it maps to a physical border depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. it relates to -webkit-border-after, -webkit-border-start, and -webkit-border-end, which define the other borders of the element. this property is on the standard track as border-block-start. syntax ...

-webkit-box-reflect - CSS: Cascading Style Sheets
the -webkit-box-reflect css property lets you reflect the content of an element in one specific direction. /* direction values */ -webkit-box-reflect: above; -webkit-box-reflect: below; -webkit-box-reflect: left; -webkit-box-reflect: right; /* offset value */ -webkit-box-reflect: below 10px; /* mask value */ -webkit-box-reflect: below 0 linear-gradient(transparent, white); /* global values */ -webkit-box-reflect: inherit; -webkit-box-reflect: initial; -webkit-box-reflect: unset; note: this feature is not intended to be used by web sites. to achieve reflection on the web, the standard way is to use the css element() function. syntax values above, below, right, left are keywords indicating in which direction the reflection is to happen. <length> indicates the size of the refl...

-webkit-mask-repeat-y - CSS: Cascading Style Sheets
space; -webkit-mask-repeat-y: round; /* multiple values */ -webkit-mask-repeat-y: repeat, no-repeat, space; /* global values */ -webkit-mask-repeat-y: inherit; -webkit-mask-repeat-y: initial; -webkit-mask-repeat-y: unset; syntax values repeat the mask image is repeated vertically. no-repeat the mask image is not repeated vertically; only one copy of the mask image is drawn in vertical direction. the vertical remainder of the masked element's content is not displayed. repeat the mask image is repeated vertically. space the image is repeated as much as possible without clipping. the first and last images are pinned to the top and bottom edge of the element, and whitespace is distributed evenly between the images. the mask-position property is ignored unless only one image can be displ...

:-moz-locale-dir(ltr) - CSS: Cascading Style Sheets
note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. ...

:-moz-locale-dir(rtl) - CSS: Cascading Style Sheets
note: this selector is mainly used by extensions and themes to adapt the user interface based on the user's locale. ...

::marker - CSS: Cascading Style Sheets
ich typically contains a bullet or number. it works on any element or pseudo-element set to display: list-item, such as the <li> and <summary> elements. ::marker { color: blue; font-size: 1.2em; } allowable properties only certain css properties can be used in a rule with ::marker as a selector: all font properties the white-space property color text-combine-upright, unicode-bidi and direction properties the content property all animation and transition properties the specification states that additional css properties may be supported in future. syntax ::marker examples html <ul> <li>peaches</li> <li>apples</li> <li>plums</li> </ul> css ul li::marker { color: red; font-size: 1.5em; } result specifications specification status comment ...

:left - CSS: Cascading Style Sheets
the :left css pseudo-class, used with the @page at-rule, represents all left-hand pages of a printed document. /* selects any left-hand pages when printing */ @page :left { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document. for example, if the first page has a major writing direction of left-to-right then it will be a :right page; if it has a major writing direction of right-to-left then it will be a :left page. note: this pseudo-class can be used to change only the margin, padding, border, and background properties of the page box. all other properties will be ignored, and only the page box, not the document content on the page, will be affected. syntax :left examples setting a margin for left-hand pages @page :le...

:right - CSS: Cascading Style Sheets
the :right css pseudo-class, used with the @page at-rule, represents all right-hand pages of a printed document. /* selects any right-hand pages when printing */ @page :right { margin: 2in 3in; } whether a given page is "left" or "right" is determined by the major writing direction of the document. for example, if the first page has a major writing direction of left-to-right then it will be a :right page; if it has a major writing direction of right-to-left then it will be a :left page. note: this pseudo-class can be used to change only the margin, padding, border, and background properties of the page box. all other properties will be ignored, and only the page box, not the document content on the page, will be affected. syntax :right examples setting margins for right-hand pages @pag...

orientation - CSS: Cascading Style Sheets
portrait the viewport is in a portrait orientation, i.e., the height is greater than or equal to the width. landscape the viewport is in a landscape orientation, i.e., the width is greater than the height. examples html <div>box 1</div> <div>box 2</div> <div>box 3</div> css body { display: flex; } div { background: yellow; } @media (orientation: landscape) { body { flex-direction: row; } } @media (orientation: portrait) { body { flex-direction: column; } } result specifications specification status comment media queries level 4the definition of 'orientation' in that specification. candidate recommendation no change. media queriesthe definition of 'orientation' in that specification. recommendation initial de...

bleed - CSS: Cascading Style Sheets
e @page at-rule, specifies the extent of the page bleed area outside the page box. this property only has effect if crop marks are enabled using the marks property. syntax /* keyword values */ bleed: auto; /* <length> values */ bleed: 8pt; bleed: 1cm; values auto computes to 6pt if the value of marks is crop. otherwise it computes to zero. <length> specifies by how far outward, in each direction, the bleed area extends past the page box. values may be negative, but there may be implementation-specific limits. formal definition related at-rule@pageinitial valueautocomputed valueas specified formal syntax auto | <length> examples setting a page bleed of 1cm @page { bleed: 1cm; } specifications specification status comment css paged media module leve...

CSS Animations tips and tricks - CSS: Cascading Style Sheets
ventlistener("click", play, false); result stopping an animation simply removing the animation-name applied to an element will make it jump or cut to its next state. if instead you'd like the animation to complete and then come to a stop you have to try a different approach. the main tricks are: make your animation as self-contained as possible. this means you should not rely on animation-direction: alternate. instead you should explicitly write a keyframe animation that goes through the full animation in one forward repetition. use javascript and clear the animation being used when the animationiteration event fires. the following demo shows how you'd achieve the aforementioned javascript technique: .slidein { animation-duration: 5s; animation-name: slidein; animation-iteration-c...

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. the behavior of these keyframe animations can be controlled by specifying their timing function, duration, their number of repetitions, and other attributes. reference css properties animation animation-delay animation-direction animation-duration animation-fill-mode animation-iteration-count animation-name animation-play-state animation-timing-function css at-rules @keyframes guides detecting css animation support describes a technique for detecting if a browser supports css animations. using css animations step-by-step tutorial about how to create animations using css. this article describes each relevant css property and at-rule and explains how they int...

CSS Flow Layout - CSS: Cascading Style Sheets
normal flow, or flow layout, is the way that block and inline elements are displayed on a page before any changes are made to their layout. the flow is essentially a set of things that are all working together and know about each other in your layout. once something is taken out of flow it works independently. in normal flow, inline elements display in the inline direction, that is in the direction words are displayed in a sentence according to the writing mode of the document. block elements display one after the other, as paragraphs do in the writing mode of that document. in english therefore, inline elements display one after the other, starting on the left, and block elements start at the top and move down the page. basic example the following example demonstrates block and inline level bo...

CSS Grid Layout and Accessibility - CSS: Cascading Style Sheets
avoid the problem, as you will be aware that you are removing semantic elements in order to make the layout work if you actually have to go into the document and do so! further reading there is not a lot of existing material regarding accessibility and css grid layout. many of the issues are similar to those raised regarding css flexbox, which also gives methods of reordering content with flex-direction and the order property. the concept of visual display following document source order is detailed in the wcag techniques for success criteria – technique c27. as a way to start thinking about these issues, as you use css grid layout i would suggest reading flexbox & the keyboard navigation disconnect from léonie watson. also the video of léonie’s presentation from ffconf is helpful to und...

Logical properties for sizing - CSS: Cascading Style Sheets
ine-size and height with block-size will give the same layout. in the live example below i have set the writing mode to horizontal-tb. change it to vertical-rl and you will see that the first example — which uses width and height — remains the same size in each dimension, despite the text becoming vertical. the second example — which uses inline-size and block-size — will follow the text direction as if the entire block has rotated. min-width and min-height example there are also mappings for min-width and min-height — these are min-inline-size and min-block-size. these work in the same way as the inline-size and block-size properties, but setting a minimum rather than a fixed size. try changing the example below to vertical-rl, as with the first example, to see the effect it has. i...

Shapes from box values - CSS: Cascading Style Sheets
n be defined using the well-supported border-radius property. the examples shown above show one such use case. you can create a circular shape using border-radius and then curve text around it. you can create some interesting effects however with just this simple technique. in my final example of this section, i have floated two elements left and right, giving each a border-radius of 100% in the direction closest to the text. for more complex shapes you will need to use one of the basic shapes as a value, or define your shape from an image as covered in other guides in this section. ...

CSS Text - CSS: Cascading Style Sheets
css text module level 3 working draft css level 2 (revision 1) recommendation css level 1 recommendation initial definition ...

Column layouts - CSS: Cascading Style Sheets
d a rule between columns using column-rule. download this example use multicol when: you want your text to display in newspaper-like columns. you have a set of small items you want to break into columns. you do not need to target individual column boxes for styling. a single row of items with equal heights — flexbox flexbox can be used to break content into columns by setting flex-direction to row, however flexbox targets the elements inside the flex container and will place each direct child into a new column. this is a different behavior to what you saw with multicol. there is currently no way to add a rule between flex items, and browser support for the column-gap and row-gap properties is limited. therefore to create gaps between items use a margin. download this example ...

Split Navigation - CSS: Cascading Style Sheets
avigation items. requirements a common navigation pattern is to have one element pushed away from the others. we can use flexbox to achieve this, without needing to make the two sets of items into two separate flex containers. recipe download this example choices made this pattern combines auto margins with flexbox to split the items. an auto margin absorbs all available space in the direction it is applied. this is how centering a block with auto margins works — you have a margin on each side of the block trying to take up all of the space, thus pushing the block into the middle. in this case the left auto margin takes up any available space and pushes the item over to the right. you could apply the class push to any item in the list. ...

Sticky footers - CSS: Cascading Style Sheets
d the footer into the final auto sized track. the 1fr track will take up all available space and so grows to fill the gap. alternate method if you need compatibility with browsers that do not support grid layout you can also use flexbox to create a sticky footer. the flexbox example starts out in the same way, but we use display:flex rather than display:grid on the .wrapper; we also set flex-direction to column. then we set our main content to flex-grow: 1 and the other two elements to flex-shrink: 0 — this prevents them from shrinking smaller when content fills the main area. ...

Viewport concepts - CSS: Cascading Style Sheets
mes visible, the visual viewport shrinks but the layout viewport is unchanged. sticky headers or footers, as discussed above, stick to the top and bottom of the layout viewport, and therefore remain in view when we zoom in with the keyboard. if you pinch-zoom, the layout viewport may not be fully visible. if you magnify from the middle of the layout viewport, the content would expand in all four directions. if you had a sticky header or footer, they would still be stuck to the top or bottom of the layout viewport, but they may not be visible at the top and bottom of the device's screen — which is the visual viewport. the visual viewport is the currently visible portion of the layout viewport. if you scroll down, you are changing the contents of the visual viewport and bringing the bottom of the ...

align-items - CSS: Cascading Style Sheets
flex-start the cross-start margin edges of the flex items are flushed with the cross-start edge of the line. flex-end the cross-end margin edges of the flex items are flushed with the cross-end edge of the line. center the flex items' margin boxes are centered within the line on the cross-axis. if the cross-size of an item is larger than the flex container, it will overflow equally in both directions. start the items are packed flush to each other toward the start edge of the alignment container in the appropriate axis. end the items are packed flush to each other toward the end edge of the alignment container in the appropriate axis. self-start the items are packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis. self-end the items...

align-self - CSS: Cascading Style Sheets
ss axis. flex-start the cross-start margin edge of the flex item is flushed with the cross-start edge of the line. flex-end the cross-end margin edge of the flex item is flushed with the cross-end edge of the line. center the flex item's margin box is centered within the line on the cross-axis. if the cross-size of the item is larger than the flex container, it will overflow equally in both directions. baseline first baseline last baseline specifies participation in first- or last-baseline alignment: aligns the alignment baseline of the box’s first or last baseline set with the corresponding baseline in the shared first or last baseline set of all the boxes in its baseline-sharing group. the fallback alignment for first baseline is start, the one for last baseline is end. stretch if ...

backface-visibility - CSS: Cascading Style Sheets
: 75px 0 0 75px; border: none; } .cube { width: 100%; height: 100%; perspective: 550px; perspective-origin: 150% 150%; transform-style: preserve-3d; } .face { display: block; position: absolute; width: 100px; height: 100px; border: none; line-height: 100px; font-family: sans-serif; font-size: 60px; color: white; text-align: center; } /* define each face based on direction */ .front { background: rgba(0, 0, 0, 0.3); transform: translatez(50px); } .back { background: rgba(0, 255, 0, 1); color: black; transform: rotatey(180deg) translatez(50px); } .right { background: rgba(196, 0, 0, 0.7); transform: rotatey(90deg) translatez(50px); } .left { background: rgba(0, 0, 196, 0.7); transform: rotatey(-90deg) translatez(50px); } .top { background: rg...

background-size - CSS: Cascading Style Sheets
lue for each one with a comma. values contain scales the image as large as possible without cropping or stretching the image. cover scales the image as large as possible without stretching the image. if the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains. auto scales the background image in the corresponding direction such that its intrinsic proportions are maintained. <length> stretches the image in the corresponding dimension to the specified length. negative values are not allowed. <percentage> stretches the image in the corresponding dimension to the specified percentage of the background positioning area. the background positioning area is determined by the value of background-origin (by default, the ...

border-block-color - CSS: Cascading Style Sheets
the border-block-color css property defines the color of the logical block borders of an element, which maps to a physical border color depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-color and border-bottom-color, or border-right-color and border-left-color property depending on the values defined for writing-mode, direction, and text-orientation. border-block-color: yellow; border-block-color: #f5f6f7; the border color in the other dimension can be set with border-inline-color which sets border-inline-start-color, and border-inline-end-color. syntax values <'color'> the color of the border. see color. formal definition initial valuecurrentcolorapplies toall elementsinheritednocomputed valuecomputed coloranimati...

border-block-end - CSS: Cascading Style Sheets
: border-block-end-color border-block-end-style border-block-end-width syntax border-block-end: 1px; border-block-end: 2px dotted; border-block-end: medium dashed blue; border-block-end can be used to set the values for one or more of border-block-end-width, border-block-end-style, and border-block-end-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-end is specified with one or more of the...

border-block-start - CSS: Cascading Style Sheets
tart-color border-block-start-style border-block-start-width syntax border-block-start: 1px; border-block-start: 2px dotted; border-block-start: medium dashed blue; border-block-start can be used to set the values for one or more of border-block-start-width, border-block-start-style, and border-block-start-color. the physical border to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-end, border-inline-start, and border-inline-end, which define the other borders of the element. values the border-block-start is specified with one or more of the...

border-block-style - CSS: Cascading Style Sheets
the border-block-style css property defines the style of the logical block borders of an element, which maps to a physical border style depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-style and border-bottom-style, or border-left-style and border-right-style properties depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-style'> values */ border-block-style: dashed; border-block-style: dotted; border-block-style: groove; the border style in the other dimension can be set with border-inline-style, which sets border-inline-start-style, and border-inline-end-style. syntax values <'border-style'> the line style of the border. see border-style. formal definition initial valuen...

border-block-width - CSS: Cascading Style Sheets
the border-block-width css property defines the width of the logical block borders of an element, which maps to a physical border width depending on the element's writing mode, directionality, and text orientation. it corresponds to the border-top-width and border-bottom-width, or border-left-width, and border-right-width property depending on the values defined for writing-mode, direction, and text-orientation. /* <'border-width'> values */ border-block-width: 5px; border-block-width: thick; the border width in the other dimension can be set with border-inline-width, which sets border-inline-start-width, and border-inline-end-width. syntax values <'border-width'> the width of the border. see border-width. formal definition initial valuemediumapplies toall elementsinheritedno...

border-block - CSS: Cascading Style Sheets
roperty values in a single place in the style sheet. border-block: 1px; border-block: 2px dotted; border-block: medium dashed blue; border-block can be used to set the values for one or more of border-block-width, border-block-style, and border-block-color setting both the start and end in the block dimension at once. the physical borders to which it maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top and border-bottom or border-right, and border-left properties depending on the values defined for writing-mode, direction, and text-orientation. the borders in the other dimension can be set with border-inline, which sets border-inline-start, and border-inline-end. constituent properties this property is a shorthand for the following...

border-end-end-radius - CSS: Cascading Style Sheets
this is useful when building styles to work regardless of the text orientation and writing mode. ...

border-end-start-radius - CSS: Cascading Style Sheets
this is useful when building styles to work regardless of the text orientation and writing mode. ...

border-inline-end - CSS: Cascading Style Sheets
-examples and send us a pull request. constituent properties this property is a shorthand for the following css properties: border-inline-end-color border-inline-end-style border-inline-end-width syntax border-inline-end: 1px; border-inline-end: 2px dashed; border-inline-end: medium dashed blue; the physical border to which border-inline-end maps depends on the element's writing mode, directionality, and text orientation. it corresponds to the border-top, border-right, border-bottom, or border-left property depending on the values defined for writing-mode, direction, and text-orientation. related properties are border-block-start, border-block-end, and border-inline-start, which define the other borders of the element. initial valueas each of the properties of the shorthand:border-wid...