GetClientRectsMixed() — react Function Reference

Architecture documentation for the GetClientRectsMixed() function in TextNodesCase.js from the react codebase.

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ GetClientRectsMixed() — react Function Reference

Dependency Diagram

graph TD
  b4eef17f_427e_7579_69cd_d4a266d0b82c["GetClientRectsMixed()"]
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  b4eef17f_427e_7579_69cd_d4a266d0b82c -->|defined in| f361f511_643d_fef8_84d3_4e38e9129616
  style b4eef17f_427e_7579_69cd_d4a266d0b82c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js lines 32–71

function GetClientRectsMixed() {
  return (
    <TestCase title="getClientRects - Mixed Content">
      <TestCase.Steps>
        <li>Click the "Print Rects" button</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        The fragment contains both text nodes and elements. getClientRects
        should return bounding rectangles for both text content (via Range API)
        and elements.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <PrintRectsFragmentContainer>
            Text before the span.
            <span
              style={{
                display: 'inline-block',
                padding: '5px 10px',
                backgroundColor: 'lightblue',
                border: '1px solid blue',
                margin: '0 5px',
              }}>
              Element
            </span>
            Text after the span.
            <div
              style={{
                width: '500px',
                height: '50px',
                backgroundColor: 'lightpink',
                border: '1px solid black',
              }}></div>
            More text at the end.
          </PrintRectsFragmentContainer>
        </Fixture.Controls>
      </Fixture>
    </TestCase>
  );
}