1

Some elements establish a new block formatting context, depending on whether they meet certain conditions. Understanding this is quite important to be able to use floats correctly in CSS, among other things.

I would like a tool to see whether a given element does establish a new block formatting context. An additional line of text in the inspector tool of Firefox like this would be ideal: Apparently, a tool like this does not exist.

Mock-up

If since something like this doesn't already exist in a browser, I would like to develop an extension that does this myself, and to do that, I will need to be able look at each element using Javascript. Is there a DOM API call that will tell me whether a certain element establishes a new block formatting context? Something like this would be ideal:

var res = doesElementEstablishNewBlockFormattingContext(document.getElementById("foo"));

If not, I could check with Javascript whether all the conditions are met, but that would be a last resort.

TLDR: Is there already a tool or extension or an API call that will tell me if an an element establishes a new block formatting context?

Flimm
  • 136,138
  • 45
  • 251
  • 267
  • I think you can make a JS snippet and use it as a bookmarklet, this way: http://code.tutsplus.com/tutorials/create-bookmarklets-the-right-way--net-18154 – Giacomo Paita Jun 12 '15 at 10:50
  • @GiacomoPaita: I know, but I'm missing the crucial bit of Javascript that can tell me whether an element forms a new block formatting context. – Flimm Jun 12 '15 at 11:01
  • Start making the demo – Giacomo Paita Jun 12 '15 at 11:02
  • 1
    Given that [the page you link to](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Block_formatting_context) has the steps listed to determine whether or not a new context is established, but _doesn't_ have a handy link to an existing function, I would be willing to bet such a standard API doesn't exist. Shouldn't be hard to write a function based on those steps though. – James Thorpe Jun 17 '15 at 15:05
  • Your TL;DR section makes this look like a tool recommendation question. – apaul Jun 17 '15 at 15:45
  • @apaul34208: I see what you mean, but the question is asking whether such a thing exists rather then asking for a recommendation among many tools, so I thought it would be OK. Ideally, it would be in a browser's shipped dev tools. – Flimm Jun 17 '15 at 15:50
  • OK, fine, I've edited the question to edit out the request for whether a tool like this exists, and I'll set a bounty again. I still think that I was in the spirit of the on-topic rules, this question was not going to attract spam or a load of opinionated recommendations. – Flimm Jun 18 '15 at 08:53
  • Wow, it turns out Stack Exchange does not notify you when your question gets closed! Here's the meta post: http://meta.stackexchange.com/q/93842/162948 – Flimm Jun 18 '15 at 09:12
  • I like this question, why was it closed? – Marvin Xu Mar 29 '22 at 07:40

2 Answers2

2

Something like this, but not exactly this, exists in Internet Explorer. As a proprietary part of the IE rendering engine the hasLayout property is used. It corresponds, roughly, to the creation of a new block formatting context.

console.log(document.getElementById("id").currentStyle.hasLayout) will show you what IE thinks. Read this blog post for more information.

Aside from that, there are some interesting suggestions in previous questions like this one, discussing what I think is roughly the same problem.

Community
  • 1
  • 1
Sam
  • 8,330
  • 2
  • 26
  • 51
1

Based on the rules provided by the link in your question, you could write your own function for this:

function doesElementEstablishNewBlockFormattingContext(element) {
    var elementStyle = getComputedStyle(element);

    return elementStyle.getPropertyValue('float') != 'none' ||
        ['absolute', 'fixed'].indexOf(elementStyle.getPropertyValue('position')) !== -1 ||
        ['inline-block', 'table-cell', 'table-caption', 'flex', 'inline-flex'].indexOf(elementStyle.getPropertyValue('display')) !== -1 ||
        elementStyle.getPropertyValue('overflow') != 'visible';
}

See http://jsfiddle.net/4ccbsgs5/

sroes
  • 14,663
  • 1
  • 53
  • 72