# Visible Layer [`visible_layer_rect`](https://source.chromium.org/chromium/chromium/src/+/main:cc/layers/draw_properties.h;l=52;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) is one of the values in [DrawProperties](https://source.chromium.org/chromium/chromium/src/+/main:cc/layers/draw_properties.h;l=19;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) which works as a container of the properties used to compute how to draw. `visible_layer_rect` is a rectangle area which describes a bounding box around the visible layer area within the layer's coorinate space. This is just a visible area while [`visible_drawable_content_rect`](https://source.chromium.org/chromium/chromium/src/+/main:cc/layers/draw_properties.h;l=56;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) shows the rectangle area which actually shows the image. ## Overview Each properties are handled as a tree. There are ClipTree, TransformTree and so on. One tree per one property. This is often applies to whole tree and the parent effect will often be propagated to its children, but the logic differs depending on what property you are looking at. Therefore, the property tree is separate for each property. ## How to compute [ComputeDrawPropertiesOfVisibleLayers](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=1280;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) shows the logic how to compute the visible drawable rect. This method receives [LayerImplList](https://source.chromium.org/chromium/chromium/src/+/main:cc/layers/layer_collections.h;l=22;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4), a vector of [LayerImpl](https://source.chromium.org/chromium/chromium/src/+/main:cc/layers/layer_impl.h;l=71;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4), and [PropertiTrees](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/property_tree.h;l=707;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) which holds many trees for each properties such as ClipTree, EffectTree, ScrollTree and TransformTree. Inside [ComputeDrawPropertiesOfVisibleLayers](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=1280;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4), it runs through LayerImplList and gather [clip_rect and visible rects](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=1329-1337;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) data. Clip rect is calculated by [LayerClipRect](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=755;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) which takes the same param as [ComputeDrawPropertiesOfVisibleLayers](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=1280;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4). Inside it, [ComputreAccumulatedClip](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=229;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) calculates the clip rect from ClipTree and EffectTree. It's a accumulated clip rect value, so it takes a look on parent chain where [`parent_chain`](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=252;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) is a stack of ClipNode. The clip data [ConditionalClip](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/clip_node.h;l=20;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) consists of 2 values: `is_clipped` implies whether it should be clipped and `clip_rect` implies the rect to clip if is_clipped is true. On the other hand, [LayerVisibleRect](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=701;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) calculates the visible rect. Visible rect calulcation uses clip rect info as well. First it checks [layer->bounds()](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=717;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4). Then check [AccumulatedClip](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=722;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) and if `is_clipped` is false, we can simply use `layer->bounds()` value as a visual rect. If not, we clip by `clip_in_layer_space` which is a clip rect transformed into the local coordinates and then returns the intersection with `layer_content_rect`. Now, we can calculate `visible_drawable_content_rect` with calculated [visible_layer_rect](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=1344;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4). It's calculated by [LayerDrawableContrentRect](https://source.chromium.org/chromium/chromium/src/+/main:cc/trees/draw_property_utils.cc;l=557;drc=42f0b9c4f60f67676d9096b3e94df9fd47f568f4) using the layer list, layer_bounds_in_target_space and clip_rect. It simply applies the clip to the layer bounds.