Calculated styles
In order for the browser to achieve this amalgamation of visual styling, the rendering model had to be changed. So browsers went from operating with the actual style-sheet as you defined it, to having something called a 'calculated style sheet'. This is a style-sheet that the browser constructs in memory based on what you have selected into the elements. So where your style-sheet contains definitions of various things like border, backgrounds, gradients and so on - the calculated style-sheet contains the browsers amalgamation of the selected styles for an element.
So if you select two styles into an element that looks like this:
.MyBorder {
border-color: #FF0000;
border-width: 2px;
}
.MyBackground {
background-color: #FF00FF;
}
The browser will merge those together and keep this in the calculated style-sheet:
.ActualStyle {
border-color: #FF0000;
border-width: 2px;
background-color: #FF00FF;
}
This massive change meant that JavaScript developers who wanted to work with element properties directly suddenly had to read values from the calculated style-sheet, but write changes to the ordinary element properties. The browser is quite clever about merging styles -so if you have two values that overlap, like say two border sizes that are slightly different, it can calculate a value between these to compromise. This caused all sorts of difficulties for developers because suddenly there was no guarantee that what you defined was what you got.
That different browser vendors operated with slightly different algorithms for this 'compromise' didn't help things either.
The only way to get things right from a JavaScript developers point of view, is to read from the calculated style-sheet and write to the ordinary element properties. When you inspect the runtime-library you will come across this quite often in TQTXWidget. We read common properties like left, top, with and height (and many others) purely from the calculated style-sheet, but we write values directly to the element (e.g self.Styles.left := fLeft).