gmane.comp.mozilla.devel.layout

Industrial Automation Training and Placements in Coimbatore

logeswari raja — 2012-04-24T09:00:50

http://www.facebook.com/pages/Hindustan-Technologies-Private-Limited/318300758211251

Validating css property values

Mike Ratcliffe — 2012-04-20T11:12:40

As part of our css devtools we need a way to check that a css property value is valid. This is used to validate the value onkeyup. Our current solution is to call the following method on each keypress:

  function validate(aValue)
  {
    let name = this.prop.name;
    let value = typeof aValue == "undefined" ? this.prop.value : aValue;
    let style = this.doc.createElementNS(HTML_NS, "div").style;

    style.setProperty(name, value, null);

    return !!style.getPropertyValue(name);
   },

The problem with this solution is that it spews css error messages for invalid property values, but we could work around this with:

  let prefVal = getPref("layout.css.report_errors");
  setPref("layout.css.report_errors", false);
  try {
    style.setProperty(name, value, null);
  } finally {
    setPref("layout.css.report_errors, prefVal");
  }

It occurs to me that we are also adding autocomplete to the properties, so can any of you guys think of:
1. A better way to validate css property values.
2. A way to get a list of possible property values for a given css property (this could be used for autocomplete and validation).
3. A better way to do both 1 and 2 ;o)

~Mike Ratcliffe

Wiki Wednesday (CSS) - April 19, 2012

Sheppy — 2012-04-19T12:17:03

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

1) inherit ( http://mzl.la/HF2vAM )
2) background-clip ( http://mzl.la/HJGvSb )
3) clip-path ( http://mzl.la/eGdxye )

Please confirm if a bug

Gus Richter — 2012-04-14T17:22:25

Please look at:
 
<http://www3.bell.net/monique.richter/ThreeImagesSpacedEvenly%20-%204%20areas%20now%20-%20divs.htm>

and confirm if a bug and if so, if it is known.

HostMath - Online LaTeX formula editor and math equation editor

Jack — 2012-04-12T12:57:31


HostMath is a powerful interactive mathematical expressions editor. It
uses WYSIWYG-style editing and allows creating mathematical equations
through simple point-and-click techniques.

1. Many pre-defined Templates and Symbols in well-organized palettes
that cover Mathematics, Physics, Electronics, and many other higher
educations
2. Fine adjustment for Template shapes, gaps, and thicknesses with
visual interface
3. Multiple Undo and Redo
4. Can generate equations as MathML. MathML will allow you to copy and
paste math into many applications that understand MathML.

URL: http://www.hostmath.com/

Synchronizing test with W3C

fantasai — 2012-03-29T19:04:58

The Tools and Automation team is working on setting up automatic
synchronization between the CSSWG test repository and ours. There
will be two folders:
   - one for submitted tests, which will be automatically pushed
     to Mozilla's directory on the CSSWG hg server
   - one for received tests, which will be semi-automatically
     pulled from the CSSWG's approved directory on the CSSWG hg
     server

(The second step is semi-automatic because we'll need to annotate
the reftest manifests for any new tests to match our current
behavior.)

The question right now is where to put these tests. We can put
them under /layout/reftests/w3c/ or we can put them under
/testing/w3c-tests/css. The former keeps them closer to existing
reftests. The latter lets us put all W3C-synchronized tests near
each other as we add other test suites in the future.

Any comments from the module owners?

~fantasai

How can I reload a page and force the parsing,reflow and paint to be re-exercised?

Yuhao — 2012-03-20T03:07:12

Hi All,

I wanted to study the basic performance of firefox loading a page.  I
want to exclude network noise and disk access overhead.  So what I
basically did was to load a page in online mode, so that all the
resources will be in the browser cache (I enabled memory cache and
disabled disk cache), and switched to offline mode, and issued a
reload.  But seems like reload didn't really go through the processing
stack from parsing, construction DOM tree, reflow and paint.  I made
all changes in browser.js.  The code I added is as follows:

function instrumentPageLoad(event) {
if (event.originalTarget instanceof HTMLDocument)
{
var doc = event.originalTarget; // doc is document that triggered
the event
var win = doc.defaultView; // win is the window for the doc

if (win != win.top) return; //only top window

var ioService = Services.io;
if (!ioService.offline)
{
BrowserOffline.toggleOfflineStatus();

const reloadFlags = nsIWebNavigation.LOAD_FLAGS_NONE;
   var webNav = getWebNavigation();
webNav.reload(reloadFlags);
}
else
{
BrowserOffline.toggleOfflineStatus();

// close command
self.close();
}

}
}

window.addEventListener("load", function () {
  gBrowser.addEventListener("load", instrumentPageLoad, true);
}, false);

Any suggestions on this?  I guess I have to play with the reload
flags?  I also tried the following to do reload:

gBrowser.loadURIWithFlags(doc.location.href,
 
nsIWebNavigation.LOAD_FLAGS_FIRST_LOAD,
                                  null, null, null);
But still didn't work.

Any suggestions will be appreciated!

Thanks,
Yuhao

WebPrintAPI Proposal

Julian Viereck — 2012-03-14T21:02:08

Hi, 

the PDF.JS team is dealing with printing support on the web. I looked at what's currently possible with the browser and shared some thoughts about it here: 

   https://gist.github.com/1953505#file_gistfile1.md

There are some comments on this G+ post:

        https://plus.google.com/u/0/115228539776721208421/posts/LbVDmfALeey

Based on that feedback, I've started on a new WebPrint API proposal, that you can find here: 

    https://wiki.mozilla.org/WebAPI/WebPrintAPI 

There isn't too much yet. So far I have scratched out the basic API and started some very basic implementation work. However, I hope this is enough to get some discussion about this proposed API going and I'd like to get some feedback what people think about it.

Best, 

Julian

PS: This API was proposed on the WebAPI mailing list. I was told to share the API proposal on this list as well as some layout people might have an opinion on this as well and don't follow the WebAPI mailing list.

Label inside a Legend as float

Sravan — 2012-03-07T04:44:53

Hi,

I am trying to understand "why" following two scenarios are rendered with
out any difference by Gecko.

Scenario 1:
Applying a float style on label that is placed inside a legend element of
Fieldset element.
<html>
<head>
<style type="text/css">
.radio {
float: left;
}
</style>
</head>
<body>
<form><fieldset><legend>
<label class="radio">
<input type="radio"/></label>
</legend></fieldset></form>
</body>
</html>


Scenario 2:

No style on label that is placed inside a legend element of Fieldset
element.

<html>
<body>
<form><fieldset><legend>
<label>
<input type="radio"/></label>
</legend></fieldset></form>
</body>
</html>

After analysis, i am left with few questions.
1. When float style is applied on label, should'nt it be treated as block
instead of inline(default)?
2. Is this is a special case, where can i find the logic to understand how
a float on label inside a legend element is laid out? i.e, reflow method.

I am actually trying to debug why webkit based browser does'nt really
render it correctly, where as mozilla does, I have done lots of debugging
on this, and have got some questions(like above) to get clarified before i
proceed further.

-Sravan.

query on table bordercolor attribute

KishoreGanesh B — 2012-03-01T06:02:37

Hi All,
Excuse me if this is not the right place to make this query.

I have a small query regarding the HTML table element's borderColor
attribute.
For table element, "borderColor" attribute works fine in firefox even
though it is not standardized in the HTML spec.
I am just wondering if there is any specific reason for maintaining this
attribute? Or would it be wiped out in upcoming releases?

*Example :*  <table id="4" border="5" borderColor="#00FF00"><tr><td >Some
Text</td></tr></table>

Thanks & Regards,
Kishore

Wiki Wednesday (HTML) - February 22, 2012

Sheppy — 2012-02-22T21:57:35

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

Thanks to Panagiotis Tsalaportas and Neil Rashbrook for their
contributions to our HTML content.

1) HTMLElement ( http://mzl.la/gVwGYR )
2) CanvasRenderingContext2D ( http://mzl.la/gzT9Pa )
3) link ( http://mzl.la/rG2hVW )

Wiki Wednesday (CSS) - February 22, 2012

Sheppy — 2012-02-22T21:53:31

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

Thanks to leeli and Panagiotis Tsalaportas for their contributions
since last time!

1) column-fill ( http://mzl.la/wRu8cY )
2) -moz-box-pack ( http://mzl.la/xQjoMS )
3) < at >page ( http://mzl.la/nn4i2G )

how to know when the page is done with loading?

Yuhao — 2012-02-16T16:05:51

Hi Al,

I want to figure out an automatic way to detect the page is done with
loading. The reloading button might be a good indicator I assume. It
has different appearances when loading a page and done with loading. I
am just wondering which variable and related code in the source file
is responsible for that button? Thanks!

Yuhao

Wiki Wednesday (HTML) - February 8, 2012

Sheppy — 2012-02-08T19:09:36

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

1) Drawing DOM objects into a canvas ( http://mzl.la/t0fiKV )
2) frameset ( http://mzl.la/vuoCKA )
3) Input.setSelectionRange ( http://mzl.la/otzqtD )

Wiki Wednesday (CSS) - February 8, 2012

Sheppy — 2012-02-08T18:57:50

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

1) transform ( http://mzl.la/o9jY90 )
2) box-orient ( http://mzl.la/jbytQl )
3) word-spacing ( http://mzl.la/ftAGQ5 )

Wiki Wednesday (HTML) - January 25, 2012

Sheppy — 2012-01-26T00:41:16

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

Thanks to Jens.B and tw2113 for contributing!

1) Historical artifacts to avoid ( http://mzl.la/vJZKyg )
2) meter ( http://mzl.la/iDsrSv )
3) bdo ( http://mzl.la/o2dZfX )

Wiki Wednesday (CSS) - January 25, 2012

Sheppy — 2012-01-26T00:38:30

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

Thanks to McGurk and cgack for their contributions.

1) unicode-bidi ( http://mzl.la/kWvRji )
2) background-repeat ( http://mzl.la/zmM754 )
3) -moz-user-modify ( http://mzl.la/f2tdjH )

detect change to offsetTop of span or div element

dedalus — 2012-01-17T21:54:33

I need to keep the top of a footnote span (or div) positioned to a
specific line in a multi-column layout, so that if the height of the
footnote changes, the span can be moved up or down  to that line,
enabling the content after the footnote to flow  to the next column.

Is there any event which would detect when an inline span, or a div,
has its offsetTop position in the document change as a result of any
editing operation (via keyboard or mouse). I'm thinking some kind of
mutation event or something in xpcom.

[css3-transitions] Need feedback / Performance / TransitionEvent types

Peta Byte — 2012-01-14T22:54:44

Hello everybody,

I'm composing an initial mail to the CSS specification mailing list in which I want to propose the introduction of an additonal TransitionEvent type ... for now I just call it 'transitionsend'. In contrast to the existing 'transitionend' event, my suggested one will be fired on an HTMLElement, once __all__ of its transitioned style properties have reached their final value.

Rationale
---
Today, most JS libraries that offer CSS-based tweening/animation functionality implement this by interval- or requestAnimationFrame-tiggered  (the latter not widely-spread yet) periodical function calls. One of the main reasons for using CSS3 Transitions is probably the better performance. Instead of executing a listener function hundred times or more for tweening an element style, the changes to style property values are calculated and applied by compiled lower-level code --  what leads to a far better overall performance.

In order to synchronize transitions (what actually is a core feature of every common JS library) or trigger further actions depending on an element's transition state, a script programmer only has one way to accomplish those tasks:

+ keep track of all style properties that are transitioned
+ listen to 'transitionend' and update a list of remaining properties
+ if list is empty (=all transitions have finished), trigger further actions

Due to this, the performance gain brought by CSS3 Transitions is almost completely re-consumed. So in the end, nothing (related to performance) has really changed.

The 'transitionsend' event I want to propose, circumvents this trap by simply being fired once all transitioned style properties have finished. 

I need your feedback
---
I guess that most readers of this mail are involved in the development of the style-system/CSSOM and thereby have deep insights into those parts of the code base that might be concerned by what I want to propose. So I ask you:

+ Are the assumptions I've made in my rationale correct (from and implementor's pov) ?
+ Given the sync use case above, in what magnitude would the performance gain be in?
+ What do you think about my suggestion?

Your feedback is very important to me.

Thanks in advance,

Peter

Wiki Wednesday (HTML) - January 11, 2012

Sheppy — 2012-01-12T01:04:19

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

Thanks to myakura for contributions!

1) Historical artifacts to avoid ( http://mzl.la/vJZKyg )
2) link ( http://mzl.la/rG2hVW )
3) Browser Detection and Cross Browser Support ( http://mzl.la/pjOPyB )

Wiki Wednesday (CSS) - January 11, 2012

Sheppy — 2012-01-12T01:01:17

Here are today's Wiki Wednesday articles! If you know about these
topics, please try to find a few minutes to look over these articles
that are marked as needing technical intervention and see if you can
fix them up. You can do so either by logging into the wiki and editing
the articles directly, or by emailing your notes, sample code, or
feedback to mdnwiki< at >mozilla.org.

Contributors to Wiki Wednesday will get recognition in the next Wiki
Wednesday announcement. Thanks in advance for your help!

1) :invalid ( http://mzl.la/sHcsan )
2) max-width ( http://mzl.la/m4CV8t )
3) Detecting device orientation ( http://mzl.la/oiWLRl )