Opened on 11/27/2018 at 10:17:14 AM

Closed on 11/29/2018 at 03:23:07 AM

Last modified on 04/23/2019 at 07:41:18 AM

#7137 closed change (fixed)

Implement hide-if-has-and-matches-style snippet

Reported by: mjethani Assignee: mjethani
Priority: P2 Milestone:
Module: Core Keywords:
Cc: arthur, hfiguiere, Ross Blocked By:
Blocking: Platform: Unknown / Cross platform
Ready: yes Confidential: no
Tester: Ross Verified working: yes
Review URL(s):

Description (last modified by mjethani)


This snippet should be similar to the hide-if-contains-and-matches-style snippet (#6919), except the first parameter should be a CSS selector. If an element has any descendants that match the CSS selector, it should be considered a candidate for being hidden.

What to change

Implement a snippet hide-if-has-and-matches-style with the following signature:

function hideIfHasAndMatchesStyle(search, selector = "*",
                                  searchSelector = null, style = null,
                                  searchStyle = null)

All the parameters except the first one should have the same meaning as in hide-if-contains-and-matches-style (#6919).

The first parameter, instead of being any arbitrary string or a regular expression, should be a CSS selector. If any element contains a descendant that matches the CSS selector, such that !!element.querySelector(search) is true, then it should satisfy the first condition. The rest of the semantics should be exactly as hide-if-contains-and-matches-style (#6919).

Hints for testers

Try this:

<!-- test.html -->
  Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor
  incididunt ut labore et dolore magna aliqua.
<script src="script.js"></script>
/* script.js */
setTimeout(() =>
  let ad = document.createElement("div"); = Math.random().toString(36).substring(2);
  ad.innerHTML = "<div><span>Check this!</span><span class='label'><a href='#ads'>Ad</a></span></div>";

  let result = document.createElement("div"); = Math.random().toString(36).substring(2);
  result.innerHTML = "<div><span>The Adventures of Tom Sawyer</span><span class='label' style='display: none'><a href='#ads'>Ad</a></span></div>";

The following filters, each one on its own, should hide the "Check this!" ad and not the "The Adventures of Tom Sawyer" content:

  • #$#hide-if-has-and-matches-style a[href="#ads"] div[id] span.label /./ 'display: inline;'
  • #$#hide-if-has-and-matches-style a[href="#ads"] div[id] span.label ';' /\\bdisplay:\ inline\;/

Attachments (0)

Change History (15)

comment:1 Changed on 11/27/2018 at 10:20:25 AM by mjethani

  • Review URL(s) modified (diff)

comment:2 Changed on 11/27/2018 at 10:22:59 AM by arthur

  • Cc arthur added

comment:3 Changed on 11/27/2018 at 10:26:43 AM by mjethani

  • Description modified (diff)

comment:4 Changed on 11/28/2018 at 08:20:17 AM by mjethani

  • Cc hfiguiere Ross added
  • Description modified (diff)

comment:5 Changed on 11/28/2018 at 08:39:22 AM by mjethani

  • Description modified (diff)
  • Status changed from new to reviewing

comment:6 Changed on 11/28/2018 at 08:39:44 AM by mjethani

  • Ready set

comment:7 Changed on 11/29/2018 at 03:22:16 AM by abpbot

A commit referencing this issue has landed:
Issue 7137 - Implement hide-if-has-and-matches-style snippet

comment:8 Changed on 11/29/2018 at 03:23:01 AM by mjethani

  • Owner set to mjethani

comment:9 Changed on 11/29/2018 at 03:23:07 AM by mjethani

  • Resolution set to fixed
  • Status changed from reviewing to closed

comment:10 Changed on 11/29/2018 at 10:36:52 AM by abpbot

A commit referencing this issue has landed:
Issue 7137 - Implement hide-if-has-and-matches-style snippet

comment:11 Changed on 12/03/2018 at 11:43:28 AM by Ross

This seems to be working as described. However I could not get the first filter example to work with the example given and cannot figure out why (or if it's an issue)...

Chrome 70 / 49 / Windows 10
Firefox 63 / 51 / Windows 10

comment:12 Changed on 12/03/2018 at 11:49:00 AM by mjethani

  • Description modified (diff)

comment:13 Changed on 12/03/2018 at 11:50:07 AM by mjethani

I missed the closing quote in that first filter. It should work now.

comment:14 Changed on 12/03/2018 at 12:25:24 PM by Ross

  • Tester changed from Unknown to Ross
  • Verified working set

Ah, thank you. This is fine then.

Chrome 70 / 49 / Windows 10
Firefox 63 / 51 / Windows 10

comment:15 Changed on 12/04/2018 at 10:00:31 AM by mjethani

  • Sensitive unset

Add Comment

Modify Ticket

Change Properties
as closed .
The resolution will be deleted. Next status will be 'reopened'.
to The owner will be changed from mjethani.
Note: See TracTickets for help on using tickets.