WEB / WEB-10.02

HTML’den DOM, layout ve paint’e

Source text’in DOM,styles,geometry ve frame artifacts’a nasıl dönüştüğünü normal bir fixture ile izle.

CORE · RED · BLUE · ARTIFACT · PRACTICE

Hareket olmadan bütün senaryoları oku

Visible note

Authored source
Normal HTML/CSS text’i hazırdır; henüz parser çıktısı veya box ölçüsü yok.
HTML + CSS source
Atlas & Web
DOM + CSSOM
DOM: absent
Layout + draw input
Boxes: absent
Frame presentation
Frame: absent
DOM constructed
Parser char reference’ı text’e çevirir; hidden node da Document’te kalır.
HTML + CSS source
Source retained
DOM + CSSOM
note: Atlas & Web; hidden present
Layout + draw input
Boxes: pending
Frame presentation
Frame: absent
Styles resolved
Seçilmiş note style’ı block’tur; computed color authored source’dan ayrı kayıttır.
HTML + CSS source
Source retained
DOM + CSSOM
DOM + selected CSSOM rules
Layout + draw input
note: block; layout pending
Frame presentation
Frame: absent
Geometry available
Sabit border-box 120×24 CSS px olarak gözlenir. Bu ölçüm, paint capture değildir.
HTML + CSS source
Source retained
DOM + CSSOM
note text unchanged
Layout + draw input
note box:120×24 CSS px
Frame presentation
Frame: absent
Painting dependency
Layout bilgisi çizim için input olabilir; display-list bytes’ları burada capture edilmez.
HTML + CSS source
Source retained
DOM + CSSOM
DOM unchanged
Layout + draw input
Draw input selected; no capture
Frame presentation
Frame: pending
Frame boundary
Frame presentation ayrı iştir; model pixels veya gerçek GPU çıktısı üretmiş sayılmaz.
HTML + CSS source
Source retained
DOM + CSSOM
DOM unchanged
Layout + draw input
Geometry retained
Frame presentation
Frame candidate; pixels unmeasured

Hidden vs reserved

Normal source
Hidden ve reserved node’ları source’da vardır; hiçbiri server access kararı değildir.
HTML + CSS source
hidden + reserved source
DOM + CSSOM
DOM: absent
Layout + draw input
Boxes: absent
Frame presentation
Frame: absent
Both nodes retained
Parsing iki node’u da oluşturur; CSS display kararı DOM identity’yi silmez.
HTML + CSS source
Source retained
DOM + CSSOM
hidden + reserved nodes present
Layout + draw input
Styles pending
Frame presentation
Frame: absent
Different visibility rules
Hidden display:none, reserved visibility:hidden olur; kurallar aynı etkiyi üretmez.
HTML + CSS source
Source retained
DOM + CSSOM
Nodes present; styles resolved
Layout + draw input
hidden:none; reserved:hidden
Frame presentation
Frame: absent
Different box observations
Hidden rect 0×0 olur; reserved 80×12 kalır. Box’ın bulunması, text’in görünür olduğu anlamına gelmez.
HTML + CSS source
Source retained
DOM + CSSOM
Nodes still present
Layout + draw input
hidden:0×0; reserved:80×12
Frame presentation
Visible text from these nodes: none
Boundary retained
Görünmeyen data Document’te kalabilir; client style teslim edilen data’yı geri almaz.
HTML + CSS source
Source retained
DOM + CSSOM
Data present in DOM
Layout + draw input
Reserved space remains
Frame presentation
Pixels not captured

DOM text update

Source retained
Source Atlas & Web taşır; normal parser sonucunda text Atlas & Web olur.
HTML + CSS source
Atlas & Web
DOM + CSSOM
note: Atlas & Web
Layout + draw input
note:120×24
Frame presentation
Frame: not captured
Text API selected
Local textContent update için yeni plain text seçilir; network request yaratılmaz.
HTML + CSS source
Source unchanged
DOM + CSSOM
Pending: Atlas — revised
Layout + draw input
Geometry not yet reobserved
Frame presentation
Frame: not captured
Current DOM changed
note current text’i revised olur; server dosyası ve original response değişmez.
HTML + CSS source
Source unchanged
DOM + CSSOM
note: Atlas — revised
Layout + draw input
Style dimensions unchanged
Frame presentation
Frame: pending
Geometry reread
Sabit 120×24 box yeniden gözlenebilir; text değişikliği, frame’in sunulma zamanını ölçmez.
HTML + CSS source
Source unchanged
DOM + CSSOM
Current DOM revised
Layout + draw input
note:120×24 CSS px
Frame presentation
Pixels still unmeasured
Separate persistence gate
Client text update tamamdır; database commit veya save request bu branch’te yoktur.
HTML + CSS source
Original source retained
DOM + CSSOM
Local update complete
Layout + draw input
Fixed geometry retained
Frame presentation
Server persistence not claimed

ROLLER · STATE · VERİ AKIŞI

HTML bytes henüz DOM değildir

Network’ten gelen response body’nin charset bilgisi ve decoding sonucu parser’a bir character stream sağlar. Tokenizer tag, text ve comment gibi tokens üretir; tree construction bu tokens ile Document’i kurar. TCP segment veya HTTP DATA frame sınırı DOM node sınırı değildir. Tek bir p tag’i birkaç network parçasından gelebilir; bir parça da birçok element’i içerebilir.

Defterdeki <p id="note">Atlas & Web</p> source’u bu ayrımı küçük bir örnekte gösterir. DOM’daki text “Atlas & Web” olur; source içindeki character reference aynı yazımı korumaz. Parser çıktısını görmek, özgün response bytes’ını aynen geri elde etmek değildir. Bu ders HTML decoding’ın bütün charset ayrıntılarını veya streaming parser’ın her state’ini simüle etmez; selected normal input’un veri katmanlarını ayırır.

Tree construction bir string copy değildir

HTML parsing kuralları eksik veya hatalı markup için tanımlı davranışlar içerir. Document’e html/head/body gibi implied structure eklenebilir; table içindeki tr için source’da yazılmamış bir tbody oluşabilir. Bu nedenle View Source ile Elements panelindeki tree farklı görünebilir. Element seçerken görsel girintiyi değil parent/child ilişkisini takip et.

Normal table fixture <table><tr><td>Atlas</td></tr></table> içinde tbody source’da yoktur; parser’ın oluşturduğu table.firstElementChild TBODY olur. Buradan her invalid markup’ın uygulama için güvenli olduğu sonucu çıkmaz. Parse error handling yapıyı açıklayan bir platform kuralıdır; input trust, application validation ve output context başka sorulardır. Burada malformed attack string veya parser farkını kullanan workflow verilmez.

DOM bir canlı data model’idir

DOM, Document ve node’ları bir tree üzerinden programlara sunan platform model’idir. JavaScript bu modele erişebilen bir dildir; DOM JavaScript syntax’ının kendisi değildir. Node’ların identity’si, attributes ve current text’i vardır. Response source sabit kalsa bile script bu current state’i değiştirebilir. Bir element’i saklayan referans, onun source dosyasında tekrar yazıldığı anlamına gelmez.

Native fixture note.textContent değerini “Atlas — revised” yapar. Bu local işlem node’un text children’ını değiştirir; network response’u veya server’daki dosyayı değiştirmez. Scene’de DOM kartı revised olurken source kartı aynı kalır. Değişikliğin client’ta görünmesi persistent business state’in kaydedildiğini de kanıtlamaz; save request ve server commit ayrı derslerin konusudur.

CSSOM ile computed style farklı kayıtlar

CSS parsing stylesheet kurallarını platform objects olarak erişilebilir hâle getirir. CSSOM’dan okunan authored rule ile bir element’e uygulanan resolved/computed style birebir aynı kayıt değildir. Selector matching, cascade, inheritance ve layout’a bağlı resolved values bu farkta rol oynar. getComputedStyle çıktısını özgün CSS source’u diye sunma; burada yalnız seçilmiş width/height/color/display/visibility değerleri okunur.

Fixture’da #note rule’u 120px width ve 24px height verir; border-box, padding ve border olmadığı için ölçüm de bu boyutlarla eşleşir. #hidden display:none olur. #reserved visibility:hidden olsa da box’ı yer kaplar. Bunlar farklı UI davranışlarıdır: document tree’de bulunmak, layout box’a sahip olmak ve ekranda painted content oluşturmak ayrı özelliklerdir.

Render tree bir öğretim kısaltmasıdır

DOM ile styles’tan görünür sonuç üretmek için browser layout ve painting data structures kurar. “Render tree” bu ilişkiyi anlatan genel öğretim terimidir; bütün browser’larda tek isimli, DOM ile birebir node eşleşen bir public API tree değildir. Chromium RenderingNG bunu fragment tree, property trees, display lists ve compositor frames gibi farklı artifacts ile açıklar.

Bu yüzden DOM’da bulunan hidden p’nin normal layout box üretmemesi şaşırtıcı değildir. Pseudo-elements, anonymous boxes ve text shaping gibi işler de basit DOM=boxes eşitliğini bozar. Model sadece note, hidden ve reserved’ın seçilmiş özelliklerini tutar. Accessibility tree ayrı bir data model’idir; bu fixture’ın node/box gözlemi bütün erişilebilirlik davranışını test etmiş sayılmaz.

Layout, paint ve frame presentation

Layout boyut ve konum ilişkilerini çözer. Paint çizim talimatlarını üretir; raster bu talimatları pixels/tiles’a dönüştürür; compositing ve draw bunları frame olarak birleştirip sunar. Chromium’da bu işler farklı stages/threads arasında paylaşılır ve gerekmediğinde bazı stages atlanabilir. Her CSS değişikliğini zorunlu tam bir “reflow-repaint” zinciri gibi anlatmak yanıltıcıdır.

getBoundingClientRect, geometric border-box gözlemidir; paint capture değildir. Note için width 120 sonucu almak, text’in screenshot’ta nasıl çizildiğini kanıtlamaz. Sahnenin son aşaması “frame candidate; pixels not captured” der. Animasyon gerçek browser rendering pipeline’ını ölçmez; bilgi akışını state değişiklikleriyle açıklar. Motion kapalıyken de hangi sonucun henüz oluşmadığı okunabilir.

Hareket olmadan bütün senaryoları oku

Hidden data

Hidden node source ve DOM kaydında seçildi
Source hidden id’sinde Draft text’i taşır; CSS display:none seçer. hiddenNodePresent true’dur. Element’in box üretmemesi, data’nın client DOM’una ulaşmadığı anlamına gelmez.
Source/DOM record
Draft node present / display:none
Interpretation/visibility
Interpretation bekliyor
Data/presentation boundary
Verdict yok
Display control server policy yerine geçmedi
hiddenWidth ve hiddenHeight 0’dır; görünürlük layout koşuludur. Server’ın vermemesi gereken private data client CSS ile korunamaz. Data delivery kararı server’a, box üretimi client’a aittir.
Source/DOM record
Draft node present / display:none
Interpretation/visibility
Box0×0 / node still present
Data/presentation boundary
Verdict yok
Invisible sonucu access deny sayılmadı
Draft burada benign örnek text’tir; gerçek private disclosure iddiası yoktur. Mekanizma sınırı nettir: görünmemek ile teslim edilmemek farklıdır. Bir invisible UI sonucundan object authorization hesaplandığı çıkarılmaz.
Source/DOM record
Draft node present / display:none
Interpretation/visibility
Box0×0 / node still present
Data/presentation boundary
Visibility hidden / access policy unmeasured
Reserved box farklı CSS koşuluyla karşılaştırıldı
reserved visibility:hidden taşır; width 80 ve height 12 CSS px kalır. display:none ile visibility:hidden aynı geometry sonucu değildir. İki element’in görünmemesi ikisinin de DOM veya layout’tan çıkarıldığını göstermez.
Source/DOM record
Reserved hidden / box80×12
Interpretation/visibility
Box0×0 / node still present
Data/presentation boundary
Visibility hidden / access policy unmeasured
Visibility effect kendi measurement scope’unda kaldı
CSS sabit dimensions, margin/padding/border 0 ve border-box kullanır. Bu seçilmiş geometry font, viewport veya device pixel ratio için genel pixel-perfect garanti vermez. Box presence paint capture değildir.
Source/DOM record
Reserved hidden / box80×12
Interpretation/visibility
CSS-pixel geometry only / paint unmeasured
Data/presentation boundary
Visibility hidden / access policy unmeasured
Control hedefi delivered data’da kaldı
Private data’nın verilmemesi gerektiğinde kontrol response policy’dedir. UI state için visibility ve layout ayrıca test edilir. DOM presence, geometry ve screenshot kanıtları ayrı tutulunca yanlış protection varsayımı önlenir.
Source/DOM record
Reserved hidden / box80×12
Interpretation/visibility
CSS-pixel geometry only / paint unmeasured
Data/presentation boundary
Protect delivery server-side / inspect visibility separately

Source/live DOM

Original source character reference’ıyla saklandı
note source’unda Atlas & Web yazılıdır. Parsed DOM text’i Atlas & Web olur. Source bytes ile parser’ın oluşturduğu text aynı representation değildir; original response body diye current DOM serialization raporlanmaz.
Source/DOM record
Source & / parsed text &
Interpretation/visibility
Interpretation bekliyor
Data/presentation boundary
Verdict yok
Text update yeni network response sayılmadı
Expected revisedNoteText Atlas — revised’dır. Bu normal local text update current DOM’u değiştirir; source snippet değişmiş veya response yeniden gelmiş olmaz. Plain text için textContent, data’yı text context’inde işler.
Source/DOM record
Source & / parsed text &
Interpretation/visibility
Current text Atlas — revised / source retained
Data/presentation boundary
Verdict yok
Parser başarısı sanitization claim’i olmadı
HTML parser’ın normal source’u tree’ye çevirmesi authorization veya sanitization kanıtı değildir. Text API seçimi bu update’in interpretation context’ini açık tutar; bütün markup features için güvenlik garantisi sağlamaz.
Source/DOM record
Source & / parsed text &
Interpretation/visibility
Current text Atlas — revised / source retained
Data/presentation boundary
Text context explicit / broader markup policy separate
Implied table node source farkını açıkladı
parserFixture table içinde tr ve td taşır; expected impliedTableChild TBODY’dir. Source’da yazılmayan parser-created node normaldir. Tree farkını tek başına application tampering veya yeni network content diye etiketlemek yanlıştır.
Source/DOM record
Source table/tr / parsed table/TBODY
Interpretation/visibility
Current text Atlas — revised / source retained
Data/presentation boundary
Text context explicit / broader markup policy separate
State provenance snapshot’larla korundu
Source, parsed DOM ve script sonrası current DOM ayrı snapshots olarak karşılaştırılır. Local DOM stage’lerine HTTP packet çizilmez. Hangi state’in nerede değiştiği bilinirse response evidence ile UI evidence karışmaz.
Source/DOM record
Source table/tr / parsed table/TBODY
Interpretation/visibility
Source→parsed DOM→local update, distinct snapshots
Data/presentation boundary
Text context explicit / broader markup policy separate
Source review pixel veya authorization verdict’i olmadı
Bu example text ve tree interpretation’ı açıklar. Paint, GPU veya accessibility tree’nin bütünü ölçülmez. Correct DOM text, server resource grant’i veya bütün devices’ta aynı rendered pixels anlamına gelmez.
Source/DOM record
Source table/tr / parsed table/TBODY
Interpretation/visibility
Source→parsed DOM→local update, distinct snapshots
Data/presentation boundary
Provenance known / pixels-authz unmeasured

VARSAYIM · SINIR · KONTROL

Source ve current DOM’u aynı delil yapma

Yetkili bir incelemede source snippet, parsed DOM ve script sonrası DOM ayrı snapshots olarak kaydedilir. note source’unda Atlas & Web varken current text’in Atlas — revised olması beklenen bir local update olabilir. Current DOM serialization’ını original response body adıyla raporlamak data provenance’ı kaybettirir. Buradaki artifact source ve final text’i yan yana tutar.

Üç küçük tahmin çalış: parser table’a hangi child’ı ekler, display:none element DOM’da kalır mı, visibility:hidden box ölçüsü sıfır olmak zorunda mı? Bu normal input soruları content interpretation’ı anlamaya yöneliktir. Bir element’in görünmemesini otomatik access-control kararı sayma; server o data’yı response’a koyduysa client’taki CSS ayrı bir görünürlük kararıdır.

Geometric ölçümün sınırını koru

Bir browser testinde width/height değeri normal fixture’ı doğrulayabilir; bütün cihazlarda pixel-perfect sonuç kanıtlamaz. Font, viewport, zoom ve device pixel ratio’nun farklı etkileri vardır. Bu dersin dimensions’ı fixed CSS pixels olarak seçilmiştir; text’in line break veya glyph metrics’i bir baseline gibi uydurulmaz.

Frame pipeline’ın local stages’ına network packet çizme. Bir DOM text update’i response’un tekrar geldiği anlamına gelmez; bir display-list handoff da HTTP değildir. İnceleme sonucunda “DOM’da var”, “box ölçüsü var” ve “görselde görünür” ifadelerini ayrı kullan. Böylece bir UI bulgusu hangi katmana ait olduğunu kaybetmez.

Hareket olmadan bütün senaryoları oku

Geometry ledger

Parsed text ve parser node ayrı seçildi
Artifact authored HTML/CSS ile expected API sonuçlarını yan yana saklar. Yeni browser gözleminde parser DOM text ve TBODY’yi, getComputedStyle style değerlerini, getBoundingClientRect ise CSS px box ölçülerini üretir. expected alanını böyle bir ölçüm yerine koyma; boyut ölçümü screenshot veya paint receipt’i de sağlamaz. Expected parsedNoteText Atlas & Web ve impliedTableChild TBODY’dir. Bu iki invariant text decoding ile tree construction’ı ayrı kontrol eder. Original source’da TBODY aramak parser’ın normal eklediği node’u gözden kaçırır.
DOM/CSS ledger
Text Atlas & Web / implied TBODY
Invariant comparison
Interpretation bekliyor
Evidence verdict
Verdict yok
Fixed note box CSS units ile karşılaştırıldı
Note box expected width 120 ve height 24 CSS px’tir; color rgb(15, 118, 110) olur. Padding ve border 0’dır. CSS px değeri device pixels veya screenshot’daki glyph ölçüsü olarak yeniden adlandırılmaz.
DOM/CSS ledger
Text Atlas & Web / implied TBODY
Invariant comparison
Note120×24 CSS px / color known
Evidence verdict
Verdict yok
İki hidden koşulu karşılaştırma tablosuna alındı
hidden DOM’da kalır fakat box 0×0’dır. reserved visibility hidden ile 80×12 box korur. Bu normal negative controls, visible text yokluğu ile layout participation’ın aynı ölçü olmadığını gösterir.
DOM/CSS ledger
Hidden0×0 / reserved80×12 / both nodes retained
Invariant comparison
Note120×24 CSS px / color known
Evidence verdict
Verdict yok
Local update invariant’ı source’la karıştırılmadı
revisedNoteText Atlas — revised, script sonrası current text beklentisidir. Response capture’ın original bytes’ı değildir. Regression, bozulan invariant’ı adlandırır; bütün rendering pipeline’ını tek failure diye yeniden yazmaz.
DOM/CSS ledger
Hidden0×0 / reserved80×12 / both nodes retained
Invariant comparison
Updated current text / original source distinct
Evidence verdict
Verdict yok
Geometry verdict paint capture’a genişlemedi
paintCaptured false’tur. DOM ve geometry observations bu invariant’ları ölçebilir; compositor veya GPU output’u ayrı capture ister. Beklenen DOM/box değerlerinin verilmesi, bu browser’da gerçek ölçüm yapıldığı anlamına gelmez.
DOM/CSS ledger
Hidden0×0 / reserved80×12 / both nodes retained
Invariant comparison
Updated current text / original source distinct
Evidence verdict
DOM/box expectations known / paint unmeasured
Regression minimum observable fields ile tutuldu
Node presence, parsed text, CSS dimensions ve local update sonucu ayrı kontrol edilir. Full page veya private content toplamak şart değildir. Reader, hangi state’in neden değişmediğini açıklayarak measurement scope’unu korur.
DOM/CSS ledger
Hidden0×0 / reserved80×12 / both nodes retained
Invariant comparison
Updated current text / original source distinct
Evidence verdict
Recheck node/text/box/update separately

Paint gap

Paint record’unun yokluğu açık seçildi
Artifact authored HTML/CSS ile expected API sonuçlarını yan yana saklar. Yeni browser gözleminde parser DOM text ve TBODY’yi, getComputedStyle style değerlerini, getBoundingClientRect ise CSS px box ölçülerini üretir. expected alanını böyle bir ölçüm yerine koyma; boyut ölçümü screenshot veya paint receipt’i de sağlamaz. Artifact expected.paintCaptured false verir. Note box dimensions ve current text bilinir, fakat screenshot veya compositor capture yoktur. Bu observations, görünürlük sorusunun yalnız bir bölümünü yanıtlar.
DOM/CSS ledger
DOM/text/box known / paint capture absent
Invariant comparison
Interpretation bekliyor
Evidence verdict
Verdict yok
Box ölçümü gerçek pixels yerine geçmedi
Width 120 ve height 24 text’in hangi exact pixels ile boyandığını kanıtlamaz. Font, viewport, zoom ve device pixel ratio farklı etkiler taşır. Geometry ile screenshot evidence farklı observer scope’larına aittir.
DOM/CSS ledger
DOM/text/box known / paint capture absent
Invariant comparison
CSS geometry ≠ captured pixels
Evidence verdict
Verdict yok
Benign visibility controls missing paint’i doldurmadı
display:none ve visibility:hidden beklentileri normal CSS mekanizmasını açıklar. Bunların source’ta doğru olması bütün rendered image’ın doğru olduğunu ölçmez. Normal fixture görünümü eksik capture yerine kopyalanmaz.
DOM/CSS ledger
Expected CSS effects are not screenshot evidence
Invariant comparison
CSS geometry ≠ captured pixels
Evidence verdict
Verdict yok
Pipeline stage data transfer’dan ayrıldı
DOM update veya display-list handoff HTTP exchange değildir. Stage alias’ları full Chromium fragment/display-list capture sağlamaz. Yeni request veya server delivery sonucu yalnız local geometry değişiminden türetilmez.
DOM/CSS ledger
Expected CSS effects are not screenshot evidence
Invariant comparison
Local stages / no HTTP transfer inference
Evidence verdict
Verdict yok
Paint verdict unknown olarak bırakıldı
Bu evidence için exact painted pixels UNKNOWN kalır. Paint capture yokluğu rendering failure kanıtı değildir; normal geometry de pixel-perfect proof değildir. Accessibility tree’nin bütünü için ayrıca appropriate observation gerekir.
DOM/CSS ledger
Expected CSS effects are not screenshot evidence
Invariant comparison
Local stages / no HTTP transfer inference
Evidence verdict
UNKNOWN: exact painted pixels
Yeni observation sınırı purpose’a bağlandı
Pixel sorusu için viewport, font/zoom context ve gerçek capture gerekir. DOM sorusu için scoped node/text observation yeterli olabilir. Hangi sorunun yanıtlandığı belirtilmeden iki evidence family aynı “verified” etiketiyle kapatılmaz.
DOM/CSS ledger
Expected CSS effects are not screenshot evidence
Invariant comparison
Local stages / no HTTP transfer inference
Evidence verdict
Choose DOM or pixel evidence for the actual question

UYGULAMA · GÜVENLİK KONTROLÜ · DOĞRULAMA

Data’yı güvenilir context’e yerleştir

Artifact authored HTML/CSS ile expected API sonuçlarını yan yana saklar. Yeni browser gözleminde parser DOM text ve TBODY’yi, getComputedStyle style değerlerini, getBoundingClientRect ise CSS px box ölçülerini üretir. expected alanını böyle bir ölçüm yerine koyma; boyut ölçümü screenshot veya paint receipt’i de sağlamaz. Plain text için textContent gibi text odaklı API seçmek, data’nın text olarak işlenmesini açık kılar. HTML parser gerektiren bir ürün özelliği varsa accepted markup ve trust policy ayrıca tasarlanır; parser’ın source’u tree’ye çevirebilmesi authorization veya sanitization kanıtı değildir. Bu ders normal text update yapar; ileri output-context derslerinin yerine bir güvenlik garantisi vermez.

Server’ın vermemesi gereken private data’yı CSS ile gizlemek protection sağlamaz. Data delivery kararı server policy’de; görünürlük ve layout ise client model’de tutulur. Artifact hidden node’u DOM’da tutarak bu ayrımı öğretir. Öğrenciye yalnız “gizli görünüyor” sonucunu değil, data’nın hangi layer’a kadar teslim edildiğini açıklatma hedeflenir.

Kontrolleri observable invariant’lara bağla

Bu fixture’ın beklenen invariant’ları küçüktür: character reference’ın DOM text’i, implied TBODY, DOM’da kalan hidden node, note’un fixed box ölçüsü ve current text update’i. Bunlar native browser APIs ile gözlenebilir. Paint talimatları ve compositor internals ayrı capture olmadan bu testin verdiği kanıt değildir.

İçerik ve scene aynı normal ledger’ı paylaşır; manuel adım ve reduced motion, source/DOM/box/frame ayrımını korur. Bir regressed UI testinde tüm pipeline’ı yeniden adlandırmak yerine bozulan invariant yazılır. Öğrenci kabulü için de ölçüm yapmak yetmez: “hangi state neden değişmedi?” sorusunun cevabı açıklanmalıdır. Native browser sonucu ile öğrenme sonucu ayrı kayıtlar olarak kalır.

ŞİMDİ VAKAYA UYGULA

Source, parsed DOM, local update ve paint hangi ayrı observations ister?

Atlas & Web source’u DOM’da Atlas & Web olur; local update text’i Atlas — revised yapar. Draft node’u display:none ile box üretmez ama DOM’da kalır. Reserve visibility:hidden ile yer tutar. Box geometry paint capture değildir.

Vakadaki response receipt, parsing, callback ve görünür DOM sonucunu sıraya koy. Eski başlığın kalmasını bu dersteki browser state ayrımlarıyla açıklamayı dene.

Bağlı vaka dosyasını aç ↗

ÖRNEĞİ BİRLİKTE OKUYALIM

Source / DOM / box / frame ledger

Bir alan seç; hangi sonucu desteklediğini ve nerede yetersiz kaldığını incele.

Ham kaydı ve alan açıklamalarını oku

{
  "htmlFragment": "<main><p id=\"note\">Atlas &amp; Web</p><p id=\"hidden\">Draft</p><p id=\"reserved\">Reserve</p></main>",
  "css": "#note{width:120px;height:24px;margin:0;padding:0;border:0;box-sizing:border-box;color:rgb(15,118,110)}#hidden{display:none}#reserved{visibility:hidden;width:80px;height:12px;margin:0;padding:0;border:0;box-sizing:border-box}",
  "parserFixture": "<table><tr><td>Atlas</td></tr></table>",
  "expected": {
    "parsedNoteText": "Atlas & Web",
    "impliedTableChild": "TBODY",
    "hiddenNodePresent": true,
    "noteWidth": 120,
    "noteHeight": 24,
    "hiddenWidth": 0,
    "hiddenHeight": 0,
    "reservedWidth": 80,
    "reservedHeight": 12,
    "reservedVisibility": "hidden",
    "noteColor": "rgb(15, 118, 110)",
    "revisedNoteText": "Atlas — revised",
    "paintCaptured": false
  },
  "measurementUnits": "CSS px;synthetic fixed style,no padding/border",
  "pipelineStages": "Instructional aliases;not full Chromium fragment/display-list capture"
}

htmlFragment: Network capture değil, native parser için normal authored source.
expected.impliedTableChild: Parser’ın source’da yazılmayan table section node’u.
expected.noteWidth: Fixed border-box geometry; screenshot veya paint kanıtı değil.
expected.paintCaptured: False: DOM/geometry gözlemi compositor capture değildir.

Selected normal HTML/CSS fixture. Source, live DOM ve CSS-pixel geometry ölçümü paint/GPU capture veya tüm accessibility tree doğrulaması değildir.

İki yanlış kanı

View Source ve current DOM birebir aynıdır.

Parser implied nodes ekleyebilir; script current tree’yi değiştirir. Original response ayrı kanıttır.

DOM’da bulunan her node’un visible box’ı vardır.

display:none normal box üretmez; visibility:hidden box tutabilir. DOM,geometry ve visible pixels ayrıdır.

SIRA SENDE

Bu hikâyeyi sen çöz.

Sonucu tahmin et, kanıtın sınırını bul ve nedenini kendi cümlenle anlat.

#hidden için display:none uygulanıyor. Node DOM’dan silinir mi?

Hayır. Node var; box width ve height 0.
Evet. Görünmeyen her element parser tarafından silinir.

Gerekçeli cevabı oku

Hayır. Node var; box width ve height 0. — hiddenNodePresent=true. display:none bu örnekte layout box üretmez; tree’den node silmez.

Source içindeki & ile parsed text içindeki & ve implied TBODY neyi gösterir?

Dersten seçilen artifact alanları; öğretim örneği

htmlFragment: <main><p id="note">Atlas & Web</p><p id="hidden">Draft</p><p id="reserved">Reserve</p></main>
expected.parsedNoteText: Atlas & Web
expected.impliedTableChild: TBODY

DOM, source byte’larının değişmeden kopyasıdır.
Parser character reference’ı çözer; tree kuralları node ekleyebilir.

Gerekçeli cevabı oku

Parser character reference’ı çözer; tree kuralları node ekleyebilir. — parsedNoteText Atlas & Web olur. Table örneğinde TBODY source’a yazılmasa da oluşturulabilir.

visibility:hidden için 80×12 box var, fakat paintCaptured=false. Bu ikisi birlikte ne söyler?

Gerekçeli cevabı oku

Element layout alanını koruyabilir, fakat görünür content boyaması beklenmez. 80×12 CSS px rect, gerçek pixel capture değildir. Bu belirli style örneği bütün browser render pipeline’ını veya compositor frame completion’ını doğrulamaz.

□ Ayrılan layout alanı ile görünen content’i ayırdım.

□ Geometry’den paint completion sonucu çıkarmadım.

Uygulama konsolunu aç · request / response / browser

Request, URL, cookie ve DOM örneklerini ayrıca aç

MANUAL LAB

Browser Observation Lab

Document, DOM/CSS ve event-loop sonuçlarını 18 alanda tahmin et; native Browser gözlemini kaydet ve nedenini açıkla.

Tahmin → gözlem → açıklama workbook’unu aç ↗GitHub kaynakları ↗

Kaynaklar ve kapsam

WHATWG HTML: parsing HTML documents13.2.1 Overview of the parsing model; 13.2.2 Parse errors; 13.2.6 Tree construction; in table and in table body modes
WHATWG DOM: trees and textContentTrees; Nodes; textContent; string replace all
CSS Object Model Level 1CSSStyleSheet; CSSStyleRule; getComputedStyle resolved values
Chromium RenderingNG architectureRendering pipeline structure:Style, Layout, Pre-paint, Paint, Commit, Layerize, Raster, Activate, Aggregate, Draw; Threads
Element getBoundingClientRectReturn value; box sizing; border box; empty border boxes
MDN: Document Object ModelDocument structure; programming interface; DOM and JavaScript
DOMParser parseFromStringDescription:text/html, Document, inert parse; separate document

KENDİ NOTUN / BU TARAYICIDA

HTML’den DOM, layout ve paint’e

1. Core · Mekanizma

Visible note

Hidden vs reserved

DOM text update

HTML bytes henüz DOM değildir

Tree construction bir string copy değildir

DOM bir canlı data model’idir

CSSOM ile computed style farklı kayıtlar

Render tree bir öğretim kısaltmasıdır

Layout, paint ve frame presentation

2. Red · Güven ve etki

Hidden data

Source/live DOM

Source ve current DOM’u aynı delil yapma

Geometric ölçümün sınırını koru

3. Blue · Güvenli geliştirme ve savunma

Geometry ledger

Paint gap

Data’yı güvenilir context’e yerleştir

Kontrolleri observable invariant’lara bağla

Source, parsed DOM, local update ve paint hangi ayrı observations ister?

İki yanlış kanı

#hidden için display:none uygulanıyor. Node DOM’dan silinir mi?

Source içindeki &amp; ile parsed text içindeki & ve implied TBODY neyi gösterir?

visibility:hidden için 80×12 box var, fakat paintCaptured=false. Bu ikisi birlikte ne söyler?

Browser Observation Lab

Kaynaklar ve kapsam

Source içindeki & ile parsed text içindeki & ve implied TBODY neyi gösterir?