1481192 - Rules inspector does not show any styles for ::before and ::after pseudo elements with display: table

Status: RESOLVED FIXED

(DevTools :: Inspector: Rules, defect, P2)

Description

[Warren]

Attachment: before and after css styles bug in firefox developer edition.png

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:62.0) Gecko/20100101 Firefox/62.0
Build ID: 20180802174131

Steps to reproduce:

::before and ::after not showing up in styles window in developer tools in firefox developer edition - see screen shot

Comment 1

[Soledad Penades [:sole] [:spenades]]

Attachment: Screen Shot 2018-08-06 at 17.01.30.png

Comment 2

[Soledad Penades [:sole] [:spenades]]

Attachment: screenshot dev edition.png

Comment 3

[Soledad Penades [:sole] [:spenades]]

Hi Warren, thanks for filing the bug.

However, I am unable to reproduce this with a simple test case, here: https://codepen.io/yetanotheraccount/details/wxEMgB/

It works well both in Firefox Nightly and in Developer Edition. When I inspect the pseudo element, with the focus on it, I can see the specific style rules applied to the pseudo element.

It's hard to tell if the error is in our side or if the code you're inspecting in fact does not have style rules that apply to the pseudo element, so we're going to need some help from you to find out.

It looks like you are debugging a WordPress theme; is it a theme that is available to the general public or a private one? We need to try to reproduce your error, using the same code that you're inspecting.

Thanks

Comment 5

[Martin Balfanz [:mbalfanz]]

I can reproduce the error in both Nightly and Developer Edition for some pseudo elements, not all.

Example:
1. visit for example caniuse.com
2. search for any ".clearfix" element

Comment 6

[Martin Balfanz [:mbalfanz]]

(that was submitting my comment to fast 🙄)

I also adjusted your demo here: https://codepen.io/martinbalfanz/pen/zLJrbJ

I added an :after element which is somewhat like the clearfix example.  The :before works as expected, but the :after doesn't show styles.

Comment 7

[Soledad Penades [:sole] [:spenades]]

Right, I think it's the 'display: table' that makes the pseudo elements "lose" their CSS styles. As soon as you change any of the :before or :after to display: table, the Rules tab gets blank.

I updated the example to use display table on both pseudo elements for easier debugging: https://codepen.io/yetanotheraccount/full/wxEGJq

Comment 8

[Warren]

Attachment: test html for this issue

Comment 9

[Warren]

Attachment: test style.css for this issue

Comment 10

[Warren]

OK.  after reading all above here is what I did.  I have attached an html file that is the html I was testing (minus some stuff in the head that is not applicable).  I have also attached the css file that is used.  I still don't see the css for the ::before and ::after pseudo elements with this test file.

I have tried several other css styles ( i have a style as div::before {content: " ";display:table;} in the attached css file.  All the div's in the html have ::before pseudo elements in the html markup, yet they are not visible in the css inspector.  However, the css is being applied to the html.  The reason I stumbled onto this issue to start with is that I was creating some <li> elements inside a <div> that had the ::before pseudo element (ie the display:table) and when I put a list-style-type: square on the <li> elements, the "square" came out as a block element before the <li> (ie the "square" was on one line and the <li> element was underneath it on another line).  So seeing that the <div> had a ::before pseudo element, I click on it and there was nothing in the style inspector, so I scratched my head trying to figure out why the bullet was displaying as a block element. So even though the pseudo element does not show up in the styles inspector, it is applied.

Warren

Comment 11

[Brad Werth [:bradwerth]]

I'll take a look.

Comment 12

[Brad Werth [:bradwerth]]

Attachment: pseudo-after-table.html

Emilio, this simplified testcase shows the issue clearly. The ComputedStyle structures for display:table pseudo elements do not contain (or don't match) the rules that are used to style the pseudo elements. This can be verified using the devtools Inspector on the two pseudo elements in the attachment -- the first has rules and the second does not, though both are styled correctly.

How does the ComputedStyle structure generation work differently from the actual style traversal for these elements? All insights appreciated.

Comment 13

[Emilio Cobos Álvarez (:emilio)]

So what happens is that tables have a table wrapper frame, and we usually skip looking at it, but it seems we don't for pseudo-elements:

  https://searchfox.org/mozilla-central/rev/881a3c5664ede5e08ee986d76433bc5c4b5680e6/layout/style/nsComputedDOMStyle.cpp#587

I think the code above should be changed to do something like:

Element* element = nullptr;
if (aPseudo == before) {
  element = nsLayoutUtils::GetBeforePseudo(aElement);
} else if (aPseudo == after) {
  element = nsLayoutUtils::GetAfterPseudo(aElement);
} else if (!aPseudo) {
  element = aElement;
}

if (element) {
  if (nsIFrame* frame = element->GetPrimaryFrame()) {
    frame = nsLayoutUtils::GetStyleFrame(frame);
    // Do stuff..
  }
}

I think that should just fix it.

Comment 14

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9011621 [details]
pseudo-after-table.html

><style>
>#success:after {
>  display: block;
>  content: ":after display:block computedstyle has rules";
>  background: green;
>  width: 400px;
>}
>
>#failure:after {
>  display: table;
>  content: ":after display:table computedstyle does not have rules";
>  background: red;
>  width: 400px;
>}
></style>
>
><div id="success">success</div>
><div id="failure">failure</div>

Comment 15

[Brad Werth [:bradwerth]]

(In reply to Emilio Cobos Álvarez (:emilio) from comment #13)
> I think that should just fix it.

And it does, thank you.

Comment 16

[Brad Werth [:bradwerth]]

Attachment: Bug 1481192 Part 1: Change computed style to use correct pseudo element selection.

In order to handle nsTableWrapperFrames correctly, this code is changed
to use the code in nsLayoutUtils::GetBeforePseudo and ::GetAfterPseudo,
and then finding the styling frames from those elements.

Comment 17

[Brad Werth [:bradwerth]]

Attachment: Bug 1481192 Part 2: Add test of computedstyle for pseudo elements of varying display types.

Depends on D6730

Comment 18

[Brad Werth [:bradwerth]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=d8084cb8c05d7358a40d5eec3480a5cefa94e879

Comment 19

[Brad Werth [:bradwerth]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=d15b05e0c85b6a886bf5f2daeb7e3975484d4941

Comment 20

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9011642 [details]
Bug 1481192 Part 1: Change computed style to use correct pseudo element selection.

Emilio Cobos Álvarez (:emilio) has approved the revision.

Comment 21

[Emilio Cobos Álvarez (:emilio)]

Comment on attachment 9011643 [details]
Bug 1481192 Part 2: Add test of computedstyle for pseudo elements of varying display types.

Emilio Cobos Álvarez (:emilio) has approved the revision.

Comment 22

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2f0c8d5a75d6
Part 1: Change computed style to use correct pseudo element selection. r=emilio
https://hg.mozilla.org/integration/autoland/rev/7697665841ca
Part 2: Add test of computedstyle for pseudo elements of varying display types. r=emilio

Comment 23

[Raul Gurzau (:RaulG)]

Backed out 2 changesets (bug 1481192) for build bustages in workspace/build/src/layout/style/nsComputedDOMStyle CLOSED TREE

Backout link: https://hg.mozilla.org/integration/autoland/rev/e2c0039583fcd63d87540c4c8e31a7ef3446c025

Push with failures: https://treeherder.mozilla.org/#/jobs?repo=autoland&resultStatus=testfailed,busted,exception&revision=7697665841ca021ca5bced3ca3201d592aadf2b3

Log link: https://treeherder.mozilla.org/logviewer.html#?job_id=202281223&repo=autoland&lineNumber=26918

Log snippet: [task 2018-09-28T19:29:37.134Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.135Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.136Z] 19:29:37     INFO -  layout/painting
[task 2018-09-28T19:29:37.137Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.138Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.139Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.694Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/style'
[task 2018-09-28T19:29:37.695Z] 19:29:37     INFO -  /builds/worker/workspace/build/src/sccache2/sccache /builds/worker/workspace/build/src/clang/bin/clang++ --target=i686-linux-gnu -o Unified_cpp_layout_style3.o -c  -I/builds/worker/workspace/build/src/obj-firefox/dist/stl_wrappers -I/builds/worker/workspace/build/src/obj-firefox/dist/system_wrappers -include /builds/worker/workspace/build/src/config/gcc_hidden.h -DDEBUG=1 -DOS_POSIX=1 -DOS_LINUX=1 -DSTATIC_EXPORTABLE_JS_API -DMOZ_HAS_MOZGLUE -DMOZILLA_INTERNAL_API -DIMPL_LIBXUL -I/builds/worker/workspace/build/src/layout/style -I/builds/worker/workspace/build/src/obj-firefox/layout/style -I/builds/worker/workspace/build/src/obj-firefox/ipc/ipdl/_ipdlheaders -I/builds/worker/workspace/build/src/ipc/chromium/src -I/builds/worker/workspace/build/src/ipc/glue -I/builds/worker/workspace/build/src/layout/base -I/builds/worker/workspace/build/src/layout/generic -I/builds/worker/workspace/build/src/layout/svg -I/builds/worker/workspace/build/src/layout/xul -I/builds/worker/workspace/build/src/dom/base -I/builds/worker/workspace/build/src/dom/html -I/builds/worker/workspace/build/src/dom/xbl -I/builds/worker/workspace/build/src/dom/xul -I/builds/worker/workspace/build/src/image -I/builds/worker/workspace/build/src/obj-firefox/dist/include -I/builds/worker/workspace/build/src/obj-firefox/dist/include/nspr -I/builds/worker/workspace/build/src/obj-firefox/dist/include/nss -fPIC -DMOZILLA_CLIENT -include /builds/worker/workspace/build/src/obj-firefox/mozilla-config.h -Qunused-arguments -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2 -Qunused-arguments -Wall -Wempty-body -Wignored-qualifiers -Woverloaded-virtual -Wpointer-arith -Wshadow-field-in-constructor-modified -Wsign-compare -Wtype-limits -Wunreachable-code -Wunreachable-code-return -Wwrite-strings -Wno-invalid-offsetof -Wclass-varargs -Wfloat-overflow-conversion -Wfloat-zero-conversion -Wloop-analysis -Wc++1z-compat -Wc++2a-compat -Wcomma -Wimplicit-fallthrough -Werror=non-literal-null-conversion -Wstring-conversion -Wtautological-overlap-compare -Wno-inline-new-delete -Wno-error=deprecated-declarations -Wno-error=array-bounds -Wformat -Wformat-security -Wno-gnu-zero-variadic-macro-arguments -Wno-unknown-warning-option -Wno-return-type-c-linkage -D_GLIBCXX_USE_CXX11_ABI=0 -fno-sized-deallocation -march=pentium-m -msse -msse2 -mfpmath=sse -U_FORTIFY_SOURCE -D_FORTIFY_SOURCE=2 -fno-exceptions -fno-strict-aliasing -fno-rtti -ffunction-sections -fdata-sections -fno-exceptions -fno-math-errno -pthread -pipe -g -Xclang -load -Xclang /builds/worker/workspace/build/src/obj-firefox/build/clang-plugin/libclang-plugin.so -Xclang -add-plugin -Xclang moz-check -Os -fno-omit-frame-pointer -funwind-tables -Werror  -MD -MP -MF .deps/Unified_cpp_layout_style3.o.pp   /builds/worker/workspace/build/src/obj-firefox/layout/style/Unified_cpp_layout_style3.cpp
[task 2018-09-28T19:29:37.695Z] 19:29:37     INFO -  In file included from /builds/worker/workspace/build/src/obj-firefox/layout/style/Unified_cpp_layout_style3.cpp:11:
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -  /builds/worker/workspace/build/src/layout/style/nsComputedDOMStyle.cpp:589:17: error: unused variable 'primaryFrame' [-Werror,-Wunused-variable]
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -        nsIFrame* primaryFrame = element->GetPrimaryFrame();
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -                  ^
[task 2018-09-28T19:29:37.696Z] 19:29:37     INFO -  1 error generated.
[task 2018-09-28T19:29:37.697Z] 19:29:37     INFO -  /builds/worker/workspace/build/src/config/rules.mk:1129: recipe for target 'Unified_cpp_layout_style3.o' failed
[task 2018-09-28T19:29:37.697Z] 19:29:37     INFO -  make[4]: *** [Unified_cpp_layout_style3.o] Error 1
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/style'
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: *** Waiting for unfinished jobs....
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.698Z] 19:29:37     INFO -  make[4]: Leaving directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'
[task 2018-09-28T19:29:37.702Z] 19:29:37     INFO -  make[4]: Entering directory '/builds/worker/workspace/build/src/obj-firefox/layout/painting'

Comment 24

[Brad Werth [:bradwerth]]

These are C++ linting failures not caught in my local rebuild after making requested review changes. I'll fix and re-push soon.

Comment 25

[Brad Werth [:bradwerth]]

https://treeherder.mozilla.org/#/jobs?repo=try&revision=8ba6d6cd1f44b07f72f3e6e8668bbb7edc781e90

Comment 26

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/2eec9b638d54
Part 1: Change computed style to use correct pseudo element selection. r=emilio
https://hg.mozilla.org/integration/autoland/rev/895b156fc23c
Part 2: Add test of computedstyle for pseudo elements of varying display types. r=emilio

Comment 27

[Arthur Iakab [arthur_iakab]]

https://hg.mozilla.org/mozilla-central/rev/2eec9b638d54
https://hg.mozilla.org/mozilla-central/rev/895b156fc23c

Comment 28

[sdk]

This bug exists in v63.0.1