Bug 250685

Summary: Safari does not respect width media query for printed media
Product: WebKit Reporter: Ken <ken.sugiura>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal CC: ian, karlcow, koivisto, richard_robinson2, simon.fraser, webkit-bug-importer, webkit, zalan
Priority: P2 Keywords: BrowserCompat, InRadar
Version: Safari 15   
Hardware: Mac (Apple Silicon)   
OS: macOS 11   
See Also: https://bugs.webkit.org/show_bug.cgi?id=63575
Bug Depends on: 15548    
Bug Blocks:    

Description Ken 2023-01-16 12:31:14 PST 
Tested on Safari Version 15.0 (16612.1.29.41.4, 16612)

Issue:
Safari does not respect min-width, max-width or other size-based media queries for printed media. Instead, Safari is triggering size-based media queries based on the size of the browser window, rather than the size of the printed page. This is inconsistent with how other browsers behave and does not comply with the spec (https://www.w3.org/TR/mediaqueries-3/#width).

Steps to reproduce:
1. Open the example page (linked below) in Safari.
2. Resize the browser window until it is small enough that both boxes are black. Open the print dialog and you will see two black boxes in the print preview.
3. Resize the browser window until it is wide enough that one of the boxes becomes red. Open the print dialog and you will see two red boxes in the print preview.

Expected behavior:
If printing on US letter portrait, both boxes should be black. If printing on US letter landscape, both boxes should be red. The size of the browser window should not have any effect on the print version.


Minimal Reproducible Example:
https://codepen.io/ksugi/full/RwBZXLw
Comment 1 Karl Dubost 2023-01-16 15:43:18 PST 
In https://www.w3.org/TR/mediaqueries-3/#width
> For paged media, this is the width of the page box (as described by CSS2, section 13.2 [CSS21]).

-> https://www.w3.org/TR/CSS22/page.html


There is also orientation and I do not have the feeling this is working either. 

```
@media print and (orientation: landscape) {
  .box2 {
    border-color: #f00;
  }
}
```

In https://w3c.github.io/csswg-drafts/mediaqueries/#orientation

and this 

```
@media print and (min-width: 21.1cm) {
  @page {
    size: A4 landscape;
  }
  .box2 {
    border-color: #f00;
  }
}
```


it has an effect but not on changing the orientation in the print menu. 


I wonder if the Print menu of the OS communicates back the change of layout to WebKit.
Comment 2 Radar WebKit Bug Importer 2023-01-23 12:32:19 PST 
<rdar://problem/104568712>