How to test @media print with protractor or seleni

Question

I've implemented an print functionallity at my site, and I would like to test it via protractor / selenium.

There is any method to "apply" the styles that are under @media print during the test?

I saw only one relevant question, but it without any good answer.

For example at that sample I would like to the #hidden div will be shown during the test.

.print-only {
  display: none;
}

@media print {
  .print-only {
    display: block;
  }
}

<div id="hidden" class="print-only">Will be shown when printing</div>

Answer 1

One option that I've found is to split all the "print" css into a separate file, and load it via link tag with media="print".

<link rel="stylesheet" type="text/css" href="print.css" media="print">

Meaning not to use media query inside large css file at all.

That way will allow me to change the media="print" attribute during test to all via executeScript.

Hope it will help someone.