Code view:
From the node mapping Only one solution
A painting is a person's account of this edit as text , recorded independently of the node mapping - a rendering often has several equally defensible answers where the mapping has one. Deletions and insertions carry no position on the opposite side in a painting, so that panel draws no caret for them.
Before
1 <!DOCTYPE html>
2 <link rel="match" href="../expected/selection-text-color-ref.html" />
3 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-417">
4 <style>
5 span {
6 color: red;
7 }
8 </style>
… lines 9–14 unchanged (6 lines)
After
1 <!DOCTYPE html>
2
3 <style>
4 span {
5 color: red;
6 }
7 </style>
8 <div contenteditable>lorem ipsum <span>sit dolor amet</span></div>
… lines 9–13 unchanged (5 lines)
Before
1 <!DOCTYPE html>
2 <link rel="match" href="../expected/selection-text-color-ref.html" />
3 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-417">
4 <style>
5 span {
6 color: red;
7 }
8 </style>
… lines 9–14 unchanged (6 lines)
After
1 <!DOCTYPE html>
2 <meta name="fuzzy" content="maxDifference=0-1;totalPixels=0-417">
3 <style>
4 span {
5 color: red;
6 }
7 </style>
8 <div contenteditable>lorem ipsum <span>sit dolor amet</span></div>
… lines 9–13 unchanged (5 lines)
Before
document doctype <! "<!"
doctype "DOCTYPE"
> ">"
element self_closing_tag < "<"
tag_name "link"
attribute attribute_name "rel"
= "="
quoted_attribute_value " "\""
attribute_value "match"
" "\""
attribute attribute_name "href"
= "="
quoted_attribute_value " "\""
attribute_value "../expected/selection-text-color-ref.html"
" "\""
/> "/>"
element start_tag < "<"
tag_name "meta"
attribute attribute_name "name"
= "="
quoted_attribute_value " "\""
attribute_value "fuzzy"
" "\""
attribute attribute_name "content"
= "="
quoted_attribute_value " "\""
attribute_value "maxDifference=0-1;totalPixels=0-417"
" "\""
> ">"
style_element start_tag < "<"
tag_name "style"
> ">"
raw_text "\nspan {\n color: red;\n}\n"
end_tag </ "</"
tag_name "style"
> ">"
element (+22 nodes collapsed)
script_element start_tag < "<"
tag_name "script"
> ">"
raw_text "\nconst divElm = document.querySelector('div[contenteditable]"...
end_tag </ "</"
tag_name "script"
> ">"
After
document doctype <! "<!"
doctype "DOCTYPE"
> ">"
element start_tag < "<"
tag_name "meta"
attribute attribute_name "name"
= "="
quoted_attribute_value " "\""
attribute_value "fuzzy"
" "\""
attribute attribute_name "content"
= "="
quoted_attribute_value " "\""
attribute_value "maxDifference=0-1;totalPixels=0-417"
" "\""
> ">"
style_element start_tag < "<"
tag_name "style"
> ">"
raw_text "\nspan {\n color: red;\n}\n"
end_tag </ "</"
tag_name "style"
> ">"
element (+22 nodes collapsed)
script_element start_tag < "<"
tag_name "script"
> ">"
raw_text "\nconst divElm = document.querySelector('div[contenteditable]"...
end_tag </ "</"
tag_name "script"
> ">"
Keybindings
j / k next / previous visible node (tree panels)
h / l collapse / expand the focused node
g / G jump to first / last visible node
Tab switch focus between Before/After panels
/ search: jump to next node whose text contains a given string
a jump the other panel to this node's mapped counterpart
i hide identical matches, showing only inserted/deleted/updated nodes and their ancestors
v cycle the view: split / code only / tree only
p cycle what the code view renders: the node mapping, then each human painting
r mark this fixture as reviewed, or forget the mark (kept in this browser only)
n open a random fixture not yet marked as reviewed
? toggle this help
Search (plain substring, no regex):