1327894 - Some pseudoelements created in browser UI don't change their position until mouseover

Status: UNCONFIRMED

(Core :: Layout, defect, P3)

Description

[arni2033]

>>>   My Info:   Win7_64, Nightly 49, 32bit, ID 20160526082509
STR_1:
0. Open customize, set developer edition theme
1. Open new FF window, open 3 new tabs, close that window, reopen that window.   [to get pending tabs]
2. Open browser toolbox -> style editor, create new stylesheet with code [1]
3. Change "left:12px" to "left:11px" by editing one digit
4. Hover mouse over the 3rd, then 2nd, then 1st tab

AR:
 Step 3 - gray squares created in Step 2 all teleport to the top-left corner of each tab
 Step 4 - squares in 2nd and 3rd tabs teleport back to their places, square in 1st tab doesn't move
ER:
 Step 3 - Correct layout should be applied after Step 2, after Step 3, after Step 4.
         (ER assumes that correct layout doesn't depend on mouse activity)


STR_2:  (reference of good behavior)
1. Perform Steps 0-2 from STR_1
2. Un-comment line "/* border:1px solid black; /**/" in the stylesheet
3. Perform Step 3 from STR_1

AR:  All squares don't move, what means that new styling was applied immediately, just as expected
    (it doesn't matter that the new styling is equal to the old styling)


Note:
 I'm not sure if CSS is parsed correctly after STR_1 Step 2 and STR_1 Step 4. The layout may be wrong
 after both steps. Anyway, ER in STR_1 stays valid, as it expects everything to "work fine".
 Also, it may be a redraw issue. In any case, this seems to be "Core :: layout"


[1]
tab[pending] .tab-content::before {
  content:"";
  width:16px;
  height:16px;
  position:absolute;
  bottom:0px;
  top:auto;
  left:12px;
  background:gray!important;
  /* border:1px solid black; /**/
}