Example layout for input-protection directive.
An example illustrating layout and how the input-protection directive applies
to a click event targeting a protected region in an iframe for the policy
"Content-Security-Policy: input-protection tolerance=50; input-protection-clip before=60 after=60 above=60 below=60;"
The protected area implied by the input-protection directive, which is the intersection of
the protected resource's full canvas and the clipping rectangle around the event.
A rectangle showing the layout boundaries of the hostile embedding resource from "OriginX", its canvas is
500 pixels wide by 600 pixels tall, with an origin at 0 x and 0 y in the
root viewport.
OriginX resource, 500x600 @ 0,0
A resource in the iframe viewport from "OriginY" to which we will apply our input-protection directive.
Its canvas is 500 pixels wide by 450 pixels tall, beginning at 0 x and 0 y in the nested browsing
context coordinate system and at 100 x and 100 y in the root browsing context coordinate system.
It is partially shaded to indicate that the input-protection policy implies the entire resource.
OriginY protected resource,
500x450 @ 100,100
A div element in the protected resource, 450 pixels wide by 200 pixels high, with an origin at
110 x and 110 y in the root viewport coordinate system.
<div id=div1>, 450x200 @ 110,110
A div element in the protected resource, 450 pixels wide by 200 pixels high, with an origin at
110 x and 110 y in the root viewport coordinate system.
<div id=div2>, 450x200 @ 110,330
The root viewport of the topmost browsing context, 500 pixels wide by 500 pixels tall.
root viewport, 500x500 @ 0,0
An iframe viewport representing a nested browsing context created by the hostile resource
in the root browsing context. It is 100 pixels wide by 100 pixels tall, and begins at
100 x, 100 y in the root viewport coordinate system.
iframe viewport,
100x100 @ 100,100
A click event at 130 x, 130 y in the root viewport coordinate system, triggering an onClick handler
in div1.
The clipping rectangle around the event coordinates, 60 pixels before (left), after (right), above and below
130 x and 130 y in the root viewport's coordinate system.
clip before=60 after=60 above=60 below=60